/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
    --header-height: 2.5rem;
    /*========== Colors ==========*/
    --black-color: hsl(220, 24%, 12%);
    --black-color-light: hsl(220, 24%, 15%);
    --black-color-lighten: hsl(220, 20%, 18%);
    --white-color: #fff;
    --body-color: hsl(220, 100%, 97%);
    /*--body-color: #000814;*/
    --body-font: "Montserrat", sans-serif;
    --normal-font-size: .938rem;
    /*========== Font weight ==========*/
    --font-regular: 400;
    --font-semi-bold: 600;
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --poppins: 'Poppins', sans-serif;
    --lato: 'Lato', sans-serif;
    --segoe: 'Segoe UI', sans-serif;
    --light: #F9F9F9;
    --blue: #3C91E6;
    --light-blue: #CFE8FF;
    --grey: #eee;
    --dark-grey: #AAAAAA;
    --dark: #342E37;
    --red: #DB504A;
    --yellow: #FFCE26;
    --light-yellow: #FFF2C6;
    --orange: #FD7238;
    --light-orange: #FFE0D3;
    --primary-color: #337ab7;
    --royalblue-color: #0056b3;
    --inactive-color: #e9ecef;
    --completed-color: #65be8f;
    --info-color: #fcffd2;
    --white-color: #fff;
    --whitesmoke-color: #f8f9fa;
    --darkslategray-color: #333;
    --dimgray-color: #666;
    --lightgray-color: #d3d3d3;
    --gainsboro-color: #ddd;
    --crimson-color: #dc3545;
    --snow-color: #fff3f3;
    --forestgreen-color: #198754;
    --gold-color: #ffc107;
    --darkgoldenrod-color: #856404;
    --green: #04a029;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1024px) {
    :root {
        --normal-font-size: 1rem;
    }
}

/*=============== BASE ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    /*background-color: var(--body-color);*/
    padding-top: var(--header-height);
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('../img/login-img.png');
    background-repeat: repeat;
    background-size: cover;
    background-color: #f8f9fa;
}

ul {
    list-style: none;
    /* Color highlighting when pressed on mobile devices */
    /*-webkit-tap-highlight-color: transparent;*/
}

a {
    text-decoration: none;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
    max-width: 1120px;
    margin-inline: 1.5rem;
}

/*=============== HEADER ===============*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /*background-color: var(--black-color);*/
    background-color: #f8f9fa !important;
    box-shadow: 0 2px 16px hsla(220, 32%, 8%, .3);
    z-index: var(--z-fixed);
}

/*=============== NAV ===============*/
.nav {
    height: var(--header-height);
}

.nav__logo,
.nav__burger,
.nav__close {
    color: #dc3545 !important;
}

.nav__data {
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
}

.nav__end {
    height: 100%;
    display: flex !important;
    justify-content: right;
    align-items: center;
}

.nav__logo {
    display: inline-flex;
    align-items: center;
    column-gap: .25rem;
    font-weight: var(--font-semi-bold);
    color: #dc3545 !important;
    /* Color highlighting when pressed on mobile devices */
    /*-webkit-tap-highlight-color: transparent;*/
}

    .nav__logo i {
        font-weight: initial;
        font-size: 1.25rem;
        color: #dc3545 !important;
    }

.nav__toggle {
    position: relative;
    width: 32px;
    height: 32px;
}

.nav__burger,
.nav__close {
    position: absolute;
    width: max-content;
    height: max-content;
    inset: 0;
    margin: auto;
    font-size: 1.25rem;
    cursor: pointer;
    transition: opacity .1s, transform .4s;
}

.nav__close {
    opacity: 0;
}

/* Navigation for mobile devices */
@media screen and (max-width: 1118px) {
    .nav__menu {
        position: absolute;
        left: 0;
        /*top: 2.5rem;*/
        top: var(--header-height); /* 2.5rem zaten, ama daha tutarlı */
        width: 100%;
        height: calc(100vh - 3.5rem);
        overflow: auto;
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
    }

        .nav__menu::-webkit-scrollbar {
            width: 0;
        }

    .nav__list {
        /*background-color: var(--black-color);*/
        background-color: #001129;
        padding-top: 1rem;
    }
}

.nav__link {
    color: var(--white-color) !important;
    /*background-color: var(--black-color);*/
    background-color: #001129;
    font-weight: var(--font-semi-bold);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s;
    font-size: 0.8rem;
}

    .nav__link:hover {
        background-color: var(--black-color-light);
    }

/* Show menu */
.show-menu {
    opacity: 1;
    top: 3.5rem;
    pointer-events: initial;
}

/* Show icon */
.show-icon .nav__burger {
    opacity: 0;
    transform: rotate(90deg);
}

.show-icon .nav__close {
    opacity: 1;
    transform: rotate(90deg);
}

/*=============== DROPDOWN ===============*/
.dropdown__item {
    cursor: pointer;
}

.dropdown__arrow {
    font-size: 1.25rem;
    font-weight: initial;
    transition: transform .4s;
}

.dropdown__link,
.dropdown__sublink {
    padding: 1.25rem 1.25rem 1.25rem 2.5rem;
    color: var(--white-color) !important;
    background-color: var(--black-color-light);
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-weight: var(--font-semi-bold);
    transition: background-color .3s;
}

    .dropdown__link i,
    .dropdown__sublink i {
        font-size: 1.25rem;
        font-weight: initial;
    }

    .dropdown__link:hover,
    .dropdown__sublink:hover {
        background-color: var(--black-color);
    }

.dropdown__menu,
.dropdown__submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-out;
}

/* Show dropdown menu & submenu */
.dropdown__item:hover .dropdown__menu,
.dropdown__subitem:hover > .dropdown__submenu {
    max-height: 1000px;
    transition: max-height .4s ease-in;
}

/* Rotate dropdown icon */
.dropdown__item:hover .dropdown__arrow {
    transform: rotate(180deg);
}

/*=============== DROPDOWN SUBMENU ===============*/
.dropdown__add {
    margin-left: auto;
}

.dropdown__sublink {
    background-color: var(--black-color-lighten);
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
    .container {
        margin-inline: 1rem;
    }

    .nav__link {
        padding-inline: 1rem;
    }
}

/* For large devices */
@media screen and (min-width: 1118px) {
    .container {
        margin-inline: auto;
    }

    .nav {
        height: calc(var(--header-height) + 2rem);
        display: flex;
        justify-content: space-between;
    }

    .nav__toggle {
        display: none;
    }

    .nav__list {
        height: 100%;
        display: flex;
        column-gap: 3rem;
    }

    .nav__link {
        height: 100%;
        padding: 0;
        justify-content: initial;
        column-gap: .25rem;
    }

        .nav__link:hover {
            background-color: transparent;
        }

    .dropdown__item,
    .dropdown__subitem {
        position: relative;
    }

    .dropdown__menu,
    .dropdown__submenu {
        max-height: initial;
        overflow: initial;
        position: absolute;
        left: 0;
        /*top: 6rem;*/
        top: 3rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s, top .3s;
    }

    .dropdown__link,
    .dropdown__sublink {
        padding-inline: 1rem 3.5rem;
    }

    .dropdown__subitem .dropdown__link {
        padding-inline: 1rem;
    }

    .dropdown__submenu {
        position: absolute;
        left: 100%;
        /*top: .5rem;*/
        top: 0rem;
    }

    .dropdown__item:hover .dropdown__menu {
        opacity: 1;
        /*top: 5.5rem;*/
        top: 2.5rem;
        pointer-events: initial;
        transition: top .3s;
    }

    .dropdown__subitem:hover > .dropdown__submenu {
        opacity: 1;
        top: 0;
        pointer-events: initial;
        transition: top .3s;
    }
}

/*.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    background-color: var(--black-color);
    color: var(--white-color);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: var(--z-fixed);
    box-shadow: 0 -2px 16px hsla(220, 32%, 8%, .3);
}*/

main {
    /*padding-bottom: 3.5rem;*/ /* Footer için alt boşluk */
}

.nav__icon {
    color: var(--white-color);
    font-size: 1.25rem;
    cursor: pointer;
    margin-left: 1rem;
}

    .nav__link:hover, .nav__icon:hover, .nav__user:hover, .dropdown__link:hover, .dropdown__sublink:hover, .dropdown__link:hover, .nav__logo:hover, .nav__toggle:hover, .nav__burger:hover, .nav__close:hover {
        color: #00ffff !important; /* Parlak cyan */
    }

.dropdown__menu--right {
    right: 0;
    left: auto;
    min-width: 180px;
}

/* Kullanıcı menüsünde hover ile göster */
.nav__end:hover .dropdown__menu {
    opacity: 1;
    /*top: 3.5rem;*/ /* header yüksekliği */
    top: 2.5rem; /* header yüksekliği */
    pointer-events: initial;
    transition: top 0.3s ease, opacity 0.3s ease;
}

.dropdown__link {
    font-size: 0.8rem;
}

@media screen and (max-width: 768px) {

    /*.nav__end {
        position: relative;
    }

    .dropdown__menu {
        position: absolute;
        top: 100%;*/ /* ikonun hemen altına */
    /*left: auto;
        right: 0;
        z-index: var(--z-tooltip);
        opacity: 1;
        pointer-events: initial;
        transition: none;
    }

    .nav__end:hover .dropdown__menu {
        top: 100%;
    }*/

    /* Menü ikonunun hemen altından başlasın */
    .nav__menu {
        top: 100% !important;
    }

    .show-menu {
        top: 100% !important;
        opacity: 1;
        pointer-events: initial;
    }

    /* Kullanıcı menüsündeki dropdown da düzgün hizalansın */
    .nav__end:hover .dropdown__menu {
        top: 100% !important;
    }

    /* Alt menü görünümü düzgün konumda çıksın */
    .dropdown__submenu {
        left: 100%;
        top: 0 !important;
    }
    .nav-categories {
        display: none !important;
    }
    #categoryBurger {
        display: block !important;
    }
}

.contact-page h2 {
    font-weight: 600;
}

.info-card h5 {
    font-weight: 600;
    margin-top: 1rem;
}

.info-card a {
    color: #000;
    text-decoration: none;
}

    .info-card a:hover {
        color: #00e0ff;
    }

/* Form stili */
.contact-form label {
    font-weight: 600;
}

.contact-form button i {
    margin-right: 0.5rem;
}

.contact-form,
.info-card {
    border-radius: 0.5rem;
    background-color: white;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* daha belirgin */
    transition: box-shadow 0.3s ease;
}

    .contact-form:hover,
    .info-card:hover {
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2); /* hover'da biraz daha koyu ve geniş */
    }

.map-card:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2); /* hover'da biraz daha koyu ve geniş */
}

.map-card {
    flex-grow: 1;
    height: 100%;
    min-height: 200px; /* isteğe bağlı */
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* daha belirgin */
}

    .map-card iframe {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 8px;
    }
/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");

/*=============== ROOT VARIABLES ===============*/
:root {
    --header-height: 3.5rem;
    --black-color: hsl(220, 24%, 12%);
    --white-color: #fff;
    --body-color: #f8f9fa;
    --body-font: "Montserrat", sans-serif;
    --normal-font-size: 0.938rem;
    --font-regular: 400;
    --font-semi-bold: 600;
    --z-fixed: 100;
}

/*=============== BASE STYLES ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('../img/login-img.png');
    background-repeat: repeat;
    background-size: cover;
    background-color: var(--body-color);
    padding-top: 7rem; /* header yüksekliği kadar offset */
}

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

ul {
    list-style: none;
}

/*=============== HEADER STRUCTURE ===============*/
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #001129;
    z-index: var(--z-fixed);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* Top bar: logo + search + user */
.nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    color: var(--white-color);
    max-width: 1440px;
    margin: 0 auto;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #dc3545 !important;
    border: none;
    outline: none;
    box-shadow: none;
}

.nav-logo i {
    margin-right: 0.5rem;
    font-size: 1.5rem;
    color: #dc3545 !important;
}

.nav-logo:hover {
    color: #a32632 !important;
}

/* Search bar */
.nav-search {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 2rem;
    margin: 0 1rem;
    padding: 0.25rem 1rem;
    max-width: 600px;
}

    .nav-search input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 0.9rem;
        background: transparent;
    }

    .nav-search i {
        color: #001129;
        font-size: 1.2rem;
    }

/* User icon */
.nav-user .nav-icon {
    color: #dc3545 !important;
    font-size: 1.5rem;
    cursor: pointer;
}

    .nav-user .nav-icon:hover {
        color: #a32632 !important;
    }

/*=============== CATEGORIES BAR ===============*/
.nav-categories {
    width: 100%;
    padding: 0.5rem 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.category-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1rem;
    flex-wrap: nowrap;
}

.category-link {
    flex: 1;
    text-align: center;
    color: black !important;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 1.25rem;
    transition: background-color 0.3s, color 0.3s;
    background-color: transparent;
    white-space: nowrap;
    min-width: 80px;
    /*text-decoration: none;*/
}

    .category-link:hover {
        /*background-color: #00ffff;*/
        color: #dc3545 !important;
    }

/*=============== MAIN CONTENT PADDING ===============*/
main {
    /*padding-bottom: 3.5rem;*/
}


/* Mobil kategori dropdown */
.nav-categories-dropdown {
    background-color: #00203f;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.nav__link {
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.dropdown__menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background-color: #001129;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
}

.dropdown__item.active .dropdown__menu {
    max-height: 500px;
}

.dropdown__link {
    display: block;
    padding: 0.75rem 1rem;
    color: red; /* Kategori rengi kırmızı */
    font-size: 0.85rem;
    text-decoration: none;
    transition: background-color 0.3s;
}

    .dropdown__link:hover {
        background-color: #00ffff;
        color: #001129;
    }

/* Mobil kategori dropdown – sadece d-block d-md-none içindir */
/* MOBİL DROPDOWN */
.category-dropdown {
    background-color: #f8f9fa !important;
    padding: 0.5rem 1rem;
}

.category-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #e6e6e6;
    border-radius: 0.5rem;
}

.category-menu-item {
    display: block;
    padding: 0.75rem 1rem;
    color: black !important;
    font-size: 0.85rem;
    text-decoration: none;
}

    .category-menu-item:hover {
        background-color: #dc3545;
        color: #fff !important;
    }

#categoryBurger i {
    color: #dc3545 !important;
}

    #categoryBurger i:hover {
        color: #a32632 !important;
    }

/*============ DROPDOWN ============*/
.category-item {
    position: relative;
}

/* Dropdown paneli */
/*.mega-dropdown {
    position: fixed;*/ /* ekrana sabitle */
    /*top: 120px;*/ /* header’ın hemen altı, kendi header yüksekliğine göre ayarla */
    /*left: 50%;*/ /* ekran ortasına getir */
    /*transform: translateX(-50%);*/ /* tam ortala */
    /*width: 80%;*/ /* genişlik, istersen %100 yapabilirsin */
    /*max-width: 1200px;*/ /* çok devasa olmasın */
    /*background-color: #f8f9fa;
    padding: 2rem 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    border-radius: 0.5rem;
    display: none;*/ /* başta gizli */
    /*z-index: 999;
}*/

/* Hover olunca göster */
/*.category-item:hover .mega-dropdown {
    display: block;
}*/

/* Ürün grid */
/*.mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);*/ /* 4 sütun, her sütun eşit, tüm genişliği paylaşır */
    /*gap: 1rem;
}*/


/* Ürün kartı */
/*.product-card {
    background: #fff;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        cursor: pointer;
    }*/

.mega-dropdown {
    position: fixed;
    top: 120px; /* header’ın hemen altı */
    left: 0;
    width: 100vw; /* tüm ekran genişliği */
    background-color: #f8f9fa;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    border-radius: 0.5rem;
    display: none;
    z-index: 999;
}

/* hover olduğunda göster (JS ile de açabilirsin) */
.nav-categories:hover + .mega-dropdown {
    display: block;
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 eşit sütun */
    gap: 1rem;
    width: 100%; /* kapsayıcıyı doldur */
}

.product-card {
    background: #fff;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        cursor: pointer;
    }
.category-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #e6e6e6;
    border-radius: 0.5rem;
}

.category-menu-item-wrapper {
    border-bottom: 1px solid #ccc;
}

.category-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.submenu-toggle i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

/* alt menü */
.submenu {
    display: none;
    padding-left: 1rem;
    background: #f8f9fa;
}

    .submenu li {
        padding: 0.5rem 1rem;
        border-top: 1px solid #ddd;
        font-size: 0.85rem;
    }

.category-menu-item-wrapper.open .submenu {
    display: block;
}

.category-menu-item-wrapper.open .submenu-toggle i {
    transform: rotate(90deg);
}


.dropdown__menu,
.dropdown__link,
.dropdown__item,
.dropdown__arrow,
.dropdown__submenu,
.nav__menu,
.nav__list {
    display: none !important;
}

/*============ KAMANYA SLIDER ============ */
#campaignCarousel {
    margin-top: 0px; /* header’dan sonra boşluk */
    margin-bottom: 30px;
}

.carousel-item img {
    width: 100%;
    max-height: 600px;*/ /* daha büyük */
    /*object-fit: cover;*/ /* görüntüyü taşmadan kırp */
/*}

.carousel-caption h5 {
    font-size: 2rem; /* yazıları da büyütelim */
    font-weight: bold;
}

.carousel-caption p {
    font-size: 1.2rem;
}
/*******/
.container-campaign {
    width: 70%;
    margin: 0 auto; /* ortala */
    padding: 1rem 0;
}

.carousel-item {
    text-align: center;
    background-color: #f9fafb;
    /*display: flex;*/
    justify-content: center;
    /*align-items: center;*/
    padding: 1rem;
    border-radius: 16px;
    top: 10px;
}

.carousel-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: white;
    height: 50vh;
    max-width: 100%;
}

    .carousel-card img {
/*        max-height: 100%;
        max-width: 100%;
        object-fit: contain;*/
        display: block;
    }
/*======================================== */

.home-categories {
    width: 100vw; /* tam genişlik */
    background-color: #ffffff; /* arka plan rengi */
    padding: 3rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible; /* BUTONLARIN TAŞMASINA İZİN VER */
}
.home-categories:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.categories-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* her zaman 4 sütun */
    gap: 2rem;
    max-width: 1440px; /* ortalama genişlik sınırı */
    margin: 0 auto; /* ortala */
}

.category-box {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

    .category-box img {
        width: 180px; /* sabit genişlik */
        height: 180px; /* sabit yükseklik, kare olması önemli */
        object-fit: cover; /* resim taşmasın */
        margin: 1rem auto 0; /* ortala ve yukarı boşluk */
        display: block; /* ortalamayı aktif et */
    }


    .category-box h3 {
        font-size: 1rem;
        font-weight: 600;
        margin: 1rem 0;
    }

    .category-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
.categories-footer {
    margin-top: 2rem;
    text-align: center;
}

.view-all-btn {
    display: inline-block;
    background-color: #fff;
    color: #dc3545 !important;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 2rem;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
    border: 1px solid #dc3545;
}

.view-all-btn:hover {
    background-color: #dc3545;
    color: #fff !important;
    transform: translateY(-2px);
}
.categories-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #001129; /* başlık rengi */
    position: relative;
}

.categories-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #dc3545; /* alt çizgi */
    margin: 0.5rem auto 0;
    border-radius: 2px;
}

.home-products {
    width: 100vw; /* tam genişlik */
    background-color: #ffffff; /* arka plan rengi */
    padding: 3rem 1rem;
    margin-top: 2rem; /* kategoriler ile araya hafif boşluk */
    margin-bottom: 4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible; /* BUTONLARIN TAŞMASINA İZİN VER */
}
.home-products:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.products-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #001129;
    position: relative;
}

    .products-title::after {
        content: "";
        display: block;
        width: 60px;
        height: 3px;
        background: #dc3545;
        margin: 0.5rem auto 0;
        border-radius: 2px;
    }

.products-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 sütun */
    gap: 2rem;
    max-width: 1440px;
    margin: 0 auto;
}

.product-box {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

    .product-box img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 0.5rem;
    }

    .product-box h4 {
        font-size: 1rem;
        font-weight: 600;
        margin: 0.75rem 0 0.25rem;
    }

    .product-box p {
        font-size: 0.9rem;
        font-weight: 500;
        color: #dc3545;
    }

    .product-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.products-footer {
    margin-top: 2rem;
    text-align: center;
}

    .products-footer .view-all-btn {
        display: inline-block;
        background-color: #fff !important;
        color: #dc3545 !important;
        padding: 0.75rem 2rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 2rem;
        text-decoration: none;
        transition: background-color 0.3s, transform 0.2s;
    }

        .products-footer .view-all-btn:hover {
            background-color: #dc3545 !important;
            color: #fff !important;
            transform: translateY(-2px);
        }
        .showcase-section {
  width: 100vw;
  background: #fff;
  padding: 3rem 1rem;
  margin-top: 3rem;
}

.showcase-category-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #001129;
  margin-bottom: 1rem;
}

.showcase-category-title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #dc3545;
  margin-top: 0.3rem;
  border-radius: 2px;
}

.showcase-slide-items {
  display: flex;
  justify-content: center;
  gap: 6rem;
  padding: 1rem 0;
}

.showcase-slide-item {
  flex: 1;
  max-width: 200px;
  text-align: center;
}

.showcase-slide-item img {
    margin-bottom: 0.5rem;
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.showcase-slide-item p {
  font-size: 0.9rem;
  font-weight: 600;
}

.showcase-footer {
  margin-top: 1rem;
  text-align: center;
}

.showcase-viewall {
  display: inline-block;
  background: #dc3545;
  color: #fff;
  padding: 0.6rem 1.5rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s, transform 0.3s;
}

.showcase-viewall:hover {
  background: #a32632;
  transform: translateY(-2px);
}

/*============ CATEGORY UI ============*/
.category-index {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1rem;
}

.category-index-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #001129;
}

.category-card {
    display: flex;
    align-items: center;
    background: #fff;
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

    .category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

    .category-card img {
        width: 220px;
        height: 160px;
        object-fit: cover;
        flex-shrink: 0;
    }

.category-card-body {
    padding: 1rem 1.5rem;
    flex: 1;
}

    .category-card-body h2 {
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .category-card-body p {
        font-size: 0.95rem;
        color: #555;
        margin-bottom: 1rem;
    }

.category-card-btn {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: #dc3545;
    color: #fff;
    font-weight: 600;
    border-radius: 2rem;
    text-decoration: none;
    transition: background 0.3s, transform 0.3s;
}

.category-card-btn:hover {
    background: #a32632;
    transform: translateY(-2px);
}
@media (max-width: 768px) {
    .category-card {
        flex-direction: column;
        text-align: center;
    }

    .category-card img {
        width: 100%;
        height: 200px;
    }

    .category-card-body {
        padding: 1rem;
    }

    .container-campaign {
        width: 95%; /* mobilde tam genişliğe yakın */
        padding: 0.5rem 0;
    }

    .carousel-card {
        border-radius: 12px;
        max-height: 300px;
    }

        .carousel-card img {
            object-fit: contain;
        }
}


.category-card-btn {
    display: inline-block;
    background-color: #fff;
    color: #dc3545 !important;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 2rem;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
    border: 1px solid #dc3545;
}

.category-card-btn:hover {
    background-color: #dc3545;
    color: #fff !important;
    transform: translateY(-2px);
}
.showcase-header {
    display: flex;
    justify-content: space-between; /* başlık solda, buton sağda */
    align-items: center;
    margin-bottom: 1rem;
}

.view-all-btn-topright {
    display: inline-block;
    background-color: #fff;
    color: #337ab7 !important;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 2rem;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
    border: none;
}

    .view-all-btn-topright:hover {
        color: #3C91E6 !important;
        transform: translateY(-2px);
        border: none;
    }




.showcase-block {
    position: relative; /* butonları konumlamak için */
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible; /* BUTONLARIN TAŞMASINA İZİN VER */
}

    .showcase-block:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    }

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.icon-white-next {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.icon-white-prev {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

/*============ FOOTER ============*/
.modern-footer {
    background: #001129;
    color: #fff;
    padding-top: 3rem;
    /*margin-top: 3rem;*/
    font-family: 'Montserrat', sans-serif;
}

.footer-top {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 0 1rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}


.footer-top h3,
.footer-top h4 {
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
}

.footer-about p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.footer-socials a {
    display: inline-block;
    color: #fff !important;
    font-size: 1.4rem;
    margin-right: 0.5rem;
    transition: color 0.3s;
}

.footer-socials a:hover {
    color: #dc3545 !important;
}

.footer-links ul,
.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li,
.footer-contact ul li {
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}

.footer-links a {
    color: #fff !important;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #dc3545 !important;
}

.footer-contact li i {
    color: #dc3545;
    margin-right: 0.4rem;
}

.footer-bottom {
    text-align: center;
    padding: 1rem;
    font-size: 0.85rem;
    background: #000d20;
}
.footer-about h3 {
    color: #fff !important;
    margin-bottom: 1rem;
    font-weight: 700;
}
.a-category-box h3{
    color:  !important;
}
.a-category-box:hover h3 {
    color: var(--crimson-color) !important;
}

.mobile-category-link-text:hover {
    color: #fcffd2 !important;
}
.submenu-toggle:hover {
    color: #fcffd2 !important;
}


.slider-thumb {
    position: absolute;
    width: 100%;
    height: 0; /* bar yüksekliği zaten div ile var */
    background: transparent;
    pointer-events: none; /* barın kendisini tıklanmaz yap */
    -webkit-appearance: none;
    z-index: 2;
}

    /* Chrome, Edge, Safari */
    .slider-thumb::-webkit-slider-thumb {
        -webkit-appearance: none;
        pointer-events: auto; /* thumb tıklanabilir */
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: white; /* beyaz iç */
        border: 2px solid #dc3545; /* mavi border (#6366f1 = indigo-500) */
        cursor: pointer;
        box-shadow: 0 0 2px rgba(0,0,0,0.3);
    }

    /* Firefox */
    .slider-thumb::-moz-range-thumb {
        pointer-events: auto;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: white;
        border: 2px solid #6366f1;
        cursor: pointer;
        box-shadow: 0 0 2px rgba(0,0,0,0.3);
    }

    /* IE/Edge eski için */
    .slider-thumb::-ms-thumb {
        pointer-events: auto;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: white;
        border: 2px solid #6366f1;
        cursor: pointer;
        box-shadow: 0 0 2px rgba(0,0,0,0.3);
    }

@media screen and (max-width: 1050px) {
    /* Hamburger menü görünür hale gelir */
    .category-burger {
        display: block !important;
    }

    /* Navigasyon menüsünü dikey sırala */
    .nav__list {
        flex-direction: column;
        align-items: flex-start;
        background-color: #001129;
        padding: 1rem;
    }

    .nav__link {
        display: block;
        width: 100%;
        padding: 1rem 0.5rem;
        font-size: 0.9rem;
    }

    .dropdown__menu {
        position: relative;
        width: 100%;
        background-color: #001129;
    }

    .dropdown__link {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    /* Kategori menüsünü dikey sırala */
    .category-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-link {
        width: 100%;
        text-align: left;
        padding: 0.75rem 1rem;
    }

    /* Ürün ve kategori gridlerini 2 sütuna düşür */
    .categories-wrapper,
    .products-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Kategori kartı içeriği uyarlansın */
    .category-card {
        flex-direction: column;
        text-align: center;
    }

        .category-card img {
            width: 100%;
            height: auto;
        }

    .category-card-body {
        padding: 1rem;
    }

    /* Mega dropdown gizli kalsın */
    .mega-dropdown {
        display: none !important;
    }

    /* Arama çubuğu küçük ekranlarda gizlenebilir veya küçültülebilir */
    .nav-search {
        display: none;
    }

    #desktopCategoryMenu {
        display: none !important;
    }

    #categoryDropdown {
        display: none; /* hamburger ile açılır */
    }

        #categoryDropdown.d-block {
            display: block !important;
        }
}
@media screen and (min-width: 1051px) {
    #categoryDropdown {
        display: none !important;
    }
}

#btnAddToCard {
    background-color: #7c2279;
}
#btnAddToCard:hover {
    background-color: #541751;
}

/* PAGINATION */
.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: var(--bs-tertiary-bg);
    --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #0d6efd;
    --bs-pagination-active-border-color: #0d6efd;
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-secondary-bg);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    display: flex;
    padding-left: 0;
    list-style: none;
}

.page-link {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: var(--bs-pagination-color);
    text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .page-link {
        transition: none;
    }
}

.page-link:hover {
    z-index: 2;
    color: var(--bs-pagination-hover-color);
    background-color: var(--bs-pagination-hover-bg);
    border-color: var(--bs-pagination-hover-border-color);
}

.page-link:focus {
    z-index: 3;
    color: var(--bs-pagination-focus-color);
    background-color: var(--bs-pagination-focus-bg);
    outline: 0;
    box-shadow: var(--bs-pagination-focus-box-shadow);
}

.page-link.active, .active > .page-link {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
}

.page-link.disabled, .disabled > .page-link {
    color: var(--bs-pagination-disabled-color);
    pointer-events: none;
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
}

.page-item:not(:first-child) .page-link {
    margin-left: calc(-1 * var(--bs-border-width));
}

.page-item:first-child .page-link {
    border-top-left-radius: var(--bs-pagination-border-radius);
    border-bottom-left-radius: var(--bs-pagination-border-radius);
}

.page-item:last-child .page-link {
    border-top-right-radius: var(--bs-pagination-border-radius);
    border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.pagination-lg {
    --bs-pagination-padding-x: 1.5rem;
    --bs-pagination-padding-y: 0.75rem;
    --bs-pagination-font-size: 1.25rem;
    --bs-pagination-border-radius: var(--bs-border-radius-lg);
}

.pagination-sm {
    --bs-pagination-padding-x: 0.5rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: 0.875rem;
    --bs-pagination-border-radius: var(--bs-border-radius-sm);
}
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem 2rem;
    background: var(--light);
    border-top: 1px solid var(--lightgray-color);
    gap: 1rem;
}

.pagination-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--dark, #333);
}

    .pagination-left select {
        padding: 0.4rem 0.8rem;
        border: 1px solid var(--lightgray-color);
        border-radius: 0.25rem;
        cursor: pointer;
        font-size: 0.85rem;
    }

.pagination-center {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .pagination-center a {
        padding: 0.4rem 0.8rem;
        background: transparent;
        cursor: pointer;
        font-size: 0.85rem;
    }

    .pagination-center .page-item .page-link {
        background-color: var(--light);
        color: var(--dark);
        border-color: var(--lightgray-color);
    }

        .pagination-center .page-item .page-link:hover {
            background-color: var(--grey);
            color: var(--dark);
            border-color: var(--lightgray-color);
        }

    .pagination-center .active a {
        background-color: var(--primary-color) !important;
        color: var(--white-color) !important;
        border-color: var(--lightgray-color) !important;
    }

        .pagination-center .active a:hover {
            background-color: var(--royalblue-color) !important;
        }



#btnQuickMessage {
    background-color: #7c2279;
}

#btnQuickMessage:hover {
    background-color: #541751;
}