/* Temel Renkler ve Değişkenler */
:root {
  --primary-color: #000000; /* Siyah */
  --secondary-color: #d9534f; /* Bootstrap'ın "danger" rengi (kırmızı) */
  --accent-color: #ffffff; /* Beyaz */
  --text-color: #444;    /* Koyu Gri (okunabilirlik için) */
  --text-color-light: #6c757d; /* Açık Gri (açıklamalar, alt bilgiler vb. için) */
  --background-color: #ffffff; /* Beyaz */
  --background-color-alt: #f8f9fa;  /* Çok Açık Gri (alternatif arkaplanlar için) */
  --link-color: #d9534f;
  --link-hover-color: #b8312f; /* Daha koyu kırmızı */
  --button-bg-color: #d9534f;
  --button-text-color: #ffffff;
  --button-hover-bg-color: #b8312f;
  --button-hover-text-color: #ffffff;
  --border-color: #cccccc; /* Açık Gri (border'lar için) */
  --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.15);
  --border-radius: 8px; /* Yuvarlak köşeler için */
}


body {
    top: 0px !important;
	    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
html, body {
  height: 100%; /* Bunu KALDIRIN veya yorum satırı yapın */
  /* min-height: 100vh;  Bunu KULLANMAYIN (body için) */
  margin: 0; /* body'nin varsayılan margin'ini sıfırla */
  padding: 0;
  display:flex; /* body'i flex container yap */
  flex-direction: column;/* Esnek öğeleri sütun olarak ayarla */
	  overflow-y: auto;
}
main {
   flex: 1;  /* main'in, body içinde kalan tüm boş alanı kaplamasını sağla */
  /* İsteğe bağlı: Üst ve alt boşlukları buradan da ayarlayabilirsiniz: */
  /* padding-top: 2rem;
  padding-bottom: 2rem; */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif; /* Google Fonts'tan Raleway (Başlıklar için) */
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--link-hover-color);
}

/* Navbar */
.navbar {
    background-color: var(--primary-color) !important;
    box-shadow: var(--box-shadow);
}

.navbar-brand,
.navbar-nav .nav-link {
    color: var(--accent-color) !important;
    font-weight: 600;
}
/* Navbar linklerinin üzerine gelindiğinde ve aktif link */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #fff !important;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius);
}
/* Mobil menü butonu */
.navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
.navbar-toggler {
    border-color: rgba(255,255,255, 0.2) !important;
}

/* Navbar dropdown üzerine gelince aç */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu{
    display: block; /*Üzerine gelince dropdown aç*/
}

/* Navbar dropdown arkaplan ve border */
.dropdown-menu{
  background-color: var(--primary-color);
  border:none;
   min-width: 8rem; /*Minimum Genişlik*/
}
/* Navbar dropdown link renkleri */
  .dropdown-item{
    color:#fff;
    transition: color 0.3s ease, background-color 0.3s ease;
}
.dropdown-item:hover{
  color:var(--primary-color);
  background-color: var(--accent-color);
}

/* ... (diğer stilleriniz) ... */

/* GENEL BUTON STİLİ */
.btn { /* Tüm Bootstrap butonları için temel stil */
    display: inline-block; /* Gerekirse inline-block olarak davran */
    font-weight: 400; /* Normal kalınlık */
    line-height: 1.5;
    color: var(--text-color); /* Yazı rengi */
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none; /* Seçilemez */
    background-color: transparent; /* Arkaplan rengi yok (temel sınıfta) */
    border: 1px solid transparent; /* Kenarlık yok (temel sınıfta) */
    padding: 0.6rem 1.5rem;  /*padding arttırıldı*/
    font-size: 1rem;
    border-radius: var(--border-radius); /* Yuvarlak köşeler */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* BÜYÜK BUTONLAR (İsteğe bağlı) */
.btn-lg {
  padding: 0.8rem 2rem;  /* padding daha da artırıldı*/
  font-size: 1.25rem;
  border-radius: 10px; /* Daha yuvarlak */
}

/* BİRİNCİL BUTON (Kırmızı) */
.btn-primary {
    background-color: var(--secondary-color); /* Kırmızı */
    color: var(--accent-color); /* Beyaz */
    border-color: var(--secondary-color); /* Kırmızı */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--link-hover-color); /* Daha koyu kırmızı */
    color: var(--accent-color);
    border-color: var(--link-hover-color);
    box-shadow: var(--box-shadow-hover);
}

/* İKİNCİL BUTON (outline-secondary) */
.btn-outline-secondary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--secondary-color);
    color: var(--accent-color);
}
/* İSTEĞE BAĞLI: Eğer "success" (yeşil) buton kullanıyorsanız */
.btn-success {
  background-color: #28a745;
    border-color: #28a745;
    color: #fff; 
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #218838;
    border-color: #1e7e34;
    color: #fff; 
}

/* Kartlar (Card) */
.card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* İçerik taşmasını engelle (resimler için) */
    background-color: var(--background-color);
}

.card:hover {
    transform: translateY(-8px); /* Hafif yukarı kalkma efekti */
    box-shadow: var(--box-shadow-hover);
}

.card-img-top {
    border-radius: var(--border-radius) var(--border-radius) 0 0; /* Sadece üst köşeleri yuvarla */
    object-fit: cover;
    height: 200px; /* Sabit yükseklik (ürün kartları için) */
}

/* Kategori kartları için özel resim yüksekliği */
.category-card .card-img-top {
    height: 150px;
	 
	
}

.card-body {
    padding: 1.25rem;
}

.card-title {
    color: var(--primary-color);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
     font-weight: 600;
    height: 3em; /* 2 satır */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-text {
    margin-bottom: 1rem;
     color: var(--text-color-light);
}
/* Ürün Açıklamaları için özel sınıf */
.product-description {
    height: 3em; /* Yaklaşık 2 satır */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.card .price {
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

/* Footer */
footer {
     background-color: var(--primary-color);
    color: var(--accent-color);
    padding: 40px 0; /* Daha fazla iç boşluk */
    text-align: center; /* İçeriği ortala */
    margin-top: auto;/*Sayfanın altına it*/
}

footer h5 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
    font-weight: bold;
}

footer a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s ease;
}



footer ul {
    padding-left: 0;
    list-style: none;
}

footer ul li {
    margin-bottom: 0.5rem;
}


-
footer hr {
    border-top-color: rgba(255, 255, 255, 0.2);
}

/* İletişim Bilgileri */
.contact-info {
  display:flex;
  flex-direction:column;
}
.contact-info p {
    margin-bottom: 0.25rem;
}

.contact-info i {
    margin-right: 0.5rem;
    color: var(--secondary-color);
}

/* Header Bölümü */
header {
    min-height: 70vh; /* Minimum Yükseklik */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.carousel-caption {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Form Elemanları */
.form-control {
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
    outline: none;
}

textarea.form-control {
    resize: vertical;
}

/* Bölüm Başlıkları (Section Headings) */
.section-heading {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    font-size: 2rem;
    font-weight: bold;
}

.section-heading::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--secondary-color);
    transform: translateX(-50%);
}

/* index.php'deki kategori bölümü */
#categories {
    display: flex;        /* Flexbox kullan */
    flex-wrap: nowrap;     /* Elemanları tek satırda tut */
    overflow-x: auto;     /* Yatay kaydırmayı etkinleştir */
    gap: 1rem;          /* Kartlar arasında boşluk (hem yatay hem dikey) */
    padding-bottom: 1rem; /* Kaydırma çubuğu için altta boşluk */
}

/* index.php'deki öne çıkan ürünler ve kategori ürünleri */
#featured-products .row,
#featured-category-products .row {
  row-gap: 1.5rem; /* Kartlar arasında dikey boşluk */
  column-gap: 1.5rem; /* Kartlar arasında yatay boşluk */
}

/* Küçük ekranlarda (telefonlar) */
@media (max-width: 767.98px) {
    #featured-products .row,
    #featured-category-products .row {
        row-cols: 2; 
		
    }
	.category-card .card-img-top {
    width: 250px;
	   }
	
}
   İsteğe bağlı: Çok küçük ekranlarda tek sütun yapmak için:
    @media (max-width: 575.98px) {
        #featured-products .row,
        #featured-category-products .row {
            row-cols: 1;
        }
    }
   
}

/* Orta boy ekranlar (tabletler ve daha büyük) */
@media (min-width: 768px) {
    #featured-products .row,
    #featured-category-products .row {
        row-cols: 3; /* 3 sütun */
    }
}


/* product.php için özel stiller */
#productCarousel .carousel-inner img,
#productCarousel .carousel-inner video {
  object-fit: contain; /* Resim/video, en boy oranını koruyarak kapsayıcıya sığsın */
  max-height: 500px; /* Maksimum yükseklik (isteğe bağlı, ayarlayabilirsiniz) */
  width: 100%; /* Genişlik, kapsayıcıyı doldursun */
}

/* WhatsApp Butonu */
.whatsapp-button {
    background-color: #25d366; /* WhatsApp yeşili */
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.whatsapp-button:hover {
    background-color: #128c7e; /* Daha koyu yeşil */
}

/* Ek Açıklamalar (Sekmeler) */
.nav-tabs .nav-link {
    border: 1px solid var(--border-color);
    border-bottom: none; /* Alt kenarlığı kaldır */
    color: var(--text-color);
    background-color: var(--background-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border-radius: var(--border-radius) var(--border-radius) 0 0; /*Sadece üst köşeler oval*/
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    background-color: var(--secondary-color);
    color: var(--accent-color);
    border-color: var(--secondary-color); /* Kenarlık rengi */
}

.nav-tabs .nav-link.active {
    background-color: var(--secondary-color);
    color: var(--accent-color);
    border-color: var(--secondary-color);
}

.tab-content {
    border: 1px solid var(--border-color);
    border-top: none; /* Üst kenarlığı kaldır */
    padding: 1.25rem;
    border-radius: 0 0 var(--border-radius) var(--border-radius); /* Sadece alt köşeleri yuvarla */
    background-color: var(--background-color);
}
/* Admin paneli tabloları */
.table-responsive {
    overflow-x: auto; /* Yatay kaydırma */
}

/* İsteğe bağlı: admin panelindeki tablolarda çok fazla sütun varsa
   küçük ekranlarda bazılarını gizleyebilirsiniz: */
@media (max-width: 767.98px) { /* Bootstrap'ın "sm" breakpoint'i */
  .table-responsive {
        /* Eğer hala taşma oluyorsa, tabloya minimum genişlik verin:
           Bu, kaydırmayı tetikleyecektir.  İhtiyacınıza göre ayarlayın. */
        /* min-width: 768px;  Örnek */
   }

  .hide-on-mobile {
    display: none; /* Bu sınıfa sahip sütunlar gizlenecek */
  }



    
}
/*Navbar üzerine gelince açılır*/
.navbar-nav .nav-item.dropdown:hover .dropdown-menu{
    display: block; /*Üzerine gelince dropdown aç*/
}
/*Navbar Dropdown*/
.dropdown-menu{
  background-color: var(--primary-color);
  border:none;
}
.dropdown-item{
    color:#fff;
    transition: color 0.3s ease, background-color 0.3s ease;
}
.dropdown-item:hover{
  color:var(--primary-color);
  background-color: var(--accent-color);
}


/* Topbar */
.topbar {
    background-color: var(--secondary-color); /* Arka plan rengi */
    color: var(--accent-color); /* Yazı rengi */
    font-size: 0.9rem; /* Yazı boyutu */
    padding: 5px 0;  /* İç boşluk (dikey) */
}






/* İsteğe bağlı: Mobil görünümde topbar'ı gizle */
@media (max-width: 767.98px) { /* Bootstrap "sm" breakpoint */
  /*  .topbar {
        display: none;
    }*/
}



@media (max-width: 767.98px) { /* Bootstrap'ın "sm" breakpoint'i */

    body {
        font-size: 14px; /* Genel metin boyutu (küçültüldü) */
    }

    h1, .h1 {
        font-size: 1.8rem; /* En büyük başlık */
    }

    h2, .h2 {
        font-size: 1.5rem; /* Daha küçük başlık */
    }

    h3, .h3 {
        font-size: 1.2rem;
    }

    h4, .h4 {
        font-size: 1rem;
    }

    h5, .h5 {
      font-size: 0.9rem;
    }
     h6, .h6 {
        font-size: 0.8rem;
    }

    /* İsteğe bağlı: Diğer elementler için de boyutları küçültün */
    .btn {
        font-size: 0.9rem; /* Butonlar */
        padding: 8px 15px;
    }

    .card-title {
        font-size: 1.1rem; /* Kart başlıkları */
    }

    .section-heading {
        font-size: 1.7rem; /* Bölüm başlıkları */
    }
    /* Header'daki başlık için özel */
    .carousel-caption h1{
        font-size: 1.5rem;
    }
}

/* ... (diğer stilleriniz) ... */

/* Hero Section */
.hero-section {
    background-color: var(--background-color-alt); /* İsteğe bağlı: Hafif farklı bir arka plan rengi */
    /* padding: 3rem 0;  Üst ve alt boşluk.  Bunu KALDIRIYORUZ, çünkü mobil görünümde sorun yaratabilir. */
}

.hero-section .image-part img {
    width: 100%; /* Resmin sütunu tamamen kaplaması için */
    height: auto;  /* Yüksekliğin otomatik ayarlanması için */
    display: block; /* Blok element olarak davranması için */
     /* İsteğe bağlı: Resme gölge, yuvarlak köşe, vb. ekleyebilirsiniz */
    /* box-shadow: var(--box-shadow); */
    /* border-radius: var(--border-radius); */
    /* object-fit: cover;  Eğer resmi belirli bir yüksekliğe SABİTLEMEK isterseniz */
}

.hero-section .text-part {
    padding: 2rem; /* İçeriğe iç boşluk (padding) ver */
    background-color: var(--primary-color);
    color: var(--accent-color);
    display: flex; /* İçeriği dikey olarak ortalamak için */
    align-items: center;
}

.hero-section .text-content {
    /* İsteğe bağlı: Metin içeriği için ekstra stiller */
    width: 100%; /* Kapsayıcının tamamını kapla */
    max-width: 100%;/*Genişlik taşmasını engelle*/
    overflow-wrap: break-word; /*Taşmaları engelle*/

}

.hero-section .text-content h2 {
    font-size: 2.5rem; /* Başlık boyutu */
    margin-bottom: 1rem;
    color: var(--accent-color); /* Başlık rengi (beyaz) */
    font-weight: bold;
    /* İsteğe bağlı: Eğer metin taşma sorunu DEVAM EDERSE: */
    word-wrap: break-word; /* Uzun kelimeleri böl */
}

.hero-section .text-content p {
    font-size: 1.1rem;
    color: var(--accent-color); /* Yazı rengi */
    margin-bottom: 1.5rem;
    line-height: 1.6;
     /* İsteğe bağlı: Eğer metin taşma sorunu DEVAM EDERSE: */
     word-wrap: break-word;
}
/* Mobil Görünüm (Telefonlar) */
@media (max-width: 767.98px) {  /* "sm" breakpoint */
    .hero-section .text-part {
        padding: 1rem; /* İç boşluğu azalt */
    }
    .hero-section .text-content h2 {
        font-size: 1.8rem; /* Başlık boyutunu küçült */
    }
    .hero-section .image-part img{
        max-height: 300px; /* Mobil için maksimum resim yüksekliği */
        /* Veya: height: auto; object-fit: contain; */
    }
}

/* Tablet Görünümü (İsteğe Bağlı) */
@media (min-width: 768px) and (max-width: 991.98px) { /* "md" breakpoint */
    /* Tabletler için özel stiller (örneğin, padding'i biraz artırabilirsiniz) */
    .hero-section .text-part {
        padding: 1.5rem;
    }
}







  .social .icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f1f1f1;
        transition: all 0.3s ease-in-out;
    }

   .social {
        display: flex;
        gap: 10px;
    }
    .social .icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f1f1f1;
        transition: all 0.3s ease-in-out;
    }
    .social .icon i {
        font-size: 16px;
        color: #333;
    }
 
    .social .icon:hover i {
        color: white;
    }


/* style.css */

/* Lightbox */
#lightbox {
    position: fixed; /* Ekranın üzerinde sabit */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Yarı saydam siyah arkaplan */
    display: none; /* Başlangıçta gizli */
    justify-content: center; /* İçeriği yatayda ortala */
    align-items: center; /* İçeriği dikeyde ortala */
    z-index: 1000; /* Diğer her şeyin üzerinde */
}

#lightbox.active {
    display: flex; /* Görünür yap */
}

#lightbox img {
    max-width: 90%; /* Genişlik, ekranın %90'ını geçmesin */
    max-height: 90%; /* Yükseklik, ekranın %90'ını geçmesin */
    object-fit: contain; /* Resmi bozmadan sığdır */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Gölge (isteğe bağlı) */
    border-radius: 5px; /* Yuvarlatılmış köşeler(isteğe bağlı)*/
}


/* Resimlere tıklanabilir efekti ekle */
.product-image, .extra-image {
    cursor: pointer; /* Fare imlecini el işaretine çevir */
}

/* style.css */
.hero-section .text-content h2 {
    font-size: 2.5rem; /* Bunu küçültün, örneğin: 1.8rem */
}

/* Veya, mobil için: */
@media (max-width: 767.98px) {
    .hero-section .text-content h2 {
        font-size: 1.8rem;
    }
}