/* style.css */
        :root {
            --ana-sari: #eb891c;
            --koyu-siyah: #1a1a1a;
            --acik-beyaz: #f8f9fa;
            --gri: #f8f9fa;
        }

        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

        /* Navbar Ayarları */
        .navbar 
        { 
            background-color: var(--koyu-siyah); border-bottom: 3px solid var(--ana-sari); 
        }
        .navbar-brand, .nav-link 
        { 
            color: #ffffff !important; 
            font-weight: bold;
            transition: all 0.3s ease-in-out; /* Geçiş yumuşaklığı */
            position: relative;
        }
        .nav-link:hover 
        { 
            color: #eb891c !important; /* Üzerine gelince yazı sarı olur */
            text-shadow: 0 0 10px rgba(255, 204, 0, 0.8), 
               0 0 20px rgba(255, 204, 0, 0.5);
               transform: translateY(-2px); /* Hafif yukarı zıplama efekti */
        }
                #logo {
            width: 90px;
            height: auto;
        }
        /* Navbar Ayarları */
        .btn-sari {
            color: black !important; /* İlk hali turuncu kalsın demiştiniz */
            border-color: #eb891c !important;
            transition: all 0.4s ease; /* Geçişin yumuşaklığı için */
            background-color: var(--ana-sari);
            font-weight: bold;
            border: none;
            padding: 10px 30px;
        }
        .btn-sari:hover {
            background-color: #f8f9fa !important; /* Canlı Sarı */
            border-color: #eb891c !important;     /* Çerçeve de sarı */
            color: #eb891c !important;            /* Yazı Siyah */
            box-shadow: 0 5px 15px rgba(255, 204, 0, 0.4); /* Hafif sarı parıltı */
            background-color: black;
            color:#eb891c;
        }


 /* Teklif Al Butonu */
.btn-outline-light.btn-lg {
  color: #eb891c !important; /* İlk hali turuncu kalsın demiştiniz */
  border-color: #eb891c !important;
  transition: all 0.4s ease; /* Geçişin yumuşaklığı için */
}

/* Üzerine gelince (Hover) durumu */
.btn-outline-light.btn-lg:hover {
  background-color: #eb891c !important; /* Canlı Sarı */
  border-color: #eb891c !important;     /* Çerçeve de sarı */
  color: #000000 !important;            /* Yazı Siyah */
  box-shadow: 0 5px 15px rgba(255, 204, 0, 0.4); /* Hafif sarı parıltı */
}


        /* Ürün Kartları Hover Efekti */
.product-card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Hover sırasında efekt */
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0,0,0,0.2);
}

.product-card:hover img {
    transform: scale(1.05);
}

/* Kart içi renk ve buton hover */
.product-card .card-body {
    transition: background-color 0.3s ease;
}

.product-card .btn-outline-warning:hover {
    background-color: var(--ana-sari);
    color: var(--koyu-siyah);
    border-color: var(--ana-sari);
}

        /* Ürün Üst Alanı */
        .product-header { padding: 60px 0; background: var(--gri); }
        .main-product-img { width: 100%; border-radius: 4px; border-bottom: 8px solid var(#eb891c); }
        .thumb-img { width: 100%; height: 80px; object-fit: cover; cursor: pointer; transition: 0.3s; border: 2px solid transparent; }
        .thumb-img:hover { border-color: var(#eb891c); }

        /* Teknik Tablo */
        .specs-table th { background-color: var(--koyu-siyah); color: var(#eb891c); width: 40%; }
        
        /* Özellik İkonları */
        .feature-icon-box { border: 1px solid #eee; padding: 20px; text-align: center; transition: 0.3s; height: 100%; }
        .feature-icon-box i { font-size: 2rem; color: var(#eb891c); margin-bottom: 15px; }
        .feature-icon-box:hover { background: var(--koyu-siyah); color: white; border-color: var(--koyu-siyah); }

        .sticky-order-card { position: sticky; top: 100px; }
        .btn-order { background: var(--koyu-siyah); color: var(--koyu-siyah); font-weight: 800; border-radius: 0; padding: 15px; border: none; }

        footer {
            background-color: var(--siyah);
            color: white;
            padding: 70px 0 30px;
            border-top: 4px solid var(--sari);
        }
        
        footer h5 {
            color: var(--sari);
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .footer-link {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            transition: 0.3s;
            display: inline-block;
            margin-bottom: 8px;
        }

        .footer-link:hover {
            color: var(--sari);
            padding-left: 8px;
        }

        .social-icons a {
            color: var(--siyah);
            background: var(--sari);
            width: 35px;
            height: 35px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            transition: 0.3s;
            text-decoration: none;
            font-size: 1.5rem;
        }

        .social-icons a:hover {
            background: white;
            transform: translateY(-3px);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            margin-top: 40px;
            padding-top: 25px;
            font-size: 0.9rem;
            color: rgba(255,255,255,0.5);
        }

.fixed-social-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column; /* Üst üste dizer */
    gap: 12px; /* Butonlar arası mesafe */
    z-index: 9999;
}

.social-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 24px;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: 0.3s transform;
    transition: all 0.4s ease; /* Işığın yumuşak yayılması için */
    z-index: 9999;
    border: 1px solid rgba(255,255,255,0.1);
}

/* WhatsApp - Yeşil Parlama */
.social-btn.whatsapp:hover {
    transform: scale(1.15);
    background-color: #25d366 !important;
    border-color: #25d366 !important;
    transform: scale(1.2) translateX(-10px); /* Üzerine gelince belirginleşir */
    box-shadow: 0 0 10px #25d366, 0 0 30px #25d366, 0 0 50px rgba(37, 211, 102, 0.8) !important;
    text-shadow: 0 0 10px #25d366;
    
    /* İkonun Kendisini Parlatır */
    text-shadow: 0 0 10px white, 0 0 20px #25d366 !important;
}

/* Facebook - Mavi Parlama */
.social-btn.facebook:hover {
    transform: scale(1.15);
    border-color: #1877F2;
    transform: scale(1.2) translateX(-10px); /* Üzerine gelince belirginleşir */
    box-shadow: 0 0 10px #1877F2, 0 0 30px #1877F2, 0 0 50px #1877F2;
    text-shadow: 0 0 10px #1877F2;
}

/* Instagram - Pembe/Mor Parlama */
.social-btn.instagram:hover {
    transform: scale(1.15);
    border-color: #d6249f;
    transform: scale(1.2) translateX(-10px); /* Üzerine gelince belirginleşir */
    box-shadow: 0 0 10px #d6249f, 0 0 30px #fd5949, 0 0 50px #d6249f;
    text-shadow: 0 0 10px #fd5949;
}

.social-btn:hover {
    transform: scale(1.1);
    font-size: 32px;
}

/* Renk Tanımları */
.whatsapp { background-color: #25d366; }
.facebook { background-color: #3b5998; }
.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }


/* Responsive adjustments */
        @media (max-width: 767px) {
            
            
            /* Sosyal medya ikonları mobil için */
            .fixed-social-buttons {
        bottom: 15px; /* Mobilde biraz daha köşeye çeker */
        right: 15px;
        gap: 8px;    /* Buton arası boşluğu daraltır */
    }
    .social-btn {
        width: 45px;  /* Mobilde biraz küçültürüz */
        height: 45px;
        font-size: 20px; /* İkonu da orantılı küçültürüz */
    }
            .hero-section h1 {
                font-size: 2rem;
            }
            .hero-section p {
                font-size: 1rem;
            }
            .btn-lg {
                padding: 8px 20px;
                font-size: 0.9rem;
            }
        }