/* Service Carousel Styling */
.service-carousel {
    position: relative;
    padding: 0 50px;
}

.service-swiper {
    padding: 20px 0;
}

.service-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.service-img {
    height: 200px;
    overflow: hidden;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-card:hover .service-img img {
    transform: scale(1.05);
}

.service-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.service-content h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 15px 0 10px 0;
    color: #333;
}

.service-content p {
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
    line-height: 1.6;
}

.service-content .btn-line {
    align-self: flex-start;
    padding: 8px 20px;
    font-size: 0.9rem;
}

/* Carousel Navigation Buttons */
.service-swiper .swiper-button-next,
.service-swiper .swiper-button-prev {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.service-swiper .swiper-button-next:hover,
.service-swiper .swiper-button-prev:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.service-swiper .swiper-button-next:after,
.service-swiper .swiper-button-prev:after {
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .service-carousel {
        padding: 0 30px;
    }

    .service-content {
        padding: 20px;
    }

    .service-content h4 {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .service-carousel {
        padding: 0 20px;
    }

    .service-img {
        height: 150px;
    }

    .service-content {
        padding: 15px;
    }

    .service-content p {
        font-size: 0.9rem;
    }
}

/* ============================================
   MEGA MENU — Frosted Glass Effect
   ============================================ */

/* Force dark bg on sb-menu with frosted glass */
#mainmenu>li ul.mega .sb-menu {
    background: rgba(31, 41, 55, 0.95) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    -o-backdrop-filter: blur(15px) !important;
    -moz-backdrop-filter: blur(15px) !important;
    backdrop-filter: blur(15px) !important;
    border-color: rgba(255, 255, 255, .15) !important;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* Header frosted glass on scroll */
header {
    transition: all 0.3s ease;
}

header.smaller {
    background: rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    -o-backdrop-filter: blur(15px) !important;
    -moz-backdrop-filter: blur(15px) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Transparent header frosted effect */
header.transparent {
    background: rgba(0, 0, 0, 0.2) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    -o-backdrop-filter: blur(10px) !important;
    -moz-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}

/* White text inside the dark sb-menu */
#mainmenu>li ul.mega .sb-menu h5 {
    color: #ffffff;
}

#mainmenu>li ul.mega .sb-menu h5:hover {
    color: var(--primary-color);
}

/* Thumbnail fixed height for uniform cards */
#mainmenu>li ul.mega .sb-menu .relative.hover {
    height: 150px;
    overflow: hidden;
}

#mainmenu>li ul.mega .sb-menu .relative.hover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Gradient Edge Effects */
.de-gradient-edge-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
}

.de-gradient-edge-top.dark {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

.de-gradient-edge-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
}

.de-gradient-edge-bottom.dark {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

/* Opacity Classes */
.op-5 {
    opacity: 0.5;
}

.op-3 {
    opacity: 0.3;
}

/* Z-index Classes */
.z-1000 {
    z-index: 1000;
}

.z-2 {
    z-index: 2;
}

/* Absolute Positioning */
.abs {
    position: absolute;
}

.abs-centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.end-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.w-100 {
    width: 100%;
}

.w-20 {
    width: 20%;
}

.h-30 {
    height: 30px;
}

/* Custom Slider Styles for Doruk Tasarım */

/* Intro Section Background */
#section-intro {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
}

/* Slider Container */
.swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Slider Inner Background */
.swiper-inner {
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
}

/* Hero slide caption: menü hariç viewport ortasına hizala */
#section-intro .sw-caption {
    top: 0 !important;
    transform: none !important;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: var(--header-h, 80px);
    box-sizing: border-box;
}

/* Video slide: designesia.js'in background override'ını engelle */
.yt-slide-inner,
.swiper-slide-duplicate .yt-slide-inner {
    background-color: #000 !important;
    background-image: none !important;
    background: #000 !important;
    height: 100% !important;
}

/* YouTube Cover (background video, no bars) */
.yt-cover-wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.yt-cover-wrap iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 16:9 cover: min-width = 177.78vh, min-height = 56.25vw */
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.78vh;
    transform: translate(-50%, -50%);
    border: none;
}

/* Slider Overlay */
.sw-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 5;
}

.op-2 {
    opacity: 0.2;
}

/* Navigation Button Styling - Exact Gardyn Template Match */
.swiper-button-next,
.swiper-button-prev {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
    transition: all 0.3s ease;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: block !important;
    opacity: 1 !important;
}

/* Override any template locks */
.swiper-button-next.swiper-button-lock,
.swiper-button-prev.swiper-button-lock {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 24px !important;
    font-weight: normal !important;
}

.swiper-button-next {
    right: 0px !important;
    left: auto !important;
    border-radius: 30px 0 0 30px !important;
    -moz-border-radius: 30px 0 0 30px !important;
    -webkit-border-radius: 30px 0 0 30px !important;
}

.swiper-button-prev {
    left: 0px !important;
    right: auto !important;
    border-radius: 0 30px 30px 0 !important;
    -moz-border-radius: 0 30px 30px 0 !important;
    -webkit-border-radius: 0 30px 30px 0 !important;
}

/* ============================================
   FROSTED GLASS (BUZLU CAM) EFFECT
   Matching Gardyn Template Style
   ============================================ */

/* Base frosted glass class */
.bg-blur,
.frosted-glass {
    background: rgba(255, 255, 255, 0.15) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    -o-backdrop-filter: blur(10px) !important;
    -moz-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Dark frosted glass for dark backgrounds */
.bg-blur-dark,
.frosted-glass-dark {
    background: rgba(0, 0, 0, 0.3) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    -o-backdrop-filter: blur(15px) !important;
    -moz-backdrop-filter: blur(15px) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Frosted glass buttons */
.btn-frosted,
.btn-main.btn-frosted,
.btn-line.btn-frosted {
    background: rgba(255, 255, 255, 0.15) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    -o-backdrop-filter: blur(10px) !important;
    -moz-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.btn-frosted:hover,
.btn-main.btn-frosted:hover,
.btn-line.btn-frosted:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Frosted glass cards/panels */
.card-frosted,
.panel-frosted {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(15px);
    -o-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 20px;
}

/* Frosted glass for dark sections */
.section-dark .bg-blur,
.bg-dark .bg-blur,
.text-light .bg-blur {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Navigation frosted effect on scroll */
header.smaller.scroll-blur {
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    -o-backdrop-filter: blur(10px) !important;
    -moz-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}

/* Gallery overlay frosted effect */
.video-overlay,
.image-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
    -webkit-backdrop-filter: blur(2px);
    -o-backdrop-filter: blur(2px);
    -moz-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: all 0.3s ease;
}

.video-gallery-item:hover .video-overlay,
.image-gallery-item:hover .image-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* Modal frosted background */
.video-modal,
.image-modal {
    background: rgba(0, 0, 0, 0.85) !important;
    -webkit-backdrop-filter: blur(10px);
    -o-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Intro Text Styling */
#section-intro h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#section-intro p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Hero Section - Glass Band Style (Gardyn Template Match) */
#section-intro .sw-caption {
    background: transparent;
    border: none;
    padding: 0;
}

/* Glass Band Wrapper - Title + Button */
#section-intro .sw-text-wrapper {
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(15px);
    -o-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 35px 40px;
    display: inline-block;
    max-width: 600px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Glass band subtitle */
#section-intro .sw-text-wrapper .subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* Glass band title */
#section-intro .sw-text-wrapper .slider-title {
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Glass band button */
#section-intro .sw-text-wrapper .btn-main {
    background: rgba(31, 41, 55, 0.9) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    -o-backdrop-filter: blur(10px) !important;
    -moz-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 30px;
    transition: all 0.3s ease;
}

#section-intro .sw-text-wrapper .btn-main:hover {
    background: rgba(31, 41, 55, 1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(31, 41, 55, 0.4);
}

/* Hero buttons frosted effect */
#section-intro .btn-main,
#section-intro .btn-line {
    -webkit-backdrop-filter: blur(10px);
    -o-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ============================================
   WHITE TEXT IN DARK / FROSTED GLASS AREAS
   ============================================ */

/* Dark section text */
.bg-dark-2,
.bg-dark-2 *,
.bg-dark-1,
.bg-dark-1 *,
.section-dark,
.section-dark *,
.text-light,
.text-light * {
    color: #ffffff;
}

/* bg-blur overlay cards (project cards bottom info band) */
.bg-blur,
.bg-blur * {
    color: #ffffff !important;
}

.bg-blur h5,
.bg-blur p,
.bg-blur span,
.bg-blur div {
    color: #ffffff !important;
}

/* Service cards (frosted glass panels) */
.service-content,
.service-content h4,
.service-content p {
    color: #ffffff !important;
}

/* Slider hero text */
#section-intro .sw-text-wrapper,
#section-intro .sw-text-wrapper *,
#section-intro .sw-text-wrapper .subtitle,
#section-intro .sw-text-wrapper .slider-title,
#section-intro .sw-text-wrapper h2 {
    color: #ffffff !important;
}

/* Footer text */
footer,
footer *,
footer p,
footer a,
footer li,
footer span {
    color: rgba(255, 255, 255, 0.85);
}

footer h5,
footer .fw-bold {
    color: #ffffff !important;
}

footer a:hover {
    color: #ffffff !important;
}

/* subfooter */
.subfooter,
.subfooter * {
    color: rgba(255, 255, 255, 0.7);
}

/* Overlay panel (extra-wrap) */
#extra-wrap,
#extra-wrap * {
    color: #ffffff;
}

/* Why Choose Us cards - bg-dark-2 */
.bg-dark-2 h4,
.bg-dark-2 p,
.bg-dark-2 h5 {
    color: #ffffff !important;
}

/* bg-color-2 card */
.bg-color-2,
.bg-color-2 * {
    color: #ffffff !important;
}

/* Testimonials section */
.jarallax .item,
.jarallax .item *,
.jarallax p,
.jarallax h5,
.jarallax span {
    color: #ffffff !important;
}

/* Project hover overlay text */
.hover .abs.w-100.px-4 div,
.hover .abs.w-100.px-4 * {
    color: #ffffff !important;
}

/* ============================================
   ALL RED ACCENT ELEMENTS - FROSTED GLASS
   ============================================ */

/* Primary color elements with frosted glass */
.id-color,
.id-color-2,
.text-primary,
.bg-color,
.bg-color-2,
.bg-primary,
.btn-main,
.btn-primary,
.subtitle,
.small-border,
.feature-box .i-boxed,
.de-card .i-boxed,
.accordion-button:not(.collapsed),
.nav-pills .nav-link.active,
.page-item.active .page-link,
.badge-primary,
.progress-bar,
.pricing-s2 .top .price,
.pricing-s2.bg-color .top .price,
.testimonial-item .testimonial-content::before,
.owl-dot.active span,
.swiper-pagination-bullet-active,
#back-to-top,
.social-icons a:hover,
#mainmenu li a:hover,
#mainmenu li a.active,
.widget_tags li a:hover,
.bloglist .post-text .date-box,
.de-step-s1 .de-circle,
.de-price-counter .d-item h3,
#btn-extra span,
.menu-click span,
.de_tab.tab_steps .de_nav li span,
.de_tab.tab_steps .de_nav li.active span,
.de_light .de_tab.tab_steps .de_nav li.active span,
.de_table .tr .td:first-child,
.de_table .tr .td:nth-child(2),
.product-single .price,
.product-single .price .woocommerce-Price-amount,
.woocommerce-Price-amount,
.woocommerce-cart .cart-collaterals .cart_totals table td,
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-checkout .shop_table .cart-subtotal td,
.woocommerce-checkout .shop_table .order-total td,
.woocommerce-checkout .shop_table .cart-subtotal th,
.woocommerce-checkout .shop_table .order-total th,
.woocommerce-order-received .shop_table tfoot td,
.woocommerce-order-received .shop_table tfoot th,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title,
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-noreviews a,
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover,
.woocommerce-noreviews a:hover,
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce-noreviews a.button,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-noreviews a.button:hover {
    -webkit-backdrop-filter: blur(8px);
    -o-backdrop-filter: blur(8px);
    -moz-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Red background elements with frosted glass */
.bg-color,
.bg-color-2,
.bg-primary,
.btn-main,
.btn-primary,
.id-color,
.id-color-2,
#back-to-top,
.social-icons a:hover,
.bloglist .post-text .date-box,
.de-step-s1 .de-circle,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.pricing-s2.bg-color .top .price,
.testimonial-item .testimonial-content::before,
.owl-dot.active span,
.swiper-pagination-bullet-active,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
    background: rgba(31, 41, 55, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(31, 41, 55, 0.3);
}

/* Red hover states with enhanced frosted glass */
.btn-main:hover,
.btn-primary:hover,
.bg-color:hover,
.bg-primary:hover,
#back-to-top:hover,
.social-icons a:hover,
.nav-pills .nav-link.active:hover,
.page-item.active .page-link:hover {
    background: rgba(31, 41, 55, 0.95) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    -o-backdrop-filter: blur(12px) !important;
    -moz-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 6px 20px rgba(31, 41, 55, 0.4);
}

/* Feature box icons with frosted glass */
.feature-box .i-boxed,
.de-card .i-boxed,
.icon-box .i-boxed {
    background: rgba(31, 41, 55, 0.85) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    -o-backdrop-filter: blur(8px) !important;
    -moz-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.25);
}

/* Pricing tables with frosted glass */
.pricing-s2 .top .price,
.pricing-s2.bg-color .top .price {
    background: rgba(31, 41, 55, 0.85) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    -o-backdrop-filter: blur(10px) !important;
    -moz-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Badges and labels with frosted glass */
.badge-primary,
.badge-danger,
.badge-warning {
    background: rgba(31, 41, 55, 0.85) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    -o-backdrop-filter: blur(5px) !important;
    -moz-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Progress bars with frosted glass */
.progress-bar {
    background: rgba(31, 41, 55, 0.85) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    -o-backdrop-filter: blur(5px) !important;
    -moz-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

/* Testimonial quote marks with frosted glass */
.testimonial-item .testimonial-content::before {
    background: rgba(31, 41, 55, 0.7) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    -o-backdrop-filter: blur(5px) !important;
    -moz-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Swiper/Owl dots with frosted glass */
.owl-dot.active span,
.swiper-pagination-bullet-active {
    background: rgba(31, 41, 55, 0.9) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    -o-backdrop-filter: blur(5px) !important;
    -moz-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.4);
}

/* Back to top button with frosted glass */
#back-to-top {
    background: rgba(31, 41, 55, 0.85) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    -o-backdrop-filter: blur(10px) !important;
    -moz-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Menu button extra with frosted glass */
#btn-extra span,
.menu-click span {
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    -o-backdrop-filter: blur(5px) !important;
    -moz-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Step circles with frosted glass */
.de-step-s1 .de-circle {
    background: rgba(31, 41, 55, 0.9) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    -o-backdrop-filter: blur(8px) !important;
    -moz-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(31, 41, 55, 0.3);
}

/* Tab steps with frosted glass */
.de_tab.tab_steps .de_nav li span,
.de_tab.tab_steps .de_nav li.active span {
    background: rgba(31, 41, 55, 0.85) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    -o-backdrop-filter: blur(8px) !important;
    -moz-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Table highlights with frosted glass */
.de_table .tr .td:first-child,
.de_table .tr .td:nth-child(2) {
    background: rgba(31, 41, 55, 0.1) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    -o-backdrop-filter: blur(3px) !important;
    -moz-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
    border-left: 3px solid rgba(31, 41, 55, 0.5);
}

/* Price counter with frosted glass */
.de-price-counter .d-item h3 {
    background: rgba(31, 41, 55, 0.85) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    -o-backdrop-filter: blur(8px) !important;
    -moz-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px;
    padding: 10px 20px;
}

/* Accordion active state with frosted glass */
.accordion-button:not(.collapsed) {
    background: rgba(31, 41, 55, 0.1) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    -o-backdrop-filter: blur(5px) !important;
    -moz-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border-left: 3px solid rgba(31, 41, 55, 0.5);
    color: rgba(31, 41, 55, 0.9) !important;
}

/* Subtitle with frosted glass effect */
.subtitle.id-color,
.subtitle {
    background: rgba(31, 41, 55, 0.15) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    -o-backdrop-filter: blur(5px) !important;
    -moz-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(31, 41, 55, 0.2) !important;
    border-radius: 20px;
    padding: 5px 15px;
    display: inline-block;
}

/* Small border with frosted glass */
.small-border.bg-color,
.small-border.bg-color-2 {
    background: rgba(31, 41, 55, 0.85) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    -o-backdrop-filter: blur(5px) !important;
    -moz-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 2px;
}

/* ============================================
   GLOBAL BUTTON FROSTED GLASS - ALL BUTTONS
   ============================================ */

/* All btn-main variations — dark frosted glass, no red */
.btn-main,
.btn-main.btn-dark-trans,
.btn-main.btn-light-trans,
.btn-main.btn-small,
.btn-main.btn-large,
.btn-main.wow,
a.btn-main,
input.btn-main,
button.btn-main {
    background: rgba(15, 20, 30, 0.75) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    -o-backdrop-filter: blur(12px) !important;
    -moz-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) saturate(1.4) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-main:hover,
.btn-main.btn-dark-trans:hover,
.btn-main.btn-light-trans:hover,
a.btn-main:hover,
input.btn-main:hover,
button.btn-main:hover {
    background: rgba(15, 20, 30, 0.92) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    -o-backdrop-filter: blur(16px) !important;
    -moz-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px);
}

/* All btn-line variations — light frosted glass */
.btn-line:not(.btn-sm),
.btn-line.btn-sm,
a.btn-line,
span.btn-line,
button.btn-line,
.btn-main.btn-line {
    background: rgba(255, 255, 255, 0.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
    -o-backdrop-filter: blur(10px) !important;
    -moz-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) saturate(1.2) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ensure header / side buttons don't get overwritten */
.menu_side_area .btn-line {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.btn-line:hover,
.btn-line.btn-sm:hover,
a.btn-line:hover,
span.btn-line:hover,
button.btn-line:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    -o-backdrop-filter: blur(14px) !important;
    -moz-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
}

/* Submit / form buttons */
input[type="submit"].btn-main,
input[type="button"].btn-main,
button[type="submit"] {
    background: rgba(15, 20, 30, 0.75) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    -o-backdrop-filter: blur(12px) !important;
    -moz-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) saturate(1.4) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
    cursor: pointer;
}

input[type="submit"].btn-main:hover,
input[type="button"].btn-main:hover,
button[type="submit"]:hover {
    background: rgba(15, 20, 30, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    -o-backdrop-filter: blur(16px) !important;
    -moz-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
}

/* Contact Box Styling */
.padding40 {
    padding: 2.5rem;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    #section-intro h1 {
        font-size: 2.8rem;
    }

    .padding40 {
        padding: 2rem;
    }

    /* Tablet navigation buttons */
    .swiper-button-next,
    .swiper-button-prev {
        width: 48px !important;
        height: 48px !important;
    }

    .swiper-button-next {
        right: 0px !important;
    }

    .swiper-button-prev {
        left: 0px !important;
    }
}

@media (max-width: 768px) {
    #section-intro h1 {
        font-size: 2.2rem;
    }

    #section-intro p {
        font-size: 1.1rem;
    }

    .padding40 {
        padding: 1.5rem;
    }

    /* Mobile navigation buttons */
    .swiper-button-next,
    .swiper-button-prev {
        width: 48px !important;
        height: 48px !important;
        top: auto !important;
        bottom: 30px !important;
        transform: none !important;
    }

    .swiper-button-next {
        right: 20px !important;
        left: auto !important;
        border-radius: 30px 0 0 30px !important;
    }

    .swiper-button-prev {
        left: 20px !important;
        right: auto !important;
        border-radius: 0 30px 30px 0 !important;
    }
}

@media (max-width: 576px) {
    #section-intro h1 {
        font-size: 1.8rem;
    }

    .padding40 {
        padding: 1rem;
    }
}

/* ============================================
   INNER PAGE TEXT READABILITY
   Ensures body text on non-hero inner pages
   is dark enough to read on white backgrounds.
   ============================================ */

/* General body text — dark charcoal */
body {
    color: #2c2c2c;
}

/* Headings — deep dark */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #1a1a1a;
}

/* Paragraph text on plain sections */
section p,
section li,
section address {
    color: #3a3a3a;
}

/* Feature boxes / cards — keep text dark */
.feature-box .text h4,
.feature-box .text p,
.de-card h4,
.de-card p,
.de-card li {
    color: #2c2c2c;
}

/* Accordion text */
.accordion-button,
.accordion-body {
    color: #2c2c2c;
}

/* DO NOT override text-light sections (they have dark bg) */
.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6,
.text-light p,
.text-light li,
.bg-dark h1,
.bg-dark h2,
.bg-dark p,
.bg-dark li,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark p,
.section-dark li,
.bg-color-2 h1,
.bg-color-2 h2,
.bg-color-2 p {
    color: #787878;
}

/* Subheader page title */
#subheader h1 {
    color: #ffffff;
}

/* Subheader frosted glass effect */
#subheader {
    position: relative;
}

#subheader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

#subheader .container {
    position: relative;
    z-index: 2;
}

/* Gray sections — keep text dark */
.bg-gray h2,
.bg-gray h3,
.bg-gray h4,
.bg-gray p,
.bg-gray li {
    color: #2c2c2c;
}

/* ============================================
   SUBHEADER BREADCRUMB STYLE
   Red left-aligned title for inner pages
   ============================================ */

.subheader-title {
    color: rgb(255 255 255 / 90%) !important;
    text-align: left !important;
    font-size: 3.5rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

#subheader .center-y {
    display: flex;
    align-items: center;
}

#subheader .container {
    width: 100%;
}

@media (max-width: 768px) {
    .subheader-title {
        font-size: 1.8rem;
    }
}

/* ============================================
   HIDE RECAPTCHA BADGE
   ============================================ */

.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================
   DETAY PAGE MAIN CONTENT SECTION
   Reduced padding after banner
   ============================================ */

.detay-main-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

@media (max-width: 768px) {
    .detay-main-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* ============================================
   CTA BUTTON DARK SOLID STYLE
   ============================================ */

.btn-dark-solid,
a.btn-dark-solid,
.btn-line.btn-dark-solid {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.btn-line.btn-dark-solid:hover {
    background: #2a2a2a !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* ============================================
   SMOOTH TRANSITIONS & HOVER EFFECTS
   Modern, subtle animations
   ============================================ */

/* Global smooth transitions */
a,
button,
.btn-main,
.btn-line,
img,
.feature-box,
.de-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Link hover effects */
a:hover {
    color: var(--accent-red);
}

/* Button hover effects with frosted glass */
.btn-main {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: rgba(31, 41, 55, 0.9) !important;
    -webkit-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.btn-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(153, 27, 27, 0.95);
    transition: left 0.3s ease;
    z-index: -1;
}

.btn-main:hover::before {
    left: 0;
}

.btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(31, 41, 55, 0.4);
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Button line (outline) frosted effect */
.btn-line {
    background: rgba(255, 255, 255, 0.1) !important;
    -webkit-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

.btn-line:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
}

/* Card hover effects with frosted glass */
.feature-box,
.de-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    -o-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
}

.feature-box:hover,
.de-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: rgba(31, 41, 55, 0.2);
}

/* Dark section cards frosted effect */
.bg-dark .feature-box,
.bg-dark .de-card,
.section-dark .feature-box,
.section-dark .de-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Form inputs frosted glass */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    background: rgba(255, 255, 255, 1);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
    -webkit-backdrop-filter: blur(8px);
    -o-backdrop-filter: blur(8px);
    -moz-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Image hover zoom effect */
.hover-scale-1-1 {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale-1-1:hover {
    transform: scale(1.08);
}

/* Navigation menu hover */
#mainmenu li a {
    position: relative;
}

#mainmenu li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

#mainmenu li a:hover::after {
    width: 100%;
}

/* Social icons hover */
.social-icons a {
    transition: all 0.3s ease;
}

.social-icons a:hover {
    transform: translateY(-3px);
    color: var(--primary-color);
}

/* Gallery items hover */
.video-gallery-item,
.image-gallery-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-gallery-item:hover,
.image-gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Form input focus effects */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
    outline: none;
}

/* Accordion animation */
.accordion-button {
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(31, 41, 55, 0.05);
    color: var(--primary-color);
}

/* Modal animations */
.video-modal,
.image-modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-modal.active,
.image-modal.active {
    opacity: 1;
    visibility: visible;
}

.video-modal-content,
.image-modal-content {
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.video-modal.active .video-modal-content,
.image-modal.active .image-modal-content {
    transform: scale(1);
}

/* Lazy loading fade-in */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.5s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Scroll reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Underline animation for links */
.link-underline {
    position: relative;
    display: inline-block;
}

.link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease, left 0.3s ease;
}

.link-underline:hover::after {
    width: 100%;
    left: 0;
}

/* ============================================
   FOOTER & EXTRA PANEL FROSTED GLASS
   ============================================ */

footer.section-dark {
    position: relative;
}

footer.section-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(31, 41, 55, 0.98);
    -webkit-backdrop-filter: blur(10px);
    -o-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: -1;
}

#extra-wrap {
    background: rgba(31, 41, 55, 0.98) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    -o-backdrop-filter: blur(20px) !important;
    -moz-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Widgets frosted effect */
.widget {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Accordion frosted glass */
.accordion-item {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.accordion-button {
    background: transparent;
    -webkit-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* Testimonials frosted effect */
.testimonial-item {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    -o-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Service cards frosted */
.service-card {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    -o-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Gallery items frosted overlay enhancement */
.video-gallery-item,
.image-gallery-item {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
}
/* ============================================
   BENTO GRID + GLASSMORPHISM
   ============================================ */

/* Bento Grid Container */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px;
    grid-auto-flow: dense;
    gap: 10px;
}

/* Bento size variants via nth-child */
.bento-grid .bento-item:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
.bento-grid .bento-item:nth-child(7n+5) { grid-column: span 2; }

/* Bento Item */
.bento-item {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.07);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.bento-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.bento-item img,
.bento-item video {
    flex: 1 1 0%;
    min-height: 0;
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-item:hover img,
.bento-item:hover video { transform: scale(1.06); }

/* YouTube placeholder */
.bento-yt-placeholder {
    flex: 1 1 0%;
    min-height: 0;
    width: 100%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bento-yt-placeholder i { font-size: 3rem; color: #f00; }

/* Glass overlay — absolute over the image */
.bento-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 2;
}
.bento-item:hover .bento-glass { opacity: 1; }
/* Mobile: always show glass */
@media (max-width: 991px) {
    .bento-glass { opacity: 1; }
}

/* Glass info card — bant kaldırıldı, yazı direkt görselin üzerinde */
.bento-info {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transform: translateY(10px);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-item:hover .bento-info { transform: translateY(0); }

.bento-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Bento buttons */
.bento-btn {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9) !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 50px;
    padding: 5px 14px;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.bento-btn:hover {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.5) !important;
    color: #fff !important;
}
.bento-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.bento-btn-cart { padding: 5px 10px; }

/* Bento icon (for portfolio type indicator) */
.bento-icon {
    flex-shrink: 0;
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
    line-height: 1;
}

/* Portfolio filter buttons */
.portfolio-filter-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 30px;
}
.portfolio-filter-btn {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.65) !important;
    border-radius: 50px !important;
    padding: 7px 22px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all 0.25s ease !important;
    outline: none;
}
.portfolio-filter-btn:hover,
.portfolio-filter-btn.active {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.38) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* ── Portfolio Modal — no header bar, arrows on image ─────────────────── */
.portfolyo-modal-dialog { max-width: 92vw; }
.portfolyo-modal-content {
    background: transparent;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 80px rgba(0,0,0,0.8);
}
#portfolyoModalBody {
    min-height: 200px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
#portfolyoModalBody img,
#portfolyoModalBody video {
    max-width: 100%;
    max-height: 85vh;
    display: block;
    margin: auto;
}
#portfolyoModalBody iframe {
    width: 100%;
    height: 56.25vw;
    max-height: 80vh;
    border: none;
    display: block;
}
.portfolyo-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1.3rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s;
}
.portfolyo-modal-close:hover { background: rgba(255,255,255,0.22); }
.portfolyo-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 2.4rem;
    width: 52px;
    height: 88px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s, opacity 0.2s;
    padding: 0;
}
.portfolyo-modal-nav:hover { background: rgba(255,255,255,0.18); }
.portfolyo-modal-nav-prev { left: 14px; }
.portfolyo-modal-nav-next { right: 14px; }
.portfolyo-modal-counter {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 20;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.75);
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 20px;
    pointer-events: none;
}
/* Bento Responsive */
@media (max-width: 991px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
        gap: 8px;
    }
    .bento-grid .bento-item:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
    .bento-grid .bento-item:nth-child(7n+5) { grid-column: span 2; }
    .bento-info { transform: translateY(0); }
}
@media (max-width: 575px) {
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 160px;
        gap: 6px;
    }
    .bento-grid .bento-item:nth-child(7n+1) { grid-column: span 2; grid-row: span 1; }
    .bento-grid .bento-item:nth-child(7n+5) { grid-column: span 2; }
    .bento-title { font-size: 0.78rem; }
    .bento-btn { font-size: 0.7rem; padding: 4px 10px; }
}

/* ── Referans / Logo Grid ─────────────────────────────────────────────── */
.bento-grid-logos {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 140px;
    grid-auto-flow: dense;
}
/* No bento size variants for logo grid */
.bento-grid-logos .bento-item:nth-child(n) { grid-column: unset; grid-row: unset; }

.bento-item-logo {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.bento-item-logo:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.bento-item-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    filter: grayscale(20%);
    opacity: 0.85;
    transition: filter 0.25s ease, opacity 0.25s ease;
}
.bento-item-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

@media (max-width: 767px) {
    .bento-grid-logos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 110px; }
}
@media (max-width: 480px) {
    .bento-grid-logos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 90px; }
}

/* ── Lisans / Sertifika Bant ─────────────────────────────────────────── */
.sf-lisans {
    background: #0d0d0d;
    border-top: 1px solid #1e1e1e;
    padding: 28px 40px;
}
.sf-lisans__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
}
.sf-lisans__item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sf-lisans__item img {
    height: 48px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}
@media (max-width: 600px) {
    .sf-lisans { padding: 20px 20px; }
    .sf-lisans__inner { gap: 20px; }
    .sf-lisans__item img { height: 36px; max-width: 110px; }
}

/* ── Menü sağa hizalama ───────────────────────────────────────────────── */
header .de-flex { justify-content: flex-start; }
header #mainmenu-wrap { margin-left: auto; }