/* /public_html/style.css 
   FİNAL SÜRÜM: GENİŞ EKRAN + MOBİL MENÜ KAYDIRMA + FIXLER
*/

/* 1. TEMEL AYARLAR VE SIFIRLAMA */
html, body { 
    margin: 0 !important; 
    padding: 0 !important; 
    overflow-x: hidden; /* Sadece gövde taşmasını engelle */
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f9f9f9; 
    color: #333; 
    font-size: 16px; 
    line-height: 1.6; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

/* GENİŞLİK AYARI (1500px WIDE) */
.container { 
    max-width: 1500px; 
    margin: 0 auto; 
    padding: 0 15px; 
    width: 96%; 
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; display: block; }

/* 2. DEĞİŞKENLER */
:root {
    --renk-arkaplan: #f9f9f9;
    --renk-beyaz: #ffffff;
    --renk-yazi: #333;
    --renk-baslik: #222;
    --renk-link: #007bff;
    --renk-link-hover: #0056b3;
    --renk-header-arkaplan: #ffffff;
    --renk-footer-arkaplan: #23282d;
    --renk-footer-yazi: #eee;
    --renk-kart-sinir: #eee;
    --renk-pembe: #ff3366;
    --golge-hafif: 0 4px 10px rgba(0,0,0,0.05);
    --golge-belirgin: 0 10px 20px rgba(0,0,0,0.1);
}

/* 3. HEADER */
.ust-kampanya-bandi { 
    background: linear-gradient(90deg, #6200ea, #9d00ff); 
    color: #fff; 
    padding: 8px 0; 
    text-align: center; 
    font-size: 13px; 
    margin-top: 0 !important; 
    display: block;
}
.kampanya-link { background: #fff; color: #6200ea; padding: 2px 10px; border-radius: 15px; font-weight: bold; font-size: 12px; margin-left: 10px; }

.roja-header { background: var(--renk-header-arkaplan); box-shadow: var(--golge-hafif); margin-bottom: 0; position: relative; z-index: 100; }
.header-orta { padding: 15px 0; border-bottom: 1px solid var(--renk-kart-sinir); }
.header-orta .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-logo-img { height: 60px; width: auto; margin: 0; }

.header-arama { flex: 1; max-width: 700px; } /* Geniş ekran için büyüttük */
.header-arama form { display: flex; background: #f1f1f1; border-radius: 8px; padding: 5px; }
.header-arama input { flex: 1; border: none; background: transparent; padding: 10px; outline: none; color: var(--renk-yazi); }
.header-arama button { background: var(--renk-pembe); color: #fff; border: none; width: 45px; border-radius: 6px; cursor: pointer; font-size: 18px; }

.header-aksiyonlar { display: flex; align-items: center; gap: 10px; }
.header-user-btn { font-size: 20px; color: var(--renk-yazi); padding: 8px; border: 1px solid var(--renk-kart-sinir); border-radius: 8px; cursor: pointer; background: transparent; }
.pro-lang-switcher a { padding: 5px 8px; margin-left: 3px; border: 1px solid var(--renk-kart-sinir); border-radius: 6px; font-size: 12px; font-weight: bold; color: var(--renk-yazi); }
.pro-lang-switcher a.active { background: var(--renk-pembe); color: #fff; border-color: var(--renk-pembe); }

.header-alt-menu { background: var(--renk-header-arkaplan); border-top: 1px solid var(--renk-kart-sinir); }
.header-alt-menu ul { display: flex; gap: 30px; padding: 15px 0; list-style: none; margin: 0; }
.header-alt-menu a { font-weight: 600; font-size: 15px; color: var(--renk-yazi); }
.header-alt-menu a:hover { color: var(--renk-pembe); }

/* 4. SLIDER */
.anasayfa-slider { width: 100%; height: 500px; margin-bottom: 30px; position: relative; z-index: 1; }
.anasayfa-slider .swiper, .anasayfa-slider .swiper-slide { height: 100%; }
.anasayfa-slider img { width: 100%; height: 100%; object-fit: cover; }
.swiper-button-next, .swiper-button-prev { color: #fff; background: rgba(0,0,0,0.3); width: 50px; height: 50px; border-radius: 50%; font-weight: bold; }

/* 5. BANNERLAR */
.dortlu-banner-alani, .ikili-banner-alani { margin: 30px 0; }
.banner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ikili-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.banner-kart, .ikili-kart { display: block; border-radius: 15px; overflow: hidden; transition: transform 0.3s; box-shadow: var(--golge-hafif); background: #000; }
.banner-kart:hover, .ikili-kart:hover { transform: translateY(-5px); }
.banner-kart img, .ikili-kart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placeholder-kart { background: #ddd; height: 200px; display: flex; justify-content: center; align-items: center; color: #777; font-weight: bold; }
.ikili-banner-alani .placeholder-kart { height: 350px; }

/* 6. VİTRİNLER (Ortak Yapı) */
.ozel-vitrin-wrapper, .coksatan-wrapper, .firsat-wrapper {
    background: var(--renk-beyaz); border-radius: 15px; padding: 25px; margin: 40px 0;
    display: flex; flex-direction: row-reverse; gap: 25px; border: 1px solid var(--renk-kart-sinir); align-items: center;
}
.firsat-vitrini { background: linear-gradient(90deg, #ff3366, #ff5277); border-radius: 20px; padding: 30px 0; margin: 40px 0; }
.firsat-vitrini .firsat-wrapper { background: transparent; border: none; padding: 0; margin: 0; }
.coksatan-vitrini { background: linear-gradient(135deg, #fdfbfd, #ffeef8); border-radius: 20px; padding: 30px 0; margin: 40px 0; border: 1px solid #ffe0f0; }
.coksatan-vitrini .coksatan-wrapper { background: transparent; border: none; padding: 0; margin: 0; }

.ozel-vitrin-banner, .firsat-banner, .coksatan-banner {
    width: 260px; min-width: 260px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.firsat-banner, .firsat-banner h3 { color: #fff; } .coksatan-banner { color: #555; }
.vitrin-ikon-wrapper img, .firsat-ikon-img, .madalya-ikon-img { width: 110px; margin-bottom: 15px; animation: swing 2s infinite; }
.ozel-vitrin-banner h3, .coksatan-banner h3 { font-size: 24px; font-weight: bold; margin-bottom: 20px; color: var(--renk-baslik); }
.firsat-banner h3 { font-size: 28px; font-weight: 800; margin-bottom: 25px; line-height: 1.3; }
.vitrin-buton, .coksatan-buton { display: inline-block; border: 1px solid var(--renk-pembe); color: var(--renk-pembe); padding: 10px 25px; border-radius: 20px; font-weight: bold; background: #fff; margin-top: 15px; }
.firsat-buton { background: #fff; color: var(--renk-pembe); padding: 10px 30px; border-radius: 25px; font-weight: bold; margin-top: 15px; }

.ozel-vitrin-slider, .firsat-slider, .coksatan-slider { flex: 1; overflow: hidden; padding: 15px !important; position: relative; }
.swiper-button-next-firsat, .swiper-button-prev-firsat, .swiper-button-next-coksatan, .swiper-button-prev-coksatan {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; cursor: pointer; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 18px; font-weight: bold;
}
.swiper-button-next-firsat, .swiper-button-prev-firsat { color: #fff; background: rgba(255,255,255,0.3); }
.swiper-button-next-coksatan, .swiper-button-prev-coksatan { color: #333; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.swiper-button-next-firsat, .swiper-button-next-coksatan { right: 10px; } .swiper-button-prev-firsat, .swiper-button-prev-coksatan { left: 10px; }

/* 7. ÜRÜN KARTI */
.urun-kart {
    background: var(--renk-beyaz); border: 1px solid var(--renk-kart-sinir); border-radius: 15px;
    overflow: hidden; transition: all 0.3s; height: 100%; display: flex; flex-direction: column;
    width: 100%; transform: translateZ(0); 
}
.urun-kart:hover { box-shadow: var(--golge-belirgin); transform: translateY(-5px); border-color: var(--renk-pembe); }

.urun-kart img {
    width: 100%; height: 240px !important; object-fit: contain !important; padding: 20px;
    background-color: var(--renk-beyaz); border-bottom: 1px solid #f9f9f9;
}
.urun-kart .resim-yok { width: 100%; height: 240px !important; background: #f4f4f4; display: flex; justify-content: center; align-items: center; color: #aaa; }

.urun-bilgi { padding: 20px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.urun-bilgi h3 {
    font-size: 15px; font-weight: 600; color: var(--renk-yazi); margin: 0 0 10px 0; height: 45px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.urun-fiyat-etiket { font-size: 18px; color: var(--renk-pembe); font-weight: bold; margin-bottom: 15px; display: block; }
.kart-button { display: block; width: 100%; padding: 10px 0; background-color: #f8f9fa; color: #555; border-radius: 10px; font-size: 14px; font-weight: bold; transition: 0.2s; }
.kart-button:hover { background-color: var(--renk-pembe); color: #fff; }
.swiper-slide { height: auto !important; display: flex; justify-content: center; padding-bottom: 20px; }
.swiper-slide .urun-kart { width: 100%; }

/* 8. ÜRÜN LİSTELEME */
.urunler-sayfa-layout { display: flex; gap: 30px; padding-bottom: 50px; align-items: flex-start; }
.urun-sidebar { width: 300px; flex-shrink: 0; background: var(--renk-beyaz); padding: 25px; border-radius: 15px; border: 1px solid var(--renk-kart-sinir); position: sticky; top: 20px; }
.sidebar-widget { margin-bottom: 35px; }
.sidebar-widget h3 { font-size: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; color: var(--renk-baslik); }
.kategori-listesi label { display: block; margin-bottom: 12px; cursor: pointer; font-size: 16px; color: var(--renk-yazi); transition: 0.2s; }
.kategori-listesi label:hover { color: var(--renk-link); }
.kategori-listesi input { margin-right: 10px; }
.fiyat-input-group { display: flex; gap: 10px; align-items: center; }
.fiyat-input-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; }
.filtre-uygula-btn { width: 100%; background: var(--renk-baslik); color: #fff; border: none; padding: 12px; border-radius: 5px; margin-top: 15px; cursor: pointer; font-weight: bold; }
.urun-main-content { flex: 1; }
.urun-toolbar { background: var(--renk-beyaz); padding: 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border: 1px solid #eee; }
.toolbar-sol span { font-weight: bold; color: var(--renk-baslik); }
.toolbar-sag select { padding: 10px 20px; border: 1px solid #ddd; border-radius: 5px; background: #fff; cursor: pointer; font-size: 14px; }

#urun-galeri-ajax { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 25px; width: 100%; }
.filtre-urunler { padding: 60px 0; }
.filtre-urunler h2 { text-align: center; font-size: 34px; margin-bottom: 40px; color: var(--renk-baslik); }
.kategori-filtre-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; }
.filtre-buton { background: var(--renk-beyaz); border: 1px solid #ddd; padding: 12px 25px; border-radius: 30px; font-size: 15px; font-weight: bold; color: var(--renk-yazi); cursor: pointer; transition: 0.3s; }
.filtre-buton.active { background: var(--renk-pembe); color: #fff; border-color: var(--renk-pembe); }

/* 9. DİKEY SAYAÇ */
.yuzen-sayac-sidebar {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 9995;
    background: linear-gradient(180deg, #ff3366 0%, #ff0055 100%); color: #fff; padding: 25px 10px;
    display: flex; flex-direction: column; align-items: center; gap: 10px; width: 90px;
    box-shadow: 0 0 25px rgba(255, 51, 102, 0.5); transition: all 0.3s; border: 2px solid rgba(255,255,255,0.2);
}
html[dir="ltr"] .yuzen-sayac-sidebar { left: 0; right: auto; border-radius: 0 20px 20px 0; }
html[dir="rtl"] .yuzen-sayac-sidebar { left: auto; right: 0; border-radius: 20px 0 0 20px; }
.ys-emoji-baslik { font-size: 28px; margin-bottom: 5px; animation: shake 3s infinite; }
.ys-grup { text-align: center; line-height: 1; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 8px; width: 100%; }
.ys-grup:last-child { border-bottom: none; }
.ys-sayi { display: block; font-size: 24px; font-weight: 900; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
.ys-yazi { display: block; font-size: 11px; opacity: 0.9; text-transform: uppercase; margin-top: 2px; }
.ys-btn { margin-top: 10px; background: #fff; color: #ff0055; width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); animation: pulse 2s infinite; }
.ys-btn:hover { transform: scale(1.1); background: #ffd700; color: #000; }

/* 10. YÜZEN KAMPANYA BUTONU */
.yuzen-kampanya-btn {
    position: fixed; bottom: 30px; z-index: 9990;
    background: linear-gradient(45deg, #6200ea, #ff3366); color: #fff; padding: 15px 30px; border-radius: 50px; font-weight: bold;
    box-shadow: 0 5px 20px rgba(98, 0, 234, 0.4); display: flex; align-items: center; gap: 10px; font-size: 16px;
    opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.yuzen-kampanya-btn.goster { opacity: 1; visibility: visible; transform: translateY(0); animation: kampanyaFilm 2s infinite; }
.yuzen-kampanya-btn:hover { transform: scale(1.05) translateY(-3px); color: #fff; }
html[dir="ltr"] .yuzen-kampanya-btn { left: 30px; right: auto; }
html[dir="rtl"] .yuzen-kampanya-btn { right: 30px; left: auto; }

/* 11. FOOTER, WHATSAPP & YUKARI ÇIK (SABİT VE DÜZGÜN) */
.site-footer { background: var(--renk-footer-arkaplan); color: var(--renk-footer-yazi); margin-top: 60px; padding: 60px 0 20px 0; text-align: left; }
.footer-icerik-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 50px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-sutun { flex: 1; min-width: 250px; }
.footer-sutun h3 { color: #fff; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 20px; }
.footer-sutun ul { list-style: none; padding: 0; } .footer-sutun li { margin-bottom: 12px; font-size: 15px; }
.footer-sutun a { color: #ccc; } .footer-sutun a:hover { color: #fff; }
.footer-copyright { text-align: center; margin-top: 25px; font-size: 14px; color: #aaa; }

/* WhatsApp Fix (Hata Yok) */
.whatsapp-bubble {
    position: fixed !important; bottom: 25px !important; right: 25px !important; z-index: 99999 !important;
    width: 65px !important; height: 65px !important;
    background-color: #25D366 !important; border-radius: 50% !important;
    display: flex !important; justify-content: center !important; align-items: center !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}
.whatsapp-bubble svg, .whatsapp-bubble i {
    width: 38px !important; height: 38px !important; font-size: 38px !important; color: #fff !important; fill: #fff !important; margin: 0 !important; display: block !important;
}

/* Yukarı Çık Fix */
#yukari-cik {
    display: none; position: fixed !important; bottom: 100px !important; right: 32px !important; z-index: 9998 !important;
    width: 50px !important; height: 50px !important;
    background-color: #222 !important; color: #fff !important; border: none !important;
    border-radius: 50% !important; cursor: pointer !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    transition: all 0.4s ease; opacity: 0; visibility: hidden; transform: translateY(20px);
}
#yukari-cik.goster { opacity: 1; visibility: visible; transform: translateY(0); }
#yukari-cik:hover { background-color: var(--renk-pembe) !important; transform: translateY(-5px) !important; }

/* RTL Konumlar (Farsça/Arapça için SOLA ALMA) */
html[dir="rtl"] .whatsapp-bubble { right: auto !important; left: 25px !important; }
html[dir="rtl"] #yukari-cik { right: auto !important; left: 32px !important; }

/* 12. MOBİL UYUM (MENU SCROLL VE DÜZEN) */
@media (max-width: 992px) {
    .container { width: 100%; padding: 0 10px; }
    .header-orta .container { flex-direction: column; gap: 15px; }
    .header-arama { width: 100%; max-width: 100%; order: 3; } .header-logo { order: 1; } .header-aksiyonlar { order: 2; width: 100%; justify-content: center; }
    
    /* Mobil Menü Kaydırma */
    .header-alt-menu { overflow-x: auto; -webkit-overflow-scrolling: touch; } 
    .header-alt-menu ul { width: max-content; display: flex; gap: 20px; padding: 15px 20px; white-space: nowrap; }
    .header-alt-menu::-webkit-scrollbar { display: none; }
    
    .anasayfa-slider { height: 250px; }
    .banner-grid { grid-template-columns: repeat(2, 1fr); } .ikili-grid { grid-template-columns: 1fr; }
    .ozel-vitrin-wrapper, .firsat-wrapper, .coksatan-wrapper, .footer-icerik-wrapper, .iletisim-wrapper, .urun-detay-wrapper, .hakkimizda-wrapper, .urunler-sayfa-layout { flex-direction: column; }
    .ozel-vitrin-banner, .firsat-banner, .coksatan-banner { width: 100%; min-width: 100%; flex-direction: row; justify-content: space-between; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #ddd; }
    .vitrin-ikon-wrapper img, .firsat-ikon-img, .madalya-ikon-img { width: 60px; margin: 0; }
    .urun-sidebar, .yuzen-sayac-sidebar { display: none; }
}
@media (max-width: 768px) {
    .urun-kart img { height: 160px !important; }
    #urun-galeri-ajax { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Animasyonlar */
@keyframes swing { 0% { transform: rotate(0deg); } 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
@keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes kampanyaFilm { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }
.yanip-sonen-yazi { display: inline-block; animation: kampanyaFilm 1.5s infinite ease-in-out; font-weight: bold; }