:root {
            --primary-color: #db2727;
            --bg-dark: #050505;
            --bg-secondary: #111111;
            --text-main: #ffffff;
            --text-white-soft: #d1d1d1;
        }

        html {
            scroll-behavior: smooth; /* Tüm sayfa için yumuşak kaydırma */
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, .navbar-brand {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
        }

        /* --- Navbar --- */
        .navbar {
            padding: 20px 0;
            background: transparent;
            transition: all 0.4s ease;
        }

        .navbar.scrolled {
            background-color: rgba(5, 5, 5, 0.95);
            padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .navbar-brand {
            font-size: 1.8rem;
            letter-spacing: -1px;
            color: #fff !important;
        }

        .navbar-brand span {
            color: var(--primary-color);
        }

        .nav-link {
            color: rgba(255,255,255,0.7) !important;
            font-weight: 500;
            margin-left: 20px;
            font-size: 0.95rem;
            transition: 0.3s;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--primary-color) !important;
        }

        /* --- Hero Video Section --- */
/* --- HERO (GİRİŞ) BÖLÜMÜ DÜZELTMESİ --- */

.hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* Sayfa yüksekliğinin tamamını kapla */
    overflow: hidden; /* Dışarı taşan kısımları kes */
    display: flex;
    align-items: center; /* İçeriği dikey ortala */
    justify-content: center; /* İçeriği yatay ortala */
}

.hero-video {
    position: absolute; /* Normal akıştan çıkar, arkaya yapıştır */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Videoyu orantılı şekilde ekrana yay */
    z-index: 0; /* En arkada dursun */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Siyah karartma filtresi */
    z-index: 1; /* Videonun bir tık önünde */
}

.hero-content {
    position: relative;
    z-index: 2; /* En üstte, her şeyin önünde */
    text-align: center;
    width: 100%;
    padding: 0 15px; /* Mobilde kenarlara yapışmasın */
}

/* Yazıların boyutlarını da garantiye alalım */
.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.hero-subtitle {
    font-size: 1.2rem;
    letter-spacing: 3px;
    color: var(--primary-color); /* Kırmızı rengimiz */
    font-weight: 600;
    text-transform: uppercase;
}

/* Mobilde yazı boyutunu küçültelim */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
    }
}

        .btn-custom {
            padding: 15px 40px;
            border: 1px solid rgba(255,255,255,0.3);
            background: transparent;
            color: #fff;
            font-family: 'Syne', sans-serif;
            font-weight: 600;
            text-transform: uppercase;
            transition: all 0.3s;
            border-radius: 0;
        }

        .btn-custom:hover {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: #fff;
        }

        /* --- Sections General --- */
        section {
            padding: 100px 0;
            scroll-margin-top: 80px; 
        }

        .section-title-wrap {
            margin-bottom: 60px;
        }

        .section-subtitle {
            color: var(--primary-color);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
            margin-bottom: 10px;
            display: block;
        }

        .section-title {
            font-size: 2.5rem;
            color: #fff;
        }

        /* --- Hakkımızda --- */
/* --- Hakkımızda Görseli (GÜNCEL - TERS EFEKT) --- */
.about-img {
    width: 100%;
    /* Başlangıçta tam renkli ve net */
    filter: grayscale(0%);
    opacity: 1;
    transition: 0.5s;
}

.about-img-wrap:hover .about-img {
    /* Üzerine gelince siyah-beyaz ve hafif sönük */
    filter: grayscale(100%);
    opacity: 0.8; 
    transform: scale(1.05); /* Büyüme efekti korunuyor */
}
       

        

        /* --- Galeri --- */
        .gallery-item {
            position: relative;
            overflow: hidden;
            aspect-ratio: 1/1;
            cursor: pointer;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: 0.4s;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        /* --- Referanslar --- */
        .testimonial-box {
            background: var(--bg-secondary);
            padding: 40px;
            border: 1px solid #222;
            transition: 0.3s;
        }

        .testimonial-box:hover {
            border-color: var(--primary-color);
        }

        .testimonial-box p {
            color: #ffffff !important;
            opacity: 0.9;
        }

        .testimonial-box small {
            color: #ffffff !important;
            opacity: 0.7;
        }

        /* --- İletişim Formu --- */
        .form-control {
            background: transparent;
            border: none;
            border-bottom: 1px solid #333;
            border-radius: 0;
            color: #fff;
            padding: 15px 0;
        }

        .form-control:focus {
            background: transparent;
            color: #fff;
            box-shadow: none;
            border-color: var(--primary-color);
        }

        /* --- Footer --- */
        footer {
            border-top: 1px solid #222;
            padding: 40px 0;
            color: #666;
            text-align: center;
            font-size: 0.9rem;
        }

        .social-links a {
            color: #fff;
            margin: 0 10px;
            font-size: 1.2rem;
            transition: 0.3s;
        }

        .social-links a:hover {
            color: var(--primary-color);
        }

        .text-white-soft {
            color: #d1d1d1 !important;
        }

        /* --- YUKARI ÇIK BUTONU STİLİ --- */
        .btn-up {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background-color: var(--primary-color);
            color: #fff;
            border-radius: 50%; /* Yuvarlak */
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            z-index: 9999;
            opacity: 0; /* Başlangıçta gizli */
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(255, 94, 0, 0.5); /* Ateş efekti */
            font-size: 1.2rem;
        }

        .btn-up:hover {
            background-color: #fff;
            color: var(--primary-color);
            transform: translateY(-5px);
        }

        .btn-up.show {
            opacity: 1;
            visibility: visible;
        }
		/* Glightbox link düzenlemesi */
.gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none; /* Alt çizgiyi kaldır */
}

/* Overlay ikonunu ortalamak için */
.gallery-overlay i {
    pointer-events: none; /* İkona tıklayınca sorun çıkmasın, arkadaki linke tıklansın */
}
/* --- Logo Slider Stilleri (GÜNCEL - TERS EFEKT) --- */
.client-logo {
    width: 100%;
    max-width: 180px;
    height: auto;
    display: block;
    margin: 0 auto;
    /* YENİ: Başlangıçta tam renkli ve net */
    opacity: 1;
    filter: grayscale(0%); 
    transition: all 0.4s ease;
    cursor: pointer;
}

.client-logo:hover {
    /* YENİ: Üzerine gelince siyah-beyaz ve biraz sönük */
    opacity: 0.7; 
    filter: grayscale(100%);
    /* İstersen üzerine gelince hafif küçülmesi için şu kodu açabilirsin: */
    /* transform: scale(0.95); */
}

/* Swiper Slide ortalaması (Bu kısım aynı kalıyor) */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Slider Konteynırını Ortala */
.logo-slider {
    padding: 20px 0;
    max-width: 1140px; /* Bootstrap konteynır genişliği ile uyumlu */
    margin: 0 auto;
}

/* Slide içindeki içerikleri hem dikey hem yatay ortala */
.logo-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Mevcut logonun ortalanmasını garanti et */
.client-logo {
    display: inline-block; /* margin: 0 auto ile çalışması için */
    vertical-align: middle;
}

/* Eğer 4 logodan az varsa bile slider'ın ortada kalması için */
.logo-slider .swiper-wrapper {
    display: flex;
    align-items: center;
}

/* Bootstrap'in standart mavi rengini (text-primary) kendi rengimizle değiştiriyoruz */
.text-primary {
    color: var(--primary-color) !important;
}
/* --- Form Yazı Rengi Düzeltmesi --- */

/* 1. Kutunun içine yazılan yazıyı beyaz yap */
.form-control {
    color: #ffffff !important; 
    background-color: transparent !important; /* Arka plan şeffaf */
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important; /* Alt çizgi rengi */
}

/* 2. "Adınız Soyadınız" gibi ipucu (placeholder) yazılarını beyaz yap */
.form-control::placeholder {
    color: #ffffff !important;
    opacity: 0.9; /* Görünürlük oranı (1 yaparsan tam beyaz olur) */
}

/* 3. Tıklayınca (Focus olunca) da beyaz kalsın */
.form-control:focus {
    color: #ffffff !important;
    background-color: transparent !important;
    border-color: #ffffff !important; /* Tıklayınca alt çizgi tam beyaz olsun */
    box-shadow: none !important;
}
/* İletişimdeki linklerin (Telefon, WP) mavi ve altı çizili olmasını engelle */
.contact-info a {
    color: #ffffff !important;        /* Rengi beyaz yap */
    text-decoration: none !important; /* Alt çizgiyi kaldır */
    transition: color 0.3s ease;
}

/* Üzerine gelince anlaşılsın diye kırmızı yapalım (Opsiyonel) */
.contact-info a:hover {
    color: var(--primary-color) !important;
}
/* --- Sabit WhatsApp Butonu --- */
.whatsapp-btn {
    position: fixed;
    bottom: 30px;  /* Alt taraftan boşluk */
    left: 30px;    /* Sol taraftan boşluk */
    width: 60px;
    height: 60px;
    background-color: #25d366; /* Orijinal WhatsApp Yeşili */
    color: #fff !important; /* İkon rengi */
    border-radius: 50%; /* Tam yuvarlak */
    text-align: center;
    font-size: 35px; /* İkon boyutu */
    line-height: 60px; /* Dikey ortalama */
    z-index: 9999; /* Her şeyin üstünde dursun */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    
    /* Nabız Animasyonu */
    animation: pulse-green 2s infinite;
}

/* Üzerine gelince efekt */
.whatsapp-btn:hover {
    background-color: #128C7E; /* Daha koyu yeşil */
    transform: scale(1.1); /* Hafif büyüsün */
    color: #fff !important;
}

/* Nabız (Pulse) Animasyonu Keyframes */
@keyframes pulse-green {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Mobilde butonu biraz küçültelim ki çok yer kaplamasın */
@media (max-width: 768px) {
    .whatsapp-btn {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 28px;
        bottom: 20px;
        left: 20px;
    }
}
/* --- PRELOADER STİLLERİ --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Simsiyah arka plan */
    z-index: 99999; /* En üstte durmalı */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Yumuşak kaybolma efekti */
}

.loader-content {
    text-align: center;
}

/* Kırmızı Dönen Çember */
.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top: 3px solid var(--primary-color); /* Bizim kırmızımız */
    border-radius: 50%;
    margin: 0 auto 15px auto;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-family: 'Syne', sans-serif;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 2px;
    animation: pulse 1.5s infinite;
}

/* Dönme Animasyonu */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Yazı Yanıp Sönme */
@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Preloader Gizlendiğinde */
.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}

/* --- Navbar Logo Ayarı --- */
.nav-logo {
    height: 40px; /* Navbar'a sığacak ideal yükseklik */
    width: auto;  /* Genişlik otomatik ayarlansın, logo uzamasın */
    display: block;
    transition: transform 0.3s ease;
}

/* Üzerine gelince hafif büyüsün (Opsiyonel) */
.nav-logo:hover {
    transform: scale(1.05);
}

/* Mobilde logo çok büyük kalırsa biraz küçültelim */
@media (max-width: 768px) {
    .nav-logo {
        height: 40px;
    }
}/* --- Çerez Uyarısı (Cookie Banner) --- */
.cookie-banner {
    position: fixed;
    bottom: -100%; /* Başlangıçta ekranın dışında (aşağıda) saklı */
    left: 0;
    width: 100%;
    background-color: rgba(17, 17, 17, 0.95); /* Yarı saydam siyah */
    border-top: 1px solid #333;
    padding: 15px 0;
    z-index: 10000; /* WhatsApp butonunun bile üstünde olsun */
    transition: bottom 0.5s ease-in-out; /* Kayarak gelme efekti */
    box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px); /* Arka planı hafif buzlu göster */
}

/* JS ile bu sınıf eklenince bant yukarı çıkacak */
.cookie-banner.show {
    bottom: 0;
}

/* Butonun hover rengini kırmızı yapalım */
.cookie-banner .btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* --- Galeri İkonu Rengi --- */
.gallery-item:hover .gallery-overlay i {
    color: var(--primary-color) !important; /* Mavi yerine kırmızı */
}

/* --- Galeri Hover Düzeltmesi --- */

/* 1. Kapsayıcı: Taşmaları Gizle */
.gallery-img-wrap {
    position: relative; /* Overlay'in buna göre konumlanması için */
    overflow: hidden;   /* Büyüyen resmin dışarı taşmasını engeller */
    border-radius: 8px; /* Köşeleri hafif yuvarlat (isteğe bağlı) */
}

/* 2. Resim: Geçiş Efekti Ekle */
.gallery-img-wrap img {
    width: 100%;        /* Resmi her zaman kapsayıcıya sığdır */
    height: auto;
    transition: transform 0.5s ease; /* Pürüzsüz büyüme efekti */
}

/* 3. Hover Durumu: Sadece Resmi Büyüt */
.gallery-item:hover .gallery-img-wrap img {
    transform: scale(1.1); /* Resmi %10 büyüt */
}

/* 4. Overlay ve İkon: Sabit Kalsın (Mevcut kodlarına dokunma) */
/* Overlay zaten width:100%, height:100% olduğu için, 
   resim büyüse de kapsayıcının (gallery-img-wrap) sınırları içinde kalacaktır. 
   Ekstra bir işlem yapmana gerek yok. */
   
   /* Logonun şık durması için gerekli stil */
    .admin-login-logo {
        max-width: 180px; /* Genişliği logonun formuna göre ayarlayabilirsin */
        height: auto;
        /* Logoya derinlik ve alev temasına uygun hafif bir parlama katıyoruz */
        filter: drop-shadow(0 0 12px rgba(219, 39, 39, 0.4));
        object-fit: contain;
    }
	
	/* Bayi Modalı Özel Input Stili */
#bayiModal .custom-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 0 !important;
    color: #fff !important;
    padding: 12px 0 !important;
    transition: all 0.3s ease;
}

#bayiModal .custom-input:focus {
    box-shadow: none !important;
    border-bottom-color: #db2727 !important; /* Marka kırmızınız */
}

#bayiModal .custom-input::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

/* Modal Butonunu İletişim Butonuyla Eşitle */
#bayiModal .btn-custom {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s ease;
}

#bayiModal .btn-custom:hover {
    background: #fff;
    color: #000;
}
  /* 1. Google elemanlarını daha oluşmadan "yok" hükmünde say */
  .skiptranslate,
  [class*="goog-te"],
  [id*="goog-gt"],
  .goog-te-gadget,
  .goog-te-gadget-icon,
  iframe.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important; /* Ekranın dışına fırlat */
  }

  /* 2. Sayfadaki kaymaları engelle */
  html, body { 
    margin-top: 0 !important; 
    top: 0 !important; 
  }
  
  body { 
    position: static !important; 
  }
  
  /* Bayi ve Sonuç Modalları Genel Siyah Tema */
#bayiModal .modal-content, 
#statusModal .modal-content {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Input ve Textarea Özel Tasarımı */
#bayiModal .custom-input {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 0 !important;
    color: #fff !important;
    padding: 12px 0 !important;
    box-shadow: none !important;
}

/* Inputa tıklandığında (Focus durumu) */
#bayiModal .custom-input:focus {
    border-bottom-color: #fff !important; /* Alt çizgi beyaz parlar */
    background-color: transparent !important;
}

/* Placeholder (İpucu metni) Rengi */
#bayiModal .custom-input::placeholder {
    color: rgba(255,255,255,0.4) !important;
}

/* Modal Kapatma Çarpı İşareti */
.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* "Başvuruyu Tamamla" Butonu */
#bayiModal .btn-custom {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    transition: all 0.3s ease;
}

#bayiModal .btn-custom:hover {
    background: #fff;
    color: #000;
}

/* Sonuç Modalı İkon ve Yazı Renkleri */
#statusModal #statusTitle {
    color: #fff !important;
}
#statusModal #statusDesc {
    color: rgba(255,255,255,0.7) !important;
}