/* assets/betwallet.css */

:root {
    /* Renk Paleti - Trust Wallet White Theme */
    --primary: #EB5757;       /* Trust Mavisi */
    --primary-hover: #28619e;
    --bg: #F2F4F6;            /* Açık Gri Arka Plan */
    --surface: #FFFFFF;       /* Kartlar için Beyaz */
    --text-main: #09101D;     /* Koyu Siyah Metin */
    --text-sub: #858D9D;      /* Gri Metin */
    --border: #EBF0F5;        /* İnce Kenarlıklar */
    
    --success: #27AE60;       /* Yeşil */
    --danger: #EB5757;        /* Kırmızı */
    --warning: #F2994A;       /* Turuncu */
    
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    
    --shadow-card: 0 8px 24px rgba(0,0,0,0.04);
    --shadow-float: 0 12px 32px rgba(0,0,0,0.08);
    
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
* {
  transition: all 0.25s ease-in-out;
}

body {
    font-family: var(--font-body);
    background: #E5E5E5; /* Masaüstü arka planı */
    color: var(--text-main);
    height: 100vh;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* =========================================
   APP FRAME (Mobil Simülasyonu)
   ========================================= */
.app-frame {
    width: 100%;
    max-width: 480px;
    background: var(--bg);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    box-shadow: 0 0 50px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    
}
.user-security-alert {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid transparent;
    background: transparent;
    color: #111827;
    transition: all 0.15s ease-out;
}

.user-security-alert--hidden {
    display: none;
}

.user-security-alert--success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
}

.user-security-alert--error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fecaca;
}

.user-security-alert--info {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.4);
    color: #bfdbfe;
}

.bw-active-deposit-wrap {
    margin-bottom: 10px;
    position: relative;          /* detay için referans */
    z-index: 5;
}/* ============================
   History Status Badge Colors
   ============================ */

.bw-history-item .status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

/* Bekliyor */
.status.pending {
    background: rgba(251, 191, 36, 0.15);   /* amber-400 transparan */
    color: #d97706;                         /* amber-600 */
    border: 1px solid rgba(251, 191, 36, 0.25);
}

/* Başarılı */
.status.success {
    background: rgba(34, 197, 94, 0.15);    /* green-500 transparan */
    color: #16a34a;                         /* green-600 */
    border: 1px solid rgba(34, 197, 94, 0.25);
}

/* Reddedildi / İptal */
.status.failed {
    background: rgba(239, 68, 68, 0.15);    /* red-500 transparan */
    color: #dc2626;                         /* red-600 */
    border: 1px solid rgba(239, 68, 68, 0.25);
}


.bw-active-deposit-bar {
    background: #020617;
    border: 1px solid #1f2937;
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.bw-active-deposit-bar:hover {
    background: #020b1f;
    border-color: #334155;
}

.bw-active-deposit-toggle {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.bw-active-deposit-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.bw-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
}

.bw-active-label {
    font-size: 12px;
    font-weight: 500;
    color: #e5e7eb;
    white-space: nowrap;
}

.bw-active-amount {
    font-size: 12px;
    font-weight: 600;
    color: #fbbf24;
    white-space: nowrap;
}

.bw-active-deposit-right {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #9ca3af;
}

.bw-active-status {
    display: none; /* bar üzerinde göstermiyoruz, detayda var */
}

.bw-active-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #eab308;
}

.bw-active-chevron {
    font-size: 11px;
    color: #9ca3af;
    transition: transform 0.15s ease;
}

/* ================= DETAY – OVERLAY GİBİ, LAYOUT BOZMADAN ================= */

.bw-active-deposit-details {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;             /* barın hemen altı */
    margin-top: 4px;
    display: none;
    padding: 10px 14px;
    background: #020617;
    border-radius: 10px;
    border: 1px solid rgba(30,64,175,0.7);
    box-shadow: 0 10px 35px rgba(0,0,0,0.55);
}

#active-deposit-card.is-open .bw-active-deposit-details {
    display: block;
}

#active-deposit-card.is-open .bw-active-chevron {
    transform: rotate(180deg);
}

.bw-active-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 4px;
    color: #e5e7eb;
}

.bw-active-detail-row span {
    color: #9ca3af;
}

.bw-active-detail-row strong {
    font-weight: 600;
}

/* İptal butonu – beyaz yazı */
.bw-btn-cancel-deposit {
    margin-top: 8px;
    width: 100%;
    border-radius: 999px;
    border: 1px solid #ef4444;
    background: #ef4444;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 0;
    cursor: pointer;
}

.bw-btn-cancel-deposit:hover {
    background: #dc2626;
    border-color: #dc2626;
}

@media (max-width: 640px) {
    .bw-active-deposit-toggle {
        padding: 8px 12px;
    }
    .bw-active-label,
    .bw-active-amount {
        font-size: 12px;
    }

    .bw-active-deposit-details {
        left: 8px;
        right: 8px;
    }
}


a { text-decoration: none; color: inherit; }
button { border: none; cursor: pointer; font-family: inherit; outline: none; }
.text-center { text-align: center; }

/* View Yönetimi */
.bw-view { display: none; animation: fadeIn 0.3s ease; flex: 1; }
.bw-view.is-active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   COMPONENTS: BUTTONS & INPUTS
   ========================================= */
.bw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s;
    width: auto;
}
.bw-btn:active { transform: scale(0.98); }

.bw-big-btn { width: 100%; margin-bottom: 12px; font-size: 16px; }
.bw-block { width: 100%; }

.bw-btn-primary {
    border-radius: 6px;

    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: white;

}
.bw-btn-primary:hover {
    background: linear-gradient(135deg, #b91c1c, #dc2626);

}

.bw-btn-outline {
  border-radius: 6px;

    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: white;
    border: none;
}
.bw-btn-outline:hover {
    background: linear-gradient(135deg, #b91c1c, #dc2626);

}


.bw-btn-ghost {
    background: transparent;
    color: var(--text-sub);
    padding: 8px 12px;
    font-size: 13px;
}

.bw-link-btn {
    background: transparent;
    color: var(--primary);
    font-weight: 600;
    margin-left: 5px;
}
.bw-link-btn:hover { text-decoration: underline; }

.bw-icon-btn {
    background: transparent;
    color: var(--text-main);
    font-size: 24px;
    padding: 5px;
    border-radius: 50%;
    transition: 0.2s;
}
.bw-icon-btn:hover { background: rgba(0,0,0,0.05); }

/* Inputs */
.bw-form { margin-top: 20px; }
.bw-form-group { margin-bottom: 20px; }
.bw-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 8px; margin-left: 4px; }
.bw-input, select.bw-input, textarea.bw-input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 16px;
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--text-main);
    transition: 0.2s;
    font-family: var(--font-body);
}
.bw-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(51, 117, 187, 0.1); }

/* Input Amount Wrapper */
.bw-input-amount-wrapper { position: relative; }
.bw-input-amount { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: black; padding-right: 60px; }
.bw-input-suffix { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-sub); font-weight: 600; }

/* =========================================
   PAGES: LANDING / AUTH
   ========================================= */
.bw-center-page {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

.bw-logo-container { text-align: center; margin-bottom: 40px; }
.bw-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;            /* 🔥 genişlik garanti */
    max-width: 320px;      /* çok büyümesin */
    margin: 0 auto 20px;
    padding: 18px 28px;
    background: var(--primary);
    border-radius: 20px;
    font-size: 26px;
    font-weight: 700;
    font-family: var(--font-heading);
    box-shadow: 0 10px 30px rgba(51, 117, 187, 0.3);
    color: white;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.bw-logo-container h1 { font-family: var(--font-heading); font-size: 28px; color: var(--text-main); margin-bottom: 8px; }
.bw-logo-container h2 { font-family: var(--font-heading); font-size: 24px; color: var(--text-main); }
.bw-logo-container p { color: var(--text-sub); font-size: 15px; }

.bw-landing-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.bw-form-footer { text-align: center; margin-top: 24px; font-size: 14px; color: var(--text-sub); }
.bw-footer { text-align: center; padding: 20px; color: var(--text-sub); font-size: 12px; margin-top: auto; }

/* =========================================
   PAGE: WALLET (Dashboard)
   ========================================= */
.bw-avatar {
    width: 40px; height: 40px;
    background: #E0E7FF; color: var(--primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
}

/* Balance Card */
.bw-wallet-balance {
    background: var(--surface);
    padding: 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
    border: 1px solid var(--border);
    margin-top:10px;
}
.bw-wallet-balance-label { font-size: 12px; font-weight: 600; color: var(--text-sub); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }
.bw-wallet-balance-amount {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 24px;
    letter-spacing: -1px;
}
.currency-sign { color: var(--text-sub); font-size: 24px; margin-right: 4px; vertical-align: text-bottom; }

/* Action Buttons */
.bw-wallet-actions { display: flex; gap: 16px; }
.bw-wallet-actions .bw-btn { flex: 1; border-radius: 50px; font-size: 16px; padding: 14px; }

/* Tabs (New Structure) */
.bw-tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.bw-tab-header {
    display: flex;
    background: #E2E4E8;
    padding: 4px;
    border-radius: 14px;
    margin-bottom: 16px;
}
.bw-tab-link {
    flex: 1;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
    background: transparent;
    border-radius: 10px;
    transition: 0.2s;
    border: none;
}
.bw-tab-link.is-active {
    background: var(--surface);
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.bw-tab-content { display: none; animation: fadeIn 0.2s ease; padding-bottom: 40px; }
.bw-tab-content.is-active { display: block; }

/* Asset Lists */
.bw-asset-list { display: flex; flex-direction: column; gap: 12px; }

.bw-asset-item {
    background: var(--surface);
    padding: 16px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; gap: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    border: 1px solid transparent;
}
.bw-asset-item .icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #F3F4F6; color: var(--text-main);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.bw-asset-item .info { flex: 1; }
.bw-asset-item .name { font-size: 16px; font-weight: 600; color: var(--text-main); }
.bw-asset-item .code { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.bw-asset-item .balance { text-align: right; }
.bw-asset-item .crypto { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--text-main); }
.bw-asset-item .fiat { font-size: 12px; color: var(--text-sub); margin-top: 2px; }

/* History Items */
.bw-history-item {
    background: var(--surface);
    padding: 16px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.bw-history-item:last-child { border-bottom: none; }
.bw-history-item .info .type { font-size: 15px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; }
.bw-history-item .info .date { font-size: 12px; color: var(--text-sub); }
.bw-history-item .amount-status { text-align: right; }
.bw-history-item .amount { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; }
.bw-history-item .status { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; display: inline-block; }
.bw-history-item .status.pending { background: #FFF7ED; color: #C2410C; }
.bw-history-item .status.completed { background: #F0FDF4; color: #15803D; }
.bw-history-item .status.rejected { background: #FEF2F2; color: #B91C1C; }

.bw-sites-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-sub);
    background: #F8F9FA;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border);
}

/* =========================================
   ALERTS & TOASTS
   ========================================= */
.bw-alert-danger,
.bw-alert-success {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    box-shadow: var(--shadow-card);
}

.bw-alert-danger {
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FECACA;
}

.bw-alert-success {
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}

.bw-alert-close { cursor: pointer; font-size: 20px; opacity: 0.6; padding-left: 10px; }

.bw-alert-pending {
    background: #FFF7ED;
    border: 1px solid #FDE68A;
    padding: 16px;
    border-radius: var(--radius-md);
    color: #92400E;
    margin-bottom: 20px;
}

@keyframes slideDown { from { transform: translate(-50%, -20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* =========================================
   MODALS (Bottom Sheets) & DEPOSIT FLOW
   ========================================= */
.bw-modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1000;
    opacity: 0; pointer-events: none; transition: 0.3s;
    display: flex; align-items: flex-end; justify-content: center;
    backdrop-filter: blur(4px);
}
.bw-modal-backdrop.is-visible { opacity: 1; pointer-events: auto; }

.bw-modal {
    background: var(--surface);
    width: 100%; max-width: 480px;
    border-radius: 24px 24px 0 0;
    padding: 24px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
    transform: translateY(100%);
    transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
}
.bw-modal-backdrop.is-visible .bw-modal { transform: translateY(0); }

.bw-modal-title { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 24px; color: var(--text-main); }
.bw-modal-back-btn { position: absolute; top: 24px; left: 24px; font-size: 24px; cursor: pointer; color: var(--text-sub); transition: 0.2s; }
.bw-modal-back-btn:hover { color: var(--primary); }

.bw-modal-text { text-align: center; color: var(--text-sub); margin-bottom: 20px; font-size: 14px; }
.bw-modal-code { background: #F3F4F6; padding: 12px; border-radius: 12px; text-align: center; font-family: monospace; color: var(--primary); margin-bottom: 20px; word-break: break-all; font-size: 13px; }

.bw-modal-footer-actions { display: flex; gap: 12px; margin-top: 24px; }
.bw-modal-footer-actions .bw-btn { flex: 1; }

/* Deposit Steps */
.deposit-step { display: none; }
.deposit-step.is-active { display: block; animation: fadeIn 0.3s; }
.bw-text-muted { color: var(--text-sub); font-size: 14px; margin-bottom: 15px; }

/* Method Grid */
.deposit-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.deposit-method-card {
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.deposit-method-card:hover { border-color: var(--primary); background: #F0F9FF; transform: translateY(-2px); }
.deposit-method-card.is-disabled { opacity: 0.6; cursor: not-allowed; background: #F1F5F9; }
.deposit-method-card .icon { font-size: 32px; margin-bottom: 12px; }
.deposit-method-card .title { font-weight: 600; font-size: 14px; color: var(--text-main); }

/* Crypto Specifics */
#crypto-qr-placeholder {
    width: 160px; height: 160px;
    background: #fff;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-sub); font-size: 12px; font-weight: 600;
}
.crypto-address-box {
    background: #F8FAFC;
    border: 1px solid var(--border);
    padding: 12px;
    padding-right: 70px; /* Space for copy button */
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: 12px;
    word-break: break-all;
    position: relative;
    color: var(--text-main);
    margin-bottom: 12px;
}
.copy-btn {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    background: #E2E8F0; color: var(--text-main);
    border: none; padding: 6px 10px; font-size: 11px; border-radius: 6px;
    cursor: pointer; font-weight: 600;
}
.crypto-calc-result {
    background: #EEF2FF;
    color: var(--primary);
    padding: 12px;
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid rgba(51, 117, 187, 0.2);
}
.crypto-calc-result strong { font-weight: 700; }

/* =========================================
   LOADING BAR
   ========================================= */
.bw-loading {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px;
    background: transparent; z-index: 3000; display: none;
}
.bw-loading.is-visible { display: block; }
.bw-loading-inner {
    height: 100%; background: var(--primary); width: 50%;
    animation: loadingSlide 1s infinite linear;
}
@keyframes loadingSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

        /* Responsive ve Yükseklik Ayarları */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden; 
        }

        .app-frame {
            height: 100vh; 
            max-width: 450px; 
            margin: 0 auto;
            background-color: #f8fafc;
            display: flex; 
            flex-direction: column;
        }

        /* Sabit Header Stili */
        .bw-fixed-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: white; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            
            position: fixed; 
            top: 0;
            left: 50%; 
            transform: translateX(-50%); 
            width: 100%; 
            max-width: 450px; 
            
            z-index: 999;
            box-sizing: border-box; 
        }

        .bw-center-page {
            flex-grow: 1; 
            overflow-y: auto; 
            /* Header yüksekliği (yaklaşık 40px) + üst/alt boşluk */
            padding: 20px 20px 80px 20px;
            padding-top: 70px; /* Header altından başla */
            box-sizing: border-box; 
        }

/*
|=========================================
| CSS KÖK DEĞİŞKENLERİ (Örnek Tanımlar - Uygulamanızda Olmalı)
|=========================================
*/
:root {
    --primary: #ef4444; /* Kırmızı Ton */
    --danger: #dc2626;
    --surface: #ffffff;
    --border: #e5e7eb;
    --text-main: #1f2937;
    --text-sub: #6b7280;
    --radius-lg: 12px;
    --radius-sm: 6px;
    --shadow-float: 0 10px 25px -3px rgba(15, 23, 42, 0.15), 0 4px 6px -4px rgba(15, 23, 42, 0.1);
}

/*
|=========================================
| USER PANEL (HEADER SAĞ ÜST)
|=========================================
*/

.user-panel-wrapper {
    position: relative;
    z-index: 1000;
    margin-left: 8px;
}

/* Ana buton (header içindeki chip) */
.user-panel-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 4px 12px 4px 4px;

    border-radius: 9px;
    background: var(--surface);
    border: 1px solid var(--border);

    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);

    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); /* Daha hafif gölge */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); /* Daha yumuşak geçiş */
}

/* Etkileşim Durumları: Hover ve Focus'u birleştir */
.user-panel-trigger:hover,
.user-panel-trigger:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
    background: #f9fafb;
    outline: none; /* Focus'u box-shadow ile sağladığımız için kaldırdık */
}

.user-panel-trigger.is-active {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    background: #f9fafb;
}

/* Avatar */
.user-panel-avatar {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--danger), var(--primary)); /* Değişken kullanımı */
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Kullanıcı adı */
.user-panel-username {
    max-width: 95px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Aşağı ok */
.user-panel-arrow {
    font-size: 10px;
    color: var(--text-sub);
    transition: transform 0.2s ease, color 0.2s ease;
}

.user-panel-trigger.is-active .user-panel-arrow {
    transform: rotate(180deg);
    color: var(--primary);
}

/* Dropdown kartı */
.user-panel-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px); /* Açılma boşluğunu hafifçe artır */
    
    /* Geliştirme: Animasyon için opacity ve transform kullanılırken,
       transform'a 3D ivme (will-change) ekle */
    will-change: transform, opacity;

    width: 220px;
    background: var(--surface);
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-float);

    padding: 6px 0;

    opacity: 0;
    transform: translateY(-8px); /* Hafifçe daha fazla yukarıdan başlasın */
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.user-panel-dropdown.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Dropdown item base */
.user-panel-item {
    width: 100%;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--text-main);
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;

    cursor: pointer;
    text-decoration: none;
    border: none;
    outline: none;
    font-family: inherit;

    transition: background 0.15s ease, color 0.15s ease;
}

.user-panel-item:hover,
.user-panel-item:focus-visible { /* Klavye erişimi için focus eklendi */
    background: #f3f4f6; /* Hafif gri ton */
    outline: 2px solid transparent; /* Varsayılan outline'ı kaldırıp görsel etkiyi bırak */
}

/* Üst bilgi (kullanıcı adı satırı) */
.user-panel-item.info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    cursor: default;
    padding-bottom: 8px; /* Boşluk artırıldı */
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px; /* Bilgi ve menü arasına boşluk */
}

.user-panel-item.info:hover,
.user-panel-item.info:focus-visible {
    background: transparent;
}

.user-panel-info-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 14px; /* Hafifçe büyüt */
}

.user-panel-info-id {
    font-size: 11px;
    color: var(--text-sub);
}

/* Logout butonu */
.user-panel-item.logout-btn {
    margin-top: 4px;
    /* border-top kaldırıldı, yerine üst padding artırılarak görsel ayrım sağlandı */
    padding-top: 10px;
    color: var(--danger);
    font-weight: 600;
    justify-content: center;
}

.user-panel-item.logout-btn:hover,
.user-panel-item.logout-btn:focus-visible {
    background: #fef2f2; /* Kırmızı tonlu hover */
    color: var(--danger);
}


/*
|=========================================
| USER MODAL (Hesap Özeti / Güvenlik)
|=========================================
*/

/* Arka plan overlay */
#user-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(5px); /* Hafifçe daha fazla blur */

    display: none;
    align-items: center;
    justify-content: center;

    z-index: 1500;
    opacity: 0; /* Başlangıç opacity */
    transition: opacity 0.3s ease; /* Yumuşak geçiş */
}

#user-modal-overlay.is-active {
    display: flex;
    opacity: 1; /* Görünür hale geldiğinde opacity 1 */
}

/* Modal kartı */
.user-modal {
    width: 100%;
    max-width: 420px;

    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-float);

    overflow: hidden;
    
    /* Animasyon için başlangıç durumu */
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    will-change: transform, opacity;
}

#user-modal-overlay.is-active .user-modal {
    transform: scale(1);
    opacity: 1;
}

/* Header (Kullanıcının yaptığı sıkılaştırma entegre edildi) */
.user-modal .bw-modal-header {
    padding: 10px 16px; /* Sıkı header */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: #f9fafb;
}

.user-modal .bw-modal-title {
    font-size: 16px; /* Hafifçe büyüt */
    font-weight: 700;
    color: var(--text-main);
    margin: 0; /* Boşluk kaldırıldı (Kullanıcı isteği) */
    line-height: 1.3;
}

/* Kapat ikonu */
.user-modal .bw-modal-close {
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--text-sub);
    cursor: pointer;
    padding: 4px 8px; /* Daha büyük tıklama alanı */
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.user-modal .bw-modal-close:hover {
    background: #e5e7eb;
    color: var(--text-main);
    transform: scale(1.1);
}
.user-modal .bw-modal-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Gövde (Kullanıcının yaptığı sıkılaştırma entegre edildi) */
.user-modal .bw-modal-body {
    padding: 14px 18px 18px;
    max-height: 80vh; /* Yükseklik artırıldı, scrollbar daha az görünür */
    overflow-y: auto;
    font-size: 14px;
    color: var(--text-main);
}

/* Bölümler */
.user-modal-section {
    margin-bottom: 18px; /* Boşluk artırıldı */
}

.user-modal-section:last-child {
    margin-bottom: 0;
}

.user-modal-section h4 {
    font-size: 14px; /* Başlık boyutu artırıldı */
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px; /* Boşluk artırıldı */
}

/* Hesap Özeti Grid */
.user-summary-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;      /* yatayda ortala */
    text-align: center;       /* yazıları ortala */
}

.user-summary-card form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;      /* inputları da ortalar */
}

.user-summary-card .bw-input,
.user-summary-card .bw-sms-row {
    width: 100%;
    max-width: 320px; /* mobil/tablet içinde taşmasın */
}

.user-summary-card .bw-sms-row {
    justify-content: center;
}


.user-summary-card {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: #f9fafb;
    border: 1px solid var(--border);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.user-summary-card:hover {
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
}

.user-summary-card .label {
    font-size: 11px;
    color: var(--text-sub);
    margin-bottom: 2px;
    line-height: 1.2;
}

.user-summary-card .value {
    font-size: 14px;
    font-weight: 700; /* Daha kalın */
    color: var(--text-main);
}

/* Hızlı aksiyonlar */
.user-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Boşluk artırıldı */
}

.user-quick-btn {
    flex: 1;
    min-width: 140px; /* Minimum genişlik artırıldı */
    padding: 9px 12px;
    border-radius: 6px;

    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;

    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #ffffff;

    text-align: center;
    
    transition: all 0.2s ease;
}

.user-quick-btn:hover {

    transform: translateY(-2px); /* Daha belirgin hover etkisi */
    opacity: 1;
}

.user-quick-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.user-quick-btn.outline {
    

    border: 1px solid var(--primary); /* Sınır rengi netleştirildi */
    box-shadow: none;
}

.user-quick-btn.outline:hover {

    transform: translateY(-1px);
}

/* Güvenlik formu */
.user-security-form .bw-form-group {
    margin-bottom: 12px;
}

.user-security-form .bw-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 6px; /* Boşluk artırıldı */
}

.user-security-form .bw-input {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 9px 12px; /* Dikey padding artırıldı */
    font-size: 14px; /* Boyut artırıldı */
    outline: none;
    font-family: inherit;
    color: var(--text-main);
    background: var(--surface);
    transition: all 0.2s ease;
}

.user-security-form .bw-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); /* Gölge kalınlaştırıldı */
}

/* Güvenlik açıklaması */
.user-security-hint {
    font-size: 12px;
    color: var(--danger); /* Renk direk tehlike tonu */
    background: #fef2f2;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    border: 1px solid #fecaca; /* Dashed yerine düz çizgi */
    line-height: 1.5;
}

/* Modal footer butonları */
.user-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 15px; /* Boşluk artırıldı */
}

/* Sadece user modal içindeki primary/secondary butonları override et */
.user-modal .bw-btn-primary,
.user-modal .bw-btn-secondary {
    padding: 8px 16px; /* Padding artırıldı */
    border-radius: 9px;
    font-size: 14px; /* Boyut artırıldı */
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

/* Kırmızı ana buton */
.user-modal .bw-btn-primary {
    background: linear-gradient(135deg, var(--danger), var(--primary));
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.user-modal .bw-btn-primary:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
}

/* İkincil buton */
.user-modal .bw-btn-secondary {
    background: #ffffff;
    color: var(--text-main);
    border: 1px solid var(--border);
}

.user-modal .bw-btn-secondary:hover {
    background: #f3f4f6;
    border-color: var(--text-sub);
}


/*
|=========================================
| RESPONSIVE (MOBİL UYUMLULUK)
|=========================================
*/
@media (max-width: 600px) {
    /* Modal mobil cihazlarda tam ekran olsun */
    .user-modal {
        max-width: 100%;
        width: calc(100% - 32px); /* Ekranda 16px boşluk bırak */
        margin: 16px;
        border-radius: var(--radius-lg);
    }
    
    /* Mobil cihazlarda başlık ve kapatma ikonuna daha fazla boşluk */
    .user-modal .bw-modal-header {
        padding: 12px 16px;
    }

    /* Modal gövdesindeki iç padding'i mobil için ayarla */
    .user-modal .bw-modal-body {
        padding: 16px;
    }

    /* Hızlı aksiyon butonları mobil'de tam genişlik alsın */
    .user-quick-btn {
        min-width: 100%;
    }
}



        /* Deposit Modal Styles */

        .deposit-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }

        .deposit-method-card { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s; }

        .deposit-method-card:hover { border-color: var(--primary); background-color: #f0f3ff; }

        .deposit-method-card.is-disabled { opacity: 0.5; cursor: not-allowed; background-color: #f1f5f9; }

        .deposit-method-card .icon { font-size: 28px; margin-bottom: 8px; }

        .deposit-method-card .title { font-weight: 600; font-size: 14px; color: #334155; }

        .deposit-step { display: none; }

        .deposit-step.is-active { display: block; }

        .bw-modal-back-btn { position: absolute; top: 16px; left: 16px; cursor: pointer; font-size: 24px; color: #64748b; }

        #crypto-qr-placeholder { width: 150px; height: 150px; background: #e2e8f0; margin: 16px auto; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #64748b; border: 2px dashed #cbd5e1; }

        .crypto-address-box { background: #f1f5f9; padding: 12px; border-radius: 8px; font-family: monospace; word-break: break-all; position: relative; padding-right: 60px; font-size: 12px; }

        .copy-btn { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: #cbd5e1; border: none; color: #fff; padding: 4px 8px; font-size: 10px; border-radius: 4px; cursor: pointer; }

        .copy-btn:hover { background: var(--primary); }

        .crypto-calc-result { background: #e0e7ff; color: var(--primary); padding: 10px; border-radius: 8px; text-align: center; margin-top: 12px; font-size: 13px; }


        /* Yeni IBAN Kutusu Stilleri */

        .bw-iban-box {

            background: #ffffff;

            padding: 18px;

            border-radius: 12px;

            box-shadow: 0 4px 10px rgba(0,0,0,0.05);

            border: 1px solid #e2e8f0;

            margin-bottom: 20px;

        }

        .bw-iban-row {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 12px;

            position: relative;

        }

        .bw-iban-label {

            font-size: 11px;

            font-weight: 600;

            color: #64748b;

            margin-bottom: 4px;

            display: block;

        }

        .bw-iban-value {

            font-family: 'Inter', sans-serif;

            font-weight: 700;

            color: #1e293b;

            font-size: 14px;

            word-break: break-all;

            padding-right: 70px;

        }

        .bw-copy-button {

            position: absolute;

            right: 0;

            top: 50%;

            transform: translateY(-50%);

            background: #dc2626;

            color: white;

            padding: 6px 10px;

            border: none;

            border-radius: 8px;

            cursor: pointer;

            font-size: 12px;

            font-weight: 600;

            transition: background 0.2s;

        }



        /* Varlıklar Kısmı Coin Tasarımı (Geliştirilmiş) */

        .bw-asset-item .icon {

            width: 30px;

            height: 30px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            font-weight: 700;

            font-size: 14px;

            box-shadow: 0 2px 5px rgba(0,0,0,0.2);

        }

        .bw-asset-item[data-coin="USDT"] .icon {

            background: var(--usdt-color);

            content: '₮'; /* İkon yerine sembol */

        }

        .bw-asset-item[data-coin="TRX"] .icon {

            background: var(--trx-color);

            content: 'T'; /* İkon yerine sembol */

        }


        /* YENİ: Aktif Talep Kartı Stilleri (Maviye Dönüştürüldü) */

        .bw-active-deposit-card {

            background: #fff;

            padding: 20px;

            border-radius: 16px;

            box-shadow: 0 4px 20px rgba(0,0,0,0.05);

            margin-top: 20px;

            border-left: 5px solid var(--primary);

            transition: all 0.3s;

        }


        .bw-active-deposit-card.is-confirmed {

            border-left: 5px solid #10b981; 

        }


        /* Durum Metni (Pending/Beklemede) */

        .bw-active-deposit-card .status-text {

            font-weight: 700;

            color: var(--primary); 

            font-size: 16px;

        }


        .bw-active-deposit-card.is-confirmed .status-text {

            color: #10b981; 

        }


        /* YENİ: Modal Bilgi Kutusu (Kalan Süre) Stilleri - KART İÇİNDE KULLANILACAK */

        #deposit-timer-info {

            background: #e0e7ff; 

            border-radius: 8px;

            padding: 10px;

            margin-bottom: 20px;

            text-align: center;

        }


        #deposit-timer-info .bw-timer {

            font-size: 24px;

            font-weight: 700;

            color: var(--primary); 

        }


        #deposit-timer-info p {

            color: #3b82f6; 

            font-size: 13px;

            margin: 5px 0 0;

        }


        /* Kalan süre 1 dakikadan azsa Kırmızı uyarı */

        .bw-timer.is-urgent {

            color: #f43f5e; 

        }


        /* YENİ: Feedback Kutusu Stilleri */

       .bw-feedback-card {
    position: fixed;
    bottom: 20px;               /* Alta sabit */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;

    width: 90%;
    max-width: 420px;

    padding: 15px 18px;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 600;
    color: #fff;                /* Yazı beyaz */

    background: linear-gradient(135deg, #dc2626, #ef4444); /* 🔥 Red Gradient */
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);

    border-left: 0;             /* Eski border'ı kaldırıyoruz */
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.bw-sms-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sms-input {
    flex: 1;
}

/* KODU GÖNDER BUTONU */
.bw-btn-sms {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    border: none;

    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;

    transition: all .18s ease-out;
    box-shadow: 0 3px 10px rgba(239, 68, 68, .35);
}

.bw-btn-sms:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 12px rgba(239, 68, 68, .45);
}

.bw-btn-sms:active {
    transform: scale(.96);
}

/* USER PANEL içindeki feedback kartlarını inline göster (toast olmasın) */
.bwup-user-modal-overlay .bw-feedback-card {
    position: static;
    bottom: auto;
    left: auto;
    transform: none;
    z-index: auto;

    width: 100%;
    max-width: 100%;
    margin: 8px 0 0;

    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;

    box-shadow: none;
    cursor: default;
}

/* Hover'da zıplamasın */
.bwup-user-modal-overlay .bw-feedback-card:hover {
    transform: none;
    opacity: 1;
}

/* Success (Kırmızı Tema İçin Yeşil Değil — Hafif kırmızı tonu) */
.bw-feedback-card.success {
    background: linear-gradient(135deg, #16a34a, #22c55e); /* Tema uyumlu yeşil */
    color: #fff;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35);
}

/* Danger (Ana kırmızı hata) */
.bw-feedback-card.danger {
    background: linear-gradient(135deg, #dc2626, #ef4444); /* Esas kırmızı */
    color: #fff;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}
.bw-active-deposit-iban-label {
    padding: 10px 14px;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}

.bw-active-detail-row.bw-iban-row {
    align-items: flex-start;
}

.bw-iban-copy-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#active-iban-text {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.06em;
}

.bw-iban-copy-btn {
    border: none;
    outline: none;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}


        /* SİTELERİM Sekmesi Stilleri (Çizgi Çizgi Çerçeve) */
/* SİTELERİM Sekmesi — İnce ve Uzun Dikdörtgen */
.bw-site-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    padding: 10px 14px;   /* DAHA KÜÇÜK PADDING */
    margin-bottom: 8px;

    border: 2px dashed #e2e8f0;
    border-radius: 8px;

    background: #ffffff;
    transition: border-color 0.2s, background 0.2s;
}

.bw-site-list-item:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

/* SOL KISIM */
.bw-site-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px; /* Daha sıkı */
}

/* Logo daha ince */
.bw-site-logo {
    width: 38px;
    height: 38px;
    border-radius: 6px;

    background: #e2e8f0;
    padding: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    font-size: 14px;
    color: #475569;
}

/* Username daha minimal */
.bw-site-username {
    font-size: 11px;
    color: var(--text-muted);
}

/* SAĞ KISIM */
.bw-site-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px; /* daraltıldı */
    text-align: right;
}

/* Bakiye daha kompakt */
.bw-site-actions .bw-site-balance {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}


        /* YENİ SİTE BAĞLA KUTUSU STİLİ */

        .bw-connect-box {

            text-align: center;

            padding: 40px 20px;

            border: 2px dashed #cbd5e1;

            border-radius: 12px;

            margin: 30px 0;

            cursor: pointer;

            transition: all 0.2s;

            background: #f8fafc;

        }

        .bw-connect-box:hover {

            border-color:red;

            background: #f0f3ff;

        }

        .bw-connect-box .icon {

            font-size: 30px;

            color: red;

            margin-bottom: 10px;

        }

        /* Hızlı Yükle Modal Stil */

        .transfer-coin-options {

            display: flex;

            justify-content: space-around;

            margin-bottom: 20px;

        }

        .transfer-coin-options button {

            padding: 10px 20px;

            border-radius: 8px;

            border: 1px solid #cbd5e1;

            background: #f8fafc;

            font-weight: 600;

            color: #475569;

            cursor: pointer;

        }

        .transfer-coin-options button.selected {

            border-color: var(--primary);

            background: #e0e7ff;

            color: var(--primary);

        }

        /* Yeni Site Bağlama Listesi Stilleri */

        #site-list-container {

            max-height: 250px;

            overflow-y: auto;

            padding: 10px 0;

        }

        .site-select-item {

            display: flex;

            align-items: center;

            padding: 10px;

            border-radius: 8px;

            cursor: pointer;

            transition: background 0.2s;

            margin-bottom: 5px;

            border: 1px solid transparent;

        }

        .site-select-item:hover {

            background: #f1f5f9;

        }

        .site-select-item.selected {

            background: #e0e7ff;

            border: 1px solid var(--primary);

        }

        .site-initial-logo {

            width: 32px;

            height: 32px;

            background: linear-gradient(135deg, #dc2626, #ef4444);

            color: white;

            font-weight: 700;

            font-size: 14px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

            margin-right: 15px;

        }

        /* Site Arama Kutusu Stili */

        #site-search-input {

            width: 100%;

            padding: 10px;

            border: 1px solid #cbd5e1;

            border-radius: 8px;

            margin-bottom: 15px;

        }
/* USDT */
.bw-asset-item[data-coin="USDT"] .icon {
    background: #26a17b;
    color: #ffffff;
}

/* TRX */
.bw-asset-item[data-coin="TRX"] .icon {
    background: #ff0033;
    color: #ffffff;
}

/* BTC */
.bw-asset-item[data-coin="BTC"] .icon {
    background: #f7931a;
    color: #ffffff;
}

/* ETH */
.bw-asset-item[data-coin="ETH"] .icon {
    background: #627eea;
    color: #ffffff;
}

/* XRP */
.bw-asset-item[data-coin="XRP"] .icon {
    background: #000000;
    color: #ffffff;
}

/* DOGE */
.bw-asset-item[data-coin="DOGE"] .icon {
    background: #c2a633;
    color: #ffffff;
}

/* LTC */
.bw-asset-item[data-coin="LTC"] .icon {
    background: #b8b8b8;
    color: #ffffff;
}

        
        /* Geçmiş Sekmesi Türkçeleştirme Stilleri */

        .bw-history-item .status.confirmed { background: #dcfce7; color: #166534; }

        .bw-history-item .status.rejected { background: #fee2e2; color: #991b1b; }

        .bw-history-item .status.pending { background: #fef9c3; color: #854d0e; }

        .bw-history-item .status.expired { background: #f1f5f9; color: #64748b; }


        /* YENİ: Başarılı Sonuç Kutusu (Glassmorphism / Neon) */

        #transfer-success-box {

            text-align: center;

            padding: 25px;

            border-radius: 16px;

            background: rgba(255, 255, 255, 0.1); 

            backdrop-filter: blur(8px);

            border: 1px solid rgba(255, 255, 255, 0.2); 

            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); 

            
            color: var(--text-main);

            transition: all 0.5s ease-out;

        }


        #transfer-success-box > div {

            color: var(--text-main);

        }


        /* YÜKLEME BAŞARILI yazısı */

        #transfer-success-box .success-title {

            font-size: 18px; 

            font-weight: 700; 

            color: var(--success-color); 

            margin-bottom: 5px;

            text-shadow: 0 0 5px rgba(16, 185, 129, 0.5); 

        }


        /* VİDE: Başarı İkonu */

        #transfer-success-box .success-icon {

            font-size: 48px;

            color: var(--success-color);

            margin-bottom: 10px;

        }
.bw-wallet-target {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    pointer-events: none;
    user-select: none;
}

.bw-wallet-target .icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: #26a17b; /* USDT rengi */
}

.bw-wallet-target .texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bw-wallet-target .texts .name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.bw-wallet-target .texts .code {
    font-size: 11px;
    color: #6B7280;
}

.bw-help-text {
    margin-top: 4px;
    font-size: 11px;
    color: #6B7280;
}
.bw-wallet-target-select {
    position: relative;
    width: 100%;
}

.bw-wallet-target-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    cursor: pointer;
}

.bw-wallet-target-selected .left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bw-wallet-target-selected .icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: #26a17b; /* USDT yeşili */
}

.bw-wallet-target-selected .texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bw-wallet-target-selected .texts .name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.bw-wallet-target-selected .texts .code {
    font-size: 11px;
    color: #6B7280;
}

.bw-wallet-target-selected .right {
    display: flex;
    align-items: center;
    gap: 8px;
    
}

.bw-wallet-target-selected .current-label {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
}

.bw-wallet-target-selected .arrow {
    font-size: 10px;
    color: #6B7280;
}

/* Açılan liste */
.bw-wallet-target-options {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 30px rgba(15,23,42,0.15);
    max-height: 260px;
    overflow-y: auto;
    z-index: 50;
    display: none;
}

.bw-wallet-target-select.is-open .bw-wallet-target-options {
    display: block;
}

.bw-wallet-target-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    cursor: default;
}

.bw-wallet-target-option + .bw-wallet-target-option {
    border-top: 1px solid #F1F5F9;
}

.bw-wallet-target-option .left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bw-wallet-target-option .icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: #94a3b8; /* genel gri */
}

/* Farklı coin renkleri */
.bw-wallet-target-option .icon:nth-child(1) { /* fallback */ }
.bw-wallet-target-option .icon::before {}

/* USDT için yeşil */
.bw-wallet-target-option .icon {
    /* default zaten yukarıda, USDT'yi inline bıraktık, istersen data-coin ile ayırırız */
}

.bw-wallet-target-option.is-passive {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.badge-passive {
    background: #fee2e2;
    color: #b91c1c;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}

.badge-active {
    background: #dcfce7;
    color: #166534;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}
/* MODAL ORTALAMA */
.center-modal {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 90%;
    max-width: 420px !important;

    background: white;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.25);

    padding: 25px;
    animation: fadeInScale 0.25s ease;
}

/* Alttan sheet'e özel stil varsa kapat */
.center-modal.bottom-sheet {
    bottom: auto !important;
    border-radius: 20px !important;
}

/* Arkaplan overlay karartma */
.bw-modal-backdrop.is-visible {
    background: rgba(0,0,0,0.55) !important;
}

/* Animasyon */
@keyframes fadeInScale {
    from { opacity: 0; transform: translate(-50%, -40%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.wallet-target-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
/* USDT ikon */
.wallet-target-item.active .usdt-icon {
    background: #26A17B !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(38, 161, 123, 0.35) !important;
}

.wallet-target-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.wallet-target-item .left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wallet-target-item .icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #e8f3ff;
    color: #1d4ed8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 18px;
}

.wallet-target-item .name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.wallet-target-item .code {
    font-size: 12px;
    color: #64748b;
}

.wallet-target-item.active {
    border-color: #3b82f6;
    background: #eff6ff;
}

.badge-active {
    background: #3b82f6;
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.wallet-target-item.disabled {
    opacity: 0.55;
    border-style: dashed;
    pointer-events: none;
}

.badge-soon {
    background: #e11d48;
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

/* =========================================================
   DARK MODE – TEK MERKEZİ BLOK
   (Tüm eski body[data-theme="dark"] ve toggle bloklarını sil,
    bunun tamamını CSS dosyanın EN ALTINA EKLE)
   ========================================================= */

/* 0) TEMEL PALET & KATMANLAR */
body[data-theme="dark"] {
    background: #020617;      /* dış alan (body) */
    color: #f9fafb;

    /* katman değişkenleri */
    --bg-outer: #020617;      /* body arka planı */
    --bg:       #0f172a;      /* app-frame */
    --surface:  #1f2937;      /* kartlar / modallar */
    --surface-soft: #111827;  /* bazı kutular için daha koyu */
    --text-main: #f9fafb;
    --text-sub:  #e5e7eb;
    --border:    #111827;

    --shadow-card: 0 12px 32px rgba(0,0,0,0.7);
    --shadow-float: 0 20px 50px rgba(0,0,0,0.85);
}

/* 1) LAYOUT / HEADER / UYGULAMA ÇERÇEVESİ */

body[data-theme="dark"] .app-frame {
    background: var(--bg); /* orta panel */
    box-shadow: 0 18px 45px rgba(0,0,0,0.85);
    color: var(--text-main);
}

body[data-theme="dark"] .bw-fixed-header {
    background: var(--bg);
    box-shadow: 0 2px 0 rgba(15,23,42,0.85);
    border-bottom: 1px solid #020617;
}

/* header içindeki user panel chip’i */
body[data-theme="dark"] .user-panel-trigger {
    background: #020617;
    border-color: #111827;
    color: var(--text-main);
}

body[data-theme="dark"] .user-panel-trigger:hover,
body[data-theme="dark"] .user-panel-trigger.is-active {
    background: #020617;
    border-color: #ea580c;
    box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}

/* dropdown */
body[data-theme="dark"] .user-panel-dropdown {
    background: var(--surface);
    border-color: #111827;
}

body[data-theme="dark"] .user-panel-item {
    color: var(--text-main);
}

body[data-theme="dark"] .user-panel-item:hover {
    background: #111827;
}

/* 2) GENEL TYPOGRAPHY / TEXTLER */

body[data-theme="dark"] .bw-view,
body[data-theme="dark"] .bw-center-page,
body[data-theme="dark"] .bw-text-muted,
body[data-theme="dark"] .bw-site-username,
body[data-theme="dark"] .bw-help-text,
body[data-theme="dark"] .bw-iban-label,
body[data-theme="dark"] .bw-iban-value,
body[data-theme="dark"] .bw-wallet-balance-label,
body[data-theme="dark"] .bw-site-balance,
body[data-theme="dark"] .bw-active-label,
body[data-theme="dark"] .bw-active-detail-row span,
body[data-theme="dark"] .bw-history-item .date,
body[data-theme="dark"] .bw-modal-title,
body[data-theme="dark"] label,
body[data-theme="dark"] p,
body[data-theme="dark"] span,
body[data-theme="dark"] div {
    color: var(--text-main);
}

body[data-theme="dark"] .bw-text-muted,
body[data-theme="dark"] .bw-help-text {
    color: var(--text-sub);
}

/* 3) ANA KARTLAR / TABLAR / VARLIKLAR / GEÇMİŞ */

body[data-theme="dark"] .bw-wallet-balance,
body[data-theme="dark"] .bw-asset-item,
body[data-theme="dark"] .bw-history-item,
body[data-theme="dark"] .bw-site-list-item,
body[data-theme="dark"] .bw-sites-empty {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-card);
}

body[data-theme="dark"] .bw-wallet-balance-amount,
body[data-theme="dark"] .bw-asset-item .name,
body[data-theme="dark"] .bw-history-item .info .type {
    color: #ffffff;
}

body[data-theme="dark"] .bw-asset-item .fiat,
body[data-theme="dark"] .bw-asset-item .code {
    color: var(--text-sub);
}

/* Coin ikon balonları aynı kalsın, arka plan koyu olduğu için daha da öne çıkıyor */

/* Tabs */
body[data-theme="dark"] .bw-tab-header {
    background: #020617;
}

body[data-theme="dark"] .bw-tab-link {
    color: var(--text-sub);
}

body[data-theme="dark"] .bw-tab-link.is-active {
    background: var(--surface);
    color: var(--text-main);
    box-shadow: 0 0 0 1px #111827;
}

/* 4) MODALLAR – YATIR / ÇEK / IBAN / TRANSFER */

body[data-theme="dark"] .bw-modal-backdrop {
    background: rgba(15,23,42,0.85);
}

/* alt sheet modallar */
body[data-theme="dark"] .bw-modal {
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--text-main);
}

/* ortalanan modallar (center-modal) */
body[data-theme="dark"] .center-modal {
    background: var(--surface);
    box-shadow: var(--shadow-float);
    border: 1px solid var(--border);
}

/* Modal başlık / back buton */
body[data-theme="dark"] .bw-modal-title {
    color: #ffffff;
}
body[data-theme="dark"] .bw-modal-back-btn {
    color: var(--text-sub);
}

/* ALERT kutuları modal içindekiler */
body[data-theme="dark"] .bw-alert-success {
    background: rgba(22, 163, 74, 0.12);
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.4);
}
body[data-theme="dark"] .bw-alert-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.4);
}

/* Deposit method grid – havale / kripto / kredi kartı */
body[data-theme="dark"] .deposit-method-card {
    background: #020617;
    border-color: #111827;
    color: var(--text-main);
}
body[data-theme="dark"] .deposit-method-card .title {
    color: #e5e7eb;
}
body[data-theme="dark"] .deposit-method-card:hover {
    background: #020617;
    border-color: #38bdf8;
}

/* Kredi kartı disabled görünümü */
body[data-theme="dark"] .deposit-method-card.is-disabled {
    background: #020617;
    border-style: dashed;
    opacity: 0.45;
}

/* Inputlar */
body[data-theme="dark"] .bw-input,
body[data-theme="dark"] #site-search-input {
    background: #020617;
    border-color: #111827;
    color: var(--text-main);
}
body[data-theme="dark"] .bw-input::placeholder,
body[data-theme="dark"] #site-search-input::placeholder {
    color: #9ca3af;
}

/* =========================================
   IBAN KUTULARI – DARK MODE HARD OVERRIDE
   ========================================= */

/* Kutu arka plan + border */
body.dark-mode .bw-iban-box,
body[data-theme="dark"] .bw-iban-box,
body.dark-mode .bw-iban-box.bw-iban-box--compact,
body[data-theme="dark"] .bw-iban-box.bw-iban-box--compact {
    background: #0f172a !important;
    border: 1px solid #1f2937 !important;
    border-radius: 10px !important;
}

/* Satır rengi */
body.dark-mode .bw-iban-row--single,
body[data-theme="dark"] .bw-iban-row--single {
    background: transparent !important;
    color: #e5e7eb !important;
}

/* Label */
body.dark-mode .bw-iban-label-small,
body[data-theme="dark"] .bw-iban-label-small {
    color: #cbd5e1 !important;
}

/* IBAN metni */
body.dark-mode .bw-iban-code,
body[data-theme="dark"] .bw-iban-code,
body.dark-mode .bw-iban-code--inline,
body[data-theme="dark"] .bw-iban-code--inline {
    background: transparent !important;
    color: #f9fafb !important;
}

/* Copy butonu – normal */
body.dark-mode .bw-copy-button,
body[data-theme="dark"] .bw-copy-button {
    background: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
}

/* Copy butonu – hover */
body.dark-mode .bw-copy-button:hover,
body[data-theme="dark"] .bw-copy-button:hover {
    background: #b91c1c !important;
    color: #ffffff !important;
    border-color: #b91c1c !important;
}

/* Buton text shadow ufak glow */
body.dark-mode .bw-copy-button,
body[data-theme="dark"] .bw-copy-button {
    text-shadow: 0 0 4px rgba(0,0,0,0.7);
}


/* Kripto adres / QR */
body[data-theme="dark"] #crypto-qr-placeholder {
    background: #020617;
    border-color: #111827;
    color: var(--text-sub);
}
body[data-theme="dark"] .crypto-address-box {
    background: #020617;
    border-color: #111827;
    color: #f9fafb;
}
body[data-theme="dark"] .copy-btn {
    background: #0f172a;
    color: #e5e7eb;
}
body[data-theme="dark"] .copy-btn:hover {
    background: #dc2626;
}
body[data-theme="dark"] .crypto-calc-result {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.35);
    color: #bfdbfe;
}

/* IBAN detay kartı (aktif talep) */
body[data-theme="dark"] .bw-active-deposit-bar,
body[data-theme="dark"] .bw-active-deposit-details {
    background: #020617;
    border-color: #1f2937;
}
body[data-theme="dark"] .bw-active-detail-row span {
    color: #cbd5f5;
}

/* Banka hesap listesi */
body[data-theme="dark"] .bank-account-item,
body[data-theme="dark"] .site-select-item {
    background: var(--surface);
    border-color: #111827;
}

/* 5) YANSAYACAĞI CÜZDAN / WALLET TARGET */

body[data-theme="dark"] .bw-wallet-target,
body[data-theme="dark"] .bw-wallet-target-selected {
    background: #020617;
    border-color: #111827;
}

body[data-theme="dark"] .bw-wallet-target .texts .name,
body[data-theme="dark"] .bw-wallet-target-selected .texts .name {
    color: #f9fafb;
}
body[data-theme="dark"] .bw-wallet-target .texts .code,
body[data-theme="dark"] .bw-wallet-target-selected .texts .code {
    color: #e5e7eb;
}

body[data-theme="dark"] .bw-wallet-target-options {
    background: #020617;
    border-color: #111827;
    box-shadow: 0 18px 45px rgba(0,0,0,0.8);
}

body[data-theme="dark"] .bw-wallet-target-option {
    color: var(--text-main);
}
body[data-theme="dark"] .bw-wallet-target-option + .bw-wallet-target-option {
    border-top-color: #111827;
}

body[data-theme="dark"] .badge-active {
    background: #22c55e;
    color: #022c22;
}
body[data-theme="dark"] .badge-passive {
    background: #4b5563;
    color: #e5e7eb;
}

/* Eski wallet-target-item kartları (havale ekranı) */
body[data-theme="dark"] .wallet-target-item {
    background: #020617;
    border-color: #111827;
}
body[data-theme="dark"] .wallet-target-item .name {
    color: #f9fafb;
}
body[data-theme="dark"] .wallet-target-item .code {
    color: #e5e7eb;
}

/* 6) SİTELERİM / YENİ SİTE BAĞLA */

body[data-theme="dark"] .bw-site-list-item {
    background: var(--surface);
    border-color: #111827;
}

body[data-theme="dark"] .bw-site-logo {
    background: #020617;
    color: #e5e7eb;
}

body[data-theme="dark"] .bw-connect-box {
    background: #020617;
    border-color: #1f2937;
}
body[data-theme="dark"] .bw-connect-box .icon {
    color: #fb7185;
}

/* Hızlı yükle modal coin sekmeleri */
body[data-theme="dark"] .transfer-coin-options button {
    background: #020617;
    border-color: #111827;
    color: var(--text-main);
}
body[data-theme="dark"] .transfer-coin-options button.selected {
    background: rgba(59,130,246,0.12);
    border-color: #38bdf8;
    color: #bfdbfe;
}

/* Site seçme listesi */
body[data-theme="dark"] .site-select-item:hover {
    background: #111827;
}
body[data-theme="dark"] .site-select-item.selected {
    background: rgba(59,130,246,0.18);
    border-color: #38bdf8;
}

body[data-theme="dark"] .site-initial-logo {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

/* 7) USER MODAL – HESAP ÖZETİ / GÜVENLİK */

body[data-theme="dark"] #user-modal-overlay {
    background: rgba(15,23,42,0.75);
}

body[data-theme="dark"] .user-modal {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-float);
}

/* header */
body[data-theme="dark"] .user-modal .bw-modal-header {
    background: #020617;
    border-bottom-color: #111827;
}
body[data-theme="dark"] .user-modal .bw-modal-title {
    color: #f9fafb;
}
body[data-theme="dark"] .user-modal .bw-modal-close {
    color: #e5e7eb;
}
body[data-theme="dark"] .user-modal .bw-modal-close:hover {
    background: #111827;
}

/* body */
body[data-theme="dark"] .user-modal .bw-modal-body {
    color: var(--text-main);
}

/* hesap özeti kartları */
body[data-theme="dark"] .user-summary-card {
    background: #020617;
    border-color: #111827;
}
body[data-theme="dark"] .user-summary-card .label {
    color: var(--text-sub);
}
body[data-theme="dark"] .user-summary-card .value {
    color: var(--text-main);
}

/* güvenlik uyarı kutusu */
body[data-theme="dark"] .user-security-hint {
    background: rgba(248,113,113,0.08);
    border-color: rgba(248,113,113,0.6);
    color: #fecaca;
}

/* modal butonlar */
body[data-theme="dark"] .user-modal .bw-btn-secondary {
    background: #020617;
    border-color: #111827;
    color: #e5e7eb;
}
body[data-theme="dark"] .user-modal .bw-btn-secondary:hover {
    background: #111827;
}

/* 8) BUTONLAR / FEEDBACK / STATUS BADGELER */





/* toast feedback */
body[data-theme="dark"] .bw-feedback-card {
    box-shadow: 0 8px 26px rgba(0,0,0,0.85);
}

/* history status badge’ler zaten renkli, sadece border’ları biraz belirginleştirelim */
body[data-theme="dark"] .bw-history-item .status.pending {
    border: 1px solid rgba(250,204,21,0.4);
}
body[data-theme="dark"] .bw-history-item .status.confirmed,
body[data-theme="dark"] .bw-history-item .status.success {
    border: 1px solid rgba(34,197,94,0.4);
}
body[data-theme="dark"] .bw-history-item .status.failed,
body[data-theme="dark"] .bw-history-item .status.rejected {
    border: 1px solid rgba(239,68,68,0.4);
}

/* 9) THEME TOGGLE – SON HALİ (DESKTOP + MOBILE) */

/* ana görünüm */
.theme-toggle {
    position: relative;
    width: 56px;
    height: 28px;
    border-radius: 9px;
    padding: 2px;
    background: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 8px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(15,23,42,0.18);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.12s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15,23,42,0.25);
}

.theme-toggle:active {
    transform: scale(0.96);
}

/* thumb */
.theme-toggle .theme-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15,23,42,0.28);
    transform: translateX(0);
    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
    border: 1px solid rgba(0,0,0,0.15);
}

/* ikonlar (SVG) */
.theme-toggle .theme-icon {
    position: absolute;
    pointer-events: none;
    opacity: 0.35;
    transition: opacity 0.22s ease, color 0.22s ease;
    color: #0f172a;
}
.theme-toggle .theme-icon.sun { left: 6px; }
.theme-toggle .theme-icon.moon { right: 6px; }

/* light mode */
body:not([data-theme="dark"]) .theme-toggle {
    background: #e5e7eb;
}
body:not([data-theme="dark"]) .theme-icon.sun {
    opacity: 1;
}
body:not([data-theme="dark"]) .theme-toggle .theme-thumb {
    transform: translateX(0);
}

/* dark mode */
body[data-theme="dark"] .theme-toggle {
    background: radial-gradient(circle at 20% 0%, #1e293b, #020617);
    box-shadow:
        0 0 0 1px rgba(15,23,42,0.9),
        0 0 12px rgba(56,189,248,0.55);
}
body[data-theme="dark"] .theme-toggle .theme-thumb {
    transform: translateX(28px);
    background: #020617;
    border-color: #38bdf8;
    box-shadow:
        0 0 0 1px rgba(15,23,42,0.8),
        0 0 14px rgba(56,189,248,0.8);
}
body[data-theme="dark"] .theme-toggle .theme-icon {
    color: #e5f3ff;
}
body[data-theme="dark"] .theme-icon.sun {
    opacity: 0.15;
}
body[data-theme="dark"] .theme-icon.moon {
    opacity: 1;
}

/* mobile responsive */
@media (max-width: 480px) {
    .bw-fixed-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .theme-toggle {
        width: 46px;
        height: 24px;
        margin-left: 6px;
        margin-right: 4px;
    }

    .theme-toggle .theme-thumb {
        width: 20px;
        height: 20px;
    }

    .theme-toggle .theme-icon {
        font-size: 11px;
    }

    .theme-toggle .theme-icon.sun { left: 5px; }
    .theme-toggle .theme-icon.moon { right: 5px; }

    body[data-theme="dark"] .theme-toggle .theme-thumb {
        transform: translateX(22px);
    }
}
/* Havale Step 2 – Ortalanmış Kart & Wallet Bilgisi */

.bw-bank-step-wrapper {
    max-width: 420px;
    margin: 0 auto 20px;
}

.bw-bank-step-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    padding: 18px 18px 20px;
}

.bw-bank-step-section + .bw-bank-step-section {
    margin-top: 14px;
}

.bw-bank-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 6px;
}

/* Wallet kartı – mevcut bw-wallet-target üzerine ufak ekler */

.bw-wallet-target--inline {
    justify-content: space-between;
}

.bw-wallet-target--inline .texts {
    flex: 1;
}

/* Küçük aktif badge */

.bw-wallet-active-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    white-space: nowrap;
}

/* Bakiye’ye yansıyacak tutar kutusu */

.bw-wallet-credit-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.bw-wallet-credit-box .left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bw-wallet-credit-box .amount {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.bw-wallet-credit-box .token {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
}

.bw-wallet-credit-box .right {
    font-size: 11px;
    color: #6b7280;
}

.bw-wallet-credit-box.is-placeholder {
    justify-content: flex-start;
    font-size: 12px;
    color: #6b7280;
}

/* IBAN kutusunu kart içi kullanım için biraz sadeleştir */

.bw-bank-step-card .bw-iban-box {
    margin-bottom: 0;
    background: #f9fafb;
    box-shadow: none;
}

.bw-iban-separator {
    border-top: 1px dashed #e2e8f0;
    margin: 8px 0;
}

/* Alt açıklama & butonlar */

.bw-bank-step-actions {
    margin-top: 16px;
}

.bw-bank-note {
    font-size: 12px;
    color: var(--text-sub);
    text-align: center;
    margin-bottom: 10px;
}

.bw-bank-note strong {
    color: var(--text-main);
}

/* İptal butonu – mevcut outline temasına uyumlu */

.bw-crypto-btn-outline {
    border-radius: var(--radius-md);

margin-top:12px;
background: linear-gradient(135deg, #dc2626, #ef4444);
    color: white;
}


.bw-crypto-btn-outline:hover {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
}

/* ===========================================
   "Siteye Bağlan" MODALI – WHITE / RED THEME
   (scope: #site-connect-modal ...)
   =========================================== */

/* Backdrop (karanlık arka plan, modal beyaz) */
#site-connect-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);

    z-index: 5000;
}

/* Modal kutusu (beyaz kart) */
#site-connect-modal .bw-modal.center-modal {
    width: 420px;
    max-height: 85vh;
    overflow-y: auto;

    background: #ffffff;
    border-radius: 14px;

    border: 1px solid #e5e7eb;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.25);

    padding: 22px 20px;
    animation: sc-modal-fade-in 0.18s ease-out;
}

/* Başlık */
#site-connect-modal .bw-modal-title {
    font-size: 19px;
    font-weight: 700;
    text-align: center;
    color: #111827;
    margin-bottom: 8px;
}

/* Açıklama metni */
#site-connect-modal .bw-text-muted {
    color: #6b7280 !important;
    font-size: 13px;
}

/* Arama inputu */
#site-connect-modal #site-search-input {
    width: 100%;
    margin-top: 4px;
    margin-bottom: 14px;

    padding: 9px 11px;
    border-radius: 9px;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #111827;
    font-size: 13px;

    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

#site-connect-modal #site-search-input::placeholder {
    color: #9ca3af;
}

#site-connect-modal #site-search-input:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45);
    background: #ffffff;
}

/* Site listesi container */
#site-connect-modal #site-list-container {
    display: flex;
    flex-direction: column;
    gap: 6px; /* sıkı aralık, daha çok satır */
}

/* Tek tek site kartları — küçük boy */
#site-connect-modal .site-select-item {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 6px 9px;                 /* küçültüldü */
    border-radius: 8px;

    background: #f9fafb;
    border: 1px solid #e5e7eb;

    cursor: pointer;
    transition:
        border-color 0.14s ease,
        box-shadow 0.14s ease,
        transform 0.12s ease,
        background 0.14s ease;
}

#site-connect-modal .site-select-item:hover {
    border-color: #ef4444;
    background: #fff1f2;
    box-shadow: 0 6px 14px rgba(248, 113, 113, 0.15);
    transform: translateY(-1px);
}

/* $(BAĞLI) label tonu */
#site-connect-modal .site-select-item span {
    color: #111827;
}

/* Baş harf yuvarlak logo — küçük boy */
#site-connect-modal .site-initial-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;

    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;

    color: #ffffff;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.6);
}

/* Site adı tipografisi — küçültülmüş */
#site-connect-modal .site-select-item div[style*="flex-grow"] > div {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

/* Seçilen site bilgisi kutusu */
#site-connect-modal #site-connect-box {
    border-top: 1px solid #e5e7eb !important;
    padding-top: 14px !important;
    margin-top: 12px !important;
}

/* Seçili site başlığı */
#site-connect-modal #connect-site-name {
    font-size: 14px !important;
    font-weight: 600;
    color: #111827;
}

/* Form alanları */
#site-connect-modal .bw-form-group {
    margin-bottom: 12px;
}

#site-connect-modal .bw-label {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

/* Inputlar */
#site-connect-modal .bw-input {
    width: 100%;
    padding: 9px 11px;
    border-radius: 8px;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #111827;
    font-size: 13px;

    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

#site-connect-modal .bw-input:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45);
    background: #ffffff;
}

/* Butonlar (sadece bu modal içinde) */
#site-connect-modal .bw-btn {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 10px;
    cursor: pointer;
    transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease, border-color 0.14s ease;
}

/* Kırmızı ana buton */
#site-connect-modal .bw-btn-primary {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    border: 1px solid #ef4444;
    color: #f9fafb;
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.35);
}

#site-connect-modal .bw-btn-primary:hover {
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.45);
    transform: translateY(-1px);
}

/* Outline buton (beyaz tema) */
#site-connect-modal .bw-btn-outline {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #111827;
}

#site-connect-modal .bw-btn-outline:hover {
    border-color: #ef4444;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

/* Full width */
#site-connect-modal .bw-block {
    width: 100%;
}

/* Küçük ekran optimizasyonu */
@media (max-width: 480px) {
    #site-connect-modal .bw-modal.center-modal {
        width: calc(100% - 32px);
        padding: 20px 16px;
    }
}

/* Basit giriş animasyonu */
@keyframes sc-modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
#site-connect-modal .sc-register-btn {
    background: #ffffff;
    border: 1px solid #ef4444;
    color: #ef4444;

    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;

    border-radius: 6px;
    cursor: pointer;

    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#site-connect-modal .sc-register-btn:hover {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(239,68,68,0.35);
}
/* Sağ butonları yanyana hizalama */
#site-connect-modal .sc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Kayıt Ol butonu (sol) */
#site-connect-modal .sc-register-link {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;

    background: #ffffff;
    border: 1px solid #ef4444;
    color: #ef4444;
    cursor: pointer;
    transition: 0.15s ease;
}
/* =========================================
   SITE CONNECT MODAL – LIGHT THEME
   ========================================= */

#site-connect-modal .sc-register-link:hover {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.35);
}

/* Bağla butonu (sağ) */
#site-connect-modal .sc-connect-btn {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;

    background: linear-gradient(135deg, #ef4444, #b91c1c);
    border: 1px solid #ef4444;
    color: #ffffff;

    cursor: pointer;
    transition: 0.15s ease;
}

#site-connect-modal .sc-connect-btn:hover {
    box-shadow: 0 6px 12px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
}

/* Kart yapısını ikiye böl - sol (logo+isim) ve sağ (butonlar) */
#site-connect-modal .site-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Orta alan (site adı) genişlesin */
#site-connect-modal .sc-site-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Sağdaki buton grubu tamamen sağa yaslansın */
#site-connect-modal .sc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Kare Geri Butonu */
#site-connect-modal .sc-back-btn {
    display: none;
    width: 32px;
    height: 32px;

    align-items: center;
    justify-content: center;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #ef4444;

    font-size: 18px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;

    margin-bottom: 15px;

    transition: background 0.15s ease,
                box-shadow 0.15s ease,
                border-color 0.15s ease,
                transform 0.1s ease;
}

#site-connect-modal .sc-back-btn:hover {
    background: #fef2f2;
    border-color: #ef4444;
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
}

/* =========================================
   SITE CONNECT MODAL – DARK THEME (data-theme)
   ========================================= */

body[data-theme="dark"] #site-connect-modal {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
}

body[data-theme="dark"] #site-connect-modal .bw-modal.center-modal {
    background: #0f1218;
    border-color: #1e293b;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.85);
}

body[data-theme="dark"] #site-connect-modal .bw-modal-title {
    color: #f3f4f6;
}

body[data-theme="dark"] #site-connect-modal .bw-text-muted {
    color: #9ca3af !important;
}

/* Search input */
body[data-theme="dark"] #site-connect-modal #site-search-input {
    background: #111827;
    border-color: #1f2937;
    color: #e5e7eb;
}

body[data-theme="dark"] #site-connect-modal #site-search-input::placeholder {
    color: #6b7280;
}

body[data-theme="dark"] #site-connect-modal #site-search-input:focus {
    background: #0f172a;
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.65);
}

/* Site cards */
body[data-theme="dark"] #site-connect-modal .site-select-item {
    background: #111827;
    border-color: #1f2937;
}

body[data-theme="dark"] #site-connect-modal .site-select-item:hover {
    background: #1e293b;
    border-color: #ef4444;
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.35);
}

/* Site name */
body[data-theme="dark"] #site-connect-modal .sc-site-name {
    color: #e5e7eb;
}

/* Linked label */
body[data-theme="dark"] #site-connect-modal .sc-linked-label {
    color: #a3e635;
}

/* Initial logo */
body[data-theme="dark"] #site-connect-modal .site-initial-logo {
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.75);
}

/* Input labels */
body[data-theme="dark"] #site-connect-modal .bw-label {
    color: #9ca3af;
}

/* Inputs */
body[data-theme="dark"] #site-connect-modal .bw-input {
    background: #111827;
    border-color: #1f2937;
    color: #e5e7eb;
}

body[data-theme="dark"] #site-connect-modal .bw-input:focus {
    background: #0f172a;
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.65);
}

/* Primary button */
body[data-theme="dark"] #site-connect-modal .bw-btn-primary {
    box-shadow: 0 7px 18px rgba(239, 68, 68, 0.55);
}

body[data-theme="dark"] #site-connect-modal .bw-btn-primary:hover {
    box-shadow: 0 10px 22px rgba(239, 68, 68, 0.70);
}

/* Outline button */
body[data-theme="dark"] #site-connect-modal .bw-btn-outline {
    background: #111827;
    border-color: #1f2937;
    color: #e5e7eb;
}

body[data-theme="dark"] #site-connect-modal .bw-btn-outline:hover {
    border-color: #ef4444;
    background: #1e293b;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
}

/* Kayıt Ol button */
body[data-theme="dark"] #site-connect-modal .sc-register-link {
    background: #111827;
    border-color: #ef4444;
    color: #fca5a5;
}

body[data-theme="dark"] #site-connect-modal .sc-register-link:hover {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.55);
}

/* Bağla button – dark (şu an ekstra override yok, istersen ekleyebilirsin) */
body[data-theme="dark"] #site-connect-modal .sc-connect-btn {}
body[data-theme="dark"] #site-connect-modal .sc-connect-btn:hover {}

/* Back button (kare) */
body[data-theme="dark"] #site-connect-modal .sc-back-btn {
    background: #111827;
    border-color: #1f2937;
    color: #f9fafb;
}

body[data-theme="dark"] #site-connect-modal .sc-back-btn:hover {
    background: #1e293b;
    border-color: #ef4444;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.45);
}

/* Sağdaki "Bağlı" kutusu */
#site-connect-modal .sc-linked-badge {
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;

    background: #dcfce7;
    color: #166534;
    border: 1px solid #22c55e;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

body[data-theme="dark"] #site-connect-modal .sc-linked-badge {
    background: #052e16;
    border-color: #16a34a;
    color: #bbf7d0;
}

body[data-theme="dark"] #site-connect-modal #connect-site-name {
    color: #ffffff !important;
}

/* =========================================
   IBAN / WALLET / FAST INFO
   ========================================= */

/* Grup – başlık + kutu */
.bw-iban-group {
    margin-bottom: 12px;
}

/* Üst başlık satırı */
.bw-iban-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}

.bw-iban-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ef4444;
}

.bw-iban-subtitle {
    font-size: 11px;
    color: #6b7280;
}

/* Tek satırlı IBAN / Hesap Adı row */
.bw-iban-row.bw-iban-row--single {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bw-iban-field {
    flex: 0 1 auto;
    max-width: calc(100% - 90px);
}

/* Küçük label */
.bw-iban-label-small {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 4px;
}

/* Kesik çerçeve IBAN */
.bw-iban-code {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 8px;
    border: 1px dashed #e5e7eb;
    background: #f9fafb;

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    word-spacing: 0.16em;
    color: #0f172a;

    white-space: nowrap;
}

/* Hesap adı kutusu aralığı */
.bw-bank-step-section .bw-holder-box {
    margin-top: 8px;
}

/* DARK MODE OVERRIDES (IBAN) */
body[data-theme="dark"] .bw-iban-title {
    color: #f97373;
}

body[data-theme="dark"] .bw-iban-subtitle {
    color: #9ca3af;
}

body[data-theme="dark"] .bw-iban-box {
    background: #020617;
    border-color: #1f2937;
}

body[data-theme="dark"] .bw-iban-code {
    border-color: #334155;
    background: #020617;
    color: #e5e7eb;
}

body[data-theme="dark"] .bw-iban-label-small {
    color: #64748b;
}

/* Yansıyacağı Cüzdan başlığı */
.bw-bank-section-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 6px;
}

/* Kart – inline hedef cüzdan */
.bw-wallet-target.bw-wallet-target--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 12px;
    border-radius: 10px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

/* Sol USDT ikon badge */
.bw-wallet-target .icon.usdt-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    font-weight: 700;
    color: #ffffff;

    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.8);
}

/* Orta metinler */
.bw-wallet-target .texts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.bw-wallet-target .texts .name {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}

.bw-wallet-target .texts .code {
    font-size: 11px;
    color: #6b7280;
}

/* Sağ taraftaki net tutar bloğu */
.bw-wallet-net {
    text-align: right;
    flex-shrink: 0;
}

.bw-wallet-net-label {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 2px;
}

.bw-wallet-net-value {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.bw-wallet-net-value .usdt-suffix {
    font-size: 11px;
    font-weight: 600;
    margin-left: 2px;
    color: #16a34a;
}

/* TL karşılığı (opsiyonel alt satır) */
.bw-wallet-net-sub {
    font-size: 11px;
    color: #64748b;
}

/* DARK MODE – WALLET TARGET */
body[data-theme="dark"] .bw-bank-section-label {
    color: #9ca3af;
}

body[data-theme="dark"] .bw-wallet-target.bw-wallet-target--inline {
    background: #020617;
    border-color: #1f2937;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75);
}

body[data-theme="dark"] .bw-wallet-target .texts .name {
    color: #e5e7eb;
}

body[data-theme="dark"] .bw-wallet-target .texts .code {
    color: #9ca3af;
}

body[data-theme="dark"] .bw-wallet-net-label {
    color: #9ca3af;
}

body[data-theme="dark"] .bw-wallet-net-value {
    color: #f9fafb;
}

body[data-theme="dark"] .bw-wallet-net-value .usdt-suffix {
    color: #4ade80;
}

body[data-theme="dark"] .bw-wallet-net-sub {
    color: #9ca3af;
}

/* FAST Öneri Info Box */
.bw-fast-info-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    padding: 8px 10px;
    border-radius: 8px;

    background: #fef9c3;
    border: 1px solid #facc15;
    box-shadow: 0 4px 10px rgba(250, 204, 21, 0.18);

    margin-bottom: 10px;
}

/* İkon */
.bw-fast-info-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 700;

    background: #facc15;
    color: #713f12;
    flex-shrink: 0;
}

/* Metin */
.bw-fast-info-text {
    font-size: 12px;
    line-height: 1.4;
    color: #713f12;
}

/* Dark mode */
body[data-theme="dark"] .bw-fast-info-box {
    background: #292524;
    border-color: #facc15;
    box-shadow: 0 4px 14px rgba(250, 204, 21, 0.25);
}

body[data-theme="dark"] .bw-fast-info-icon {
    background: #facc15;
    color: #1c1917;
}

body[data-theme="dark"] .bw-fast-info-text {
    color: #fef3c7;
}

/* Ek alert tipi */
.user-security-alert--danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fecaca;
}


/* =========================================
   2FA HEADER & SETUP
   ========================================= */

.twofa-header {
    text-align: center;
    margin: 0 auto 16px;
    max-width: 360px;
}

.twofa-icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid #fecaca;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.twofa-icon-check {
    font-size: 16px;
    color: #dc2626;
}

.twofa-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #111827;
}

.twofa-desc {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

/* DARK MODE – 2FA header */
body[data-theme="dark"] .twofa-title {
    color: #f9fafb;
}

body[data-theme="dark"] .twofa-desc {
    color: #9ca3af;
}

body[data-theme="dark"] .twofa-icon-circle {
    background: rgba(248, 113, 113, 0.18);
    border-color: #fca5a5;
}

body[data-theme="dark"] .twofa-icon-check {
    color: #fecaca;
}

/* 2FA SETUP KUTUSU */

.twofa-setup-area {
    margin-top: 12px;
    border-radius: 12px;
    padding: 14px;
    background: #f9fafb;
    border: 1px dashed #fecaca;
    text-align: center;
}

.twofa-setup-area.is-hidden {
    display: none;
}

.twofa-qr-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.twofa-qr-img {
    max-width: 180px;
    height: auto;
    border-radius: 10px;
    background: #0b0b0f;
    padding: 6px;
}

/* DARK MODE – 2FA setup */
body[data-theme="dark"] .twofa-setup-area {
    background: #020617;
    border-color: #f97373;
}

/* SECRET KEY – ORTADA */

.twofa-secret-form {
    max-width: 320px;
    margin: 12px auto 8px;
    text-align: center;
}

.twofa-secret-form .bw-form-group {
    text-align: left;
}

.twofa-secret-form .bw-input {
    text-align: center;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* DARK MODE – Secret input */
body[data-theme="dark"] .twofa-secret-form .bw-label {
    color: #e5e7eb;
}

body[data-theme="dark"] .twofa-secret-form .bw-input {
    background: #020617;
    border-color: #1f2937;
    color: #f9fafb;
}

body[data-theme="dark"] .twofa-secret-form .bw-input:focus {
    border-color: #f97373;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.7);
}

/* OTP – TEK INPUT */

.twofa-code-field {
    max-width: 260px;
    margin: 10px auto 0;
    text-align: left;
}

.twofa-code-input-wrap {
    position: relative;
}

.twofa-code-input {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.30em;   /* 6 hane, tek kutu hissi */
    padding-right: 42px;      /* göz ikonuna yer */
}

/* DARK MODE – OTP input */
body[data-theme="dark"] .twofa-code-field .bw-label {
    color: #e5e7eb;
}

body[data-theme="dark"] .twofa-code-input {
    background: #020617;
    border-color: #1f2937;
    color: #f9fafb;
}

body[data-theme="dark"] .twofa-code-input:focus {
    border-color: #f97373;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.7);
}

/* Göz ikonu */

.twofa-toggle-visibility {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    color: #9ca3af;
    transition: background 0.15s ease, color 0.15s ease;
}

.twofa-toggle-visibility:hover {
    background: rgba(248, 113, 113, 0.1);
    color: #dc2626;
}

.twofa-toggle-visibility i {
    font-size: 14px;
}

/* DARK MODE – Göz ikonu */
body[data-theme="dark"] .twofa-toggle-visibility:hover {
    background: rgba(248, 113, 113, 0.18);
    color: #fecaca;
}

/* 2FA KAPATMA FORMU */

.twofa-disable-area {
    margin-top: 16px;
    border-radius: 12px;
    padding: 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.twofa-disable-area.is-hidden {
    display: none;
}

.twofa-disable-title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #111827;
}

.twofa-disable-desc {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 8px;
}

/* DARK MODE – 2FA disable area */
body[data-theme="dark"] .twofa-disable-area {
    background: #020617;
    border-color: #111827;
}

body[data-theme="dark"] .twofa-disable-title {
    color: #f9fafb;
}

body[data-theme="dark"] .twofa-disable-desc {
    color: #9ca3af;
}

/* Form genel */

.user-security-form {
    max-width: 360px;
}

.user-security-form .bw-form-group {
    margin-bottom: 10px;
}

.user-security-form .bw-label {
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 4px;
    display: block;
}

.user-security-form .bw-input {
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
}

.user-security-form .bw-input:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.4);
}

/* DARK MODE – Form */
body[data-theme="dark"] .user-security-form .bw-label {
    color: #e5e7eb;
}

body[data-theme="dark"] .user-security-form .bw-input {
    background: #020617;
    border-color: #1f2937;
    color: #f9fafb;
}

body[data-theme="dark"] .user-security-form .bw-input:focus {
    border-color: #f97373;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.7);
}

/* 2FA kapatma butonu – disable footer butonu (GENEL) */
#btn-disable-2fa {
    font-size: 12px;
    padding-inline: 12px;
}

/* =========================================
   ESKİ 6 KUTULU OTP YAPISINI ZORLA GİZLE
   ========================================= */

.twofa-digit,
.twofa-code-box,
.twofa-input-box,
.otp-box,
.otp-input,
.otp-input-item,
.otp-inputs,
.otp-wrapper {
    display: none !important;
}

/* =========================================
   2FA DISABLE BUTTON (LIGHT + DARK)
   ========================================= */
#btn-disable-2fa {
    background: transparent;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#btn-disable-2fa:hover {
    background: rgba(248, 113, 113, 0.08);
    border-color: #fca5a5;
}

/* DARK MODE – Disable button */
body[data-theme="dark"] #btn-disable-2fa {
    color: #fecaca;
    border-color: #fca5a5;
    background: transparent;
    box-shadow: none;
}

body[data-theme="dark"] #btn-disable-2fa:hover {
    background: rgba(248, 113, 113, 0.16);
    border-color: #fca5a5;
}

/* =========================================
   DISABLE FORM BUTTON (İÇERİDEKİ)
   ========================================= */
#twofa-disable-area .bw-btn-secondary {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border: 1px solid #fecaca;
    background: transparent;
    color: #dc2626;
    cursor: pointer;
}

#twofa-disable-area .bw-btn-secondary:hover {
    background: rgba(248, 113, 113, 0.08);
    border-color: #fca5a5;
}

/* DARK MODE – disable form içi buton */
body[data-theme="dark"] #twofa-disable-area .bw-btn-secondary {
    color: #fecaca;
    border-color: #fca5a5;
    background: transparent;
}

body[data-theme="dark"] #twofa-disable-area .bw-btn-secondary:hover {
    background: rgba(248, 113, 113, 0.18);
}
/* =========================================
   WALLET HISTORY – KART TASARIMI
   ========================================= */

/* Geçmiş boş state */
.bw-history-empty {
    padding: 14px 12px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}

body[data-theme="dark"] .bw-history-empty {
    background: #020617;
    border-color: #1f2937;
    color: #9ca3af;
}

/* Her işlem satırı */
.bw-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 12px;
    margin-bottom: 8px;

    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;

    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

body[data-theme="dark"] .bw-history-item {
    background: #020617;
    border-color: #111827;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7);
}

/* Sol blok (type + date) */
.bw-history-item .info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Type alanı */
.bw-history-item .type {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Ana etiket chip (Yatırım / Çekim / Transfer) */
.bw-history-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    background: #fee2e2;
    color: #b91c1c;
}

.bw-history-chip--transfer {
    background: #fef3c7;
    color: #92400e;
}

body[data-theme="dark"] .bw-history-chip {
    background: rgba(248, 113, 113, 0.12);
    color: #fecaca;
}

body[data-theme="dark"] .bw-history-chip--transfer {
    background: rgba(234, 179, 8, 0.14);
    color: #facc15;
}

/* Transfer yanındaki site adı */
.bw-history-site {
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    max-width: 160px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body[data-theme="dark"] .bw-history-site {
    color: #e5e7eb;
}

/* Tarih */
.bw-history-item .date {
    font-size: 11px;
    color: #9ca3af;
}

body[data-theme="dark"] .bw-history-item .date {
    color: #6b7280;
}

/* Sağ blok (tutar + status) */
.bw-history-item .amount-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Tutar – tipografi + renkler */
.bw-history-item .amount {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Inter", "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;

    color: #111827;
}

.bw-history-item .amount.positive {
    color: #16a34a; /* yeşil */
}

.bw-history-item .amount.negative {
    color: #dc2626; /* kırmızı */
}

body[data-theme="dark"] .bw-history-item .amount {
    color: #f9fafb;
}

/* Status badge’leri */
.bw-history-item .status {
    min-width: 84px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

/* Bekliyor */
.bw-history-item .status.pending {
    background: #fef9c3;
    color: #854d0e;
}

/* Başarılı */
.bw-history-item .status.success {
    background: #dcfce7;
    color: #166534;
}

/* Failed / red */
.bw-history-item .status.failed {
    background: #fee2e2;
    color: #b91c1c;
}

body[data-theme="dark"] .bw-history-item .status.pending {
    background: rgba(250, 204, 21, 0.16);
    color: #facc15;
}

body[data-theme="dark"] .bw-history-item .status.success {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}

body[data-theme="dark"] .bw-history-item .status.failed {
    background: rgba(248, 113, 113, 0.20);
    color: #fecaca;
}

/* Mobilde spacing biraz sıkı olsun */
@media (max-width: 480px) {
    .bw-history-item {
        padding: 9px 10px;
        gap: 8px;
    }

    .bw-history-item .amount {
        font-size: 13px;
    }

    .bw-history-site {
        max-width: 130px;
    }
}



.deposit-method-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.deposit-method-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 14px 10px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #ffffff;
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
}

.deposit-method-icon i {
    font-size: 38px;
    color: #dc2626;
}

/* title */
.deposit-method-card .title {
    font-size: 13px;
    font-weight: 600;
    color: #991b1b;
    margin-top: 3px;
}

/* hover */
.deposit-method-card:hover {
    transform: translateY(-2px);
    border-color: #dc2626;
    background: #fff5f5;
}

/* disabled */
.deposit-method-card.is-disabled {
    opacity: .35;
    pointer-events: none;
}

/* DARK MODE */
body.dark-mode .deposit-method-card {
    background: #0f172a;
    border-color: #1e293b;
}

body.dark-mode .deposit-method-card:hover {
    background: rgba(220,38,38,0.1);
    border-color: #dc2626;
}

body.dark-mode .deposit-method-icon i {
    color: #fca5a5;
}

body.dark-mode .deposit-method-card .title {
    color: #fca5a5;
}

/* ======================================
   GLOBAL MINIMAL RED SCROLL BAR
   ====================================== */

/* ======================================
   LIGHT MODE (body ne dark-mode ne de data-theme="dark" iken)
   ====================================== */

/* Firefox */
body:not(.dark-mode):not([data-theme="dark"]) * {
    scrollbar-width: thin;
    scrollbar-color: #ffffff transparent; /* beyaz thumb, transparan track */
}

/* WebKit */
body:not(.dark-mode):not([data-theme="dark"]) ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body:not(.dark-mode):not([data-theme="dark"]) ::-webkit-scrollbar-track {
    background: transparent;
}

body:not(.dark-mode):not([data-theme="dark"]) ::-webkit-scrollbar-thumb {
    background: #ffffff;      /* light modda beyaz */
    border-radius: 6px;
}

body:not(.dark-mode):not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover {
    background: #f1f1f1;
}

/* ======================================
   DARK MODE (body.dark-mode veya data-theme="dark")
   ====================================== */

/* Firefox */
body.dark-mode *,
body[data-theme="dark"] * {
    scrollbar-width: thin;
    scrollbar-color: #dc2626 transparent; /* kırmızı thumb */
}

/* WebKit */
body.dark-mode ::-webkit-scrollbar,
body[data-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.dark-mode ::-webkit-scrollbar-track,
body[data-theme="dark"] ::-webkit-scrollbar-track {
    background: transparent;
}

body.dark-mode ::-webkit-scrollbar-thumb,
body[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #dc2626;      /* dark modda kırmızı */
    border-radius: 6px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #b91c1c;
}
/* Sadece Yatırım chip'i yeşil olsun */
.bw-history-chip--deposit {
    background: #10b981 !important;  /* yeşil */
    color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
/* Banka satırlarında sağda aksiyon alanı olanlar */
.user-list-item.has-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.user-list-item.has-action .user-list-main {
    flex: 1;
}

.user-list-actions {
    display: flex;
    align-items: center;
}

/* Kaldır butonu */
.user-list-remove-btn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid rgba(239, 68, 68, 0.6);
    background: rgba(248, 250, 252, 0.96);
    color: #ef4444;
    cursor: pointer;
    outline: none;
    transition: all 0.16s ease-out;
}

.user-list-remove-btn:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

.user-list-remove-btn:active {
    transform: scale(0.96);
}

.user-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.user-quick-actions .user-quick-btn {
    flex: 1 1 calc(50% - 8px); /* 2x2 grid gibi */
}
/* DARK MODE — Kaldır butonu */
body[data-theme="dark"] .user-list-remove-btn {
    background: rgba(31, 41, 55, 0.7);
    border-color: rgba(239, 68, 68, 0.7);
    color: #fca5a5;
    box-shadow: none;
}

body[data-theme="dark"] .user-list-remove-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #fecaca;
}

body[data-theme="dark"] .user-list-remove-btn:active {
    transform: scale(0.96);
}