/* GENEL */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Poppins', sans-serif; }

body { line-height:1.6; color:#333; background:#f4f4f7; display: flex;
    flex-direction: column;min-height: 100vh;margin: 0; /* İçeriği dikey diz */ }

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

/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 40px;
  background: #000000; /* Koyu lacivert arka plan */
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  
  /* MENÜYÜ SABİTLEME */
  position: fixed; /* Sayfa aksa da orada çakılı kalır */
  top: 0;
  left: 0;
  width: 100%;
  
  /* KATMAN AYARI */
  z-index: 1000; /* İçeriklerin üstünde, ama açılış videosunun altında kalması için */
  transition: 0.3s;
}
header .logo { font-size:1.5em; font-weight:bold; color:#ffffff; }
header nav a { margin-left:20px; font-weight:bold; color:#e0e0e0; transition:0.3s; }
header nav a:hover { color:#00aaff; }

/* Başlangıçta şeffaf olan beyaz katman */
.fade-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0; /* Başlangıçta görünmez */
  transition: opacity 1.5s ease-in-out; /* Beyazlaşma hızı (1.5 saniye) */
  z-index: 4; /* Yazıların üstüne çıkmasını istersen z-index'i artır */
  pointer-events: none; /* Altındaki butonlara tıklanabilsin diye */
}

/* Video bittiğinde bu sınıf eklenecek */
.fade-active {
  opacity: 1 !important;
}

.hide-hero {
    display: none !important;
}

html {
    height: 100%;
}

/* Sayfa boşluklarını sıfırla */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.full-screen-intro {
    position: fixed; /* Sayfaya sabitler, kaydırılamaz */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; /* Menü ve her şeyin üstünde olması için */
    background-color: #000;
    overflow: hidden;
}

#heroVideo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Videoyu ekranı kaplayacak şekilde yayar */
}

/* Video bittiğinde arkada duracak görsel */
.video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/kapak-fotografi.jpg') center/cover no-repeat;
    display: none; /* Video oynarken gizli */
}

.fade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
    z-index: 10000;
}

.fade-active { opacity: 1 !important; }

/* Video bitince bu sınıf eklenerek video alanı yok edilecek */
.intro-finished {
    display: none !important;
}

.nav-links {
    display: flex;
    gap: 20px;
}

.nav-links a {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff !important;
    transition: opacity 0.3s ease;
}

.nav-links a:hover {
    color: #e5aa16 !important; /* Referanslardaki sarı/turuncu tonunla uyumlu */
    opacity: 1; /* Eğer varsa şeffaflığı kaldırır */
    transition: 0.3s ease; /* Yumuşak bir geçiş sağlar */
   
}
 
.btn {
  display:inline-block;
  margin-top:20px;
  padding:12px 25px;
  background:#22711d;
  color:#ffffff;
  border-radius:50px;
  font-weight:bold;
  transition:0.3s;
}
.btn:hover { background:#063913; }


/* Logo konteyneri */
header .logo {
    display: flex;
    align-items: center;
}

/* Logonun kendisi */
.nav-logo {
    height: 100px; /* Menü yüksekliğine göre burayı değiştirebilirsin */
    width: auto;  /* Orantıyı bozmaması için auto bırakıyoruz */
    transition: 0.3s;
    
}

/* Üzerine gelince hafif büyüme efekti (istersen) */
.nav-logo:hover {
    transform: scale(1.05);
}

/* ÜRÜNLER */
.products { padding:60px 20px; text-align:center; background:#f4f4f7; }
.products h2 { margin-bottom:40px; color:#1f2a38; }
.product-cards { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; }
.card { background:#ffffff; padding:20px; border-radius:16px; width:300px; box-shadow:0 4px 12px rgba(0,0,0,0.1); transition:0.3s; }


.card:hover { transform: translateY(-5px); box-shadow:0 6px 15px rgba(0,0,0,0.15); }
.card img { width:100%; border-radius:10px 10px 0 0; margin-bottom:15px; }
.card h3 { margin-bottom:10px; color:#1f2a38; }
.card p { color:#555; }

/* HAKKIMIZDA */
.about { padding:60px 20px; text-align:center; color:#1f2a38; }

/* İLETİŞİM */
.contact { padding:60px 20px; text-align:center; color:#1f2a38; }
.contact-info p { margin:10px 0; }

/* WHATSAPP BUTON */
.whatsapp-btn {
    position: fixed;
    bottom: 20px; /* Alttan boşluk */
    left: 20px;   /* Soldan boşluk */
    background-color: #25d366; /* WhatsApp Yeşili */
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 50px; /* Oval yapı */
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 999 !important; /* Normalde üstte durur */
    transition: transform 0.3s ease, background-color 0.3s ease;
}
#whatsappBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.whatsapp-btn:hover { background:#1ebe5d; }



/* Butonun görüneceği hali */
.whatsapp-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* FOOTER */
footer.altbilgi {
    flex-shrink: 0; /* Footer'ın daralmasını engeller */
    text-align: center;
    padding: 20px;
    background: #222;
    color: #fff;
    width: 100%;
    height: auto;
    /* Zoom yapınca kaymaması için margin-top: auto da eklenebilir */
    margin-top: auto; 
}
footer a { color:#25D366; }
.card img {
  width: 100%;       /* Kartın genişliğine uyumlu */
  height: 200px;     /* Tüm resimler aynı yükseklikte */
  object-fit: cover; /* Resim kırpılmadan kart içine sığar */
  border-radius: 10px 10px 0 0;
  margin-bottom: 15px;
}

img, video {
    max-width: 100%;
    height: auto;
} 

/* TABLET VE TELEFON AYARLARI */
@media (max-width: 768px) {
    
    /* 1. Menüyü Düzenle */
    header {
        flex-direction: column; /* Logo ve menü linklerini alt alta koyar */
        height: auto; 
        padding: 10px;
    }

    header nav {
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap; /* Linkler sığmazsa alt satıra geçer */
        justify-content: center;
        gap: 10px;
    }

    header nav a {
        margin-left: 0;
        font-size: 12px; /* Yazıları biraz küçültüyoruz */
    }

    /* 2. Logoyu Mobilde Küçült */
    .nav-logo {
        height: 60px; /* Mobilde barı çok kapatmasın */
        position: static; /* Mobilde taşmasın, barın içine girsin */
    }

    /* 3. Hero / Video Alanı */
    .hero-text h1 {
        font-size: 24px; /* Başlık mobilde çok büyük kalmasın */
    }

    /* 4. Ürün Kartlarını Alt Alta Diz */
    .products-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .card {
        width: 100% !important; /* Kartlar ekranı tam kaplasın */
        max-width: 400px;
        margin-bottom: 20px;
    }
}
/* --- GENEL ARKA PLAN --- */
body {
    background-color: #f9f9f9; /* Görseldeki hafif gri/beyaz tonu */
}

/* --- BAŞLIK ALANI --- */
.references-section {
    padding: 80px 0;
    text-align: center;
}

.section-title h1 {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.title-line {
    width: 310px;
    height: 4px;
    background-color: #e5aa16; /* Başlık altındaki mavi çizgi */
    margin: 0 auto 50px auto;
    border-radius: 2px;
}

/* --- KART YAPISI (GRID) --- */
.ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.ref-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Hafif modern gölge */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
}

.ref-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.ref-logo {
    height: 100px; /* Logo alanı yüksekliği sabitleyerek hizayı korur */
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.ref-logo img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.ref-card h3 {
    font-size: 16px;
    color: #555;
    font-weight: 500;
}

/* --- YANIP SÖNEN WHATSAPP BUTONU (FOOTER ÜSTÜ) --- */
.whatsapp-btn {
    position: fixed;
    bottom: 35px; /* Footer'ın siyah bandından yukarıda tutar */
    left: 20px;
    background: #25D366;
    color: white;
    padding: 12px 22px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: pulse-green 2s infinite;
}
/* --- urunler sayfa --- */
.project-detail-container {
    max-width: 1100px;
    margin: 120px auto 50px; /* Header'ın altında kalması için */
    padding: 0 20px;
}

.project-header {
    text-align: center;
    margin-bottom: 40px;
}

.project-header h1 {
    font-size: 2.5rem;
    color: #333;
}

.project-category {
    color: #888;
    font-weight: 300;
}

.project-content {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* İkisini de en üst hizaya çiviler */
    gap: 30px;
    max-width: 1200px;
    margin: 50px auto 0; /* Başlıktan sonra temiz bir boşluk */
}

.left-column {
    flex: 2;
    max-width: 750px;
}


.project-main-image {
    flex: 2; /* Resim daha geniş alan kaplasın */
}

.project-main-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}


/*
.project-description {
     Yazı alanı daha dar 
    background: #000000;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #eee;
    height: 450px;
    width: 450px;
}

*/

/* Sağ taraf (Açıklama) */
.project-description {
    flex: 1;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    
    /* Üst hizayı slider ile milimetrik eşitlemek için margin-top 0 */
    margin-top: 0 !important; 
    height: auto; /* Sabit height varsa iptal eder */
}

.project-description h2 {
    margin-bottom: 15px;
    color: rgb(0, 0, 0);
  }


.project-description h3 {
    color: rgb(0, 0, 0);
     margin-top: 20px;
  }

  ::-ms-tooltip {
    background: #333;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;    
}



/* slider */

/* Bootstrap Carousel Özelleştirilmiş CSS */
:root {
    --carousel-control-color: #fff;
    --carousel-transition-duration: .6s;
    --carousel-indicator-width: 30px;
    --carousel-indicator-height: 3px;
    --carousel-indicator-opacity: .5;
    --carousel-indicator-active-opacity: 1;
}

/* Yan Oklar (Controls) */
.carousel-control-prev,
.carousel-control-next {
    width: 15%;
    opacity: 0.5;
    transition: opacity .15s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 0.9;
}

/* İkon Genişliği */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
}

/* Geri Butonu İkonu (SVG) */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>");
}

/* İleri Butonu İkonu (SVG) */
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>");
}

/* Alttaki Çizgiler (Indicators) */
.carousel-indicators [data-bs-target] {
    width: var(--carousel-indicator-width);
    height: var(--carousel-indicator-height);
    margin-right: 3px;
    margin-left: 3px;
    background-color: var(--carousel-control-color);
    opacity: var(--carousel-indicator-opacity);
    transition: opacity .6s ease;
    /* Tıklama alanını genişleten hile */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    background-clip: padding-box;
}

.carousel-indicators .active {
    opacity: var(--carousel-indicator-active-opacity);
}

/* Yazı Alanı (Caption) */
.carousel-caption {
    right: 15%;
    left: 15%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
}

/* Geçiş Efekti Hızı */
.carousel-item {
    transition: transform var(--carousel-transition-duration) ease-in-out;
}

/* Slider Dış Çerçeve */
.slider-wrapper {
    position: relative;
    width: 100%;
    margin: 0 !important; /* Buradaki 30px margin hizayı bozuyordu, sıfırladık */
    border-radius: 15px;
    overflow: hidden;
}

/* Resim Taşıyıcı (Hareket eden kısım) */
.slider-main-container {
    display: flex;
    transition: transform 0.6s ease-in-out;
}

/* Her Bir Resim Kutusu */
.slider-item {
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-item img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

/* Ok Butonları */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 2px 15px;
    cursor: pointer;
    font-size: 24px;
    z-index: 5;
    transition: 0.3s;
}

.modal-slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    position: relative;
}

.slider-btn:hover { background: rgba(0, 0, 0, 0.7); }
.prev { left: 0; border-radius: 0 10px 10px 0; }
.next { right: 0; border-radius: 10px 0 0 10px; }

/* Alt Sayı Göstergesi */
.slider-counter {
    text-align: center;
    padding: 10px;
    background: #fff;
    font-weight: bold;
    color: #333;
    font-family: 'Poppins', sans-serif;
}


/* Arka Plan Karartma */
.modal-overlay {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    z-index: 10001; /* Header'ın (1000) üstünde olması için */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Arka plan siyahlık derecesi */
    cursor: zoom-out;
    align-items: center;
    justify-content: center;
    z-index: 99999 !important;
    flex-direction: column;
}

/* Önizleme Resmi */
.modal-content {
    max-width: 90%;
    max-height: 85%;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    animation: zoomIn 0.3s ease;
    transition: transform 0.3s ease;
}

/* Kapatma Butonu (X) */
.close-modal {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
}

.modal-nav {
    background: rgba(255,255,255,0.1);
    color: white;
    border: none;
    padding: 20px;
    cursor: pointer;
    font-size: 30px;
    position: absolute;
    transition: 0.3s;
}



.modal-nav:hover { background: #ffcc00; color: black; }
.modal-nav.prev { left: -60px; }
.modal-nav.next { right: -60px; }




/* Açılış Efekti */
@keyframes zoomIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Slider içindeki resimlere tıklanabilir imleç ekle */
.slider-item img {
    cursor: zoom-in;
}

/* Video Kutusu (Slider'ın hemen altı) */
.video-container {
    margin-top: 20px;
    border-radius: 15px;
    overflow: hidden;
}

.custom-video {
    width: 100%;
    display: block;
}

.content-wrapper {
    flex: 1 0 auto; /* Boşluğu doldurur, footer'ı aşağı iter */
}

footer, footer.altbilgi {
    flex-shrink: 0; /* Footer'ın dikeyde ezilmesini önler */
    margin-top: auto; /* İçerik bitince footer'ı en alta yaslar */
    width: 100%;
    background: #222;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

@keyframes pulse-green {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1.05); 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); }
}

/* MOBİL AYAR */
@media (max-width: 768px) {
    /* Hamburger Butonu Görünümü */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        cursor: pointer;
        gap: 6px;
        z-index: 1001;
        padding: 10px;
    }

    .menu-toggle span {
        width: 30px;
        height: 3px;
        background-color: #ffffff;
        border-radius: 2px;
        transition: 0.3s;
    }

    /* Menü Linklerini Panel Haline Getirme */
    .nav-links {
        display: none; /* Başlangıçta gizli */
        position: fixed;
        top: 0;
        right: -100%; /* Ekranın dışından gelsin */
        height: 100vh;
        width: 70%;
        background: #000000;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.4s ease-in-out;
        z-index: 1000;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    }

    /* Menü aktif olduğunda gelecek sınıf */
    .nav-links.active {
        display: flex;
        right: 0;
    }

    .nav-links a {
        margin: 15px 0;
        font-size: 18px !important;
    }

    /* Logo ve Header Düzeni */
    header {
        flex-direction: row !important; /* Logoyu ve butonu yan yana tut */
        justify-content: space-between;
        padding: 0 20px;
        height: 80px;
    }

    .nav-logo {
        height: 50px !important; /* Mobilde logoyu biraz daha makul boyuta çek */
    }

    /* Hamburger Animasyonu (X işareti) */
    .menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
}

/* Masaüstünde butonu gizle */
.menu-toggle { display: none; }