/* * ======================================
 * FONT & PENGATURAN DASAR
 * ======================================
 */
 /* TAMBAHAN FONT BARU UNTUK TOMBOL LANJUTKAN */
@font-face {
  font-family: 'FontLanjutkan'; 
  src: url('lanjutkan.ttf') format('truetype');
}

@font-face {
  font-family: 'FontAngkaUser'; 
  src: url('2131296268.ttf') format('truetype');
}

@font-face {
  font-family: 'FontNamaPenerima'; 
  src: url('nama.ttf') format('truetype');
}
@font-face {
  font-family: 'FontBankPenerima'; 
  src: url('bank.ttf') format('truetype');
}
@font-face {
  font-family: 'FontRekeningPenerima'; 
  src: url('rekening.ttf') format('truetype');
}

@font-face {
  font-family: 'FontTransaksi'; 
  src: url('transaksi.ttf') format('truetype');
}
@font-face {
  font-family: 'FontTanggal'; 
  src: url('tanggal.ttf') format('truetype');
}

@font-face {
  font-family: 'FontNoRef'; 
  src: url('noref.ttf') format('truetype');
}

/* FONT CUSTOM UNTUK PIN / KEYPAD */
@font-face {
  font-family: 'FontPin'; 
  src: url('pin.ttf') format('truetype');
}

/* FONT CUSTOM UNTUK LOADING */
@font-face {
  font-family: 'FontLoading'; 
  src: url('loading.ttf') format('truetype');
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #F8F9FB; 
    display: flex;
    justify-content: center;
}

/* * ======================================
 * STRUKTUR UTAMA APLIKASI
 * ======================================
 */
.app-container {
    width: 100%;
    max-width: 450px; 
    min-height: 100vh;
    background-color: #F8F9FB;
    display: flex;
    flex-direction: column; 
    position: relative; 
    overflow-x: hidden;
}

.app-content {
    flex-grow: 1; 
    padding: 0 16px; 
    
    /* TAMBAHAN: Agar konten paling bawah tidak tertutup tombol 'Lanjutkan' */
    padding-bottom: 100px; 
}


/* * ======================================
 * 1. HEADER
 * ======================================
 */
.app-header {
    background-color: #007AFF; 
    color: white;
    padding: 16px;
    display: flex;
    align-items: center; 
    position: sticky; 
    top: 0;
    z-index: 100;
}

.app-header .back-icon {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    margin-right: 16px;
}

.app-header h1 {
    margin: 0;
    font-size: 17px; 
    font-weight: 500; 
    flex-grow: 1;
    text-align: center;
    margin-right: 40px; 
}

/* * ======================================
 * KARTU (CARD) - Gaya Default
 * ======================================
 */
.card {
    background-color: #FFFFFF; 
    border-radius: 12px; 
    padding: 16px; 
    margin-top: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: none; 
    overflow: hidden; 
}

/* Judul bagian */
.section-title {
    display: block;
    margin-top: 24px; 
    margin-bottom: 8px;
    margin-left: 4px; 
    font-size: 14px;
    font-weight: bold; 
    color: #000000; 
}

/* * ======================================
 * INFO PENERIMA (DINAMIS)
 * ======================================
 */
.recipient-info {
    display: flex;
    align-items: center;
}

.recipient-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%; 
    background-color: #E6F2FB; 
    color: #007AFF; 
    font-weight: 500; 
    font-size: 18px;
    margin-right: 12px;
    display: grid;
    place-items: center;
}

.recipient-details h3 {
    margin: 0 0 2px 0; 
    font-size: 18px;
    font-weight: 500; 
    color: #111;
    font-family: 'FontNamaPenerima', sans-serif;
}

.recipient-details p {
    margin: 0;
    font-size: 14px; 
    color: #888;
    margin-top: 2px;
}

#main-recipient-bank {
    color: #555;
    font-weight: 500;
    font-family: 'FontBankPenerima', sans-serif;
}

#main-recipient-number {
    font-family: 'FontRekeningPenerima', sans-serif;
}


/* * ======================================
 * TOGGLE SWITCH (iOS Style)
 * ======================================
 */
.toggle-card {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 14px 16px; 
}

.toggle-card label {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.switch {
    position: relative;
    display: inline-block;
    width: 51px; 
    height: 31px; 
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E9E9EB; 
    transition: .3s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 27px; 
    width: 27px; 
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}
input:checked + .slider {
    background-color: #007AFF; 
}
input:checked + .slider:before {
    transform: translateX(20px); 
}

/* * ======================================
 * METODE TRANSFER (DROPDOWN)
 * ======================================
 */
.select-wrapper {
    position: relative;
    padding: 0; 
}
.select-wrapper select {
    width: 100%;
    padding: 16px; 
    border: none; 
    border-radius: 12px; 
    font-size: 15px;
    font-weight: 500;
    color: #333;
    background-color: #FFFFFF; 
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.select-wrapper::after {
    content: '⌄'; 
    font-size: 20px;
    color: #888;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%); 
    pointer-events: none; 
}

/* * ======================================
 * KARTU NOMINAL TRANSFER
 * ======================================
 */
.card-nominal {
    padding: 0;
}

.nominal-input-area {
    display: block;
    cursor: text;
    padding: 16px 16px 12px 16px; 
}

.nominal-input-wrapper {
    display: flex;
    align-items: baseline; 
}

.nominal-input-wrapper span {
    font-size: 28px;
    font-weight: bold; 
    color: #111;
    margin-right: 8px;
    font-family: 'FontAngkaUser', sans-serif;
}

.nominal-input {
    width: 100%;
    border: none;
    outline: none; 
    font-size: 28px;
    font-weight: bold; 
    color: #111;
    padding: 0;
    font-family: 'FontAngkaUser', sans-serif;
}

.nominal-input::placeholder {
    color: #111;
    font-weight: bold;
    opacity: 1; 
    font-family: 'FontAngkaUser', sans-serif;
}
.nominal-input::-webkit-input-placeholder { 
    color: #111;
    font-weight: bold;
    opacity: 1;
    font-family: 'FontAngkaUser', sans-serif;
}
.nominal-input::-moz-placeholder { 
    color: #111;
    font-weight: bold;
    opacity: 1;
    font-family: 'FontAngkaUser', sans-serif;
}
.nominal-input:-ms-input-placeholder { 
    color: #111;
    font-weight: bold;
    opacity: 1;
    font-family: 'FontAngkaUser', sans-serif;
}

.nominal-minimum {
    font-size: 13px;
    color: #888; 
    margin-top: 6px; 
    margin-bottom: 0;
    transition: color 0.3s ease; 
}

.card-divider {
    border: none;
    height: 1px;
    background-color: #F0F0F0;
    margin: 0;
}

.catatan-area {
    padding: 16px;
}

.catatan-input-line {
    display: flex;
    align-items: flex-start; 
}

.catatan-icon-img {
    width: 20px; 
    height: 20px;
    object-fit: contain; 
    margin-right: 12px;
    margin-top: 0;
    opacity: 0.7; 
}

.catatan-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    resize: none; 
    padding: 0;
    line-height: 1.4; 
}

.catatan-input::placeholder {
    color: #B0B0B0;
    font-size: 15px;
}

.char-counter {
    text-align: right;
    font-size: 12px;
    color: #AAA;
    margin-top: 8px; 
    margin-bottom: 0;
}

/* * ======================================
 * SUMBER DANA
 * ======================================
 */

#sumber-dana-title {
    font-size: 20px; 
}

.source-card {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 14px 16px; 
}

.source-details {
    display: flex;
    align-items: center;
    flex-grow: 1; 
}

.bank-logo {
    width: 70px; 
    height: auto; 
    margin-right: 16px; 
    border-radius: 4px; 
}

.source-info {
    display: flex;
    flex-direction: column; 
}

.source-info .account-number {
    margin: 0 0 2px 0; 
    font-size: 15px;
    font-weight: 600; 
    color: #111; 
}

.source-info .account-name {
    margin: 0;
    font-size: 14px;
    font-weight: 500; 
    color: #333; 
}

.source-info .balance {
    font-weight: 500; 
    color: #333;
    font-size: 15px;
    margin-top: 4px; 
    font-family: 'FontAngkaUser', sans-serif; 
}

.change-button {
    font-size: 14px;
    font-weight: 500; 
    color: #007AFF; 
    text-decoration: none;
    padding: 4px 8px; 
    margin-left: 12px; 
}

/* * ======================================
 * 3. FOOTER
 * ======================================
 */
/* ======================================
   FOOTER (TOMBOL LANJUTKAN) - FIXED BOTTOM
   ====================================== */
.app-footer {
    background-color: #F8F9FB;
    padding: 16px;
    border-top: 1px solid #EAEAEA;
    
    /* MODIFIKASI: Agar menempel di layar bawah */
    position: fixed; 
    bottom: 0;
    
    /* Trik agar tetap di tengah (mengikuti layout HP) */
    left: 50%;
    transform: translateX(-50%);
    
    /* Ukuran disesuaikan container utama */
    width: 100%;
    max-width: 450px; 
    
    z-index: 900; /* Pastikan di atas konten */
    box-shadow: 0 -4px 10px rgba(0,0,0,0.03); /* Bayangan halus ke atas */
}

/* Update Font & Warna Tombol Lanjutkan (Nominal) */
.continue-button {
    width: 100%;
    padding: 14px;
    border-radius: 10px; 
    border: none;
    font-size: 16px;
    font-weight: 500; 
    background-color: #E9ECEF;
    color: #ADB5BD;
    cursor: not-allowed; 
    transition: background-color 0.3s ease;
    
    /* SETTING FONT BARU */
    font-family: 'FontLanjutkan', sans-serif !important;
    letter-spacing: 0.5px; /* Opsional: Biar font lebih lega */
}

/* Warna Baru Saat Tombol Aktif */
.continue-button:not(:disabled) {
    background-color: #1F8FE5; /* <-- Warna Baru Request Anda */
    color: white;
    cursor: pointer;
}


/* * ======================================
 * CSS OVERLAY PIN
 * ======================================
 */
/* Update Z-Index jadi 2000 agar menutupi tombol Lanjutkan */
.pin-overlay {
    display: none; 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    z-index: 2000 !important; /* NAIKKAN INI */
    
    flex-direction: column;
}

.pin-overlay .app-header {
    background-color: transparent;
    position: relative;
    padding-top: 20px; 
    border-bottom: none;
}

.pin-overlay .app-header h1 {
    margin-right: 0; 
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none; 
}

.pin-content-top {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    color: white; 
    padding-bottom: 20px;
}

.pin-content-top h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 30px 0;
    letter-spacing: 0.5px;
}

.pin-dots {
    display: flex;
    gap: 28px; 
    margin-bottom: 20px;
}

.pin-dot {
    width: 25px; 
    height: 25px; 
    border-radius: 50%;
    background-color: transparent; 
    border: 3px solid white; 
    transition: all 0.2s ease;
}

.pin-dot.filled {
    background-color: white; 
}

.forgot-pin-button {
    margin-top: 40px;
    background-color: #3A3A3C; 
    color: #5AC8FA; 
    border: none;
    padding: 10px 24px;
    border-radius: 20px; 
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.forgot-pin-button:active {
    background-color: #4A4A4C; 
}

.numpad-footer {
    padding: 20px 24px 40px 24px;
    background-color: transparent; 
}

.numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    column-gap: 20px;
}

.numpad-button {
    border: none;
    background-color: transparent; 
    color: white;
    
    /* FONT CUSTOM KEYPAD */
    font-family: 'FontPin', sans-serif !important; 
    font-size: 36px; 
    font-weight: 500;
    
    cursor: pointer;
    width: 80px;
    height: 80px;
    justify-self: center;
    display: grid;
    place-items: center;
    transition: opacity 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.numpad-button:active {
    opacity: 0.5; 
}

.numpad .blank {
    visibility: hidden;
}

.numpad-button.backspace {
    font-family: 'Inter', sans-serif !important; 
    font-size: 28px; 
}

/* * ======================================
 * CSS HALAMAN BUKTI TRANSFER
 * ======================================
 */

/* Update Z-Index jadi 2100 agar menutupi tombol Lanjutkan */
.receipt-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F8F9FB; 
    
    z-index: 2100 !important; /* NAIKKAN INI */
    
    flex-direction: column;
    overflow-y: auto; 
}

.receipt-header {
    background-color: #007AFF;
    background-image: url('back.png');
    background-size: cover; 
    background-position: center; 
    color: white;
    padding: 24px 24px 165px 24px; 
    text-align: center;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}
.receipt-header img.icon-success {
    width: 65px;
    height: 65px;
    margin-bottom: 16px;
}
.receipt-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
}
.receipt-header p {
    font-size: 13px;
    opacity: 0.8;
    margin: 0;
}

#receipt-status-title {
    font-family: 'FontTransaksi', sans-serif;
}
#receipt-timestamp {
    font-family: 'FontTanggal', sans-serif;
}

.receipt-content {
    flex-grow: 1;
}

.receipt-card-shadow-wrapper {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
    margin: -160px 16px 16px 16px; 
    z-index: 10;
}

.receipt-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    margin: 0; 
    padding: 20px 20px 30px 20px; 
    box-shadow: none; 
    color: #333;
    position: relative; 
    overflow: hidden; 
    border: 1px solid #DDD; 
    border-bottom: none; 

    /* Efek Potongan Roda Gigi */
    --gigi-height: 12px;
    --gigi-width: 24px;
    --badan-kartu: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--gigi-height)), transparent calc(100% - var(--gigi-height)));
    --gigi-kiri: linear-gradient(135deg, #000 50%, transparent 50.5%);
    --gigi-kanan: linear-gradient(225deg, #000 50%, transparent 50.5%);

    -webkit-mask-image: var(--badan-kartu), var(--gigi-kiri), var(--gigi-kanan);
    -webkit-mask-size: 100% 100%, var(--gigi-width) var(--gigi-height), var(--gigi-width) var(--gigi-height);
    -webkit-mask-position: 0 0, 0 100%, 0 100%;
    -webkit-mask-repeat: no-repeat, repeat-x, repeat-x;
    mask-image: var(--badan-kartu), var(--gigi-kiri), var(--gigi-kanan);
    mask-size: 100% 100%, var(--gigi-width) var(--gigi-height), var(--gigi-width) var(--gigi-height);
    mask-position: 0 0, 0 100%, 0 100%;
    mask-repeat: no-repeat, repeat-x, repeat-x;
}

.receipt-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url('bri_logo_watermark.png');
    background-repeat: repeat;
    background-size: 60px; 
    transform: rotate(-45deg);
    z-index: 0;
    opacity: 0.08;
    pointer-events: none; 
}

.receipt-card > * {
    position: relative;
    z-index: 1;
}

.receipt-card p.total-title {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin: 0 0 4px 0;
}
.receipt-card p.total-amount {
    text-align: center;
    font-size: 27px; 
    font-weight: 700;
    color: #365a92; 
    margin: 0 0 20px 0;
    font-family: 'FontAngkaUser', sans-serif; 
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 12px;
}
.receipt-row .label {
    color: #666;
}
.receipt-row .value {
    color: #111;
    font-weight: 500;
}

#receipt-ref-row {
    font-size: 16px; 
}

.receipt-divider {
    display: none; 
}

.receipt-party-wrapper {
    border: 1px solid #DDD; 
    border-radius: 8px;     
    padding: 16px;          
    display: flex;
    flex-direction: column;
    gap: 0; 
    margin: 16px 0; 
}

hr.receipt-divider-inner {
    border: none;
    height: 1px;
    background-color: #DDD; 
    margin-top: 16px;    
    margin-bottom: 16px; 
    margin-left: 3px;   
    margin-right: 3px;  
}

.receipt-party h4 {
    font-size: 14px;
    font-weight: 500;
    color: #111; 
    margin: 0 0 12px 0; 
}
.receipt-party .party-details {
    display: flex;
    align-items: center;
}
.receipt-party .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #E6F2FB; 
    color: #007AFF;
    font-weight: 500;
    font-size: 18px;
    margin-right: 12px;
    display: grid;
    place-items: center;
    overflow: hidden; 
    font-family: 'FontAngkaUser', sans-serif; 
}
.receipt-party .avatar img { 
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#receipt-source-avatar {
    background-color: #007AFF; 
    color: #FFFFFF; 
}

.receipt-party .info {
    line-height: 1.5;
}
.receipt-party .info p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}
.receipt-party .info span {
    font-size: 13px;
    color: #666;
}

.receipt-party .info .receipt-info-line {
    font-size: 13px;
    color: #666;
    margin-top: 2px; 
}

#receipt-source-bank,
#receipt-dest-bank {
    font-family: 'FontBankPenerima', sans-serif;
}

#receipt-source-number,
#receipt-dest-number {
    font-family: 'FontRekeningPenerima', sans-serif;
}
#receipt-ref-number {
    font-family: 'FontNoRef', sans-serif;
}

.receipt-details-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #007AFF;
    font-size: 19px; 
    font-weight: 500;
    text-decoration: none;
    font-family: 'FontAngkaUser', sans-serif; 
}

.products-section {
    padding: 0 16px 16px 16px; 
}
.products-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    margin-top: 20px; 
    margin-bottom: 16px;
    margin-left: 4px;
}
.products-row {
    display: flex;
    gap: 12px;
    overflow-x: auto; 
    padding-bottom: 10px; 
}
.product-card {
    flex: 0 0 200px; 
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.product-card img {
    width: 40px; 
    height: auto;
    margin-bottom: 8px;
}
.product-card p {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #111;
}
.product-card span {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}
.ojk-info-container {
    text-align: center;
    margin: 10px 10px 0 10px; 
    padding-bottom: 0; 
}
.ojk-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}
.ojk-logos img {
    height: 62px;
    width: auto;
    opacity: 0.8;
}

.ojk-info-text {
    font-size: 13px;
    font-weight: 500; 
    color: #D9534F; 
    opacity: 0.8; 
    text-align: center; 
    line-height: 1.5; 
    margin: 0; 
    font-style: italic; 
}

.receipt-footer {
    background-color: #fff;
    padding: 16px;
    border-top: 1px solid #EAEAEA;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05); 
    display: flex;
    gap: 12px;
    position: sticky; 
    bottom: 0;
    z-index: 10;
}
.receipt-footer button {
    flex: 1; 
    padding: 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'FontAngkaUser', sans-serif; 
}
.receipt-footer button img {
    width: 18px;  
    height: 18px; 
}
.receipt-footer .share-button {
    background-color: #fff;
    border: 1px solid #007AFF;
    color: #007AFF;
}
.receipt-footer .done-button {
    background-color: #007AFF;
    border: 1px solid #007AFF;
    color: #fff;
}

/* * ======================================
 * CSS LOADING OVERLAY (ANIMASI ESTAFET / SEQUENTIAL)
 * ======================================
 */
/* Update Z-Index jadi 3000 agar paling atas */
.loading-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    
    z-index: 3000 !important; /* NAIKKAN INI */
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* CONTAINER */
.loading-dots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Gap disesuaikan jadi 16px */
    gap: 25px; 
    margin-bottom: 20px; 
    height: 50px; 
}

/* --- [UPDATE] TITIK LEBIH KECIL (23px) --- */
.loading-dot {
    width: 20px; /* Dikurangi 5px dari 28px */
    height: 20px; /* Dikurangi 5px dari 28px */
    background-color: #FFFFFF; 
    border-radius: 50%;
    
    /* Animasi berjalan 2.4 detik (0.4s x 6 dot) */
    animation: dot-jump-sequence 2.4s infinite ease-in-out; 
}

/* Urutan delay agar naik satu per satu (estafet) */
.loading-dot:nth-child(1) { animation-delay: 0s; }
.loading-dot:nth-child(2) { animation-delay: 0.4s; }
.loading-dot:nth-child(3) { animation-delay: 0.8s; }
.loading-dot:nth-child(4) { animation-delay: 1.2s; }
.loading-dot:nth-child(5) { animation-delay: 1.6s; }
.loading-dot:nth-child(6) { animation-delay: 2.0s; }

/* KEYFRAMES: LOMPATAN DIKURANGI */
@keyframes dot-jump-sequence {
    0%, 100% {
        transform: translateY(0);
    }
    8% { 
        transform: translateY(-20px); /* Lompatan dikurangi jadi -20px */
    }
    16% { 
        transform: translateY(0);
    }
}
/* ------------------------------------------------ */

.loading-overlay p {
    font-family: 'FontLoading', sans-serif !important; 
    font-size: 18px; 
    font-weight: 500;
    color: #FFFFFF; 
    margin: 0;
    letter-spacing: 0.5px;
}


/* * ======================================
 * CSS SETUP OVERLAY
 * ======================================
 */
.setup-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; 
    z-index: 1000; 
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    overflow-y: auto;
    overflow: hidden; 
}
.setup-card {
    width: 100%;
    max-width: 450px;
    background-color: rgba(255, 255, 255, 0.5); 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); 
    border-radius: 12px;
    padding: 24px;
    margin-top: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    position: relative; 
    z-index: 2;         
}
.setup-card h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 24px;
    color: #111;
}
.setup-input-group {
    margin-bottom: 16px;
}
.setup-input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}
.setup-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
}
.setup-button {
    width: 100%;
    padding: 14px;
    border-radius: 10px; 
    border: none;
    font-size: 16px;
    font-weight: 500; 
    background-color: #007AFF;
    color: white;
    cursor: pointer;
    margin-top: 24px;
}

.setup-button.success-mode {
    background-color: #28a745; 
    margin-top: 12px;
}

.setup-logout-button {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: #D9534F; 
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    z-index: 10; 
}
.setup-logout-button:active {
    background-color: #b0423e; 
}

.view-token-link {
    display: block;
    width: 100%; 
    text-align: center;
    font-size: 14px;
    color: #FFF; 
    text-decoration: none;
    margin-top: -16px; 
    margin-bottom: 20px;
    background-color: #007AFF; 
    padding: 10px 14px; 
    border-radius: 8px; 
    font-weight: 500; 
    border: none; 
    font-family: inherit; 
    cursor: pointer; 
}

.view-token-link:active {
    background-color: #0056b3; 
}

.token-data-info {
    display: none; 
    background-color: rgba(0, 0, 0, 0.05); 
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}
.token-data-info strong {
    color: #000;
}


/* * ======================================
 * CSS VIDEO BACKGROUND
 * ======================================
 */
#setup-bg-video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1; 
    object-fit: cover;
    filter: brightness(0.7); 
}


/* * ======================================
 * CSS TOKEN OVERLAY
 * ======================================
 */
.token-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #007AFF; 
    z-index: 2000; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden; 
}

#token-bg-video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1; 
    object-fit: cover;
    filter: brightness(0.6); 
}


.token-card {
    background-color: rgba(255, 255, 255, 0.5); 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); 
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative; 
}

.device-id-button {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: #D9534F; 
    color: white; 
    border: none;
    border-radius: 6px;
    padding: 6px 10px; 
    font-size: 12px; 
    font-weight: 500;
    cursor: pointer;
    z-index: 10;
}
.device-id-button:active {
    background-color: #b0423e; 
}

.token-card h2 {
    margin-top: 0;
    margin-bottom: 16px;
    color: #111;
}

.token-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 24px;
}

.active-users-notification {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.05); 
    border-radius: 20px; 
    font-size: 13px;
    color: #333; 
    font-weight: 500;
    margin-bottom: 20px; 
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.live-dot {
    width: 8px;
    height: 8px;
    background-color: #28a745; 
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse 1.5s infinite ease-in-out;
    box-shadow: 0 0 5px #28a745;
}
#active-users-count {
    font-weight: 700; 
    margin-right: 4px; 
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.token-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    margin-bottom: 12px;
}

.token-error {
    font-size: 13px;
    color: red;
    height: 18px; 
    margin-bottom: 12px;
}

.token-button {
    width: 100%;
    padding: 14px;
    border-radius: 10px; 
    border: none;
    font-size: 16px;
    font-weight: 500; 
    background-color: #007AFF;
    color: white;
    cursor: pointer;
}

.token-order-button {
    display: block;
    text-decoration: none;
    width: 100%;
    padding: 14px;
    border-radius: 10px; 
    border: none;
    font-size: 16px;
    font-weight: 500; 
    background-color: #D9534F; 
    color: white;
    cursor: pointer;
    margin-top: 12px; 
}

.trial-buttons-container {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}
.trial-buttons-container .token-button {
    flex: 1;
    margin-top: 0; 
    background-color: #28a745; 
}
.trial-buttons-container .token-button:active {
    background-color: #218838; 
}

.token-loader {
    display: none; 
    height: 20px;
    margin-top: 16px;
}

.price-list {
    margin-top: 24px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 16px;
}
.price-list h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #111;
    margin: 0 0 16px 0;
    text-align: center;
}
.vip-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}
.price-list h4 {
    font-size: 15px;
    color: #111;
    margin: 16px 0 10px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
    font-weight: 600;
}
.price-list h4::after { 
    content: '•';
    color: #007AFF;
    margin-left: 8px;
}
.price-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.price-list li {
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}
.price-list li span:first-child {
    color: #333;
    font-weight: 500;
}
.price-list li span:last-child {
    color: #007AFF;
    font-weight: 600;
}

/* * ======================================
 * CSS OVERLAY GANTI AKUN
 * ======================================
 */
.account-switcher-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F8F9FB;
    z-index: 3000; 
    flex-direction: column;
}

.account-switcher-overlay .app-header {
    position: static; 
}

.account-switcher-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px; 
}

.account-slot {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid transparent; 
    transition: border-color 0.3s ease;
}

.account-slot.active {
    border-color: #007AFF; 
}

.account-slot .details {
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-slot .details img {
    width: 40px; 
    height: auto;
    border-radius: 4px;
}

.account-slot .info p {
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.account-slot .info .slot-name {
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

.account-slot .info .slot-number {
    font-size: 14px;
    color: #555;
    margin: 2px 0;
}

.account-slot .info .slot-balance {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    font-family: 'FontAngkaUser', sans-serif; 
}

.account-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-actions button {
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.account-actions .btn-select-account {
    background-color: #007AFF;
    color: white;
}
.account-actions .btn-select-account:disabled {
    background-color: #E9ECEF;
    color: #ADB5BD;
    cursor: not-allowed;
}

.account-actions .btn-edit-account {
    background-color: #F0F0F0;
    color: #333;
}


.receipt-details-link img {
    width: 16px; 
    height: 16px; 
    margin-left: 4px;
    vertical-align: middle; 
    display: inline-block; 
}

.receipt-details-link .arrow-up {
    display: none;
}

.receipt-details-link.expanded .arrow-down {
    display: none;
}

.receipt-details-link.expanded .arrow-up {
    display: inline-block;
}

.receipt-expanded-details {
    display: none; 
    margin-top: 20px; 
}

.receipt-expanded-details.expanded {
    display: block; 
}

.receipt-divider-expanded {
    border: none;
    border-top: 1px dashed #DDD; 
    margin: 16px 0;
}

.receipt-info-block {
    margin-top: 12px;
}
.receipt-info-block .info-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
    font-weight: 500;
    margin-top: 0;
}
.receipt-info-block .info-text {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.receipt-expanded-details .ojk-info-text {
    margin-top: 16px; 
    text-align: left; 
    font-size: 13px;  
    font-weight: 500; 
    color: #D9534F; 
    opacity: 0.8; 
    line-height: 1.5; 
    margin-bottom: 0; 
    font-style: italic; 
}

#receipt-deposito-wajib-row,
#receipt-deposito-kurang-row {
    display: none; 
}

#receipt-deposito-kurang {
    color: #D9534F; 
    font-weight: 600; 
}

/* * ======================================
 * CSS OVERLAY FORM ORDER
 * ======================================
 */
.order-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2500; 
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-y: auto;
}

.order-card {
    background-color: rgba(255, 255, 255, 0.7) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    max-height: 90vh; 
    overflow-y: auto; 
}

.order-card h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 24px;
    color: #111;
}

.order-close-button {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 28px;
    font-weight: 300;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.order-form-group {
    margin-bottom: 16px;
}

.order-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.order-form-group input[type="text"],
.order-form-group select {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    background-color: #F9F9F9;
}

.order-form-group input[readonly] {
    background-color: #EFEFEF;
    color: #555;
    font-weight: bold;
}

.order-price-display {
    font-size: 24px;
    font-weight: bold;
    color: #007AFF;
    margin: 0;
    font-family: 'FontAngkaUser', sans-serif;
}

.order-qris-image {
    width: 100%;
    max-width: 250px; 
    display: block;
    margin: 16px auto;
    border-radius: 8px;
    border: 1px solid #EEE;
}

.order-instructions {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    text-align: center;
    background-color: #F8F9FB;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.order-status {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 12px;
    color: red;
}

.order-submit-button {
    width: 100%;
    padding: 14px;
    border-radius: 10px; 
    border: none;
    font-size: 16px;
    font-weight: 500; 
    background-color: #28a745; 
    color: white;
    cursor: pointer;
    margin-top: 12px;
}

.order-submit-button:disabled {
    background-color: #E9ECEF;
    color: #ADB5BD;
    cursor: not-allowed;
}

.order-form-group input[type="file"]#order-receipt-upload {
  display: none;
}

.order-form-group label[for="order-receipt-upload"] {
  display: block;
  width: 100%;
  background-color: #f0f0f0; 
  color: #333; 
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  cursor: pointer; 
  transition: background-color 0.2s ease;
  border: 1px solid #E0E0E0;
  margin-bottom: 8px; 
}

.order-form-group label[for="order-receipt-upload"]:hover {
  background-color: #e0e0e0; 
}

.order-instructions-small {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
  margin-bottom: 0;
}

.order-form-group label[for="order-receipt-upload"].file-selected {
  background-color: #e6f7ff; 
  border-color: #007AFF; 
  color: #0056b3; 
  font-weight: bold;
}

.input-error {
    border: 2px solid #D9534F !important; 
    box-shadow: 0 0 5px rgba(217, 83, 79, 0.5); 
}

label.input-error {
    border: 2px solid #D9534F !important;
    box-shadow: 0 0 5px rgba(217, 83, 79, 0.5);
}

.field-error {
  color: #D9534F; 
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  margin-top: 6px;
  margin-bottom: 0;
  height: 15px; 
}
.other-bank-section {
    margin-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.1); 
    padding-top: 16px;
    text-align: center;
}

.other-bank-title {
    font-size: 14px;
    color: #333;
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: 500;
}

.bank-link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background-color: #FFFFFF; 
    border: 1px solid #E0E0E0; 
    border-radius: 10px;
    text-decoration: none; 
    color: #111; 
    font-weight: 600;
    font-size: 15px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.bank-link-button:active {
    background-color: #F5F5F5; 
    transform: scale(0.98); 
}

.bank-link-button img {
    width: 24px; 
    height: 24px;
    margin-right: 10px; 
    object-fit: contain;
}
/* * ======================================
 * CSS FALLBACK OVERLAY (POPUP DARURAT)
 * ======================================
 */
.fallback-overlay {
    display: none; /* Sembunyi by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Gelap pekat */
    z-index: 9999; /* Paling atas dari segalanya */
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex-direction: column;
}

.fallback-card {
    background-color: white;
    padding: 20px;
    border-radius: 12px;
    width: 100%;
    max-width: 350px;
    text-align: center;
}

.fallback-card h3 {
    margin-top: 0;
    color: #007AFF;
}

.fallback-card .instruction {
    background-color: #fff3cd;
    color: #856404;
    padding: 8px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
    border: 1px solid #ffeeba;
}

#fallback-image {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 15px;
    display: block;
}

#close-fallback {
    width: 100%;
    padding: 12px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
/* * ======================================
 * CSS POPUP SUKSES ORDER (DENGAN ANIMASI)
 * ======================================
 */

/* 1. Animasi Overlay Muncul Perlahan */
@keyframes fadeInOverlay {
    from { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); }
    to { background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); }
}

/* 2. Animasi Kartu Muncul & Memantul (Bouncy) */
@keyframes popUpBounce {
    0% { 
        transform: scale(0.5) translateY(50px); 
        opacity: 0; 
    }
    60% { 
        transform: scale(1.05) translateY(0); 
        opacity: 1; 
    }
    80% { 
        transform: scale(0.95); 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* 3. Animasi Ikon Centang Melompat */
@keyframes iconSuccessPop {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; }
    70% { transform: scale(1.2) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.success-popup-overlay {
    display: none; 
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 3000; 
    justify-content: center; 
    align-items: center;
    padding: 20px;
    
    /* Terapkan Animasi Overlay */
    animation: fadeInOverlay 0.3s ease-out forwards;
    background-color: rgba(0, 0, 0, 0.7); /* Fallback */
}

.success-popup-card {
    background-color: #fff;
    width: 100%;
    max-width: 340px;
    border-radius: 20px; /* Lebih bulat sedikit biar modern */
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    
    /* Terapkan Animasi Kartu */
    animation: popUpBounce 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
    opacity: 0; /* Mulai dari transparan agar tidak kedip */
}

.success-icon-container {
    width: 70px; height: 70px;
    background: linear-gradient(135deg, #28a745, #20c997); /* Gradasi biar keren */
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    margin: 0 auto 20px auto;
    box-shadow: 0 8px 15px rgba(40, 167, 69, 0.3); /* Bayangan hijau */
    
    /* Terapkan Animasi Ikon (Delay dikit biar muncul belakangan) */
    animation: iconSuccessPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s forwards;
    transform: scale(0); /* Mulai dari kecil */
}

.success-icon-container img {
    width: 35px; height: 35px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}

.success-popup-card h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 22px;
    font-weight: 700;
}

.success-message {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 24px;
}

.warning-box {
    background-color: #FFF8E1; /* Kuning lebih lembut */
    border: 1px solid #FFE082;
    color: #856404;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 13px;
    text-align: left; /* Teks warning rata kiri biar rapi */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.warning-box strong {
    color: #D9534F; 
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

#close-success-popup-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(to right, #007AFF, #0056b3); /* Gradasi tombol */
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3);
    transition: transform 0.1s ease;
}

#close-success-popup-btn:active {
    transform: scale(0.96); /* Efek tekan */
}
/* ======================================
   LOADING TOKEN: GAYA DIGITAL EQUALIZER
   ====================================== */
.token-loader {
    display: none; 
    margin-top: 30px; /* Jarak atas sedikit ditambah */
    width: 100%;
    justify-content: center;
    height: 60px; /* Area tinggi ditambah agar batang bisa memanjang */
    align-items: center; /* Pastikan rata tengah vertikal */
}

.token-dots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; 
}

.token-dot {
    width: 10px;  
    height: 10px; /* Tinggi awal pendek */
    border-radius: 10px; /* Bentuk kapsul/lonjong */
    
    /* Animasi memanjang vertikal */
    animation: equalizer-beat 0.8s infinite ease-in-out alternate;
}

/* --- WARNA WARNI TETAP DIPERTAHANKAN --- */

/* 1. Merah */
.token-dot:nth-child(1) { background: #ff4757; animation-delay: 0.0s; box-shadow: 0 0 8px #ff4757; }
/* 2. Orange */
.token-dot:nth-child(2) { background: #ffa502; animation-delay: 0.1s; box-shadow: 0 0 8px #ffa502; }
/* 3. Kuning */
.token-dot:nth-child(3) { background: #eccc68; animation-delay: 0.2s; box-shadow: 0 0 8px #eccc68; }
/* 4. Hijau Lime */
.token-dot:nth-child(4) { background: #7bed9f; animation-delay: 0.3s; box-shadow: 0 0 8px #7bed9f; }
/* 5. Hijau Teal */
.token-dot:nth-child(5) { background: #2ed573; animation-delay: 0.4s; box-shadow: 0 0 8px #2ed573; }
/* 6. Biru Langit */
.token-dot:nth-child(6) { background: #1e90ff; animation-delay: 0.5s; box-shadow: 0 0 8px #1e90ff; }
/* 7. Biru Tua */
.token-dot:nth-child(7) { background: #3742fa; animation-delay: 0.6s; box-shadow: 0 0 8px #3742fa; }
/* 8. Ungu */
.token-dot:nth-child(8) { background: #a55eea; animation-delay: 0.7s; box-shadow: 0 0 8px #a55eea; }

/* KEYFRAMES: Memanjangkan batang */
@keyframes equalizer-beat {
    0% {
        height: 10px;       /* Pendek */
        transform: translateY(0);
        opacity: 0.5;
    }
    100% {
        height: 50px;       /* Memanjang Tinggi */
        transform: translateY(0);
        opacity: 1;
        filter: brightness(1.3); /* Sedikit lebih terang saat tinggi */
    }
}
/* ============================================================
   MODERN TEXTURE BUTTONS (Token & Setup Menu)
   ============================================================ */

/* 1. SETUP GLOBAL TOMBOL MODERN */
.token-button, 
.token-order-button, 
.setup-button,
.view-token-link,
.setup-logout-button,
.device-id-button {
    border: none !important;
    position: relative;
    overflow: hidden;
    /* Efek Kilau Atas (Inset) & Bayangan Bawah */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.35), 
        0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    /* Supaya tekstur gradient lebih halus */
    background-size: 110% 110%; 
}

/* Efek saat tombol ditekan (Penting untuk rasa 'Tactile') */
.token-button:active, 
.token-order-button:active, 
.setup-button:active,
.view-token-link:active,
.setup-logout-button:active,
.device-id-button:active {
    transform: scale(0.97) translateY(1px);
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.1), 
        0 1px 4px rgba(0, 0, 0, 0.1);
    filter: brightness(0.95);
}

/* ------------------------------------------------------------
   VARIAN WARNA & TEKSTUR
   ------------------------------------------------------------ */

/* A. BIRU MODERN (Tombol Masuk & Setup Utama) */
.token-button, 
.setup-button,
.view-token-link {
    /* Gradient Biru Laut ke Biru Langit */
    background: linear-gradient(135deg, #007AFF 0%, #00C6FF 100%) !important;
    color: white !important;
}

/* B. MERAH VELVET (Tombol Order & Logout) */
.token-order-button, 
.setup-logout-button {
    /* Gradient Merah ke Orange-Pink */
    background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%) !important;
    color: white !important;
}

/* C. HIJAU FRESH (Tombol Trial & Setup Sukses) */
.setup-button.success-mode,
/* Menargetkan tombol Trial kiri (jika ID spesifik digunakan di CSS) */
#trial-button-left {
    /* Gradient Hijau Daun ke Emerald */
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* D. KHUSUS DEVICE ID (Glassmorphism Kecil) */
.device-id-button {
    /* Transparan Kaca */
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #333 !important; /* Text gelap agar terbaca */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* E. KHUSUS TOMBOL 'Coba Bank Lain' (Putih Elegan) */
.bank-link-button {
    background: linear-gradient(to bottom, #ffffff, #f1f3f5) !important;
    border: 1px solid #dcdcdc !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05), inset 0 1px 0 white !important;
    color: #333 !important;
    font-weight: 700 !important;
}
.bank-link-button:active {
    background: #e9ecef !important;
    transform: scale(0.98);
}
/* ============================================================
   FIX POSISI TOMBOL & JUDUL (Agar Tidak Tabrakan)
   ============================================================ */

/* 1. TOMBOL ID DEVICE (Naikkan sedikit ke pojok) */
.device-id-button {
    position: absolute !important;
    top: 12px !important;   /* Lebih mepet atas */
    right: 12px !important; /* Lebih mepet kanan */
    z-index: 50;
    
    /* Style Crystal Glass (Tetap dipertahankan) */
    margin: 0 !important;
    width: auto !important;
    font-size: 10px !important; /* Font sedikit diperkecil agar proporsional */
    font-weight: 700 !important;
    color: #444 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 12px !important; /* Padding disesuaikan */
    border-radius: 50px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(240,240,240,0.8) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transition: all 0.2s;
    cursor: pointer;
}

.device-id-button:active {
    transform: scale(0.95);
    background: rgba(220, 220, 220, 0.9) !important;
}

/* 2. JUDUL CARD (Diturunkan ke bawah) */
.token-card h2 {
    /* Memberi jarak atas yang besar agar Judul turun DI BAWAH tombol */
    margin-top: 45px !important; 
    margin-bottom: 15px !important;
    
    /* Pastikan judul tetap rapi */
    line-height: 1.2;
    padding: 0 10px;
    position: relative;
    z-index: 1;
}
/* ============================================================
   CUSTOM POPUP DEVICE ID (MODERN GLASS)
   ============================================================ */

/* 1. Overlay (Latar Belakang Gelap) */
.custom-popup-overlay {
    display: none; /* Sembunyi dulu */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Gelap transparan */
    backdrop-filter: blur(8px); /* Efek blur di belakang */
    z-index: 9999; /* Paling atas */
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Class untuk memunculkan overlay */
.custom-popup-overlay.show {
    display: flex;
    opacity: 1;
}

/* ============================================================
   UPDATE: ANIMASI POPUP DARI TOMBOL (ZOOM OUT EFFECT)
   ============================================================ */

/* Pastikan Overlay Flexbox agar kartu di tengah */
.custom-popup-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-popup-overlay.show {
    display: flex; /* Penting: Flex agar justify-center jalan */
    opacity: 1;
}

/* KARTU POPUP */
.custom-popup-card {
    background: rgba(255, 255, 255, 0.95);
    width: 100%;
    max-width: 320px;
    padding: 25px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,1);

    /* STATE AWAL: Hilang & Kecil */
    opacity: 0;
    transform: scale(0); 
    
    /* Matikan transition biasa, kita pakai animation keyframes */
    transition: none; 
}

/* CLASS ANIMASI (Ditambahkan oleh JS) */
.custom-popup-card.animate-open {
    /* Gunakan cubic-bezier agar ada efek 'membal' saat membesar */
    animation: popup-zoom-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* KEYFRAMES */
@keyframes popup-zoom-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}



.custom-popup-overlay.show .custom-popup-card {
    transform: scale(1);
}

/* 3. Ikon & Teks */
.popup-icon img {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.custom-popup-card h3 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 20px;
    font-weight: 700;
}

.popup-desc {
    color: #666;
    font-size: 13px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* 4. Area Copy ID */
.copy-container {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: #F0F2F5;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #E0E0E0;
}

.copy-container input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: monospace;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    outline: none;
    text-align: center;
    width: 100%;
}

.copy-btn {
    background-color: #007AFF;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.copy-btn:active {
    transform: scale(0.95);
}

.copy-btn.copied {
    background-color: #28a745; /* Hijau saat tersalin */
}

/* 5. Tombol Tutup */
.close-popup-btn {
    background: transparent;
    border: 1px solid #ddd;
    color: #555;
    padding: 10px 0;
    width: 100%;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.close-popup-btn:active {
    background: #f5f5f5;
}
/* ======================================
   STYLE KHUSUS POPUP LOGOUT
   ====================================== */

/* Mengatur 2 tombol sejajar */
.popup-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.action-btn {
    flex: 1; /* Lebar sama rata */
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.2s;
}

.action-btn:active {
    transform: scale(0.95);
}

/* Tombol Batal (Abu-abu lembut) */
.action-btn.cancel {
    background-color: #F0F2F5;
    color: #555;
    border: 1px solid #ddd;
}

/* Tombol Logout (Merah Modern) */
.action-btn.confirm {
    background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.3);
}
/* ============================================================
   REDESIGN TOTAL FORM ORDER (MODERN & PREMIUM)
   ============================================================ */

/* 1. KARTU UTAMA (Wadah) */
.order-card {
    background: rgba(255, 255, 255, 0.95) !important; /* Putih bersih */
    border: 1px solid rgba(255, 255, 255, 1) !important;
    border-radius: 24px !important; /* Sudut lebih bulat */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important; /* Bayangan lembut besar */
    padding: 30px 24px !important;
    max-width: 380px !important; /* Lebar ideal HP */
}

/* Judul Form */
.order-card h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 25px !important;
    letter-spacing: -0.5px;
}

/* 2. INPUT & SELECT (Kolom Isian) */
.order-form-group input, 
.order-form-group select {
    background-color: #F7F9FC !important; /* Abu sangat muda */
    border: 1px solid #E4E9F2 !important;
    border-radius: 14px !important; /* Sudut input bulat */
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #333 !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

/* Efek saat kolom diklik (Fokus) */
.order-form-group input:focus, 
.order-form-group select:focus {
    background-color: #FFFFFF !important;
    border-color: #007AFF !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1) !important; /* Glow biru lembut */
    outline: none;
}

/* Kolom Device ID (Readonly) dibuat beda */
#order-device-id {
    background-color: #E9ECEF !important;
    color: #6c757d !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border: none !important;
}

/* 3. TAMPILAN HARGA (Besar & Gradient) */
.order-price-display {
    font-size: 36px !important;
    font-weight: 800 !important;
    /* Gradient Text Biru */
    background: linear-gradient(135deg, #007AFF 0%, #00C6FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 5px 0 15px 0 !important;
    letter-spacing: -1px;
}

/* 4. GAMBAR QRIS (Frame Foto) */
.order-qris-image {
    width: 100% !important;
    max-width: 280px !important;
    border-radius: 20px !important;
    /* Efek frame foto timbul */
    border: 8px solid #FFFFFF !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    margin: 20px auto !important;
    display: block;
}

/* 5. INSTRUKSI TEXT (Box Info) */
.order-instructions {
    background-color: #FFF8E1 !important; /* Kuning lembut */
    color: #856404 !important;
    border: 1px solid #FFEBAA !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    margin-bottom: 20px !important;
}

/* 6. TOMBOL UPLOAD BUKTI (Dashed Area) */
label[for="order-receipt-upload"] {
    background-color: #F8F9FA !important;
    border: 2px dashed #CED4DA !important; /* Garis putus-putus modern */
    border-radius: 14px !important;
    color: #495057 !important;
    font-weight: 600 !important;
    padding: 16px !important;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Tambah Ikon Upload pake CSS Before */
label[for="order-receipt-upload"]::before {
    content: "📂"; 
    font-size: 18px;
}

label[for="order-receipt-upload"]:hover {
    background-color: #EBF8FF !important;
    border-color: #007AFF !important;
    color: #007AFF !important;
}

/* Saat file dipilih */
label[for="order-receipt-upload"].file-selected {
    background-color: #E6FFFA !important;
    border-color: #28a745 !important;
    border-style: solid !important;
    color: #28a745 !important;
}

/* 7. TOMBOL KIRIM (Gradient Hijau Mewah) */
.order-submit-button {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    margin-top: 15px !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.order-submit-button:active {
    transform: scale(0.98) !important;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2) !important;
}

/* 8. TOMBOL CLOSE (Bulat Pojok) */
.order-close-button {
    top: 20px !important;
    right: 20px !important;
    width: 36px !important;
    height: 36px !important;
    background-color: #F1F3F5 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    color: #333 !important;
    font-size: 24px !important;
    transition: background 0.2s !important;
    padding-bottom: 4px !important; /* Penyesuaian vertikal simbol X */
}

.order-close-button:hover,
.order-close-button:active {
    background-color: #E9ECEF !important;
    color: #000 !important;
}
/* ============================================================
   ANIMASI NETWORK BACKGROUND (POSISI CANVAS)
   ============================================================ */

/* 1. Canvas memenuhi layar overlay */
#network-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Letakkan di lapisan paling belakang */
    pointer-events: none; /* Agar klik tembus ke belakang (aman) */
}

/* 2. Pastikan Kartu Form Order Timbul di Atas Animasi */
.order-card {
    position: relative; /* Penting agar z-index berfungsi */
    z-index: 10; /* Lebih tinggi dari canvas (0) */
}
/* ============================================================
   REDESIGN TOTAL: MENU UTAMA (TOKEN) - MODERN GLASS
   ============================================================ */

/* 1. KARTU UTAMA (Efek Kaca Premium) */
.token-card {
    background: rgba(255, 255, 255, 0.85) !important; /* Lebih putih dikit biar teks jelas */
    backdrop-filter: blur(20px) !important; /* Blur kuat */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 30px !important; /* Sudut makin bulat */
    padding: 30px 24px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
    max-width: 360px !important;
    
    /* Animasi Muncul */
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Judul Utama */
.token-card h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-top: 45px !important; /* Jarak aman dari tombol ID Device */
    letter-spacing: -0.5px;
    margin-bottom: 8px !important;
}

/* Deskripsi Kecil */
.token-card p {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 20px !important;
}

/* 2. LIVE USER BADGE (Bentuk Kapsul Modern) */
.active-users-notification {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    color: #444 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    display: inline-flex !important;
    margin-bottom: 25px !important;
}

/* 3. INPUT TOKEN (Modern Floating Style) */
.token-input {
    background: #FFFFFF !important;
    border: 2px solid transparent !important;
    border-radius: 16px !important;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #333 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease;
    margin-bottom: 20px !important;
    letter-spacing: 1px;
}

.token-input:focus {
    border-color: #007AFF !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.15) !important;
    outline: none;
}

/* ============================================================
   LIST HARGA: CRYSTAL CLEAR (SANGAT TRANSPARAN)
   ============================================================ */
.price-list {
    margin-top: 15px !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* Judul & Subjudul */
.price-list h3 {
    font-size: 13px !important;
    margin-bottom: 5px !important;
    padding: 5px !important;
    /* Background judul sangat tipis */
    background: rgba(255, 255, 255, 0.3) !important; 
    border-radius: 8px;
    color: #222 !important; /* Teks digelapkan biar terbaca */
}

.price-list h4 {
    font-size: 10px !important;
    text-transform: uppercase;
    color: #444 !important; /* Teks digelapkan */
    margin: 8px 0 4px 5px !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4); /* Bayangan teks agar kontras dgn video */
}

/* WADAH GRID */
.price-list ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 4px !important; /* Beri jarak antar kotak agar video terlihat di celah */
    
    background: transparent !important; /* Wadah tidak berwarna */
    border: none !important;
    border-radius: 0;
    margin-bottom: 5px !important;
}

/* ITEM LIST (SEL KACA BENING) */
.price-list li {
    /* KUNCI: Hanya 25% putih. Sangat transparan! */
    background: rgba(255, 255, 255, 0.25) !important; 
    
    /* Garis pinggir tipis agar kotak tetap terlihat bentuknya */
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important; /* Sudut kotak membulat */
    
    padding: 6px 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    backdrop-filter: blur(2px); /* Blur sedikit saja */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.price-list li:hover {
    background: rgba(255, 255, 255, 0.5) !important; /* Lebih putih saat disentuh */
}

/* Teks Nama (Kiri) */
.price-list li span:first-child {
    font-size: 11px !important;
    color: #111 !important; /* Hitam pekat */
    font-weight: 700 !important;
}

/* Teks Harga (Kanan) */
.price-list li span:last-child {
    font-size: 11px !important;
    color: #004499 !important; /* Biru tua pekat */
    font-weight: 800 !important;
    background: rgba(255, 255, 255, 0.5); /* Badge putih tipis di belakang harga */
    padding: 1px 5px;
    border-radius: 4px;
}
/* ============================================================
   KARTU UTAMA: ULTRA CLEAR (SANGAT BENING) - UPDATE TERBARU
   ============================================================ */
.token-card {
    /* Background hanya 25% putih, sisanya bening */
    background: rgba(255, 255, 255, 0.44) !important; 
    
    /* Blur dikurangi jadi 4px agar video di belakang tajam */
    backdrop-filter: blur(7px) !important; 
    -webkit-backdrop-filter: blur(7px);
    
    /* Border halus transparan */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    
    /* Pengaturan layout tetap */
    border-radius: 30px !important;
    padding: 30px 24px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important;
    width: 100%;
    max-width: 360px !important;
    position: relative;
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* ============================================================
   MODERN UI UPDATE FOR INDEX.HTML (SETUP MENU)
   ============================================================ */

/* 1. KARTU UTAMA (Redesign) */
.setup-card {
    background: rgba(255, 255, 255, 0.96) !important; /* Putih solid dengan transparansi minim */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 1) !important;
    border-radius: 24px !important;
    padding: 0 !important; /* Reset padding, kita atur di children */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important; /* Agar header tidak bocor */
    max-width: 400px !important;
    width: 90% !important;
    animation: popUpModern 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes popUpModern {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* 2. HEADER BARU (Gradient Blue) */
.setup-header-modern {
    background: linear-gradient(135deg, #0052D4 0%, #4364F7 50%, #6FB1FC 100%);
    padding: 30px 20px 40px 20px;
    text-align: center;
    color: white;
    position: relative;
}

.setup-header-modern h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 10px 0 5px 0 !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.setup-header-modern p {
    font-size: 13px !important;
    opacity: 0.9;
    margin: 0 !important;
    color: rgba(255,255,255,0.9) !important;
}

/* 3. LOGOUT BUTTON (Floating Top Right) */
.setup-logout-btn-modern {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.2s;
}

.setup-logout-btn-modern:hover {
    background: rgba(255, 59, 48, 0.8);
    border-color: rgba(255, 59, 48, 1);
}

/* 4. CONTAINER FORM (Body) */
.setup-body-modern {
    padding: 25px 20px 20px 20px;
    background: #fff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    margin-top: -25px; /* Overlap effect */
    position: relative;
    z-index: 10;
}

/* 5. INPUT GROUP MODERN */
.modern-input-group {
    margin-bottom: 16px;
}

.modern-input-label {
    font-size: 12px;
    font-weight: 700;
    color: #8898AA;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}

.modern-input-box {
    display: flex;
    align-items: center;
    background-color: #F4F7F9;
    border: 1px solid #E9ECEF;
    border-radius: 12px;
    padding: 4px 12px;
    transition: all 0.3s;
}

.modern-input-box:focus-within {
    background-color: #fff;
    border-color: #007AFF;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
}

.modern-input-icon {
    font-size: 16px;
    color: #ADB5BD;
    width: 24px;
    text-align: center;
    margin-right: 8px;
}

.modern-input-box:focus-within .modern-input-icon {
    color: #007AFF;
}

/* Override gaya input lama */
.setup-input {
    border: none !important;
    background: transparent !important;
    padding: 12px 0 !important;
    font-weight: 600 !important;
    color: #32325D !important;
    width: 100%;
}
.setup-input:focus {
    box-shadow: none !important;
}

/* 6. TOMBOL AKSI (Gradient Modern) */
.btn-action-modern {
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-action-modern:active {
    transform: scale(0.98);
}

.btn-blue {
    background: linear-gradient(135deg, #007AFF 0%, #0052D4 100%);
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
}

.btn-green {
    background: linear-gradient(135deg, #2DCE89 0%, #2dcecc 100%);
    box-shadow: 0 4px 15px rgba(45, 206, 137, 0.3);
}

/* 7. LINK BANK LAIN (SeaBank Style) */
.other-bank-modern {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #E9ECEF;
    text-align: center;
}

.other-bank-label {
    font-size: 12px;
    color: #8898AA;
    margin-bottom: 10px;
    font-weight: 600;
}

.bank-link-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #fff;
    border: 1px solid #E9ECEF;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: all 0.2s;
}

.bank-link-card:hover {
    background: #FFFAEE;
    border-color: #FFDE9E;
    transform: translateY(-2px);
}

/* 8. TOKEN INFO LINK */
.token-link-modern {
    display: inline-block;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    background: rgba(0,0,0,0.15);
    padding: 4px 10px;
    border-radius: 12px;
    margin-top: 8px;
    cursor: pointer;
}
.token-link-modern:hover {
    background: rgba(0,0,0,0.25);
}
/* ======================================
   TOMBOL MUSIK (POSISI KIRI ATAS)
   ====================================== */
.music-button {
    position: absolute !important;
    top: 12px !important;    /* Jarak dari Atas */
    left: 12px !important;   /* Posisi di KIRI (Device ID ada di Kanan) */
    z-index: 50;
    
    /* Desain Glassmorphism (Mirip Device ID) */
    margin: 0 !important;
    width: auto !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #444 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 12px !important;
    border-radius: 50px !important;
    
    /* Warna Background Gradient Putih ke Abu */
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(240,240,240,0.8) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    
    /* Efek Kaca Blur */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transition: all 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px; /* Jarak icon dan teks */
}

/* Efek Tekan */
.music-button:active {
    transform: scale(0.95);
    background: rgba(220, 220, 220, 0.9) !important;
}

/* KELAS KHUSUS SAAT MUSIK MENYALA (Animasi) */
.music-button.playing {
    border-color: #28a745 !important; /* Border jadi Hijau */
    color: #28a745 !important;        /* Teks jadi Hijau */
    background: #fff !important;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.4) !important; /* Efek Glow */
}

/* Animasi Icon Berputar */
.music-button.playing i {
    animation: spinMusic 2s linear infinite;
}

@keyframes spinMusic {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ======================================
   MUSIC PLAYER MODERN UI
   ====================================== */

/* 1. Tombol Pemicu (Di Token Card) */
.music-floating-btn {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 50;
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #444 !important;
    text-transform: uppercase;
    padding: 6px 12px !important;
    border-radius: 50px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(240,240,240,0.9) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.music-floating-btn:active { transform: scale(0.95); }

/* Jika sedang memutar, tombol jadi hijau */
.music-floating-btn.active-playing {
    border-color: #28a745 !important;
    color: #28a745 !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}
.music-floating-btn.active-playing i { animation: spinMusic 2s linear infinite; }

/* 2. Overlay Player (Popup) */
.music-player-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 20px; /* Muncul di pojok kanan bawah (Desktop) */
    z-index: 9999;
    animation: slideUpPlayer 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Responsif untuk HP: Tengah Layar */
@media (max-width: 480px) {
    .music-player-overlay {
        bottom: auto; right: auto;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 350px;
    }
}

.music-player-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    width: 300px;
    display: flex;
    flex-direction: column;
}

/* Header */
.player-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px;
}
.player-header h3 { margin: 0; font-size: 16px; color: #333; }
.close-player-btn {
    background: none; border: none; font-size: 24px; cursor: pointer; color: #888;
}

/* Info Track & Art */
.now-playing-info {
    display: flex; align-items: center; gap: 15px; margin-bottom: 15px;
}
.album-art {
    width: 50px; height: 50px;
    background: linear-gradient(135deg, #007AFF, #00C6FF);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 24px;
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3);
}
.spin-art { animation: spinMusic 3s linear infinite; animation-play-state: paused; }
.playing .spin-art { animation-play-state: running; }

.track-details { display: flex; flex-direction: column; overflow: hidden; }
#track-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
#track-status { font-size: 12px; color: #666; }

/* Controls */
.player-controls { display: flex; justify-content: center; gap: 15px; margin-bottom: 10px; }
.player-controls button {
    background: #f0f2f5; border: none; border-radius: 50%;
    width: 40px; height: 40px; cursor: pointer; color: #333;
    transition: all 0.2s;
}
.player-controls button:active { transform: scale(0.9); }
.play-btn-main { background: #007AFF !important; color: white !important; width: 45px !important; height: 45px !important; font-size: 18px; }

/* Playlist */
.playlist-container h4 { margin: 10px 0 5px 0; font-size: 12px; color: #888; text-transform: uppercase; }
#playlist-list {
    list-style: none; padding: 0; margin: 0;
    max-height: 150px; overflow-y: auto;
    border-top: 1px solid #eee;
}
.playlist-item {
    padding: 8px 10px;
    font-size: 13px; color: #444;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer; display: flex; justify-content: space-between;
}
.playlist-item:hover { background: #f0f8ff; }
.playlist-item.active {
    color: #007AFF; font-weight: 700; background: #e6f2ff;
}
.playlist-item i { font-size: 10px; opacity: 0.5; margin-top: 3px;}

/* Animations */
@keyframes spinMusic { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes slideUpPlayer { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
/* ======================================
   CSS MAINTENANCE OVERLAY (MODERN)
   ====================================== */
.maintenance-overlay {
    display: none; /* Sembunyi default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Latar gelap */
    backdrop-filter: blur(10px); /* Efek blur kuat */
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999; /* Paling atas dari segalanya */
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex-direction: column;
}

.maintenance-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: popUpBounce 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.maintenance-icon-box {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%); /* Gradasi Orange-Merah */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px auto;
    box-shadow: 0 10px 20px rgba(255, 94, 98, 0.3);
}

.maintenance-icon {
    font-size: 36px;
    color: white;
    animation: wrenchSpin 2s ease-in-out infinite; /* Animasi ikon goyang */
}

@keyframes wrenchSpin {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    75% { transform: rotate(20deg); }
}

.maintenance-card h2 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 22px;
    font-weight: 700;
}

.maintenance-desc {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 5px;
}

.maintenance-sub {
    font-size: 13px;
    color: #888;
    margin-bottom: 25px;
}

.maintenance-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%);
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 5px 15px rgba(255, 94, 98, 0.2);
}

.maintenance-btn:active {
    transform: scale(0.95);
}
/* ==========================================
   CSS TAMPILAN BARU (PENERIMA BARU - BRIMO STYLE)
   [UPDATE FINAL: FONT KUSTOM + UKURAN BESAR + TOGGLE FULL]
   ========================================== */
.new-recipient-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #F4F6F9;
    z-index: 1100;
    display: flex;
    flex-direction: column;
}

/* Header Section */
.nr-header {
    background-color: #1F8FE5;
    padding: 20px 22px 0 22px;
    color: white;
}

.nr-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
    margin-top: 14px;
}

.nr-top-bar h3 {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    /* FONT KUSTOM */
    font-family: 'FontPenerima', sans-serif;
}

.nr-top-bar i {
    font-size: 23px;
    cursor: pointer;
}

/* ==========================================
   PERBAIKAN TOGGLE: FULL SIZE & MENYATU
   ========================================== */

/* 1. PEMBUNGKUS (KOTAK BIRU) */
.nr-toggle-wrapper {
    background-color: #0566a3;
    border-radius: 50px;
    
    /* WAJIB 0 AGAR TOMBOL MENEMPEL KE TEPI */
    padding: 0 !important;
    border: none !important; /* Hapus border agar tidak memakan tempat */
    
    display: flex;
    margin-bottom: 26px;
    
    /* KITA KUNCI TINGGINYA AGAR STABIL */
    height: 45px; 
    overflow: hidden; /* Agar sudut tombol putih tidak bocor keluar */
}

/* 2. TOMBOL (ISI DALAMNYA) */
.nr-toggle-item {
    flex: 1; /* Membagi lebar sama rata (50:50) */
    
    /* GANTI PADDING DENGAN FLEXBOX CENTER */
    /* Ini agar teks tetap di tengah tapi tombol mengisi penuh ke atas/bawah */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; 
    margin: 0;
    height: 100%; /* Paksa tinggi 100% mengikuti pembungkus */
    
    font-size: 23px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    
    /* FONT KUSTOM */
    font-family: 'FontPenerima', sans-serif;
}

/* KONDISI AKTIF (PUTIH) */
.nr-toggle-item.active {
    background-color: #FFFFFF;
    color: #0977be;
    /* Hapus shadow jika ingin terlihat benar-benar rata/flat menyatu */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.2); */ 
}

/* KONDISI TIDAK AKTIF (TRANSPARAN) */
.nr-toggle-item.inactive {
    background-color: transparent;
    color: rgba(255,255,255,0.8);
}

/* ----------------------------------------- */

/* Body Content */
.nr-body {
    flex: 1;
    padding: 26px 22px;
}

.nr-input-group {
    margin-bottom: 28px;
}

/* Label (Bank Tujuan & Nomor Rekening/Alias) */
.nr-input-group label {
    display: block;
    font-size: 19px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    /* FONT KUSTOM */
    font-family: 'FontBankTujuan', sans-serif;
}

/* Select Box Custom */
/* ==========================================
   PERBAIKAN FINAL ALIGNMENT (LURUS TOTAL)
   ========================================== */

/* 1. SETUP KOTAK LUAR (Wadah) */
/* Kita atur padding kiri-kanan sama persis: 20px */
.nr-select-box,
.nr-input-box {
    background: #FFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 0 20px !important; /* PENTING: Padding Luar Harus Sama */
    min-height: 60px;
    display: flex;
    align-items: center;
    position: relative;
}

/* 2. SETUP SPESIFIK SELECT BOX */
.nr-select-box {
    justify-content: space-between; /* Agar panah ada di kanan */
    cursor: pointer;
}

/* 3. SETUP SPESIFIK INPUT BOX */
.nr-input-box {
    /* Gunakan GAP 12px agar SAMA PERSIS dengan style inline di HTML Select Box */
    gap: 12px !important; 
}

/* 4. KUNCI LEBAR IKON (GRID SYSTEM) */
/* Selector ini menargetkan: 
   A. Ikon Bank (yang ada di dalam div pembungkus)
   B. Ikon Kartu (yang langsung ada di dalam box) */
.nr-select-box div i:first-child, 
.nr-input-box > i {
    width: 28px !important;      /* Lebar Area Ikon FIX */
    min-width: 28px !important;  /* Paksa tidak boleh mengecil */
    height: 28px !important;
    
    /* Trik agar ikon glyph benar-benar di tengah area 28px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    font-size: 25px !important;  /* Ukuran font ikon */
    color: #666;
    margin: 0 !important;        /* Hapus margin liar */
    padding: 0 !important;       /* Hapus padding liar */
}

/* 5. TEKS & INPUT (Reset Posisi) */
.nr-select-box span,
.nr-input-box input {
    margin: 0 !important;
    padding: 0 !important;
    border: none;
    outline: none;
    font-size: 25px;
    color: #333;
}

/* Font Spesifik */
.nr-select-box span {
    font-weight: 500;
    font-family: 'FontBankTujuan', sans-serif;
}

.nr-input-box input {
    width: 100%;
    font-family: 'FontAlias', sans-serif;
}

/* Placeholder */
.nr-input-box input::placeholder {
    color: #BBB;
    font-size: 16px;
    font-family: 'FontAlias', sans-serif;
}

/* Panah Dropdown Kanan (Jangan diganggu) */
.nr-select-box > i.fa-chevron-down {
    font-size: 21px;
    color: #007AFF;
    width: auto !important; /* Biarkan auto */
}

.nr-hidden-select {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}

/* Helper Text */
.nr-helper-text {
    font-size: 16px;
    color: #888;
    margin-top: 10px;
    margin-bottom: 0;
    /* FONT KUSTOM */
    font-family: 'FontAlias', sans-serif;
}

/* Info Box Blue */
.nr-info-box {
    background-color: #E1F4FF;
    border: 1px solid #Cceeff;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.nr-info-box i {
    color: #0977be;
    font-size: 21px;
    margin-top: 2px;
}

.nr-info-box p {
    margin: 0;
    font-size: 17px;
    color: #444;
    line-height: 1.5;
    /* FONT KUSTOM */
    font-family: 'FontAlias', sans-serif;
}

/* Footer Button */
.nr-footer {
    padding: 24px 22px;
    background-color: #F4F6F9;
}

/* Update Font & Warna Tombol Lanjutkan (Penerima Baru) */
#nr-continue-btn {
    width: 100%;
    padding: 18px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s;
    
    /* SETTING FONT BARU */
    font-family: 'FontLanjutkan', sans-serif !important;
}

.nr-btn-disabled {
    background-color: #CCCCCC;
    color: #888;
    cursor: not-allowed !important;
}

/* Warna Baru Saat Tombol Aktif */
.nr-btn-active {
    background-color: #1F8FE5 !important; /* <-- Warna Baru Request Anda */
    color: white;
    cursor: pointer !important;
}

/* ==========================================
   CSS BOTTOM SHEET DAFTAR BANK (MIRIP GAMBAR)
   ========================================== */

/* Overlay Gelap di Belakang */
.bank-sheet-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000; /* Paling atas */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Posisi di bawah */
    animation: fadeInBg 0.3s ease;
}

/* Container Putih (Sheet) */
/* Container Putih (Sheet) */
.bank-sheet {
    background-color: #fff;
    width: 100%;
    
    /* UBAH DI SINI: Gunakan 'height' bukan 'max-height' agar tinggi tetap stabil */
    height: 85vh; 
    
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    flex-direction: column;
    animation: slideUpSheet 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding-bottom: 20px;
    
    /* Tambahan agar keyboard tidak merusak layout di HP */
    position: relative; 
}

/* Garis Handle Abu-abu */
.sheet-handle {
    width: 40px;
    height: 4px;
    background-color: #E0E0E0;
    border-radius: 4px;
    margin: 0 auto 15px auto; /* Jarak ke judul */
}

.sheet-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

/* Search Bar Wrapper */
.sheet-search-wrapper {
    padding: 0 16px 10px 16px;
    border-bottom: 1px solid #f0f0f0;
}

/* Kotak Input Search */
.sheet-search-box {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc; /* Border abu */
    border-radius: 8px;
    padding: 10px 12px;
}

.sheet-search-box i {
    color: #888;
    margin-right: 10px;
    font-size: 16px;
}

.sheet-search-box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: #333;
    font-family: 'Inter', sans-serif;
}
.sheet-search-box input::placeholder {
    color: #999; /* Placeholder biru muda/abu sesuai gambar */
}

/* Daftar List Bank */
.sheet-list {
    overflow-y: auto; /* Scrollable */
    flex: 1;
    padding: 0 16px;
}

.bank-item {
    padding: 16px 0;
    border-bottom: 1px solid #F0F0F0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
    text-transform: uppercase; /* Agar huruf besar semua sesuai gambar */
}

.bank-item:hover {
    color: #007AFF;
}

/* Animasi */
@keyframes slideUpSheet {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes fadeInBg {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* TAMBAHAN FONT KUSTOM PENERIMA BARU */
@font-face {
  font-family: 'FontPenerima'; 
  src: url('penerima.ttf') format('truetype');
}
@font-face {
  font-family: 'FontBankTujuan'; 
  src: url('Banktujuan.ttf') format('truetype');
}
@font-face {
  font-family: 'FontAlias'; 
  src: url('alias.ttf') format('truetype');
}
/* ==========================================
   FIX FINAL: UKURAN BESAR & FONT KUSTOM
   ========================================== */
input#nr-account-number {
    /* 1. Paksa Ukuran */
    font-size: 16px !important;
    
    /* 2. Paksa Font Kustom (Nama harus sama dgn @font-face di atas) */
    font-family: 'FontAlias', sans-serif !important;
    
    /* 3. Reset Gaya Bawaan Browser */
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    color: #333 !important;
    
    /* 4. Pastikan teks lurus */
    line-height: normal !important;
    padding-top: 0px !important; /* Sedikit padding agar tidak terpotong */
}

/* Pastikan Placeholder juga mengikuti font yang sama */
input#nr-account-number::placeholder {
    font-family: 'FontAlias', sans-serif !important;
    font-size: 15px !important; /* Placeholder sedikit lebih kecil agar rapi */
    color: #BBB !important;
    font-weight: normal !important;
}
/* ==================================================
   FIX UKURAN FONT HEADER PENERIMA BARU (FORCE)
   ================================================== */

/* 1. Ukuran Judul "Penerima Baru" */
.nr-top-bar h3 {
    font-size: 22px !important; /* Ubah angka ini sesuai selera */
}

/* 2. Ukuran Teks "Nomor Rekening" & "Kontak BI-FAST" */
.nr-toggle-item {
    font-size: 15px !important; /* Ubah angka ini sesuai selera */
}
/* ======================================================
   CUSTOM FONT JUDUL HEADER "MASUKKAN NOMINAL"
   ====================================================== */

/* 1. Daftarkan Font Baru */
@font-face {
  font-family: 'FontMasukanNominal'; 
  src: url('masukannominal.ttf') format('truetype');
}

/* 2. Terapkan ke Judul Header */
.app-header h1 {
    font-family: 'FontMasukanNominal', sans-serif !important;
    
    /* Opsional: Jika font barunya terlihat kekecilan, 
       Anda bisa perbesar angkanya di bawah ini: */
    /* font-size: 20px !important; */
}
/* Update Font & Ukuran Judul "Masukkan Nominal" */
.app-header h1 {
    font-family: 'FontMasukanNominal', sans-serif !important;
    
    /* UBAH ANGKA DI BAWAH INI UNTUK UKURAN */
    font-size: 22px !important; 
    
    /* Opsional: Jika ingin huruf tebal */
    font-weight: bold !important; 
}
/* Update Ukuran Font Saldo Sumber Dana */
.source-info .balance {
    font-size: 19px !important; /* Ganti 18px sesuai keinginan */
}
/* Update Ukuran Font Nomor Rekening Sumber Dana */
.source-info .account-number {
    font-size: 16px !important; /* Sesuaikan ukuran di sini */
}
/* ======================================================
   CUSTOM FONT SUMBER DANA (REQ BARU)
   ====================================================== */

/* 1. Daftarkan Font Nomor Rekening */
@font-face {
  font-family: 'FontSumberRekening'; 
  src: url('sumberrekening.ttf') format('truetype');
}

/* 2. Daftarkan Font Nama Rekening */
@font-face {
  font-family: 'FontSumberNama'; 
  src: url('sumbernama.ttf') format('truetype');
}

/* 3. Terapkan Font ke Tampilan */

/* Untuk Nomor Rekening (Sumber Dana) */
.source-info .account-number {
    font-family: 'FontSumberRekening', sans-serif !important;
}

/* Untuk Nama Rekening (Sumber Dana) */
.source-info .account-name {
    font-family: 'FontSumberNama', sans-serif !important;
}
/* ======================================================
   KHUSUS INFO PENERIMA: KOTAK & FULL WIDTH
   (Nama Rekening, No Rekening, Nama Bank)
   ====================================================== */

.card.recipient-info {
    /* 1. Hilangkan Sudut Melengkung */
    border-radius: 0 !important;

    /* 2. Tarik kartu ke pinggir layar (Melewati batas padding utama) */
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;

    /* 3. Rapikan Posisi */
    margin-top: 0 !important;      /* Tempelkan ke Header Biru */
    box-shadow: none !important;   /* Hilangkan bayangan agar menyatu */
    border-bottom: 1px solid #E0E0E0 !important; /* Garis pemisah bawah */
    
    /* 4. Pastikan isi teks tidak mepet pinggir layar */
    padding-left: 20px !important;
    padding-right: 20px !important;
}
/* ======================================================
   CUSTOM TRANSFER TERJADWAL (FULL WIDTH & ADA JARAK)
   ====================================================== */

/* 1. Daftarkan Font Jadwal */
@font-face {
    font-family: 'FontJadwal';
    src: url('jadwal.ttf') format('truetype');
}

/* 2. Styling Wadah Kartu (Kotak Mentok Tepi + Jarak Atas) */
.scheduled-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF !important;
    
    /* HILANGKAN SUDUT (ROUND) */
    border-radius: 0 !important; 

    /* TEKNIK TARIK KE TEPI DINDING (FULL WIDTH) */
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    
    /* --- PERBAIKAN JARAK (BERI RUANG DI ATAS) --- */
    margin-top: 24px !important;    /* Memberi jarak dari Nominal */
    margin-bottom: 0 !important;    /* Rapatkan bawah */
    
    /* Styling Tambahan */
    padding: 20px 20px !important;  
    box-shadow: none !important;    
    border: none !important;
    border-bottom: 1px solid #E0E0E0 !important; 
}

/* 3. Styling Bagian Teks */
.st-text-content {
    flex: 1;
    padding-right: 20px;
}

.st-text-content h3 {
    font-family: 'FontJadwal', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 0 6px 0 !important;
}

.st-text-content p {
    font-family: 'FontJadwal', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #666666 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}
/* ======================================================
   UPDATE FONT TRANSFER TERJADWAL (JUDUL & BAWAH BEDA)
   ====================================================== */

/* 1. Daftarkan Font Bawah Baru */
@font-face {
    font-family: 'FontJadwalBawah';
    src: url('jadwalbawah.ttf') format('truetype');
}

/* 2. Pastikan Font Judul tetap 'jadwal.ttf' */
.st-text-content h3 {
    font-family: 'FontJadwal', sans-serif !important;
}

/* 3. Ubah Tulisan Bawah menjadi 'jadwalbawah.ttf' */
.st-text-content p {
    font-family: 'FontJadwalBawah', sans-serif !important;
}
/* ======================================================
   CUSTOM FONT SPESIFIK: DAFTAR TERSIMPAN, METODE, NOMINAL
   ====================================================== */

/* 1. Daftarkan Font-font Baru */
@font-face {
    font-family: 'FontDaftarTersimpan';
    src: url('daftartersimpan.ttf') format('truetype');
}
@font-face {
    font-family: 'FontMetodeTransfer';
    src: url('metodetransfer.ttf') format('truetype');
}
@font-face {
    font-family: 'FontNominalTransfers';
    src: url('nominaltransfers.ttf') format('truetype');
}

/* 2. Terapkan ke "Tambahkan ke Daftar Tersimpan" */
.toggle-card label[for="save-recipient"] {
    font-family: 'FontDaftarTersimpan', sans-serif !important;
}

/* 3. Terapkan ke "Metode Transfer" (Judul Pertama) */
.section-title:nth-of-type(1) {
    font-family: 'FontMetodeTransfer', sans-serif !important;
}

/* 4. Terapkan ke "Nominal Transfer" (Judul Kedua) */
.section-title:nth-of-type(2) {
    font-family: 'FontNominalTransfers', sans-serif !important;
}
/* ======================================================
   UPDATE UKURAN INFO PENERIMA (PERBESAR)
   ====================================================== */

/* 1. Perbesar Lingkaran & Huruf Inisial */
.recipient-avatar {
    width: 38px !important;       /* Ukuran Lingkaran (Default: 45px) */
    height: 38px !important;      /* Harus sama dengan width */
    font-size: 20px !important;   /* Ukuran Huruf Inisial (Default: 16px) */
}

/* 2. Perbesar Nama Penerima */
.recipient-details h3 {
    font-size: 19px !important;   /* Default sebelumnya: 16px */
    margin-bottom: 3px !important; /* Tambah jarak sedikit ke bawah */
}

/* 3. Perbesar Nama Bank & Nomor Rekening */
.recipient-details p {
    font-size: 14px !important;   /* Default sebelumnya: 14px */
}
/* ======================================================
   CUSTOM FONT UNTUK INISIAL (LINGKARAN)
   ====================================================== */

/* 1. Daftarkan Font Inisial */
@font-face {
    font-family: 'FontInisial';
    src: url('inisial.ttf') format('truetype');
}

/* 2. Terapkan ke Lingkaran Avatar */
.recipient-avatar {
    font-family: 'FontInisial', sans-serif !important;
    
    /* Opsional: Jika huruf font kustom posisinya kurang pas (kurang tengah) */
    /* Anda bisa atur padding-top sedikit, misal: */
    /* padding-top: 2px !important; */
}
.kelas-saldo-anda {
    /* Mencegah teks turun ke bawah */
    white-space: nowrap; 
    
    /* Memotong teks yang kepanjangan */
    overflow: hidden;
    
    /* Menambahkan titik-titik (...) di akhir jika kepanjangan */
    text-overflow: ellipsis; 
    
    /* Tentukan lebar maksimal agar tidak menabrak tombol */
    max-width: 200px; /* Sesuaikan dengan desain Anda */
}
/* ======================================================
   PATCH FIX: TOMBOL GANTI AKUN & SALDO (TIMPA PAKSA)
   Letakkan ini di baris paling bawah style.css
   ====================================================== */

/* 1. Pastikan Container Kartu Aman */
.source-card {
    /* Memastikan flexbox bekerja dengan benar */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    /* Mencegah kartu melebar melebihi layar HP */
    max-width: 100% !important;
    overflow: hidden !important;
}

/* 2. Area Teks (Kiri) Dibatasi */
.source-details {
    display: flex !important;
    align-items: center !important;
    flex-grow: 1 !important;
    
    /* KUNCI UTAMA: Agar teks mau dipotong (...) */
    min-width: 0 !important; 
    overflow: hidden !important;
}

/* 3. Area Teks Info (Nama, No Rek, Saldo) */
.source-info {
    display: flex !important;
    flex-direction: column !important;
    
    /* Paksa lebar mengikuti sisa ruang, jangan dorong tombol */
    min-width: 0 !important;
    width: 100% !important;
}

/* 4. Fix Saldo Agar Jadi Titik-Titik (...) */
.source-info .balance {
    /* Pastikan satu baris */
    white-space: nowrap !important;
    
    /* Sembunyikan yang kepanjangan */
    overflow: hidden !important;
    
    /* Tambahkan titik-titik (...) */
    text-overflow: ellipsis !important;
    
    display: block !important;
    max-width: 100% !important;
}

/* 5. Fix Nomor Rekening & Nama (Jaga-jaga kalau panjang juga) */
.source-info .account-number,
.source-info .account-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 6. TOMBOL GANTI (KEBAL) */
.change-button {
    /* PERINTAH MUTLAK: JANGAN MENGECIL! */
    flex-shrink: 0 !important; 
    
    /* Teks tombol jangan turun baris */
    white-space: nowrap !important;
    
    /* Pastikan margin tetap ada agar tidak nempel teks */
    margin-left: 12px !important;
}
/* ======================================================
   PENGATURAN FINAL TOMBOL GANTI (Font, Ukuran, Posisi)
   Letakkan di paling bawah style.css
   ====================================================== */

/* 1. Daftarkan Font (Pastikan file ganti.ttf ada di folder) */
@font-face {
    font-family: 'FontGanti';
    src: url('ganti.ttf') format('truetype');
}

/* 2. Pengaturan Lengkap Tombol Ganti */
.change-button {
    /* --- A. GANTI FONT --- */
    font-family: 'FontGanti', sans-serif !important;
    
    /* --- B. UKURAN HURUF --- */
    font-size: 16px !important;  /* Ubah angka ini untuk besar/kecil */
    
    /* --- C. GESER NAIK/TURUN (Vertikal) --- */
    /* Gunakan minus (-) untuk naik, positif untuk turun */
    margin-top: -60px !important; 
    
    /* --- D. GESER KANAN (Horizontal) --- */
    /* Semakin besar angka, semakin geser ke kanan menjauhi saldo */
    margin-left: 60px !important; 
    
    /* --- PENGATURAN KEAMANAN (JANGAN DIUBAH) --- */
    /* Agar tombol tidak hilang/mengecil saat saldo panjang */
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    
    /* Gaya Standar */
    color: #007AFF !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    
    /* Opsional: Geser lebih mentok ke kanan layar (mengabaikan padding) */
    /* margin-right: -5px !important; */ 
}
/* ======================================================
   POSISI TOMBOL GANTI (METODE FORCE / PAKSA)
   Letakkan paling bawah di style.css
   ====================================================== */

@font-face {
    font-family: 'FontGanti';
    src: url('ganti.ttf') format('truetype');
}

.change-button {
    /* 1. Tampilan Font & Ukuran */
    font-family: 'FontGanti', sans-serif !important;
    font-size: 16px !important; 
    
    /* 2. Keamanan (Agar tidak hilang) */
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    color: #007AFF !important;
    text-decoration: none !important;
    padding: 4px 8px !important;

    /* 3. PENGATURAN POSISI PAKSA (X, Y) */
    /* translate(X, Y) */
    /* X positif = Geser Kanan */
    /* Y negatif = Geser Atas */
    
    transform: translate(12px, -5px) !important; 
    
    /* PENTING: Gunakan angka di atas untuk mengatur posisi */
    /* Contoh: translate(30px, -10px) artinya geser kanan 30px, naik 10px */
}
/* ======================================================
   GESER SATU BLOK SUMBER DANA (NOMOR, NAMA, SALDO)
   Letakkan paling bawah di style.css
   ====================================================== */

.source-info {
    /* Gunakan Transform untuk memindahkan satu paket */
    /* Angka Pertama (0px)  = Geser Kanan/Kiri */
    /* Angka Kedua   (0px)  = Geser Atas/Bawah */
    
    transform: translate(0px, 8px) !important; 
    
    /* PANDUAN SETTING ANGKA:
       translate(10px, 0px)   -> Geser SEMUA ke KANAN 10px
       translate(-10px, 0px)  -> Geser SEMUA ke KIRI 10px
       translate(0px, -10px)  -> Geser SEMUA ke ATAS 10px
       translate(0px, 10px)   -> Geser SEMUA ke BAWAH 10px
       
       Contoh geser Kanan dan Atas sekaligus:
       transform: translate(15px, -5px) !important;
    */
    
    /* Pastikan properti flex tetap aman */
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
}
/* ======================================================
   CUSTOM FONT HALAMAN BUKTI TRANSFER (RESI)
   Letakkan di paling bawah style.css
   ====================================================== */

/* 1. DAFTARKAN SEMUA FONT BARU */

/* Font untuk Judul "Sumber Dana" & "Tujuan" */
@font-face {
    font-family: 'FontSumberTujuan';
    src: url('sumbertujuan.ttf') format('truetype');
}

/* Font untuk Nama Pengirim & Penerima */
@font-face {
    font-family: 'FontNamaBukti';
    src: url('namabuktitf.ttf') format('truetype');
}

/* Font untuk Nama Bank & Nomor Rekening */
@font-face {
    font-family: 'FontNamaSumber';
    src: url('namasumbertf.ttf') format('truetype');
}

/* Font untuk Tanggal & Waktu */
@font-face {
    font-family: 'FontWaktu';
    src: url('waktu.ttf') format('truetype'); 
    /* Pastikan nama file font tidak pakai spasi, ubah jadi waktu.ttf */
}


/* 2. TERAPKAN FONT KE ELEMEN */

/* A. Judul Bagian ("Sumber Dana" dan "Tujuan") */
.receipt-party h4 {
    font-family: 'FontSumberTujuan', sans-serif !important;
    /* Opsional: Atur ukuran jika font terlihat kekecilan/kebesaran */
    /* font-size: 15px !important; */
}

/* B. Nama Pengirim & Penerima */
#receipt-source-name, 
#receipt-dest-name {
    font-family: 'FontNamaBukti', sans-serif !important;
    font-weight: 600 !important; /* Sesuaikan ketebalan */
}

/* C. Nama Bank & Nomor Rekening (Pengirim & Penerima) */
#receipt-source-bank, 
#receipt-source-number,
#receipt-dest-bank, 
#receipt-dest-number {
    font-family: 'FontNamaSumber', sans-serif !important;
}

/* D. Tanggal & Waktu (Di bagian paling atas resi) */
#receipt-timestamp {
    font-family: 'FontWaktu', sans-serif !important;
    /* Opsional: Sesuaikan letter-spacing agar angka tidak terlalu rapat */
    letter-spacing: 0.5px !important;
}
/* ======================================================
   PENGATURAN LENGKAP WAKTU TRANSAKSI (UKURAN & WARNA)
   Letakkan di paling bawah style.css
   ====================================================== */

#receipt-timestamp {
    /* 1. ATUR UKURAN FONT DI SINI */
    font-size: 15px !important;   /* Ubah 13px jadi 12px (kecil) atau 15px (besar) */
    
    /* 2. WARNA & KETAJAMAN */
    color: #FFFFFF !important;    /* Warna Putih */
    opacity: 1 !important;        /* 1 = Jelas/Tajam, 0.8 = Agak Transparan */
    
    /* 3. FONT CUSTOM (Sesuai request sebelumnya) */
    font-family: 'FontWaktu', sans-serif !important;
    
    /* 4. PENGATURAN TAMBAHAN (Agar rapi) */
    letter-spacing: 0.5px !important; /* Jarak antar huruf */
    margin-top: -3px !important;       /* Jarak dari tulisan "Transaksi Berhasil" */
    font-weight: normal !important;   /* Ketebalan huruf (normal/bold) */
}
/* ======================================================
   UKURAN JUDUL STATUS (BERHASIL/GAGAL)
   Letakkan di paling bawah style.css
   ====================================================== */

#receipt-status-title {
    /* 1. GANTI UKURAN FONT DI SINI */
    font-size: 23px !important;   /* Default 20px. Coba 22px, 24px, atau 26px */
    
    /* 2. JARAK KE BAWAH (Ke Tanggal) */
    margin-bottom: 6px !important; 
    
    /* 3. KETEBALAN HURUF */
    font-weight: 600 !important;
    
    /* Pastikan font custom 'transaksi.ttf' tetap aktif */
    font-family: 'FontTransaksi', sans-serif !important;
}
/* ======================================================
   PERBESAR NAMA PENGIRIM & PENERIMA (BUKTI TRANSFER)
   Letakkan di paling bawah style.css
   ====================================================== */

#receipt-source-name, 
#receipt-dest-name {
    /* 1. ATUR UKURAN FONT DI SINI */
    /* Standar biasanya 15px/16px. Coba naikkan ke 18px atau 20px */
    font-size: 18px !important; 
    
    /* 2. KETEBALAN HURUF */
    /* 600 = Agak Tebal, 700 = Tebal (Bold) */
    font-weight: 590 !important; 
    
    /* 3. JARAK KE BAWAH (Ke Nama Bank/Rekening) */
    margin-bottom: 6px !important;
    
    /* Pastikan font custom yang Anda minta sebelumnya tetap aktif */
    font-family: 'FontNamaBukti', sans-serif !important;
}
/* ======================================================
   LOGO VERIFIED MENEMPEL OTOMATIS (STICKY)
   Letakkan di paling bawah style.css
   ====================================================== */

/* 1. Atur Wadah Pembungkus (Nama + Logo) */
/* Selector ini menargetkan div yang membungkus nama dan gambar centang */
.receipt-party .info > div {
    display: flex !important;
    align-items: center !important; /* Rata tengah secara vertikal */
    justify-content: flex-start !important; /* Rata kiri (agar nempel) */
    
    /* Jarak antara Teks Nama dan Logo Centang */
    gap: 6px !important; 
    
    /* Pastikan lebar wadah mengikuti isinya, bukan lebar layar */
    width: fit-content !important; 
    max-width: 100% !important;
}

/* 2. Reset Margin pada Nama Pengirim */
#receipt-source-name {
    margin: 0 !important; /* Hapus jarak liar */
    padding: 0 !important;
    
    /* Agar teks tidak memaksa logo terdorong jauh */
    flex: 0 1 auto !important; 
    width: auto !important;
    
    /* Opsional: Jika nama kepanjangan, potong dengan ... */
    /* white-space: nowrap !important; */
    /* overflow: hidden !important; */
    /* text-overflow: ellipsis !important; */
}

/* 3. Kunci Ukuran Logo Verified */
.receipt-party .info > div > img {
    /* Pastikan ukuran tetap */
    width: 16px !important;
    height: 16px !important;
    
    /* Mencegah logo gepeng jika nama sangat panjang */
    flex-shrink: 0 !important; 
    
    /* Hapus margin karena jarak sudah diatur oleh 'gap' di atas */
    margin: 0 !important; 
}
/* ======================================================
   FIX JARAK & POSISI NAMA PENGIRIM DAN PENERIMA (KOMPAK)
   Letakkan di paling bawah style.css
   ====================================================== */

/* 1. ATUR NAMA PENGIRIM (Yang ada logo centangnya) */
/* Kita harus menggeser "Bungkusnya", bukan teksnya saja */
.receipt-party .info > div {
    /* Atur Jarak ke Bawah (Ke Nama Bank) */
    margin-bottom: 1px !important; 
    
    /* Atur Posisi Naik/Turun (Opsional) */
    /* margin-top: 0px !important; */
}

/* 2. ATUR NAMA PENERIMA (Yang tidak ada logonya) */
#receipt-dest-name {
    /* Pastikan elemen dianggap sebagai blok agar mau geser */
    display: block !important;
    
    /* Atur Jarak ke Bawah (Samakan angkanya dengan Pengirim di atas) */
    margin-bottom: 1px !important; 
    
    /* Atur Posisi Naik/Turun (Opsional) */
    /* margin-top: 0px !important; */
    
    /* Perbaikan Baris (Agar tidak bertumpuk jika nama panjang) */
    line-height: 1.4 !important;
}
/* ======================================================
   TRANSPARANSI JUDUL "SUMBER DANA" & "TUJUAN"
   Letakkan di paling bawah style.css
   ====================================================== */

.receipt-party h4 {
    /* ATUR TINGKAT TRANSPARANSI DI SINI */
    /* 1.0 = Sangat Jelas (Solid/Tidak Transparan) */
    /* 0.8 = Sedikit Pudar (Standar) */
    /* 0.5 = Setengah Transparan */
    /* 0.2 = Sangat Pudar (Hampir Hilang) */
    
    opacity: 0.8 !important; /* <--- Ubah angka ini sesuai keinginan */
    
    /* Pastikan font custom yang diminta sebelumnya tetap aman */
    font-family: 'FontSumberTujuan', sans-serif !important;
}
/* ======================================================
   UBAH UKURAN LOGO CENTANG (VERIFIED)
   Letakkan di paling bawah style.css
   ====================================================== */

.receipt-party .info > div > img {
    /* UBAH ANGKA DI BAWAH INI */
    width: 26px !important;   /* Lebar */
    height: 17px !important;  /* Tinggi (Samakan agar bulat sempurna) */
    
    /* Opsional: Geser sedikit posisinya jika kurang pas */
    /* margin-top: 1px !important; */
}
/* ======================================================
   NOTIFIKASI SUPER SMOOTH (GPU ACCELERATED 60-90 FPS)
   Ganti bagian .android-toast lama dengan ini
   ====================================================== */

.android-toast {
    position: fixed !important;
    /* Kita kunci posisinya di layar (bukan disembunyikan pakai top) */
    top: 20px !important; 
    left: 15px !important;
    right: 15px !important;
    
    z-index: 2147483647 !important;
    
    background-color: #ffffff !important;
    border-radius: 22px !important; /* Lebih bulat biar modern */
    padding: 16px 20px !important;
    
    /* Bayangan lebih lembut */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    
    /* --- RAHASIA PERFORMA TINGGI (GPU) --- */
    /* 1. Sembunyikan dengan digeser ke atas pakai Transform (bukan top) */
    transform: translateY(-200%) !important; 
    
    /* 2. Gunakan akselerasi hardware */
    will-change: transform !important;
    
    /* 3. Kurva animasi "Spring" (Membal sedikit di akhir biar natural) */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    
    /* 4. Optimasi rendering teks saat animasi */
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
}

/* Kelas saat muncul */
.android-toast.show {
    /* Kembalikan ke posisi semula (0) */
    transform: translateY(0) !important; 
}

/* Styling isi (Tidak berubah, hanya dipercantik dikit) */
.toast-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 2px !important;
}

.toast-app { 
    display: flex !important; 
    align-items: center !important; 
    gap: 8px !important; 
}

.toast-icon { 
    width: 20px !important; 
    height: 20px !important; 
    border-radius: 5px !important;
    object-fit: cover !important;
}

.toast-name { font-size: 13px; color: #555; font-weight: 600; font-family: sans-serif; }
.toast-time { font-size: 12px; color: #888; font-family: sans-serif; }

.toast-body h4 { 
    margin: 4px 0 2px 0 !important; 
    font-size: 16px !important; 
    color: #000 !important; 
    font-weight: 700 !important;
    font-family: sans-serif !important;
}

.toast-body p { 
    margin: 0 !important; 
    font-size: 14px !important; 
    color: #333 !important;
    font-family: sans-serif !important;
}

/* ======================================================
   CUSTOM FONT NOTIFIKASI (JUDUL & ISI)
   Letakkan di paling bawah style.css
   ====================================================== */

/* 1. Daftarkan Font untuk Judul (Transaksi Berhasil/Gagal) */
@font-face {
    font-family: 'FontNotifJudul';
    src: url('notif.ttf') format('truetype');
}

/* 2. Daftarkan Font untuk Keterangan Bawah */
@font-face {
    font-family: 'FontNotifIsi';
    src: url('notifbawah.ttf') format('truetype');
}

/* 3. Terapkan ke Judul Notifikasi */
#toast-title {
    font-family: 'FontNotifJudul', sans-serif !important;
    
    /* Opsional: Sesuaikan ukuran jika font baru terlihat kecil/besar */
    /* font-size: 16px !important; */
}

/* 4. Terapkan ke Pesan/Keterangan Bawah */
#toast-message {
    font-family: 'FontNotifIsi', sans-serif !important;
    
    /* Opsional: Sesuaikan ukuran */
    /* font-size: 14px !important; */
}
/* ======================================================
   CUSTOM FONT & GAYA PRODUK PILIHAN (UPDATE)
   Letakkan di paling bawah style.css
   ====================================================== */

/* 1. DAFTARKAN FONT BARU */
@font-face {
    font-family: 'FontProdukPilihan';
    src: url('produkpilihan.ttf') format('truetype');
}
@font-face {
    font-family: 'FontRekeningNasabah';
    src: url('rekeningnsabah.ttf') format('truetype');
}
@font-face {
    font-family: 'FontNasabahBawah';
    src: url('nasabahbawah.ttf') format('truetype');
}
@font-face {
    font-family: 'FontBukaSekarang';
    src: url('bukasekarang.ttf') format('truetype');
}

/* 2. JUDUL SEKSI "Produk Pilihan Untukmo" */
.products-section h3 {
    font-family: 'FontProdukPilihan', sans-serif !important;
    font-size: 17px !important;
    color: #111 !important;
}

/* Kelas khusus untuk mewarnai "mo" jadi oranye */
.highlight-mo {
    color: #FF8800 !important; /* Warna Oranye BRI */
    font-family: 'FontProdukPilihan', sans-serif !important;
}

/* 3. JUDUL PRODUK (Rekening Dana Nasabah, dll) */
.product-card p {
    font-family: 'FontRekeningNasabah', sans-serif !important;
    font-size: 15px !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
}

/* 4. DESKRIPSI PRODUK (Keterangan di bawah judul) */
.product-card span {
    font-family: 'FontNasabahBawah', sans-serif !important;
    font-size: 13px !important;
    color: #666 !important;
    display: block !important;
    margin-bottom: 12px !important; /* Beri jarak untuk tombol Buka Sekarang */
}

/* 5. TOMBOL "Buka Sekarang" */
.buka-sekarang-link {
    display: block !important;
    font-family: 'FontBukaSekarang', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important; /* Bold */
    color: #007AFF !important; /* Biru BRI */
    text-decoration: none !important;
    margin-top: auto !important; /* Dorong ke paling bawah */
    padding-top: 8px !important;
    border-top: 1px solid #F0F0F0 !important; /* Garis tipis pemisah (opsional) */
}
/* ======================================================
   FIX TAMPILAN PRODUK PILIHAN (SAMA RATA & RAPI)
   Letakkan di paling bawah style.css
   ====================================================== */

/* 1. Atur Wadah Baris (Row) */
.products-row {
    display: flex !important;
    flex-wrap: nowrap !important; /* Agar berderet ke samping */
    gap: 15px !important;         /* Jarak antar kartu */
    overflow-x: auto !important;  /* Agar bisa di-scroll ke samping */
    padding: 5px 15px 20px 15px !important; /* Padding agar bayangan tidak terpotong */
    
    /* KUNCI 1: Memaksa semua anak (kartu) tingginya sama mengikuti yang tertinggi */
    align-items: stretch !important; 
}

/* 2. Atur Kartu Produk (Card) */
.product-card {
    /* Gunakan Flexbox Vertikal di dalam kartu */
    display: flex !important;
    flex-direction: column !important;
    
    /* KUNCI 2: Distribusi konten (Isi di atas, Tombol di bawah) */
    justify-content: space-between !important; 

    /* Ukuran Kartu */
    flex: 0 0 170px !important;   /* Lebar tetap 170px */
    width: 170px !important;
    min-height: 170px !important; /* Tinggi minimal agar terlihat gagah */
    
    /* Desain Kotak */
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    border: 1px solid #F0F0F0 !important;
    box-sizing: border-box !important;
}

/* 3. Atur Gambar Icon */
.product-card img {
    width: 45px !important;
    height: 45px !important;
    margin-bottom: 15px !important;
    object-fit: contain !important;
}

/* 4. Atur Judul (Rekening Dana..., Tabungan...) */
.product-card p {
    /* Beri tinggi minimal agar judul 1 baris & 2 baris tetap sejajar */
    min-height: 42px !important; 
    display: flex !important;
    align-items: center !important; /* Teks rata tengah vertikal */
    margin-bottom: 8px !important;
    font-weight: 700 !important;
}

/* 5. Atur Deskripsi (Keterangan kecil) */
.product-card span {
    /* KUNCI 3: Bagian ini akan memanjang mengisi ruang kosong */
    flex-grow: 1 !important; 
    margin-bottom: 15px !important;
}

/* 6. Atur Tombol Buka Sekarang */
.buka-sekarang-link {
    /* KUNCI 4: Dorong mentok ke paling bawah */
    margin-top: auto !important; 
    width: 100% !important;
    
    /* Desain Garis Pemisah Atas */
    border-top: 1px solid #F5F5F5 !important;
    padding-top: 12px !important;
    
    /* Perataan Teks */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}
/* ======================================================
   FIX TAMPILAN PRODUK PILIHAN (LEBIH PENDEK & PADAT)
   Letakkan di paling bawah style.css
   ====================================================== */

/* 1. KECILKAN KARTU PRODUK */
.product-card {
    /* UBAH TINGGI MINIMAL:
       Sebelumnya 240px (terlalu tinggi).
       Sekarang kita ubah jadi 150px agar pas dengan isi konten. */
    min-height: 150px !important; 
    
    /* Kurangi padding (jarak dalam) agar lebih hemat tempat */
    padding: 12px 12px 10px 12px !important;
    
    /* Pastikan lebar tetap */
    width: 160px !important;
    flex: 0 0 160px !important;
}

/* 2. RAPATKAN GAMBAR ICON */
.product-card img {
    /* Perkecil sedikit icon biar proporsional */
    width: 38px !important;
    height: 38px !important;
    
    /* Kurangi jarak ke judul */
    margin-bottom: 8px !important; 
}

/* 3. RAPATKAN JUDUL PRODUK */
.product-card p {
    /* Kurangi tinggi baris judul */
    min-height: 36px !important; 
    font-size: 14px !important;
    margin-bottom: 4px !important;
}

/* 4. RAPATKAN DESKRIPSI (Keterangan) */
.product-card span {
    font-size: 12px !important;
    line-height: 1.3 !important;
    
    /* Kurangi jarak ke tombol bawah */
    margin-bottom: 8px !important; 
    
    /* Opsional: Batasi teks deskripsi maks 3 baris agar tidak kepanjangan
       (Hapus 3 baris di bawah ini jika ingin teks tampil semua) */
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 5. PERBAIKI TOMBOL BUKA SEKARANG */
.buka-sekarang-link {
    /* Padding lebih tipis */
    padding-top: 8px !important; 
    font-size: 12px !important;
    
    /* Pastikan margin atas tetap otomatis agar nempel di bawah */
    margin-top: auto !important; 
}