/*
Theme Name: Hello Biz Child
Theme URI: https://elementor.com/hello-theme/
Template: hello-biz
Author: Elementor Team
Author URI: https://elementor.com/
Description: Hello Biz Child is a child theme of Hello Biz, created by Elementor team
Version: 1.0.0
*/

/* WooCommerce mesaj stilleri artık woocommerce-notices.css dosyasında */

/* ==========================================
   1. FORM CONTAINER VE GENEL LAYOUT
   ========================================== */

/* Ana container */
.custom-login-container {
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Form container */
#customer_login {
    background: #fff;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    width: 100%;
    box-sizing: border-box;
    order: 1;
}

/* Form elementleri */
.woocommerce form.login,
.woocommerce form.register,
.login-form,
.register-form,
.woocommerce-form-register,
.woocommerce-form-login {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    box-sizing: border-box;
}

/* ==========================================
   2. FORM ELEMENT STİLLERİ
   ========================================== */
/* Form yükseklik ve boyut ayarları - Tüm form elementleri için temel stiller */
.woocommerce form.login,
.woocommerce form.register,
.login-form,
.register-form,
.woocommerce-form-register,
.woocommerce-form-login{
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
}

/* Form başlıkları - Tüm h2 stilleri tek yerde toplandı */
#customer_login h2 {
    font-size: 24px; /* Daha büyük bir font boyutu */
    font-weight: 700; /* Daha kalın bir yazı tipi */
    color: #333; /* Daha koyu bir renk */
    margin: 0 0 20px 0; /* Alt boşluğu azalt */
    padding: 0;
    text-align: center; /* Sol hizalama */
    line-height: 1.4; /* Daha iyi okunabilirlik için satır yüksekliği */
    font-family: 'Arial', sans-serif; /* Modern bir yazı tipi */
    position: relative;
    text-transform: uppercase; /* Büyük harf kullanımı */
}

/* Başlık altındaki çizgi */
#customer_login h2:after {
    content: '';
    position: absolute;
    left: 50%; /* Ortala */
    transform: translateX(-50%); /* Tam ortala */
    bottom: -5px; /* Çizgi ile başlık arasındaki mesafe */
    width: 50px; /* Çizgi genişliği */
    height: 4px; /* Çizgi kalınlığı */
    background-color: #FF6B00; /* Çizgi rengi */
    border-radius: 2px; /* Çizgi köşe yuvarlama */
}

/* Form alanları */
.woocommerce form .form-row {
    padding: 2px;
    margin: 0 0 15px;
}
/* Input alanları için ortak stiller */
.woocommerce form .form-row input.input-text {
    width: 100%;
    padding: 12px;
    height: 42px;    
    font-family: "Poppins", Sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Input focus durumu */
.woocommerce form .form-row input.input-text:focus {
    border-color: #FF6B00;
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.1);
    outline: none;
}

/* Placeholder stilleri */
.woocommerce form .form-row input.input-text::placeholder {
    color: #9CA3AF;
    font-size: 15px;
}

/* Submit butonları */
.woocommerce button.button,
.woocommerce-Button {
    width: 100%;
    padding: 15px;
    background-color: #FF6B00;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Submit buton hover */
.woocommerce button.button:hover,
.woocommerce-Button:hover {
    background-color: #E65000;
}

/* Form geçiş linkleri */
.form-toggle-link {
    text-align: center;
    margin-top: 10px;
}

.form-toggle-link a {
    color: #FF6B00;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

.form-toggle-link a:hover {
    color: #E65000;
}

/* Checkbox container */
.woocommerce form .form-row .woocommerce-form__input-checkbox {
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #E5E7EB;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
    top: 0;
    left: 0;
    display: inline-block; /* Inline-block olarak ayarlandı */
    vertical-align: middle; /* Dikey hizalama */
}

/* Checkbox işaretlendiğinde */
.woocommerce form .form-row .woocommerce-form__input-checkbox:checked {
    background-color: #FF6B00;
    border-color: #FF6B00;
}

/* Checkbox işareti (tik) */
.woocommerce form .form-row .woocommerce-form__input-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Checkbox hover durumu */
.woocommerce form .form-row .woocommerce-form__input-checkbox:hover {
    border-color: #FF6B00;

    line-height: 1.5;
    color: #6B7280;
    margin-left: 8px; /* Checkbox ve yazı arası boşluk */
    text-align: left;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Özellikle checkbox container için */
.woocommerce form .form-row.privacy-policy-row label {
    display: block;
    width: 100%;
    padding-left: 25px; /* Checkbox için boşluk */
    position: relative;
}

/* Checkbox input pozisyonu */
.woocommerce form .form-row .input-checkbox {
    position: absolute;
    left: 0;
    top: 3px;
}

/* Terms text stili */
.terms-text {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #6B7280 !important;
    margin-bottom: 15px;
    text-align: justify;
}

.terms-text a {
    color: #FF6B00;
    text-decoration: none;
    transition: color 0.3s ease;
}

.terms-text a:hover {
    color: #E65000;
}

/* Şifre gereksinimleri */
.password-requirements {
    margin-top: 10px;
    padding: 15px;
    background: #F9FAFB;
    border-radius: 8px;
}

.password-requirements ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.password-requirements li {
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 5px;
    padding-left: 20px;
    position: relative;
}

.password-requirements li:last-child {
    margin-bottom: 0;
}

/* Ayraç stili */
.divider-or {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 10px 0; /* Üst ve alt boşluk */
    color: #9CA3AF;
    font-size: 12px; /* Yazı boyutunu artırdım */
    font-weight: 500; /* Yazı kalınlığını artırdım */
}

.divider-or::before,
.divider-or::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #E5E7EB;
    height: 2px; /* Çizgi kalınlığını azalt */
    margin: 3px; /* Çizgiler ile metin arasındaki boşluk */
}

.divider-or span {
    margin: 0 15px;
    padding: 0 10px;
    background: #fff;
    text-transform: lowercase;
    color: #9CA3AF; /* Metin rengini koyulaştırdım */
    font-weight: 200; /* Metin kalınlığını artırdım */
    border-radius: 4px; /* Arka planı yuvarlat */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0); /* Hafif gölge efekti */
}

/* ==========================================
   3. CHECKBOX STİLLERİ
   ========================================== */
/* Tüm checkbox stilleri tek grupta toplanır */
.woocommerce form .form-row .woocommerce-form__input-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    outline: none;
    position: relative;
    transition: all 0.3s ease;
    width: 20px;
    vertical-align: middle;
}

.woocommerce form .form-row .woocommerce-form__input-checkbox:checked {
    background-color: #FF6B00;
    border-color: #FF6B00;
}

.woocommerce form .form-row .woocommerce-form__input-checkbox:checked::before {
    content: '\f00c'; /* Font Awesome check icon */
    font-family: FontAwesome;
    font-size: 14px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ==========================================
   4. SOSYAL MEDYA VE GOOGLE GİRİŞ STİLLERİ
   ========================================== */




/* ==========================================
   5. RESPONSIVE TASARIM
   ========================================== */
/* Tüm responsive kodlar tek yerde toplanır */
@media (max-width: 480px) {
    /* Form container responsive */
    .custom-login-container {
        margin: 20px auto;
        padding: 0 10px;
    }
    
  

    /* Form elementleri responsive */
    #customer_login {
        padding: 20px;
    }
    
    /* Input alanları responsive */
    .woocommerce form .form-row input.input-text {
        height: 42px;
    }
    

    .divider-or {
        margin: 15px 0; /* Mobilde üst ve alt boşluk*/
        margin-top: 10px;
    }
}

/* WooCommerce Product Attributes Table */
.woocommerce-tabs .woocommerce-Tabs-panel--additional_information {
    width: 80%;
    margin: 0 auto;
}


@media (max-width: 768px) {
    .woocommerce-tabs .woocommerce-Tabs-panel--additional_information {
        width: 100%;
        margin: 0;
    }
}

.woocommerce-product-attributes {
    margin: 0 auto;
    border-collapse: collapse;
}

@media (max-width: 768px) {
    .woocommerce-product-attributes {
        width: 100%;
        margin: 0;
    }
}

.woocommerce-product-attributes tbody tr {
    display: table-row;
    line-height: 8px; /* Reduced from 1 */
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
    width: 50%;
    padding: 0;
    font-size: 0.9rem; /* Reduced from 14px */
    line-height: 7px; /* Reduced from 1 */
    text-align: left;    
    border: none;
    background: none;
}

.woocommerce-product-attributes th {
    font-weight: 500;
    color: #101920; /* Değiştirildi */    
    font-size: 0.9rem;
    line-height: 7px; /* Reduced from 1 */
}

.woocommerce-product-attributes td {
    color: #101920; /* Değiştirildi */
}

.woocommerce-product-attributes td a {
    color: #101920; /* Eklendi */
}

.woocommerce-product-attributes td p {
    margin: 0;
}

.woocommerce-product-attributes-item__label,
.woocommerce-product-attributes-item__value {
    background: transparent !important;
    
}

.woocommerce-product-attributes-item {
    background: transparent !important;
}

/* Remove any other product attributes table styles */

/* ==========================================
   7. UYARI MESAJLARI
   ========================================== */
/* WooCommerce uyarı mesajları için stiller - NOT: Ana stiller woocommerce.css'te */
/* Bu bölümdeki stiller woocommerce.css'e taşınmıştır */

/* ==========================================
   8. YARDIMCI SINIFLAR
   ========================================== */
/* Ayraç, başlık altı çizgisi gibi yardımcı stiller */

/* beni hatırla ve şifremi unuttum */
.form-row p {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-top: 15px;
    gap: 0;
}

.form-row-remember label {
    font-size: 14px;
    color: #2B2B2B;
    margin: 0;
    flex-grow: 1;
}

.lost-password-link {
    color: #FF6B00; /* Link rengi */
    text-decoration: none; /* Alt çizgi kaldır */
    font-size: 14px; /* Yazı boyutu */
    margin: 0; /* Varsayılan marjı sıfırla */
    padding: 0;
    margin-left: auto;
    order: 2;
}

.lost-password-link:hover {
    text-decoration: underline; /* Hover durumunda alt çizgi ekle */
}

/*şifregöstermeyi kapat - düzeltilmiş versiyon */
.show-password-input {
    display: none;
}

/* şifremi unuttum yazısı*/
#content > div > div > div > div > div.elementor-element.elementor-element-24fd463.e-my-account-tabs-vertical.elementor-widget.elementor-widget-woocommerce-my-account > div > div > div > form > p:nth-child(1) {
    font-size: 14px; /* Yazı boyutunu küçültmek için 12px olarak ayarladık */
    align-items: right; /* Dikey hizalama */
}

/* Masaüstünde genişlik 480px olacak */
#content > div > div > div > div > div.elementor-element.elementor-element-24fd463.e-my-account-tabs-vertical.elementor-widget.elementor-widget-woocommerce-my-account > div > div > div > form {
    width: 480px;
    margin: 0 auto; /* Ortalamak için */
}

/* Mobil ekranlar için ekran genişliğine göre ayarla */
@media (max-width: 480px) {
    #content > div > div > div > div > div.elementor-element.elementor-element-24fd463.e-my-account-tabs-vertical.elementor-widget.elementor-widget-woocommerce-my-account > div > div > div > form {
        width: 100%; /* Ekran genişliği kadar */
    }
}

/* Woocommerce ürün sayfası yorumlar */
.woocommerce-product-rating {
    display: block !important;
}

/* ==========================================
   9. ÜRÜN STOK DURUMU
   ========================================== */
.elementor-widget-woocommerce-product-stock p.stock {
    color: #101920;
}

/* ==========================================
   10. sidecart stilleri
   ========================================== */
/* 
 * Cart styles moved to css/components/cart.css
 * This ensures better organization and modularity
 * @see CSS-ARCHITECTURE.md for migration details
 */

    #content > div > div > div > div > div > div > div > div.e-cart__container > div.e-cart__column.e-cart__column-end > div > div > div > div > table > tbody > tr.woocommerce-shipping-totals.shipping > td > p > strong {
    /* Cart styles moved to css/components/cart.css */
    }


  /*ödeme sayfasında gizlilik mesajı stilleri*/
  /* Lütfen '.kullanici-hedef-alani' kısmını kendi bulduğunuz seçiciyle değiştirin */
  .sorunlu-metin-alani {
    font-family: 'Poppins', sans-serif; /* Poppins fontu yüklü olmalı */
    font-size: 0.8rem;
    width: 100%;
    max-width: 100%;
    line-height: 1.5; /* 0.8rem için 1.5 veya 1.6 daha uygun olabilir */
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
}

/* Ödeme sayfasında Sipariş Özeti bölümü */

/* Genel Tablo Boyutu ve Temel Ayarları */
.woocommerce-checkout-review-order-table {
    font-size: 0.8rem;                  /* Ana yazı boyutu */
    width: 100%;                        /* Tablo tam genişlikte olsun */
    border-collapse: collapse;          /* Hücre kenarlıkları birleşik olsun */
    margin-bottom: 1.5em;               /* Tablonun altına boşluk */
    /* border: 1px solid #ddd; */      /* Dış kenarlık (isteğe bağlı, Elementor'dan gelebilir) */
}

/* Tablo Başlık Hücreleri (th) */
.woocommerce-checkout-review-order-table thead th {
    font-weight: 600; /* Kalınlık (örneğin semi-bold) */
    padding: 10px 12px; /* İç boşluk (üst-alt sağ-sol) */
    border-bottom-width: 2px; /* Alt çizgi kalınlığı */
    border-bottom-style: solid; /* Alt çizgi stili */
    /* border-bottom-color: #e0e0e0; */ /* Çizgi rengini Elementor'dan alabilir veya buradan ayarlayabilirsiniz */
}

/* "Ürün" başlığı sola yaslı */
.woocommerce-checkout-review-order-table thead th.product-name {
    text-align: left;
}

/* "Ara Toplam" başlığı sağa yaslı (İsteğiniz üzerine güncellendi) */
.woocommerce-checkout-review-order-table thead th.product-total {
    text-align: right;
}

/* Tablo Gövdesi Satırları ve Hücreleri */
.woocommerce-checkout-review-order-table tbody tr.cart_item {
    border-bottom-width: 1px; /* Alt çizgi kalınlığı */
    border-bottom-style: solid; /* Alt çizgi stili */
    /* border-bottom-color: #eaeaea; */ /* Çizgi rengini Elementor'dan alabilir */
}

.woocommerce-checkout-review-order-table tbody td {
    padding: 10px 12px; /* İç boşluk */
    vertical-align: middle; /* Dikeyde ortala */
}

/* Ürün Adı Sütunu */
.woocommerce-checkout-review-order-table td.product-name {
    font-family: "Poppins", Sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Ürün Miktarı (örn: × 1) */
.woocommerce-checkout-review-order-table td.product-name .product-quantity {
    font-weight: 500; /* Kalınlık (örneğin medium) */
    font-size: 0.9em; /* Ana yazı boyutuna göre biraz daha küçük (0.8rem * 0.9) */
    margin-left: 8px; /* Ürün adından biraz ayırmak için */
}

/* Ürün Fiyatı / Ara Toplam Sütunu (Hücre) */
.woocommerce-checkout-review-order-table td.product-total {
    text-align: right;
}

/* Fiyat Gösterimi (Genel) */
.woocommerce-checkout-review-order-table .woocommerce-Price-amount.amount {
    font-weight: 500; /* Fiyatların kalınlığı */
    white-space: nowrap; /* Fiyat ve para biriminin ayrılmasını engeller */
}

/* Tablo Alt Bilgisi (tfoot) Satırları Genel Ayarları */
.woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce-checkout-review-order-table tfoot tr td {
    padding: 10px 12px; /* İç boşluk */
    border-top-width: 1px; /* Üst çizgi kalınlığı */
    border-top-style: solid; /* Üst çizgi stili */
    /* border-top-color: #eaeaea; */ /* Çizgi rengini Elementor'dan alabilir */
    text-align: right; /* Genellikle sağa yaslı */
}

.woocommerce-checkout-review-order-table tfoot tr th {
    font-weight: 600; /* Altbilgi başlıkları (Ara Toplam, Gönderim, Toplam) için kalınlık */
    text-align: left; /* Altbilgi başlıkları sola yaslı */
}

/* Gönderim Yöntemi Listesi (Kargo Ücretsiz vb.) */
.woocommerce-checkout-review-order-table ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.95em; /* Ana yazı boyutuna göre (0.8rem * 0.95) */
}
.woocommerce-checkout-review-order-table ul#shipping_method li {
    margin-bottom: 0.3em; /* Liste elemanları arası boşluk */
}

/* Sipariş Toplam Satırı */
.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
    font-weight: 600; /* Toplamı daha belirgin yapmak için (bold) */
    font-size: 0.8rem; /* Ana yazı boyutundan biraz daha büyük */
    border-top-width: 2px; /* Üstüne daha belirgin bir çizgi */
    /* border-top-color: #d0d0d0; */ /* Çizgi rengini Elementor'dan alabilir */
}

/* Sipariş Toplamı Fiyatı (Kalın olan) */
.woocommerce-checkout-review-order-table tr.order-total td strong .woocommerce-Price-amount.amount {
    font-family: "Poppins", Sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    /* `strong` etiketi zaten kalınlaştırıyor, gerekirse font-weight: 700; veya daha yüksek bir değer kullanılabilir. */
    /* font-size: 1.1em; */ /* Toplam fiyatı daha da büyütmek için (0.95rem * 1.1) */
}

/* gizlilil ilkesi notu*/
/* WooCommerce Ödeme Sayfası Gizlilik Politikası Metni - Sütun Sorunu Düzeltmesi */

/* Eğer Poppins fontu sitenizde Elementor veya tema tarafından zaten yüklenmiyorsa,
   bu satırı CSS'inizin en başına ekleyebilirsiniz (yorumu kaldırarak): */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); */

.woocommerce-privacy-policy-text p {
    /* ---- ÖNCEKİ FONT ve BOYUT AYARLARINIZ (Elementor'dan geliyorsa bu satırları silin veya yorumda bırakın) ---- */
    /* font-family: 'Poppins', sans-serif;  */
    /* font-size: 0.8rem; */
    /* font-weight: 400; */ /* Veya 500 */
    /* color: #your-text-color; */ /* Renk Elementor'dan geliyorsa bu satırı silin */

    /* ---- "3 SÜTUN GİBİ" GÖRÜNÜMÜ DÜZELTMEK İÇİN KRİTİK KURALLAR ---- */
    column-count: auto !important;      /* Eğer sütunlara bölme varsa iptal et */
    column-width: auto !important;      /* Eğer sütun genişliği varsa iptal et */
    -webkit-column-count: auto !important; /* Eski tarayıcılar için */
    -moz-column-count: auto !important;    /* Eski tarayıcılar için */

    width: 100% !important;             /* Kapsayıcısının izin verdiği genişliği kullanır */
    max-width: 100% !important;         /* Kapsayıcısından dışarı taşmasını engeller */
    display: block !important;          /* Blok element olarak davranmasını garantiler */
    float: none !important;             /* Eğer float uygulanmışsa iptal et */

    /* ---- OKUNABİLİRLİK İÇİN EK AYARLAR ---- */
    line-height: 1.5 !important;        /* Satırlar arası boşluğu artırır */
    word-wrap: break-word !important;   /* Uzun kelimeler için daha iyi satır sonu */
    overflow-wrap: break-word !important; /* word-wrap'ın modern hali */
    word-break: normal !important;      /* Kelimelerin ortadan kırılmasını engeller */
    text-align: left !important;        /* Metni sola yaslar (veya 'justify') */
    hyphens: auto !important;           /* Dil ayarı doğruysa kelime bölme */

    margin-top: 1em;
    margin-bottom: 1.6em;
    padding: 15px;
    background: #e8d9d6; /* Arka plan rengi */
    border-radius: 3px; /* Yuvarlatılmış köşeler */

}

/* Gizlilik politikası linkinin stili (linkin görünümünü de etkileyebilir) */
.woocommerce-privacy-policy-text p a.woocommerce-privacy-policy-link {
    display: inline; /* Linkin metin akışını bozmaması için */
    /* font-weight: 600; */ /* Linki biraz daha belirgin yapmak için (isteğe bağlı) */
}



/***** Ürün küçük resimlerini sol üste taşıma ******/
/* 1) Nokta-nav ve ok-nav'u tamamen kaldır */
.elementor-widget-woocommerce-product-images .flex-control-nav,
.elementor-widget-woocommerce-product-images .flex-direction-nav {
  display: none !important;
}

/* 2) Galeriyi grid'e çevir: sol thumbs, sağ main */
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
  display: grid !important;
  grid-template-areas: "thumbs main" !important;
  grid-template-columns: auto 1fr !important;
  gap: 10px !important;
  align-items: center !important; /* DEĞIŞTI: stretch → center */
}

/* 3) Ana görseli grid'in "main" alanına al ve ortala */
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__wrapper {
  grid-area: main !important;
  align-items: center !important; /* DEĞIŞTI: stretch → center */
  
}

/* 4) Thumbnails'ı grid'in "thumbs" alanına al, boyut ve overflow ayarla */
.elementor-widget-woocommerce-product-images .flex-control-thumbs {
  grid-area: thumbs !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  padding: 8px !important;
  border-radius: 6px !important;
  /* YENİ: Scrollbar styling */
  scrollbar-width: thin !important;
  scrollbar-color: #ccc transparent !important;
}

/* 5) Her bir thumbnail'a sabit kare boyut, gölge ve hover efekti */
.elementor-widget-woocommerce-product-images .flex-control-thumbs li {
  width: 60px !important;
  height: 60px !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  transition: transform 0.2s ease !important; /* YENİ: Smooth transition */
  cursor: pointer !important; /* YENİ: Pointer cursor */
}

.elementor-widget-woocommerce-product-images .flex-control-thumbs li:hover {
  transform: translateX(4px) !important;
}

/* 6) Aktif seçili thumb'u öne çıkar */
.elementor-widget-woocommerce-product-images .flex-control-thumbs li.flex-active {
  outline: 2px solid #3CB371 !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(60, 179, 113, 0.3) !important; /* YENİ: Gölge efekti */
}

/* 7) Yakınlaştırma butonunu gizleme */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  display: none !important;
}


/* 8) Kare badge stili */
/* ─── Site Rengine Uygun İnce İndirim Badge’i ─── */
.woocommerce span.onsale {
  position: absolute;
  top: 8px;
  left: 8px !important;

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

  /* Tek renkli arka plan */
  background: #F7494B !important;
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  white-space: nowrap;

  /* Çok ince dikey, dar yatay padding */
  padding: 0.01em 0.9em !important;
  height: 10px !important;

  /* Sadece sağ köşeler hafif yuvarlak */
  border-radius: 3px 3px 3px 3px !important;

  /* Etrafına eşit gölge */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) !important;

  transform: none !important;
  z-index: 20;
}

/* Alt iç gölge çubuğu kaldırıldı */

/* ─── Mobilde Orantılı Küçültme ─── */
@media (max-width: 768px) {
  .woocommerce span.onsale {
    top: 5px;
    left: 5px !important;
    font-size: 0.65rem;
    padding: 0.0,1em 0.7em !important;
  }
}

/* ==========================================
   10. WPC SORTING FORM STYLES
   ========================================== */

/* WPC Sorting Form Container */
.wpc-sorting-form,
.woocommerce-ordering {
    margin: 0 0 20px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* WPC Order By Select - Clean Modern Style */
.wpc-orderby-select,
.wpc-sorting-form select,
.woocommerce-ordering select,
.orderby,
select[name="ordr"] {
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: white;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-width: 200px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    outline: none;
    transition: all 0.25s ease;
    
    /* Style the dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
}

.wpc-orderby-select:hover,
.wpc-sorting-form select:hover,
.woocommerce-ordering select:hover,
.orderby:hover,
select[name="ordr"]:hover {
    border-color: #bbb;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.wpc-orderby-select:focus,
.wpc-sorting-form select:focus,
.woocommerce-ordering select:focus,
.orderby:focus,
select[name="ordr"]:focus {
    border-color: #F7494B;
    box-shadow: 0 0 0 2px rgba(247, 73, 75, 0.15);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .wpc-sorting-form,
    .woocommerce-ordering {
        justify-content: flex-end;
        margin-bottom: 15px;
    }
    
    .wpc-orderby-select,
    .wpc-sorting-form select,
    .woocommerce-ordering select,
    .orderby,
    select[name="ordr"] {
        min-width: auto;
        width: 100%;
        max-width: 220px;
    }
}

@media (max-width: 480px) {
    .wpc-sorting-form,
    .woocommerce-ordering {
        justify-content: center;
        width: 100%;
    }
    
    .wpc-orderby-select,
    .wpc-sorting-form select,
    .woocommerce-ordering select,
    .orderby,
    select[name="ordr"] {
        max-width: 100%;
    }
}