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

        body {
            background-color: white;
        }
        
        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: #2c3e50;
            font-size: 13px;
            margin: 8px auto;
        }

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

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

        header {
            background-color: #2c3e50;
            /* position: sticky; */
            width: 100%;
            top: 0px;
            z-index: 20;
            display: flex;
        }

        /* LOGO */
        header img {
            position: absolute;
            margin: 10px 0px 0px 70px;
            height: 45px;
            width: auto;
            z-index: 20;
        }
        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: 19;
        }

        .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;
        }

         /* 3 çizgi */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: #bc9c22;
            font-size: 24px;
            cursor: pointer;
            padding: 3px 30px;
            width: 100%;
            text-align: right;
            box-sizing: border-box;
        }

                         /* İÇ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: #e0e0e0;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            border-radius: 8px;
        }
        .container span{
             color: #1abc9c;
             font-size: 15px;
             font-weight: bold;

        }

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

        .product-card {
            display: flex;
            flex-direction: column;  /* İçindeki elemanları dikine hizala */
            background: #fff;
            border: 1px solid #e0e0e0;
            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: 200px;
            object-fit: cover;
            border-radius: 6px;
            cursor: pointer;
            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;
            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;
            /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); */
        }

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

        footer {
            background-color: #2c3e50;
            text-align: center;
            padding: 15px;
            font-size: 14px;
        }
        footer 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;
        }

                             /*    LIGHTBOX ANA ALANI    */

.lightbox {
  display: none; /* Başlangıçta gizli ve yer kaplamaz */
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9); /* Taş detayları için koyu arka plan */
  flex-direction: column;   
  justify-content: center;
  align-items: center;
  z-index: 18;
}

/* ARKA PLAN KAPATMA KATMANI */
.backdrop-close {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  cursor: default;
}

/* BÜYÜK RESİM KAPSAYICISI */
.img-container {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 85%; /* Taşın damarları daha büyük ve net görünsün */
  background: #ffffff;
  border-radius: 4px; 
  overflow: hidden;   
  z-index: 2; 
}

/* YALNIZCA RESİMLER ARASI GEÇİŞ ANİMASYONU */
.img-container img {
  display: block;
  max-width: 100%; max-height: 70vh; 
  width: auto; height: auto;
  object-fit: contain;   
  transition: filter 0.500s ease-in-out;   /* JavaScript'teki ms ile tam senkronize geçiş */
  filter: brightness(100%);                /* Varsayılan parlaklık tam (%100) */
  opacity: 1;

}

/* JavaScript geçiş yaparken resmi anlık söndüren yardımcı sınıf */
.img-container img.fade-out {
    filter: brightness(10%);      /* 0% olursa Resmi tamamen siyah (karanlık) yapar */
    opacity: 1;                /* Kararma esnasında resmin yok olmasını engeller */
}

/* TAŞ İSMİ ALANI */
.caption {
  background: #e0e0e0;
  color: #1a1a1a;
  padding: 13px;
  margin: 0;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  border-top: 1px solid #1a1a1a;
  text-transform: capitalize; /* Baş harfleri büyük yapar */
}

/* GOOGLE DOSTU FONKSİYONEL BUTON STİLLERİ */
.close, .nav-btn {
  position: absolute; background: none; border: none; outline: none;
  color: white; font-weight: bold; cursor: pointer;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
  opacity: 0.5; transition: opacity 0.2s, color 0.2s; z-index: 10;
  padding: 0;
}
.close:hover, .nav-btn:hover { opacity: 1; color: #f39c12; } /* Şık kurumsal sarı tonu */

.close { top: 10px; right: 15px; font-size: 38px; line-height: 1; }
.nav-btn { top: 50%; transform: translateY(-50%); font-size: 45px; padding: 10px 15px; }
.prev-btn { left: 5px; }
.next-btn { right: 5px; }
                     
                     /*    LIGHTBOX ANA ALANI BİTTİ   */

  

        /* MOBİL EKRANLAR İÇİN CSS (max-width: 768px) */
        @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;
            }

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

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

            .menu-links.active {
                display: flex;
            }

            .container {
                margin: 10px;
                padding: 5px;
            }
            .container p{
                font-size: 11px;
            }
            .container span{
                font-size: 13px;
            }

            .product-grid{
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(160px, 2fr));
                 gap: 10px;
            }
            .product-card img {
                height: 120px;
            }

            .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 p{
                 word-spacing: normal;
                 letter-spacing: normal;

             }


                        /* LİGHTBOX MOBİL OPTİMİZASYONLARI */

            /* Lightbox açıkken telefonda arkadaki sayfanın gereksiz kaymasını önler */
            .lightbox {
                 touch-action: none; 
            }

                     /* Resim çerçevesi mobilde ekranı daha iyi kaplasın */
            .img-container {
                 max-width: 95%; 
            }
  
            .img-container img {
                 max-height: 60vh; /* Yazıya ve butonlara mobilde yer kalsın */
            }

                 /* Mobilde sağ-sol ok butonlarını büyütelim ki parmakla rahat basılsın */
            .nav-btn {
                font-size: 35px;
                padding: 15px 10px;
                opacity: 0.8; /* Mobilde oklar daha görünür olsun */
            }
  
            .prev-btn { left: 0; }
            .next-btn { right: 0; }
  
                 /* Mobilde kapatma X butonu daha geniş bir dokunma alanına sahip olsun */
            .close {
                top: 5px;
                right: 10px;
                font-size: 42px;
                padding: 10px;
            }
                        /* LİGHTBOX MOBİL OPTİMİZASYONLARI BİTİŞİ */

}