/* ==================== BANKA HESAPLARI ==================== */

/* Bank Accounts Grid */
.bank-accounts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* Bank Account Card */
.bank-account {
    background: transparent;
    border-radius: 14px;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid rgba(36, 60, 148, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.bank-account::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.bank-account:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(36, 60, 148, 0.15);
    border-color: rgba(36, 60, 148, 0.2);
}

/* Bank Name */
.bank-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-title);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 5;
}

/* Account Number (IBAN Container) */
.account-number {
    background: transparent;
    padding: 14px;
    border-radius: 10px;
    margin: 14px 0;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(36, 60, 148, 0.1);
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
    z-index: 10;
    opacity: 0.9;
    min-height: 100px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    background-color: #ffffff;
    flex: 1;
}

/* IBAN Logo Watermark Effect */
.bank-account .account-number {
    background-size: 240px auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: contrast(1.05) saturate(1.1);
    position: relative;
    overflow: hidden;
}

.bank-account .account-number::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
    border-radius: inherit;
}

.bank-account .account-number > * {
    position: relative;
    z-index: 2;
}

.account-number .iban {
    opacity: 1;
    font-weight: bold;
}

.account-number .copy-btn {
    opacity: 1;
}

/* Copy Button */
.copy-btn {
    background: linear-gradient(135deg, #e8f0ff 0%, #f3f4f6 100%);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.copy-btn:hover {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    transform: scale(1.1);
}

/* Account Holder */
.account-holder {
    font-size: 14px;
    color: #374151;
    margin-top: 12px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.account-holder:hover {
    color: var(--primary);
}

/* ==================== BANKA RENK ŞEMALARI ==================== */

/* Garanti BBVA - Yeşil */
.bank-account.garanti {
    background-color: transparent;
    border-color: rgba(0, 166, 81, 0.2);
    background-blend-mode: normal;
}

.bank-account.garanti::before {
    background: linear-gradient(90deg, #00A651, #2ecc71);
}

.bank-account.garanti .account-number {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        url('../../assets/bankalar/garanti.svg') center center / 240px auto no-repeat;
}

/* Akbank - Kırmızı */
.bank-account.akbank {
    background-color: transparent;
    border-color: rgba(227, 6, 19, 0.2);
    background-blend-mode: normal;
}

.bank-account.akbank::before {
    background: linear-gradient(90deg, #E30613, #f74c47);
}

.bank-account.akbank .account-number {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        url('../../assets/bankalar/akbank.svg') center center / 240px auto no-repeat;
}

/* Ziraat Bankası - Kırmızı */
.bank-account.ziraat {
    background-color: transparent;
    border-color: rgba(225, 28, 42, 0.2);
    background-blend-mode: normal;
}

.bank-account.ziraat::before {
    background: linear-gradient(90deg, #E11C2A, #f05a62);
}

.bank-account.ziraat .account-number {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        url('../../assets/bankalar/ziraat.svg') center center / 240px auto no-repeat;
}

/* İş Bankası - Koyu Mavi */
.bank-account.isbank {
    background-color: transparent;
    border-color: rgba(0, 58, 143, 0.2);
    background-blend-mode: normal;
}

.bank-account.isbank::before {
    background: linear-gradient(90deg, #003A8F, #0052cc);
}

.bank-account.isbank .account-number {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        url('../../assets/bankalar/isbank.svg') center center / 240px auto no-repeat;
}

/* Yapı Kredi - Lacivert */
.bank-account.yapi {
    background-color: transparent;
    border-color: rgba(0, 59, 143, 0.2);
    background-blend-mode: normal;
}

.bank-account.yapi::before {
    background: linear-gradient(90deg, #003B8F, #0052cc);
}

.bank-account.yapi .account-number {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        url('../../assets/bankalar/yapi.svg') center center / 240px auto no-repeat;
}

/* DenizBank - Lacivert + Kırmızı */
.bank-account.denizbank {
    background: transparent;
    border-color: rgba(0, 58, 143, 0.2);
}

.bank-account.denizbank::before {
    background: linear-gradient(90deg, #003A8F, #E30613);
}

/* Halkbank - Mavi */
.bank-account.halkbank {
    background-color: transparent;
    border-color: rgba(0, 90, 169, 0.2);
    background-blend-mode: normal;
}

.bank-account.halkbank::before {
    background: linear-gradient(90deg, #005AA9, #6CB4E4);
}

.bank-account.halkbank .account-number {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        url('../../assets/bankalar/halkbank.svg') center center / 240px auto no-repeat;
}

/* QNB Finansbank - Mor */
.bank-account.qnbfinansbank {
    background-color: transparent;
    border-color: rgba(91, 45, 139, 0.2);
    background-blend-mode: normal;
}

.bank-account.qnbfinansbank::before {
    background: linear-gradient(90deg, #5B2D8B, #8b5fbf);
}

.bank-account.qnbfinansbank .account-number {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        url('/assets/bankalar/qnbfinansbank.svg') center center / 240px auto no-repeat;
}

/* Türkiye Finans - Yeşil */
.bank-account.turkiyefinans {
    background-color: transparent;
    border-color: rgba(0, 154, 68, 0.2);
    background-blend-mode: normal;
}

.bank-account.turkiyefinans::before {
    background: linear-gradient(90deg, #009A44, #2ecc71);
}

.bank-account.turkiyefinans .account-number {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        url('../../assets/bankalar/turkiyefinans.svg') center center / 240px auto no-repeat;
}

/* ==================== MOBİL RESPONSIVE ==================== */

@media (max-width: 768px) {
    .bank-account {
        padding: 16px;
    }
}

@media (max-width: 576px) {
    .bank-account .account-number {
        background-size: 160px auto !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .bank-account .account-number::before {
        opacity: 1;
        visibility: visible;
    }

    .bank-account .copy-btn {
        flex-shrink: 0;
        margin-left: auto;
    }

    .bank-accounts {
        grid-template-columns: 1fr;
    }
}


/* banks.css sonuna ekle */
body.dark-mode .bank-account {
    background: rgba(30, 41, 59, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .bank-account:hover {
    background: rgba(30, 41, 59, 0.7);
    border-color: var(--primary);
}

body.dark-mode .bank-name {
    color: var(--text-title);
}

body.dark-mode .account-number {
    background-color: #0f172a !important; /* IBAN kutusu zemini */
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* IBAN üzerindeki logo filtresini dark mode için ayarla */
body.dark-mode .bank-account .account-number::after {
    background: rgba(15, 23, 42, 0.75); /* Logoyu biraz daha karart ki yazı netleşsin */
}

body.dark-mode .copy-btn {
    background: #1e293b;
    color: #60a5fa;
}

body.dark-mode .account-holder {
    color: var(--text-main);
}