/* Canvas Styles */
.scroller {
    height: 500vh;
    position: relative;
    pointer-events: none;
}

.canvas-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: lighten;
}

canvas {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
}

.content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.section-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    filter: blur(8px);
    letter-spacing: -2px;
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.section-text.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
    letter-spacing: 0px;
}

.headline {
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 700;
    text-align: center;
    line-height: 1.3 !important;
    background: linear-gradient(180deg, #fff 0%, #86868b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: 800px;
    padding: 0 20px;
}

/* Header Styling */
.tf-header .logo-site img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.tf-header .nav-menu-main {
    display: flex;
    gap: 30px;
    margin-bottom: 0;
    align-items: center;
    justify-content: center;
}

.tf-header .nav-menu-main .item-link {
    font-size: 17px;
    font-weight: 500;
}

.tf-header .btn-mobile-menu {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tf-header .btn-mobile-menu .icon {
    font-size: 24px;
}

/* Tanks Showcase Section */
.section-tanks-showcase {
    position: relative;
    background-color: #000;
    overflow: hidden;
    padding: 100px 0;
    /* Ust uste binen keskin cizgiyi yumusatmak icin yukariya dogru genis bir golge */
    box-shadow: 0 -80px 100px 20px #000;
}

.section-tanks-showcase .bg-red-bottom {
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 100%;
    height: 350px;
    background-color: #c00000;
    background-image: url('../images/anasayfa-red-bg.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    z-index: 1;
}

.tank-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

.tank-nav li {
    font-size: 2.5rem;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    margin-bottom: 15px;
    transition: color 0.3s ease;
    line-height: 1.2;
}

.tank-nav li.active {
    color: #fff;
}

.tank-nav li:hover {
    color: #aaa;
}

.tank-image-display {
    position: relative;
    z-index: 2;
    height: 780px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tank-image-display img {
    max-height: 100%;
    height: 100%;
    width: auto;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(1);
}
.custom-file-upload:hover { background: rgba(0,0,0,0.4) !important; border-color: var(--primary) !important; }
.custom-file-upload i { transition: transform 0.3s ease; }
.custom-file-upload:hover i { transform: translateY(-3px); }

/* Service Image Resizing for Desktop */
.wg-service-2 {
    gap: 80px !important; /* Ok ile yazının çakışmaması için boşluğu biraz artırdık */
}
.wg-service-2 .center {
    flex: 1 !important; /* Yazı alanının kalan tüm boşluğu kaplamasını sağladık */
}
.wg-service-2 .main-image .action {
    top: 35% !important; /* Oku yukarı taşıdık (varsayılan %50 idi) */
}
.wg-service-2 .main-image {
    max-width: 450px !important;
    flex-shrink: 0;
}
.wg-service-2 .main-image img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

@media (max-width: 1199px) {
    .wg-service-2 .main-image {
        width: 50% !important;
        max-width: unset !important;
    }
}
@media (max-width: 767px) {
    .wg-service-2 .main-image {
        width: 100% !important;
    }
}

/* Referanslar Title */
.referans-baslik { font-size: 30px !important; letter-spacing: 1px; }

/* Fix for product slider active text color */
.slick-nav .slick-slide.slick-current .text-slide, .slick-nav .slick-center .text-slide { color: #fff !important; }

/* Fix for multi-line text overlap in 3D slider */
.slick-nav .slick-slide { transform-origin: left center !important; }
.slick-nav .slick-slide:not(.slick-current) { transform: scale(0.9) !important; opacity: 0; }
.slick-nav .slick-current { transform: scale(1) !important; opacity: 1 !important; }

/* Service and Blog detail page header adjustments */
.hizmet-detay-page .page-title, .blog-detay-page .page-title { font-size: clamp(24px, 3vw, 40px); }
.hizmet-detay-page .breadcrumbs, .blog-detay-page .breadcrumbs, .urun-detay-page .breadcrumbs { opacity: 0.5 !important; }
.hizmet-detay-page .text-body-2 h3, .blog-detay-page .text-body-2 h3 { font-size: 26px !important; margin-top: 40px !important; margin-bottom: 20px !important; }

/* Oswald Font */
.oswald-font-title { font-family: 'Oswald', sans-serif !important;  font-size: 60px;}

/* SF Pro Font */
.sf-pro-font { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important; }

/* Neden Depares 2nd Section Adjustments */
.section-process-2 {
    margin-top: -120px; /* Adjust this value as needed to pull it upwards */
    position: relative;
    z-index: 10;
}
.letter-about {
    font-size: 22px;
}

/* Haber Resmi Küçültme */
.haber-resim-kucult {
    height: 600px !important; /* Haber resimlerini küçültmek için eklendi */
    object-fit: cover !important;
    width: 100%;
}

/* Hizmetler Section Padding Azaltma */
.section-service-2 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
/* Footer Link Rengi */
.tf-footer .footer-menu-list li a {
    color: #8d8d8d !important;
}

/* Haberler Custom (Resim altı yazı ve yan yana 3) */
.haber-item-custom {
    position: relative !important;
    display: flex;
    flex-direction: column;
}
.haber-item-custom .feature-content {
    position: static !important;
    background: none !important;
    padding: 20px 0 0 0 !important;
}
.haber-item-custom .feature-content .info {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
.haber-item-custom .feature-image {
    position: relative;
    display: block;
    overflow: hidden;
}
.haber-item-custom .feature-image::after {
    display: none !important;
}
.haber-item-custom .tag {
    margin-bottom: 10px;
    display: block;
}
.haber-item-custom .haber-resim-kucult {
    height: 400px !important; /* Görselleri biraz daha küçültelim ki 3'lü sığsın ve güzel dursun */
}
.tf-footer .footer-menu-list li {
    margin-bottom: 5px !important;
    padding: 0 !important;
}
.tf-footer .footer-menu-list li a { 
    font-size: 15px !important; 
    line-height: 1.2 !important; 
    display: inline-block;
}
.tf-footer .footer-menu-list li a:hover{
    color: #fff!important;
}
.haber-baslik-custom { font-size: 25px !important; line-height: 1.2 !important; }


.haber-item-custom .feature-image { pointer-events: auto !important; z-index: 10; display: block; }


.haber-detay-baslik-custom { font-size: 28px !important; line-height: 1.4 !important; }

.product-item {
    font-size: 50px;
}

/* Masaüstü ekranlarda tank ile altındaki slider arasındaki boşluğu kapatmak için */
@media screen and (min-width: 769px) {
    .section-tanks-showcase {
        margin-top: -35vh !important;
        position: relative !important;
        z-index: 10 !important;
    }
}

@media screen and (max-width: 768px){
    body {
        overflow-x: hidden;
    }
    .section-hero-v1 {
        height: auto !important;
        min-height: 0 !important;
    }
    .section-tanks-showcase {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: -30vh !important;
        position: relative !important;
        z-index: 10 !important;
    }
    #scroller-1 {
        height: auto;
    }
    .canvas-container {
        height: 100vh !important;
    }
    .section-hero-v1{
        padding-bottom: 0;;
    }
    .mobil-tank-resim-margin {
        margin-top: -90px !important;
    }
}

.anasayfa-haberler-baslik-custom {
    font-size: 45px !important;
}
.footer-menu-list { 
    gap:0;
}

/* Urun slider baslik hiza ayari */
@media (min-width: 768px) {
    .urun-baslik-margin {
        padding-top: 250px !important;
    }
}
@media (max-width: 767px) {
    .urun-baslik-margin {
        padding-top: 50px !important;
    }
}

/* Urun slider baslik satir araligi (line-height) ayari */
.slick-nav .text-slide {
    line-height: 1.2 !important;
}

/* Sayfanin en altindaki kirmizi border/cizgiyi kaldirma */
body::-webkit-scrollbar:horizontal {
    display: none !important;
    height: 0 !important;
}
body, html, .tf-footer, .footer-bottom {
    border-bottom: 0 !important;
}
body::after, html::after {
    display: none !important;
    content: none !important;
}

/* Popup Modal Custom Styles */
.popup-modal-content {
    background-color: transparent !important;
    border: none !important;
}
.popup-close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: #fff !important;
    border-radius: 50%;
    opacity: 1 !important;
    padding: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1050;
    transition: transform 0.2s ease;
}
.popup-close-btn:hover {
    transform: scale(1.1);
}
@media (max-width: 768px) {
    .popup-close-btn {
        top: -10px;
        right: 0px;
    }
}

/* Modal arkaplaninda (disinda) cikan carpi seklindeki ozel mouse kursorunu kaldirmak icin */
#anasayfaPopup, .modal-backdrop {
    cursor: default !important;
}