/* ========================================================================
   1. TEMEL AYARLAR VE FONTLAR (ORİJİNAL YAPI)
   ======================================================================== */
html, body {
    margin: 0; padding: 0; width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f4f4; color: #333;
    box-sizing: border-box; overflow-x: hidden;
}
*, *::before, *::after { box-sizing: inherit; }

/* SAYFA ZIPLAMASINI ÖNLEYEN AYAR */
main {
    padding-top: 80px !important;
    min-height: 100vh; /* Ekran içeriği değişince sayfanın yukarı fırlamasını engeller */
}

/* FONT TANIMLAMALARI */
@font-face { font-family: 'BAILEYS'; src: url('fontlar/Super\ Magical.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'BELLA'; src: url('fontlar/BarberChop.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'TOFFEE'; src: url('fontlar/Love\ Me.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'BITTER'; src: url('fontlar/Super\ Malibu.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'BOBY'; src: url('fontlar/KGRedHands.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'CHANEL'; src: url('fontlar/Hey\ Comic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'CEVIZ'; src: url('fontlar/Simon\ Lovely.otf') format('truetype'); font-display: swap; }
@font-face { font-family: 'LUCKY'; src: url('fontlar/Super\ Joyful.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'LUNA'; src: url('fontlar/All\ in.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DAISY'; src: url('fontlar/Happy\ Smile.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'KAJU'; src: url('fontlar/Starting\ Point.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'LIMA'; src: url('fontlar/Beautiful\ Butterfly.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'LOLA'; src: url('fontlar/Brewed\ Coffee.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'SUZIE'; src: url('fontlar/Bohemian\ Soul.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'TOMMY'; src: url('fontlar/Starborn.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'ARMONI'; src: url('fontlar/Magic\ Retro.ttf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PARIS'; src: url('fontlar/MEOW\ IN\ LOVE\ DEMO.ttf') format('opentype'); font-display: swap; }
@font-face { font-family: 'ODETTE'; src: url('fontlar/Lovely\ Bubbles.ttf') format('opentype'); font-display: swap; }
@font-face { font-family: 'KIRAZ'; src: url('fontlar/Love\ Mayjen.ttf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PIXEL'; src: url('fontlar/Christmas\ Buttermilk.otf') format('opentype'); font-display: swap; }



/* ========================================================================
   2. HEADER VE MENÜLER
   ======================================================================== */
header {
    background-color: #5d8a9e; padding: 10px 0px; color: white;
    display: flex; justify-content: space-between; align-items: center;
    position: fixed; top: 0; width: 100%; z-index: 9999;
}
header nav { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.nav-sol, .nav-sag { display: flex; align-items: center; gap: 25px; }
header h1 { display: none; }

.menu-ac-kapat {
    position: absolute; top: 50%; left: 20px; background: none; border: none;
    color: white; font-size: 30px; cursor: pointer; z-index: 1000; transform: translateY(-50%);
}
header nav { display: flex; justify-content: center; align-items: center; flex-grow: 1; gap: 30px; }
.logo { height: 60px; object-fit: contain; }
header nav a { color: white; text-decoration: none; font-size: 1.1em; transition: color 0.3s; }
header nav a:hover { color: #FFC90E; }
header nav button {
    background-color: #f6f5f1; color: #333; border: none; padding: 10px 15px;
    border-radius: 5px; cursor: pointer; font-size: 1em; transition: background-color 0.3s;
}
header nav button:hover { background-color: #FFC90E; }

/* Yan Menü */
.yan-menu {
    position: fixed; top: 80px; left: 0; width: 250px; height: calc(100% - 80px);
    background-color: #333; color: white; padding-top: 0; z-index: 9998;
    transform: translateX(-100%); transition: transform 0.4s ease-in-out;
}
.yan-menu.acik { transform: translateX(0); }
.yan-menu .menu-ac-kapat { top: 20px; right: 10px; left: unset; }
.yan-menu-nav { display: flex; flex-direction: column; padding: 20px; }
.yan-menu-nav a, .yan-menu-nav button {
    color: white; text-decoration: none; padding: 15px 0; border-bottom: 1px solid #555;
    text-align: left; background: none; border: none; font-size: 1.2em; cursor: pointer;
}
.yan-menu-nav a:hover, .yan-menu-nav button:hover { color: #FFC90E; }
.header-sag button {
    background: none; color: white; border: none; padding: 10px 15px;
    border-radius: 5px; cursor: pointer; font-size: 1.2em; transition: background-color 0.3s;
}
.header-sag button:hover { background-color: rgba(255, 255, 255, 0.2); }

/* ========================================================================
   3. MODALLAR (Genel, Charm, Profil)
   ======================================================================== */
.modal {
    position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center;
}
.modal-icerik {
    background-color: white; padding: 25px; border-radius: 10px;
    width: 90%; max-width: 500px; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.modal-icerik .kapat {
    position: absolute; top: 10px; right: 15px; font-size: 2rem; color: #999;
    background: none; border: none; cursor: pointer; padding: 5px; line-height: 1; z-index: 10;
}
.modal-icerik .kapat:hover { color: #000; }

/* Charm Modalı Özel */
#charmModal .modal-icerik { max-height: 80vh; display: flex; flex-direction: column; }
#charmModal h3 { flex-shrink: 0; margin: 0 0 15px 0; padding-bottom: 15px; border-bottom: 1px solid #eee; font-size: 1.5rem; text-align: center; color: #333; }
#charmModal .charm-secenekleri { overflow-y: auto; padding-right: 15px; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
#charmModal .charm-secenekleri img { width: 80px; height: 80px; border-radius: 50%; cursor: pointer; transition: transform 0.2s; border: 3px solid transparent; }
#charmModal .charm-secenekleri img:hover, #charmModal .charm-secenekleri img.secili { transform: scale(1.1); border-color: #5d8a9e; }

/* ========================================================================
   4. BİLDİRİM, BUTONLAR VE DROPDOWN
   ======================================================================== */
.bildirim {
    position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
    background-color: #28a745; color: white; padding: 15px 30px; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 10002; opacity: 0;
    transition: top 0.5s ease-out, opacity 0.5s ease-out; font-size: 1.1em; font-weight: bold;
}
.kategori-butonlari { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.kategori-butonlari button { background-color: #e2e2e2; color: #333; padding: 10px 20px; border: none; border-radius: 20px; cursor: pointer; transition: background-color 0.3s; font-weight: bold; }
.kategori-butonlari button:hover { background-color: #acc4cb; color: white; }
.kategori-butonlari button.aktif { background-color: #acc4cb; color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }

/* Dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; border-radius: 5px; overflow: hidden; }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; transition: background-color 0.3s; }
.dropdown-content a:hover { background-color: #ddd; }
.dropdown:hover .dropdown-content { display: block; }
.dropbtn { background-color: #e2e2e2; color: #333; padding: 10px 20px; border: none; border-radius: 20px; cursor: pointer; transition: background-color 0.3s; font-weight: bold; }
.dropbtn:hover { background-color: #acc4cb; color: white; }

/* ========================================================================
   5. ÜRÜN GALERİSİ VE KARTLARI
   ======================================================================== */
.urun-galeri { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 20px; }

/* Ürün Kartı (Mobil Tıklama Sorunu İçin Güncellendi) */
.urun-kart {
    width: 250px; background-color: white; border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden;
    cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; flex-direction: column; justify-content: flex-start;
    /* Mobilde tıklamayı garantilemek için: */
    position: relative; z-index: 50; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.urun-kart:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
/* İçerik tıklamayı engellemesin */
.urun-kart img { width: 100%; height: 200px; object-fit: cover; display: block; flex-shrink: 0; pointer-events: none; }
.urun-kart h3 { margin: 15px 15px 5px 15px; color: #333; font-size: 1.3em; text-align: center; pointer-events: none; }
.urun-kart p { margin: 5px 15px 20px 15px; font-size: 1.2em; font-weight: bold; color: #A31D61; text-align: center; min-height: 25px; flex-shrink: 0; pointer-events: none; }

/* İncele Butonu (JS ile eklenecek) */
.kart-incele-buton {
    background-color: #5d8a9e; color: white; border: none; padding: 10px;
    margin: 0 15px 15px; border-radius: 5px; font-weight: bold;
    cursor: pointer; pointer-events: auto; display: block;
}

/* ========================================================================
   6. ÜRÜN DETAY SAYFASI (Görünürlük Garantili)
   ======================================================================== */
/* Varsayılan olarak GİZLİ */
#urunDetay {
    display: none; width: 100%; background-color: #fff;
    padding-top: 20px; padding-bottom: 50px;
}
/* JS ile 'aktif' sınıfı eklenince GÖRÜNMEK ZORUNDA */
#urunDetay.aktif {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    z-index: 9999 !important; min-height: 100vh;
}

/* Detay İçerik Düzeni */
.urun-detay { max-width: 800px; margin: 40px auto; background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); position: relative; }
.detay-icerik { display: flex; gap: 40px; align-items: flex-start; }
.detay-sol { flex: 0 0 45%; max-width: 500px; }
.detay-sag { flex: 1; min-width: 0; }
.detay-sol img#detayFoto { width: 100%; max-width: 400px; border-radius: 8px; margin-bottom: 20px; }
.detay-fotolar { display: flex; gap: 10px; justify-content: center; }
.detay-fotolar img { width: 60px; height: 60px; object-fit: cover; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color 0.3s; }
.detay-fotolar img:hover, .detay-fotolar img.secili { border-color: #acc4cb; }
.detay-sag #detayFiyat { font-size: 1.5em; font-weight: bold; color: #A31D61; margin-top: 15px; display: block; }
.detay-formu button { background-color: #5d8a9e; color: white; border: none; padding: 12px 25px; border-radius: 5px; cursor: pointer; font-size: 1.1em; font-weight: bold; transition: background-color 0.3s; margin-top: 30px; }
.detay-formu button:hover { background-color: #4b7486; }
.kapat-buton { position: absolute; top: 15px; right: 15px; background-color: transparent; border: 1px solid #ccc; color: #333; padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; }
.kapat-buton:hover { background-color: #acc4cb; color: white; }

/* Detay Form Elemanları */
.detay-formu { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.detay-formu .form-grup { display: flex; flex-direction: column; align-items: flex-start; }
.detay-formu label { font-weight: bold; color: #555; margin-bottom: 5px; }
.detay-formu input[type="text"], .detay-formu input[type="tel"], .detay-formu select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; margin-top: 5px; }
#arkaYaziOpsiyonu textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; margin-top: 5px; font-family: inherit; font-size: 1em; resize: vertical; }

/* Detay sayfası açıkken alttaki kısımları gizle */
body.detay-acik .ozellikler-bandi, body.detay-acik .musteri-yorumlari, body.detay-acik .site-footer { display: none !important; }

/* ========================================================================
   7. SEPET (MODAL & DESKTOP) - DÜZELTİLMİŞ
   ======================================================================== */
.sepet {
    position: fixed; top: 0; right: 0; 
    width: 400px; /* PC Genişliği */
    max-width: 100vw; /* Mobilde taşmasın */
    height: 100vh; /* Tam ekran boyu */
    background: white; 
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    z-index: 10000; 
    transform: translateX(100%); 
    transition: transform 0.4s ease;
    display: flex; 
    flex-direction: column; /* Alt alta dizilim */
}
.sepet.acik { transform: translateX(0); }

/* Sepet içindeki ana taşıyıcı */
.sepet .modal-icerik { 
    width: 100%; 
    height: 100%; 
    padding: 0 !important; /* O 50px'lik boşluğu sildik */
    box-shadow: none; 
    border-radius: 0; 
    position: relative; 
    display: flex; 
    flex-direction: column; /* Header - İçerik - Footer */
    background: transparent; 
}

/* 1. ÜST KISIM (Header) */
.sepet-header { 
    flex-shrink: 0; /* Asla küçülmesin */
    display: flex; 
    justify-content: space-between; /* Başlık sola, Çarpı sağa */
    align-items: center; 
    padding: 15px 20px; 
    border-bottom: 1px solid #eee; 
    background-color: #fff;
    min-height: 60px; /* Yeterli yükseklik */
}
.sepet-header h3 { margin: 0; color: #A31D61; font-size: 1.3rem; }

/* Çarpı İkonunu Geri Getiren Kod */
.sepet-header .kapat { 
    position: static !important; /* Absolute iptal, normal akışa girsin */
    font-size: 2.5rem !important; 
    color: #333 !important; 
    cursor: pointer; 
    line-height: 1;
    display: block;
    margin: 0;
}
.sepet-header .kapat:hover { color: #A31D61 !important; }

/* 2. ORTA KISIM (Ürünler) */
#sepet-icerik { 
    flex-grow: 1; /* Kalan TÜM boşluğu kapla (Footer'ı aşağı iter) */
    overflow-y: auto; /* Sadece burası kaydırılsın */
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
}

/* Ürün Kartı Düzeni */
.sepet-urun { 
    display: flex; 
    align-items: flex-start; 
    gap: 15px; 
    padding-bottom: 20px; 
    margin-bottom: 20px; 
    border-bottom: 1px solid #eee; 
}
.sepet-urun img { 
    width: 90px; 
    height: 90px; 
    object-fit: cover; 
    border-radius: 8px; 
    flex-shrink: 0; 
    border: 1px solid #f0f0f0;
}
.sepet-urun-sag-bolum { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    flex-grow: 1; 
    min-width: 0; 
}
.sepet-urun-bilgi h4 { margin: 0 0 5px 0; font-size: 1rem; font-weight: bold; color: #333; line-height: 1.3; }
.sepet-opsiyonlar small { display: block; font-size: 0.85em; color: #666; margin-bottom: 2px; }
.sepet-urun-alt { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.sepet-urun-fiyat-paragraf { font-size: 1.1em; font-weight: bold; color: #A31D61; margin: 0; }
.sepet-urun-sil { background-color: #f8f8f8; color: #A31D61; border: 1px solid #eee; border-radius: 5px; padding: 6px 12px; font-size: 0.9em; cursor: pointer; transition: 0.2s; }
.sepet-urun-sil:hover { background-color: #A31D61; color: white; border-color: #A31D61; }

/* 3. ALT KISIM (Footer) */
.sepet-alt { 
    flex-shrink: 0; /* Asla ezilmesin */
    background-color: #fff; 
    padding: 20px 20px 45px 20px; 
    border-top: 1px solid #ddd; 
    z-index: 20;
}
.sepet-toplam { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 1.2rem; font-weight: bold; color: #333; }
.sepet-onay-buton { width: 100%; padding: 15px; background-color: #A31D61; color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: 0.3s; }
.sepet-onay-buton:hover { background-color: #8a1751; }

/* MOBİL İÇİN ÖZEL AYAR (Genişlik Tam Ekran) */
@media (max-width: 600px) {
    .sepet { width: 100%; }
} 

/* ========================================================================
   8. BANNER, VİTRİN, FONT KARTLARI VE DİĞERLERİ
   ======================================================================== */
.banner-baslik { font-size: 3.5rem; margin-bottom: 10px; background-color: transparent; padding: 0; display: inline-block; border-radius: 8px; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9); font-style: italic; font-family: 'Georgia', serif; }
.banner-alt { width: 100%; text-align: right; padding-bottom: 50px; padding-right: 50px; background-color: transparent; }
.banner h2, .banner p { color: white; }
.banner-slogan { font-size: 1.5rem; font-style: italic; margin-top: 0; margin-bottom: 20px; background-color: rgba(255, 255, 255, 0.2); padding: 5px 15px; display: inline-block; border-radius: 6px; }

/* İndirim Bandı */
.indirim-bandi { background-color: #FFC90E; color: #333; font-size: 1.2rem; font-weight: bold; padding: 10px 0; overflow: hidden; white-space: nowrap; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.indirim-kayan-yazi { display: inline-block; padding-left: 100%; animation: kaydirma 20s linear infinite; }
.indirim-kayan-yazi span { margin-right: 50px; }
@keyframes kaydirma { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

/* Banner Slider */

.kaydirma-icerik { display: flex; width: 200%; height: 100%; transition: transform 0.5s ease-in-out; }
.slayt { width: 50%; height: 100%; flex-shrink: 0; background-size: cover; background-position: center; position: relative; }
.kucuk-slayt-1 { background-image: url('images/tasarim/bannergorsel.png'); }
.kucuk-slayt-2 { background-image: url('images/tasarim/banner2.png'); }
.ana-slayt-1 { background-image: url('images/tasarim/bannergorsel.png'); }

.kaydirici-yazi { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; width: 90%; max-width: 800px; z-index: 10; }
.kaydirici-baslik { font-size: 3.5rem; margin: 0 0 10px 0; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; text-shadow: 2px 2px 8px rgba(0, 0, 0, 1); background-color: transparent; }
.kaydirici-slogan { font-size: 1.5rem; margin-top: 0; margin-bottom: 30px; text-shadow: 1px 1px 4px rgba(0, 0, 0, 1); background-color: transparent; }
.kaydirici-buton { background-color: #5d8a9e; color: white; border: none; padding: 15px 30px; border-radius: 5px; cursor: pointer; font-size: 1.1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease; text-transform: uppercase; font-weight: bold; }
.kaydirici-buton:hover { background-color: #4b7486; }

/* Kategori Vitrini */
.kategori-vitrin { display: grid; grid-template-columns: repeat(2, 250px); justify-content: center; gap: 40px; padding: 60px 40px; background-color: #ffffff; max-width: 850px; margin: 0 auto; }
.vitrin-kart { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); position: relative; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.vitrin-kart:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); }
.vitrin-kart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrin-kart-baslik { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding: 15px 10px; font-size: 1.2rem; font-weight: bold; box-sizing: border-box; transition: background-color 0.3s ease; }
.vitrin-kart:hover .vitrin-kart-baslik { background-color: rgba(0, 0, 0, 0.7); }

/* Font Seçenekleri */
.font-secenekleri { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.font-kart { width: calc((100% - 20px) / 3); height: 50px; border: 3px solid transparent; border-radius: 8px; cursor: pointer; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.font-kart.secili { border-color: #5d8a9e; box-shadow: 0 0 5px rgba(93, 138, 158, 0.5); }
.font-kart img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Renk Seçenekleri */
.renk-secenekleri { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; margin-bottom: 15px; align-items: center; }
.renk-swatch { width: 45px; height: 45px; border-radius: 50%; border: 2px solid #ddd; cursor: pointer; overflow: hidden; transition: all 0.2s ease; background-color: #fff; flex-shrink: 0; position: relative; }
.renk-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.renk-swatch:hover { transform: scale(1.1); border-color: #acc4cb; }
.renk-swatch.secili { border-color: #5d8a9e; transform: scale(1.15); box-shadow: 0 0 8px rgba(93, 138, 158, 0.6); }
.secilen-renk-gosterge { font-weight: bold; color: #A31D61; display: block; margin-top: 5px; font-size: 0.9em; }

/* Footer */
.site-footer { background-color: #333; color: #ccc; padding: 60px 0 20px 0; margin-top: 50px; font-size: 0.95rem; }
.footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 20px; gap: 30px; }
.footer-col { flex: 1; min-width: 250px; margin-bottom: 20px; }
.footer-col h3 { color: #fff; font-size: 1.2rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; }
.footer-col h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background-color: #5d8a9e; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: #ccc; text-decoration: none; transition: color 0.3s, padding-left 0.3s; }
.footer-col ul li a:hover { color: #FFC90E; padding-left: 5px; }
.footer-logo { max-width: 150px; margin-bottom: 15px; }
.footer-aciklama { line-height: 1.6; margin-bottom: 20px; }
.social-links { display: flex; gap: 15px; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #444; color: #fff; border-radius: 50%; text-decoration: none; transition: all 0.3s ease; }
.social-links a:hover { background-color: #5d8a9e; transform: translateY(-3px); }
.iletisim-bilgileri li { display: flex; align-items: center; gap: 10px; }
.iletisim-bilgileri i { color: #5d8a9e; }
.odeme-yontemleri img { max-width: 200px; margin-top: 15px; opacity: 0.8; }
.footer-bottom { text-align: center; border-top: 1px solid #444; margin-top: 40px; padding-top: 20px; font-size: 0.9rem; }
.footer-bottom b { color: #fff; }

/* Özellikler ve Yorumlar */
.ozellikler-bandi { display: flex; justify-content: space-around; flex-wrap: wrap; background-color: #f9f9f9; padding: 50px 20px; margin-top: 50px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.ozellik-kutu { text-align: center; max-width: 250px; margin: 15px; }
.ozellik-kutu i { font-size: 3rem; color: #5d8a9e; margin-bottom: 15px; }
.ozellik-kutu h3 { color: #333; font-size: 1.2rem; margin-bottom: 10px; }
.ozellik-kutu p { color: #666; font-size: 0.95rem; line-height: 1.5; }
.musteri-yorumlari { padding: 60px 20px; background-color: #fff; text-align: center; }
.bolum-basligi { font-size: 2.5rem; color: #A31D61; margin-bottom: 40px; font-family: 'Georgia', serif; }
.yorumlar-container { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.yorum-kart { background: #fff; border: 1px solid #eee; border-radius: 15px; overflow: hidden; width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease; }
.yorum-kart:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.yorum-kart img { width: 100%; height: 200px; object-fit: cover; }
.yorum-icerik { padding: 20px; text-align: left; }
.yildizlar { color: #FFC90E; font-size: 1.2rem; margin-bottom: 10px; letter-spacing: 2px; }
.yorum-icerik p { font-style: italic; color: #555; line-height: 1.6; margin-bottom: 15px; font-size: 0.95rem; }
.yorum-icerik span { display: block; font-weight: bold; color: #333; font-size: 0.9rem; text-align: right; }

/* Diğer */
#yukariCikBtn { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; border: none; outline: none; background-color: #5d8a9e; color: white; cursor: pointer; padding: 15px; border-radius: 50%; font-size: 18px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: background-color 0.3s, transform 0.3s; }
#yukariCikBtn:hover { background-color: #A31D61; transform: translateY(-3px); }
.cerez-kutusu { position: fixed; bottom: -100px; left: 0; width: 100%; background-color: #333; color: white; padding: 15px 20px; display: flex; justify-content: center; align-items: center; gap: 20px; z-index: 10002; box-shadow: 0 -2px 10px rgba(0,0,0,0.2); transition: bottom 0.5s ease-in-out; font-size: 0.9em; }
.cerez-kutusu.goster { bottom: 0; }
.cerez-kutusu a { color: #FFC90E; text-decoration: underline; }
#cerezKabulBtn { background-color: #5d8a9e; color: white; border: none; padding: 8px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; white-space: nowrap; }
#cerezKabulBtn:hover { background-color: white; color: #333; }
.cerez-kutusu-gizle { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.swiper-button-next, .swiper-button-prev { display: none !important; }
.aciklama-gorsel-kapsayici { margin-top: 15px; margin-bottom: 10px; overflow: hidden; background-color: #f8f9fa; padding: 10px; border-radius: 5px; border: 1px solid #eee; }
.aciklama-gorsel { width: 100px; height: auto; float: left; margin-right: 15px; margin-bottom: 5px; border-radius: 4px; border: 1px solid #ddd; }
.aciklama-gorsel:hover { transform: scale(1.05); }
.aciklama-gorsel-kapsayici::before { content: "\f00e"; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 25px; left: 25px; font-size: 30px; color: rgba(0, 0, 0, 0.4); background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; padding: 5px; line-height: 1; opacity: 0; transition: opacity 0.2s ease; z-index: 10; pointer-events: none; }
.aciklama-gorsel-kapsayici:hover::before { opacity: 1; }
.aciklama-gorsel-kapsayici p { margin: 0; font-size: 0.9em; color: #555; line-height: 1.5; }
.arama-icerik { max-width: 600px; padding: 30px; }
.arama-kutusu { display: flex; gap: 10px; }
#aramaInput { flex-grow: 1; padding: 10px; border: 2px solid #ccc; border-radius: 5px; font-size: 1.1em; }
.arama-buton { background-color: #5d8a9e; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 1.1em; transition: background-color 0.3s; }
.arama-buton:hover { background-color: #4b7486; }
.profil-modal-icerik { max-width: 400px; }
.profil-modal-icerik h3 { text-align: center; color: #A31D61; margin-bottom: 25px; }
.profil-form .form-grup { display: flex; flex-direction: column; margin-bottom: 20px; }
.profil-form label { font-weight: bold; color: #555; margin-bottom: 8px; text-align: left; }
.profil-form input[type="email"], .profil-form input[type="password"], .profil-form input[type="text"] { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; }
.profil-buton { width: 100%; background-color: #5d8a9e; color: white; border: none; padding: 12px; font-size: 1.1em; font-weight: bold; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; margin-top: 10px; }
.profil-buton:hover { background-color: #4b7486; }
.modal-degistir { text-align: center; margin-top: 25px; font-size: 0.9em; }
.modal-degistir a { color: #5d8a9e; font-weight: bold; text-decoration: none; }
.modal-degistir a:hover { text-decoration: underline; }
.modal-giris-linki { text-align: center; padding: 15px; border-top: 1px dashed #eee; margin-top: 20px; font-size: 0.95em; }
.modal-giris-linki a { color: #5d8a9e; font-weight: bold; cursor: pointer; }
#uyumluUrunBolumu { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; }
.uyumlu-urun-baslik { font-size: 1.3em; color: #333; margin-bottom: 15px; }
.uyumlu-urun-kart { display: flex; align-items: center; gap: 15px; background-color: #f9f9f9; padding: 10px; border-radius: 8px; }
.uyumlu-urun-kart img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.uyumlu-urun-bilgi p { margin: 5px 0 0 0; font-size: 0.9em; color: #777; }
.uyumlu-urun-fiyat { font-weight: bold; color: #A31D61; margin-left: auto; }
#uyumluUrunCheckbox { width: 20px; height: 20px; margin-left: 15px; }
.tum-urunler-link { display: block; text-align: right; margin-top: 15px; color: #5d8a9e; font-weight: bold; }
#uyumluUrunFoto { cursor: pointer; transition: transform 0.2s ease; }
#uyumluUrunFoto:hover { transform: scale(1.1); }
.gorsel-modal-icerik { padding: 0; background-color: transparent; box-shadow: none; max-width: 500px; width: 90%; }
#uyumluUrunModalFoto { width: 100%; height: auto; border-radius: 10px; display: block; }
#uyumluGorselKapat { color: white !important; font-size: 40px !important; text-shadow: 0 0 8px rgba(0, 0, 0, 0.8); top: 5px !important; right: 15px !important; z-index: 10001; }
.uyumlu-urun-opsiyonlar { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; padding: 0 15px; background-color: #f8f9fa; border-radius: 8px; margin-top: 10px; }
.uyumlu-urun-opsiyonlar.acik { max-height: 500px; padding: 20px 15px; border: 1px solid #eee; }
.uyumlu-urun-opsiyonlar .form-grup { margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px dashed #e0e0e0; }
.uyumlu-urun-opsiyonlar .form-grup:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.uyumlu-urun-opsiyonlar label { font-size: 1.1em; font-weight: 600; color: #4a4a4a; margin-bottom: 8px; display: block; line-height: 1.4; }
.uyumlu-urun-opsiyonlar input[type="text"], .uyumlu-urun-opsiyonlar input[type="tel"], .uyumlu-urun-opsiyonlar select, .uyumlu-urun-opsiyonlar textarea { width: 100%; padding: 12px 15px; border: 1px solid #dcdcdc; border-radius: 8px; font-size: 1em; color: #333; background-color: #ffffff; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.uyumlu-urun-opsiyonlar input[type="text"]:focus, .uyumlu-urun-opsiyonlar input[type="tel"]:focus, .uyumlu-urun-opsiyonlar select:focus, .uyumlu-urun-opsiyonlar textarea:focus { border-color: #5d8a9e; box-shadow: 0 0 0 3px rgba(93, 138, 158, 0.2); outline: none; }
.uyumlu-urun-opsiyonlar input::placeholder, .uyumlu-urun-opsiyonlar textarea::placeholder { color: #b0b0b0; font-style: italic; }
.uyumlu-urun-opsiyonlar input[type="checkbox"], .uyumlu-urun-opsiyonlar input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 4px; cursor: pointer; margin-right: 8px; vertical-align: middle; position: relative; top: -1px; transition: all 0.2s ease; display: inline-block; }
.uyumlu-urun-opsiyonlar input[type="checkbox"]:checked, .uyumlu-urun-opsiyonlar input[type="radio"]:checked { background-color: #5d8a9e; border-color: #5d8a9e; }
.uyumlu-urun-opsiyonlar input[type="checkbox"]:checked::after { content: '✔'; color: white; font-size: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 1; }
.uyumlu-urun-opsiyonlar input[type="radio"] { border-radius: 50%; }
.uyumlu-urun-opsiyonlar input[type="radio"]:checked::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; }
.select-wrapper { position: relative; }
.select-wrapper::after { content: '▼'; font-size: 0.8em; color: #999; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.uyumlu-urun-opsiyonlar select { padding-right: 35px; }
#uyumlu-detayNumaraAlani { margin-top: 10px; display: none; }
#uyumlu-detayNumaraAlani label { font-size: 1em; font-weight: 500; color: #666; }
#uyumlu-detayNumaraAlani input[type="text"] { padding: 10px 12px; font-size: 0.95em; border-color: #c9c9c9; }
#charmOpsiyonlari { margin-top: 5px; }
#sepeteEkleButonu { width: 100%; background-color: #5d8a9e; color: white; border: none; padding: 15px; font-size: 1.2em; font-weight: bold; border-radius: 5px; cursor: pointer; margin-top: 25px; transition: background-color 0.3s ease; }
#sepeteEkleButonu:hover { background-color: #4b7486; }
.bilgi-ikonu { margin-left: 8px; color: #5d8a9e; cursor: pointer; transition: transform 0.2s ease; }
.bilgi-ikonu:hover { transform: scale(1.2); }
.bilgi-modal-icerik { max-width: 350px; text-align: center; padding: 30px 25px 20px 25px; }
#bilgiModalMesaj { font-size: 1.1em; line-height: 1.6; margin-bottom: 25px; }
.bilgi-modal-buton { background-color: #5d8a9e; color: white; border: none; padding: 10px 30px; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: bold; transition: background-color 0.3s; }
.bilgi-modal-buton:hover { background-color: #4b7486; }
#petIsimInput { text-align: center; font-size: 2.2em; font-weight: bold; color: #A31D61; transition: font-family 0.3s ease; outline: none; padding: 10px; height: auto; }
#petIsimInput::placeholder { font-size: 0.6em; font-weight: normal; color: #ccc; font-family: sans-serif; }
.font-bilgi-yazisi { font-size: 0.9em; color: #555; font-style: italic; background-color: #f8f9fa; border: 1px solid #eee; padding: 10px; border-radius: 5px; text-align: center; margin-top: 5px; margin-bottom: 15px; position: relative; display: flex; align-items: center; justify-content: center; }
.bilgi-ikon-sol::before { content: '!'; font-size: 1.5em; font-weight: bold; color: #A31D61; margin-right: 5px; display: inline-block; transform: translateY(-2px); }
.bilgi-ikon-sag::before { content: '♥'; font-size: 1em; color: #A31D61; margin-left: 5px; display: inline-block; }
.hikaye-icerik { max-width: 700px; text-align: left; max-height: 80vh; overflow-y: auto; }
.hikaye-icerik h2 { text-align: center; color: #A31D61; font-size: 1.8em; margin-bottom: 20px; border-bottom: 2px solid #f4f4f4; padding-bottom: 10px; }
.hikaye-metni p { font-size: 1em; line-height: 1.6; margin-bottom: 15px; text-align: justify; }
.yan-menu-dropdown { border-bottom: 1px solid #555; width: 100%; position: relative; }
.yan-menu-dropdown .yan-menu-btn { width: 100%; color: white; text-align: left; padding: 15px 0; background: none; border: none; font-size: 1.2em; cursor: pointer; }
.yan-menu-dropdown .yan-menu-btn:hover { color: #FFC90E; }
.yan-menu-dropdown .dropdown-content { position: static; box-shadow: none; background-color: #444; min-width: unset; border-radius: 0; }
.yan-menu-dropdown .dropdown-content a { padding: 10px 20px; font-size: 1em; border-bottom: 1px solid #666; color: white; }
.yan-menu-dropdown .dropdown-content a:hover { background-color: #555; color: #FFC90E; }
.hikaye-kapat-buton { position: fixed; top: 20px; right: 30px; font-size: 3rem; color: #333; background: none; border: none; cursor: pointer; padding: 0; line-height: 1; z-index: 1001; transition: color 0.2s; }
.hikaye-kapat-buton:hover { color: #A31D61; }
.charm-fiyat { font-size: 0.9em; font-weight: bold; color: #A31D61; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* ========================================================================
   MOBİL İÇİN TEK PARÇA DÜZELTME PAKETİ
   (Yeşil, Kırmızı, Mor Sorunlar + Tıklama İyileştirmesi)
   ======================================================================== */

@media (max-width: 768px) {

    /* --- 1. HEADER VE MENÜ DÜZELTMELERİ --- */
    header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        padding: 8px 15px;
        box-sizing: border-box;
        width: 100%;
    }
    .header-sol { grid-column: 1 / 2; justify-self: start; }
    .header-orta { grid-column: 2 / 3; text-align: center; min-width: 0; }
    .header-sag { grid-column: 3 / 4; justify-self: end; display: flex; align-items: center; gap: 8px; }
    .logo { height: 40px; max-width: 120px; width: auto; display: inline-block; vertical-align: middle; }
    .menu-ac-kapat { font-size: 26px; position: static; transform: none; }
    .header-sag button { padding: 5px; font-size: 1.1em; margin-left: 0; }
    .header-sag .sepet-sayaci { top: -5px; right: -5px; font-size: 0.7em; padding: 2px 4px; }

    main { padding-top: 56px !important; }
    .yan-menu { top: 56px; height: calc(100% - 56px); }

   

    .slayt {
        background-size: cover !important; 
        background-position: center center !important;
    }

    /* --- 3. BANNER YAZILARI VE BUTON (Kırmızı Sorun) --- */
    .kaydirici-yazi {
        width: 95% !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        padding: 5px !important;
    }
    .kaydirici-baslik {
        font-size: 1.5rem !important; /* Başlığı küçült */
        margin-bottom: 5px !important;
        line-height: 1.1 !important;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    }
    .kaydirici-slogan {
        font-size: 0.9rem !important;
        margin-bottom: 8px !important;
    }
    .kaydirici-buton {
        padding: 8px 20px !important;
        font-size: 0.9rem !important;
        margin-top: 5px !important;
    }
    
    .indirim-bandi {
        width: 100% !important;
        border-radius: 0 !important;
        font-size: 1rem;
        padding: 8px 0;
    }

    /* --- 4. KATEGORİ VİTRİNİ DÜZENİ --- */
    .kategori-vitrin {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 30px 20px;
        max-width: 500px;
        margin: 0 auto;
    }
    .vitrin-kart { width: 100%; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
    .vitrin-kart img { width: 75%; height: auto; object-fit: contain; margin-bottom: 8px; }
    .vitrin-kart-baslik { font-size: 1em; padding: 8px 5px; line-height: 1.3; }

    /* --- 5. ÜRÜN GALERİSİ & TIKLAMA ÇÖZÜMÜ --- */
    .urun-galeri { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px 15px; gap: 20px 10px; box-sizing: border-box; }
    
    .urun-kart { 
        width: calc(50% - 5px); margin: 0; display: flex; flex-direction: column; justify-content: space-between; 
        position: relative !important;
        z-index: 50 !important;
        cursor: pointer !important;
        touch-action: manipulation; 
        -webkit-tap-highlight-color: transparent;
    }
    .urun-kart img, .urun-kart h3, .urun-kart p { pointer-events: none; }
    .urun-kart img { height: 160px; width: 100%; }
    .urun-kart h3 { font-size: 1em; margin: 10px 10px 5px 10px; min-height: 2.4em; overflow: hidden; }
    .urun-kart p { font-size: 1em; margin: 5px 10px 15px 10px; min-height: auto; }
    
    /* Yeni İncele Butonu */
    .kart-incele-buton {
        background-color: #5d8a9e; color: white; border: none;
        padding: 8px 10px; margin: 0 10px 10px 10px; border-radius: 5px;
        font-size: 0.9em; font-weight: bold; cursor: pointer;
        pointer-events: auto !important; display: block; margin-top: auto;
    }

    /* --- 6. ÜRÜN DETAY SAYFASI MOBİL --- */
    .detay-icerik { flex-direction: column; gap: 20px; }
    .detay-sol { flex-basis: auto; width: 100%; max-width: none; text-align: center; }
    .detay-sol img#detayFoto { max-width: 80vw; margin-left: auto; margin-right: auto; }
    .detay-fotolar img { width: 80px; height: 80px; }
    .detay-sag { width: 100%; min-width: 0; }
    .detay-formu .form-grup { overflow: hidden; }
    .detay-formu select { width: 100%; font-size: 0.85em; padding: 10px; display: block; }
    
    .font-kart { width: calc((100% - 10px) / 2); height: 35px; overflow: hidden; border-width: 2px; }
    .font-kart img { width: 100%; height: 100%; object-fit: cover; }
    /* Sorunlu Font Kartları */
    .font-kart[data-font-ad="BELLA"], .font-kart[data-font-ad="LIMA"], .font-kart[data-font-ad="TOFFEE"] { height: 50px; }
    .font-kart[data-font-ad="BELLA"] img, .font-kart[data-font-ad="LIMA"] img, .font-kart[data-font-ad="TOFFEE"] img { object-fit: contain; }

    /* --- 7. SEPET MOBİL --- */
    .sepet-urun { gap: 10px; padding: 15px 0; }
    .sepet-urun img { width: 80px; height: 80px; }
    .sepet-urun-bilgi h4 { font-size: 1em; white-space: normal !important; }
    .sepet-opsiyonlar small { font-size: 0.8em; }
    .sepet-urun-fiyat-paragraf { font-size: 1.1em; }
    .sepet-urun-sil { padding: 4px 8px; font-size: 0.8em; }
    .sepet-urun-alt { margin-top: 8px; }
    
    /* --- 8. FOOTER MOBİL --- */
    .footer-container { flex-direction: column; gap: 40px; }
    .footer-col { text-align: center; }
    .footer-col h3::after { left: 50%; transform: translateX(-50%); }
    .social-links, .iletisim-bilgileri li { justify-content: center; }
    .ozellikler-bandi { flex-direction: column; align-items: center; }
    .yorumlar-container { flex-direction: column; align-items: center; }
    .yorum-kart { width: 90%; }
    
    #yukariCikBtn { bottom: 80px; right: 15px; padding: 12px; font-size: 16px; }
    .cerez-kutusu { flex-direction: column; text-align: center; gap: 10px; }
}

@media (max-width: 480px) {
    .logo { height: 45px; }
    main { padding-top: 61px !important; }
    .yan-menu { top: 61px; height: calc(100% - 61px); }
    .kaydirici-baslik { font-size: 1.2rem !important; }
    .kaydirici-slogan { font-size: 0.8rem !important; }
    .indirim-bandi { font-size: 0.9rem; }
    .font-kart[data-font-ad="BELLA"], .font-kart[data-font-ad="LIMA"], .font-kart[data-font-ad="TOFFEE"] { height: 55px; }
    .sepet { width: 90%; max-width: none; }
    .sepet .modal-icerik { padding: 15px; }
    .sepet-header { padding: 15px; margin-bottom: 10px; }
    #sepet-icerik { padding: 0 15px; }
    .sepet-alt { padding: 15px; }
    .renk-swatch { width: 35px; height: 35px; }
    .renk-secenekleri { gap: 8px; }
    .aciklama-gorsel { float: none; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; }
    .aciklama-gorsel-kapsayici p { text-align: center; }
}
/* --- ACİL DURUM DÜZELTMELERİ (YENİ) --- */

/* 1. Header'ı Her Şeyin Üstüne Çıkar (Detay sayfası altında kalsın) */
header {
    z-index: 100000 !important; /* En yüksek katman */
}

/* 2. Detay Sayfasını Header'ın Altından Başlat */
.urun-detay {
    z-index: 999 !important; /* Header'dan düşük olsun */
    margin-top: 80px !important; /* Header boyu kadar boşluk */
    padding-top: 20px !important;
}

/* 3. Çerez Kutusunu Kesin Yok Etme Sınıfı */
.cerez-kutusu-gizle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* MOBİL İÇİN ÖZEL AYARLAR */
@media (max-width: 768px) {
    
  

    .slayt {
        background-size: cover !important;
        background-position: center !important;
    }

    /* KIRMIZI SORUN: Yazıları ve Butonu Sığdır */
    .kaydirici-yazi {
        width: 95% !important;
        padding: 0 !important;
    }
    
    .kaydirici-baslik {
        font-size: 1.4rem !important; /* Yazıyı küçülttük */
        margin-bottom: 5px !important;
        line-height: 1.1 !important;
    }
    
    .kaydirici-slogan {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
    }
    
    .kaydirici-buton {
        padding: 6px 15px !important;
        font-size: 0.8rem !important;
        margin-top: 2px !important;
    }

    /* İndirim Bandı Tam Otursun */
    .indirim-bandi {
        width: 100% !important;
        border-radius: 0 !important;
    }
}
/* --- MENÜ VE MODAL KATMAN DÜZELTMESİ --- */

/* Yan Menüyü Detay Sayfasının Üzerine Çıkar */
.yan-menu {
    z-index: 20000 !important; /* En, en üstte */
}

/* Menü açma butonunu da öne al */
.menu-ac-kapat {
    z-index: 20001 !important;
}

/* Boyut Rehberi Modalı (Açılınca en üstte dursun) */
#boyutRehberiModal {
    z-index: 30000 !important;
    background-color: rgba(0,0,0,0.8) !important; /* Arka planı biraz daha koyu yapalım */
}

/* Modal içindeki resim taşmasın */
#boyutRehberiGorsel {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}
/* --- BİLDİRİM KUTUSU ACİL DÜZELTME --- */
.bildirim {
    position: fixed;
    top: -100px; /* Başlangıçta gizli */
    left: 50%;
    transform: translateX(-50%);
    background-color: #28a745; /* Yeşil */
    color: white;
    padding: 15px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    
    /* EN ÖNEMLİ KISIM BURASI: */
    z-index: 999999 !important; /* Header'dan (100000) daha büyük olmalı */
    
    opacity: 0;
    transition: top 0.5s ease-out, opacity 0.5s ease-out;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    min-width: 300px; /* Mobilde çok dar olmasın */
}
/* --- PROFESYONEL SEPET KAPATMA BUTONU FIX --- */

/* Header'ı hizala */
.sepet-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 20px !important;
    background-color: #fff !important;
    border-bottom: 1px solid #eee !important;
    min-height: 60px;
}

/* Butonun Kendisi */
#sepetKapat.sepet-kapat-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important; 
    height: 40px !important;
    background-color: #f8f9fa !important; /* Hafif gri arka plan */
    color: #333 !important; /* Koyu yazı rengi */
    border: 1px solid #ddd !important;
    border-radius: 50% !important; /* Tam daire */
    font-size: 28px !important; /* Çarpı boyutu */
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    z-index: 100000 !important;
    padding: 0 !important;
    padding-bottom: 4px !important; /* Çarpıyı görsel olarak ortalamak için ince ayar */
}

/* Hover (Üzerine Gelince) Efekti */
#sepetKapat.sepet-kapat-btn:hover {
    background-color: #A31D61 !important; /* Marka Rengi */
    color: #ffffff !important;
    border-color: #A31D61 !important;
    transform: rotate(90deg); /* Dönüş efekti */
}
/* --- ESKİ SEPET KAPATMA STİLİ (Ekim Versiyonu) --- */
.sepet .modal-icerik .kapat {
    position: absolute !important; /* Kutunun köşesine yapışır */
    top: 15px !important;
    right: 20px !important;
    color: #333 !important;
    font-size: 35px !important; /* Büyük ve net */
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    line-height: 1 !important;
    background: none !important;
    border: none !important;
    display: block !important;
}

.sepet .modal-icerik .kapat:hover {
    color: #A31D61 !important; /* Marka rengi */
}
.cart {
  overflow: visible !important;
}

.cart-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 26px;
  color: black;
  background: white;
  border: none;
  cursor: pointer;
  z-index: 9999;
}
/* =================================================
   FİNAL VE TEMİZ SEPET TASARIMI (MOBİL UYUMLU) ✅
   ================================================= */

/* 1. SEPETİN ANA KUTUSU */
#sepet {
    /* Başlangıçta gizli */
    display: none; 
    
    /* Konumlandırma */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    
    /* Boyutlar */
    width: 400px !important; /* PC Genişliği */
    max-width: 100vw !important; /* Mobilde taşmasın */
    
    /* 🔥 KRİTİK DÜZELTME: 100vh yerine 100dvh */
    /* Bu, mobildeki adres çubuğunu hesaba katarak boyu ayarlar */
    height: 100vh !important; /* Eski tarayıcılar için yedek */
    height: 100dvh !important; /* Yeni nesil tam uyum */
    
    /* Görünüm */
    background-color: #ffffff !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2) !important;
    z-index: 9999999 !important;
    
    /* İçerik düzeni (Flexbox ile alt alta diziyoruz) */
    flex-direction: column !important;
    box-sizing: border-box !important;
    border-left: 1px solid #ddd !important;
}

/* 2. AÇIK DURUM */
#sepet.acik {
    display: flex !important;
}

/* 3. BAŞLIK ALANI (Header - Sabit) */
.sepet-header {
    flex-shrink: 0 !important; /* Asla küçülmesin */
    background-color: #f8f9fa !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    border-bottom: 1px solid #eee !important;
}

.sepet-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    color: #333 !important;
}

/* 4. ÇARPI BUTONU */
#sepetKapat, .kapat-butonu {
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    color: #888888 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
}

#sepetKapat:hover {
    color: #A31D61 !important;
}

/* 5. İÇERİK ALANI (ORTA - KAYDIRILABİLİR) */
#sepet-icerik {
    flex-grow: 1 !important; /* Kalan tüm boşluğu kapla */
    overflow-y: auto !important; /* Ürünler sığmazsa SADECE BURASI kaysın */
    padding: 20px !important;
    min-height: 0 !important; /* Flexbox taşma hatasını önler */
}

/* 6. ALT KISIM (Footer - BUTON BURADA SABİT) */
.sepet-alt {
    flex-shrink: 0 !important; /* Asla ezilmesin */
    padding: 20px !important;
    border-top: 1px solid #eee !important;
    background-color: #fff !important;
    
    /* iPhone'ların alttaki siyah çizgisi (Home Bar) için güvenli boşluk */
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}

/* Onayla Butonu */
.sepet-onay-buton {
    width: 100%;
    padding: 15px;
    background-color: #A31D61;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.sepet-onay-buton:hover {
    background-color: #8a1751;
}

/* 3. BAŞLIK ALANI (Header) */
.sepet-header {
    background-color: #f8f9fa !important; /* Hafif gri */
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* Başlık sola, X sağa */
    padding: 0 20px !important;
    border-bottom: 1px solid #eee !important;
}

.sepet-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    color: #333 !important;
}

/* 4. ÇARPI (KAPATMA) BUTONU - SADE VE KALIN */
#sepetKapat, .kapat-butonu {
    /* Kutu Ayarları */
    width: 40px !important;
    height: 40px !important;
    background: transparent !important; /* Arka plan yok */
    border: none !important;
    
    /* İkon Stili */
    color: #888888 !important; /* Başlangıç rengi: Koyu Gri */
    font-size: 32px !important; /* Boyut */
    font-weight: 700 !important; /* KALIN (Bold) olsun */
    line-height: 40px !important;
    
    /* Hizalama */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    cursor: pointer !important;
    transition: color 0.3s ease !important; /* Sadece renk geçişi */
}

/* Üzerine Gelince (HOVER) */
#sepetKapat:hover {
    /* SADECE RENK DEĞİŞSİN - ARKA PLAN YOK */
    color: #A31D61 !important; /* Senin marka rengin (Fuşya) */
    background: transparent !important; 
    border: none !important;
}

/* 5. İÇERİK VE ALT KISIM */
#sepet-icerik {
    flex-grow: 1 !important; /* Boşluğu doldur */
    overflow-y: auto !important; /* Ürün çoksa kaydır */
    padding: 20px !important;
}

.sepet-alt {
    padding: 20px !important;
    border-top: 1px solid #eee !important;
    background-color: #fff !important;
}
/* =========================================
   GARANTİ ÇALIŞAN ÇEREZ KUTUSU CSS
   ========================================= */
.cerez-kutusu-yeni {
    position: fixed !important;
    left: 0 !important;
    bottom: -150px !important; /* Başlangıçta ekranın altında saklı */
    width: 100% !important;
    background-color: #333 !important;
    color: white !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 99999999 !important; /* HER ŞEYİN ÜSTÜNDE OLSUN */
    transition: bottom 0.5s ease-in-out !important;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3) !important;
}

/* JS bu sınıfı ekleyince kutu yukarı kayacak */
.cerez-kutusu-yeni.aktif {
    bottom: 0 !important; 
}

.cerez-kutusu-yeni p {
    margin: 0 !important;
    font-size: 0.95rem !important;
}

.cerez-buton {
    background-color: #5d8a9e !important;
    color: white !important;
    border: none !important;
    padding: 10px 25px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    transition: background 0.3s !important;
}

.cerez-buton:hover {
    background-color: #fff !important;
    color: #333 !important;
}

/* Mobilde alt alta dursun */
@media (max-width: 768px) {
    .cerez-kutusu-yeni {
        flex-direction: column !important;
        text-align: center !important;
        padding-bottom: 30px !important; /* iPhone alt çizgisi için */
    }
}

/* =========================================
   RENK SEÇENEKLERİ BÜYÜME EFEKTİ (SİHİR! ✨)
   ========================================= */

/* Renk kutularının temel ayarı (z-index için relative şart) */
.renk-swatch {
    position: relative !important;
    z-index: 1 !important; /* Normalde altta dursunlar */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Yaylanan, havalı bir geçiş efekti */
}

/* Üzerine gelince (HOVER) ne olacak? */
.renk-swatch:hover {
    /* 1. BÜYÜTME: Normal boyutunun 2.5 katına çıkar (Örnekteki gibi kocaman olur) */
    transform: scale(2.5) !important; 
    
    /* 2. ÜSTE ÇIKARMA: Diğer renklerin ve yazıların üzerinde görünsün */
    z-index: 100 !important; 

    /* 3. GÖLGE: Havada duruyormuş gibi bir derinlik kat */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;

    /* 4. KENARLIK: Büyüdüğünde etrafında ince beyaz bir çerçeve olsun ki daha net dursun */
    border: 2px solid #ffffff !important; 
}

/* Seçili olan renk normal dursun (Büyümesin) */
.renk-swatch.secili:hover {
    transform: scale(1.15) !important; /* Seçiliyken sadece hafif büyüsün, abartmasın */
    z-index: 2 !important;
    box-shadow: 0 0 8px rgba(93, 138, 158, 0.6) !important;
    border: 2px solid #5d8a9e !important;
}
/* =========================================
   SEÇİLEN RENK İSMİ - ŞIK STİL
   ========================================= */

.secilen-renk-gosterge {
    /* Yazı Tipi ve Rengi */
    font-family: 'Georgia', serif !important; /* Başlık fontunla uyumlu */
    color: #5d8a9e !important; /* Markanın mavi tonu */
    font-size: 1rem !important;
    font-weight: bold !important;
    
    /* Kutu Görünümü */
    background-color: #f0f8ff !important; /* Çok açık mavi tatlı bir arka plan */
    padding: 8px 20px !important; /* İç boşluk */
    border-radius: 25px !important; /* Oval, hap şeklinde kenarlar */
    border: 1px dashed #acc4cb !important; /* Dikiş izi gibi şık bir kenarlık */
    
    /* Hizalama ve Efekt */
    display: inline-block !important; /* Yazı kadar yer kaplasın */
    margin-top: 15px !important;
    box-shadow: 0 3px 10px rgba(93, 138, 158, 0.1) !important; /* Hafif gölge */
    transition: all 0.3s ease !important;
}

/* Seçim değiştiğinde minik bir hareket ekleyelim (Opsiyonel ama hoş durur) */
.secilen-renk-gosterge:hover {
    transform: translateY(-2px);
    background-color: #fff !important;
    border-color: #A31D61 !important; /* Üzerine gelince pembeye dönsün */
    color: #A31D61 !important;
}
/* =========================================
   RENK İSMİ TOOLTIP (ORTADA, ŞIK VE ÇERÇEVESİZ) ✨
   ========================================= */

/* Etiketin Kendisi (Yazı) */
.renk-swatch::after {
    content: attr(data-renk-ad); /* İsim otomatik buradan alınır */
    position: absolute;
    top: 50%; /* Dikey ortala */
    left: 50%; /* Yatay ortala */
    transform: translate(-50%, -50%); /* Tam merkeze yerleştir */
    
    /* Tasarım */
    color: #333; /* Yazı rengi koyu gri olsun */
    font-size: 10px; /* DİKKAT: Resim 2.5 kat büyüdüğünde bu yazı kocaman olacak (yaklaşık 25px) */
    font-family: 'Georgia', 'Times New Roman', serif; /* Sitenin başlık fontuna uygun, şık bir serif font */
    font-weight: 900; /* Çok kalın olsun */
    font-style: italic; /* Hafif yana yatık (daha estetik) */
    white-space: nowrap; /* Yazı tek satırda kalsın, aşağı kaymasın */

    /* OKUNABİLİRLİK SİHRİ: Beyaz Kontur (Gölge) */
    /* Bu sayede koyu renklerin üzerinde bile yazı net okunur */
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,
         0px 0px 3px rgba(255,255,255,0.8); /* Ekstra parlaklık */
    
    /* Diğer ayarlar */
    opacity: 0; /* Başlangıçta gizli */
    transition: opacity 0.3s ease; /* Yumuşak geçiş */
    pointer-events: none; /* Tıklamayı engellemesin */
    z-index: 101; /* Büyüyen dairenin (z-index: 100) de üzerinde kalsın */
}

/* Hover olunca etiketi göster */
.renk-swatch:hover::after {
    opacity: 1;
}
/* =========================================
   RENK İSMİ - FİNAL ZARİF TASARIM (ÇERÇEVESİZ) 💎
   ========================================= */

/* 1. Kutu Sınırlarını Kaldır (Yazı taşabilsin) */
.renk-swatch {
    overflow: visible !important;
}

/* 2. Resmi Yuvarla */
.renk-swatch img {
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* 3. Yazı Stili (Zarif ve Ortada) */
.renk-swatch::after {
    content: attr(data-renk-ad); /* İsim otomatik gelir */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Tam merkeze yerleştir */
    
    /* Boyut ve Yerleşim */
    width: max-content;
    max-width: 250%; /* Yazı çok uzunsa yanlara taşabilsin */
    
    /* YENİ FONT VE STİL */
    color: #ffffff; /* Yazı BEYAZ olsun */
    font-size: 8px; /* Resim büyüyünce bu yazı ~20px gibi görünecek */
    font-family: 'Georgia', 'Times New Roman', serif; /* Tırnaklı, şık font */
    font-style: italic; /* Hafif yana yatık (El yazısı havası) */
    font-weight: normal; /* İnce ve zarif */
    letter-spacing: 0.5px; /* Harfleri çok az açtık */
    text-align: center;
    white-space: nowrap;

    /* ÇERÇEVE YOK, SADECE HAFİF GÖLGE VAR */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); 

    /* Görünürlük Ayarları */
    opacity: 0;
    transition: opacity 0.3s ease; 
    pointer-events: none;
    z-index: 1000;
}

/* Hover olunca göster */
.renk-swatch:hover::after {
    opacity: 1;
}
/* =========================================
   RENK İSMİ - OKUNAKLI & KARARTILI (FİNAL V2) 🌑
   ========================================= */

/* 1. Kutu Sınırlarını Kaldır */
.renk-swatch {
    overflow: visible !important;
}

/* 2. Resmi Yuvarla */
.renk-swatch img {
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* 3. Yazı Stili (Arkası Karartılı) */
.renk-swatch::after {
    content: attr(data-renk-ad);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Tam ortala */
    
    /* Boyut ve Yerleşim */
    width: max-content;
    max-width: 250%; 
    
    /* YAZI STİLİ */
    color: #ffffff; /* Bembeyaz yazı */
    font-size: 9px; /* Biraz daha belirgin olsun */
    font-family: 'Georgia', 'Times New Roman', serif; /* Şık font */
    font-style: italic; 
    font-weight: 600; /* Biraz dolgun olsun ki karartı üstünde parlasın */
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;

    /* SİHRİN OLDUĞU YER: KARARTI GÖLGESİ (SMOKY SHADOW) */
    /* Çizgi yok, sadece arkasında yoğun bir siyah duman var */
    text-shadow: 
        0px 2px 3px #000000,    /* Yakın gölge (Keskinlik için) */
        0px 0px 8px #000000,    /* Orta mesafe karartı */
        0px 0px 15px rgba(0,0,0,0.9); /* Geniş alana yayılan puslu siyahlık */

    /* Görünürlük Ayarları */
    opacity: 0;
    transition: opacity 0.3s ease; 
    pointer-events: none;
    z-index: 1000;
}

/* Hover olunca göster */
.renk-swatch:hover::after {
    opacity: 1;
}

/* =========================================
   YENİ EKLENEN ÖZELLİKLERİN TASARIMI ✨
   ========================================= */

/* 1. SİPARİŞ NOTU KUTUSU (Textarea) */
textarea#siparisNotu, 
textarea#uyumlu-siparisNotu {
    width: 100%;
    min-height: 80px; /* Biraz yüksek olsun */
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif; /* Sitenin fontuna uyumlu olsun */
    font-size: 0.9rem;
    color: #333;
    background-color: #fafafa;
    resize: vertical; /* Sadece aşağı doğru uzatılabilsin */
    outline: none;
    transition: all 0.3s ease;
    margin-top: 8px;
}

/* Kutuya tıklayınca kenarı renkli olsun */
textarea#siparisNotu:focus, 
textarea#uyumlu-siparisNotu:focus {
    border-color: #5d8a9e; /* Senin maviden */
    background-color: #fff;
    box-shadow: 0 0 8px rgba(93, 138, 158, 0.2);
}



/* 3. ÇERÇEVE AÇIKLAMA KUTUSU (Gri Kutu) */
/* JS içinde inline style vermiştik ama mobilde düzgün durması için bunu ekleyelim */
#cerceveEkleAlani div {
    font-size: 0.85rem !important;
    color: #555 !important;
    background-color: #f8f9fa !important;
    padding: 10px !important;
    border-radius: 8px !important;
    border: 1px dashed #d1d9e6 !important;
    margin-top: 8px !important;
}
/* SİPARİŞ NOTU KUTUSU TASARIMI */
textarea#siparisNotu {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: inherit; /* Sitenin kendi yazı tipini kullan */
    font-size: 0.9rem;
    color: #333;
    background-color: #fafafa;
    resize: vertical; /* Sadece aşağı doğru uzatılabilir */
    outline: none;
    margin-top: 8px;
    transition: all 0.3s ease;
}

textarea#siparisNotu:focus {
    border-color: #5d8a9e; /* Tıklayınca mavi çerçeve */
    background-color: #fff;
    box-shadow: 0 0 8px rgba(93, 138, 158, 0.2);
}
/* =========================================
   BİLGİ YAZISI - RENKLİ KUTU STİLİ 🌈
   ========================================= */
.font-bilgi-yazisi {
    font-size: 0.85rem;
    color: #856404; /* Koyu sarı/hardal yazı rengi */
    background-color: #fff3cd; /* Açık sarı/krem arka plan */
    border: 1px solid #ffeeba; /* İnce sarı çerçeve */
    
    /* Kutu Ayarları */
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 8px; /* Köşeleri yuvarlat */
    text-align: center;
    line-height: 1.4;
    
    /* İkon ve Yazı Hizalaması */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Hafif gölge */
}

/* Sol ve Sağdaki Süs Çizgileri (Renkli) */
.bilgi-ikon-sol, .bilgi-ikon-sag {
    flex-grow: 1;
    height: 1px;
    background: #ffc107; /* Parlak sarı çizgi */
    opacity: 0.5;
}

/* İstersen ikon da ekleyebiliriz */
.font-bilgi-yazisi::before {
    content: '\f05a'; /* FontAwesome 'i' ikonu */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #856404;
    margin-right: 5px;
}
/* =========================================
   MOBİL FONT DÜZENLEMESİ & TAŞMA TAMİRİ 📱✨
   ========================================= */

/* 1. TÜM FONT RESİMLERİNİ HİZAYA SOK (Ceviz Dahil) */
/* Bu kod, resmin dairenin kenarlarına yapışmasını engeller ve tam ortaya sığdırır */
.font-kart img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Resmi kesmeden kutuya sığdır */
    padding: 6px; /* Kenarlardan boşluk bırak (Dışa taşmayı önler) */
    transform: scale(0.95); /* Çok hafif küçült ki ferah dursun */
    transition: transform 0.2s ease;
}

/* 2. MOBİL CİHAZLAR İÇİN ÖZEL AYAR (Sadece telefonda çalışır) */
@media (max-width: 768px) {
    
    /* Fontların olduğu kutuyu düzenle */
    .font-secenekleri {
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* Yan yana 5 tane sığdır (Daha küçük görünür) */
        gap: 8px; /* Araları biraz aç */
        justify-content: center;
        padding: 0 5px;
    }

    /* Her bir font topunu küçült ve kibarlaştır */
    .font-kart {
        width: 100% !important; /* Grid hücresine tam otursun */
        aspect-ratio: 1 / 1; /* Tam kare/daire olsun */
        border: 1px solid #eee; /* Çok hafif bir çerçeve ekle */
        box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Hafif gölge ile kalite kat */
    }

    /* Seçili olan fontun çerçevesi daha belirgin olsun */
    .font-kart.secili {
        border: 2px solid #5d8a9e; /* Senin tema rengin */
        transform: scale(1.05); /* Seçilince hafif büyüsün */
    }
}
/* =========================================
   İSİM GİRME KUTUSU (PREVIEW) AYARLARI 🔍
   ========================================= */
#petIsimInput {
    font-size: 24px !important; /* Yazı boyutu varsayılan olarak BÜYÜK olsun */
    height: 60px; /* Kutu yüksekliği artsın */
    text-align: center; /* Yazı ortada dursun, daha şık görünür */
    color: #333;
    background-color: #fff;
    border: 2px dashed #ddd; /* Önizleme alanı olduğu belli olsun */
    border-radius: 10px;
    padding: 10px;
    transition: all 0.3s ease;
    
    /* Mobilde yazı taşarsa aşağı inmesin, yan yana kalsın */
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* Kutuya tıklayınca (focus olunca) */
#petIsimInput:focus {
    border-color: #5d8a9e;
    background-color: #fcfcfc;
    box-shadow: 0 4px 10px rgba(93, 138, 158, 0.15);
}
/* =========================================
   SİHİRLİ PATİ POP-UP (DÜZGÜN VERSİYON) 🐾✨
   ========================================= */

.renk-secenekleri {
    display: flex;
    flex-wrap: wrap; /* Sığmazsa alt satıra geç */
    gap: 12px; /* Toplar arası boşluk */
    padding: 5px;
}

/* Renk Topu (Küçük Daire) */
.renk-swatch {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #eee;
    position: relative; /* Pop-up bunun içine konumlanacak */
    transition: transform 0.2s ease;
    /* Mobilde dokunma alanını iyileştir */
    touch-action: manipulation;
}

.renk-swatch img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

/* Seçilince alttaki top biraz büyüsün ve parlasın */
.renk-swatch.secili {
    border-color: #5d8a9e;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(93, 138, 158, 0.3);
}

/* --- PATİ POP-UP (YENİ YÖNTEM: FONT ICON + DOKU) --- */
.renk-swatch::before {
    /* Font Awesome Pati İkonu Kodu */
    content: '\f1b0'; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* Kalın ikon */
    
    position: absolute;
    bottom: 130%; /* Topun yukarısında başla */
    left: 50%;
    /* Başlangıçta gizli ve küçük, tam ortadan hizalı */
    transform: translateX(-50%) scale(0) rotate(-10deg); 
    
    font-size: 65px; /* Patinin büyüklüğü */
    line-height: 1;
    width: auto; height: auto;
    
    /* SİHİRLİ KISIM: DOKUYU YAZININ İÇİNE GÖM */
    /* JS'den gelen resim değişkeni */
    background-image: var(--bg-image); 
    background-size: cover;
    background-position: center;
    /* Arka planı sadece yazının (ikonun) olduğu yere kırp */
    -webkit-background-clip: text;
    background-clip: text;
    /* Yazının kendi rengini şeffaf yap ki arkadaki doku görünsün */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* Efektler */
    opacity: 0;
    pointer-events: none; /* Tıklamayı engellemesin */
    /* Zıplama efekti */
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    z-index: 999;
    /* Patiye hafif gölge vererek havada durmasını sağla */
    filter: drop-shadow(0 8px 8px rgba(0,0,0,0.25));
}

/* Üzerine gelince (Hover) veya Seçilince (.secili) GÖSTER */
.renk-swatch:hover::before,
.renk-swatch.secili::before {
    opacity: 1;
    /* Büyü, dönmeyi düzelt ve biraz daha yukarı kay */
    transform: translateX(-50%) scale(1) rotate(0deg); 
    bottom: 125%; 
}
/* =========================================
   SİHİRLİ PATİ POP-UP (KESİLME & GİZLENME TAMİRİ) 🛠️
   ========================================= */

/* 1. EN ÖNEMLİ KISIM: Kapsayıcıların Duvarlarını Yık! */
/* Bu kod sayesinde pati yukarı taştığında kesilmez, diğer yazıların üstüne çıkar */
.form-grup, 
.renk-secenekleri {
    overflow: visible !important; 
    position: relative;
    z-index: auto; /* Sıralamayı serbest bırak */
}

/* 2. Renk Seçenekleri Kutusu */
.renk-secenekleri {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 5px 30px 5px; /* Üstten ve alttan biraz boşluk bırak rahatlasın */
}

/* 3. Renk Topu (Küçük Daire) */
.renk-swatch {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #eee;
    
    /* Pozisyon Ayarları */
    position: relative; 
    z-index: 10; /* Normalde alt seviyede dursun */
    
    transition: transform 0.2s ease;
    touch-action: manipulation; /* Mobil dokunmatik iyileştirmesi */
}

.renk-swatch img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

/* 4. SEÇİLİNCE veya TIKLANINCA EN TEPEYE ÇIK (KRİTİK HAMLE) */
/* Bir top seçildiğinde, z-index değerini uzaya çıkarıyoruz ki hiçbir yazının altında kalmasın */
.renk-swatch:hover,
.renk-swatch.secili {
    border-color: #5d8a9e;
    transform: scale(1.1);
    z-index: 99999 !important; /* İşte sorunu çözen sihir bu! */
}

/* 5. PATİ POP-UP AYARLARI */
.renk-swatch::before {
    /* Font Awesome Pati İkonu */
    content: '\f1b0'; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    
    position: absolute;
    bottom: 120%; /* Topun biraz daha yukarısında dursun */
    left: 50%;
    transform: translateX(-50%) scale(0) rotate(-10deg); 
    
    font-size: 65px; 
    line-height: 1;
    width: auto; height: auto;
    
    /* Doku Kaplama */
    background-image: var(--bg-image); 
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* Efektler */
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    
    /* Patiye Gölge */
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
}

/* Patinin Görünme Anı */
.renk-swatch:hover::before,
.renk-swatch.secili::before {
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(0deg); 
    /* bottom: 120% ayarı yukarıda sabit, burada değiştirmeye gerek yok */
}

/* 6. Yuvarlak içindeki yazıları temizle */
.renk-swatch::after {
    content: none !important;
}
/* =========================================
   RENK İSMİ ETİKET TASARIMI (BADGE) 🏷️
   ========================================= */

/* Seçilen rengin ismi (Başlığın altındaki yazı) */
#secilenFontRengiGosterge,
#secilenCerceveRengiGosterge {
    display: inline-block;
    margin-top: 8px;
    margin-bottom: 5px;
    
    /* Etiket Görünümü */
    background-color: #f0f4f8; /* Çok açık gri-mavi zemin */
    color: #5d8a9e; /* Senin tema rengin */
    font-family: 'Montserrat', sans-serif; /* Varsa sitenin fontu */
    font-size: 0.9rem;
    font-weight: 600;
    
    padding: 5px 12px; /* İç boşluk */
    border-radius: 20px; /* Tam oval kenarlar (Kapsül şekli) */
    border: 1px solid #dae1e7;
    
    /* Animasyonlu geliş */
    transition: all 0.3s ease;
    opacity: 0; /* Seçim yapılana kadar gizli kalsın */
    transform: translateY(5px);
}

/* İçinde yazı varsa (JS ile dolunca) görünür olsun */
#secilenFontRengiGosterge:not(:empty),
#secilenCerceveRengiGosterge:not(:empty) {
    opacity: 1;
    transform: translateY(0);
}

/* Küçük bir ikon ekleyelim başına */
#secilenFontRengiGosterge::before,
#secilenCerceveRengiGosterge::before {
    content: '\f00c'; /* Tik işareti */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 6px;
    font-size: 0.8rem;
}
/* Kutuların dışına taşmayı serbest bırak (Pati kesilmesin) */
.form-grup, .renk-secenekleri {
    overflow: visible !important;
}
/* TİK İKONLARINI KESİN OLARAK GİZLE */
#secilenFontRengiGosterge::before,
#secilenCerceveRengiGosterge::before {
    content: none !important;
    display: none !important;
}
/* =========================================
   FİNAL BANNER: ROLLER DEĞİŞTİ (KESİN ÇÖZÜM) 🔄
   ========================================= */

/* 1. Slayt Alanı Temel Ayarı */
.swiper-slide {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 2. BİLGİSAYAR (DESKTOP) AYARLARI 💻 */
/* İstediğin: "Telefondaki gibi yüksek ve heybetli olsun" */
.banner-gorsel {
    width: 100%;
    /* Burayı 850px yaptık, hayvanlar ve tasmalar kocaman görünecek */
    height: 850px !important; 
    display: block;
    
    /* Resmi kesmeden kutuya yay (Cover) */
    object-fit: cover !important; 
    
    /* 🔥 EN ÖNEMLİ KISIM: Resmi "ÜSTTEN" hizala */
    /* Böylece mankenlerin kafası ve tasmaları görünür, kesilirse ayaklardan kesilir */
    object-position: top center !important; 
}

/* Yazı Konumu (Bilgisayar - Ortada) */
.kaydirici-yazi {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 80%;
}

/* 3. MOBİL (TELEFON) AYARLARI 📱 */
/* İstediğin: "Bilgisayardaki gibi kısa şerit (banner) olsun" */
@media (max-width: 768px) {
    
    .banner-gorsel {
        /* Yüksekliği kıstık -> Şerit görünümü kazandı */
        height: 250px !important; 
        
        /* Kenarlarda beyaz boşluk kalmasın diye 'cover' kullanıyoruz */
        object-fit: cover !important; 
        
        /* Mobilde de üstten hizala ki tasmalar görünsün */
        object-position: top center !important; 
    }
    
    /* Yazıları o ince şeride sığacak şekilde ayarlayalım */
    .kaydirici-baslik {
        font-size: 1.4rem !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Okunsun diye gölge */
        margin-bottom: 5px !important;
        background: none !important; /* Arka planı kaldırdık, daha temiz dursun */
        color: #fff !important;
    }
    
    .kaydirici-slogan {
        display: none !important; /* Şeritte yer kaplamasın diye sloganı gizledik */
    }
    
    .kaydirici-buton {
        font-size: 0.8rem !important;
        padding: 6px 15px !important;
        margin-top: 5px !important;
        background-color: #fff !important;
        color: #333 !important;
    }
}
/* =================================================
   SEPET TASARIMI - KAYDIRMA SORUNU ÇÖZÜLDÜ ✅
   (Buton Sabit, Ürünler Kayar)
   ================================================= */

/* 1. SEPETİN DIŞ ÇERÇEVESİ (Sabit Konum) */
#sepet {
    display: none; /* Başlangıçta gizli */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    
    /* Boyutlar */
    width: 400px !important;
    max-width: 100% !important; /* Mobilde tam ekran */
    
    /* Yükseklik: Ekran Boyu Kadar */
    height: 100vh !important;
    height: 100dvh !important; /* Mobil adres çubuğu uyumu */
    
    background-color: #ffffff !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2) !important;
    z-index: 9999999 !important;
}

/* Açık Durum */
#sepet.acik {
    display: block !important; /* Flex yerine Block yapıyoruz ki içindeki .sepet-kutu flex olsun */
}

/* 2. İÇ TAŞIYICI KUTU (Burası Çok Önemli!) */
/* HTML'de var olan .sepet-kutu div'ini kontrol altına alıyoruz */
.sepet-kutu {
    width: 100% !important;
    height: 100% !important; /* Ebeveyni (#sepet) kadar olsun, taşmasın */
    display: flex !important;
    flex-direction: column !important; /* Alt alta dizilim */
    background-color: #fff;
}

/* 3. BAŞLIK (HEADER) - Sabit */
.sepet-header {
    flex-shrink: 0 !important; /* Asla küçülmesin */
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    border-bottom: 1px solid #eee !important;
    background-color: #f8f9fa !important;
}

.sepet-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    color: #333 !important;
}

/* Çarpı Butonu */
#sepetKapat {
    width: 40px !important;
    height: 40px !important;
    font-size: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #888 !important;
}

/* 4. İÇERİK (ÜRÜNLER) - Kaydırılabilir Alan */
#sepet-icerik {
    flex-grow: 1 !important; /* Kalan tüm boşluğu bu kaplasın */
    overflow-y: auto !important; /* Ürünler sığmazsa SADECE BURASI kaysın */
    padding: 20px !important;
    
    /* Kaydırma çubuğu güzelleştirme (Opsiyonel) */
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

/* 5. ALT KISIM (FOOTER) - Sabit */
.sepet-alt {
    flex-shrink: 0 !important; /* Asla küçülmesin, aşağı itilmesin */
    padding: 20px !important;
    border-top: 1px solid #eee !important;
    background-color: #fff !important;
    z-index: 10;
    
    /* iPhone alt çizgi güvenli alanı */
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}

/* Buton ve Toplam Yazıları */
.sepet-toplam {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.sepet-onay-buton {
    width: 100%;
    padding: 15px;
    background-color: #A31D61;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.sepet-onay-buton:hover {
    background-color: #8a1751;
}

/* Giriş yap linki */
.modal-giris-linki {
    text-align: center;
    margin-bottom: 10px;
    font-size: 0.9em;
    color: #666;
}
/* =========================================
   ESTETİK FORM VE DROPDOWN (SELECT) TASARIMI 💅
   ========================================= */

/* 1. SEÇİM KUTUSU (SELECT) - MODERN GÖRÜNÜM */
select {
    width: 100%;
    padding: 12px 15px; /* İç boşlukları artırdık, ferahladı */
    padding-right: 40px; /* Sağ tarafa ok için yer açtık */
    
    /* Font ve Renkler */
    font-family: inherit;
    font-size: 1rem;
    color: #444;
    background-color: #fff;
    
    /* Kenarlıklar ve Yuvarlaklık */
    border: 2px solid #e1e8ed; /* Çok açık gri-mavi kenarlık */
    border-radius: 12px; /* Yumuşak köşeler */
    
    /* Standart Oku Gizle (Biz yenisini koyacağız) */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Geçiş Efektleri */
    transition: all 0.3s ease;
    cursor: pointer;
    
    /* Arka Plana Özel Ok İkonu Ekleme (Senin mavinden) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d8a9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

/* 2. TIKLANINCA (FOCUS) VE ÜZERİNE GELİNCE (HOVER) */
select:hover {
    border-color: #acc4cb; /* Üzerine gelince hafif koyulaşsın */
}

select:focus {
    outline: none; /* Mavi standart çizgiyi kaldır */
    border-color: #5d8a9e; /* Senin marka mavisi olsun */
    box-shadow: 0 0 0 4px rgba(93, 138, 158, 0.15); /* Etrafına havalı bir parlama ekle */
}

/* 3. ETİKETLER (LABEL) */
.form-grup label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700; /* Daha kalın ve okunaklı */
    color: #333;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

/* 4. BEDEN TABLOSU LİNKLERİ */
.link-yazisi {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 15px;
    
    /* Renk ve Font */
    color: #A31D61; /* Marka pembesi */
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none; /* Alt çizgiyi kaldır */
    
    transition: all 0.2s ease;
}

/* Linkin başına ikon ekleyelim (CSS ile) */
.link-yazisi i {
    margin-right: 6px;
    font-size: 1.1rem;
    transition: transform 0.2s;
}

/* Linke gelince */
.link-yazisi:hover {
    color: #5d8a9e; /* Maviye dönsün */
    text-decoration: underline; /* Altını çizsin */
}

.link-yazisi:hover i {
    transform: scale(1.2); /* İkon hafif büyüsün */
}

/* 5. CHECKBOX GÜZELLEŞTİRME (Numara Yazdır vb.) */
input[type="checkbox"] {
    accent-color: #5d8a9e; /* Tik rengini mavi yap */
    width: 18px;
    height: 18px;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 8px;
}
/* =========================================
   SİPARİŞ NOTU KUTUSU TASARIMI ✍️
   ========================================= */

/* 1. KUTUNUN KENDİSİ */
textarea {
    width: 100%;
    min-height: 100px; /* Biraz daha yüksek olsun, yazması rahat olur */
    padding: 15px; /* İçeriden ferah boşluk */
    
    /* Font ve Renkler */
    font-family: inherit; /* Sitenin güzel fontunu kullansın */
    font-size: 0.95rem;
    color: #333;
    background-color: #fafafa; /* Çok hafif gri, göz yormaz */
    
    /* Kenarlıklar ve Köşeler */
    border: 2px solid #e1e8ed; /* Diğer kutularla uyumlu açık kenarlık */
    border-radius: 12px; /* Yumuşak köşeler */
    
    /* Diğer Ayarlar */
    resize: vertical; /* Sadece aşağı doğru uzatılabilsin, yana kaymasın */
    transition: all 0.3s ease; /* Yumuşak geçiş */
    outline: none;
}

/* 2. TIKLANINCA (FOCUS) VE ÜZERİNE GELİNCE */
textarea:hover {
    border-color: #acc4cb; /* Üzerine gelince hafif belirginleşsin */
    background-color: #fff;
}

textarea:focus {
    border-color: #5d8a9e; /* Tıklayınca senin MAVİ rengin olsun */
    background-color: #fff; /* İçi bembeyaz olsun */
    box-shadow: 0 0 0 4px rgba(93, 138, 158, 0.15); /* Etrafında havalı parlama */
}

/* 3. İÇİNDEKİ SİLİK YAZI (PLACEHOLDER) */
textarea::placeholder {
    color: #999;
    font-style: italic; /* Eğik yazı, daha şık durur */
    font-size: 0.9rem;
}

/* 4. BAŞLIĞI VE İKONU */
/* Label içindeki kalemi renklendirelim */
label i.fa-pen-to-square {
    color: #5d8a9e; /* İkon mavi olsun */
    margin-right: 5px;
    font-size: 1.1rem;
    animation: salla 2s infinite ease-in-out; /* İsteğe bağlı: Minik sallanma efekti */
}

/* Minik bir animasyon: Kalem ikonu hafifçe sallansın */
@keyframes salla {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}
/* =========================================
   YENİ UYUMLU ÜRÜN KARTI (TIKLANABİLİR) 🔗
   ========================================= */

.uyumlu-baslik {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #333;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Kartın Kendisi */
.uyumlu-yonlendirme-karti {
    display: flex;
    align-items: center;
    background-color: #f9fbfd; /* Çok açık mavi-gri */
    border: 2px solid #e1e8ed;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer; /* Tıklanabilir el işareti */
    transition: all 0.3s ease;
    gap: 15px;
}

/* Üzerine gelince */
.uyumlu-yonlendirme-karti:hover {
    border-color: #5d8a9e; /* Mavi çerçeve */
    background-color: #fff;
    transform: translateY(-3px); /* Hafif yukarı kalksın */
    box-shadow: 0 5px 15px rgba(93, 138, 158, 0.15);
}

/* Görsel */
.uyumlu-gorsel-alani img {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #eee;
}

/* Yazılar */
.uyumlu-bilgi-alani {
    flex-grow: 1; /* Ortadaki boşluğu kapla */
}

.uyumlu-etiket {
    font-size: 0.75rem;
    color: #A31D61;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #fff0f5;
    padding: 2px 6px;
    border-radius: 4px;
}

.uyumlu-isim {
    margin: 5px 0 2px 0;
    font-size: 1rem;
    color: #333;
    font-weight: 700;
}

.uyumlu-mesaj {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
}

/* Sağdaki Ok */
.uyumlu-ok-alani {
    color: #5d8a9e;
    font-size: 1.2rem;
    padding-right: 10px;
    transition: transform 0.3s ease;
}

/* Kartın üzerine gelince ok hareket etsin */
.uyumlu-yonlendirme-karti:hover .uyumlu-ok-alani {
    transform: translateX(5px);
}
/* =========================================
   MOBİL İÇİN SABİT VE ORANTILI BUTONLAR
   ========================================= */

@media (max-width: 768px) {

    /* --- FONT VE RENK KUTUSUNU DÜZENLE --- */
    .font-secenekleri, 
    .renk-secenekleri {
        display: flex !important;           /* Esnek kutu yapısı */
        flex-wrap: wrap !important;         /* Sığmayan alt satıra geçsin (Kaydırma YOK) */
        justify-content: center !important; /* Ekranın ortasında dursunlar */
        gap: 12px !important;               /* Butonların arasını aç (Ferahlık) */
        padding-bottom: 10px;
    }

    /* --- FONT BUTONLARI (Karemsi ve Büyük) --- */
    .font-kart {
        /* Genişliği sabitleyelim ki hepsi aynı boyda dursun */
        width: 100px !important;  
        height: 55px !important;  
        
        /* İçindeki yazıyı ortalayalım */
        display: flex;
        align-items: center;
        justify-content: center;
        
        margin: 0 !important; /* Eski boşlukları sıfırla */
        box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Hafif gölge */
    }
    
    .font-kart img {
        max-width: 85% !important; /* Görsel kutuya tam sığsın */
        max-height: 85% !important;
    }

    /* --- RENK YUVARLAKLARI (Daha Büyük) --- */
    .renk-secenegi {
        width: 50px !important;   /* Eskisinden daha büyük */
        height: 50px !important;  /* Tam yuvarlak */
        
        margin: 0 !important; 
        box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* Kabarık dursun */
    }
}
/* =========================================
   BÜYÜTÜLEBİLİR KÜÇÜK RESİMLER (HEPSİ İÇİN)
   ========================================= */

/* Hem galeri resimlerini hem de açıklamadaki not resmini seçiyoruz */
.detay-fotolar img, 
.aciklama-gorsel {
    width: 75px !important;  /* Boyutları sabitleyelim */
    height: 75px !important;
    object-fit: cover !important;
    border-radius: 8px !important; /* Karemsi olsun */
    border: 2px solid #ddd !important;
    cursor: zoom-in !important; /* Büyüteç imleci çıksın */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Üstüne gelince efekt */
.detay-fotolar img:hover, 
.aciklama-gorsel:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    border-color: #5d8a9e !important; /* Mavi çerçeve */
    z-index: 50 !important;
}

/* POP-UP MODAL (EN ÜST KATMAN) */
#buyukResimModal {
    z-index: 10000000 !important; /* En üstte */
    background-color: rgba(0,0,0,0.9) !important;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
}

/* Modal içindeki büyük resim */
#buyukResimImg {
    max-width: 90vw !important;
    max-height: 90vh !important;
    object-fit: contain !important;
    border-radius: 5px !important;
    box-shadow: 0 0 20px rgba(255,255,255,0.1) !important;
}
/* =========================================
   FULAR KATEGORİSİ İÇİN ÖZEL STİLLER 🎀
   ========================================= */

/* 1. Kilo ve Ölçü Kutusu */
#fularOlcuInput {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e1e8ed; /* Diğer kutularla uyumlu açık gri */
    border-radius: 10px;
    font-size: 0.95rem;
    color: #333;
    background-color: #fff;
    margin-top: 5px;
    transition: all 0.3s ease;
}

#fularOlcuInput:focus {
    border-color: #5d8a9e; /* Tıklayınca Mavi */
    box-shadow: 0 0 0 3px rgba(93, 138, 158, 0.15);
    outline: none;
}

#fularOlcuInput::placeholder {
    color: #999;
    font-style: italic;
}

/* 2. "Bağlamalı İstiyorum" Kutusu (Dikkat Çeken Kısım) */
/* Bu id'yi JS içinde vermiştik, şimdi süslüyoruz */
#fularBaglamaliCheck {
    accent-color: #5d8a9e !important; /* Tik rengi mavi olsun */
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    cursor: pointer;
}

/* O kutunun genel çerçevesi */
.form-grup label {
    display: flex;
    align-items: center; /* Yazı ve kutucuğu hizala */
    cursor: pointer;
}
/* =========================================
   ESTETİK BİLDİRİM (TOAST MESSAGE) 🥂
   ========================================= */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ozel-bildirim {
    background-color: #fff;
    min-width: 300px;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    transform: translateX(120%); /* Başlangıçta ekran dışında */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-left: 5px solid #5d8a9e; /* Varsayılan Mavi Çizgi */
}

.ozel-bildirim.aktif {
    transform: translateX(0); /* Ekrana kay */
}

.ozel-bildirim i {
    font-size: 1.5rem;
}

.ozel-bildirim.basari { border-left-color: #28a745; }
.ozel-bildirim.basari i { color: #28a745; }

.ozel-bildirim.hata { border-left-color: #dc3545; }
.ozel-bildirim.hata i { color: #dc3545; }

.bildirim-metni {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

/* PROFİL MODALI İÇİN SEKME TASARIMI (Siparişlerim İçin) */
.profil-sekmeler {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
.profil-sekme-btn {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}
.profil-sekme-btn.aktif {
    color: #5d8a9e;
    border-bottom-color: #5d8a9e;
}
.profil-tab-icerik { display: none; }
.profil-tab-icerik.aktif { display: block; }

/* Sipariş Listesi Tasarımı */
.gecmis-siparis-kart {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}
.siparis-tarih { font-size: 0.8rem; color: #888; display: block; margin-bottom: 5px; }
.siparis-durum { float: right; color: #28a745; font-weight: bold; font-size: 0.8rem; }
/* =========================================
   1. ESTETİK BİLDİRİM (TOAST MESSAGE) 🥂
   ========================================= */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999999; /* Her şeyin üstünde */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Tıklamayı engellemesin */
}

.ozel-bildirim {
    background-color: #fff;
    min-width: 300px;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    transform: translateX(120%); /* Başlangıçta ekran dışında */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-left: 5px solid #5d8a9e; /* Varsayılan Mavi */
    pointer-events: auto;
}

.ozel-bildirim.aktif {
    transform: translateX(0); /* Ekrana kay */
}

.ozel-bildirim i { font-size: 1.4rem; }
.ozel-bildirim.basari { border-left-color: #28a745; }
.ozel-bildirim.basari i { color: #28a745; }
.ozel-bildirim.hata { border-left-color: #dc3545; }
.ozel-bildirim.hata i { color: #dc3545; }

.bildirim-metni { font-weight: 600; color: #333; font-size: 0.95rem; }

/* =========================================
   2. PROFİL İÇİ SEKMELER (Siparişlerim / Hesap) 📦
   ========================================= */
.profil-sekmeler {
    display: flex;
    border-bottom: 2px solid #f1f1f1;
    margin-bottom: 20px;
}

.profil-sekme-btn {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
}

.profil-sekme-btn.aktif {
    color: #5d8a9e; /* Senin Mavin */
    border-bottom-color: #5d8a9e;
}

.profil-sekme-btn:hover { color: #333; }

.profil-tab-icerik { display: none; animation: fadeIn 0.3s ease; }
.profil-tab-icerik.aktif { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Sipariş Listesi Görünümü */
.gecmis-siparis-kart {
    background: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 12px;
    position: relative;
}
.siparis-baslik { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.85rem; color: #888; }
.siparis-durum { font-weight: bold; color: #28a745; background: #e6f9ec; padding: 3px 8px; border-radius: 4px; font-size: 0.8rem; }
.siparis-ozet { font-weight: bold; color: #333; margin-bottom: 5px; }
.kargo-link { display: inline-block; margin-top: 5px; font-size: 0.85rem; color: #5d8a9e; text-decoration: none; border-bottom: 1px dashed #5d8a9e; }
/* =========================================
   1. MODERN BİLDİRİM BALONCUĞU (TOAST) 🥂
   ========================================= */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.ozel-bildirim {
    background-color: #fff;
    min-width: 320px;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-left: 6px solid #5d8a9e;
    pointer-events: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ozel-bildirim.aktif { transform: translateX(0); }

.ozel-bildirim i { font-size: 1.5rem; }
.ozel-bildirim.basari { border-left-color: #28a745; }
.ozel-bildirim.basari i { color: #28a745; }
.ozel-bildirim.hata { border-left-color: #dc3545; }
.ozel-bildirim.hata i { color: #dc3545; }

.bildirim-metni { font-weight: 600; color: #333; font-size: 0.95rem; }

/* =========================================
   2. MODERN ONAY KUTUSU (CONFIRM MODAL) ❓
   ========================================= */
#ozelOnayModal {
    z-index: 999999999 !important; /* En, en üstte */
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px); /* Arkası buzlu cam olsun */
}

.onay-modal-icerik {
    text-align: center;
    max-width: 400px;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.onay-ikon {
    font-size: 3rem;
    color: #FFC90E; /* Uyarı Sarısı */
    margin-bottom: 15px;
    display: block;
}

.onay-baslik {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.onay-butonlar {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.btn-onay-evet {
    background-color: #dc3545; /* Kırmızı (Tehlikeli işlem) */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    flex: 1;
    transition: 0.2s;
}
.btn-onay-evet:hover { background-color: #c82333; }

.btn-onay-hayir {
    background-color: #e2e6ea;
    color: #333;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    flex: 1;
    transition: 0.2s;
}
.btn-onay-hayir:hover { background-color: #dbe0e5; }
/* =========================================
   YAPIM AŞAMASINDA EKRANI (COMING SOON) 🚧
   ========================================= */
#yapimAsamasindaPerdesi {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* Veya senin marka rengin #F8F1F1 */
    z-index: 9999999999; /* Her şeyin en üstünde! */
    display: flex; /* Flexbox ile ortala */
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.sayac-kutusu {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    max-width: 600px;
    width: 90%;
    border: 2px dashed #A31D61; /* Marka renginle çerçeve */
}

.acilis-metni {
    font-size: 1.5rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
}

.acilis-metni-alt {
    color: #666;
    margin-bottom: 30px;
}

.sayac-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.zaman-birimi {
    display: flex;
    flex-direction: column;
    background: #5d8a9e; /* Mavi kutular */
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    min-width: 70px;
    font-size: 0.8rem;
}

.zaman-birimi span {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.tarih-etiketi {
    background: #f1f1f1;
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
    color: #333;
    font-weight: bold;
    margin-bottom: 20px;
}

.gizli-giris-linki {
    display: block;
    margin: 20px auto 0;
    background: none;
    border: none;
    color: #ccc;
    font-size: 0.8rem;
    cursor: pointer;
}
.gizli-giris-linki:hover { color: #A31D61; }
/* =========================================
   ÖDEME MODALI TASARIMI 💳
   ========================================= */
.odeme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 768px) {
    .odeme-grid { grid-template-columns: 1fr; } /* Mobilde alt alta olsun */
}

.adres-formu-alani h4, .odeme-sag-panel h4 {
    color: #333;
    border-bottom: 2px solid #f1f1f1;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 15px;
}

.btn-odeme-gec {
    width: 100%;
    background-color: #5d8a9e; /* Mavi Buton */
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-odeme-gec:hover {
    background-color: #4a7585;
}

.siparis-ozeti-kutu {
    background-color: #fcfcfc;
    border: 1px dashed #ccc;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}
/* Hediye Kutusu Zıplama Animasyonu */
@keyframes zipla {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}
/* --- KUPON ALANI TASARIMI --- */
.kupon-kapsayici {
    margin-top: 15px;
    padding: 15px;
    background-color: #f0f8ff; /* Çok açık mavi */
    border: 1px dashed #5d8a9e;
    border-radius: 8px;
}

.kupon-form {
    display: flex;
    gap: 10px;
}

.kupon-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.9rem;
    outline: none;
    text-transform: uppercase; /* Yazarken otomatik büyük harf olsun */
}

.kupon-input:focus {
    border-color: #5d8a9e;
}

.kupon-btn {
    background-color: #333;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: 0.3s;
}

.kupon-btn:hover {
    background-color: #5d8a9e;
}

.aktif-kupon-bilgisi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #28a745;
    font-weight: bold;
    font-size: 0.95rem;
}

.kupon-sil-btn {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 1.1rem;
}
/* --- ÖZEL KAYDIRMA ÇUBUĞU --- */
/* Çubuğun genişliği */
::-webkit-scrollbar {
    width: 10px;
}

/* Çubuğun arka planı (Yol) */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Hareket eden kısım (Tutamak) */
::-webkit-scrollbar-thumb {
    background: #5d8a9e; /* Senin Mavin */
    border-radius: 5px;
    border: 2px solid #f1f1f1; /* Kenarlardan biraz boşluk */
}

/* Tutamağın üzerine gelince */
::-webkit-scrollbar-thumb:hover {
    background: #A31D61; /* Senin Pemben */
}
/* =========================================
   PAYTR SCROLL & MODAL DÜZENLEMESİ (GÜNCEL) 📜
   ========================================= */

/* 1. Tüm Ödeme Modalı İçin Kaydırma Ayarı */
#odemeModal .modal-icerik {
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    scrollbar-width: thin;
    scrollbar-color: #5d8a9e #f0f0f0;
}

/* 2. Adres Formu ve Ödeme Alanı Düzeni */
.odeme-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

/* 3. Sol ve Sağ Kutular */
.adres-formu-alani, .odeme-sag-panel {
    flex: 1 1 300px;
    width: 100%;
}

/* 4. PayTR Iframe Kutusu (DÜZELTİLDİ) */
#paytrIframeAlani {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    padding: 10px;
    overflow: visible; /* Taşmaya izin ver */
}

/* 5. Iframe'in Kendisi (Sabit yükseklik kaldırıldı) */
#paytrIframe {
    width: 100% !important;
    border: none;
    display: block;
    /* min-height: 600px;  <-- BU SATIRI SİLDİK */
}

/* 6. MOBİL İÇİN ÖZEL AYARLAR 📱 */
@media screen and (max-width: 768px) {
    #odemeModal .modal-icerik {
        max-height: 95vh;
        width: 95% !important;
        margin: 2.5vh auto;
        padding: 15px;
    }

    #odemeModal .kapat {
        position: sticky;
        top: 0;
        float: right;
        background: #fff;
        width: 30px; 
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 100;
        margin-bottom: 10px;
    }
}
/* =========================================
   MOBİLDE ZOOM SORUNU ÇÖZÜMÜ 🔍🚫
   ========================================= */
@media screen and (max-width: 768px) {
    /* Telefondan girince yazı boyutu 16px olsun ki zoom yapmasın */
    input[type="text"], 
    input[type="email"], 
    input[type="tel"], 
    input[type="number"], 
    input[type="password"], 
    select, 
    textarea {
        font-size: 16px !important;
    }
}
/* =========================================
   MODERN & KOMPAKT ÖDEME FORMU TASARIMI 💳
   ========================================= */

/* Başlık Alanı - Güven Verir */
.guvenli-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.guvenli-baslik h4 {
    margin: 0;
    color: #333;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.guvenli-baslik h4 i { color: #5d8a9e; } /* Mavi Kalkan */

.ssl-etiketi {
    font-size: 0.75rem;
    background: #e6f9ec; /* Açık yeşil */
    color: #28a745;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}

/* Form Izgarası (Grid) */
.modern-form-grid {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Elemanlar arası boşluk */
}

/* Yan Yana Duran Kutular */
.form-satir-ikili {
    display: flex;
    gap: 12px;
}

.form-satir-ikili .input-kapsayici {
    flex: 1; /* Eşit genişlikte olsunlar */
}

/* Girdi Alanları Tasarımı */
.input-kapsayici label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
}

.input-kapsayici input,
.input-kapsayici textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    background-color: #fcfcfc;
    transition: all 0.3s ease;
    
    /* MOBİL ZOOM ENGELLEME (ÖNEMLİ) */
    font-size: 16px !important; 
}

.input-kapsayici input:focus,
.input-kapsayici textarea:focus {
    border-color: #5d8a9e;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(93, 138, 158, 0.1);
    outline: none;
}

/* Textarea Boyutu */
.input-kapsayici textarea {
    min-height: 60px;
    resize: vertical;
}

/* Alt Güvenlik Notu */
.guvenlik-notu {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #888;
    background-color: #f9f9f9;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
}

/* MOBİL İÇİN ÖZEL DÜZELTME */
@media screen and (max-width: 480px) {
    /* Çok dar ekranlarda bile yan yana kalsınlar ama boşluk azalsın */
    .form-satir-ikili {
        gap: 8px;
    }
    
    /* Mobilde padding biraz daha az olsun, yer kazanalım */
    .input-kapsayici input {
        padding: 10px 8px;
    }
}

/* SCROLL (KAYDIRMA) ÇUBUĞU GARANTİSİ */
#odemeModal .modal-icerik {
    overflow-y: auto !important; /* Dikey kaydırma açık */
    max-height: 90vh; /* Ekranın %90'ı kadar olsun */
    
    /* Kaydırma Çubuğu Tasarımı */
    scrollbar-width: thin;
    scrollbar-color: #5d8a9e #f1f1f1;
}
/* =========================================
   FİNAL ÖDEME MODALI DÜZELTMESİ 🛠️
   ========================================= */

/* 1. MODAL ÇERÇEVESİ (En Üste Çıkar) */
#odemeModal {
    z-index: 999999999 !important; /* Header'ın altında kalmasın */
    padding-top: 0 !important; /* Yukarıdaki boşluğu sıfırla */
    background-color: rgba(0,0,0,0.6); /* Arkası karanlık olsun */
}

/* 2. MODAL KUTUSU (Mobil Uyumlu) */
#odemeModal .modal-icerik {
    width: 95%;
    max-width: 900px;
    height: 90vh; /* Ekranın %90'ı */
    margin: 5vh auto; /* Ortala */
    padding: 0 !important; /* İç boşluğu biz ayarlayacağız */
    border-radius: 12px;
    overflow: hidden; /* Taşmaları gizle */
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
}

/* 3. SABİT BAŞLIK VE KAPATMA BUTONU (Çarpı Burada!) */
.modal-baslik-alani {
    background-color: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Küçülmesin */
}

.modal-baslik-alani h3 {
    margin: 0;
    color: #333;
    font-size: 1.2rem;
}

.modal-baslik-alani .kapat {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    line-height: 1;
    display: block !important; /* Kesin göster */
    position: static !important; /* Sağa sola kaçmasın */
}

/* 4. İÇERİK GÖVDESİ (Kaydırılabilir Alan) */
.modal-govde {
    flex-grow: 1;
    overflow-y: auto; /* Aşağı doğru kayabilsin */
    padding: 20px;
}

/* 5. FORM IZGARASI (Düzgün Hizalama) */
.odeme-grid-yeni {
    display: flex;
    gap: 30px;
    flex-wrap: wrap; /* Mobilde alt alta geçsin */
}

.adres-formu-sol, .odeme-ozet-sag {
    flex: 1;
    min-width: 300px; /* Çok küçülmesin */
}

.form-izgara {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Kutular arası boşluk */
}

/* Kutular */
.form-kutu {
    display: flex;
    flex-direction: column;
}

.form-kutu label {
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}

.form-kutu input, .form-kutu textarea {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px !important; /* Zoom engelleme */
    background: #fff;
}

/* YAN YANA DİZME SİHRİ */
.form-kutu.tam { width: 100%; }
.form-kutu.yarim { width: calc(50% - 8px); } /* %50 genişlik - boşluk payı */

/* 6. MOBİL İÇİN ÖZEL AYAR (Telefonda Hepsi Tam Satır Olsun mu?) */
@media (max-width: 480px) {
    /* İstersen telefonda da yan yana kalsınlar diye burayı ellemiyorum. 
       Eğer telefonda alt alta olsun istersen .yarim { width: 100%; } yapabilirsin. */
    
    #odemeModal .modal-icerik {
        width: 100%;
        height: 100vh; /* Tam ekran */
        border-radius: 0;
        margin: 0;
    }
}
/* =========================================
   MOBİL ÖDEME KUTUSU DÜZELTMESİ (SON) 📱
   ========================================= */

/* 1. Kutuyu Aşağı İndir ve En Üste Çıkar */
#odemeModal {
    z-index: 999999999 !important; /* Header'ın üstünde olsun */
    padding-top: 80px !important; /* 🔥 ÇÖZÜM: Yukarıdan 80px boşluk bırak */
    background-color: rgba(0,0,0,0.8); /* Arkası daha koyu olsun */
    align-items: flex-start; /* Ortalamayı bırak, yukarıdan başla */
}

/* 2. Beyaz Kutunun Kenarlarını Düzelt */
#odemeModal .modal-icerik {
    width: 95% !important; /* Ekrana tam yapışmasın */
    max-width: 500px;
    margin: 0 auto 20px auto; /* Ortala ve alttan boşluk ver */
    border-radius: 12px;
    max-height: 80vh; /* Ekranın %80'i kadar olsun */
    display: flex;
    flex-direction: column;
}

/* 3. Başlık ve Çarpıyı Sabitle */
.modal-baslik-alani {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    border-bottom: 1px solid #eee;
    padding: 15px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 4. Çarpı İşaretini Belirgin Yap */
.modal-baslik-alani .kapat {
    font-size: 32px !important;
    color: #dc3545 !important; /* Kırmızı */
    background: #f8f9fa;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    display: block !important;
}

/* 5. İçeriği Kaydırılabilir Yap */
.modal-govde {
    overflow-y: auto;
    padding: 15px;
}
/* =========================================
   AKRİLİK UZATMA SEÇENEĞİ TASARIMI 🔗
   ========================================= */
.akrilik-opsiyon-kutu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa; /* Çok açık gri */
    border: 1px dashed #5d8a9e; /* Mavi kesikli çizgi */
    border-radius: 10px;
    padding: 10px 15px;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.akrilik-opsiyon-kutu:hover {
    background-color: #eaf4f8; /* Üzerine gelince hafif mavi olsun */
}

.akrilik-gorsel-kapsayici img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: zoom-in; /* Büyüteç ikonu çıksın */
    transition: transform 0.2s;
}

.akrilik-gorsel-kapsayici img:hover {
    transform: scale(1.5); /* Resmin üzerine gelince büyüsün */
}


/* =========================================
   VİTRİN KARTI AYRIŞTIRMA EFEKTİ (HOVER) ✨
   ========================================= */

/* Özel Kartın Kendisi */
.ozel-secim-karti {
    position: relative; /* İçindeki perde buna göre hizalansın */
    overflow: hidden;   /* Dışarı taşanları gizle */
}

/* Gizli Perde (Başlangıçta Görünmez) */
.kart-secim-perdesi {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(93, 138, 158, 0.95); /* Kaju Mavisi + Hafif Şeffaflık */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Görünmez */
    transition: all 0.3s ease; /* Yumuşak geçiş */
    z-index: 10;
}

/* Üzerine Gelince (Hover) Perdeyi Göster */
.ozel-secim-karti:hover .kart-secim-perdesi,
.ozel-secim-karti:active .kart-secim-perdesi,
.ozel-secim-karti:focus-within .kart-secim-perdesi {
    opacity: 1; /* Görünür yap */
}

/* "Hangi Dostumuz?" Yazısı */
.secim-baslik {
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 15px;
    transform: translateY(-20px); /* Aşağıdan yukarı kayarak gelsin */
    transition: transform 0.3s ease;
}

.ozel-secim-karti:hover .secim-baslik {
    transform: translateY(0);
}

/* Butonlar Yan Yana */
.secim-butonlari {
    display: flex;
    gap: 10px;
}

/* Buton Tasarımı */
.secim-butonlari button {
    background-color: white;
    color: #5d8a9e;
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.secim-butonlari button:hover {
    background-color: #FFC90E; /* Sarı renk */
    color: #333;
    transform: scale(1.1); /* Hafif büyüsün */
}

/* Mobil İçin İpucu: Telefondaki kullanıcı anlasın diye */
@media (max-width: 768px) {
    .secim-butonlari button {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}
/* =========================================
   BİLGİLENDİRME MODALLARI (GÜNCELLENMİŞ) ✨
   ========================================= */

/* Modal Genel Çerçeve */
#kolyelerModal .modal-icerik {
    border-top: 6px solid #A31D61; /* Bordo Çizgi */
    border-radius: 16px;
    padding: 35px 25px;
    width: 90%;
    max-width: 480px; /* Çok geniş olmasın */
    text-align: center;
    background: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

/* İkon Alanı */
.modal-ikon-kapsayici {
    font-size: 3.5rem;
    color: #A31D61;
    margin-bottom: 15px;
    animation: zipla 2s infinite ease-in-out;
}

/* Başlık */
.modal-baslik {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Metin Alanı */
.modal-metin-alani p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 12px;
    font-size: 1rem;
}

.modal-metin-alani a {
    color: #5d8a9e;
    font-weight: bold;
    text-decoration: underline;
}

/* --- YENİ UYARI KUTUSU (OKUNAKLI) --- */
.modal-uyari-kutusu {
    background-color: #fff9e6; /* Çok açık sarı zemin (Göz yormaz) */
    border: 1px solid #ffe082; /* İnce sarı çerçeve */
    border-left: 5px solid #FFC90E; /* Sol tarafta kalın uyarı çizgisi */
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
}

.modal-uyari-kutusu .uyari-ikon {
    font-size: 1.4rem;
    color: #f57f17; /* Koyu turuncu ikon */
    margin-top: 2px;
}

.modal-uyari-kutusu .uyari-yazi {
    color: #333; /* SİYAH YAZI (En okunaklısı) */
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-uyari-kutusu strong {
    color: #d84315; /* Başlık hafif kırmızımtırak dikkat çeksin */
    display: block;
    margin-bottom: 4px;
}

/* Tamam Butonu */
.modal-tamam-btn {
    background-color: #A31D61;
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 10px rgba(163, 29, 97, 0.3);
}

.modal-tamam-btn:hover {
    background-color: #8a1550;
    transform: scale(1.05);
}

/* Animasyon */
@keyframes zipla {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
/* =======================================================
   🔥 KEDİ VE KOLYE UYARI KUTUSU - MOBİL DÜZELTME (KESİN)
   ======================================================= */
@media only screen and (max-width: 768px) {

    /* 1. Kutunun Kendisini Küçült */
    #kediUyariModal .modal-icerik,
    #kolyelerModal .modal-icerik {
        width: 85% !important;        /* Genişlik: Ekranın %85'i kadar olsun */
        max-width: 320px !important;  /* Asla 320px'i geçmesin (Telefon sınırı) */
        min-width: 0 !important;      /* Varsa minimum kilitleri kır */
        margin: 15% auto !important;  /* Ortala */
        padding: 15px !important;     /* İç boşlukları daralt */
        height: auto !important;      /* İçeriğe göre uzasın */
    }

    /* 2. Başlık Yazılarını (H3) Küçült */
    #kediUyariModal h3,
    #kolyelerModal h3,
    .modal-baslik {
        font-size: 1.1rem !important; /* Başlık boyutu */
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        line-height: 1.2 !important;
    }

    /* 3. Açıklama Metinlerini Küçült */
    #kediUyariModal p,
    #kolyelerModal p,
    .modal-metin-alani {
        font-size: 0.85rem !important; /* Okunabilir küçük yazı */
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    /* 4. Uyarı Kutusunu (Sarı/Turuncu alan) Düzenle */
    .modal-uyari-kutusu {
        padding: 10px !important;
        margin-top: 10px !important;
        font-size: 0.8rem !important; /* Uyarı yazısı boyutu */
        display: flex !important;
        flex-direction: column !important; /* Telefondan yan yana sığmazsa alt alta al */
        align-items: center !important;
        text-align: center !important;
    }

    /* 5. İkonları Küçült */
    .modal-ikon-kapsayici i,
    .uyari-ikon i {
        font-size: 1.8rem !important; /* Dev ikonları küçült */
        margin-bottom: 5px !important;
    }

    /* 6. Butonları Tam Genişlik Yap */
    .modal-tamam-btn {
        width: 100% !important;
        padding: 10px 0 !important;
        font-size: 0.9rem !important;
        margin-top: 10px !important;
    }
}
/* =======================================================
   YAVRU KEDİ UYARISI İÇİN MİNİMAL TASARIM (ÖZEL) 🐈
   ======================================================= */
@media only screen and (max-width: 768px) {

    /* 1. Kutuyu Daha Dar ve Kibar Yap */
    #kediUyariModal .modal-icerik {
        width: 80% !important;        /* Genişlik biraz daha az */
        max-width: 290px !important;  /* 320px'den 290px'e çektik */
        padding: 12px 15px !important; /* İç boşluğu azalttık */
        margin: 20% auto !important;
        border-radius: 15px !important; /* Daha oval köşeler */
    }

    /* 2. Turuncu Kedi İkonunu Küçült */
    #kediUyariModal .modal-ikon-kapsayici i {
        font-size: 1.5rem !important; /* İkonu küçülttük */
        margin-bottom: 5px !important;
    }

    /* 3. Başlığı Küçült */
    #kediUyariModal h3 {
        font-size: 1rem !important; /* Başlık boyutu */
        margin-bottom: 8px !important;
        font-weight: 700 !important;
    }

    /* 4. Açıklama Yazılarını Ufalt */
    #kediUyariModal .modal-metin-alani p {
        font-size: 0.8rem !important; /* Daha küçük metin */
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        color: #555 !important;
    }

    /* 5. Sarı Uyarı Kutusunu Sıkılaştır */
    #kediUyariModal .modal-uyari-kutusu {
        padding: 8px !important;
        margin-top: 8px !important;
        margin-bottom: 10px !important;
        background-color: #fffaf0 !important; /* Daha soft sarı */
    }
    
    #kediUyariModal .uyari-yazi {
        font-size: 0.75rem !important; /* Uyarı yazısı minimal */
    }

    /* 6. Butonu Küçült ve Kibarlaştır */
    #kediUyariModal .modal-tamam-btn {
        padding: 8px 0 !important;
        font-size: 0.85rem !important;
        margin-top: 5px !important;
        border-radius: 20px !important;
        width: 100% !important;
    }
}
/* --- FİYAT GÖRÜNÜMÜ (MODERN & TEMİZ) --- */

.fiyat-kutusu {
    /* Fontu zorla modern yapıyoruz (Apple, Windows, Android uyumlu) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    display: flex;
    align-items: center;
    justify-content: center; /* Ortalar */
    gap: 10px; /* Fiyatlar arası boşluk */
    margin-top: 8px;
}

/* Güncel Fiyat (Koyu ve Net) */
.guncel-fiyat {
    color: #222; /* Tam siyah değil, asil koyu gri */
    font-size: 18px; /* Biraz daha okunaklı */
    font-weight: 700; /* Kalın */
    letter-spacing: -0.5px; /* Rakamları hafif sıkılaştırır, modern durur */
}

/* Eski Fiyat (Silik ve Çizili) */
.eski-fiyat {
    color: #999; /* Soluk gri */
    text-decoration: line-through; /* Üstünü çiz */
    font-size: 15px; 
    font-weight: 400; /* İnce */
}

/* İndirim Etiketi (Kırmızı Kutu) */
.indirim-etiketi {
    position: absolute;
    top: 10px; right: 10px;
    background: #e63946; color: #fff;
    padding: 4px 8px; border-radius: 4px;
    font-size: 12px; font-weight: bold;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* --- SEÇENEK 1: PEMBE/BORDO TASARIM --- */
#geriDonAlani {
    /* Şekil ve Boyut */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;        /* Biraz geniş (Oval olması için) */
    height: 45px;       /* Yükseklik */
    border-radius: 30px; /* Tam oval kenarlar */
    
    /* Renkler */
    background-color: #ffffff; /* Beyaz Zemin */
    border: 2px solid #A31D61; /* Marka Rengi Kenarlık */
    color: #A31D61;            /* Ok Rengi */
    
    /* Efektler */
    box-shadow: 0 4px 10px rgba(163, 29, 97, 0.2); /* Pembe gölge */
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px;
    z-index: 999; /* Her şeyin üstünde dursun */
}

#geriDonAlani i {
    font-size: 1.4rem; /* Ok boyutu büyük */
}

/* Üzerine gelince */
#geriDonAlani:hover {
    background-color: #A31D61; /* İçi Pembe Olsun */
    color: #ffffff;            /* Ok Beyaz Olsun */
    transform: translateX(-3px); /* Hafif sola kayma efekti */
    box-shadow: 0 6px 15px rgba(163, 29, 97, 0.4);
}
/* Ürün detayının içindeki (Mavi ile işaretlediğin) butonu gizler */
#urunDetay .geri-don-butonu, 
#urunDetay button[onclick="detaylariKapat()"],
#detayKapat { 
    display: none !important; 
}
/* --- RENK SEÇİMİ VE PATİ DÜZELTMESİ --- */

/* Tüm renk kutularına pozisyon veriyoruz ki z-index çalışsın */
.renk-swatch {
    position: relative;
    z-index: 1; /* Hepsi başlangıçta eşit seviyede */
    transition: transform 0.2s ease; /* Sadece büyüme animasyonlu olsun */
    /* Mobilde takılmayı önler */
    backface-visibility: hidden; 
    -webkit-font-smoothing: subpixel-antialiased;
}

/* SEÇİLİ OLDUĞUNDA (Pati çıktığında) */
.renk-swatch.secili {
    z-index: 999 !important; /* 🔥 EN ÖNEMLİ KISIM: Zorla en öne al */
    transform: scale(1.15);  /* Seçilince biraz daha belirgin büyüsün */
    position: relative;      /* Z-index'in çalışması için şart */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Öne çıktığı belli olsun diye gölge */
}

/* Eğer pati resmi bir 'after' elementi ise onun da öne çıkmasını garantile */
.renk-swatch.secili::after, 
.renk-swatch.secili::before {
    z-index: 1000 !important;
}
/* --- MOBİL TIKLAMA EFEKTİNİ (GRİ KUTUYU) YOK ET --- */
* {
    -webkit-tap-highlight-color: transparent;
}
/* --- HIZLI BİLGİ ŞERİDİ (YAN YANA İKONLAR) --- */
.hizli-bilgi-seridi {
    display: flex;
    justify-content: space-between; /* Eşit dağıt */
    background-color: #f8f9fa; /* Çok hafif gri */
    padding: 12px;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #eee;
}

.bilgi-item {
    display: flex;
    flex-direction: column; /* Mobilde alt alta, ikonu üste al */
    align-items: center;
    text-align: center;
    font-size: 0.8rem;
    color: #555;
    flex: 1;
}

.bilgi-item i {
    font-size: 1.2rem;
    color: #5d8a9e; /* Marka Mavisi */
    margin-bottom: 5px;
}

.bilgi-item strong {
    color: #A31D61; /* Vurgulu kısım (Süre) */
}

/* --- AKORDEON (AÇILIR KAPANIR MENÜ) --- */
.akordeon-kapsayici {
    margin-top: 10px;
    border-top: 1px solid #eee;
}

.akordeon-item {
    border-bottom: 1px solid #eee;
}

.akordeon-baslik {
    width: 100%;
    background: none;
    border: none;
    padding: 15px 5px;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s;
}

.akordeon-baslik:hover {
    color: #5d8a9e;
}

.akordeon-baslik i {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    color: #999;
}

/* Açıldığında ok dönsün */
.akordeon-baslik.aktif i {
    transform: rotate(180deg);
    color: #5d8a9e;
}

.akordeon-icerik {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 5px;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

.akordeon-icerik ul {
    padding-left: 20px;
    margin: 10px 0;
}

.akordeon-icerik li {
    margin-bottom: 5px;
}
/* --- MOBİL İÇİN ÖZEL GÜVENLİK AYARI --- */
@media (max-width: 480px) {
    .bilgi-item span {
        font-size: 0.7rem; /* Yazıyı mobilde bir tık küçültür */
        white-space: nowrap; /* Yazının alt satıra kaymasını engeller */
    }
    
    .hizli-bilgi-seridi {
        padding: 10px 5px; /* Kenar boşluklarını daraltır */
        gap: 2px; /* Kutular arası boşluğu azaltır */
    }
}
/* ========================================================
   FİNAL İNDİRİM VE FİYAT TASARIMI (SALLANMA YOK 🛑)
   ======================================================== */

/* 1. ETİKET TASARIMI (LİSTE GÖRÜNÜMÜ) */
.indirim-etiketi {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    
    /* Sabit ve Şık Tasarım */
    background-color: #ffe0e9; /* Pastel Pembe */
    color: #A31D61;            /* Marka Rengi */
    font-weight: 800;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #ffb3c6;
    box-shadow: 0 2px 5px rgba(163, 29, 97, 0.1);
    
    /* 🔥 DİKKAT: Animasyon kodunu sildik, artık sallanmaz */
}

/* 2. ETİKET TASARIMI (DETAY SAYFASI - Başlık Yanı) */
.indirim-etiketi-detay {
    display: inline-block;
    background-color: #ffe0e9;
    color: #A31D61;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 10px;
    vertical-align: middle;
    border: 1px solid #ffb3c6;
}

/* 3. FİYAT GÖRÜNÜMÜ (LİSTE - KART İÇİ) */
.fiyat-kapsayici {
    display: flex;
    align-items: center;
    justify-content: center; /* Kartın ortasına hizala */
    gap: 8px; /* Fiyatlar arası boşluk */
    margin-top: 5px;
    margin-bottom: 10px;
    height: 30px; /* Yüksekliği sabitle ki kayma yapmasın */
}

.eski-fiyat {
    color: #999;
    text-decoration: line-through; /* Üstü çizili */
    font-size: 0.9rem;
    font-weight: 500;
}

.yeni-fiyat {
    color: #A31D61;
    font-size: 1.2rem;
    font-weight: 800;
}

/* 4. FİYAT GÖRÜNÜMÜ (DETAY SAYFASI) */
.detay-fiyat-kapsayici {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.eski-fiyat-detay {
    color: #999;
    text-decoration: line-through;
    font-size: 1.2rem;
    font-weight: 500;
}

.yeni-fiyat-detay {
    color: #A31D61;
    font-size: 1.8rem; /* Detayda fiyat kocaman olsun */
    font-weight: 800;
}
/* --- TAKTİK 2: STOK/İLGİ UYARISI (KITLIK PSİKOLOJİSİ) 🔥 --- */
.stok-ilgi-uyarisi {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff4e6; /* Çok açık turuncu zemin */
    border: 1px solid #ffe8cc;
    color: #d35400; /* Kiremit rengi yazı */
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    animation: nabiz 2s infinite; /* Hafif yanıp sönme efekti */
}

.stok-ilgi-uyarisi i {
    font-size: 1.1rem;
    color: #e67e22;
}

@keyframes nabiz {
    0% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(230, 126, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); }
}

/* --- TAKTİK 3: GÜVEN ROZETLERİ (TRUST BADGES) 🛡️ --- */
.guven-rozetleri-kapsayici {
    display: flex;
    justify-content: space-around; /* Eşit aralıklı */
    align-items: center;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.guven-madde {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 33%; /* 3 tane yan yana */
}

.guven-madde i {
    font-size: 1.5rem;
    color: #5d8a9e; /* Marka mavisi */
    margin-bottom: 8px;
}

.guven-madde span {
    font-size: 0.75rem;
    color: #555;
    font-weight: 600;
    line-height: 1.2;
}

/* Mobilde yazılar sığsın diye minik ayar */
@media (max-width: 480px) {
    .guven-madde span { font-size: 0.7rem; }
    .guven-madde i { font-size: 1.3rem; }
}
.whatsapp-sabit {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Sol altta dursun, Sepet butonu sağdaysa çakışmaz */
    background-color: #25D366;
    color: white;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    animation: zipla 2s infinite;
}

.whatsapp-sabit i {
    font-size: 24px;
}

.whatsapp-sabit:hover {
    background-color: #128C7E;
    transform: scale(1.05);
}

/* Mobilde sadece ikon görünsün, yazı yer kaplamasın */
@media (max-width: 480px) {
    .whatsapp-yazi { display: none; }
    .whatsapp-sabit { padding: 12px 14px; border-radius: 50%; }
}
/* ========================================================
   ZARİF KAMPANYA BANDI TASARIMI (MOBİL UYUMLU 📱)
   ======================================================== */

/* 1. Şeridin Kendisi */
.alt-sayac-bandi {
    background-color: #2d3436;
    color: #fff;
    padding: 10px 0; /* Masaüstünde de biraz incelttim */
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 3px solid #FFC90E; /* Çizgiyi incelttim */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    position: relative;
    z-index: 5;
}

/* 2. İçerik Düzeni */
.alt-sayac-icerik {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1rem; /* Yazı boyutu ideal */
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif; /* Daha okunaklı font */
}

/* 3. Sayaç Rakamları */
#sayacSure {
    color: #FFC90E;
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
}

/* 4. İkon Animasyonu */
.ikon-sallan {
    color: #FFC90E;
    font-size: 1.2rem;
    animation: donme 3s infinite linear; /* Yavaşça dönsün (kar tanesi) */
}

@keyframes donme {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 🔥 5. MOBİL İÇİN ZARİF AYAR (ÖNEMLİ KISIM) 🔥 */
@media (max-width: 480px) {
    .alt-sayac-bandi {
        padding: 8px 5px; /* Boşlukları çok azalttım */
        margin-bottom: 15px;
    }
    
    .alt-sayac-icerik {
        flex-direction: row; /* Yan yana kalsın (alt alta geçmesin) */
        flex-wrap: wrap; /* Sığmazsa kibarca aşağı kaydır */
        justify-content: center;
        gap: 5px;
        font-size: 0.8rem; /* Yazıyı küçülttüm */
        line-height: 1.4;
    }
    
    .ikon-sallan {
        font-size: 0.9rem; /* İkonu küçülttüm */
    }
    
    #sayacSure { 
        font-size: 0.85rem; /* Saati küçülttüm */
        padding: 1px 5px;
    }
}
/* --- DETAYLI FİYAT DÖKÜMÜ TASARIMI --- */
.fiyat-detay-satiri {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #555;
}

.fiyat-detay-satiri.indirim {
    color: #28a745; /* Yeşil Renk */
    font-weight: 600;
}

.fiyat-detay-satiri.toplam {
    border-top: 1px dashed #ccc;
    padding-top: 10px;
    margin-top: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #A31D61;
}

/* Ödeme ekranındaki kutu için */
.siparis-ozeti-kutu h4 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
/* --- CHARM UYARI KUTUSU TASARIMI --- */
.charm-uyari-kutu {
    background-color: #fff9e6; /* Çok açık sarı zemin */
    border-left: 5px solid #FFC90E; /* Sol tarafa marka sarısı çizgi */
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Hafif gölge */
    transition: transform 0.2s ease;
}

.charm-uyari-kutu:hover {
    transform: translateY(-2px); /* Üzerine gelince hafif zıplar */
}

.charm-uyari-kutu .ikon {
    font-size: 1.4rem;
    color: #FFC90E; /* İkon rengi */
    margin-top: 2px;
}

.charm-uyari-kutu .metin {
    font-size: 0.95rem;
    color: #444; /* Yazı rengi koyu gri (daha okunaklı) */
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.charm-uyari-kutu strong {
    color: #A31D61; /* "Lütfen Dikkat" yazısı marka pembesi */
    display: block;
    margin-bottom: 4px;
    font-size: 1rem;
}

.charm-uyari-kutu .alt-cizgili {
    border-bottom: 2px solid #FFC90E; /* Altı çizili vurgu */
    font-weight: 600;
    color: #333;
}
/* --- MOBİL İÇİN MİNİMAL CHARM UYARISI --- */
@media (max-width: 600px) {
    .charm-uyari-kutu {
        padding: 10px 12px; /* Boşlukları daralttık */
        gap: 10px;          /* İkonla yazı arasını kıstık */
        border-left-width: 4px; /* Çizgiyi biraz incelttik */
        margin-bottom: 15px;
        align-items: center; /* Ortaya hizaladık */
    }

    .charm-uyari-kutu .ikon {
        font-size: 1.2rem; /* İkonu biraz küçülttük */
        margin-top: 0;
    }

    .charm-uyari-kutu .metin {
        font-size: 0.8rem; /* Yazıyı telefona uygun hale getirdik */
        line-height: 1.3;  /* Satır arasını sıkılaştırdık */
    }

    .charm-uyari-kutu strong {
        font-size: 0.85rem;
        display: inline; /* Başlık artık ayrı satırda değil, yerden tasarruf! */
        margin-right: 4px;
    }
}
/* --- AKORDEON İÇİN ÖZEL SCROLL TASARIMI --- */
.akordeon-icerik::-webkit-scrollbar {
    width: 6px; /* Çubuğun inceliği */
}

.akordeon-icerik::-webkit-scrollbar-track {
    background: #f1f1f1; /* Arka plan rengi */
    border-radius: 4px;
}

.akordeon-icerik::-webkit-scrollbar-thumb {
    background: #FFC90E; /* Kaju Sarısı */
    border-radius: 4px;
}

.akordeon-icerik::-webkit-scrollbar-thumb:hover {
    background: #e0b000; /* Üzerine gelince koyulaşsın */
}
/* --- MOBİL VİTRİN KARTI GÖRÜNÜMÜ --- */
/* JavaScript 'aktif-kart' sınıfını ekleyince perde görünür olsun */
.ozel-secim-karti.aktif-kart .kart-secim-perdesi {
    opacity: 1 !important;
    visibility: visible !important;
    bottom: 0 !important;
    z-index: 99 !important; /* En üste çıksın */
    transform: translateY(0) !important;
    pointer-events: auto !important; /* Butonlara tıklanabilsin */
}
/* --- 🎡 KAJU FINAL PRO V3 ÇARK STİLLERİ --- */
.cark-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(93, 138, 158, 0.6);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.cark-container {
    background: #fff;
    padding: 15px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    width: 480px;
    height: 480px;
    box-shadow: 0 0 50px rgba(163, 29, 97, 0.3);
    border: 8px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cark-kapat {
    position: absolute;
    top: -50px; right: 0;
    font-size: 2.5rem; color: #fff; cursor: pointer;
    background: rgba(0,0,0,0.3);
    width: 40px; height: 40px; line-height: 35px;
    border-radius: 50%; text-align: center;
}

.cark-cerceve {
    width: 100%; height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 4px solid #A31D61;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

.cark-ok {
    position: absolute;
    top: -20px; left: 50%;
    transform: translateX(-50%);
    z-index: 20; font-size: 50px; color: #A31D61;
    filter: drop-shadow(0 4px 0px #fff);
}
.cark-ok::after { content: '▼'; }

.cark-govde {
    width: 100%; height: 100%;
    border-radius: 50%;
    position: relative;
    transition: transform 5s cubic-bezier(0.25, 0.1, 0.25, 1);
    
    background: conic-gradient(
        #dcd6f7 0deg 100deg,    /* PAS */
        #ffadad 100deg 180deg,  /* Sonraki Sipariş */
        #ffd6a5 180deg 240deg,  /* %5 İndirim */
        #fdffb6 240deg 290deg,  /* %10 İndirim */
        #caffbf 290deg 330deg,  /* Kargo */
        #9bf6ff 330deg 360deg   /* Hediye */
    );
}

/* --- YAZI POZİSYONLARI (GÜNCELLENDİ) --- */
.dilim-text {
    position: absolute;
    text-align: center;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.1;
    text-transform: uppercase;
    z-index: 5;
}

/* 1. PAS (Sağ Üst) */
.dt-pas {
    top: 25%; right: 18%;
    color: #6a4c93;
}

/* 2. SONRAKİ SİPARİŞ (Sağ Alt) */
.dt-sonraki {
    bottom: 20%; right: 25%;
    color: #c0392b;
    font-size: 0.8rem;
}

/* 3. %5 İNDİRİM (Sol Alt - DÜZELTİLDİ) 🛠️ */
/* Eskiden ortadaydı, şimdi sola (turuncu dilimin göbeğine) kaydırdım */
.dt-5 {
    bottom: 18%; left: 32%; 
    color: #d35400;
}

/* 4. %10 İNDİRİM (Tam Sol - DÜZELTİLDİ) 🛠️ */
/* Eskiden aşağıdaydı, şimdi tam sol sarı dilimin ortasına yukarı aldım */
.dt-10 {
    top: 55%; left: 10%; 
    transform: translateY(-50%); /* Dikey ortalama */
    color: #7f8c8d;
}

/* 5. KARGO BEDAVA (Sol Üst) */
.dt-kargo {
    top: 25%; left: 18%;
    color: #27ae60;
}

/* 6. HEDİYE KÜNYE (Tepe) */
.dt-hediye {
    top: 10%; left: 42%;
    transform: translateX(-50%) rotate(-15deg);
    color: #2980b9;
    font-size: 0.8rem;
}

.cark-arayuz {
    position: absolute;
    z-index: 30;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; height: 100px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    border: 5px solid #A31D61;
}

#carkCevirBtn {
    background: transparent; color: #A31D61; border: none;
    font-size: 1rem; font-weight: 900; cursor: pointer;
    width: 100%; height: 100%; border-radius: 50%;
}
#carkCevirBtn:disabled { color: #ccc; cursor: not-allowed; }

#carkSonucMesaj { 
    position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%);
    width: 320px;
    background: #fff; padding: 15px; border-radius: 15px;
    font-weight: bold; color: #A31D61; text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* =================================================================
   📱 MOBİL & TABLET UYUMLULUK MODU (DÜZELTİLMİŞ)
   ================================================================= */

@media screen and (max-width: 768px) {
    /* --- GENEL MOBİL AYARLARI --- */
    .cark-modal-overlay {
        /* display: flex;  <-- BU SATIRI SİLDİK! ARTIK JS AÇANA KADAR GİZLİ KALACAK */
        
        padding: 0;
        overflow: hidden; 
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    .cark-container {
        width: 90vw !important; 
        height: 90vw !important; 
        max-width: 380px !important;
        max-height: 380px !important;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 10vh; 
    }

    .cark-cerceve {
        border-width: 3px; 
    }

    .dilim-text {
        font-size: 0.75rem; 
        padding-top: 15px; 
    }
    
    .dilim-text span {
        margin-top: 10px;
        padding: 1px 3px;
    }

    /* --- KAPAT BUTONU --- */
    .cark-kapat {
        position: fixed; 
        top: auto;
        bottom: 8vh; 
        right: 50%;
        transform: translateX(50%); 
        background: #A31D61; 
        color: white;
        font-size: 2rem;
        width: 50px; height: 50px;
        line-height: 50px;
        border-radius: 50%;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        z-index: 100001; 
        opacity: 1;
    }
    
    .cark-kapat::after {
        content: 'Kapat';
        display: block;
        font-size: 12px;
        margin-top: -15px; 
        font-weight: bold;
    }

    /* --- SONUÇ MESAJI --- */
    #carkSonucMesaj {
        position: fixed;
        bottom: 18vh; 
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        font-size: 0.9rem;
        z-index: 100002;
    }

    .cark-arayuz {
        width: 70px; height: 70px;
    }
    #carkCevirBtn {
        font-size: 0.8rem;
    }
}

/* --- MİNİ EKRANLAR --- */
@media screen and (max-width: 360px) {
    .dilim-text { font-size: 0.65rem; } 
    .cark-container { width: 85vw !important; height: 85vw !important; }
}
/* =================================================================
   🚀 MOBİLDE RENK TOPU TİTREME & Z-INDEX SORUNU ÇÖZÜMÜ (KESİN)
   (Bunu style etiketinin EN ALTINA ekle)
   ================================================================= */

@media (max-width: 900px) {
    
    /* 1. HOVER (ÜZERİNE GELME) EFEKTİNİ MOBİLDE İPTAL ET */
    /* Mobilde parmak değince devasa büyümesin, olduğu yerde kalsın */
    .renk-swatch:hover {
        transform: none !important; /* Büyüme yok */
        z-index: 1 !important;      /* Öne fırlama yok */
        box-shadow: none !important;
        border: 2px solid #eee !important;
    }

    /* 2. SADECE "SEÇİLİ" OLANI ÖNE AL VE SABİTLE */
    /* Seçilen top hafif büyüsün ama titremesin */
    .renk-swatch.secili {
        z-index: 99999 !important; /* Her şeyin en üstünde dur */
        transform: scale(1.15) !important; /* Hafifçe büyük kalsın */
        position: relative !important;
        border-color: #5d8a9e !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    }

    /* 3. PATİ İKONUNU SABİTLE */
    /* Patinin titremesini önlemek için geçiş efektini kapatıyoruz */
    .renk-swatch.secili::before {
        transition: none !important; 
        opacity: 1 !important;
        transform: translateX(-50%) scale(1) rotate(0deg) !important;
        bottom: 125% !important;
    }

    /* 4. HOVER İLE AÇILAN ETİKETLERİ GİZLE */
    /* Mobilde parmak basılıyken çıkan o siyah/beyaz yazıları kapat */
    .renk-swatch:hover::after {
        display: none !important;
        opacity: 0 !important;
    }
}
/* =========================================
   🔥 EN ÇOK SATANLAR (VITRIN) TASARIMI
   ========================================= */
.cok-satanlar-bolumu {
    padding: 40px 20px;
    background: linear-gradient(to bottom, #ffffff, #f9f9f9); /* Hafif geçişli zemin */
    text-align: center;
    border-bottom: 1px solid #eee;
}

.baslik-kapsayici {
    margin-bottom: 30px;
}

.baslik-kapsayici h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 5px;
    font-family: 'Georgia', serif;
}

.baslik-kapsayici p {
    color: #777;
    font-size: 1rem;
}

/* Liste Yapısı (Mobilde Kaydırmalı, PC'de Grid) */
.cok-satanlar-listesi {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* PC'de alt satıra geçsin */
}

/* KART TASARIMI (Mevcut kartlara benziyor ama daha "Premium") */
.star-kart {
    width: 260px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); /* Daha yumuşak gölge */
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0;
    flex-shrink: 0; /* Mobilde büzülmesin */
}

.star-kart:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border-color: #5d8a9e;
}

/* Görsel */
.star-kart-img-alani {
    position: relative;
    height: 220px;
    overflow: hidden;
}

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

.star-kart:hover img {
    transform: scale(1.1); /* Resim hafif büyüsün */
}

/* ROZETLER */
.rozet-star {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #FFC90E;
    color: #333;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Bilgi Alanı */
.star-kart-bilgi {
    padding: 15px;
    text-align: left;
}

.star-kart h3 {
    font-size: 1rem;
    margin: 0 0 5px 0;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.star-fiyat {
    font-size: 1.2rem;
    font-weight: bold;
    color: #A31D61;
}

/* İncele Butonu */
.star-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background: #f4f4f4;
    color: #333;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.star-btn:hover {
    background: #5d8a9e;
    color: #fff;
}

/* 📱 MOBİL UYUMLULUK (NETFLIX TARZI KAYDIRMA) */
@media (max-width: 768px) {
    .cok-satanlar-listesi {
        justify-content: flex-start; /* Sola hizala */
        flex-wrap: nowrap; /* Asla alt satıra geçme */
        overflow-x: auto; /* Yana kaydır */
        padding-bottom: 20px; /* Scroll çubuğu payı */
        padding-left: 15px; /* Sol boşluk */
        
        /* Kaydırma hissini güzelleştir */
        -webkit-overflow-scrolling: touch; 
        scroll-snap-type: x mandatory;
    }

    .star-kart {
        scroll-snap-align: start; /* Kartlar tam dursun */
        width: 220px; /* Mobilde biraz daha dar */
    }
    
    .baslik-kapsayici h2 {
        font-size: 1.5rem;
    }
}
/* =========================================
   🔥 EN ÇOK SATANLAR (NETFLIX TARZI YATAY ŞERİT)
   ========================================= */

.cok-satanlar-listesi {
    display: flex !important;
    gap: 25px !important;
    
    /* 🔥 SİHİR BURADA: Alt satıra geçmeyi yasakla, yana kaydır */
    flex-wrap: nowrap !important; 
    overflow-x: auto !important; 
    
    justify-content: flex-start !important; /* Sola yasla */
    padding: 20px 40px !important; /* Kenar boşlukları */
    
    /* Kaydırma hissiyatı */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Kartların boyutu sabit kalsın, sıkışmasın */
.star-kart {
    flex-shrink: 0 !important; /* Asla büzülme */
    width: 250px !important;   /* Sabit genişlik */
    margin-bottom: 10px;       /* Alt gölge için pay */
}

/* --- KAYDIRMA ÇUBUĞU GÜZELLEŞTİRME (SCROLLBAR) --- */
/* Çubuğun kendisi */
.cok-satanlar-listesi::-webkit-scrollbar {
    height: 8px; /* İnce ve kibar olsun */
}

/* Çubuğun yolu (arkası) */
.cok-satanlar-listesi::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 10px;
    margin: 0 30px; /* Kenarlardan biraz içeride başlasın */
}

/* Hareket eden çubuk */
.cok-satanlar-listesi::-webkit-scrollbar-thumb {
    background: #5d8a9e; /* Senin Mavin */
    border-radius: 10px;
    cursor: pointer;
}

/* Çubuğun üzerine gelince */
.cok-satanlar-listesi::-webkit-scrollbar-thumb:hover {
    background: #A31D61; /* Senin Pemben */
}
/* =========================================
   VİTRİN KARTI ALT BAŞLIK AYARI ✨
   ========================================= */

/* 1. Başlık kutusunu esnek yap (Alt alta dizmek için) */
.vitrin-kart-baslik {
    display: flex !important;
    flex-direction: column !important; /* Yazıları alt alta al */
    justify-content: center !important;
    align-items: center !important;
    line-height: 1.2 !important; /* Satır aralığını ayarla */
    padding: 10px !important; /* Biraz daha geniş alan */
}

/* 2. "Özel Seri" Yazısının Tasarımı */
.ozel-seri-etiketi {
    font-size: 0.75em !important; /* Ana başlıktan daha küçük olsun */
    font-weight: 400 !important;  /* Daha ince bir yazı tipi */
    color: #FFC90E !important;    /* Kaju Sarısı (Dikkat çeker) */
    margin-top: 4px !important;   /* Üstteki yazıdan biraz uzaklaşsın */
    letter-spacing: 1px !important; /* Harfleri hafif açalım, havalı durur */
    text-transform: uppercase !important; /* HEPSİ BÜYÜK HARF */
}
/* --- HAFTANIN YILDIZLARI MOBİL DÜZELTMESİ --- */
@media screen and (max-width: 768px) {
    /* Resimlerin dev gibi olmasını engeller, kutuya sığdırır */
    #haftanin-yildizlari img, 
    .haftanin-yildizlari img,
    .yildiz-kart img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 8px; /* Kenarları tatlı dursun diye */
    }

    /* Mobilde kartların alt alta veya yan yana 2'li düzgün durmasını sağlar */
    #haftanin-yildizlari .urun-liste,
    .haftanin-yildizlari-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 0 10px;
    }

    /* Mobilde her kart ekranın %48'ini kaplasın (Yan yana 2 tane sığar) */
    #haftanin-yildizlari .urun-kart,
    .yildiz-kart {
        width: 48% !important; 
        margin-bottom: 15px !important;
    }
}
/* ========================================================
   📱 MOBİL: MİNYATÜR YATAY KAYDIRMALI VİTRİN
   ======================================================== */
@media screen and (max-width: 768px) {
    /* Kaydırma alanını daralt ve hizala */
    .cok-satanlar-listesi {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 12px !important;
        padding: 10px 15px 20px 15px !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    /* Kartları küçült (Ekranda 2 tanesi tam, 3.nün ucu görünecek şekilde) */
    .star-kart {
        flex: 0 0 160px !important; /* Kart genişliğini 160px'e sabitledik */
        width: 160px !important;
        min-width: 160px !important;
        margin-bottom: 5px !important;
        scroll-snap-align: start;
        border-radius: 12px !important;
    }

    /* Fotoğrafları minik kareler yap */
    .star-kart-img-alani {
        height: 140px !important; 
    }

    /* Yazıları ve butonları kibarlaştır */
    .star-kart-bilgi {
        padding: 8px !important;
    }

    .star-kart-bilgi h3 {
        font-size: 0.75rem !important;
        margin-bottom: 4px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .star-fiyat {
        font-size: 0.85rem !important;
        margin-bottom: 5px !important;
    }

    .star-btn {
        padding: 6px !important;
        font-size: 0.7rem !important;
        border-radius: 6px !important;
    }

    /* Rozetleri (Popüler/Yeni) küçült */
    .rozet-star, .star-kart-img-alani > div {
        font-size: 0.6rem !important;
        padding: 2px 6px !important;
        top: 5px !important;
        left: 5px !important;
    }

    /* Kaydırma çubuğunu mobilde gizle (daha temiz görünür) */
    .cok-satanlar-listesi::-webkit-scrollbar {
        display: none;
    }
}
/* ========================================================
   📱 MOBİL: ÖZELLİKLER BANDI (MİNYATÜR 2x2 KARELER)
   ======================================================== */
@media screen and (max-width: 768px) {
    /* Alt alta inmeyi iptal et, 2'li yan yana şık ızgara (grid) yap */
    .ozellikler-bandi {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Yan yana 2 kare */
        gap: 12px !important;
        padding: 20px 15px !important;
        background-color: transparent !important;
        border: none !important;
    }

    /* Kartları minik şirin kutucuklara çevir */
    .ozellik-kutu {
        margin: 0 !important;
        max-width: 100% !important;
        background: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 12px !important;
        padding: 15px 10px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* İkonları yuvarlak içine alıp küçültelim */
    .ozellik-kutu i {
        font-size: 1.2rem !important;
        margin-bottom: 8px !important;
        background: #e6f0f5 !important; /* Kaju Mavisi Soft Zemin */
        color: #5d8a9e !important;
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    /* Başlık ve yazıları kutuya sığacak kadar zarifleştir */
    .ozellik-kutu h3 {
        font-size: 0.75rem !important;
        margin-bottom: 4px !important;
        font-weight: 700 !important;
        color: #333 !important;
    }

    .ozellik-kutu p {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        color: #777 !important;
    }
}