/* assets/css/common.css (veya ana stil dosyanız) */

/* ================================================= */
/* 🚀 GLOBAL HİZALAMA KESİN ÇÖZÜMÜ */
/* ================================================= */

/* Tarayıcı varsayılan kenar boşluklarını sıfırla ve akış yönünü ayarla */
body, html {
 width: 100%;
 /* 🔥 DÜZELTME: Bu kuralı sadece yatay taşmayı engellemek için kullanıyoruz. */
    /* Sticky'nin çalışması için Y kaydırmasını engellememeliyiz. */


    
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Tüm içeriği merkezleyen genel konteyner */
.container {
    /* Değeri 1200'den 1500-1600 civarına çekiyoruz */
    max-width: 1550px; 
    width: 95%; 
    margin: 0 auto;
    /* Kutunun içindeki içeriğin kenarlara yapışmasını engellemek için */
    box-sizing: border-box; 
}

/* Header ve Footer kapsayıcıları */
.header-container,
.header-content,
.footer-container {
    max-width: 1550px; /* Container ile aynı olmalı ki hizalı dursun */
    width: 95%; 
    margin: 0 auto;
    padding-left: 20px; 
    padding-right: 20px;
    box-sizing: border-box;
}

/* Ekstra Büyük Ekranlar İçin (Opsiyonel) */
@media (min-width: 2000px) {
    .container, .header-container, .footer-container {
        max-width: 1800px; /* Çok geniş monitörlerde biraz daha açılır */
    }
}

/* ================================================= */
/* 📱 MOBİL GÖRÜNÜM İÇİN EKSTRA KURAL */
/* ================================================= */
@media (max-width: 768px) {
    /* Mobil cihazlarda genel kapsayıcının sol/sağ boşluğunu ayarla */
    .container,
    .header-container,
    .header-content,
    .footer-container {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* assets/css/reset.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    scroll-behavior: smooth;
}



a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input[type="submit"] {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield; /* Firefox için */
}

/* Helper sınıfı */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}





/* 1. Kapsayıcı (P etiketi): İkon ve Metin Bloğunu YANYANA tutar */
.small-promise-list p {
    display: flex;
    align-items: center; /* İkon ve metin bloğunu ortalar */
}

/* 2. İkon: Sabit kalır ve sağında boşluk bırakır */
.small-promise-list p i {
    margin-right: 10px; 
    font-size: 0px;
}

/* 3. YENİ KURAL: Metin Kapsayıcısı (Alt alta gelmeyi sağlar) */
.promise-text-container {
    display: flex;
    flex-direction: column; /* KRİTİK: İçindeki elemanları dikey (alt alta) sıralar */
    line-height: 1.2; /* Satır aralıklarını ayarla */
}

/* 4. Ana Metin Stili */
.small-promise-list .main-promise-text {
    font-weight: bold;
    color: #333;
    font-size: 1.2em; 
}

/* 5. İkincil Metin Stili (Gri) */
.small-promise-list .sub-promise-text {
    color: #000; 
    font-size: 0.9em; 
    /* Alt metni yukarıdaki metne yaslar */
    margin-top: 3px; 
}


/* İkonlar için ek kural: İkonu siyah yapar */
.small-promise-list p i {
    color: #333333; /* İkon rengini siyah yapar */
    /* Font Awesome ikonlarının kalınlığını kontrol etmek için genellikle font-weight kullanılır */
    font-weight: 900; /* Solid ikonların kalın görünmesini sağlar (bu genellikle varsayılandır) */
    margin-right: 8px; /* Metinle arasında boşluk bırakır */
    margin-bottom: 20px;
}



.small-promise-list p i.fa-truck-fast {
    /* İkonun görsel boyutunu ayarlar */
    font-size: 24px; 
    
    /* İkonun kapladığı alanı sabitler (Hizalama için kritik) */
    min-width: 24px; 
    
    /* İkonun bu sabit alan içinde ortalanmasını sağlar */
    text-align: center; 
}

.small-promise-list p i.fa-rotate-left {
    /* İkonun görsel boyutunu ayarlar */
    font-size: 30px; 
    
    /* İkonun kapladığı alanı sabitler (Hizalama için kritik) */
    min-width: 30px; 
    
    /* İkonun bu sabit alan içinde ortalanmasını sağlar */
    text-align: center; 
}


/* 1. Tüm elementlerin odaklanma (focus) çerçevesini kaldırır */
*:focus, 
*:active, 
button:focus, 
a:focus, 
input:focus, 
select:focus, 
textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 2. Bazı tarayıcılarda (özellikle Firefox) oluşan noktalı çizgiyi kaldırır */
::-moz-focus-inner {
    border: 0 !important;
}

/* 3. Storefront ve WooCommerce butonlarındaki özel gölgeleri temizler */
button.menu-toggle:focus, 
.main-navigation ul li a:focus,
.site-header a:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important; /* Headerdaki mavi/gri arka planı da siler */
}

/* 4. Kapatma (X) butonları ve ikonlar için ekstra koruma */
.close-btn:focus, 
#close-variant-modal:focus, 
#close-mini-cart:focus {
    outline: none !important;
    border: none !important;
}


/* ==================================================== */
/* ❌ KAPATMA (X) BUTONLARI RESET ❌ */
/* ==================================================== */

/* Tüm modal ve çekmece kapatma butonlarını hedefle */
.modal-header .close-btn, 
.mini-cart-header .close-btn,
#close-variant-modal,
#close-mini-cart {
    background: transparent !important; /* Arka plan her zaman şeffaf */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    cursor: pointer !important;
}

/* Hover anında arka planın grileşmesini ENGELLE */
.modal-header .close-btn:hover, 
.mini-cart-header .close-btn:hover,
#close-variant-modal:hover,
#close-mini-cart:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #000 !important; /* İkon rengini siyah yap (veya istediğin renk) */
    transform: scale(1.1); /* Hafifçe büyüsün (arka plan yerine daha şık bir efekt) */
}

/* İçindeki ikonun (fa-xmark) stilini sabitle */
.close-btn i {
    font-size: 20px !important;
    line-height: 1 !important;
    color: #333 !important;
}






/* 1. Tüm interaktif elementlerin tıklandığında/aktifkenki rengini zorla temizle */
html body a:active, 
html body a:focus, 
html body button:active, 
html body button:focus,
html body .elementor-button:active,
html body .elementor-button:focus {
    background-color: transparent !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
    text-decoration: none !important;
}

/* 2. Webkit (Mobil ve Chrome) dokunma efektini tamamen öldür */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
}

/* 3. Butonun kendi rengini koru (Hangi class'ı kullanıyorsan onu buraya ekle) */
.variant-selector, .add-to-cart-btn {
    background-color: #fff !important; /* Butonun orijinal arka planı */
    color: #000 !important;           /* Butonun orijinal yazı rengi */
}



/* Breadcrumb linklerini kırmızıdan kurtar */
.breadcrumb-nav a {
    color: #666 !important; /* Standart gri */
    transition: color 0.3s ease;
}

.breadcrumb-nav a:hover, 
.breadcrumb-nav a:focus, 
.breadcrumb-nav a:active {
    color: #000 !important; /* Üzerine gelince veya tıklayınca siyah olsun */
    text-decoration: none !important;
}

/* Mevcut sayfa ismini (current-item) sabitle */
.breadcrumb-nav .current-item {
    color: #999 !important;
}