/* === GENEL DEĞİŞKENLER VE TEMEL STİLLER === */
html, body {
    overflow-x: hidden;
}

:root {
    --dln-primary-blue: #0077b6;
    --dln-secondary-blue: #00b4d8;
    --dln-dark-blue: #03045e;
    --dln-light-blue: #ade8f4;
    --dln-text-light: #ffffff;
    --dln-text-dark: #333333;
    --dln-text-muted: #6c757d;
    --dln-border-color: #dee2e6;
    --dln-sea-green: #90e0ef;
    --dln-sand: #f0f8ff;
    --dln-danger: #dc3545;
}

html {
    font-size: 12px;
}

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: var(--dln-text-dark);
    background-color: var(--dln-sand);
    padding-top: 165px;
}

/* === SAYFA YERLEŞİMİ STİLLERİ === */
.dln-page-container {
    /* display: grid;
    grid-template-columns: 280px 1fr;
    gap:110px;
    max-width: 1600px;
    margin: 20px auto 0 auto;
    padding: 0 15px;*/
    /* Bu, sayfamızın ana konteyneridir, Bootstrap'in .container sınıfı gibi davranır */
    max-width: 1600px; /* Sitenizin maksimum genişliği */
    margin: 20px auto 0 auto; /* Üstten boşluk ve otomatik ortalama */
    padding: 0 15px; /* Kenar boşlukları */
    /* display: grid; ve gap; satırlarını kaldırdık */
    /* Artık Bootstrap'in .row ve .col-* sınıflarını kullanacağız */
}

/* GÜNCELLENEN KURAL: Sidebar artık kullanılmıyor, gizleyebiliriz veya silebiliriz. Şimdilik burada kalabilir. */
#dln-sidebar .dln-sidebar-inner {
    max-height: calc(100vh - 185px);
    overflow-y: auto;
    padding: 15px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--dln-border-color);
}

.dln-sidebar-title {
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--dln-border-color);
    color: var(--dln-dark-blue);
}

/* Header/Footer içindeki sarmalayıcı */
.dln-main-wrapper {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

a {
    text-decoration: none;
    color: var(--dln-primary-blue);
}

    a:hover {
        color: var(--dln-dark-blue);
    }

/* === HEADER BÖLÜMÜ === */
.dln-header.fixed-top {
    z-index: 1030;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

.dln-top-bar {
    background-color: var(--dln-light-blue);
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--dln-border-color);
}

    .dln-top-bar a {
        color: var(--dln-dark-blue);
        margin-right: 15px;
        transition: color 0.2s ease;
    }

    .dln-top-bar .dln-user-actions a,
    .dln-top-bar .dln-user-actions .dropdown-toggle {
        color: var(--dln-dark-blue);
    }

    .dln-top-bar a:hover {
        color: var(--dln-primary-blue);
    }

    .dln-top-bar i {
        margin-right: 5px;
    }

.dln-separator {
    color: var(--dln-text-muted);
    margin: 0 5px;
}

.dln-main-header {
    padding: 1.5rem 0;
}

/* === DEĞİŞİKLİK BURADA === */
.dln-logo-area {
    display: flex;
    flex-direction: column; /* Öğeleri alt alta sırala */
    align-items: flex-start; /* Sola hizala */
}

    /* === DEĞİŞİKLİK BURADA === */
    .dln-logo-area img {
        max-height: 50px;
        margin-bottom: 5px; /* Alt boşluk ver */
        margin-right: 0; /* Sağ boşluğu kaldır */
    }

.dln-company-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dln-dark-blue);
    letter-spacing: 0.5px;
}

.dln-header-icon {
    display: flex;
    align-items: center;
    color: var(--dln-text-dark);
    margin-left: 20px;
    position: relative;
}

    .dln-header-icon i {
        font-size: 1.5rem;
        color: var(--dln-text-muted);
    }

    .dln-header-icon span {
        margin-left: 8px;
        font-size: 0.9rem;
    }

    .dln-header-icon .badge {
        position: absolute;
        top: -5px;
        right: -10px;
    }

/* === ANA MENÜ BARI === */
.dln-menu-bar {
    background-color: var(--dln-dark-blue);
    padding: 0;
}
/* Yeni Kategori Barı için Stiller */
.dln-category-bar {
    background-color: var(--dln-secondary-blue);
    padding: 0;
    border-bottom: 1px solid var(--dln-dark-blue);
}

/* --- YENİ KATEGORİ STİLLERİ --- */
.dln-category-dropdown .btn {
    background-color: var(--dln-primary-blue);
    color: var(--dln-text-light);
    border: none;
    border-radius: 0;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    width: 377px; /* Butonun genişliğini ayarladık */
    text-align: left; /* Yazıyı sola yasladık */
}

    .dln-category-dropdown .btn:hover {
        background-color: var(--dln-secondary-blue);
    }

.dln-category-dropdown .dropdown-menu {
    border-radius: 0;
    border: none;
    margin-top: 0;
    padding: 0; /* İç boşlukları sıfırladık */
}

#category-dropdown-menu {
    max-height: 75vh;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

    #category-dropdown-menu::-webkit-scrollbar {
        width: 8px;
        background-color: transparent;
    }

    #category-dropdown-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    #category-dropdown-menu::-webkit-scrollbar-thumb {
        background-color: transparent;
        border-radius: 4px;
    }

    #category-dropdown-menu:hover::-webkit-scrollbar-thumb {
        background-color: #ccc;
    }

    /*
  Kategori menüsü stilleri (_CategoryMenuItemPartial.cshtml'deki .nav-link yapısına göre güncellendi)
  Mobil menü (#mobile-category-menu) için de aynı kurallar geçerli kılındı.
*/
    #category-dropdown-menu .nav-link,
    #mobile-category-menu .nav-link {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        transition: all 0.2s ease;
        border-radius: 4px; /* Hafif ovallik */
        margin: 2px 4px; /* Öğeler arası boşluk */
        padding-left: 1.5rem; /* Genel iç boşluk */
    }

        /* 1. Ana Kategori (Varsayılan) */
        #category-dropdown-menu .nav-link[data-bs-toggle="collapse"],
        #mobile-category-menu .nav-link[data-bs-toggle="collapse"] {
            color: var(--dln-dark-blue);
            font-weight: 600;
        }

    /* 2. Alt Kategori (Varsayılan) */
    #category-dropdown-menu .collapse .nav-link,
    #mobile-category-menu .collapse .nav-link {
        color: var(--dln-primary-blue);
        font-weight: 400;
        font-size:0.9rem;
    }

    /* 3. Seçili Alt Kategori (Aktif) */
    #category-dropdown-menu .nav-link.active,
    #mobile-category-menu .nav-link.active {
        color: var(--dln-danger); /* İstenen kırmızı renk */
        font-weight: 600;
        background-color: rgba(220, 53, 69, 0.05); /* Çok hafif kırmızı arka plan */
    }

    /* 4. Açık Olan Ana Kategori */
    #category-dropdown-menu .nav-link[data-bs-toggle="collapse"]:not(.collapsed),
    #mobile-category-menu .nav-link[data-bs-toggle="collapse"]:not(.collapsed) {
        color: var(--dln-danger); /* İstenen kırmızı renk */
        background-color: rgba(220, 53, 69, 0.03); /* Çok hafif kırmızı arka plan */
    }

    /* 5. Alt Kategori İndentasyonu (Sağa Kaydırma) */
    #category-dropdown-menu .collapse .nav.ms-3,
    #mobile-category-menu .collapse .nav.ms-3 {
        margin-left: 1.75rem !important; /* Bootstrap'in ms-3 (1rem) sınıfını ezer */
    }

    /* Hover Efektleri */
    #category-dropdown-menu .nav-link:not(.active):hover,
    #mobile-category-menu .nav-link:not(.active):hover {
        color: var(--dln-dark-blue);
        background-color: var(--dln-sand);
    }

/* --- KATEGORİ STİLLERİNİN SONU --- */

.dln-main-nav {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .dln-main-nav li a {
        color: var(--dln-text-light);
        padding: 1rem 1.2rem;
        display: block;
        font-size: 1rem;
        font-weight: 500;
        transition: background-color 0.2s ease;
    }

        .dln-main-nav li a:hover {
            background-color: var(--dln-primary-blue);
        }

.dln-menu-bar .d-flex {
    justify-content: space-between;
}

.dln-menu-center {
    flex-grow: 1;
    display: flex;
    /* justify-content: center; Bu satır hizalamayı bozabilir, esnek bırakıyoruz */
}

.dln-menu-right {
    display: flex;
    align-items: center;
    color: var(--dln-text-light);
}

/* === FOOTER BÖLÜMÜ === */
.dln-footer {
    background-color: #eaf4f4;
    color: var(--dln-text-dark);
    padding: 4rem 0 1rem 0;
    border-top: 5px solid var(--dln-secondary-blue);
    margin-top: 2rem;
}

    .dln-footer .dln-logo-area {
        margin-bottom: 1rem;
    }

.dln-footer-about {
    color: var(--dln-text-muted);
    font-size: 0.9rem;
}

.dln-footer h5 {
    color: var(--dln-primary-blue);
    font-weight: 600;
    margin-bottom: 1.2rem;
}

.dln-footer .list-unstyled li {
    margin-bottom: 0.7rem;
}

.dln-footer .list-unstyled a {
    color: var(--dln-text-muted);
    transition: color 0.2s ease, padding-left 0.2s ease;
}

    .dln-footer .list-unstyled a:hover {
        color: var(--dln-primary-blue);
        padding-left: 5px;
    }

.dln-social-icons {
    display: flex;
    padding: 0;
    margin-top: 1.5rem;
}

    .dln-social-icons a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--dln-primary-blue);
        color: var(--dln-text-light);
        border-radius: 50%;
        margin-right: 10px;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

        .dln-social-icons a:hover {
            background-color: var(--dln-dark-blue);
            transform: translateY(-3px);
        }

.dln-footer-bottom {
    border-top: 1px solid var(--dln-border-color);
    padding-top: 1rem;
    margin-top: 2rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--dln-text-muted);
}

/* === BİLEŞEN VE ÖZEL ALAN STİLLERİ === */
#slider-row {
    margin-bottom: 2rem;
}

#main-slider.carousel {
    height: 400px;
    border-radius: .375rem;
    overflow: hidden;
    background-color: #fff;
}

#main-slider .carousel-item, #main-slider .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

#main-slider .carousel-caption h5 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.dln-flag-icon {
    width: 20px;
    height: 15px;
    margin-right: 8px;
    border: 1px solid #ccc;
    vertical-align: middle;
}

.dln-accordion-icon {
    font-size: 1.1em;
    margin-top: 4px;
    transition: color 0.3s ease, transform 0.3s ease;
}

    .dln-accordion-icon.fa-square-plus {
        color: #198754;
    }

    .dln-accordion-icon.fa-square-minus {
        color: #dc3545;
        transform: rotate(180deg);
    }

/* === ÜRÜN KARTI STİLLERİ (DENİZ TONLARI İLE) === */
.product-card {
    border: 1px solid var(--dln-sea-green);
    border-radius: .5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .1);
    }

    .product-card .product-media {
        position: relative;
        overflow: hidden;
        width: 200px;
        height: 150px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
    }

        .product-card .product-media img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    .product-card .card-body {
        text-align: center;
        padding: 1rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

.product-stock-code {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dln-text-muted);
    text-align: center;
    margin-bottom: 0.75rem;
    background-color: var(--dln-sand);
    padding: 4px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .05);
}

.product-brand {
    font-size: 0.8rem;
    color: var(--dln-secondary-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.product-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0;
}

    .product-title a {
        color: var(--dln-dark-blue);
    }

        .product-title a:hover {
            color: var(--dln-primary-blue);
        }

.product-category {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 0.75rem;
}

.price-container {
    margin-top: auto;
    padding-top: 1rem;
    margin-bottom: 0.25rem;
}

.original-price {
    font-size: 0.9rem;
    color: var(--dln-text-muted);
    margin-right: 8px;
    font-weight: 500;
    text-decoration: line-through;
}

.try-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dln-danger);
}

.tax-info {
    font-size: 0.7rem;
    color: #aaa;
}

.product-action-vertical {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

.product-card:hover .product-action-vertical {
    opacity: 1;
    transform: translateX(0);
}

.btn-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #fff;
    color: var(--dln-text-dark);
    border-radius: 50%;
    margin-bottom: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-size: 0.9rem;
}

    .btn-product-icon:hover {
        background-color: var(--dln-primary-blue);
        color: #fff;
    }

/* Kategori Sayfası Breadcrumb */
.breadcrumb-container {
    padding: 0 0 1rem 0;
    font-size: 1.5rem;
}

.breadcrumb-parent {
    color: var(--dln-text-muted);
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: #ccc;
}

.breadcrumb-child {
    color: var(--dln-text-dark);
    font-weight: 600;
}

/* RTL UYUMLULUK STİLLERİ */
[dir="rtl"] .dln-page-container {
    direction: rtl;
}

[dir="rtl"] .dln-main-nav {
    margin-right: 20px;
    margin-left: 0;
}

[dir="rtl"] .dln-header-icon {
    margin-right: 20px;
    margin-left: 0;
}

[dir="rtl"] .dln-social-icons a {
    margin-left: 10px;
    margin-right: 0;
}

[dir="rtl"] .dln-flag-icon {
    margin-left: 8px;
    margin-right: 0;
}

[dir="rtl"] .dln-top-bar a {
    margin-left: 15px;
    margin-right: 0;
}

/* MOBİL MENÜ STİLLERİ */
.dln-mobile-nav-toggle {
    /* display: none; Bu satırı siliyoruz, Bootstrap kontrol edecek */
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dln-text-light);
    padding: 0.5rem 1rem;
}

.dln-mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .dln-mobile-nav-overlay.show {
        opacity: 1;
        visibility: visible;
    }

.dln-mobile-nav-wrapper {
    position: fixed;
    top: 0;
    left: -320px;
    width: 320px;
    height: 100%;
    background-color: #ffffff;
    z-index: 1045;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

[dir="rtl"] .dln-mobile-nav-wrapper {
    left: auto;
    right: -320px;
    transition: right 0.3s ease;
}

.dln-mobile-nav-overlay.show .dln-mobile-nav-wrapper {
    left: 0;
}

[dir="rtl"] .dln-mobile-nav-overlay.show .dln-mobile-nav-wrapper {
    right: 0;
}

.dln-mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--dln-dark-blue);
    color: var(--dln-text-light);
}

    .dln-mobile-nav-header h5 {
        margin: 0;
        font-size: 1.1rem;
    }

#mobile-nav-close-btn {
    background: none;
    border: none;
    color: var(--dln-text-light);
    font-size: 1.5rem;
    cursor: pointer;
}

.dln-mobile-nav-content {
    flex-grow: 1;
    overflow-y: auto;
}

#mobile-category-menu {
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}

@media (max-width: 992px) {
    .dln-menu-center {
        display: none !important;
    }
}
/* === ÜRÜN DETAY SAYFASI STİLLERİ (GÜNCELLENMİŞ ZOOM) === */
.product-detail-container {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(3, 4, 94, 0.08);
}

/* Ürün Detay Sayfası Ana Resim Zoom Efekti */
.main-image-container {
    /* overflow: hidden; KURALINI KALDIRDIK */
    position: relative; /* z-index'in çalışması için gerekli */
    z-index: 1; /* Normal durumdaki sıralaması */
    border-radius: .375rem;
}

    .main-image-container img {
        transition: transform 0.4s ease, box-shadow 0.4s ease; /* Yumuşak geçiş efekti */
    }

    .main-image-container:hover {
        z-index: 1100; /* Hover durumunda diğer elemanların üzerine çıkması için */
    }

        .main-image-container:hover img {
            transform: scale(1.3); /* Büyütme oranı */
            box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Efekti güçlendirmek için gölge */
        }


/* =================================================================== */
/* ANA SAYFA YÜRÜYEN SLAYT STİLLERİ (GÜVENLİ VE İZOLE EDİLMİŞ) */
/* =================================================================== */

.ticker-row {
    margin-bottom: 2rem;
}

.ticker-container {
    width: 100%;
    overflow: hidden;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 10px 0;
    box-sizing: border-box;
}

.ticker-content {
    display: flex;
    width: fit-content;
    animation: ticker-animation 60s linear infinite;
}

.ticker-container:hover .ticker-content {
    animation-play-state: paused;
}

.ticker-item {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    text-decoration: none;
    color: #212529;
    flex-shrink: 0;
}

    .ticker-item:hover {
        background-color: #e9ecef;
    }

    .ticker-item img {
        width: 50px;
        height: 50px;
        object-fit: contain;
        margin-right: 15px;
    }

.ticker-item-text .name {
    font-weight: 600;
    white-space: nowrap;
}

.ticker-item-text .slogan {
    font-size: 0.85em;
    color: #6c757d;
    white-space: nowrap;
}

@@keyframes ticker-animation {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}
/* ============================================= */
/* SONSUZ KAYAN ÜRÜN BANDI (MARQUEE)     */
/* ============================================= */

/* 1. Görünür Alanı Tanımla */
.slider-container {
    overflow: hidden; /* Dışarı taşanları gizle */
    padding: 10px 0;
    position: relative;
    width: 100%;
}

    /* Fare üzerine gelince animasyonu durdurmak için */
    .slider-container:hover .slider-track {
        animation-play-state: paused;
    }

/* 2. Kayan Şeridi Hazırla */
.slider-track {
    display: flex; /* Öğeleri yan yana diz */
    /* Animasyon: animasyon_adi sure tipi sonsuz_mu */
    animation: marquee-scroll 40s linear infinite;
    width: fit-content; /* İçeriği kadar genişle */
}

/* 3. Şeridin İçindeki Her Bir Ürün */
.slide-item {
    flex-shrink: 0; /* Öğelerin küçülmesini engelle */
    width: 250px; /* Her bir ürünün genişliği */
    margin: 0 15px; /* Ürünler arası boşluk */
}

/* Ürün kartı içindeki resmin oranını koru */
.slider-product-image {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 10px;
}

/* 4. Animasyonun Kendisi (Keyframes) */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        /* %50 kaydır çünkü JS ile listeyi kopyalayıp 2 katına çıkaracağız */
        transform: translateX(-50%);
    }
}


/* ============================================= */
/* AJAX ARAMA ÖNERİLERİ STİLLERİ (GÜNCELLENDİ) */
/* ============================================= */

#search-suggestions-container {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 1px solid var(--dln-border-color);
    border-top: none;
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.suggestion-item {
    display: flex;
    align-items: flex-start; /* Dikeyde başa hizala */
    padding: 10px 15px;
    text-decoration: none;
    color: var(--dln-text-dark);
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

    .suggestion-item:last-child {
        border-bottom: none;
    }

    .suggestion-item:hover {
        background-color: var(--dln-sand);
    }

.suggestion-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-right: 15px;
    border: 1px solid var(--dln-border-color);
    border-radius: 4px;
    flex-shrink: 0; /* Resmin büzülmesini engelle */
}

/* Ürün adı ve stok kodunu saran wrapper */
.suggestion-details {
    display: flex;
    flex-direction: column; /* Alt alta diz */
    justify-content: center;
    min-height: 50px; /* Resimle aynı hizada ortalamak için */
}

/* Stok kodu stili */
.suggestion-stockcode {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dln-primary-blue); /* Mavi renk */
    margin-bottom: 4px;
}

.suggestion-name {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3; /* Satır yüksekliği */
}

.suggestion-no-result {
    padding: 15px;
    text-align: center;
    color: var(--dln-text-muted);
    font-style: italic;
}
/* ====================================================== */
/* SONSUZ KAYAN SLIDER (CSS ANIMATION) */
/* ====================================================== */

/* 1. Kayan şeridin görüneceği alanı tanımlar ve taşanları gizler */
.slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* 2. Pist (track), tüm ürünleri (orijinal + klon) yan yana dizer */
.slider-track {
    display: flex;
    /* Aşağıdaki 3 satır animasyonun kalbidir.
       Model'deki ürün sayısını bilmediğimiz için 'width' ve 'translateX' değerlerini
       JavaScript ile dinamik olarak ayarlamak en doğrusudur.
       Bu yüzden marquee eklentisini kullanmak en basit yoldu.

       Ama CSS ile zorlayacaksak, 'slide-item'a sabit bir genişlik vermelisiniz.
    */
}

/* 3. Her bir ürün kartının kaplayacağı alan */
.slide-item {
    flex-shrink: 0;
    width: 250px; /* VEYA: 20%; (Ekranda 5 ürün görünecekse) */
    padding: 0 10px;
    box-sizing: border-box;
}

.slider-product-image {
    height: 180px; /* Resimlerin boyunu eşitle */
    object-fit: contain; /* Resmin tamamını göster, kırpma */
}

/* 4. ANİMASYON: 
   Bu CSS, pistin (track) genişliğini BİLMEK ZORUNDADIR. 
   Eğer Model'de 10 ürün varsa, animasyonun -2500px (10 * 250px) gitmesi gerekir.
   
   Bu nedenle, bu yapıda en iyi çözüm, daha önce `_Layout.cshtml` dosyanıza
   eklediğimiz `jquery.marquee.js` eklentisini kullanmaktır.
*/
/* Footer'daki 'Hesabım' menüsünü disable etmek için */
.disabled-footer-menu {
    opacity: 0.6; /* Linkleri soluklaştırır */
}

    .disabled-footer-menu li a {
        pointer-events: none; /* Tıklamayı engeller */
        cursor: default;
        text-decoration: none; /* Alt çizgiyi kaldırır (hover dahil) */
    }
/* Kısmi footer menü linklerini disable etmek için */
.disabled-menu-item {
    opacity: 0.6; /* Soluklaştırır */
}

    .disabled-menu-item a {
        pointer-events: none; /* Tıklamayı engeller */
        cursor: default;
        text-decoration: none; /* Varsa hover alt çizgisini kaldırır */
    }

/* ============================================= */
/* KATEGORİ MENÜSÜ DISABLED LİNK STİLİ     */
/* ============================================= */

#category-dropdown-menu .nav-link.disabled,
#mobile-category-menu .nav-link.disabled {
    color: #adb5bd; /* Soluk renk */
    pointer-events: none; /* Tıklamayı engeller */
    cursor: not-allowed; /* "İzin verilmiyor" imleci */
    background-color: transparent;
}

/* ============================================= */
/* WHATSAPP FLOAT BUTONU STİLLERİ       */
/* ============================================= */
/* ============================================= */
/* WHATSAPP FLOAT BUTONU STİLLERİ (YENİ) */
/* ============================================= */
.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 1000;
    background-color: #25D366;
    color: #FFF;
    padding: 12px 24px;
    border-radius: 30px;
    /* ÖNEMLİ: display:flex; JavaScript tarafından eklenecek,
       ama HTML'de 'display:none;' olarak kalmalı */

    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    animation: blinker 2s infinite;
}

    .whatsapp-float:hover {
        color: #FFF;
        transform: scale(1.05);
        box-shadow: 4px 4px 15px rgba(0,0,0,0.3);
        animation-play-state: paused;
    }

    /* İkonun stilini belirler */
    .whatsapp-float i {
        /* 1. Font Awesome font ailesini geri yükle (CSS çakışmasını çözmek için) */
        font-family: "Font Awesome 6 Brands";
        /* 2. Font Awesome font ağırlığını geri yükle ('bold' mirasını kırmak için) */
        font-weight: 400; /* 'normal' ile aynıdır */
        /* 3. Diğer stilleriniz (bunlar zaten vardı) */
        font-size: 28px;
        margin-right: 10px;
    }

/* YENİ: Eksik 'blinker' animasyonunu ekledik */
@keyframes blinker {
    50% {
        opacity: 0.8;
        box-shadow: 3px 3px 12px rgba(0,0,0,0.25);
    }
}

/* RTL (Arapça vb.) diller için konum */
[dir="rtl"] .whatsapp-float {
    right: auto;
    left: 25px;
}