/* Ürün tıklanabilir olsun */
.urunKart {
cursor: pointer;
}
.wsk-cp-product{
background:#fff;
padding:15px;
border-radius:6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
position:relative;
margin:20px auto;
}
.wsk-cp-img{
position:absolute;
top:5px;
left:50%;
transform:translate(-50%);
-webkit-transform:translate(-50%);
-ms-transform:translate(-50%);
-moz-transform:translate(-50%);
-o-transform:translate(-50%);
-khtml-transform:translate(-50%);
width: 100%;
padding: 15px;
transition: all 0.2s ease-in-out;
}
.wsk-cp-img img{
width:100%;
transition: all 0.2s ease-in-out;
border-radius:6px;
}
.wsk-cp-product:hover .wsk-cp-img{
top:-40px;
}
.wsk-cp-product:hover .wsk-cp-img img{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.wsk-cp-text{
padding-top:100%;
}
.wsk-cp-text .category{
text-align:center;
font-size:12px;
font-weight:bold;
padding:5px;
margin-bottom:45px;
position:relative;
transition: all 0.2s ease-in-out;
}
.wsk-cp-text .category > *{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-khtml-transform: translate(-50%,-50%);

}
.wsk-cp-text .category > span{
padding: 12px 30px;
border: 1px solid #313131;
background:#212121;
color:#fff;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
border-radius:27px;
transition: all 0.05s ease-in-out;

}
.wsk-cp-product:hover .wsk-cp-text .category > span{
border-color:#ddd;
box-shadow: none;
padding: 11px 28px;
}
.wsk-cp-product:hover .wsk-cp-text .category{
margin-top: 0px;
}
.wsk-cp-text .title-product{
text-align:center;
}
.wsk-cp-text .title-product h3{
font-size:14px;
font-weight:bold;
margin:15px auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width:100%;
}
.wsk-cp-text .description-prod p{
margin:0;
}
/* Truncate */
.wsk-cp-text .description-prod {
text-align:center;
width: 100%;
height:62px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
margin-bottom:15px;
}
.card-footer{
padding: 25px 0 5px;
border-top: 1px solid #ddd;
}
.card-footer:after, .card-footer:before{
content:'';
display:table;
}
.card-footer:after{
clear:both;
}
.card-footer .wcf-left{
float:left;

}
.card-footer .wcf-right{
float:right;
}
.price{
font-size:18px;
font-weight:bold;
}
a.buy-btn{
display:block;
color:#212121;
text-align:center;
font-size: 18px;
width:35px;
height:35px;
line-height:35px;
border-radius:50%;
border:1px solid #212121;
transition: all 0.2s ease-in-out;
}
a.buy-btn:hover , a.buy-btn:active, a.buy-btn:focus{
border-color: #FF9800;
background: #FF9800;
color: #fff;
text-decoration:none;
}
.wsk-btn{
display:inline-block;
color:#212121;
text-align:center;
font-size: 18px;
transition: all 0.2s ease-in-out;
border-color: #FF9800;
background: #FF9800;
padding:12px 30px;
border-radius:27px;
margin: 0 5px;
}
.wsk-btn:hover, .wsk-btn:focus, .wsk-btn:active{
text-decoration:none;
color:#fff;
}
.red{
color:#F44336;
font-size:22px;
display:inline-block;
margin: 0 5px;
}
@media screen and (max-width: 991px) {
.wsk-cp-product{
margin:40px auto;
}
.wsk-cp-product .wsk-cp-img{
top:-40px;
}
.wsk-cp-product .wsk-cp-img img{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.wsk-cp-product .wsk-cp-text .category > span{
border-color:#ddd;
box-shadow: none;
padding: 11px 28px;
}
.wsk-cp-product .wsk-cp-text .category{
margin-top: 0px;
}
a.buy-btn{
border-color: #FF9800;
background: #FF9800;
color: #fff;
}
}
#detayIcerik {
position: sticky;
top: 130px;
text-align: center;
}



@media screen and (max-width: 576px) {

    /* Ürünler 2 sütun */
    .col-md-4 {
        width: 50%;
        float: left;
        padding: 7px;
    }
    .wsk-cp-product {
        margin: 10px auto;
        padding: 12px;
    }

    /* Görsel küçültme */
    .wsk-cp-img {
        padding: 5px;
        top: 0 !important;
        transform: translateX(-50%);
    }

    .wsk-cp-img img {
        width: 85%;
        margin: 0 auto;
        border-radius: 5px;
        box-shadow: none !important;
    }

    /* --- SADE FİYAT YAZISI --- */
    .wsk-cp-text .category > span {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        color: #333 !important;
        font-size: 11px;
        font-weight: 600;
        padding: 0 !important;
        letter-spacing: 0.2px;
    }

    .wsk-cp-text .category {
        margin-bottom: 10px;  /* Daha sıkı görünüm */
    }

    /* Başlık küçültme */
    .wsk-cp-text .title-product h3 {
        font-size: 10px;
        margin: 6px auto;
        line-height: 1.2;
    }

    /* Açıklama alanı */
    .wsk-cp-text .description-prod {
        font-size: 10px;
        height: 40px;
        -webkit-line-clamp: 2;
    }

    /* Detay alanı üstte kalsın */
    #urunDetay {
        width: 100%;
        margin-bottom: 20px;
    }

    #detayIcerik {
        position: relative;
        top: 0;
        padding: 10px;
    }

    /* Hover kapalı */
    .wsk-cp-product:hover .wsk-cp-img {
        top: 0;
    }
}




    /* ------------------------------------------------------------------- */
    /* Ana Proje Swiper Yapısı */
    /* ------------------------------------------------------------------- */
    #main-carousel-wrapper {
        position: relative;
        overflow: hidden;
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        padding: 16px;
    }
    #projects-container {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Ana Slayt Geçişi */
    }

    /* Proje Kartı (Ana Slayt Öğesi) */
    .card-container-item {
        flex-shrink: 0; /* Slaytın küçülmesini engeller */
        width: 100%; /* Slaytın tam genişlikte olmasını sağlar */
        background-color: #ffffff;
        border-radius: 8px;
        padding: 32px;
        box-sizing: border-box;
    }

/* Ana Navigasyon Butonları */
.main-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px;
    background-color: rgba(59, 130, 246, 0.8); /* blue-500/80 */
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 20;
    transition: background-color 0.3s;
}
.main-nav-btn:hover {
    background-color: rgb(37, 99, 235); /* blue-600 */
}

.main-nav-btn svg {
    width: 24px;
    height: 24px;
    stroke: currentColor; 
    fill: none;
}
#main-prev-btn { left: 12px; }
#main-next-btn { right: 12px; }

    /* Ana Navigasyon Noktaları (Dots) */
    #main-carousel-dots {
        position: absolute;
        bottom: 16px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 8px;
        z-index: 20;
    }
    .main-dot {
        width: 12px;
        height: 12px;
        background-color: rgb(156, 163, 175); /* gray-400 */
        border-radius: 50%;
        transition: all 0.3s;
        cursor: pointer;
    }
    .main-dot.active {
        background-color: rgb(59, 130, 246); /* blue-600 */
        width: 16px;
        height: 16px;
    }
    
    /* ------------------------------------------------------------------- */
    /* Kart İçeriği Düzeni ve Detaylar */
    /* ------------------------------------------------------------------- */
    .card-layout {
        display: flex;
        gap: 32px;
    }
    .left-section {
        flex: 1; /* Sol yarım */
    }
    .right-section {
        flex: 1; /* Sağ yarım */
    }

    /* Şirket Bilgisi */
    .company-info {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #e0f2ff; /* blue-100 */
        margin-bottom: 24px;
    }
    .logo-badge {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .logo-badge svg {
        width: 32px;
        height: 32px;
        color: white;
        stroke: currentColor;
        fill: none;
    }
    .company-name {
        font-size: 24px;
        font-weight: 800;
        color: #1f2937; /* gray-800 */
    }
    .company-slogan {
        font-size: 14px;
        font-weight: 500;
        color: #2563eb; /* blue-600 */
    }

    /* Proje Detayları Scroll */
    .card-description-scroll {
        max-height: 200px;
        overflow-y: auto;
        background-color: #eff6ff; /* blue-50 */
        padding: 16px;
        border-radius: 8px;
        border: 1px solid #bfdbfe; /* blue-200 */
        margin-bottom: 24px;
    }
    .card-description-scroll p {
        font-size: 14px;
        line-height: 1.6;
        color: #4b5563; /* gray-600 */
    }

    /* Ek Bilgiler */
    .extra-info {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        font-size: 12px;
        font-weight: 500;
        color: #6b7280; /* gray-500 */
    }
    .info-tag {
        background-color: #e5e7eb; /* gray-200 */
        padding: 4px 12px;
        border-radius: 9999px; /* full rounded */
    }
    .project-title-h3 {
        font-size: 20px;
        font-weight: 600;
        color: #374151; /* gray-700 */
        margin-bottom: 16px;
    }

    /* ------------------------------------------------------------------- */
    /* İç Görsel Carousel Yapısı */
    /* ------------------------------------------------------------------- */
    .inner-carousel-wrapper {
        position: relative;
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        background-color: #f3f4f6; /* gray-100 */
        margin-top: 16px;
    }
    .card-carousel-slides {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }
    .card-carousel-slide {
        flex-shrink: 0;
        width: 100%;
    }
    .card-carousel-slide img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        aspect-ratio: 4/3; /* 800x600 için 4:3 */
    }

    /* İç Navigasyon Butonları */
    .inner-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 8px;
        background-color: rgba(255, 255, 255, 0.7);
        color: rgb(37, 99, 235); /* blue-600 */
        border: none;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        z-index: 10;
        transition: background-color 0.3s;
    }
    .inner-nav-btn:hover {
        background-color: white;
    }
    .inner-nav-btn svg {
        width: 20px;
        height: 20px;
    }
    .inner-nav-prev { left: 12px; }
    .inner-nav-next { right: 12px; }

    /* İç Navigasyon Noktaları (Dots) */
    .inner-dots-container {
        position: absolute;
        bottom: 8px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 4px;
        z-index: 10;
    }
    .inner-dot {
        width: 8px;
        height: 8px;
        background-color: #ccc;
        border-radius: 50%;
        transition: all 0.3s;
        cursor: pointer;
    }
    .inner-dot.active {
        background-color: rgb(59, 130, 246); /* blue-600 */
        width: 12px;
        height: 12px;
    }
    .inner-caption {
        margin-top: 16px;
        font-size: 12px;
        color: #6b7280;
        text-align: center;
    }

    /* ------------------------------------------------------------------- */
    /* Responsive Düzen */
    /* ------------------------------------------------------------------- */
    @media (max-width: 1024px) {
        .card-layout {
            flex-direction: column;
        }
        .left-section, .right-section {
            width: 100%;
        }
        .card-container-item {
            padding: 24px;
        }
    }
    @media (max-width: 640px) {
        .company-info {
            flex-direction: column;
            align-items: flex-start;
        }
        .extra-info {
            gap: 8px;
        }
        .logo-badge {
            width: 50px;
            height: 50px;
        }
        .logo-badge svg {
            width: 24px;
            height: 24px;
        }
    }


    .about-section {
    padding: 60px 0;
    font-family: Arial, sans-serif;
}

.about-container {
    display: flex;
    max-width: 1200px;
    margin: auto;
    align-items: flex-start;
    gap: 40px;
}

.about-text {
    flex: 1;
}

.about-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #FF8C00;
    letter-spacing: 1px;
}

.about-text h2 {
    font-size: 32px;
    color: #222;
    margin: 10px 0 20px;
    line-height: 1.3;
}

.about-text p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

.about-feature {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 10px;
}

.number-circle {
    width: 40px;
    height: 40px;
    background: #f2f2f2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #333;
    margin-right: 15px;
}

.about-images {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.img-large {
    grid-column: 1 / 3;
    width: 100%;
    border-radius: 10px;
}

.img-small {
    width: 100%;
    border-radius: 10px;
}

/* Responsive */
@media (max-width: 900px) {
    .about-container {
        flex-direction: column;
    }

    .img-large {
        grid-column: 1 / 3;
    }
}

        /* --- KULLANICININ SAĞLADIĞI VE GÜNCELLENEN CSS STİLLERİ --- */

        /* --- Genel Ayarlar ve Kapsayıcı --- */
        .latest-projects-section {
            font-family: 'Inter', Arial, sans-serif; /* Inter fontunu tercih ettim */
            background-color: #24242e;
            padding: 40px 0;
            text-align: center;
        }

        /* --- Başlık Bölümü (Turuncu Alan) --- */
        .header-container {
            background-color: #ff9933;
            padding: 30px 20px;
            margin-bottom: 20px;
        }

        .subtitle {
            color: #000;
            font-size: 14px;
            letter-spacing: 2px;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .title {
            color: #fff;
            font-size: 36px;
            margin: 0;
            font-weight: 700;
        }

        /* --- SWIPER ve GALERİ DÜZENİ --- */

/* 1. ANA KAPSAYICIYI MUTLAK KONUMLANDIRMA İÇİN HAZIRLA */
.latest-projects-swiper-container {
    max-width: 1200px;
    margin: 0 auto;
    border: 5px solid #fff; 
    border-radius: 8px; 
    overflow: hidden;
    /* BURASI ÇOK ÖNEMLİ: Butonların kapsayıcı içinde kalması için */
    position: relative; 
}

        /* Her bir Swiper Slide'ın içindeki 6'lı Izgara (3x2) */
        .project-gallery-grid {
            display: grid;
            /* Masaüstünde 3 sütunlu düzen */
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr); /* 2 satır zorunluluğu */
            grid-gap: 5px; /* Resimler arasındaki ince boşluklar */
            width: 100%;
            height: 600px; /* 3x2 düzeni için sabit yükseklik (örnek) */
        }
        
        .project-item {
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .project-item img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Resmi kutuya sığdırır */
            transition: transform 0.3s ease;
        }
        
        .project-item img:hover {
            transform: scale(1.05); /* Hover efekti */
        }

        /* --- Navigasyon Butonları ve Sayfalama --- */
        .latest-projects-swiper-button-prev,
        .latest-projects-swiper-button-next {
            color: #ff9933; /* Turuncu buton rengi */
            top: 50%;
            transform: translateY(-50%);
            margin: 0 10px;
            opacity: 0.8;
            transition: opacity 0.3s;
        }
        
        .latest-projects-swiper-button-prev:hover,
        .latest-projects-swiper-button-next:hover {
            opacity: 1;
        }

        .latest-projects-swiper-pagination .swiper-pagination-bullet-active {
            background: #ff9933; /* Aktif sayfa rengi */
        }
/* Sadece bu Swiper'ın butonlarını hedefle */
.latest-projects-swiper-container .swiper-button-prev,
.latest-projects-swiper-container .swiper-button-next {
    color: #ff9933; /* Turuncu buton rengi */
    /* Diğer stil kuralları aynı kalır */
    opacity: 0.8;
    transition: opacity 0.3s;
}

/* Hover stilini de özgül hale getir */
.latest-projects-swiper-container .swiper-button-prev:hover,
.latest-projects-swiper-container .swiper-button-next:hover {
    opacity: 1;
}

/* Sadece bu Swiper'ın aktif sayfalama noktasını hedefle */
.latest-projects-swiper-container .latest-projects-swiper-pagination .swiper-pagination-bullet-active {
    background: #ff9933; /* Aktif sayfa rengi */
}

/* NOT: Eğer üstteki slider'ın CSS'ini bozan bir başka kuralınız varsa,
   onun da başına bu benzersiz ana class'ı eklemeniz gerekebilir.
   Örneğin: .latest-projects-swiper-container .swiper-slide { ... }
*/

        /* --- Mobil Uyumlu (Responsive) Ayarlar --- */
        @media (max-width: 900px) {
            .project-gallery-grid {
                /* Tabletlerde 2 sütunlu düzen */
                grid-template-columns: repeat(2, 1fr);
                height: 900px; /* Daha uzun yükseklik, çünkü 2 sütun 3 satır olacak */
            }
        }
        
        @media (max-width: 500px) {
            .project-gallery-grid {
                /* Mobil cihazlarda tek sütunlu düzen */
                grid-template-columns: 1fr;
                height: 1800px; /* Daha uzun yükseklik, 1 sütun 6 satır olacak */
            }

            .title {
                font-size: 28px;
            }
        }



  .faq-header {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .faq-item {
    border-bottom: 1px solid #ddd;
  }

  .faq-question {
    font-weight: 600;
    font-size: 18px;
    padding: 15px 10px;
    cursor: pointer;
    position: relative;
  }

  .faq-question::after {
    content: "+";
    position: absolute;
    right: 10px;
    font-size: 24px;
    transition: transform 0.3s ease;
  }

  .faq-question.active::after {
    content: "-";
  }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 10px;
    font-size: 16px;
    color: #555;
  }

  .faq-answer.open {
    max-height: 200px; /* ihtiyaca göre ayarlanabilir */
    padding: 15px 10px;
  }

  /* Mobile uyumluluk */
  @media (max-width: 600px) {
    .faq-header {
      font-size: 24px;
    }

    .faq-question {
      font-size: 16px;
    }

    .faq-answer {
      font-size: 14px;
    }
  }

.faq-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap; /* Mobilde alta geçmesi için */
}

.faq-container {
  flex: 1 1 60%;
  max-width: 600px;
}

.faq-image {
  flex: 1 1 35%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.faq-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
  .faq-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .faq-container {
    max-width: 100%;
  }

  .faq-image {
    margin-top: 20px;
  }
}



@font-face {
  font-family: 'Font Awesome 5 Free';
  src: url('../fonts/fa-solid-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap; /* <-- EKLENEN SATIR */
}

@font-face {
  font-family: 'Font Awesome 5 Brands';
  src: url('../fonts/fa-brands-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome 5 Regular';
  src: url('../fonts/fa-regular-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}