:root{--primary-button-color: #093245; --main-third-color: #269FA1; --main-fourth-color: #F16B17; --main-second-color: #F8F8F8; --border-radius: 12px; --product-card-bg: #FFFFFF; --product-card-border: #D9E7E8; --product-card-color: #093245;} /* ==========================================================================
   TRENDİNYERİ PREMIUM ÖDEME FORMU (TAMAMEN SIFIRLANMIŞ MODERN YAPI)
   ========================================================================== */

/* --- 1. ADIM: VUETIFY'IN SORUNLU ALANLARINI YOK ETME --- */
/* O kesik çizgilere ve gri arka planlara sebep olan tüm sistem katmanlarını gizliyoruz */
.pay-credit-card-input .v-field__outline, 
.pay-credit-card-input .v-field__overlay,
.pay-credit-card-input .v-field__loader {
    display: none !important;
    opacity: 0 !important;
    border: none !important;
}

/* --- 2. ADIM: YENİ, TERTEMİZ KUTU TASARIMI --- */
/* Giriş kutusunun ana gövdesi */
.pay-credit-card-input .v-field {
    background-color: #ffffff !important; /* O "gereksiz grilik" gitti, artık bembeyaz */
    /* Logodaki lacivertten türetilmiş, çok şık ve ince bir gri-mavi çerçeve */
    border: 2px solid #eaecf0 !important; 
    border-radius: 12px !important; /* Köşeler artık PÜRÜZSÜZ, kesik yok */
    box-shadow: none !important; /* Eski gölgeleri sıfırla */
    padding: 0 !important; /* İç boşlukları sıfırla, aşağıda yeniden vereceğiz */
    transition: all 0.3s ease-in-out !important;
    overflow: hidden !important; /* Taşmaları engelle */
}

/* İçerik yerleşimi (Etiket ve yazı üst üste binmesin diye) */
.pay-credit-card-input .v-field__field {
    padding: 12px 16px !important;
    position: relative !important;
}

/* --- 3. ADIM: ODAKLANMA (FOCUS) - LOGODAKİ TURUNCU ETKİSİ --- */
/* Kutuya tıklandığında */
.pay-credit-card-input .v-input--is-focused .v-field,
.pay-credit-card-input .v-field--focused {
    border-color: #f26622 !important; /* Logodaki ENERJİK TURUNCU */
    background-color: #fffbf8 !important; /* Çok hafif bir turuncu sıcaklık verelim */
    /* Etrafa yayılan yumuşak turuncu bir "hale" efekti */
    box-shadow: 0 0 0 4px rgba(242, 102, 34, 0.15) !important; 
}

/* --- 4. ADIM: MARKA RENKLERİYLE TYPOGRAPHY --- */
/* Üst Etiketler (Kart No, Ad Soyad) - Logodaki TEAL/YEŞİL */
.pay-credit-card-input .v-label {
    position: absolute !important;
    top: 10px !important;
    left: 16px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #269f8d !important; /* Logodaki güven veren yeşil */
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    opacity: 1 !important;
    transform: none !important; /* Vuetify'ın hareket efektini durdur */
}

/* Girilen Rakamlar - Logodaki TOK LACİVERT */
.pay-credit-card-input .v-field__input {
    color: #023852 !important; /* Logodaki ana lacivert */
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    padding-top: 22px !important; /* Etiketin altına itiyoruz */
    padding-bottom: 4px !important;
}

/* --- 5. ADIM: DIŞ KART ÇERÇEVESİ (Modern Fintech Görünümü) --- */
.payment-option-card.active {
    background: #ffffff !important;
    border: 1px solid #eaecf0 !important; /* Çok ince, modern bir sınır */
    /* Lacivert tabanlı çok premium, yumuşak bir gölge */
    box-shadow: 0px 12px 24px -4px rgba(2, 56, 82, 0.08), 0px 4px 8px -4px rgba(2, 56, 82, 0.04) !important;
    border-radius: 16px !important;
    padding: 32px !important; /* Ferahlık için geniş iç boşluk */
}

/* Hata Mesajları (Kırmızı) */
.v-messages__message {
    color: #d32f2f !important;
    font-weight: 500;
    font-size: 12px;
    margin-left: 4px;
    margin-top: 6px;
}

/* --- MOBİL UYUM (Hala Gerekli) --- */
@media screen and (max-width: 768px) {
    .payment-option-card.active {
        padding: 20px !important;
    }
    .credit-card-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
    }
    .credit-card-row > .input-box {
        width: 50% !important;
        flex: 1 !important;
    }
/* ==========================================================================
   TÜM SAYFA ARKA PLAN BİRLEŞTİRMESİ & MOBİL DÜZELTME (KESİN ÇÖZÜM)
   ========================================================================== */

/* 1. MASAÜSTÜ İÇİN - Tüm arka planları temizle ve tek renk yap */
html, body, .v-application, .v-application__wrap, .v-main, .checkout-container {
    background: #f8fafc !important; /* Masaüstü için ferah, çok açık gri */
    background-color: #f8fafc !important;
    background-image: none !important; /* Temanın gizli gradyanlarını yok eder */
}

/* Sağ taraftaki (Sepet Özeti) inatçı gri blokları şeffaflaştır */
.checkout-container .v-col, 
.checkout-container [class*="bg-grey"], 
.order-summary,
.cart-summary-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. MOBİL İÇİN - Dar ekranlarda bembeyaz, tertemiz görünüm */
@media screen and (max-width: 768px) {
    html, body, .v-application, .v-application__wrap, .v-main, .checkout-container {
        background: #ffffff !important; 
        background-color: #ffffff !important;
    }
    
    /* Mobilde alt alta düşen kolonların zemin rengini sıfırla */
    .checkout-container .v-row > .v-col {
        background-color: transparent !important;
    }
    
    /* Formun mobildeki duruşunu biraz daha rahatlat */
    .payment-option-card.active {
        box-shadow: 0px 4px 12px rgba(2, 56, 82, 0.05) !important;
        margin-bottom: 25px !important;
    }
}
}