/* ----------------------------------------------------------------

	Custom CSS



	Add all your Custom Styled CSS here for New Styles or

	Overwriting Default Theme Styles for Better Handling Updates

-----------------------------------------------------------------*/



/* Slider Styling */

#slider {

    position: relative;

    overflow: hidden;

}



.slider-background {

    position: relative;

    width: 100%;

    height: 100%;

}



.slider-background::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);

    z-index: 1;

}



/* Slider Form - Eski (Artık kullanılmıyor) */

.slider-form {

    position: absolute;

    bottom: 0;

    right: calc((100vw - 1280px) / 2); /* Bootstrap container genişliği (1280px) */

    z-index: 5;

    width: 400px;

}



/* Form Section - Slider'ın Altında 80px */

.form-section {

    position: absolute;

    top: calc(75vh - 450px); /* Slider yüksekliği (75vh) + 80px */

    right: 5%; /* Bootstrap container genişliği (1280px) + %10 boşluk */

    z-index: 5;

    width: 475px;

}



.form-section .landing-wide-form {

    background: rgba(0,0,0,.3);

    padding: 2rem;

    border-radius: 12px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(10px);

    transform: translateY(-2px);

    transition: all 0.3s ease;

}



.form-section .landing-wide-form:hover {

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);

    transform: translateY(-4px);

}



/* Slider Form - Yeni (Slider Dışında) - Artık kullanılmıyor */

.slider-form-external {

    position: absolute;

    bottom: 85px; /* Alttan 85 piksel yukarıda */

    right: calc((100vw - 1280px) / 2); /* Bootstrap container genişliği (1280px) */

    z-index: 5;

    width: 400px;

}



/* Slider Controls */

.slider-controls {

    position: absolute;

    bottom: 30px;

    left: 30px;

    z-index: 10;

    display: flex;

    gap: 10px;

}



.slider-controls .carousel-control-prev,

.slider-controls .carousel-control-next {

    position: static;

    width: 50px;

    height: 50px;

    background: rgba(0,0,0,0.5);

    border: none;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    backdrop-filter: blur(10px);

}



.slider-controls .carousel-control-prev:hover,

.slider-controls .carousel-control-next:hover {

    background: rgba(0,0,0,0.7);

    transform: scale(1.1);

}



.slider-controls .carousel-control-prev-icon,

.slider-controls .carousel-control-next-icon {

    width: 20px;

    height: 20px;

}



/* Form Styling */

.landing-wide-form {

    background: rgba(0,0,0,.3);

    padding: 2rem;

    border-radius: 12px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(10px);

    transform: translateY(-2px);

    transition: all 0.3s ease;

}



.landing-wide-form:hover {

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);

    transform: translateY(-4px);

}



.landing-wide-form .form-control {

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    padding: 12px 15px;

    font-size: 14px;

    transition: all 0.3s ease;

}



.landing-wide-form .form-control:focus {

    border-color: #007bff;

    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);

}



.landing-wide-form .btn-primary {

    background: linear-gradient(45deg, #007bff, #0056b3);

    border: none;

    border-radius: 8px;

    padding: 12px 20px;

    font-weight: 600;

    transition: all 0.3s ease;

}



.landing-wide-form .btn-primary:hover {

    background: linear-gradient(45deg, #0056b3, #004085);

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);

}



/* Mega Menu Styling - Bootstrap Style 2 */

.mega-menu-style-2 .mega-menu-column {

    padding: 1.75rem 1.5rem;

}



.mega-menu-style-2 .mega-menu-title .menu-link {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--cnvs-themecolor);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 0.75rem 0;

    margin-bottom: 1rem;

    display: block;

    text-decoration: none;

    transition: all 0.3s ease;

}



.mega-menu-style-2 .mega-menu-title .menu-link:hover {

    color: var(--cnvs-themecolor);

    transform: translateX(5px);

}



.mega-menu-style-2 .mega-menu-title {

    margin-bottom: 1rem;

}



.mega-menu-style-2 .mega-menu-content-wrapper {

    margin-top: 1rem;

}



.mega-menu-style-2 .mega-menu-image-section {

    width: 100%;

    aspect-ratio: 1;

    border-radius: 8px;

    overflow: hidden;

    border: 2px solid var(--cnvs-themecolor);

    transition: all 0.3s ease;

}



.mega-menu-style-2 .mega-menu-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all 0.3s ease;

}



.mega-menu-style-2 .mega-menu-image-section:hover {

    transform: scale(1.05);

    box-shadow: 0 5px 15px rgba(230, 47, 40, 0.3);

}



.mega-menu-style-2 .mega-menu-image-section:hover .mega-menu-image {

    transform: scale(1.1);

}



/* Mega Menu Alt Menüler - Kurumsal menüsü ile aynı stil */

.mega-menu-column .sub-menu-container {

    padding-left: 15px;

    border-top: 1px solid var(--cnvs-header-border-color);

    list-style: none;

    margin-bottom: 0;

}



.mega-menu-column .sub-menu-container .menu-item {

    border-top: var(--cnvs-primary-menu-submenu-border);

    margin-bottom: 0.25rem;

}



.mega-menu-column .sub-menu-container .menu-item:first-child {

    border-top: none;

}



.mega-menu-column .sub-menu-container .menu-item:last-child {

    margin-bottom: 0;

}



.mega-menu-column .sub-menu-container .menu-item:hover {

    background-color: var(--cnvs-primary-menu-submenu-hover-bg);

}



.mega-menu-column .sub-menu-container .menu-link {

    position: relative;

    padding: 10px 5px;

    font-size: var(--cnvs-primary-menu-submenu-font-size);

    font-weight: var(--cnvs-primary-menu-submenu-font-weight);

    color: var(--cnvs-contrast-900);

    letter-spacing: var(--cnvs-primary-menu-submenu-spacing);

    font-family: var(--cnvs-primary-menu-submenu-font);

    text-decoration: none;

    display: block;

    transition: all 0.3s ease;

}



.mega-menu-column .sub-menu-container .menu-link div {

    position: relative;

}



.mega-menu-column .sub-menu-container .menu-item:hover .menu-link {

    background-color: var(--cnvs-primary-menu-submenu-hover-bg);

    font-weight: var(--cnvs-primary-menu-submenu-hover-font-weight);

    padding-left: calc(var(--cnvs-primary-menu-submenu-padding-x) + var(--cnvs-primary-menu-submenu-hover-padding-offset));

    color: var(--cnvs-primary-menu-submenu-hover-color);

}



/* Product Categories Styling */

.fbox-large {

    padding: 2rem;

    border: 1px solid #e0e0e0;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.95);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

    margin-bottom: 0.5rem;

}



.fbox-large:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    border-color: #007bff;

}



.fbox-large .fbox-icon {

    text-align: center;

    margin-bottom: 1rem;

}



.fbox-large .fbox-icon img,

.fbox-large div[data-animate] img {

    width: 400px;

    height: 270px;

    object-fit: cover;

    border-radius: 8px;

    transition: all 0.3s ease;

}



.fbox-large:hover .fbox-icon img {

    transform: scale(1.1);

}



.fbox-large .fbox-content h3 {

    color: #333;

    font-size: 1.5rem;

    font-weight: 600;

    margin-bottom: 1rem;

}



.fbox-large .fbox-content p {

    color: #666;

    font-size: 1rem;

    line-height: 1.6;

    margin-bottom: 1.5rem;

}



.category-features {

    margin-top: 1rem;

}



.category-features .badge {

    font-size: 0.8rem;

    padding: 0.5rem 0.8rem;

    border-radius: 20px;

    font-weight: 500;

}



/* Responsive Design */

@media (max-width: 1200px) {

    .slider-form {

        right: calc((100vw - 1024px) / 2); /* Bootstrap lg container genişliği */

        width: 350px;

    }

    .slider-form-external {

        right: calc((100vw - 1024px) / 2); /* Bootstrap lg container genişliği */

        width: 350px;

    }

    .form-section {

        position: absolute;

        top: calc(75vh - 450px);

        right: 5%; /* Bootstrap lg container genişliği + %10 boşluk */

        width: 400px;

        z-index: 5;

    }

}



@media (max-width: 992px) {

    .slider-form {

        right: calc((100vw - 768px) / 2); /* Bootstrap md container genişliği */

        width: 320px;

    }

    .slider-form-external {

        right: calc((100vw - 768px) / 2); /* Bootstrap md container genişliği */

        width: 320px;

    }

    .form-section {

        position: relative;

        top: auto;

        right: auto;

        width: 100%;

        margin: 0;

        padding: 0;

    }

    

    .form-section .landing-wide-form {

        border-radius: 0;

        margin: 0;

        padding: 2rem;

        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.2);

        transform: translateY(-2px);

    }

    

    .form-section .landing-wide-form:hover {

        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);

        transform: translateY(-4px);

    }

}



@media (max-width: 768px) {

    #slider {

        height: 75vh;

        min-height: 400px;

    }

    

    .form-section {

        position: relative;

        top: auto;

        right: auto;

        width: 100%;

        margin: 0;

        padding: 0;

    }

    

    .form-section .landing-wide-form {

        border-radius: 0;

        margin: 0;

        padding: 1.5rem;

        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.2);

        transform: translateY(-2px);

    }

    

    .form-section .landing-wide-form:hover {

        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);

        transform: translateY(-4px);

    }

    

    .slider-form {

        position: relative;

        bottom: auto;

        right: auto;

        width: 100%;

        margin: 2rem 1rem;

    }

    

    .slider-controls {

        bottom: 20px;

        left: 20px;

    }

    

    .slider-controls .carousel-control-prev,

    .slider-controls .carousel-control-next {

        width: 40px;

        height: 40px;

    }

    

    .landing-wide-form {

        margin: 0;

        padding: 1.5rem;

    }

}



@media (max-width: 576px) {

    .form-section {

        position: relative;

        top: auto;

        right: auto;

        width: 100%;

        margin: 0;

        padding: 0;

    }

    

    .form-section .landing-wide-form {

        border-radius: 0;

        margin: 0;

        padding: 1rem;

        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.2);

        transform: translateY(-2px);

    }

    

    .form-section .landing-wide-form:hover {

        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);

        transform: translateY(-4px);

    }

    

    .slider-form {

        margin: 1rem;

    }

    

    .slider-controls {

        bottom: 15px;

        left: 15px;

    }

    

    .slider-controls .carousel-control-prev,

    .slider-controls .carousel-control-next {

        width: 35px;

        height: 35px;

    }

    

    .landing-wide-form {

        padding: 1rem;

    }

}