/* =======================================================
   FONT CUSTOM & RESET
   ======================================================= */

/* 1. Mendaftarkan Font Custom */
@font-face {
    font-family: 'Saqu';
    src: url('saqu.ttf') format('truetype'); /* Pastikan nama file sesuai */
    font-weight: normal;
    font-style: normal;
}

/* 2. Terapkan Font ke Seluruh Aplikasi */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Saqu', sans-serif; /* Prioritaskan Font Saqu */
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

/* ... Lanjutkan dengan kode CSS lainnya ... */


body {
    background-color: #333; /* Background luar gelap */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

/* CONTAINER UTAMA (LAYAR HP) */
#app-container {
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

/* --- HALAMAN GENERIC STYLES --- */
.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    background-color: #F5F6F8;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

/* --- ANIMASI TRANSISI (ZOOM EFFECT) --- */
.page-hidden {
    display: none !important; /* Tambahkan !important di sini */
}


.zoom-out-exit {
    transform: scale(0.9);
    opacity: 0;
    pointer-events: none;
}

.zoom-in-enter {
    animation: zoomInKeyframe 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes zoomInKeyframe {
    from { transform: scale(1.1); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.zoom-out-enter {
    animation: zoomOutEnterKeyframe 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes zoomOutEnterKeyframe {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.zoom-in-exit {
    transform: scale(1.1);
    opacity: 0;
    pointer-events: none;
}

/* =========================================
   HALAMAN 1: HOME (Transfer & Bayar)
   ========================================= */
.home-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 16px; background-color: #F5F6F8;
}

.header-title {
    font-size: 20px; font-weight: 700; color: #222;
    flex-grow: 1; margin-left: 12px;
}

.icon-btn-simple {
    width: 27px; height: 27px; color: #333; cursor: pointer;
}

.schedule-btn {
    background-color: #E8F0FE; width: 36px; height: 36px;
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; color: #1066D6;
}

/* Menu Grid */
.menu-card {
    background: white; margin: 0 16px; padding: 20px 10px;
    border-radius: 16px; display: flex; justify-content: space-between;
    align-items: flex-start; box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.menu-item {
    display: flex; flex-direction: column; align-items: center;
    width: 25%; text-align: center; position: relative; cursor: pointer;
}

.menu-item:active { transform: scale(0.95); opacity: 0.8; }

.icon-box {
    width: 48px; height: 48px; margin-bottom: 8px;
    border-radius: 12px; display: flex; align-items: center;
    justify-content: center; position: relative; overflow: hidden;
}

.icon-box img { width: 65px; height: 65px; object-fit: contain; }

.bg-blue-light { background-color: #E6F0FF; }
.bg-orange-light { background-color: #FFF3E0; }

.menu-text {
    font-size: 11px; color: #333; font-weight: 500; line-height: 1.3;
}

.badge-new {
    position: absolute; top: -8px; right: 8px;
    background-color: #FF5A5F; color: white; font-size: 9px;
    font-weight: 700; padding: 2px 6px;
    border-radius: 8px 8px 8px 0; border: 2px solid white; z-index: 2;
}

/* Content Area Home */
.home-content {
    background-color: white; margin-top: 24px;
    border-top-left-radius: 24px; border-top-right-radius: 24px;
    min-height: calc(100vh - 200px); padding-top: 24px;
}

.search-container { padding: 0 16px; margin-bottom: 20px; }
.search-box {
    background-color: #F5F6F8; border-radius: 30px;
    padding: 12px 16px; display: flex; align-items: center;
}
.search-input {
    border: none; background: transparent; font-size: 14px;
    width: 100%; outline: none; color: #333;
}

.home-tabs { display: flex; border-bottom: 1px solid #EEEEEE; }
.h-tab {
    flex: 1; text-align: center; padding-bottom: 12px;
    font-size: 14px; font-weight: 600; cursor: pointer; position: relative;
}
.h-tab.active { color: #1066D6; }
.h-tab.active::after {
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: 100%; height: 2px; background-color: #1066D6;
}
.h-tab.inactive { color: #999; }

.empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding-top: 60px;
}
.illustration-wrapper { width: 230px; height: 190px; margin-bottom: 20px; }
.illustration-wrapper img { width: 100%; height: 100%; object-fit: contain; }


/* =========================================
   HALAMAN 2: TRANSFER DANA (Baru)
   ========================================= */
#page-transfer { background-color: white; }

.transfer-header {
    display: flex; align-items: center; justify-content: center;
    padding: 20px 16px; position: relative; background-color: white;
}

.back-arrow-container {
    position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%); padding: 5px; cursor: pointer;
}

.transfer-title { font-size: 18px; font-weight: 700; color: #222; }

.transfer-tabs { display: flex; margin-top: 10px; padding: 0 16px; }

.t-tab {
    flex: 1; text-align: center; padding-bottom: 12px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    position: relative; color: #999;
}
.t-tab.active { color: #1066D6; }
.t-tab.active::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 3px; background-color: #1066D6;
    border-top-left-radius: 3px; border-top-right-radius: 3px;
}

.form-container { padding: 24px 16px; }

.input-group {
    background-color: #F5F6F8; border-radius: 12px;
    padding: 16px; margin-bottom: 16px; display: flex;
    align-items: center; justify-content: space-between; cursor: pointer;
}

.input-label {
    color: #666; font-size: 14px; width: 100%;
    border: none; background: transparent; outline: none;
}

.input-text::placeholder { color: #666; opacity: 1; }

.chevron-down { color: #666; width: 20px; height: 20px; }

.bottom-action {
    position: absolute; bottom: 30px; left: 16px; right: 16px;
}

.btn-lanjut {
    width: 100%; background-color: #E0E0E0; color: white;
    border: none; padding: 16px; border-radius: 30px;
    font-size: 16px; font-weight: 600; cursor: default; text-align: center;
}


/* =========================================
   MODAL PILIH BANK (BOTTOM SHEET) - NEW
   ========================================= */

/* Overlay Gelap */
.modal-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);
    z-index: 999; opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }

/* Container Modal (Slide Up) */
.bank-modal {
    position: absolute; bottom: 0; left: 0;
    width: 100%; max-height: 90vh; /* Max 90% layar */
    background-color: white;
    border-top-left-radius: 20px; border-top-right-radius: 20px;
    z-index: 1000;
    transform: translateY(100%); /* Sembunyi di bawah */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
}
.bank-modal.active { transform: translateY(0); }

.modal-header {
    display: flex; justify-content: space-between;
    align-items: center; padding: 20px 20px 10px 20px;
}
.modal-title { font-size: 18px; font-weight: 700; color: #222; }

.btn-close-modal {
    background: none; border: none; cursor: pointer; color: #222;
}

.modal-search-container {
    padding: 10px 20px 20px 20px; border-bottom: 1px solid #F0F0F0;
}

/* List Bank Container */
.bank-list-container {
    overflow-y: auto; flex-grow: 1; padding-bottom: 30px;
}

/* Item List Bank */
.bank-item {
    padding: 18px 20px; border-bottom: 1px solid #F5F6F8;
    font-size: 14px; font-weight: 500; color: #333;
    cursor: pointer; text-transform: uppercase;
    transition: background 0.2s;
}
.bank-item:active { background-color: #F5F6F8; }
/* =========================================
   LOGIKA INPUT REKENING (WARNA & FOKUS)
   ========================================= */

/* Keadaan Normal (Keyboard tutup / tidak diketik) */
#input-rekening {
    color: #333; /* Hitam */
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Keadaan Fokus (Saat diklik / mengetik / keyboard muncul) */
#input-rekening:focus {
    color: #1066D6; /* Biru BCA/Bank */
    font-weight: 600; /* Sedikit lebih tebal agar jelas */
}

/* Pastikan Placeholder tetap abu-abu, jangan ikut biru */
#input-rekening::placeholder {
    color: #999; 
    font-weight: 400;
}
/* =========================================
   FLOATING LABEL LOGIC (LABEL PINDAH ATAS)
   ========================================= */

/* Atur ulang input-group agar bisa menampung label gerak */
.input-group {
    background-color: #F5F6F8;
    border-radius: 12px;
    padding: 0 16px; /* Padding atas bawah diatur oleh flex */
    margin-bottom: 16px;
    height: 64px; /* Tinggi fix agar animasi rapi */
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent; /* Persiapan untuk border focus */
    transition: border-color 0.3s;
}

.input-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Style Awal Label (Posisi Tengah) */
.floating-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    font-size: 14px;
    color: #666;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none; /* Agar klik tembus ke input */
}

/* Style Input Field & Display Value */
.input-field, .input-display {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 16px;
    font-weight: 600;
    color: #222;
    padding-top: 18px; /* Beri ruang untuk label di atas */
    opacity: 0; /* Sembunyikan dulu kalau kosong */
    transition: opacity 0.2s;
}

/* --- LOGIKA SAAT AKTIF (Label Naik) --- */

/* 1. Saat container punya class 'has-value' (Untuk Bank) */
.input-group.has-value .floating-label {
    top: 14px;
    font-size: 11px;
    color: #666;
    transform: translateY(0);
}

.input-group.has-value .input-display {
    opacity: 1;
}

/* 2. Saat Input Rekening Fokus atau Ada Isi */
/* Label Naik saat Input Fokus atau Valid (ada isi) */
.input-field:focus + .floating-label,
.input-field:not(:placeholder-shown) + .floating-label {
    top: 14px;
    font-size: 11px;
    color: #666; /* Tetap abu saat naik, atau ganti biru jika mau */
    transform: translateY(0);
}

/* Ubah warna label jadi biru HANYA saat mengetik (fokus) */
.input-field:focus + .floating-label {
    color: #1066D6;
}

/* Munculkan input text saat fokus atau ada isi */
.input-field:focus,
.input-field:not(:placeholder-shown) {
    opacity: 1;
}

/* Ganti warna angka jadi biru saat fokus */
.input-field:focus {
    color: #1066D6;
}
/* =========================================
   HALAMAN 3: AMOUNT & DETAILS
   ========================================= */

.amount-header {
    display: flex; align-items: center; justify-content: center;
    padding: 20px 16px; position: sticky; top:0; z-index:10;
    background-color: white; /* Header tetap putih */
}
.amount-title { font-size: 18px; font-weight: 700; color: #222; }

/* Scroll Content Area (Background Abu) */
.scroll-content {
    background-color: #F5F6F8;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 100px;
}

/* Base Card Style */
.detail-card {
    background-color: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.label-small { font-size: 13px; color: #666; margin-bottom: 8px; font-weight: 500;}

/* --- Component: Recipient Info --- */
.recipient-row { display: flex; align-items: center; margin-bottom: 20px; }

.avatar-container { position: relative; margin-right: 12px; }
.avatar-circle {
    width: 40px; height: 40px; background-color: #F0F0F0;
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-weight: 600; color: #555; font-size: 14px;
}
.bank-badge {
    position: absolute; bottom: -2px; right: -2px;
    width: 18px; height: 18px; background: white;
    border-radius: 50%; padding: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.bank-badge img { width: 100%; height: 100%; object-fit: contain; }

.recipient-name { font-weight: 700; font-size: 14px; color: #222; margin-bottom: 2px;}
.recipient-details { font-size: 12px; color: #666; }

/* --- Component: Input Money --- */
.input-money-wrapper {
    display: flex; align-items: center; margin-bottom: 16px;
}
.currency-prefix { font-size: 28px; font-weight: 700; color: #222; margin-right: 8px; }

.money-input {
    border: none; outline: none; font-size: 32px; font-weight: 700;
    color: #222; width: 100%; background: transparent;
    caret-color: #1066D6; /* Kursor biru */
}
.money-input::placeholder { color: #ccc; }

/* Note Input */
.note-section { display: flex; align-items: center; border-top: 1px solid #f0f0f0; padding-top: 12px;}
.note-input {
    border: none; outline: none; margin-left: 10px; font-size: 14px;
    width: 100%; color: #333;
}

/* --- Component: Source of Funds --- */
.card-row-content {
    display: flex; justify-content: space-between; align-items: flex-start;
}
.card-row-content.center-align { align-items: center; }

.source-name { font-size: 14px; font-weight: 400; color: #222; margin-bottom: 4px; }
.source-balance { font-size: 14px; font-weight: 600; color: #222; }
.action-link { color: #1066D6; font-weight: 600; font-size: 14px; cursor: pointer; }

/* --- Component: Transfer Type --- */
.type-text { font-size: 14px; font-weight: 500; color: #222; }
.strike-price { text-decoration: line-through; color: #999; margin: 0 4px; }
.free-text { color: #00A53C; font-weight: 700; }
.quota-info { color: #00A53C; font-size: 12px; margin-top: 6px; font-weight: 500; }

/* --- Component: Purpose --- */
.purpose-text { font-size: 14px; font-weight: 500; color: #222; }

/* --- Component: Schedule --- */
.single-row { display: flex; justify-content: space-between; align-items: center; padding: 20px 16px; }
.schedule-left { display: flex; align-items: center; }
.schedule-text { font-size: 14px; font-weight: 500; color: #222; }

/* Helper classes */
.clickable-card:active { background-color: #f9f9f9; }
/* =========================================
   MODAL KONFIRMASI (TICKET STYLE)
   ========================================= */

/* Base Modal Style (Mirip Bank Modal tapi khusus layout ini) */
.bottom-sheet-modal {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background-color: white;
    border-top-left-radius: 20px; border-top-right-radius: 20px;
    z-index: 1000;
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
    max-height: 85vh;
}
.bottom-sheet-modal.active { transform: translateY(0); }

.confirm-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 20px 10px 20px;
}
.confirm-title { font-size: 16px; font-weight: 700; color: #222; width: 100%; text-align: center; margin-left: 24px;}
.close-icon { cursor: pointer; }

.confirm-body { padding: 10px 20px; background-color: white; }

/* --- TICKET CARD STYLING --- */
.ticket-card {
    border: 1px solid #E0E0E0;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.ticket-top { padding: 20px 20px 16px 20px; }
.ticket-label { font-size: 16px; font-weight: 700; color: #222; text-transform: uppercase; margin-bottom: 4px; }
.ticket-sublabel { font-size: 12px; color: #999; }

/* Divider Logic (Garis Putus & Coakan) */
.ticket-divider {
    position: relative;
    height: 20px;
    display: flex; align-items: center; justify-content: center;
}
.dashed-line {
    width: 100%; height: 1px;
    border-top: 1px dashed #DDD;
    margin: 0 10px;
}
/* Efek Coakan (Lingkaran Putih menutup border) */
.cutout-left, .cutout-right {
    position: absolute; top: 50%;
    width: 20px; height: 20px;
    background-color: white; /* Samakan dengan bg modal/body */
    border-radius: 50%;
    border: 1px solid #E0E0E0;
    transform: translateY(-50%);
    z-index: 2;
}
.cutout-left { left: -14px; } /* Geser keluar agar jadi setengah lingkaran */
.cutout-right { right: -14px; }

.ticket-middle { padding: 10px 20px 20px 20px; border-bottom: 1px solid #f9f9f9; }
.big-amount { font-size: 24px; font-weight: 700; color: #222; margin-bottom: 4px; }
.ticket-source { font-size: 12px; color: #666; }

.ticket-bottom { padding: 16px 20px; background-color: #FAFAFA; }
.detail-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; color: #555; }
.detail-row:last-child { margin-bottom: 0; }
.detail-row span:last-child { font-weight: 600; color: #333; }

/* Tombol Action */
.confirm-action { padding: 20px; padding-bottom: 30px; }
.btn-transfer-final {
    width: 100%; background-color: #1066D6; color: white;
    border: none; padding: 16px; border-radius: 30px;
    font-size: 16px; font-weight: 700; cursor: pointer;
}
.btn-transfer-final:active { background-color: #0E5BB5; }
/* =========================================
   HALAMAN 4: PIN VERIFICATION
   ========================================= */

.pin-header {
    padding: 20px 16px;
    display: flex;
    align-items: center;
}

.pin-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

.pin-title {
    font-size: 22px;
    font-weight: 700;
    color: #003399; /* Biru Tua sesuai gambar */
    margin-bottom: 8px;
    text-align: center;
}

.pin-subtitle {
    font-size: 14px;
    color: #333;
    margin-bottom: 40px;
}

/* PIN Boxes Styling */
.pin-box-container {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    cursor: text;
}

.pin-box {
    width: 45px;
    height: 50px;
    background-color: #F5F6F8; /* Abu-abu muda */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #333;
    position: relative;
    border: 1px solid transparent;
    transition: all 0.2s;
}

/* State Aktif (Border Biru + Cursor) */
.pin-box.active {
    background-color: #F0F7FF; /* Putih kebiruan */
    border: 2px solid #80bdff; /* Border biru muda */
}

/* Dot Hitam saat terisi */
.pin-box.filled::after {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #333;
    border-radius: 50%;
}

/* Animasi Kursor Berkedip */
.cursor-blink {
    width: 2px;
    height: 24px;
    background-color: #1066D6; /* Biru */
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.forgot-pin-text {
    color: #FF9900; /* Orange sesuai gambar */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
/* =========================================
   HALAMAN 5: PROCESS / SUCCESS PAGE (FINAL)
   ========================================= */

/* Layout Flex untuk menengahkan konten */
#page-process {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Konten di atas, tombol di bawah */
    background-color: #F5F6F8; /* Background Abu Muda */
}

.process-content {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px; /* Jarak dari atas agak jauh */
}

/* Styling Ikon Pesawat */
.process-icon-wrapper {
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
    /* Ikon SVG diatur ukurannya via HTML attributes */
}

.process-title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin-bottom: 30px;
    text-align: center;
}

/* Modifikasi Kartu Tiket Khusus Halaman Process */
.process-specific-card {
    width: 100%;
    background: white;
    border-radius: 16px;
    border: none; /* Hilangkan border garis */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); /* Shadow sangat halus */
}

.process-specific-card .ticket-top {
    padding: 24px 24px 20px 24px;
}

.process-specific-card .ticket-label {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-bottom: 6px;
}

.process-specific-card .ticket-sublabel {
    font-size: 13px;
    color: #888;
    font-weight: 500;
}

.process-specific-card .ticket-middle {
    padding: 20px 24px 24px 24px;
    border-bottom: none;
}

.process-specific-card .big-amount {
    font-size: 28px;
    font-weight: 800; /* Lebih tebal */
    color: #222;
}

/* --- LOGIKA COAKAN (CUTOUT) SEMPURNA --- */
.bg-page {
    background-color: #F5F6F8 !important; /* Warna ini HARUS sama dengan background body/page */
    border: none !important; /* Hilangkan border bawaan modal */
    width: 24px;
    height: 24px;
}

.cutout-left { left: -12px; } /* Geser setengah ukuran width */
.cutout-right { right: -12px; }

.dashed-line {
    border-top: 2px dashed #E0E0E0; /* Garis putus-putus abu muda */
    margin: 0 16px;
    opacity: 0.8;
}

/* Footer Section */
.process-footer {
    padding-bottom: 30px;
    background-color: #F5F6F8; /* Pastikan footer menyatu */
}

.footer-info-text {
    font-size: 13px;
    color: #888;
    text-align: center;
    margin-bottom: 20px;
    padding: 0 20px;
    line-height: 1.5;
}

.btn-blue-solid {
    background-color: #1066D6; /* Biru Bank */
    color: white;
    width: 100%;
    border-radius: 30px;
    font-weight: 700;
    font-size: 16px;
    padding: 16px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(16, 102, 214, 0.2);
}

.btn-blue-solid:active {
    background-color: #0D56B3;
}
/* =========================================
   HALAMAN 6: SUCCESS PAGE (FINAL DESIGN)
   ========================================= */

#page-success {
    background-color: #F5F6F8;
    display: flex;
    flex-direction: column;
}

/* --- HEADER BIRU --- */
.success-header {
    background: linear-gradient(180deg, #1066D6 0%, #0D47A1 100%);
    padding: 40px 20px 80px 20px; /* Padding bawah besar untuk overlap */
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom-left-radius: 40px; /* Lengkungan bawah */
    border-bottom-right-radius: 40px;
    position: relative;
    z-index: 1;
}

/* --- ANIMASI CEKLIS (POPUP TERUS MENERUS) --- */
.success-anim-container {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.check-icon {
    width: 60px;
    height: 60px;
    background-color: #00C853; /* Hijau Sukses */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    /* Animasi denyut icon */
    animation: iconPulse 2s infinite ease-in-out;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 1;
    /* Animasi gelombang keluar */
    animation: ringWave 2s infinite ease-out;
}

/* Definisi Animasi */
@keyframes iconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes ringWave {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}

.confetti-deco {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 120px;
    height: 120px;
    animation: spinSlow 10s linear infinite;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Teks Header */
.success-title {
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.success-date {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 500;
}

/* --- CONTENT AREA (KARTU) --- */
.success-content {
    padding: 0 16px;
    margin-top: -60px; /* Menarik kartu ke atas menimpa header biru */
    z-index: 2;
    flex-grow: 1;
}

.success-card {
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: none;
    margin-bottom: 16px;
}

.recipient-row-success {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.rincian-box {
    padding: 16px 20px;
    border-top: 1px solid #F0F0F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* Help Card */
.help-card {
    background: white;
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.help-title { font-size: 14px; font-weight: 700; color: #222; margin-bottom: 4px; }
.help-desc { font-size: 12px; color: #666; line-height: 1.4; }

/* --- FOOTER BUTTONS --- */
.success-footer {
    padding: 16px;
    background: #F5F6F8; /* Menyatu dengan background */
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.btn-primary {
    flex: 1;
    background-color: #1066D6;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.btn-secondary {
    flex: 1;
    background-color: #E3F2FD; /* Biru sangat muda */
    color: #1066D6;
    border: none;
    padding: 14px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}
/* Tambahkan di bagian paling bawah CSS */

/* Header Merah untuk Gagal */
.success-header.failed-state {
    background: linear-gradient(180deg, #D32F2F 0%, #B71C1C 100%);
}

/* Sembunyikan Confetti jika gagal */
.confetti-hidden {
    display: none;
}
/* =========================================
   REVISI: DARK GLASSMORPHISM (HIGH CONTRAST)
   ========================================= */

/* 1. Background Halaman Settings (Overlay Gelap) */
.modern-bg {
    /* Kita gelapkan background belakang agar fokus ke panel */
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(8px); /* Efek blur untuk halaman di belakangnya */
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed; /* Ubah ke fixed agar menimpa layar penuh */
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
}

/* 2. Panel Kaca Utama (Ubah jadi Gelap/Biru Tua) */
.glass-panel {
    /* Warna Biru-Hitam Gelap Transparan agar Teks Putih Terbaca */
    background: rgba(20, 35, 60, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* Border halus bercahaya */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Highlight atas */
    
    box-shadow: 0 20px 50px rgba(0,0,0, 0.5); /* Bayangan lebih tebal */
    border-radius: 24px;
    padding: 40px 24px;
    width: 85%;
    max-width: 360px;
    position: relative;
    z-index: 2;
}

/* Dekorasi Blob (Opsional: Bisa dihapus jika ingin polos) */
.blob { position: absolute; border-radius: 50%; filter: blur(60px); z-index: 1; opacity: 0.5; }
.blob-1 { width: 150px; height: 150px; background: #00c6ff; top: 10%; left: 10%; }
.blob-2 { width: 150px; height: 150px; background: #0072ff; bottom: 10%; right: 10%; }

/* 3. Icon Box (Agar menyatu dengan tema gelap) */
.glass-icon-box {
    width: 70px; height: 70px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* 4. Input Fields (Gelapkan background input) */
.glass-input-group { margin-bottom: 20px; text-align: left; }

.glass-input-group label {
    display: block;
    color: #E0E0E0; /* Abu terang */
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.glass-input-group input {
    width: 100%;
    /* Background input gelap transparan */
    background: rgba(0, 0, 0, 0.3); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 14px 16px;
    border-radius: 12px;
    color: white; /* Teks input putih */
    font-size: 16px;
    font-weight: 600;
    outline: none;
    transition: all 0.3s;
}

.glass-input-group input:focus {
    background: rgba(0, 0, 0, 0.5);
    border-color: #4facfe; /* Border biru saat aktif */
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
}

.glass-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* 5. Tombol (Buat lebih menonjol) */
.btn-glass {
    width: 100%;
    background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%); /* Gradasi Biru */
    color: white;
    border: none;
    padding: 16px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0, 114, 255, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-glass:active {
    transform: scale(0.98);
    box-shadow: 0 2px 10px rgba(0, 114, 255, 0.3);
}
/* =========================================
   ANIMASI IKON GAGAL (PREMIUM CROSS)
   ========================================= */

/* 1. Styling Wadah Lingkaran Merah */
#icon-failed {
    display: none; /* Default sembunyi (diatur JS) */
    background-color: #FF5252; /* Merah cerah modern */
    box-shadow: 0 4px 20px rgba(255, 82, 82, 0.4); /* Glow merah */
    
    /* Animasi Muncul (Pop-up Elastis) */
    animation: failedPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 2. Styling Garis SVG (Persiapan Animasi Gambar) */
.cross-line {
    stroke-dasharray: 20; /* Panjang garis */
    stroke-dashoffset: 20; /* Sembunyikan garis */
    opacity: 0;
    
    /* Animasi Menggambar */
    animation: drawCross 0.4s ease forwards;
}

/* Garis pertama muncul di detik ke-0.4 (setelah lingkaran muncul) */
.cross-line:nth-child(1) {
    animation-delay: 0.3s;
}

/* Garis kedua muncul di detik ke-0.55 */
.cross-line.delay {
    animation-delay: 0.5s;
}

/* 3. Keyframes Animasi */

/* Efek Muncul Meletup (Pop) */
@keyframes failedPop {
    0% { 
        transform: scale(0) rotate(-45deg); 
        opacity: 0; 
    }
    100% { 
        transform: scale(1) rotate(0deg); 
        opacity: 1; 
    }
}

/* Efek Menggambar Garis */
@keyframes drawCross {
    0% {
        stroke-dashoffset: 20;
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* 4. Update Header Merah (Agar lebih cerah/bagus) */
.success-header.failed-state {
    /* Gradasi Merah yang lebih modern & smooth */
    background: linear-gradient(180deg, #FF5252 0%, #D32F2F 100%) !important;
}
/* CSS Tambahan untuk Input Mini (Settings) */
.glass-mini-input {
    width: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    outline: none;
}

/* CSS untuk Item Sumber Dana di Modal */
.source-item {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.source-item:active { background-color: #f9f9f9; }
.src-label { font-weight: 600; color: #222; font-size: 14px; }
.src-val { font-weight: 400; color: #666; font-size: 14px; }
/* =========================================
   ANIMASI HALAMAN PROSES (LOADING)
   ========================================= */

/* 1. Animasi Roket Melayang (Floating) */
.floating-icon svg {
    animation: rocketFloat 2s ease-in-out infinite;
}

@keyframes rocketFloat {
    0% {
        transform: translateY(0px) scale(1);
        filter: drop-shadow(0 5px 15px rgba(41, 98, 255, 0.2));
    }
    50% {
        /* Naik ke atas sedikit dan membesar */
        transform: translateY(-12px) scale(1.05);
        filter: drop-shadow(0 15px 25px rgba(41, 98, 255, 0.4));
    }
    100% {
        transform: translateY(0px) scale(1);
        filter: drop-shadow(0 5px 15px rgba(41, 98, 255, 0.2));
    }
}

/* 2. Animasi Titik (Dots: . .. ...) */
.loading-dots::after {
    display: inline-block;
    animation: dotTyping 1.5s infinite steps(4);
    content: ''; /* Mulai kosong */
    width: 20px; /* Booking tempat agar teks tidak goyang */
    text-align: left;
}

@keyframes dotTyping {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}
/* CSS untuk Info Limit Transaksi */
.warning-text {
    color: #D32F2F; /* Merah */
    font-size: 13px;
    font-weight: 500;
    margin-top: -5px; /* Sedikit naik mendekati input */
    margin-bottom: 15px;
    transition: opacity 0.3s;
}
/* =========================================
   RINCIAN TRANSAKSI (ACCORDION)
   ========================================= */

/* Agar area rincian terlihat menyatu dengan tiket */
.rincian-box {
    cursor: pointer;
    /* Pastikan border bawah dihapus jika rincian terbuka (diatur via JS nanti opsional), 
       tapi default style sudah cukup */
}

/* Container untuk isi rincian */
#rincian-content {
    padding: 0 20px 20px 20px;
    background-color: white;
    border-top: none; 
    animation: slideDown 0.3s ease-out;
}

/* Baris per item rincian */
.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Ubah ke flex-start jika teks panjang */
    margin-bottom: 12px;
    font-size: 14px;
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-label {
    color: #888; /* Warna abu-abu untuk label */
    font-weight: 500;
}

.detail-value {
    color: #222; /* Warna hitam untuk nilai */
    font-weight: 600;
    text-align: right;
    max-width: 60%; /* Agar tidak terlalu lebar jika teks panjang */
}

/* Class untuk memutar panah */
.rotate-180 {
    transform: rotate(180deg);
}

/* Animasi Slide Halus */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* =======================================================
   FONT CUSTOM & RESET (UPDATED SIZES +3px)
   ======================================================= */

@font-face {
    font-family: 'Saqu';
    src: url('saqu.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Saqu', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

#app-container {
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    background-color: #F5F6F8;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.page-hidden {
    display: none !important;
}

/* =========================================
   HALAMAN 1: HOME (UKURAN DINAIKKAN)
   ========================================= */
.home-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 23px 19px; /* +3px */
    background-color: #F5F6F8;
}

.header-title {
    font-size: 23px; /* +3px */
    font-weight: 700; color: #222;
    flex-grow: 1; margin-left: 15px; /* +3px */
}

.icon-btn-simple {
    width: 27px; height: 27px; /* +3px */
    color: #333; cursor: pointer;
}

.schedule-btn {
    background-color: #E8F0FE; 
    width: 39px; height: 39px; /* +3px */
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; color: #1066D6;
}

.menu-card {
    background: white; margin: 0 19px; padding: 23px 13px; /* +3px */
    border-radius: 19px; display: flex; justify-content: space-between;
    align-items: flex-start; box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.icon-box {
    width: 51px; height: 51px; /* +3px */
    margin-bottom: 11px; /* +3px */
    border-radius: 15px; display: flex; align-items: center;
    justify-content: center; position: relative; overflow: hidden;
}

.icon-box img { width: 68px; height: 68px; } /* +3px */

.menu-text {
    font-size: 14px; /* +3px */
    color: #333; font-weight: 500; line-height: 1.3;
}

.badge-new {
    position: absolute; top: -11px; right: 11px; /* +3px */
    background-color: #FF5A5F; color: white; 
    font-size: 12px; /* +3px */
    font-weight: 700; padding: 5px 9px; /* +3px */
    border-radius: 11px 11px 11px 0; border: 2px solid white; z-index: 2;
}

.search-box {
    background-color: #F5F6F8; border-radius: 33px; /* +3px */
    padding: 15px 19px; display: flex; align-items: center; /* +3px */
}

.search-input {
    font-size: 17px; /* +3px */
}

.h-tab {
    font-size: 17px; /* +3px */
    padding-bottom: 15px; /* +3px */
}

/* =========================================
   HALAMAN 2: TRANSFER DANA (UKURAN DINAIKKAN)
   ========================================= */
.transfer-title { font-size: 21px; } /* +3px */

.t-tab {
    font-size: 18px; /* +3px */
    padding-bottom: 15px; /* +3px */
}

.input-group {
    padding: 0 19px; /* +3px */
    height: 67px; /* +3px */
    margin-bottom: 19px; /* +3px */
}

.floating-label {
    font-size: 17px; /* +3px */
}

.input-group.has-value .floating-label,
.input-field:focus + .floating-label,
.input-field:not(:placeholder-shown) + .floating-label {
    top: 17px; /* +3px */
    font-size: 14px; /* +3px */
}

.input-field, .input-display {
    font-size: 19px; /* +3px */
    padding-top: 21px; /* +3px */
}

.btn-lanjut {
    padding: 19px; /* +3px */
    border-radius: 33px; /* +3px */
    font-size: 19px; /* +3px */
}

/* =========================================
   HALAMAN 3: AMOUNT & DETAILS (UKURAN DINAIKKAN)
   ========================================= */
.amount-title { font-size: 21px; } /* +3px */

.label-small { font-size: 16px; margin-bottom: 11px; } /* +3px */

.avatar-circle {
    width: 43px; height: 43px; font-size: 17px; /* +3px */
}

.recipient-name { font-size: 17px; margin-bottom: 5px; } /* +3px */
.recipient-details { font-size: 15px; } /* +3px */

.currency-prefix { font-size: 31px; margin-right: 11px; } /* +3px */
.money-input { font-size: 35px; } /* +3px */

.source-name, .source-balance, .action-link, .type-text, .purpose-text, .schedule-text {
    font-size: 17px; /* +3px */
}

.quota-info { font-size: 15px; margin-top: 9px; } /* +3px */

/* =========================================
   HALAMAN 4: PIN & VERIFIKASI (UKURAN DINAIKKAN)
   ========================================= */
.pin-title { font-size: 25px; margin-bottom: 11px; } /* +3px */
.pin-subtitle { font-size: 17px; margin-bottom: 43px; } /* +3px */

.pin-box {
    width: 48px; height: 53px; font-size: 27px; /* +3px */
}

.forgot-pin-text { font-size: 17px; } /* +3px */

/* =========================================
   HALAMAN 5: PROCESS & SUCCESS (UKURAN DINAIKKAN)
   ========================================= */
.process-title { font-size: 23px; margin-bottom: 33px; } /* +3px */
.ticket-label { font-size: 19px; } /* +3px */
.ticket-sublabel { font-size: 16px; } /* +3px */
.big-amount { font-size: 31px; } /* +3px */

.success-title { font-size: 21px; } /* +3px */
.success-date { font-size: 16px; } /* +3px */

.detail-item { font-size: 17px; margin-bottom: 15px; } /* +3px */

.btn-primary, .btn-secondary {
    padding: 17px; /* +3px */
    font-size: 18px; /* +3px */
}

/* =========================================
   MODAL & SETTINGS (UKURAN DINAIKKAN)
   ========================================= */
.glass-panel {
    padding: 43px 27px; /* +3px */
    max-width: 363px; /* +3px */
}

.glass-input-group label { font-size: 16px; margin-bottom: 11px; } /* +3px */
.glass-input-group input { 
    padding: 17px 19px; font-size: 19px; /* +3px */
}

.btn-glass {
    padding: 19px; font-size: 19px; /* +3px */
}

.bank-item, .src-label, .src-val {
    font-size: 17px; /* +3px */
    padding: 21px 23px; /* +3px */
}

.warning-text {
    font-size: 16px; /* +3px */
}
/* =========================================
   STYLE TAMBAHAN: PESAN ERROR & RINCIAN MERAH
   ========================================= */

/* 1. Container Pesan Gagal di Bawah Help Card */
.failed-msg-container {
    margin-top: 20px;
    padding: 0 10px;
    text-align: center;
    animation: fadeIn 0.5s ease-in;
}

/* Teks Utama Error */
.failed-msg-text {
    color: #D32F2F; /* Merah */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 8px;
}

/* Teks Note Miring */
.failed-msg-note {
    color: #D32F2F;
    font-size: 12px;
    font-style: italic;
    opacity: 0.85;
}

/* 2. Utility Class: Warna Merah untuk Deposit Kurang */
.text-red {
    color: #D32F2F !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* =========================================
   STYLE TAMBAHAN: RIWAYAT TRANSAKSI
   ========================================= */
.history-list {
    padding-bottom: 80px; /* Supaya tidak tertutup menu bawah jika ada */
    display: none; /* Default sembunyi kalau kosong */
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

.history-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.history-icon-box {
    width: 40px;
    height: 40px;
    background-color: #E3F2FD;
    color: #1066D6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.history-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hist-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.hist-details {
    font-size: 12px;
    color: #888;
}

.history-amount {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

/* Warna merah untuk uang keluar */
.amount-out {
    color: #222; 
}
/* ==================================================
   TAMBAHAN: WARNA RIWAYAT (WAJIB ADA)
   Letakkan di paling bawah file saku.css
   ================================================== */

/* Warna Merah untuk Uang Keluar */
.text-red {
    color: #D50000 !important; 
}

/* Warna Hijau untuk Uang Masuk / Refund */
.text-green {
    color: #00C853 !important; 
}

/* Pastikan font tebal agar warna terlihat jelas */
.history-amount {
    font-weight: 600;
}
/* =========================================
   MODERN SETTINGS PAGE (NEON GLASS)
   ========================================= */

/* 1. Animated Background Wrapper */
.settings-bg-animated {
    background: radial-gradient(circle at top left, #1a1a2e, #16213e, #0f3460);
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 2. Floating Blobs Animation */
.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    animation: floatShape 10s infinite alternate;
}
.shape-1 {
    top: -10%; left: -10%; width: 300px; height: 300px;
    background: #e94560;
    animation-delay: 0s;
}
.shape-2 {
    bottom: -10%; right: -10%; width: 250px; height: 250px;
    background: #00fff2;
    animation-delay: -2s;
}
.shape-3 {
    top: 40%; left: 40%; width: 200px; height: 200px;
    background: #5a189a;
    animation-delay: -5s;
    opacity: 0.6;
}

@keyframes floatShape {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 50px) scale(1.1); }
}

/* 3. Glass Card Container */
.settings-card-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    z-index: 10;
    max-height: 100vh;
    overflow-y: auto;
}

.glass-form-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5);
    border-radius: 24px;
    padding: 30px 24px;
    position: relative;
    overflow: hidden;
}

/* Efek kilau diagonal pada kartu */
.glass-form-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    animation: shineCard 8s infinite linear;
}

@keyframes shineCard {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* 4. Header Styling */
.settings-header {
    text-align: center;
    margin-bottom: 25px;
}
.icon-pulse {
    width: 60px; height: 60px;
    margin: 0 auto 15px;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 20px rgba(0, 198, 255, 0.5);
    animation: pulseGlow 2s infinite;
}
.settings-header h2 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 5px;
    font-weight: 700;
}
.settings-header p {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(0, 198, 255, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(0, 198, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 198, 255, 0); }
}

/* 5. Modern Inputs */
.input-modern-group { margin-bottom: 20px; }
.input-modern-group label {
    display: block;
    color: #00fff2;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-left: 4px;
    letter-spacing: 0.5px;
}

.input-wrapper-neon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 15px;
    color: rgba(255,255,255,0.5);
    transition: 0.3s;
}

.input-wrapper-neon input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 16px 16px 45px; /* Padding kiri besar untuk ikon */
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    outline: none;
    transition: all 0.3s ease;
}

.input-wrapper-neon input:focus {
    border-color: #00fff2;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(0, 255, 242, 0.2);
}

.input-wrapper-neon input:focus + .input-icon, 
.input-wrapper-neon input:not(:placeholder-shown) ~ .input-icon {
    color: #00fff2;
}

/* 6. Divider */
.divider-neon {
    display: flex; align-items: center;
    margin: 25px 0 15px 0;
}
.divider-neon::before, .divider-neon::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(255,255,255,0.2);
}
.divider-neon span {
    padding: 0 10px; color: rgba(255,255,255,0.7); font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
}

/* 7. Source Cards Grid */
.sources-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 25px;
}

.source-card-mini {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    gap: 8px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.05);
    transition: 0.3s;
}

.source-card-mini:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255,255,255,0.2);
}

.source-badge {
    position: absolute;
    top: -8px; right: 10px;
    background: #00c6ff;
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.source-badge.secondary { background: #6c757d; color: #fff; }

.mini-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 13px;
    padding: 5px 0;
    outline: none;
}

.bal-input { text-align: right; color: #00fff2; font-family: monospace; }
.mini-input:focus { border-color: #00fff2; }

/* 8. Button Gradient Neon */
.btn-neon-gradient {
    width: 100%;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    border: none;
    padding: 18px;
    border-radius: 50px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 20px rgba(0, 114, 255, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.btn-neon-gradient::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: 0.3s;
}

.btn-neon-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 114, 255, 0.5);
}
.btn-neon-gradient:hover::after { opacity: 1; }
.btn-neon-gradient:active { transform: scale(0.98); }
#set-nama {
    text-transform: uppercase;
}

/* Jika Anda ingin kolom di halaman transfer juga terlihat kapital saat diketik */
#input-rekening {
    text-transform: uppercase;
}
/* Memaksa teks input di pengaturan menjadi kapital secara visual */
#set-nama {
    text-transform: uppercase;
}

/* Memaksa nama penerima di halaman konfirmasi/transfer menjadi kapital */
#disp-name-amount, 
#disp-name-confirm, 
#disp-name-result,
#nama-penerima-proses {
    text-transform: uppercase;
    font-weight: 700; /* Membuatnya lebih tegas seperti di gambar */
}
/* =================================================
   PAKSA PERBESAR UKURAN IKON (TARUH PALING BAWAH)
   ================================================= */
.icon-box {
    width: 65px !important;   /* Ukuran Kotak Background */
    height: 65px !important;
    border-radius: 20px !important; /* Kelengkungan sudut */
    margin-bottom: 8px !important;
}

.icon-box img {
    width: 85px !important;   /* Ukuran Gambar Ikon */
    height: 85px !important;
}

/* Menyesuaikan teks menu agar tidak terlalu dekat */
.menu-text {
    font-size: 13px !important;
    margin-top: 5px !important;
}

/* Menyesuaikan grid agar muat */
.menu-card {
    padding: 25px 10px !important;
}
/* =========================================
   PERBESAR LOGO BANK KECIL (BADGE)
   ========================================= */
.bank-badge {
    width: 19px !important;   /* Diperbesar dari 18px */
    height: 19px !important;  /* Diperbesar dari 18px */
    
    /* Mengatur posisi agar tidak terlalu keluar/masuk */
    bottom: -5px !important;  
    right: -5px !important;   
    
    /* Opsional: Sesuaikan padding jika ikon terlihat terlalu kecil di dalam lingkaran putih */
    padding: 0px !important; 
}
/* =========================================
   LOADING OVERLAY (BLUR & SPINNER BIRU-ORANGE)
   ========================================= */
#global-loading-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.65); /* Transparan putih sedikit pekat agar kontras */
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); 
    z-index: 99999; /* Z-index sangat tinggi agar selalu di posisi paling depan */
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    opacity: 0;
    pointer-events: none; 
    transition: opacity 0.3s ease; 
}

#global-loading-overlay.active {
    opacity: 1;
    pointer-events: auto; 
}

/* Spinner Perpaduan Biru dan Orange */
.spinner-dual-color {
    width: 60px;
    height: 60px;
    border: 6px solid #FF9900; /* Warna Orange */
    border-top: 6px solid #1066D6; /* Warna Biru Bank */
    border-bottom: 6px solid #1066D6; /* Warna Biru Bank */
    border-radius: 50%;
    animation: spinDual 1s linear infinite;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.loading-text {
    margin-top: 15px;
    color: #1066D6;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    animation: pulseText 1.5s infinite;
}

@keyframes spinDual {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulseText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
/* =========================================
   LOADING ANIMASI BARU (BIRU & ORANGE)
   ========================================= */
#saku-loading-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.2); /* Putihnya dikurangi agar lebih tembus pandang */
    backdrop-filter: blur(1px); /* Angka blur diturunkan dari 6px jadi 2px */
    -webkit-backdrop-filter: blur(1px); /* Angka blur diturunkan dari 6px jadi 2px */
    z-index: 999999; /* Pastikan posisinya paling depan menutupi segalanya */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#saku-loading-screen.active {
    opacity: 1;
    pointer-events: auto;
}

.saku-spinner {
    width: 65px;
    height: 65px;
    border: 7px solid #FF9900; /* Warna Orange */
    border-top: 7px solid #1066D6; /* Warna Biru Bank */
    border-bottom: 7px solid #1066D6; /* Warna Biru Bank */
    border-radius: 50%;
    animation: sakuSpin 1s linear infinite;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.saku-loading-text {
    margin-top: 18px;
    color: #1066D6; /* Warna Biru */
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    animation: sakuPulse 1.5s infinite;
}

@keyframes sakuSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes sakuPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
/* =========================================
   PERBAIKAN JARAK HEADER (STATUS BAR SAFE AREA)
   ========================================= */

/* Menargetkan semua header halaman agar turun menjauhi status bar HP */
.home-header,
.transfer-header,
.amount-header,
.pin-header {
    padding-top: 40px !important; /* Mendorong konten ke bawah agar aman dari jam & baterai */
}
/* =========================================
   CUSTOM ALERT MODAL (PREMIUM)
   ========================================= */
#premium-alert-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#premium-alert-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.premium-alert-box {
    background: rgba(20, 35, 60, 0.95);
    border: 1px solid rgba(0, 255, 242, 0.3);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), 0 0 20px rgba(0, 255, 242, 0.1);
    border-radius: 20px;
    padding: 30px 24px;
    width: 80%;
    max-width: 320px;
    text-align: center;
    /* Efek mental saat muncul */
    transform: scale(0.8) translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#premium-alert-overlay.active .premium-alert-box {
    transform: scale(1) translateY(0);
}

.premium-alert-icon {
    width: 55px; height: 55px;
    margin: 0 auto 15px;
    color: #FF5A5F; /* Merah cerah untuk peringatan */
    background: rgba(255, 90, 95, 0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.premium-alert-icon svg { width: 32px; height: 32px; }

.premium-alert-title {
    color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 8px;
}

.premium-alert-desc {
    color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.5; margin-bottom: 25px;
}

.premium-alert-btn {
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    color: white; border: none; padding: 14px 0; width: 100%;
    border-radius: 25px; font-size: 16px; font-weight: 700;
    cursor: pointer; box-shadow: 0 5px 15px rgba(0, 114, 255, 0.3);
    transition: transform 0.2s;
}
.premium-alert-btn:active { transform: scale(0.95); }