/* ===== TEMEL AYARLAR VE DEĞİŞKENLER ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --ana-renk: #0a4d68;
    --ikincil-renk: #088395;
    --vurgu-rengi: #ffc436;
    --acik-renk: #f8f9fa;
    --koyu-renk: #333;
    --gri-renk: #6c757d;
    --kenar-golgesi: 0 4px 15px rgba(0, 0, 0, 0.08);
    --kenar-golgesi-hafif: 0 2px 8px rgba(0, 0, 0, 0.06);
    --yildiz-rengi: #ffc107;
    --indirim-etiket-rengi: #dc3545;
    --yeni-etiket-rengi: #28a745;
}

.buton-ikincil {
    /* Temel Stil */
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px; /* Hafif yuvarlak köşeler */
    font-size: 16px;
    font-weight: 500; /* Orta kalınlık */
    cursor: pointer;
    transition: all 0.3s ease; /* Yumuşak geçişler */

    /* Renkler (Gri/Mavi tonlarında ikincil stil) */
    color: #495057; /* Koyu gri metin */
    background-color: #f8f9fa; /* Açık gri/beyaz arka plan */
    border: 1px solid #ced4da; /* Açık gri kenarlık */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Hafif kutu gölgesi */
}

.buton-ikincil:hover {
    /* Üzerine Gelme Efekti */
    color: #212529; /* Daha koyu metin */
    background-color: #e2e6ea; /* Hafif koyu arka plan */
    border-color: #dae0e5; /* Kenarlık rengini koyulaştır */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Gölgeyi belirginleştir */
    transform: translateY(-1px); /* Hafif yukarı kayma (Hover'da derinlik hissi verir) */
}

.buton-ikincil:active {
    /* Tıklama Efekti */
    background-color: #cdd2d7; /* Koyu arka plan */
    border-color: #c4c9ce;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); /* İçeriden basılma efekti */
    transform: translateY(0);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    list-style-type: none;
}

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.6;
    background-color: #fff;
    color: var(--koyu-renk);
}

img {
    width: 100%;
    height: auto;
    display: block;
}

.konteyner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bolum-basligi {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 40px;
    color: var(--ana-renk);
}

/* ===== BUTON STİLLERİ ===== */
.buton-ana {
    display: inline-block;
    background-color: var(--ana-renk);
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.buton-ana:hover {
    background-color: var(--ikincil-renk);
    transform: translateY(-2px);
}

.ikon-buton {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--koyu-renk);
    cursor: pointer;
    padding: 5px;
    position: relative;
    transition: color 0.3s ease;
}

.ikon-buton:hover {
    color: var(--ikincil-renk);
}

/* ===== HEADER (Site Başlığı) ===== */
.site-basligi {
    background-color: #fff;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.site-basligi .konteyner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ana-renk);
}

.logo a span {
    color: var(--ikincil-renk);
}

.navigasyon .menu-listesi {
    display: flex;
    gap: 30px;
}

.navigasyon .menu-listesi a {
    color: var(--koyu-renk);
    font-weight: 500;
    padding: 5px 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}

.navigasyon .menu-listesi a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--ikincil-renk);
    transition: width 0.3s ease;
}

.navigasyon .menu-listesi a:hover::after,
.navigasyon .menu-listesi a.aktif::after {
    width: 100%;
}

.kullanici-ikonlari {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sepet-sayaci {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: var(--vurgu-rengi);
    color: var(--koyu-renk);
    font-size: 0.7rem;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobil-menu-buton {
    display: none;
}


/* ===== MASAÜSTÜ DROPDOWN STİLLERİ ===== */
.navigasyon .menu-listesi .dropdown-li {
    position: relative;
}

.navigasyon .dropdown-menu {
    display: none;
    position: absolute;
    top: 150%;
    left: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.navigasyon .dropdown-menu li {
    width: 100%;
}

.navigasyon .dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    font-weight: 400;
}

.navigasyon .dropdown-menu li a:hover {
    background-color: var(--acik-renk);
}

.navigasyon .dropdown-menu li a::after {
    display: none;
}

.navigasyon .menu-listesi .dropdown-li:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    top: 100%;
}


/* ===== MOBİL MENU (Gizli Panel) ===== */
.mobil-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
}

.mobil-menu.aktif {
    right: 0;
}

.mobil-menu-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.mobil-menu-baslik h3 {
    font-size: 1.4rem;
    color: var(--ana-renk);
}

.mobil-menu-listesi li a {
    display: block;
    padding: 15px 20px;
    font-size: 1.1rem;
    color: var(--koyu-renk);
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s ease;
}

.mobil-menu-listesi li a:hover {
    background-color: var(--acik-renk);
}

/* ===== MOBİL DROPDOWN STİLLERİ ===== */
.mobil-menu-listesi .dropdown-li .mobil-dropdown-tetikleyici {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.mobil-menu-listesi .dropdown-li .mobil-dropdown-tetikleyici i {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

.mobil-menu-listesi .dropdown-menu {
    display: none;
    background-color: var(--acik-renk);
    padding-left: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.mobil-menu-listesi .dropdown-menu li a {
    border-bottom: none;
    padding: 12px 20px;
    font-size: 1rem;
    color: var(--gri-renk);
}

.mobil-menu-listesi .dropdown-menu li a:hover {
    color: var(--ikincil-renk);
}

.mobil-menu-listesi .dropdown-li.aktif .dropdown-menu {
    display: block;
}

.mobil-menu-listesi .dropdown-li.aktif .mobil-dropdown-tetikleyici i {
    transform: rotate(180deg);
}

/* ===== HİZMET/GÜVEN ÇUBUĞU ===== */
.hizmet-cubugu {
    background-color: var(--acik-renk);
    border-bottom: 1px solid #eee;
}

.hizmet-listesi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
}

.hizmet-ogesi {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--koyu-renk);
    font-weight: 500;
}

.hizmet-ogesi i {
    font-size: 1.8rem;
    color: var(--ikincil-renk);
}

/* ===== HERO SLIDER BÖLÜMÜ ===== */
.slider-konteyner {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

.slider {
    width: 100%;
    height: 100%;
    display: flex;
}

.slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 20px;
    transition: opacity 0.8s ease;
    opacity: 0;
    position: absolute;
    
    /* YENİ EKLENENLER: */
    z-index: 0;              /* Diğerlerinin arkasına at */
    pointer-events: none;    /* Görünmezken tıklanmasını engelle */
}

.slide.aktif-slide {
    opacity: 1;
    
    /* YENİ EKLENENLER: */
    z-index: 1;              /* En öne getir */
    pointer-events: auto;    /* Tıklanabilir yap */
}

.hero-icerik h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.hero-icerik p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.slider-buton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    color: var(--koyu-renk);
    font-size: 1.5rem;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.slider-buton:hover {
    background-color: #fff;
}

.slider-buton.prev {
    left: 20px;
}

.slider-buton.next {
    right: 20px;
}

/* ===== KATEGORİ BÖLÜMÜ ===== */
.kategori-bolumu {
    padding: 60px 20px;
}

.kategori-listesi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.kategori-kart {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi);
    cursor: pointer;
    height: 250px;
}

.kategori-kart img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.kategori-kart:hover img {
    transform: scale(1.1);
}

.kategori-kart h3 {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 1.5rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
}


/* ===== HİZMETLER BÖLÜMÜ ===== */
.hizmet-bolumu {
    padding: 60px 20px;
    background-color: var(--acik-renk);
}

.hizmet-listesi-yeni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.hizmet-kart {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--kenar-golgesi-hafif);
    transition: all 0.3s ease;
}

.hizmet-kart:hover {
    transform: translateY(-10px);
    box-shadow: var(--kenar-golgesi);
}

.hizmet-ikon {
    font-size: 3rem;
    color: var(--ikincil-renk);
    margin-bottom: 20px;
    /* İkonu çevreleyen daire */
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--acik-renk);
    transition: all 0.3s ease;
}

.hizmet-kart:hover .hizmet-ikon {
    background-color: var(--ikincil-renk);
    color: #fff;
}

/* ============================================= */
/* ===== YENİ: HİZMET KARTI RESİM OPSİYONU ===== */
/* ============================================= */

/* Normal .hizmet-ikon'a ek olarak bu sınıf gelirse... */
.hizmet-ikon.hizmet-ikon-resim {
    background-color: transparent;
    /* Varsayılan 'acik-renk' arka planını kaldır */
    overflow: hidden;
    /* Resmi daireye sığdırmak için */
    padding: 0;
    /* Varsa iç boşluğu sıfırla */
    /* Resimler için bir çerçeve daha şık durur */
    border: 3px solid var(--acik-renk);
}

/* İkonun içindeki 'i' etiketi zaten stilize edilmişti, şimdi 'img'yi stilize edelim */
.hizmet-ikon.hizmet-ikon-resim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Resmin daireyi tam doldurmasını sağlar */
    transition: transform 0.4s ease;
    /* Hover için yumuşak geçiş */
}

/* Normalde :hover .hizmet-ikon'un arka planı değişiyordu.
  Resim varken bu davranışı ezelim ve yerine zoom efekti ekleyelim.
*/
.hizmet-kart:hover .hizmet-ikon.hizmet-ikon-resim {
    background-color: transparent;
    /* Orijinal hover'ı iptal et */
    border-color: var(--ikincil-renk);
    /* Çerçeve rengini değiştir */
}

.hizmet-kart:hover .hizmet-ikon.hizmet-ikon-resim img {
    transform: scale(1.1);
    /* Resme zoom yap */
}

.hizmet-ad {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ana-renk);
    margin-bottom: 10px;
}

.hizmet-aciklama {
    font-size: 0.9rem;
    color: var(--gri-renk);
    margin-bottom: 20px;
    min-height: 4.5em;
    /* Açıklamaların eşit yükseklikte durması için (3 satır) */
}

.hizmet-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ikincil-renk);
    transition: all 0.3s ease;
}

.hizmet-link:hover {
    color: var(--ana-renk);
    letter-spacing: 0.5px;
    /* Hafif boşluk efekti */
}

/* ===== /Hizmetler Bölümü Bitişi ===== */


/* ===== ÜRÜN BÖLÜMÜ VE YENİ KART TASARIMI ===== */
.urun-bolumu {
    padding: 60px 20px;
    background-color: #fff;
    /* Hizmet bölümünden ayırmak için beyaz */
}

.urun-listesi-yeni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.urun-kart-yeni {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.urun-kart-yeni:hover {
    box-shadow: var(--kenar-golgesi);
    transform: translateY(-5px);
}

.kart-gorsel {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.kart-gorsel img {
    width: 100%;
    height: 300px;
    /* Sabit yükseklik */
    object-fit: cover;
    transition: transform 0.4s ease;
}

.urun-kart-yeni:hover .kart-gorsel img {
    transform: scale(1.05);
}

.kart-etiket {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #fff;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
}

.kart-etiket.indirim {
    background-color: var(--indirim-etiket-rengi);
}

.kart-etiket.yeni {
    background-color: var(--yeni-etiket-rengi);
}

.kart-hover-ikonlari {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

.urun-kart-yeni:hover .kart-hover-ikonlari {
    opacity: 1;
    transform: translateX(0);
}

.ikon-buton-kucuk {
    background-color: #fff;
    color: var(--koyu-renk);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.ikon-buton-kucuk:hover {
    background-color: var(--ana-renk);
    color: #fff;
}

.kart-bilgi {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.kart-kategori {
    font-size: 0.8rem;
    color: var(--gri-renk);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.kart-ad {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--koyu-renk);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
}

.kart-puanlama {
    font-size: 0.9rem;
    color: var(--yildiz-rengi);
    margin-bottom: 10px;
}

.kart-puanlama span {
    color: var(--gri-renk);
    font-size: 0.8rem;
    margin-left: 5px;
}

.kart-fiyat {
    margin-top: auto;
}

.kart-fiyat .yeni-fiyat {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ikincil-renk);
}

.kart-fiyat .eski-fiyat {
    font-size: 0.9rem;
    color: var(--gri-renk);
    text-decoration: line-through;
    margin-left: 10px;
}

.buton-sepet-kart {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 20px 20px;
    padding: 12px;
    text-align: center;
    background-color: var(--ana-renk);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.buton-sepet-kart:hover {
    background-color: var(--ikincil-renk);
}

/* ===== KAMPANYA KARTI STİLLERİ ===== */
.urun-kart-kampanya {
    /* Normal karttan ayırmak için vurgu rengi çerçeve */
    border: 2px solid var(--vurgu-rengi);
    box-shadow: 0 0 15px rgba(255, 196, 54, 0.3);
}

.urun-kart-kampanya .kart-bilgi {
    /* Bilgi ve fiyat arasına sayacı sığdırmak için */
    gap: 10px;
}

.kart-geri-sayim {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
}

.sayim-ogesi-kucuk {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--acik-renk);
    border-radius: 5px;
    padding: 5px 8px;
    min-width: 50px;
}

.sayim-ogesi-kucuk span {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ana-renk);
}

.sayim-ogesi-kucuk label {
    font-size: 0.7rem;
    color: var(--gri-renk);
    font-weight: 500;
}

.urun-kart-kampanya .buton-sepet-kart {
    /* Buton rengini de dikkat çekici yap */
    background-color: var(--vurgu-rengi);
    color: var(--koyu-renk);
}

.urun-kart-kampanya .buton-sepet-kart:hover {
    background-color: #ffcd58;
    /* Vurgu renginin açığı */
}

/* ===== /Kampanya Kartı Stilleri Bitişi ===== */


/* ===== GÜNÜN FIRSATI ===== */
.gunun-firsati {
    padding: 60px 20px;
    background-color: var(--acik-renk);
    /* Arka planı değiştirdim */
}

.firsat-icerik {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
}

.firsat-gorsel img {
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi);
}

.firsat-detay .bolum-basligi {
    text-align: left;
    margin-bottom: 20px;
}

.firsat-detay p {
    font-size: 1.1rem;
    color: var(--gri-renk);
    margin-bottom: 30px;
}

.geri-sayim-sayaci {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.sayim-ogesi {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    /* Fırsat arka planından ayırmak için */
    padding: 15px;
    border-radius: 8px;
    min-width: 80px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.sayim-ogesi span {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ana-renk);
}

.sayim-ogesi label {
    font-size: 0.9rem;
    color: var(--gri-renk);
}

/* ===== BLOG BÖLÜMÜ ===== */
.blog-bolumu {
    padding: 60px 20px;
    background-color: #fff;
}

.blog-listesi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.blog-kart {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    overflow: hidden;
    transition: all 0.3s ease;
}

.blog-kart:hover {
    box-shadow: var(--kenar-golgesi);
    transform: translateY(-5px);
}

.blog-gorsel img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-icerik {
    padding: 25px;
}

.blog-meta {
    font-size: 0.8rem;
    color: var(--gri-renk);
    margin-bottom: 10px;
    display: block;
}

.blog-baslik {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--koyu-renk);
    margin-bottom: 10px;
}

.blog-icerik p {
    font-size: 0.9rem;
    color: var(--gri-renk);
    margin-bottom: 15px;
}

.blog-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ikincil-renk);
    transition: all 0.3s ease;
}

.blog-link i {
    margin-left: 5px;
    transition: margin-left 0.3s ease;
}

.blog-link:hover {
    color: var(--ana-renk);
}

.blog-link:hover i {
    margin-left: 10px;
}

/* ===== FOOTER (Site Alt Bilgisi) ===== */
.site-altbilgi {
    background-color: var(--ana-renk);
    color: #eee;
    padding-top: 60px;
}

.altbilgi-listesi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.altbilgi-kolon h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.altbilgi-kolon h3 span {
    color: var(--vurgu-rengi);
}

.altbilgi-kolon h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}

.altbilgi-kolon p {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 15px;
}

.altbilgi-kolon ul li {
    margin-bottom: 10px;
}

.altbilgi-kolon ul li a {
    color: #ccc;
    transition: color 0.3s ease;
}

.altbilgi-kolon ul li a:hover {
    color: var(--vurgu-rengi);
}

.sosyal-medya {
    display: flex;
    gap: 10px;
}

.sosyal-medya .ikon-buton {
    color: #fff;
    font-size: 1.2rem;
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sosyal-medya .ikon-buton:hover {
    background-color: var(--vurgu-rengi);
    border-color: var(--vurgu-rengi);
    color: var(--koyu-renk);
}

.ebulten-formu {
    display: flex;
    flex-direction: column;
}

.ebulten-formu input {
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
}

.ebulten-formu .buton-ana {
    background-color: var(--vurgu-rengi);
    color: var(--koyu-renk);
}

.altbilgi-telif {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    border-top: 1px solid #3b5998;
    font-size: 0.9rem;
    color: #ccc;
}


/* ===== HIZLI BAKIŞ (MODAL) STİLLERİ ===== */
.modal-arkaplan {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
}

.modal-arkaplan.modal-goster {
    display: flex;
}

.modal-icerik {
    background-color: #fff;
    margin: auto;
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    padding: 30px;
    animation: modalAnim 0.3s ease-out;
}

@keyframes modalAnim {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-kapat {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    color: var(--gri-renk);
}

.modal-govde {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.modal-gorsel img {
    border-radius: 8px;
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.modal-detay h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--ana-renk);
    margin-bottom: 10px;
}

.modal-detay .urun-fiyat {
    margin-bottom: 20px;
}

.modal-aciklama {
    font-size: 0.9rem;
    color: var(--gri-renk);
    margin-bottom: 20px;
}

.modal-aksiyon {
    display: flex;
    gap: 15px;
}

.urun-adet-secimi {
    width: 70px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    text-align: center;
}

/* ===== YUKARI ÇIK BUTONU ===== */
#yukari-cik-buton {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 999;
    border: none;
    outline: none;
    background-color: var(--ana-renk);
    color: white;
    cursor: pointer;
    padding: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

#yukari-cik-buton:hover {
    background-color: var(--ikincil-renk);
}

#yukari-cik-buton.goster {
    display: block;
}

/* ===== RESPONSIVE (Duyarlılık) AYARLARI ===== */
@media (max-width: 992px) {
    .hizmet-listesi {
        grid-template-columns: repeat(2, 1fr);
    }

    .kategori-listesi {
        grid-template-columns: repeat(2, 1fr);
    }

    .firsat-icerik {
        grid-template-columns: 1fr;
    }

    .firsat-detay .bolum-basligi {
        text-align: center;
    }

    .geri-sayim-sayaci {
        justify-content: center;
    }

    .firsat-detay {
        text-align: center;
    }

    .modal-govde {
        grid-template-columns: 1fr;
    }

    .modal-gorsel img {
        height: 250px;
    }

    .blog-listesi {
        grid-template-columns: repeat(2, 1fr);
    }

    .hizmet-listesi-yeni {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .navigasyon {
        display: none;
    }

    .mobil-menu-buton {
        display: block;
    }

    .slider-konteyner {
        height: 60vh;
    }

    .hero-icerik h1 {
        font-size: 2.5rem;
    }

    .kategori-listesi {
        grid-template-columns: 1fr;
    }

    .kategori-kart {
        height: 200px;
    }

    .altbilgi-listesi {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sosyal-medya {
        justify-content: center;
    }

    .ebulten-formu {
        align-items: center;
    }

    .hizmet-listesi {
        grid-template-columns: 1fr;
    }

    .blog-listesi {
        grid-template-columns: 1fr;
    }

    .hizmet-listesi-yeni {
        grid-template-columns: 1fr;
    }

    .hizmet-aciklama {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .hero-icerik h1 {
        font-size: 2rem;
    }

    .hero-icerik p {
        font-size: 1rem;
    }

    .bolum-basligi {
        font-size: 1.8rem;
    }

    .slider-buton {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .geri-sayim-sayaci {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .sayim-ogesi {
        min-width: 70px;
    }

    .sayim-ogesi span {
        font-size: 1.8rem;
    }

    .modal-icerik {
        padding: 20px;
    }

    .modal-detay h3 {
        font-size: 1.5rem;
    }

    .modal-aksiyon {
        flex-direction: column;
    }

    /* ===== YENİ EKLENEN HEADER DÜZELTMELERİ ===== */
    .logo a {
        font-size: 1.4rem;
        /* Logoyu biraz küçült */
    }

    .kullanici-ikonlari {
        gap: 8px;
        /* İkonlar arası boşluğu azalt */
    }

    .ikon-buton {
        font-size: 1.2rem;
        /* İkonları biraz küçült */
        padding: 3px;
    }

    .sepet-sayaci {
        width: 16px;
        height: 16px;
        font-size: 0.65rem;
        top: -4px;
        right: -5px;
    }

    /* ===== YENİ EKLENEN HİZMET ÇUBUĞU DÜZELTMELERİ ===== */
    .hizmet-listesi {
        padding: 20px 15px;
        /* İç boşluğu yanlardan biraz azalt */
    }

    .hizmet-ogesi {
        /* İkon ve metni alt alta diz (dar ekranlar için) */
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }

    .hizmet-ogesi i {
        font-size: 1.6rem;
        /* İkonu biraz küçült */
    }
}



/* ============================================= */
/* ===== ÜRÜN LİSTELEME SAYFASI STİLLERİ ===== */
/* ============================================= */

/* Sayfa Başlığı ve Breadcrumb */
.sayfa-basligi-alani {
    background-color: var(--acik-renk);
    padding: 30px 0;
    border-bottom: 1px solid #eee;
}

.sayfa-basligi-alani h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--ana-renk);
    margin-bottom: 5px;
}

.breadcrumb-yolu {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.breadcrumb-yolu a {
    color: var(--ikincil-renk);
    font-weight: 500;
}

.breadcrumb-yolu a:hover {
    text-decoration: underline;
}

.breadcrumb-yolu i {
    font-size: 0.7rem;
    color: var(--gri-renk);
}

.breadcrumb-yolu span {
    color: var(--gri-renk);
}

/* Ana Sayfa Gövdesi (Grid Düzeni) */
.liste-sayfasi-govdesi {
    display: grid;
    grid-template-columns: 280px 1fr;
    /* Sol 280px, kalan sağ taraf */
    gap: 30px;
    padding: 60px 0;
}

/* Filtre Bölümü (Sol) */
.filtre-bolumu {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    height: fit-content;
    /* İçeriğe göre uzasın */
    position: sticky;
    top: 100px;
    /* Header yüksekliğine göre ayar (sticky header için) */
}

.filtre-panel-basligi {
    display: none;
    /* Mobilde görünecek */
}

.filtre-grubu {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.filtre-grubu:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.filtre-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--koyu-renk);
    margin-bottom: 15px;
    cursor: pointer;
}

.filtre-baslik i {
    transition: transform 0.3s ease;
}

/* JS ile .aktif sınıfı eklendiğinde oku döndür */
.filtre-grubu.aktif .filtre-baslik i {
    transform: rotate(180deg);
}

.filtre-secenekleri {
    display: block;
}

/* JS ile .aktif sınıfı yoksa seçenekleri gizle */
.filtre-grubu:not(.aktif) .filtre-secenekleri {
    display: none;
}

.filtre-secenekleri ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filtre-secenekleri ul li a {
    display: flex;
    justify-content: space-between;
    color: var(--gri-renk);
    font-size: 0.9rem;
}

.filtre-secenekleri ul li a:hover {
    color: var(--ikincil-renk);
}

.filtre-secenekleri ul li a span {
    font-weight: 500;
}

.secenek-satiri {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.secenek-satiri label {
    color: var(--gri-renk);
    font-size: 0.9rem;
    cursor: pointer;
}

.secenek-satiri input[type="radio"],
.secenek-satiri input[type="checkbox"] {
    accent-color: var(--ikincil-renk);
    /* Modern tarayıcılarda rengi değiştirir */
}

.filtre-butonlari {
    margin-top: 20px;
}

.filtre-butonlari .buton-ana {
    width: 100%;
}


.buton-mobil-filtre {
    display: none;
    /* Masaüstünde gizli */
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: 500;
    background-color: var(--acik-renk);
    border: 1px solid #ddd;
    color: var(--koyu-renk);
    border-radius: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}

.buton-mobil-filtre i {
    margin-right: 8px;
}

.siralama-cubugu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background-color: var(--acik-renk);
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 30px;
}

.siralama-cubugu label {
    font-size: 0.9rem;
    font-weight: 500;
}

.siralama-select-kutu {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
}

/* Sayfalandırma (Pagination) */
.sayfalandirma {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

.sayfa-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50%;
    color: var(--koyu-renk);
    font-weight: 500;
    transition: all 0.3s ease;
}

.sayfa-link:hover {
    background-color: var(--ikincil-renk);
    border-color: var(--ikincil-renk);
    color: #fff;
}

.sayfa-link.aktif {
    background-color: var(--ana-renk);
    border-color: var(--ana-renk);
    color: #fff;
}

.sayfa-link.devre-disi {
    color: #ccc;
    pointer-events: none;
    border-color: #eee;
}

/* Mobil Filtre Arka Planı (Overlay) */
.filtre-arkaplan {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1002;
}

.filtre-arkaplan.aktif {
    display: block;
}

/* ============================================= */
/* ===== RESPONSIVE (Duyarlılık) AYARLARI ===== */
/* ============================================= */
/* (Sadece bu sayfayı etkileyen responsive kodlar) */

@media (max-width: 992px) {

    /* Liste Sayfası Responsive */
    .liste-sayfasi-govdesi {
        grid-template-columns: 1fr;
        /* Tek sütun */
    }

    .filtre-bolumu {
        position: fixed;
        left: -100%;
        /* Gizli */
        top: 0;
        width: 300px;
        height: 100vh;
        z-index: 1003;
        background-color: #fff;
        padding: 20px;
        overflow-y: auto;
        transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        border: none;
        border-radius: 0;
    }

    .filtre-bolumu.aktif {
        left: 0;
        /* Görünür */
    }

    .filtre-panel-basligi {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
    }

    .filtre-panel-basligi h3 {
        font-size: 1.3rem;
        color: var(--ana-renk);
    }

    .buton-mobil-filtre {
        display: block;
        /* Mobilde göster */
    }
}

@media (max-width: 480px) {
    .sayfalandirma .sayfa-link {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}


/* ============================================= */
/* ===== ÜRÜN LİSTELEME SAYFASI STİLLERİ BİTİŞ ===== */
/* ============================================= */



/* ============================================= */
/* ===== YENİ: ÜRÜN DETAY SAYFASI STİLLERİ (v2) ===== */
/* ============================================= */

/* Ana sayfa arka planını ayarla */
.urun-detay-alani {
    padding: 60px 0;
    background-color: var(--acik-renk);
    /* Sayfanın ana arka planı */
}

/* Ana Galeri + Bilgi Kartı */
.urun-detay-kart {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    /* Kart içi boşluk */
    padding: 30px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
}

/* Sol - Galeri */
.urun-galeri-bolumu {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ana-gorsel {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

.ana-gorsel img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.gorsel-secenekleri {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.galeri-secenek {
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.galeri-secenek:hover {
    opacity: 1;
    border-color: var(--ikincil-renk);
}

.galeri-secenek.aktif {
    opacity: 1;
    border: 2px solid var(--ana-renk);
}

/* Sağ - Bilgiler */
.urun-bilgi-bolumu {
    display: flex;
    flex-direction: column;
}

.detay-fiyat {
    margin-bottom: 10px;
}

.detay-fiyat .yeni-fiyat {
    font-size: 2rem;
    font-weight: 600;
    color: var(--ana-renk);
}

.detay-fiyat .eski-fiyat {
    font-size: 1.2rem;
    margin-left: 15px;
    color: var(--gri-renk);
    text-decoration: line-through;
}

.detay-puanlama {
    font-size: 0.9rem;
    color: var(--yildiz-rengi);
    margin-bottom: 20px;
}

.detay-puanlama span {
    color: var(--gri-renk);
    margin-left: 10px;
}

.detay-kisa-aciklama {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--gri-renk);
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 25px;
}

.detay-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.secenek-grubu {
    display: flex;
    align-items: center;
    gap: 15px;
}

.secenek-grubu label {
    font-weight: 500;
    font-size: 1rem;
}

.secenek-grubu select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    min-width: 200px;
}

.detay-aksiyon {
    display: flex;
    gap: 20px;
    align-items: center;
}

.miktar-secici {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.miktar-secici .miktar-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 10px 15px;
    color: var(--gri-renk);
}

.miktar-secici .miktar-btn:hover {
    color: var(--koyu-renk);
}

.miktar-secici #miktar-input {
    width: 50px;
    text-align: center;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px 0;
}

.detay-aksiyon .sepete-ekle-btn {
    flex-grow: 1;
    /* Butonun kalan alanı kaplaması */
    font-size: 1.1rem;
    padding-top: 13px;
    padding-bottom: 13px;
}

.detay-meta {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.9rem;
    color: var(--gri-renk);
}

.detay-meta p {
    margin-bottom: 8px;
}

.detay-meta strong {
    color: var(--koyu-renk);
}

.detay-meta a {
    color: var(--ikincil-renk);
}

.detay-meta .stokta-var {
    color: var(--yeni-etiket-rengi);
    font-weight: 600;
}

/* Tablar Kartı */
.urun-tab-kart {
    margin-top: 30px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    overflow: hidden;
}

.tab-basliklari {
    border-bottom: 1px solid #ddd;
    background-color: var(--acik-renk);
    /* Başlıkları hafifçe ayır */
    padding-left: 30px;
}

.tab-basliklari ul {
    display: flex;
    gap: 30px;
}

.tab-basliklari .tab-link {
    display: block;
    padding: 15px 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--gri-renk);
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    margin-bottom: -1px;
    /* Border ile hizalamak için */
}

.tab-basliklari .tab-link:hover {
    color: var(--koyu-renk);
}

.tab-basliklari .tab-link.aktif {
    color: var(--ana-renk);
    border-bottom-color: var(--ana-renk);
}

.tab-icerikleri {
    padding: 30px;
}

.tab-icerik-paneli {
    display: none;
    /* JS ile .aktif olan gösterilecek */
    animation: fadeIn 0.5s ease;
}

.tab-icerik-paneli.aktif {
    display: block;
}

.tab-icerik-paneli h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.tab-icerik-paneli p {
    margin-bottom: 15px;
    line-height: 1.8;
    color: var(--gri-renk);
}

.tab-icerik-paneli ul {
    list-style-type: disc;
    padding-left: 20px;
    color: var(--gri-renk);
}

.bilgi-tablosu {
    width: 100%;
    border-collapse: collapse;
}

.bilgi-tablosu th,
.bilgi-tablosu td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.bilgi-tablosu th {
    font-weight: 600;
    width: 30%;
}

.bilgi-tablosu tr:last-child th,
.bilgi-tablosu tr:last-child td {
    border-bottom: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* İlgili Ürünler Bölümü */
.ilgili-urunler-bolumu {
    padding: 60px 0;
    background-color: var(--acik-renk);
}

.ilgili-urunler-bolumu .bolum-basligi {
    margin-bottom: 30px;
}


/* ================================================== */
/* ===== ÜRÜN DETAY SAYFASI RESPONSIVE AYARLARI ===== */
/* ================================================== */

@media (max-width: 992px) {
    .urun-detay-kart {
        grid-template-columns: 1fr;
        /* Mobilde tek sütun */
    }
}

@media (max-width: 768px) {
    .gorsel-secenekleri {
        grid-template-columns: repeat(4, 1fr);
    }

    .detay-aksiyon {
        flex-direction: column;
        /* Miktar ve Buton alt alta */
        align-items: stretch;
    }

    .detay-aksiyon .sepete-ekle-btn {
        flex-grow: 0;
    }

    .tab-basliklari ul {
        gap: 15px;
    }

    .tab-basliklari .tab-link {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .urun-detay-kart {
        padding: 20px;
        /* Mobilde kart iç boşluğunu azalt */
    }

    .detay-fiyat .yeni-fiyat {
        font-size: 1.8rem;
    }

    .detay-fiyat .eski-fiyat {
        font-size: 1rem;
    }

    .tab-basliklari {
        padding-left: 20px;
    }

    .tab-basliklari ul {
        flex-wrap: wrap;
        /* Sekmeler sığmazsa alt satıra at */
        gap: 10px;
    }

    .tab-basliklari .tab-link {
        font-size: 0.9rem;
        padding: 10px 0;
    }

    .tab-icerikleri {
        padding: 20px;
    }
}

/* ======================================================= */
/* ===== YENİ: BÜYÜTEÇ (LOUPE) VE DETAY SAYACI STİLLERİ ===== */
/* ======================================================= */

/* Büyüteç Lensi (Loupe) Stili */
.ana-gorsel {
    position: relative;
    /* Büyüteci konumlandırmak için */
    overflow: hidden;
    /* Büyüteç taşarsa gizle */
}

#buyutec-lens {
    display: none;
    /* JS ile gösterilecek */
    position: absolute;
    width: 150px;
    height: 150px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    background-repeat: no-repeat;
    pointer-events: none;
    /* Farenin lensi değil, resmi algılaması için */
    z-index: 10;
}

/* Detay Sayfasındaki Kampanya Sayacı */
.detay-kampanya {
    border: 1px dashed var(--indirim-etiket-rengi);
    background-color: #fffaf0;
    /* Çok açık sarı/turuncu */
    border-radius: 5px;
    padding: 15px;
    margin-top: 10px;
    /* Seçenekler ile arasında boşluk */
}

.detay-kampanya strong {
    display: block;
    font-size: 1rem;
    color: var(--koyu-renk);
    margin-bottom: 10px;
}

.detay-kampanya .kart-geri-sayim {
    padding: 0;
    justify-content: flex-start;
    /* Sayacı sola yasla */
    gap: 15px;
}

.detay-kampanya .sayim-ogesi-kucuk {
    min-width: 60px;
    background-color: #fff;
    border: 1px solid #eee;
}

.detay-kampanya .sayim-ogesi-kucuk span {
    font-size: 1.5rem;
}

/* ============================================= */
/* ===== YENİ: RESİM LIGHTBOX (BÜYÜTME) STİLLERİ ===== */
/* ============================================= */

/* Ana resme tıklanabilir olduğunu belirten imleç ekle */
.ana-gorsel img {
    cursor: zoom-in;
}

/* Lightbox'ın kendisi (Siyah Arka Plan) */
.lightbox-overlay {
    display: none;
    /* JS ile .aktif olunca açılacak */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    /* Daha koyu arka plan */
    z-index: 3000;
    /* En üstte */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox-overlay.aktif {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* Kapatma Butonu */
.lightbox-kapat {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    /* Daha büyük ve görünür */
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.lightbox-kapat:hover {
    opacity: 1;
}

/* Büyütülmüş Resim Konteyneri */
.lightbox-icerik {
    max-width: 90%;
    max-height: 90%;
    animation: zoomIn 0.3s ease;
}

.lightbox-icerik img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Resmin tamamının görünmesini sağla */
    max-width: 100%;
    max-height: 90vh;
    /* Ekran yüksekliğini çok zorlamasın */
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Animasyon */
@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* ======================================================= */
/* ===== YENİ: ÜRÜN DETAY - DEĞERLENDİRME TAB STİLLERİ ===== */
/* ======================================================= */

.degerlendirme-listesi {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 30px;
}

.degerlendirme-ogesi {
    border-bottom: 1px solid #eee;
    padding-bottom: 25px;
}

.degerlendirme-ogesi:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.degerlendirme-yazar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.yazar-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--ana-renk);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
}

.yazar-bilgi strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--koyu-renk);
}

.yazar-bilgi .tarih {
    font-size: 0.8rem;
    color: var(--gri-renk);
}

.degerlendirme-puan {
    color: var(--yildiz-rengi);
    margin-bottom: 10px;
}

.degerlendirme-metni {
    font-size: 0.95rem;
    color: var(--gri-renk);
    line-height: 1.7;
}

/* Yorum Formu */
.form-ayraci {
    border: 0;
    border-top: 1px solid #eee;
    margin: 30px 0;
}

.degerlendirme-formu h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.degerlendirme-formu p {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.form-puan-secimi {
    margin-bottom: 20px;
}

.form-puan-secimi label {
    font-weight: 500;
    color: var(--koyu-renk);
    display: block;
    margin-bottom: 10px;
}

.yildiz-secici {
    font-size: 1.3rem;
    color: var(--gri-renk);
    cursor: pointer;
}

.yildiz-secici i:hover {
    color: var(--yildiz-rengi);
}

.form-grup {
    margin-bottom: 20px;
}

.form-grup label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-grup input[type="text"],
.form-grup input[type="password"],
.form-grup input[type="email"],
.form-grup textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}

.form-grup textarea {
    resize: vertical;
}

.form-grup-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ======================================================= */
/* ===== YENİ STİLLER BİTİŞ ===== */
/* ======================================================= */



/* ============================================= */
/* ===== YENİ: HİZMET DETAY SAYFASI STİLLERİ ===== */
/* ============================================= */

.hizmet-detay-alani {
    padding: 60px 0;
    background-color: var(--acik-renk);
    /* Sayfanın ana arka planı */
}

/* Ana Galeri + Bilgi Kartı */
.hizmet-detay-kart {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    /* Bilgi sütunu biraz daha geniş */
    gap: 40px;
    padding: 30px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
}

/* Sol - Hizmet Görseli */
.hizmet-detay-gorsel img {
    width: 100%;
    height: 100%;
    /* Sütun yüksekliğine uysun */
    object-fit: cover;
    border-radius: 8px;
}

/* Sağ - Hizmet Bilgileri */
.hizmet-detay-bilgi {
    display: flex;
    flex-direction: column;
}

.hizmet-detay-bilgi h3 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--ana-renk);
    margin-bottom: 10px;
}

.hizmet-meta {
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ikincil-renk);
}

.hizmet-meta i {
    margin-right: 8px;
}

.hizmet-detay-bilgi .detay-kisa-aciklama {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--gri-renk);
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 25px;
}

.hizmet-detay-bilgi h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--koyu-renk);
    margin-bottom: 15px;
}

.hizmet-avantajlari {
    list-style-type: none;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hizmet-avantajlari li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: var(--gri-renk);
}

.hizmet-avantajlari li i {
    color: var(--yeni-etiket-rengi);
    /* Yeşil "check" ikonu */
}

.hizmet-detay-aksiyon {
    margin-top: auto;
    /* Butonu kartın en altına iter */
}

.hizmet-detay-aksiyon .buton-ana {
    width: 100%;
    font-size: 1.1rem;
    padding: 15px;
}

/* Sekmeler içindeki S.S.S. ve Adım Listesi */
.adim-listesi {
    list-style-type: decimal;
    padding-left: 20px;
    color: var(--gri-renk);
    display: flex;
    flex-direction: column;
    gap: 15px;
    line-height: 1.7;
}

.adim-listesi li::marker {
    font-weight: 600;
    color: var(--ana-renk);
}

.sss-grubu {
    margin-bottom: 20px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 20px;
}

.sss-grubu:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sss-grubu strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--koyu-renk);
    margin-bottom: 5px;
}

.sss-grubu p {
    margin-bottom: 0;
}

/* İlgili Diğer Hizmetler */
.ilgili-hizmetler-bolumu {
    padding: 60px 0;
    background-color: #fff;
}

.ilgili-hizmetler-bolumu .bolum-basligi {
    margin-bottom: 30px;
}

/* ================================================== */
/* ===== HİZMET DETAY SAYFASI RESPONSIVE AYARLARI ===== */
/* ================================================== */
@media (max-width: 992px) {
    .hizmet-detay-kart {
        grid-template-columns: 1fr;
        /* Mobilde tek sütun */
    }

    .hizmet-detay-gorsel img {
        height: 400px;
        /* Mobilde sabit bir yükseklik verelim */
    }
}


/* ======================================================= */
/* ===== YENİ: HİZMET DETAY - EK PAKET STİLLERİ ===== */
/* ======================================================= */

/* Hizmet Bilgi Bölümünü güncelle (Aksiyon butonu alta insin) */
.hizmet-detay-bilgi {
    display: flex;
    flex-direction: column;
}

/* Yeni Fiyat Paneli */
.hizmet-fiyat-paneli {
    background-color: var(--acik-renk);
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.hizmet-fiyat-paneli label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gri-renk);
    display: block;
}

.hizmet-fiyat-paneli #guncel-toplam-fiyat {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ana-renk);
}

/* Yeni Ek Paketler Bölümü */
.hizmet-ek-paketler {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
    padding-top: 25px;
    border-top: 1px dashed #ddd;
}

.hizmet-ek-paketler h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--koyu-renk);
    margin-bottom: 5px;
}

.ek-paket-ogesi {
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.ek-paket-ogesi:hover {
    background-color: var(--acik-renk);
    border-color: #ddd;
}

.ek-paket-ogesi input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ikincil-renk);
    margin: 5px 15px 5px 5px;
    /* Tıklama alanını genişletmek için */
}

.ek-paket-ogesi label {
    display: flex;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    font-size: 1rem;
    align-items: center;
}

.ek-paket-ogesi .paket-ad {
    color: var(--koyu-renk);
    font-weight: 500;
}

.ek-paket-ogesi .paket-fiyat {
    color: var(--ikincil-renk);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Randevu Butonunun hep altta kalmasını sağla */
.hizmet-detay-aksiyon {
    margin-top: auto;
    /* Bu, butonu her zaman kartın dibine iter */
}





/* ============================================= */
/* ===== YENİ: BLOG DETAY SAYFASI STİLLERİ ===== */
/* ============================================= */

.blog-detay-alani {
    padding: 60px 0;
    background-color: var(--acik-renk);
    /* Sayfanın ana arka planı */
}

.blog-detay-govdesi {
    display: grid;
    /* Yan menü (sidebar) için 300px ayır */
    grid-template-columns: 1fr 300px;
    gap: 30px;
}

/* Sol - Ana İçerik Kartı */
.blog-ana-icerik {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    overflow: hidden;
    /* Görselin köşelerini yuvarlatmak için */
}

.blog-ana-gorsel img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
}

.blog-icerik-alani {
    padding: 30px;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.9rem;
    color: var(--gri-renk);
    margin-bottom: 15px;
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-meta a {
    color: var(--ikincil-renk);
    font-weight: 500;
}

.blog-meta a:hover {
    text-decoration: underline;
}

.blog-detay-baslik {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--ana-renk);
    margin-bottom: 20px;
}

/* Yazının kendisi */
.blog-metni {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--koyu-renk);
}

.blog-metni p {
    margin-bottom: 20px;
}

.blog-metni h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--koyu-renk);
    margin-top: 30px;
    margin-bottom: 15px;
}

.blog-metni ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-metni blockquote {
    background-color: var(--acik-renk);
    border-left: 4px solid var(--ikincil-renk);
    padding: 20px;
    margin: 25px 0;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--koyu-renk);
}

/* Yazı Sonu Etiketler */
.blog-etiketler {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.blog-etiketler strong {
    font-weight: 600;
}

.blog-etiketler a {
    font-size: 0.8rem;
    background-color: var(--acik-renk);
    color: var(--gri-renk);
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.blog-etiketler a:hover {
    background-color: var(--ikincil-renk);
    color: #fff;
}

/* Sosyal Paylaşım */
.blog-paylas {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
}

.blog-paylas strong {
    font-weight: 600;
}

.blog-paylas .sosyal-ikon {
    background-color: var(--acik-renk);
    color: var(--gri-renk);
}

.blog-paylas .sosyal-ikon:hover {
    background-color: var(--ana-renk);
    color: #fff;
}


/* Sağ - Yan Menü (Sidebar) */
.blog-yan-menu {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Grid'de sabit kalması için */
    position: sticky;
    top: 100px;
    height: fit-content;
}

.yan-menu-widget {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    padding: 25px;
}

.yan-menu-widget h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ana-renk);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

/* Arama Widget'ı */
.yan-menu-arama {
    display: flex;
    position: relative;
}

.yan-menu-arama input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.9rem;
}

.yan-menu-arama button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 0 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gri-renk);
    font-size: 1rem;
}

/* Kategori Listesi Widget'ı */
.yan-menu-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yan-menu-liste li a {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gri-renk);
    transition: color 0.3s ease;
}

.yan-menu-liste li a:hover {
    color: var(--ikincil-renk);
}

.yan-menu-liste li a span {
    font-weight: 600;
}

/* Son Yazılar Widget'ı */
.yan-menu-son-yazilar {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.son-yazi-ogesi {
    display: flex;
    align-items: center;
    gap: 15px;
}

.son-yazi-ogesi img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
}

.son-yazi-bilgi a {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--koyu-renk);
    line-height: 1.4;
    margin-bottom: 3px;
    transition: color 0.3s ease;
}

.son-yazi-bilgi a:hover {
    color: var(--ikincil-renk);
}

.son-yazi-bilgi span {
    font-size: 0.8rem;
    color: var(--gri-renk);
}

/* Etiket Bulutu Widget'ı */
.yan-menu-etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.yan-menu-etiketler a {
    font-size: 0.8rem;
    background-color: var(--acik-renk);
    color: var(--gri-renk);
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.yan-menu-etiketler a:hover {
    background-color: var(--ikincil-renk);
    color: #fff;
}

/* Yorumlar Kartı için Boşluk */
.blog-detay-alani .urun-tab-kart {
    margin-top: 30px;
}

/* Yorumlar bölümünün başlığı yoktu, ekleyelim */
.blog-detay-alani .urun-tab-kart .tab-icerikleri {
    padding: 30px;
}

/* ================================================== */
/* ===== BLOG DETAY SAYFASI RESPONSIVE AYARLARI ===== */
/* ================================================== */

@media (max-width: 992px) {
    .blog-detay-govdesi {
        grid-template-columns: 1fr;
        /* Tek sütuna düşür */
    }

    .blog-yan-menu {
        /* Yapışkanlığı kaldır ve sırayla diz */
        position: static;
        margin-top: 30px;
    }
}


/* ============================================= */
/* ===== YENİ: RANDEVU SAYFASI STİLLERİ ===== */
/* ============================================= */

.randevu-alani {
    padding: 60px 0;
    background-color: var(--acik-renk);
    /* Sayfanın ana arka planı */
}

.randevu-karti {
    max-width: 800px;
    margin: 0 auto;
    /* Formu ortala */
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi);
    padding: 40px;
}

.randevu-karti h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--ana-renk);
    text-align: center;
    margin-bottom: 10px;
}

.randevu-karti p {
    font-size: 0.95rem;
    color: var(--gri-renk);
    text-align: center;
    margin-bottom: 30px;
}

.randevu-formu {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form stillerini blog-detay'dan alıyoruz */
/* .form-grup { ... } (Zaten tanımlı) */
/* .form-grup-inline { ... } (Zaten tanımlı) */

/* İkonlu Form Grupları */
.form-grup-ikon {
    position: relative;
    width: 100%;
}

.form-grup-ikon i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    color: var(--gri-renk);
    font-size: 0.9rem;
}

.form-grup-ikon input,
.form-grup-ikon select,
.form-grup-ikon textarea {
    /* İkona yer açmak için */
    padding-left: 45px !important;
}

/* Form elemanlarının stillerini global .form-grup'tan al */
.randevu-formu input[type="text"],
.randevu-formu input[type="email"],
.randevu-formu input[type="tel"],
.randevu-formu input[type="date"],
.randevu-formu select,
.randevu-formu textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: var(--koyu-renk);
}

.randevu-formu select {
    /* Safari'de düzgün görünmesi için */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%236c757d%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1.2em;
    padding-right: 40px;
}

.randevu-formu textarea {
    resize: vertical;
}

.randevu-formu .form-grup .buton-ana {
    width: 100%;
    font-size: 1.1rem;
    padding: 15px;
}

/* ================================================== */
/* ===== RANDEVU SAYFASI RESPONSIVE AYARLARI ===== */
/* ================================================== */
@media (max-width: 992px) {
    /* .form-grup-inline zaten blog-detay.html'de 1fr'a düşecek şekilde ayarlanmıştı */
}

@media (max-width: 480px) {
    .randevu-karti {
        padding: 20px;
    }
}

/* ============================================= */
/* ===== YENİ: GELİŞMİŞ RANDEVU FORMU STİLLERİ ===== */
/* ============================================= */

/* Ana Randevu Kartı */
.randevu-alani {
    padding: 60px 0;
    background-color: var(--acik-renk);
}

.randevu-karti {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi);
    padding: 40px;
}

.randevu-formu {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 1. İlerleme Çubuğu (Progress Bar) */
.randevu-ilerleme {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.ilerleme-adimi {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--gri-renk);
    transition: all 0.3s ease;
    text-align: center;
}

.ilerleme-adimi i {
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    transition: all 0.3s ease;
}

.ilerleme-adimi span {
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 10px;
}

.ilerleme-cizgisi {
    flex-grow: 1;
    height: 2px;
    background-color: #ccc;
    margin: 0 10px;
    margin-bottom: 30px;
    /* İkonlarla hizalamak için */
}

/* Aktif Adım Stilleri */
.ilerleme-adimi.aktif {
    color: var(--ana-renk);
}

.ilerleme-adimi.aktif i {
    background-color: var(--ana-renk);
    color: #fff;
    border-color: var(--ana-renk);
}

.ilerleme-adimi.tamamlandi i {
    background-color: var(--yeni-etiket-rengi);
    /* Yeşil */
    color: #fff;
    border-color: var(--yeni-etiket-rengi);
}

/* 2. Adımlar (Steps) */
.randevu-adimi {
    display: none;
    /* JS ile .aktif olan gösterilecek */
    animation: fadeIn 0.5s ease;
}

.randevu-adimi.aktif {
    display: block;
}

.adim-basligi {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--koyu-renk);
    margin-bottom: 25px;
}

/* Adım 1: Hizmet Seçimi Kartları */
.hizmet-secim-listesi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.hizmet-secim-karti {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    border: 2px solid #eee;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hizmet-secim-karti:hover {
    border-color: var(--ikincil-renk);
    background-color: var(--acik-renk);
}

.hizmet-secim-karti.secili {
    border-color: var(--ana-renk);
    background-color: #f0f7fa;
    /* Açık mavi */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
}

.hizmet-secim-karti i {
    font-size: 2.5rem;
    color: var(--ana-renk);
    margin-bottom: 15px;
}

.hizmet-secim-karti span {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--koyu-renk);
}

/* Adım 2: Takvim ve Saat */
.takvim-saat-konteyner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 30px;
}

/* Takvim */
#takvim-konteyner {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.takvim-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--ana-renk);
    color: #fff;
}

.takvim-baslik button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}

.takvim-baslik span {
    font-size: 1.1rem;
    font-weight: 600;
}

.takvim-gunler {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: var(--acik-renk);
}

.takvim-gunler span {
    text-align: center;
    padding: 10px 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gri-renk);
}

.takvim-tarihler {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.tarih-gunu {
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.tarih-gunu:hover {
    background-color: var(--acik-renk);
}

.tarih-gunu.pasif-gun {
    color: #ccc;
    cursor: not-allowed;
}

.tarih-gunu.secili-tarih {
    background-color: var(--ana-renk);
    color: #fff;
    font-weight: 600;
    border-radius: 5px;
}

/* Saat Slotları */
.saat-slotlari-konteyner h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.saat-slotlari {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.saat-slotu {
    padding: 12px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.saat-slotu:hover {
    background-color: var(--acik-renk);
}

.saat-slotu.pasif {
    background-color: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
    text-decoration: line-through;
}

.saat-slotu.secili-saat {
    background-color: var(--ana-renk);
    color: #fff;
    font-weight: 600;
    border-color: var(--ana-renk);
}

/* Adım 3: Bilgiler & Özet */
.randevu-ozeti {
    background-color: var(--acik-renk);
    border-radius: 5px;
    padding: 15px;
    margin-top: 10px;
}

.randevu-ozeti p {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.randevu-ozeti p:last-child {
    margin-bottom: 0;
}

.randevu-ozeti span {
    font-weight: 600;
    color: var(--ikincil-renk);
}

/* Adım Navigasyon */
.randevu-navigasyon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.buton-ikincil {
    /* Global buton stilini ezelim */
    background-color: var(--acik-renk);
    color: var(--koyu-renk);
    border: 1px solid #ddd;
}

.buton-ikincil:hover {
    background-color: #e9ecef;
}

/* ======================================================= */
/* ===== GELİŞMİŞ RANDEVU RESPONSIVE AYARLARI ===== */
/* ======================================================= */
@media (max-width: 768px) {
    .hizmet-secim-listesi {
        grid-template-columns: 1fr 1fr;
        /* Mobilde 2'li kalsın */
    }

    .hizmet-secim-karti {
        padding: 20px 10px;
    }

    .hizmet-secim-karti i {
        font-size: 2rem;
    }

    .hizmet-secim-karti span {
        font-size: 1rem;
    }

    .takvim-saat-konteyner {
        grid-template-columns: 1fr;
        /* Takvim ve saat alt alta */
    }

    .saat-slotlari {
        grid-template-columns: repeat(3, 1fr);
        /* Saatleri 3'lü diz */
    }

    .ilerleme-adimi span {
        font-size: 0.8rem;
        /* Yazıları küçült */
    }
}

@media (max-width: 480px) {
    .randevu-karti {
        padding: 20px;
    }

    .ilerleme-adimi i {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .ilerleme-adimi span {
        display: none;
        /* En küçük mobilde yazıları gizle, sadece ikon kalsın */
    }

    .ilerleme-cizgisi {
        margin-bottom: 0;
    }

    .hizmet-secim-listesi {
        grid-template-columns: 1fr;
        /* En küçük mobilde tek sütun */
    }

    .tarih-gunu {
        padding: 10px 0;
        font-size: 0.9rem;
    }

    .saat-slotlari {
        grid-template-columns: repeat(2, 1fr);
        /* Saatleri 2'li diz */
    }
}



/* ============================================= */
/* ===== YENİ: SEPET SAYFASI STİLLERİ (Gelişmiş) ===== */
/* ============================================= */

.sepet-alani {
    padding: 60px 0;
    background-color: var(--acik-renk);
}

.sepet-govdesi {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    /* JS ile gizle/göster için */
    display: none;
}

.sepet-govdesi.aktif {
    display: grid;
}

/* Boş Sepet Stili */
.sepet-bos {
    display: none;
    /* JS ile .aktif olunca göster */
    text-align: center;
    padding: 60px 30px;
    background-color: #fff;
    border: 1px dashed #ddd;
    border-radius: 8px;
}

.sepet-bos.aktif {
    display: block;
}

.sepet-bos i {
    font-size: 4rem;
    color: var(--gri-renk);
    opacity: 0.5;
    margin-bottom: 20px;
}

.sepet-bos h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--koyu-renk);
    margin-bottom: 10px;
}

.sepet-bos p {
    color: var(--gri-renk);
    margin-bottom: 25px;
}

/* Sol Taraf - Sepet Listesi */
.sepet-listesi-karti {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    /* Padding'i iç başlık ve liste alsın */
}

.sepet-liste-baslik {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 50px;
    /* Sütunları hizala */
    gap: 20px;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gri-renk);
}

.baslik-fiyat,
.baslik-miktar,
.baslik-toplam {
    text-align: center;
}

.baslik-kaldir {
    text-align: right;
}

.sepet-urunleri {
    padding: 0 30px;
}

.sepet-ogesi {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 50px;
    /* Başlıkla aynı hizalama */
    gap: 20px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

.sepet-ogesi:last-child {
    border-bottom: none;
}

.sepet-ogesi [data-label] {
    /* Mobil için etiket (gizli) */
    display: block;
}

.urun-bilgisi {
    display: flex;
    align-items: center;
    gap: 15px;
}

.urun-bilgisi img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #eee;
}

.urun-detay h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--koyu-renk);
}

.urun-detay span {
    font-size: 0.9rem;
    color: var(--gri-renk);
}

.urun-fiyati,
.urun-toplami {
    font-size: 1rem;
    font-weight: 600;
    color: var(--koyu-renk);
    text-align: center;
}

.urun-fiyati .eski-fiyat {
    /* İndirim göstergesi */
    font-size: 0.85rem;
    color: var(--gri-renk);
    text-decoration: line-through;
    display: block;
}

.urun-fiyati .yeni-fiyat {
    font-weight: 600;
}

.urun-miktari {
    display: flex;
    justify-content: center;
}

/* Miktar Seçici (urun-detay.html'den) */
.miktar-secici {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.miktar-secici .miktar-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 10px 15px;
    color: var(--gri-renk);
}

.miktar-secici .miktar-btn:hover {
    color: var(--koyu-renk);
}

.miktar-secici .miktar-input,
.miktar-secici #miktar-input {
    width: 50px;
    text-align: center;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px 0;
}

.urun-miktari .miktar-secici {
    transform: scale(0.9);
    /* Sepette daha küçük */
}

.urun-kaldir {
    text-align: right;
}

.urun-kaldir .ikon-buton:hover {
    color: var(--indirim-etiket-rengi);
}

/* Sepet Altı Aksiyonları */
.sepet-aksiyonlari {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background-color: var(--acik-renk);
    border-top: 1px solid #eee;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.alisverise-devam-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ikincil-renk);
}

.alisverise-devam-link i {
    margin-right: 5px;
}

.sepeti-temizle-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--indirim-etiket-rengi);
    cursor: pointer;
}

.sepeti-temizle-link i {
    margin-right: 5px;
}

/* Sağ Taraf - Sipariş Özeti */
.sepet-ozet-karti {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    padding: 30px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

.sepet-ozet-karti h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ana-renk);
    margin-bottom: 20px;
}

.kupon-formu {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.kupon-formu input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.9rem;
}

.kupon-formu .buton-ikincil {
    padding: 0 20px;
    flex-shrink: 0;
}

.kargo-hesapla-formu {
    margin-bottom: 25px;
}

.kargo-hesapla-formu label {
    font-size: 1rem;
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
}

.kargo-hesapla-formu select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%236c757d%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1.2em;
}

.ozet-satirlari {
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.ozet-satiri {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--gri-renk);
    margin-bottom: 15px;
}

.ozet-satiri span:last-child {
    font-weight: 600;
    color: var(--koyu-renk);
}

/* İndirim satırı */
.ozet-satiri.indirim span:last-child {
    color: var(--yeni-etiket-rengi);
    /* Yeşil */
    font-weight: 600;
}

.ozet-toplami {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--koyu-renk);
    border-top: 1px solid #ddd;
    padding-top: 15px;
    margin-bottom: 25px;
}

.ozet-toplami span:last-child {
    color: var(--ana-renk);
}

.odeme-butonu {
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    padding: 15px;
}

/* ================================================== */
/* ===== SEPET SAYFASI RESPONSIVE AYARLARI ===== */
/* ================================================== */
@media (max-width: 992px) {
    .sepet-govdesi {
        grid-template-columns: 1fr;
        /* Tek sütuna düşür */
    }

    .sepet-ozet-karti {
        position: static;
        /* Yapışkanlığı kaldır */
    }
}

@media (max-width: 768px) {

    /* Masaüstü başlıklarını gizle */
    .sepet-liste-baslik {
        display: none;
    }

    .sepet-urunleri {
        padding: 0 10px;
        /* Mobil kartta kenar boşluğu azalt */
    }

    .sepet-listesi-karti {
        padding: 10px;
    }

    .sepet-ogesi {
        /* Daha modern bir mobil kart düzeni */
        grid-template-columns: 80px 1fr;
        /* Sol: resim, Sağ: içerik */
        grid-template-rows: auto auto auto;
        /* 3 satır */
        gap: 10px 15px;
        padding: 20px 0;
    }

    .sepet-ogesi .urun-bilgisi {
        grid-column: 1 / 3;
        /* 1. satır, tam genişlik */
        grid-row: 1 / 2;
    }

    .sepet-ogesi .urun-fiyati {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        text-align: left;
    }

    .sepet-ogesi .urun-miktari {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        justify-content: flex-start;
    }

    .sepet-ogesi .urun-toplami {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        text-align: left;
    }

    .sepet-ogesi .urun-kaldir {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        text-align: right;
        align-self: center;
    }

    /* Mobil etiketleri göster */
    .sepet-ogesi [data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 500;
        color: var(--gri-renk);
        font-size: 0.9rem;
        margin-right: 5px;
    }

    .sepet-ogesi .urun-fiyati .eski-fiyat {
        display: inline-block;
        /* Mobilde yanına al */
        margin-left: 10px;
    }

    .sepet-ogesi .urun-fiyati [data-label]::before {
        display: none;
        /* Fiyat etiketini gizle */
    }

    .sepet-aksiyonlari {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }

    .alisverise-devam-link,
    .sepeti-temizle-link {
        text-align: center;
        width: 100%;
    }

    .sepeti-temizle-link {
        order: -1;
        /* Sepeti temizle üste gelsin */
        color: var(--gri-renk);
    }

    .sepeti-temizle-link:hover {
        color: var(--indirim-etiket-rengi);
    }
}


/* ============================================= */
/* ===== YENİ: ÖDEME SAYFASI STİLLERİ ===== */
/* ============================================= */

.odeme-alani {
    padding: 60px 0;
    background-color: var(--acik-renk);
}

.odeme-govdesi {
    display: grid;
    /* 1fr: Esnek sol sütun, 400px: Sabit sağ özet sütunu */
    grid-template-columns: 1fr 400px;
    gap: 30px;
}

/* Sol Taraf - Form Kartı */
.odeme-form-karti {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    padding: 30px;
}

.odeme-form-karti h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ana-renk);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.odeme-form-karti h3 i {
    font-size: 1.1rem;
}

.odeme-form-karti .form-ayraci {
    border: 0;
    border-top: 1px solid #eee;
    margin: 30px 0;
}

.odeme-form-karti .form-grup label {
    font-size: 0.9rem;
    font-weight: 500;
}

/* 'Mesafeli Satış Sözleşmesi' checkbox'ı için stil */
.odeme-form-karti .secenek-satiri {
    align-items: flex-start;
}

.odeme-form-karti .secenek-satiri label {
    font-weight: 400;
    font-size: 0.9rem;
}

.odeme-form-karti .secenek-satiri label a {
    color: var(--ikincil-renk);
    font-weight: 500;
}

/* Ödeme Yöntemi Seçim Kartları */
.odeme-yontemi-secimi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.odeme-yontemi-karti {
    border: 2px solid #eee;
    border-radius: 5px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.odeme-yontemi-karti i {
    font-size: 1.5rem;
    color: var(--gri-renk);
    transition: color 0.3s ease;
}

.odeme-yontemi-karti span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--koyu-renk);
}

.odeme-yontemi-karti.aktif {
    border-color: var(--ana-renk);
    background-color: #f0f7fa;
}

.odeme-yontemi-karti.aktif i {
    color: var(--ana-renk);
}

/* Ödeme Detay Panelleri */
.odeme-detay-paneli {
    border: 1px solid #ddd;
    border-radius: 5px;
}

.panel-icerik {
    display: none;
    /* JS ile .aktif olan gösterilecek */
    padding: 20px;
    animation: fadeIn 0.5s ease;
}

.panel-icerik.aktif {
    display: block;
}

.havale-bilgisi {
    background-color: var(--acik-renk);
    padding: 15px;
    border-radius: 5px;
    line-height: 1.7;
    margin-top: 15px;
}

/* Sağ Taraf - Sipariş Özeti Kartı */
/* .sepet-ozet-karti stilleri 'sepet.html'den miras alınır */
.sepet-ozet-karti {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    padding: 30px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

/* Özet içindeki ürün listesi */
.ozet-urun-listesi {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
    padding-right: 10px;
    /* Kaydırma çubuğu için */
}

.ozet-urun-ogesi {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.ozet-urun-ogesi:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.ozet-urun-ogesi img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #eee;
}

.ozet-urun-detay {
    flex-grow: 1;
    font-size: 0.9rem;
    color: var(--koyu-renk);
}

.ozet-urun-fiyat {
    font-size: 0.9rem;
    font-weight: 600;
}

/* ================================================== */
/* ===== ÖDEME SAYFASI RESPONSIVE AYARLARI ===== */
/* ================================================== */
@media (max-width: 992px) {
    .odeme-govdesi {
        grid-template-columns: 1fr;
        /* Tek sütuna düşür */
    }

    .sepet-ozet-karti {
        position: static;
        /* Yapışkanlığı kaldır */
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    .odeme-form-karti {
        padding: 20px;
    }

    .odeme-yontemi-secimi {
        grid-template-columns: 1fr;
        /* Alt alta diz */
    }
}


/* ============================================= */
/* ===== YENİ: ÖDEME SONUÇ SAYFALARI (Başarılı/Başarısız) ===== */
/* ============================================= */

.odeme-sonuc-alani {
    padding: 60px 0;
    background-color: var(--acik-renk);
    min-height: 40vh;
}

.odeme-sonuc-karti {
    max-width: 700px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    padding: 40px;
    text-align: center;
}

.odeme-sonuc-karti i {
    font-size: 4rem;
    margin-bottom: 20px;
}

.odeme-sonuc-karti h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.odeme-sonuc-karti p {
    font-size: 1rem;
    color: var(--gri-renk);
    margin-bottom: 30px;
    line-height: 1.7;
}

/* Renk Varyasyonları */
.odeme-sonuc-karti.basarili i,
.odeme-sonuc-karti.basarili h3 {
    color: var(--yeni-etiket-rengi);
    /* Yeşil */
}

.odeme-sonuc-karti.basarisiz i,
.odeme-sonuc-karti.basarisiz h3 {
    color: var(--indirim-etiket-rengi);
    /* Kırmızı */
}

/* Sipariş Özeti (Başarı Sayfasında) */
.siparis-ozeti-kutusu {
    background-color: var(--acik-renk);
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 25px;
    margin-bottom: 30px;
    text-align: left;
}

.siparis-ozeti-kutusu h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--koyu-renk);
    margin-bottom: 15px;
}

.siparis-ozeti-kutusu ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.siparis-ozeti-kutusu li {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    color: var(--gri-renk);
}

.siparis-ozeti-kutusu li strong {
    color: var(--koyu-renk);
    font-weight: 600;
}

/* Butonlar */
.odeme-sonuc-karti .buton-ana,
.odeme-sonuc-karti .buton-ikincil {
    margin: 0 5px;
    padding-left: 35px;
    padding-right: 35px;
}

/* ================================================== */
/* ===== ÖDEME SONUÇ RESPONSIVE AYARLARI ===== */
/* ================================================== */
@media (max-width: 480px) {
    .odeme-sonuc-karti {
        padding: 30px 20px;
    }

    .odeme-sonuc-karti h3 {
        font-size: 1.5rem;
    }

    .odeme-sonuc-karti i {
        font-size: 3rem;
    }

    .odeme-sonuc-karti .buton-ana,
    .odeme-sonuc-karti .buton-ikincil {
        display: block;
        width: 100%;
        margin: 10px 0;
    }
}



/* ============================================= */
/* ===== YENİ: İLETİŞİM SAYFASI STİLLERİ ===== */
/* ============================================= */

.iletisim-alani {
    padding: 60px 0;
    background-color: var(--acik-renk);
}

.iletisim-govdesi {
    display: grid;
    /* 1.5fr: Form alanı, 1fr: Bilgi alanı */
    grid-template-columns: 1.5fr 1fr;
    gap: 30px;
}

/* Sol Taraf - Form Kartı */
.iletisim-form-karti {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    padding: 30px;
}

.iletisim-form-karti h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--ana-renk);
    margin-bottom: 10px;
}

.iletisim-form-karti p {
    font-size: 0.95rem;
    color: var(--gri-renk);
    margin-bottom: 30px;
}

/* Form stilleri .form-grup'tan miras alınır */
.iletisim-formu .buton-ana {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
}

/* Sağ Taraf - Bilgi Kartı */
.iletisim-bilgi-karti {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    padding: 30px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

.iletisim-bilgi-karti h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--ana-renk);
    margin-bottom: 10px;
}

.iletisim-bilgi-karti p {
    font-size: 0.95rem;
    color: var(--gri-renk);
    margin-bottom: 30px;
}

.bilgi-listesi {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 30px;
}

.bilgi-ogesi {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.bilgi-ikon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--acik-renk);
    color: var(--ana-renk);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.bilgi-detay {
    display: flex;
    flex-direction: column;
}

.bilgi-detay strong {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--koyu-renk);
    margin-bottom: 3px;
}

.bilgi-detay span {
    font-size: 0.95rem;
    color: var(--gri-renk);
    line-height: 1.6;
}

.harita-kapsayici {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #eee;
}

.harita-kapsayici iframe {
    display: block;
}


/* ================================================== */
/* ===== İLETİŞİM SAYFASI RESPONSIVE AYARLARI ===== */
/* ================================================== */
@media (max-width: 992px) {
    .iletisim-govdesi {
        grid-template-columns: 1fr;
        /* Tek sütuna düşür */
    }

    .iletisim-bilgi-karti {
        position: static;
        /* Yapışkanlığı kaldır */
    }
}


/* ============================================= */
/* ===== YENİ: HAKKIMIZDA SAYFASI STİLLERİ ===== */
/* ============================================= */

.hakkimizda-alani {
    padding: 60px 0;
    background-color: var(--acik-renk);
}

.hakkimizda-kart {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    overflow: hidden;
    /* Görselin köşelerini yuvarlatmak için */
}

.hakkimizda-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hakkimizda-icerik {
    padding: 40px;
}

.hakkimizda-icerik h2 {
    /* "Biz Kimiz?" */
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ikincil-renk);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.hakkimizda-icerik h3 {
    /* Ana Başlık */
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--ana-renk);
    margin-bottom: 20px;
}

.hakkimizda-icerik p {
    font-size: 1rem;
    color: var(--gri-renk);
    line-height: 1.8;
    margin-bottom: 15px;
}

/* Değerlerimiz Bölümü (Neden Biz?) */
.degerler-bolumu {
    padding: 60px 20px;
    background-color: #fff;
}

/* Bu bölüm .hizmet-listesi-yeni ve .hizmet-kart stillerini yeniden kullanır */
.degerler-bolumu .hizmet-kart {
    /* Hizmet kartı hover'ını biraz daha sade yapalım */
    transform: translateY(0);
}

.degerler-bolumu .hizmet-kart:hover {
    transform: translateY(-5px);
}

.degerler-bolumu .hizmet-kart .hizmet-ad {
    font-size: 1.2rem;
}

.degerler-bolumu .hizmet-kart .hizmet-aciklama {
    min-height: 0;
    /* Min yükseklik zorunluluğunu kaldır */
}


/* Ekibimiz Bölümü */
.ekip-bolumu {
    padding: 60px 20px;
    background-color: var(--acik-renk);
}

.ekip-listesi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.ekip-karti {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.ekip-karti:hover {
    transform: translateY(-5px);
    box-shadow: var(--kenar-golgesi);
}

.ekip-kart-gorsel img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px auto;
    border: 4px solid #f0f0f0;
}

.ekip-kart-bilgi h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--koyu-renk);
}

.ekip-kart-bilgi span {
    font-size: 0.9rem;
    color: var(--ikincil-renk);
    font-weight: 500;
}

.ekip-sosyal {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* .ikon-buton-kucuk stilini yeniden kullanıyoruz */
.ekip-sosyal .ikon-buton-kucuk {
    background-color: var(--acik-renk);
}

.ekip-sosyal .ikon-buton-kucuk:hover {
    background-color: var(--ana-renk);
    color: #fff;
}

/* ================================================== */
/* ===== HAKKIMIZDA RESPONSIVE AYARLARI ===== */
/* ================================================== */
@media (max-width: 992px) {
    .hakkimizda-kart {
        grid-template-columns: 1fr;
        /* Tek sütuna düşür */
    }

    .hakkimizda-gorsel img {
        height: 350px;
    }
}


/* ============================================= */
/* ===== YENİ: S.S.S. SAYFASI STİLLERİ ===== */
/* ============================================= */

.sss-alani {
    padding: 60px 0;
    background-color: #fff;
}

/* Normal .konteyner'dan daha dar (1200px -> 800px) */
.konteyner-dar {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.sss-akordeon {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    /* Kartların kenarlarını gizlemek için */
    box-shadow: var(--kenar-golgesi-hafif);
}

.sss-karti {
    border-bottom: 1px solid #eee;
}

.sss-karti:last-child {
    border-bottom: none;
}

.sss-soru {
    /* Buton stillerini sıfırla */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;

    /* Yeni stiller */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 25px;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.3s ease;
}

.sss-soru:hover {
    background-color: var(--acik-renk);
}

.sss-soru span {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--koyu-renk);
    text-align: left;
}

.sss-soru i {
    font-size: 1rem;
    color: var(--gri-renk);
    transition: transform 0.3s ease;
}

/* Cevap Bölümü */
.sss-cevap {
    /* JS ile .aktif olunca max-height değişecek */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.sss-cevap p {
    padding: 0 25px 25px 25px;
    font-size: 0.95rem;
    color: var(--gri-renk);
    line-height: 1.8;
}

/* JS .aktif sınıfı eklediğinde */
.sss-karti.aktif .sss-soru i {
    transform: rotate(180deg);
    color: var(--ana-renk);
}

.sss-karti.aktif .sss-soru span {
    color: var(--ana-renk);
}

.sss-karti.aktif .sss-cevap {
    max-height: 300px;
    /* Cevabın sığacağı kadar yükseklik */
    transition: max-height 0.5s ease-in;
}

/* ================================================== */
/* ===== S.S.S. RESPONSIVE AYARLARI ===== */
/* ================================================== */
@media (max-width: 480px) {
    .sss-soru {
        padding: 15px 20px;
    }

    .sss-soru span {
        font-size: 1rem;
    }

    .sss-cevap p {
        padding: 0 20px 20px 20px;
        font-size: 0.9rem;
    }
}


/* ============================================= */
/* ===== YENİ: GİRİŞ / KAYIT SAYFASI STİLLERİ ===== */
/* ============================================= */

.giris-kayit-alani {
    padding: 60px 0;
    background-color: var(--acik-renk);
    min-height: 50vh;
}

/* .konteyner-dar (sss.html'den miras alınır) */

.giris-kayit-karti {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--kenar-golgesi-hafif);
    overflow: hidden;
    /* Sekme başlıklarını sığdırmak için */
}

/* Sekme Başlıkları */
.giris-tab-basliklari {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--acik-renk);
}

.giris-tab-link {
    /* Buton stillerini sıfırla */
    background: none;
    border: none;
    font-family: 'Poppins', sans-serif;

    /* Yeni stiller */
    padding: 20px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gri-renk);
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.giris-tab-link:hover {
    color: var(--koyu-renk);
}

.giris-tab-link.aktif {
    color: var(--ana-renk);
    background-color: #fff;
    border-bottom-color: var(--ana-renk);
}

/* Sekme İçerikleri */
.giris-tab-icerikleri {
    padding: 30px;
}

.giris-tab-paneli {
    display: none;
    /* JS ile .aktif olan gösterilecek */
    animation: fadeIn 0.5s ease;
}

.giris-tab-paneli.aktif {
    display: block;
}

/* Form stilleri */
/* .form-grup (globalde tanımlı) */
/* .secenek-satiri (urunler.html'de tanımlı) */
.giris-formu .buton-ana {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
}

.form-grup-yardimci {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.sifremi-unuttum-link {
    font-size: 0.9rem;
    color: var(--ikincil-renk);
}

.sifremi-unuttum-link:hover {
    text-decoration: underline;
}