/* Mevcut CSS'inizin altına ekleyin */

/* TEKNİK ÖZELLİKLER İÇİN YENİ GRID YAPISI */
.features-detail-grid {
    list-style: none; /* Liste maddelerinin başındaki noktaları kaldırır */
    padding: 0; /* İç boşluğu sıfırlar */
    margin-top: 20px; /* Üstteki elemanla arasına 20px boşluk koyar */
    /* 2 SÜTUNLU DÜZENİ GARANTİ EDER */
    display: grid; /* Izgara (grid) düzenini açar */
    grid-template-columns: repeat(2, 1fr); /* İki eşit sütun oluşturur */
    gap: 15px; /* Kutucuklar (hücreler) arası 15px boşluk bırakır */
}

.features-detail-grid li {
    /* Her maddeyi bir kart gibi gösterme ayarları */
    display: flex; /* İçeriği (ikon ve yazı) hizalamak için esnek kutu kullanır */
    align-items: center; /* İçerikleri dikey eksende ortalar */
    gap: 10px; /* İkon ve metin arasına 10px boşluk koyar */
    padding: 10px 15px; /* İçeriden boşluk verir (dolgulu görünüm) */
    border-radius: 8px; /* Köşeleri 8px yuvarlatır */
    background: #fff; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Hafif bir gölge ekler */
    border: 1px solid #eee; /* İnce gri bir çerçeve ekler */
    font-size: 0.95rem; /* Yazı boyutunu ayarlar */
    font-weight: 600; /* Yazıyı yarı kalın yapar */
    color: var(--secondary-dark, #2b2d42);
}

.features-detail-grid li i {
    color: var(--primary-color, #d90429); 
    font-size: 1.1em; /* İkonu biraz büyütür */
    flex-shrink: 0; /* Alan daralsa bile ikonun küçülmesini engeller */
}

/* --- TİPOGRAFİ VE TEMEL AYARLAR --- */
:root { 
    --primary-color: #d90429; 
    --secondary-dark: #2b2d42; 
}

/* Gövde Yazısı */
body { 
    background-color: #f8f9fa; 
    font-family: 'Open Sans', sans-serif; /* Genel yazı tipi ailesi */
    color: #495057; 
}

/* Başlıklar ve Özel Font Kullanılan Alanlar */
h1, h2, h3, h4, .btn-action, .price-amount, .nav-btn, .breadcrumb-nav {
    font-family: 'Montserrat', sans-serif; /* Başlıklar için farklı bir font kullanır */
}

.product-detail-page { 
    padding: 140px 0 80px; /* Üstten header payı, alttan boşluk bırakır */
}

/* Breadcrumb (Gezinme Yolu) */
.breadcrumb-nav { 
    margin-bottom: 25px; /* Alt boşluk */
    font-size: 0.85rem; /* Küçük yazı boyutu */
    color: #888; 
    font-weight: 500; /* Orta kalınlık */
    text-transform: uppercase; /* Tüm harfleri büyük yapar */
    letter-spacing: 0.5px; /* Harf aralığını açar */
}
.breadcrumb-nav a { 
    color: #6c757d; 
    text-decoration: none; /* Alt çizgiyi kaldırır */
    transition: 0.3s; /* Geçiş efekti süresi */
}
.breadcrumb-nav a:hover { 
    color: var(--primary-color); 
}
.breadcrumb-nav span { 
    margin: 0 10px; /* Ayırıcı işaretin sağ/sol boşluğu */
    color: #dee2e6; 
}
.breadcrumb-nav strong { 
    color: var(--primary-color); 
    font-weight: 700; /* Kalın yazı */
}

/* LAYOUT GRID (Sayfa Düzeni) */
.detail-grid { 
    display: grid; /* Izgara düzeni */
    grid-template-columns: 1.2fr 1fr; /* Sol taraf biraz daha geniş (Resim alanı) */
    gap: 50px; /* İki sütun arası boşluk */
    align-items: stretch; /* Sütun yüksekliklerini eşitler */
}

/* --- GALERİ STİLLERİ --- */
.product-gallery {
    position: relative; /* İçindeki mutlak konumlu öğeler için referans */
    background: #fff; 
    border-radius: 20px; /* Köşeleri yuvarlat */
    overflow: hidden; /* Dışa taşanları gizle */
    box-shadow: 0 20px 60px rgba(0,0,0,0.05); /* Derinlik gölgesi */
    border: 1px solid #f1f1f1; /* İnce kenarlık */
    padding-bottom: 20px; /* Alt iç boşluk */
    display: flex; /* Esnek kutu */
    flex-direction: column; /* İçeriği dikey hizala */
    height: 100%; /* Yüksekliği kapsayıcıya eşitle */
}
.main-image-container {
    flex: 1; /* Kalan tüm boşluğu kapla */
    display: flex; /* Resmi ortalamak için flex */
    align-items: center; /* Dikey orta */
    justify-content: center; /* Yatay orta */
    background-color: #fff; 
    position: relative; /* Z-index ve konumlandırma için */
    padding: 30px; /* Resim etrafı boşluk */
    overflow: hidden; /* Taşan resmi gizle */
    cursor: grab; /* Tutma imleci (3D görünüm için) */
    min-height: 450px; /* Minimum yükseklik garantisi */
}
.main-image-container:active { 
    cursor: grabbing; /* Tıklayınca tutma efekti */
}
.main-image-container img {
    max-width: 100%; /* Genişlik taşmasın */
    max-height: 100%; /* Yükseklik taşmasın */
    object-fit: contain; /* Orantılı sığdır */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Yumuşak zoom efekti */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1)); /* Resme gölge ver */
}
.main-image-container:hover img { 
    transform: scale(1.08); /* Hoverda hafif zoom yap */
}

/* OK (Navigasyon) BUTONLARI */
.nav-btn {
    position: absolute; /* Resim üzerinde bağımsız konum */
    top: 50%; /* Dikeyde ortaya */
    transform: translateY(-50%); /* Tam ortalamak için düzeltme */
    background-color: rgba(255, 255, 255, 0.9); 
    color: var(--secondary-dark); 
    border: none; /* Çerçeve yok */
    width: 50px; height: 50px; /* Kare boyut */
    border-radius: 50%; /* Tam yuvarlak */
    cursor: pointer; /* Tıklanabilir imleç */
    display: flex; align-items: center; justify-content: center; /* İkonu ortala */
    font-size: 1.2rem; /* İkon boyutu */
    transition: all 0.3s ease; /* Geçiş efekti */
    z-index: 10; /* En üstte dur */
    backdrop-filter: blur(5px); /* Arka planı bulanıklaştır (Glassmorphism) */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Gölge */
    opacity: 0; /* Başlangıçta gizli */
}
.main-image-container:hover .nav-btn { 
    opacity: 1; /* Galeriye gelince butonları göster */
    transform: translateY(-50%) scale(1); /* Görünür yap */
}
.nav-btn:hover { 
    background-color: var(--primary-color); 
    color: #fff; 
    transform: translateY(-50%) scale(1.1); /* Biraz büyüt */
}
.prev-btn { left: 20px; } /* Sol buton konumu */
.next-btn { right: 20px; } /* Sağ buton konumu */

/* THUMBNAILS (Küçük Resimler) */
.gallery-thumbs {
    display: flex; /* Yan yana diz */
    gap: 12px; /* Aralarında boşluk */
    padding: 0 20px; /* Kenar boşlukları */
    margin-top: auto; /* En alta it */
    overflow-x: auto; /* Yatay kaydırma */
    scroll-behavior: smooth; /* Yumuşak kaydırma */
    justify-content: center; /* Ortala */
}
.thumb-item {
    width: 80px; height: 80px; /* Boyutlar */
    border: 2px solid transparent; /* Varsayılan çerçeve */
    border-radius: 12px; /* Köşe yuvarlama */
    cursor: pointer; /* Tıklanabilir */
    flex-shrink: 0; /* Küçülmesini engelle */
    overflow: hidden; /* Taşmayı gizle */
    transition: all 0.3s ease; /* Geçiş */
    opacity: 0.7; /* Yarı saydam */
    background: #f8f9fa;
    padding: 5px; /* İç boşluk */
}
.thumb-item img { 
    width: 100%; height: 100%; 
    object-fit: contain; /* Sığdır */
    mix-blend-mode: multiply; /* Arka planla kaynaştır */
}
.thumb-item:hover { 
    opacity: 1; /* Tam görünür */
    transform: translateY(-3px); /* Yukarı hareket */
}
.thumb-item.active { 
    border-color: var(--primary-color); /* Aktif çerçeve rengi */
    opacity: 1; /* Tam görünür */
    box-shadow: 0 5px 15px rgba(217, 4, 41, 0.15); /* Gölge */
    background: white; 
}
.product-badge {
    position: absolute; top: 25px; left: 25px; /* Konum */
    background: var(--primary-color); 
    color: #fff; 
    padding: 6px 14px; /* İç boşluk */
    border-radius: 6px; /* Yuvarlak köşe */
    font-weight: 700; /* Kalın yazı */
    font-size: 0.75rem; /* Boyut */
    letter-spacing: 1px; /* Harf aralığı */
    z-index: 2; /* Üstte dur */
    box-shadow: 0 5px 20px rgba(217, 4, 41, 0.3); /* Gölge */
    font-family: 'Montserrat', sans-serif; /* Font */
}

/* --- SAĞ TARAF (BİLGİ ALANI) --- */
.product-info-col { 
    display: flex; /* Esnek yapı */
    flex-direction: column; /* Alt alta diz */
    height: 100%; /* Tam yükseklik */
}

.category-tag { 
    font-size: 0.85rem; /* Boyut */
    font-weight: 700; /* Kalınlık */
    color: #888; 
    text-transform: uppercase; /* Büyük harf */
    margin-bottom: 8px; /* Alt boşluk */
    letter-spacing: 1.2px; /* Harf aralığı */
    font-family: 'Montserrat', sans-serif; /* Font */
}

/* ÜRÜN BAŞLIĞI */
.product-name { 
    font-size: 2.2rem; /* Büyük boyut */
    font-weight: 800; /* Çok kalın */
    color: var(--secondary-dark); 
    margin-bottom: 20px; /* Alt boşluk */
    line-height: 1.2; /* Satır aralığı */
    letter-spacing: -0.5px; /* Harfleri yaklaştır */
}

/* FİYAT ALANI */
.product-price-box { 
    margin-bottom: 30px; /* Alt boşluk */
    display: flex; align-items: baseline; /* Hizalama */
    gap: 8px; /* Aralık */
    padding-bottom: 20px; /* İç alt boşluk */
    border-bottom: 1px solid #eee; /* Alt çizgi */
}
.price-amount { 
    font-size: 2rem; 
    font-weight: 800; 
    color: var(--primary-color); 
    letter-spacing: -1px; 
}
.price-currency { 
    font-size: 1.2rem; 
    font-weight: 600; 
    color: #2b2d42; 
}
.price-ask { 
    font-size: 1.3rem; 
    font-weight: 700; 
    color: #2b2d42; 
    background: #f1f3f5; /* Gri arka plan */
    padding: 10px 20px; 
    border-radius: 8px; 
    font-family: 'Montserrat', sans-serif;
}

/* ÖZELLİK KUTUCUKLARI (Specs) */
.specs-summary { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 3 Yan yana kutu */
    gap: 20px; /* Boşluk */
    margin-bottom: 35px; 
}
.spec-item { 
    display: flex; flex-direction: column; /* Alt alta diz */
    background: white; padding: 15px; 
    border-radius: 12px; border: 1px solid #eee; 
    transition: 0.3s;
}
.spec-item:hover { 
    transform: translateY(-3px); /* Yukarı kalkma */
    box-shadow: 0 10px 20px rgba(0,0,0,0.03); 
    border-color: #ddd; 
}
.spec-item span { 
    font-size: 0.75rem; color: #999; 
    text-transform: uppercase; font-weight: 600; 
    letter-spacing: 0.5px; margin-bottom: 5px; 
    font-family: 'Montserrat', sans-serif;
}
.spec-item strong { 
    font-size: 1rem; color: var(--secondary-dark); 
    font-weight: 700; font-family: 'Montserrat', sans-serif; 
    word-break: break-word; /* Uzun kelimeleri kır */
}

/* AÇIKLAMA VE LİSTE */
.product-desc h3 { 
    font-size: 1.2rem; margin-bottom: 15px; 
    color: var(--secondary-dark); font-weight: 700; 
    letter-spacing: -0.5px; 
}
.product-desc p { 
    font-size: 1rem; line-height: 1.7; 
    color: #555; margin-bottom: 30px; font-weight: 400; 
}

.features-list-grid { 
    list-style: none; padding: 0; margin-bottom: 40px; 
    display: grid; grid-template-columns: 1fr 1fr; /* 2 sütun */
    gap: 15px 20px; 
}
.feature-item-card { 
    background: white; padding: 14px 18px; 
    border-radius: 10px; border: 1px solid #f1f1f1; 
    display: flex; align-items: center; gap: 12px; 
    transition: transform 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.02); 
}
.feature-item-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
    border-color: var(--primary-color); 
}
.feature-item-card i { font-size: 1.2rem; color: var(--primary-color); }
.feature-item-card p { margin: 0; color: #333; font-weight: 600; font-size: 0.95rem; font-family: 'Open Sans', sans-serif; }

/* AKSİYON (BUTON) ALANI */
.action-area { 
    margin-top: auto; /* En alta sabitle */
}

.action-row { 
    display: flex; gap: 15px; margin-bottom: 0; 
}
.btn-action { 
    flex: 1; /* Eşit genişlik */
    padding: 18px; border-radius: 12px; 
    font-weight: 700; font-size: 1rem; 
    text-decoration: none; display: flex; 
    align-items: center; justify-content: center; gap: 10px; 
    transition: all 0.3s; color: white; cursor: pointer; 
    border: none; letter-spacing: 0.5px; text-transform: uppercase; 
}
.btn-offer { 
    background: var(--primary-color); 
    box-shadow: 0 10px 30px rgba(217, 4, 41, 0.25); 
}
.btn-offer:hover { 
    background: #b00220; 
    transform: translateY(-3px); 
    box-shadow: 0 15px 40px rgba(217, 4, 41, 0.4); 
}
.btn-whatsapp { 
    background: #25D366; /* Whatsapp Yeşili */
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.25); 
}
.btn-whatsapp:hover { 
    background: #128C7E; 
    transform: translateY(-3px); 
    box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4); 
}

/* ORTALANMIŞ GERİ DÖN BUTONU */
.btn-back-container {
    margin-top: 40px; /* Üst boşluk */
    text-align: center; /* Ortala */
}
.btn-back { 
    color: #888; text-decoration: none; 
    font-size: 1rem; display: inline-flex; 
    align-items: center; gap: 10px; 
    transition: 0.3s; font-weight: 600; 
    padding: 10px 20px; border-radius: 50px; 
    background: white; border: 1px solid #eee;
}
.btn-back:hover { 
    color: var(--primary-color); 
    border-color: var(--primary-color); 
    background: #fff0f3; 
}

/* 3D Kontrolleri (Slider Paneli) */
.controls-panel {
    position: absolute; bottom: 25px; left: 50%; 
    transform: translateX(-50%); /* Ortala */
    background: rgba(255, 255, 255, 0.9); padding: 15px 30px; 
    border-radius: 50px; box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    backdrop-filter: blur(12px); /* Bulanıklık efekti */
    display: flex; gap: 20px; align-items: center; z-index: 10; 
    border: 1px solid rgba(255,255,255,0.5);
}
input[type=range] {
    -webkit-appearance: none; width: 220px; height: 6px; 
    background: #e9ecef; border-radius: 3px; outline: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; 
    width: 22px; height: 22px; border-radius: 50%; 
    background: var(--primary-color); cursor: pointer; 
    transition: .2s; border: 3px solid white; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
input[type=range]::-webkit-slider-thumb:hover { 
    transform: scale(1.1); /* Slider topunu büyüt */
}

/* SWEETALERT ÖZELLEŞTİRMELERİ */
.swal2-popup { border-radius: 20px !important; padding: 2.5em; font-family: 'Montserrat', sans-serif !important; }
.swal2-title { color: #2b2d42 !important; font-weight: 800 !important; letter-spacing: -0.5px; }
.swal2-html-container { color: #6c757d !important; font-size: 1.1em !important; font-family: 'Open Sans', sans-serif !important; }
.swal2-confirm, .swal2-cancel {
    border-radius: 10px !important; font-weight: 700 !important; font-size: 1rem !important; padding: 14px 28px !important; box-shadow: none !important;
}

/* MOBİL UYUMLULUK (Responsive) */
@media (max-width: 992px) {
    .detail-grid { grid-template-columns: 1fr; gap: 40px; } /* Tek sütun yap */
    .main-image-container { height: 400px; min-height: auto; } /* Resim yüksekliğini sınırla */
    .nav-btn { opacity: 1; width: 45px; height: 45px; background: rgba(255,255,255,0.95); } /* Butonları hep göster */
    .product-name { font-size: 1.8rem; } /* Başlığı küçült */
    .price-amount { font-size: 1.6rem; } /* Fiyatı küçült */
    .features-list-grid { grid-template-columns: 1fr; } /* Özellikleri tek sütun yap */
    .action-row { flex-direction: column; } /* Butonları alt alta diz */
    .controls-panel { width: 90%; flex-direction: column; gap: 15px; border-radius: 20px; padding: 20px; } /* Kontrolleri uyarla */
    .product-gallery { height: auto; } /* Galeri yüksekliğini serbest bırak */
}
@media (max-width: 992px) {
    .features-detail-grid {
        grid-template-columns: 1fr; /* Mobilde teknik özellikleri tek sütun yap */
    }
}

/* --- 3D MODEL GÖRÜNTÜLEYİCİ İÇİN YENİ STİLLER --- */

/* Model Wrapper: 3D alanın genel çerçevesi */
.model-viewer-wrapper {
    position: relative; /* İçindeki kontrolleri konumlandırmak için */
    width: 80%; /* Genişlik */
    height: 75vh; /* Yükseklik (Ekranın %75'i) */
    margin: 80px auto; /* Üstten boşluk ve ortalama */
    border-radius: 20px; /* Köşeleri yuvarlat */
    overflow: hidden; /* Taşmayı engelle */
    box-shadow: 0 20px 50px rgba(0,0,0,0.1); /* Derinlik gölgesi */
    background: #eef2f3; /* Arka plan rengi */
}

/* Yükleniyor Yazısı */
#loading-text {
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    color: #333; 
    font-weight: 700; 
    font-size: 1.2rem;
    z-index: 5;
    font-family: 'Montserrat', sans-serif;
}

/* Canvas Alanı (Three.js'in çizim yaptığı yer) */
#canvas-container {
    width: 100%; 
    height: 100%; 
    outline: none; /* Odaklanınca çıkan çerçeveyi kaldır */
}

/* Kontrol Paneli (Döndürme Slider'ı ve Reset Butonu) */
.controls-panel {
    position: absolute; 
    bottom: 25px; 
    left: 50%; 
    transform: translateX(-50%); /* Yatayda ortala */
    background: rgba(255, 255, 255, 0.9); 
    padding: 15px 30px; 
    border-radius: 50px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    backdrop-filter: blur(12px); /* Buzlu cam efekti */
    display: flex; 
    gap: 20px; 
    align-items: center; 
    z-index: 10; 
    border: 1px solid rgba(255,255,255,0.5);
    width: auto; /* İçeriğe göre genişle */
    min-width: 300px;
}

/* Derece Göstergesi */
#degreeDisplay {
    font-weight: 700; 
    color: #333; 
    font-size: 1rem; 
    min-width: 40px; 
    text-align: right;
    font-family: 'Montserrat', sans-serif;
}

/* Slider (Range Input) Özelleştirme */
input[type=range] {
    -webkit-appearance: none; 
    width: 220px; 
    height: 6px; 
    background: #e9ecef; 
    border-radius: 3px; 
    outline: none;
    flex-grow: 1; /* Esnek genişlik */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none; 
    width: 22px; height: 22px; 
    border-radius: 50%; 
    background: var(--primary-color); 
    cursor: pointer; 
    transition: .2s; 
    border: 3px solid white; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

input[type=range]::-webkit-slider-thumb:hover { 
    transform: scale(1.2); /* Hoverda büyüt */
}

/* Reset Butonu */
.controls-panel button {
    background: #fff; 
    color: #333; 
    border: 1px solid #ccc; 
    padding: 10px; 
    border-radius: 50%; 
    cursor: pointer; 
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
}

.controls-panel button:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: rotate(180deg); /* Dönme efekti */
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .model-viewer-wrapper {
        width: 95%; /* Mobilde daha geniş */
        height: 50vh; /* Yüksekliği azalt */
        margin: 40px auto;
    }
    .controls-panel {
        width: 90%; 
        padding: 10px 20px;
        bottom: 15px;
    }
    input[type=range] {
        width: 100%; /* Slider tam genişlik */
    }
}