/* Yedepa Custom CSS - Ürün Başlıkları 5 Satır */



/* Slider ve modüllerdeki ürün başlıkları */
.product-thumb .name a,
.module-products .product-thumb .name a,
.swiper-slide .product-thumb .name a,
.products-carousel .product-thumb .name a,
.product-grid .product-thumb .name a {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: none !important;
    height: auto !important;
    white-space: normal !important;
    line-height: 1.4 !important;
}

/* Name container için de ayar */
.product-thumb .name,
.module-products .product-thumb .name {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Font Awesome Star Ikonları - Rating için */
.fa-star:before {
    content: "\f005";
}


.fa-star-half:before,
.fa-star-half-o:before,
.fa-star-half-empty:before,
.fa-star-half-full:before {
    content: "\f089";
}

/* ===== CLS (Cumulative Layout Shift) Düzeltmeleri ===== */

/* Resimler için aspect-ratio ve boyut rezervasyonu */
.product-thumb img,
.product-img img,
.img-responsive {
    /* aspect-ratio: attr(width) / attr(height); -- BU KOD HATALI/DESTEKLENMİYOR */
    aspect-ratio: auto;
    /* Tarayıcının HTML width/height'ten hesaplamasına izin ver */
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Lazy load resimleri için placeholder boyutu */
img[data-src],
img.lazyload {
    min-height: 100px;
    background-color: #f5f5f5;
}

img.lazyloaded {
    min-height: auto;
    background-color: transparent;
}

/* Ana içerik alanı için minimum yükseklik */
#content.col-sm-9,
.col-sm-9#content {
    min-height: 400px;
}

/* Ürün grid için sabit yükseklik */
.product-thumb {
    contain: layout style;
}

.product-thumb .image {
    position: relative;
    overflow: hidden;
}

/* Font yüklenirken kayma önleme */
body {
    font-display: swap;
}

/* Markalar bölümü boşluğunu kaldır - SADECE MANUFACTURERS */
.module-manufacturers .swiper,
.module-manufacturers .swiper-container,
.manufacturers-default .swiper {
    min-height: auto !important;
}

/* Header için sabit yükseklik */
header,
.top-bar,
.header-main {
    contain: layout;
}

/* Sidebar için minimum genişlik */
.column-left,
.column-right,
#column-left,
#column-right {
    min-width: 200px;
}

/* Google Fonts yüklenirken fallback */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
a {
    font-synthesis: none;
    text-rendering: optimizeSpeed;
}

/* ===== Lightning Cache Uyumluluk - Review Links ===== */
/* Lightning kritik CSS algoritması bu elementleri atlıyor, bu yüzden özel stil gerekiyor */
.review-links {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.review-links a {
    display: inline-block !important;
    visibility: visible !important;
    cursor: pointer !important;
}

.review-links b {
    display: inline-block !important;
}

/* ===== Mobilde Breadcrumb Tek Satır - Journal3 ===== */
@media (max-width: 1024px) {

    /* Wrapper container */
    .breadcrumbs {
        display: flex !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    /* UL - breadcrumb list */
    .breadcrumbs .breadcrumb,
    ul.breadcrumb {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 10px 15px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* LI items */
    .breadcrumbs .breadcrumb li,
    ul.breadcrumb li {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Links */
    .breadcrumbs .breadcrumb li a,
    ul.breadcrumb li a {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* ===== Mobil Header Üst Menü - Responsive Spacing ===== */
@media (max-width: 1024px) {

    /* Mobil top bar - yüksek specificity */
    html body .mobile-top-bar,
    html body .mobile-header .mobile-top-bar {
        width: 100% !important;
        padding: 8px 5px !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
    }

    /* Menü wrapper - TAM GENİŞLİK */
    html body .mobile-top-menu-wrapper,
    html body .mobile-header .mobile-top-menu-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        flex: 1 1 100% !important;
    }

    /* Top menu container - .top-menu-13 spesifik hedefleme */
    html body .mobile-top-menu-wrapper .top-menu,
    html body .mobile-top-bar .top-menu,
    html body .top-menu,
    html body .top-menu-13,
    html body .mobile-top-menu-wrapper .top-menu-13 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* UL.j-menu - ana liste */
    html body .mobile-top-bar ul.j-menu,
    html body .mobile-header .mobile-top-bar ul.j-menu,
    html body .top-menu ul.j-menu,
    html body .mobile-top-bar .j-menu {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 5px !important;
        list-style: none !important;
    }

    /* Her menü öğesi LI */
    html body .mobile-top-bar .j-menu>li,
    html body .mobile-top-bar .j-menu>li.menu-item,
    html body .mobile-top-bar .j-menu>li.top-menu-item,
    html body .mobile-header .j-menu>li,
    html body .top-menu .j-menu>li {
        flex: 1 1 0 !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Linkler */
    html body .mobile-top-bar .j-menu>li>a,
    html body .mobile-header .j-menu>li>a,
    html body .top-menu .j-menu>li>a {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 5px 4px !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        font-size: 11px !important;
    }

    /* Link text */
    html body .mobile-top-bar .j-menu .links-text,
    html body .mobile-header .j-menu .links-text,
    html body .top-menu .j-menu .links-text {
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    /* İkonlar */
    html body .mobile-top-bar .j-menu li i,
    html body .mobile-top-bar .j-menu li svg,
    html body .mobile-header .j-menu li i,
    html body .top-menu .j-menu li i {
        font-size: 12px !important;
        width: 12px !important;
        height: 12px !important;
        margin-right: 3px !important;
    }
}

/* ===== Form Validation Hata Stilleri - Journal 3 Checkout ===== */
/* Journal 3, .has-error yerine .text-danger div'leri ekliyor */
/* NOT: Bu kurallar SADECE checkout sayfası için - diğer sayfalarda tetiklenmemeli */
/* Çözüm: is-invalid class'ını hedefliyoruz (JS tarafından eklenir) */

/* Input'lara is-invalid class'ı eklendiğinde kırmızı border */
.form-control.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.3) !important;
}

/* Focus durumunda daha koyu kırmızı */
.form-control.is-invalid:focus {
    border-color: #c82333 !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.5) !important;
}

/* QuickCheckout spesifik - :has() sadece checkout container'ında çalışsın */
#quickcheckout .required:has(.text-danger:not(:empty)) .form-control,
#quickcheckout .form-group:has(.text-danger:not(:empty)) .form-control,
.quickcheckout-content .required:has(.text-danger:not(:empty)) .form-control,
.quickcheckout-content .form-group:has(.text-danger:not(:empty)) .form-control {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.3) !important;
}

/* QuickCheckout - hatalı alan etiketi kırmızı */
#quickcheckout .required:has(.text-danger:not(:empty)) label,
#quickcheckout .form-group:has(.text-danger:not(:empty)) label,
.quickcheckout-content .required:has(.text-danger:not(:empty)) label,
.quickcheckout-content .form-group:has(.text-danger:not(:empty)) label {
    color: #dc3545 !important;
}

/* Sözleşme checkbox alanı hatası - sadece checkout için */
#quickcheckout .agree:has(.text-danger:not(:empty)),
#quickcheckout .section-terms:has(.text-danger:not(:empty)),
.quickcheckout-content .agree:has(.text-danger:not(:empty)),
.quickcheckout-content .section-terms:has(.text-danger:not(:empty)),
.checkout-agreement.has-error {
    border: 2px solid #dc3545 !important;
    padding: 10px !important;
    border-radius: 5px !important;
    background-color: #fff5f5 !important;
}

/* Hata mesajı stili */
/* NOT: .invalid-feedback Bootstrap tarafından yönetilir - zorla gösterme */
/* Sadece renk ve font ayarları, display değiştirme */
.text-danger {
    color: #dc3545 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* invalid-feedback'i Bootstrap yönetsin, biz sadece renkleri özelleştirelim */
/* Bootstrap şu durumda gösterir: .was-validated veya sibling input.is-invalid */
.invalid-feedback {
    color: #dc3545 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    /* display: Bootstrap tarafından kontrol edilir, dokunma! */
}

/* Checkout ve diğer AJAX formları için - JavaScript hata eklediğinde göster */
/* JS, input'a is-invalid ekler veya div'i doğrudan gösterir */
.form-control.is-invalid~.invalid-feedback,
.was-validated .form-control:invalid~.invalid-feedback {
    display: block !important;
}

/* Fallback: has-error class varsa (bazı formlar için) */
.has-error .form-control,
.form-group.has-error .form-control {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5 !important;
}

/* Dikkat çekme animasyonu */
@keyframes errorShake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-3px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(3px);
    }
}

.required:has(.text-danger) .form-control,
.form-group:has(.text-danger) .form-control {
    animation: errorShake 0.4s ease-in-out;
}

/* Alert mesajlarını daha belirgin yap */
.alert-danger {
    border: 2px solid #dc3545 !important;
    background-color: #f8d7da !important;
    color: #721c24 !important;
    font-weight: 500 !important;
}

/* ===== Üyelik Sözleşmesi Checkbox Alanı ===== */
/* Sayfa başında "Üyelik Sözleşmesi kabul etmelisiniz" uyarısı varsa checkbox'ı işaretle */
/* Checkbox container - #agree-reg'in parent div'i */
.col-xs-12:has(#agree-reg) {
    transition: all 0.3s ease;
}

/* Uyarı varken checkbox alanını kırmızı yap */
body:has(.alert-danger) .col-xs-12:has(#agree-reg),
body:has(#warning-messages .alert) .col-xs-12:has(#agree-reg) {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5 !important;
    border-radius: 5px !important;
    padding: 10px !important;
    margin: 10px 0 !important;
}

/* Checkbox label'ı kırmızı yap */
body:has(.alert-danger) label[for="agree-reg"],
body:has(#warning-messages .alert) label[for="agree-reg"] {
    color: #dc3545 !important;
}

/* ===== Mesafeli Satış Sözleşmesi Checkbox ===== */
/* Bu alan .terms div içinde, uyarı #warning-messages .alert-danger içinde */
.terms {
    transition: all 0.3s ease;
}

/* Uyarı varken .terms alanını kırmızı çerçevele */
body:has(.alert-danger) .terms,
body:has(#warning-messages .alert) .terms,
body:has(.quickcheckout-content .alert) .terms {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5 !important;
    border-radius: 5px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
}

/* Terms içindeki label'ı kırmızı yap */
body:has(.alert-danger) .terms label,
body:has(#warning-messages .alert) .terms label {
    color: #dc3545 !important;
}

/* Terms içindeki checkbox'u da kırmızı outline ver */
body:has(.alert-danger) .terms input[type="checkbox"],
body:has(#warning-messages .alert) .terms input[type="checkbox"] {
    outline: 2px solid #dc3545 !important;
    outline-offset: 2px !important;
}