/* GENEL AYARLAR */
        * {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             box-sizing: border-box;
             margin: 0;
             padding: 0;
        }

        body {
            background-color: white;
        }
        .guncel{
            width: 100%;
            max-width: 1200px;
            margin: 10px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .guncel p{
            text-decoration: underline;
            font-size: 11px;
            color:#1abc9c;
            font-weight: bold;
        }
        .guncel a{
            font-size: 14px;
            font-weight: bold;
            padding-left: 20px;
            text-shadow: 0 5px 15px rgb(255, 0, 0, 0.5);
  
                   /* Yumuşak ve sürekli dönen renk animasyonu */
            animation: renkdegis 2s alternate infinite;
        }
        @keyframes renkdegis {
            0% { color: black; }
            100% { color: red; }
        }
        
        h1{
            font-size: 20px;
            color: #2c3e50;
            text-align: center;
            padding: 5px;
        }
        h2 {
            color: #506980;
            font-size: 18px;
            border-bottom: 2px solid #1abc9c;
            margin-top: 15px;
            padding-bottom: 5px;
            padding-left: 15px;
        }

        h3 {
            color: #535353;
            font-size: 10px;
            letter-spacing: 0.5px;
            margin: 8px 0px;
        }

        p  {
            color: #3e5f80;
            padding-left: 5px;
            font-size: 14px; 
        }

        hr {
            border: 2px solid rgb(182, 13, 13);
            margin-bottom: 15px;
        }

        header {
            background-color: #2c3e50;
            width: 100%;
            top: 0px;
            display: flex;
        }

        /* LOGO */
        header img {
            position: absolute;
            margin: 10px 0px 0px 70px;
            height: 45px;
            width: auto;
        }
        header a {
            margin: auto;
            text-shadow: -1px 1px 8px #bc9c22, 1px 1px 8px #bc9c22;
            color: white;
            font-size: 28px;
            padding: 12px 2px;
            font-weight: bold;
        }

        /* MASAÜSTÜ MENÜ AYARLARI */
        nav {
            position: sticky;
            background-color: #34495e;
            top: 0px;
            z-index: 17;
        }

        .menu-toggle {
                display: none;
        }

        .menu-links {
            display: flex;
            justify-content: center;
            margin: 0;
            padding: 0;
        }

        .menu-links a {
            font-size: 15px;
            color: white;
            text-decoration: none;
            padding: 7px 20px;
            display: block;
            font-weight: bold;
            transition: background 0.4s;
        }

        .menu-links a:hover {
            background-color: #1abc9c;
        }

        .menu-links a.active {
            background-color: #0d7d67 !important; 
            color: white !important;
        }

                         /* İÇERİK ALANI */
        .container {
            max-width: 1200px; /* 10 ürün yan yana daha rahat sığsın diye genişletildi */
            margin: 10px auto;
            padding: 6px;
            background-color: #e4e4e4;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            border-radius: 8px;
        }
        .container span{
             color: #1abc9c;
             font-size: 15px;
             font-weight: bold;

        }

                     /* 🏆 YATAY KAYDIRMA ALANI */
        .yatay-galeri-bolumu{
            display: flex; /* Kartları zorunlu olarak yan yana dizer */
            overflow-x: auto; /* Genişlik aşılınca yatay kaydırmayı açar */
            overflow-y: hidden; /* Dikey kaydırmayı tamamen kapatır */
            gap: 10px; /* Kartların arasındaki boşluk */
            padding-top: 10px;
            padding-bottom: 15px;
            -ms-overflow-style: none;  /* IE ve Edge */
            scrollbar-width: auto;  /* Firefox */
            -webkit-scrollbar-display: auto; /* none gizler */
                 /* Mobilde parmakla kaydırmanın yağ gibi akıcı olmasını sağlar */
            scroll-snap-type: x mandatory; 
            -webkit-overflow-scrolling: touch; 
        }

        .urun-karti {
                 /* ÜRÜN KARTLARI (Bilgisayarda ekranda yan yana tam 6 adet sığdırır) */
            flex: 0 0 calc((100% - 45px) / 6.5); /* Kartların küçülmesini engeller ve tam boyut verir */
            scroll-snap-align: start;            /* Kaydırırken kartın ekrana tam oturmasını sağlar */
            background: #fff;
            border-radius: 6px;
            padding: 3px;
            text-align: center;
            box-shadow: 1px 5px 10px rgba(0,0,0,0.5);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;             /* İçindeki elemanları dikine hizala */
        }

        /* Üzerine gelince hafif büyüme ve gölge efekti */
        .urun-karti:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
        }

        /* Resim Kutusu (Farklı boyutlardaki resimleri milimetrik eşitler) */
        .resim-kutusu {
            width: 100%;
            height: 100px;
            border-radius: 6px;
            background-color: #f9f9f9;
            object-fit: cover; /* Resmi bozmadan kutuya tam sığdırır */
        }

        .resim-kutusu img {
            width: 100%;
            height: 100%;
            border: 2px solid lightgrey ;
            border-radius: 6px;
            cursor: pointer;
        }

        .urun-karti p {
            margin: 3px auto;
            color: #444;
            font-size: 12px;
            font-weight: bold;
        }
        .urun-karti a{
            margin-top: auto; /* Yazı bitiminden sonraki tüm boşluğu üstüne alır, butonu tabana basar */
            margin-bottom: 3px;
            padding: 4px;
            background-color: #1abc9c;
            color: white;
            font-size: 13px;
            font-weight: bold;
            letter-spacing: 0.5px;
            border-radius: 4px;
        }

                        /* 🏆 YATAY KAYDIRMA BİTTİ */

                         /* ÜRÜN BÖLÜMÜ */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            /* align-items: stretch; Tüm kartların boyunu en uzun karta eşitler */
            gap: 10px;
            margin: 10px 0px;
        }

        .product-card {
            display: flex;
            flex-direction: column;  /* İçindeki elemanları dikine hizala */
            background: #fff;
            border: 3px solid lightgrey;
            border-radius: 8px;
            overflow: hidden;
            text-align: center;
            padding: 5px;
            box-shadow: 0px 2px 5px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .product-card img {
            width: 100%;
            height: 60px;
            object-fit: cover;
            border-radius: 6px;
            border: 2px solid lightgrey ;
        }

        .product-btn {
            margin-top: auto; /* Yazı bitiminden sonraki tüm boşluğu üstüne alır, butonu tabana basar */
            padding: 8px;
            background-color: #1abc9c;
            font-size: 12px;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
            transition: background 0.5s;
        }

        .product-btn:hover {
            background-color: #16a085;
        }


        /* İletişim ve Harita Alanı */

        .contact-section {
            background-color: #1a1a1a;
            padding: 40px 20px;
            text-align: center;
        }
        .contact-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .contact-info {
            margin-bottom: 30px;
        }

        .info-title {
            font-size: 32px;
        }

        .contact-info p {
            margin: 10px;
            color: white;
        }

        .map-container {
            position: relative;
            padding-bottom: 60%;
            height: 0;
            overflow: hidden;
            border-radius: 8px;
        }

        .map-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        .footer-bottom {
            background-color: #2c3e50;
            text-align: center;
            padding: 15px;
            font-size: 14px;
        }
        .footer-bottom p{
            color: #777;
            /* word-spacing: 1px; */
            letter-spacing: 1px;
        }

                /* whatsapp buton */
        .whatsapp-btn {
            position: fixed;
            bottom: 10px;
            right: 30px;
            border-radius: 50px;
            box-shadow: 1px 1px 8px #999;
            z-index: 19;
            transition: all 0.7s ease;
        }

        .whatsapp-btn:hover {
            background-color: #128c7e;
            transform: scale(1.2);
            bottom: 20px;
        }

        .whatsapp-icon {
            width: 100px;
            height: 100px;
        }
  

        @media (max-width: 768px) {

            header a {
                font-size: 22px;
                padding-left: 20px;
            }
            /* LOGO */
            header img {
                 margin: 8px auto;
                 padding-left: 5px;
                 height: 35px;
                 width: auto;
            
            }
            
            .menu-toggle {
            display: block;
            background: none;
            border: none;
            color: #bc9c22;
            font-size: 24px;
            cursor: pointer;
            padding: 3px 30px;
            width: 100%;
            text-align: right;
            box-sizing: border-box;
            }

            .menu-links {
                display: none;
                flex-direction: column;
                background-color: #34495e;
                width: 100%;
            }

            .menu-links a {
                text-align: center;
                border-top: 1px solid #2c3e50;
                padding: 12px 0;
            }

            .menu-links.active {
                display: flex;
            }
            .guncel p{
                font-size: 9px !important;
            }
            .guncel a{
                font-size: 10px;
                padding-left: 5px;
            }

            .container {
                margin: 10px;
                padding: 2px;
            }
            .container p{
                font-size: 11px;
            }
            .container span{
                font-size: 13px;
            }
                        /* yatay kaydırma mobil kodların başlangıcı */
            .yatay-galeri-bolumu{
                  scrollbar-width: none;
            }
            .urun-karti {
                flex: 0 0 calc((100% - 5px) / 3.5);
            }
            .resim-kutusu {
                width: 100%;
                height: 80px; /* Telefonlarda resim boyunu biraz küçülttük */
            }
            .urun-karti a{
                font-size: 12px;
            }
            .urun-karti p{
                font-size: 10px;
            }            /* yatay kaydırma mobil kodların bitişi */


            .product-grid{
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
                 gap: 5px;
            }
            .product-card img {
                height: 50px;
            }
            
            .whatsapp-btn {
                box-shadow: 0px 0px 0px;
                background-color: transparent;
            }
            .whatsapp-btn:hover {
                  background-color: transparent;
                  transform: scale(1.0);
                  bottom: 10px;
            }
            .whatsapp-icon {
                  width: 90px;
                  height: 80px;
            }

            .footer-bottom p{
                 word-spacing: normal;
                 letter-spacing: normal;
             }
        }