<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geliştirilmiş CSS Önizlemesi</title>
    <!-- Owl Carousel Kütüphaneleri -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <!-- Font Awesome İkonları -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* Genel Sayfa Stilleri */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5;
            padding: 20px;
            --green: #20c997; /* Ana yeşil renk güncellendi */
            --dark-blue: #181411;
        }

        /* Ana Vitrin Konteyneri */
        body .urunler.vitrin_owl {
            max-width: 1200px;
            margin: 50px auto;
            padding: 0;
        }

        #urunler_0 {
            position: relative;
            border: none;
            box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 40px;
            background-color: #ffffff;
            /* Hafif desenli arkaplan */
            background-image: radial-gradient(#f0f2f5 1px, transparent 1px);
            background-size: 15px 15px;
            padding: 30px;
            border-radius: 12px;
        }

        /* Başlık Stili */
        #urunler_0 .baslik {
            background: transparent;
            color: var(--dark-blue) !important;
            border-bottom: 2px solid #f0f2f5;
            font-size: 26px;
            font-weight: 700;
            padding-bottom: 15px;
            margin-bottom: 30px;
        }

        /* Owl Carousel Navigasyon Okları */
        #urunler_0 .owl-theme .owl-nav .owl-next,
        #urunler_0 .owl-theme .owl-nav .owl-prev {
            border: 1px solid #e0e0e0;
            background: #ffffff;
            color: #555;
            width: 42px;
            height: 42px;
            border-radius: 50% !important;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        #urunler_0 .owl-theme .owl-nav .owl-next:hover,
        #urunler_0 .owl-theme .owl-nav .owl-prev:hover {
            border-color: var(--green);
            background: var(--green);
            color: #fff;
            transform: scale(1.1);
        }
        #urunler_0 .owl-nav {
            position: absolute;
            top: -85px;
            right: 0;
        }
        #urunler_0 .owl-nav .owl-prev {
            margin-right: 8px;
        }

        /* Owl Carousel Navigasyon Noktaları (Dots) */
        #urunler_0 .owl-theme .owl-dots .owl-dot span {
            width: 10px;
            height: 10px;
            background: #d1d1d1;
            transition: all 0.3s ease;
        }
        #urunler_0 .owl-theme .owl-dots .owl-dot.active span,
        #urunler_0 .owl-theme .owl-dots .owl-dot:hover span {
            background: var(--green);
            width: 25px;
        }

        /* Ürün Kartı Stilleri */
        .urun-karti {
            border: 1px solid #f0f0f0;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            background: #fff;
            margin: 5px;
            transition: all 0.3s ease;
            overflow: hidden;
        }
        .urun-karti:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        .urun-karti img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .urun-karti h4 {
            font-size: 17px;
            font-weight: 600;
            color: var(--dark-blue);
            margin: 0 0 10px 0;
        }
        .urun-karti .fiyat {
            font-size: 20px;
            font-weight: 700;
            color: var(--green);
            margin-bottom: 15px;
        }
        .sepete-ekle-btn {
            background-color: var(--dark-blue);
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 50px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .sepete-ekle-btn:hover {
            background-color: var(--green);
        }
    </style>
</head>
<body>

    <div class="urunler vitrin_owl">
        <div id="urunler_0">
            <h2 class="baslik">Öne Çıkan Ürünler</h2>
            <div class="urunler-carousel owl-carousel owl-theme">
                <!-- Örnek Ürün 1 -->
                <div class="item">
                    <div class="urun-karti">
                        <img src="https://placehold.co/400x400/20c997/ffffff?text=Ürün+1" alt="Ürün 1">
                        <h4>Modern Sandalye</h4>
                        <p class="fiyat">499,90 TL</p>
                        <button class="sepete-ekle-btn"><i class="fas fa-shopping-cart"></i> Sepete Ekle</button>
                    </div>
                </div>
                <!-- Örnek Ürün 2 -->
                <div class="item">
                    <div class="urun-karti">
                        <img src="https://placehold.co/400x400/343a40/ffffff?text=Ürün+2" alt="Ürün 2">
                        <h4>Ahşap Masa</h4>
                        <p class="fiyat">1.250,00 TL</p>
                        <button class="sepete-ekle-btn"><i class="fas fa-shopping-cart"></i> Sepete Ekle</button>
                    </div>
                </div>
                <!-- Örnek Ürün 3 -->
                <div class="item">
                    <div class="urun-karti">
                        <img src="https://placehold.co/400x400/ffc107/ffffff?text=Ürün+3" alt="Ürün 3">
                        <h4>Dekoratif Lamba</h4>
                        <p class="fiyat">275,50 TL</p>
                        <button class="sepete-ekle-btn"><i class="fas fa-shopping-cart"></i> Sepete Ekle</button>
                    </div>
                </div>
                <!-- Örnek Ürün 4 -->
                <div class="item">
                    <div class="urun-karti">
                        <img src="https://placehold.co/400x400/007bff/ffffff?text=Ürün+4" alt="Ürün 4">
                        <h4>Yumuşak Koltuk</h4>
                        <p class="fiyat">2.800,00 TL</p>
                        <button class="sepete-ekle-btn"><i class="fas fa-shopping-cart"></i> Sepete Ekle</button>
                    </div>
                </div>
                <!-- Örnek Ürün 5 -->
                <div class="item">
                    <div class="urun-karti">
                        <img src="https://placehold.co/400x400/dc3545/ffffff?text=Ürün+5" alt="Ürün 5">
                        <h4>Kitaplık</h4>
                        <p class="fiyat">899,99 TL</p>
                        <button class="sepete-ekle-btn"><i class="fas fa-shopping-cart"></i> Sepete Ekle</button>
                    </div>
                </div>
                 <!-- Örnek Ürün 6 -->
                <div class="item">
                    <div class="urun-karti">
                        <img src="https://placehold.co/400x400/6f42c1/ffffff?text=Ürün+6" alt="Ürün 6">
                        <h4>Orta Sehpa</h4>
                        <p class="fiyat">650,00 TL</p>
                        <button class="sepete-ekle-btn"><i class="fas fa-shopping-cart"></i> Sepete Ekle</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery ve Owl Carousel JS Kütüphaneleri -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <script>
        // Owl Carousel'i başlatma
        $(document).ready(function(){
          $(".urunler-carousel").owlCarousel({
            loop: true,
            margin: 25, // Kartlar arası boşluk artırıldı
            nav: true, // Navigasyon oklarını etkinleştir
            dots: true, // Noktaları etkinleştir
            navText: ["<i class='fas fa-chevron-left'></i>","<i class='fas fa-chevron-right'></i>"], // Oklar için ikonlar
            responsive:{
                0:{
                    items: 1 // 0px ve üzeri ekranlarda 1 ürün
                },
                600:{
                    items: 2 // 600px ve üzeri ekranlarda 2 ürün
                },
                1000:{
                    items: 4 // 1000px ve üzeri ekranlarda 4 ürün
                }
            }
          });
        });
    </script>

</body>
</html>
