/* =========================================================
   ESSA TEMA KATMANI — logo paletinden turetilmis soft tema
   Yukleme sirasi: bootstrap > brkckmk > skstyle > TEMA > mobil
   Mevcut isaretlemeye dokunmadan gorunumu modernlestirir.
   =========================================================

   Palet (logodan):
     Lacivert  #3d4a5c  — ana marka rengi, metin ve butonlar
     Mercan    #ed6b6e  — sicak vurgu (aksiyon, kampanya)
     Sari      #f9ce69  — ikincil vurgu (hover, rozet)
     Mavi      #7fb2d9  — soft bilgi vurgusu
   ========================================================= */

:root {
    --lacivert:       #3d4a5c;
    --lacivert-koyu:  #2e3948;
    --lacivert-acik:  #55657c;
    --mercan:         #ed6b6e;
    --mercan-koyu:    #e05356;
    --sari:           #f9ce69;
    --mavi:           #7fb2d9;
    --mavi-koyu:      #5f97c4;

    --zemin:          #f7f8fa;
    --kart:           #ffffff;
    --kenar:          #e7eaf0;
    --kenar-koyu:     #d5dae3;
    --metin:          #3d4a5c;
    --soluk:          #8391a5;

    --yesil-bg:       #e7f6ec;
    --yesil:          #2e8b57;
    --kirmizi-bg:     #fdecec;
    --kirmizi:        #c94f52;

    --r:  12px;
    --r-kucuk: 8px;
    --golge:        0 1px 3px rgba(61, 74, 92, .07), 0 4px 14px rgba(61, 74, 92, .06);
    --golge-hover:  0 6px 22px rgba(61, 74, 92, .14);
    --gecis: .18s ease;
}

/* ---------- Genel ---------- */
body {
    background: var(--zemin);
    color: var(--metin);
}

a { color: var(--mavi-koyu); transition: color var(--gecis); }
a:hover { color: var(--mercan); text-decoration: none; }

::selection { background: var(--sari); color: var(--lacivert-koyu); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--zemin); }
::-webkit-scrollbar-thumb { background: var(--kenar-koyu); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--soluk); }

/* Sabit 1200px iskeleti akiskan hale getir */
#content {
    width: 100%;
    max-width: 1230px;
    border-right: 0;
    padding: 0 15px;
}

/* ---------- Ust bar / Header ---------- */
.headerTop {
    background: #fff;
    border-bottom: 1px solid var(--kenar);
}

header.noMobile { box-shadow: 0 1px 0 var(--kenar); background: #fff; }

.navbar-brand img { height: 96px !important; width: auto; }

/* Kategori + menu seridi: parlak mavi yerine lacivert */
.headerBottom {
    background: var(--lacivert) !important;
    box-shadow: 0 6px 18px rgba(46, 57, 72, .18);
}

.headerBottom .nav-link,
.headerMenu .nav-link {
    color: #fff !important;
    font-weight: 500;
    letter-spacing: .3px;
    padding: 14px 16px;
    transition: background var(--gecis), color var(--gecis);
    border-radius: 0;
}

.headerMenu .nav-link:hover { background: rgba(255, 255, 255, .08); color: var(--sari) !important; }

.anaKategorilerMenusu {
    background: var(--mercan) !important;
    color: #fff !important;
    border-radius: 0;
    font-weight: 600;
}

.anaKategorilerMenusu:hover { background: var(--mercan-koyu) !important; }

/* Kategori acilir listesi */
#kategoriMenu,
.headerBottomDropdown .dropdown-menu,
.ddUrunlerList {
    border: 1px solid var(--kenar) !important;
    border-radius: 0 0 var(--r) var(--r) !important;
    box-shadow: var(--golge-hover) !important;
    overflow: hidden;
}

#kategoriMenu a,
.ddUrunlerList a {
    color: var(--metin) !important;
    padding: 10px 14px !important;
    transition: background var(--gecis), padding-left var(--gecis);
    border-bottom: 1px solid var(--zemin);
}

#kategoriMenu a:hover,
.ddUrunlerList a:hover {
    background: var(--zemin) !important;
    color: var(--lacivert) !important;
    padding-left: 18px !important;
}

/* ---------- Arama (UX) ---------- */
.topArama {
    background: var(--zemin);
    border: 2px solid var(--kenar);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis);
}

.topArama:focus-within {
    background: #fff;
    border-color: var(--mavi);
    box-shadow: 0 0 0 4px rgba(127, 178, 217, .18);
}

.topArama .form-control {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px 20px;
    font-size: 15px;
    color: var(--metin);
}

.topArama .form-control::placeholder { color: var(--soluk); }

.topArama .btn,
#btnSearch {
    background: var(--lacivert) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    margin: 4px;
    padding: 8px 26px;
    font-weight: 600;
    letter-spacing: .3px;
    transition: background var(--gecis), transform var(--gecis);
}

.topArama .btn:hover,
#btnSearch:hover { background: var(--mercan) !important; }

.topArama .btn:active { transform: scale(.97); }

/* Canli arama sonuc paneli */
#arama_sonuclari {
    background: #fff !important;
    border: 1px solid var(--kenar);
    border-radius: var(--r) !important;
    box-shadow: var(--golge-hover);
    margin-top: 8px;
    min-width: 320px;
    overflow: hidden;
}

#arama_sonuclari:empty { display: none; }

#arama_sonuclari ul { list-style: none; margin: 0; padding: 0; }

#arama_sonuclari li {
    border: 0 !important;
    border-bottom: 1px solid var(--zemin) !important;
    margin: 0 !important;
    padding: 0 !important;
}

#arama_sonuclari li:last-child { border-bottom: 0 !important; }

#arama_sonuclari li:hover { background: var(--zemin) !important; }

.cs-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--metin) !important;
    text-decoration: none;
}

.cs-resim {
    width: 46px;
    height: 46px;
    flex: none;
    object-fit: cover;
    border-radius: var(--r-kucuk);
    border: 1px solid var(--kenar);
    background: var(--zemin);
}

.cs-bilgi { min-width: 0; flex: 1; }

.cs-ad {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-kod { font-size: 12px; color: var(--soluk); margin-top: 2px; }

.cs-rozet {
    flex: none;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.cs-var { background: var(--yesil-bg); color: var(--yesil); }
.cs-yok { background: var(--kirmizi-bg); color: var(--kirmizi); }

.cs-tumu {
    display: block;
    text-align: center;
    padding: 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mavi-koyu) !important;
    background: var(--zemin);
    border-top: 1px solid var(--kenar);
}

.cs-tumu:hover { background: var(--kenar); color: var(--lacivert) !important; }

.cs-bos {
    padding: 22px 16px;
    text-align: center;
    color: var(--soluk);
    font-size: 13.5px;
}

/* ---------- Slider / ana sayfa ---------- */
.homeSlider {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--golge);
}

.homeImg img { border-radius: var(--r); }

/* ---------- Urun kartlari ---------- */
.product {
    border: 1px solid var(--kenar) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--golge);
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
    background: #fff;
}

.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--golge-hover);
    border-color: var(--kenar-koyu) !important;
}

.product .pic img { transition: transform .35s ease; }
.product:hover .pic img { transform: scale(1.04); }
.product .pic { overflow: hidden; }

.product .caption .kod {
    color: var(--soluk);
    font-size: 12.5px;
    letter-spacing: .4px;
}

.product .caption .name a { color: var(--metin); font-weight: 500; }
.product .caption .name a:hover { color: var(--mercan); }

.product .caption .stok,
.stokSatir {
    background: var(--yesil-bg);
    color: var(--yesil);
    border-radius: 0 0 var(--r) var(--r);
    font-weight: 600;
}

/* ---------- Breadcrumb / baslik seritleri ---------- */
.breadcrumb {
    background: transparent;
    padding: 12px 0;
}

.breadcrumb a { color: var(--soluk); }
.breadcrumb a:hover { color: var(--lacivert); }

/* ---------- Urun detay ---------- */
.detayBaslik h1 {
    color: var(--lacivert);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
}

.detayKod { color: var(--soluk); font-size: 14px; }

.detayFiyat, .urunDetayFiyat { color: var(--lacivert); font-weight: 700; }

.detayStokDurumu .aktif {
    background: var(--yesil-bg);
    color: var(--yesil);
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 600;
}

.detayStokDurumu .pasif {
    background: #fdf3dc;
    color: #a97b12;
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 600;
}

.urunDetayBilgiler {
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    background: #fff;
    box-shadow: var(--golge);
    padding: 18px 20px;
}

.urunDetayLabel { color: var(--soluk); }

.detayAciklama { color: var(--lacivert-acik); }

/* Galeri kucuk resimleri */
.lSSlideOuter .lSPager.lSGallery img {
    border-radius: var(--r-kucuk);
    border: 2px solid transparent;
    transition: border-color var(--gecis);
}

.lSSlideOuter .lSPager.lSGallery li.active img,
.lSSlideOuter .lSPager.lSGallery li:hover img { border-color: var(--mavi); }

/* Teklif Al / aksiyon butonlari */
.btn-primary,
.btn-success,
input[type="submit"].btn,
button[type="submit"].btn {
    background: var(--mercan) !important;
    border-color: var(--mercan) !important;
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 10px 26px;
    transition: background var(--gecis), transform var(--gecis), box-shadow var(--gecis);
    box-shadow: 0 4px 14px rgba(237, 107, 110, .3);
}

.btn-primary:hover,
.btn-success:hover {
    background: var(--mercan-koyu) !important;
    border-color: var(--mercan-koyu) !important;
    box-shadow: 0 6px 18px rgba(237, 107, 110, .4);
}

.btn-primary:active { transform: scale(.97); }

.btn-outline-secondary {
    border-radius: 999px !important;
}

/* Modal / teklif formu */
.modal-content {
    border: 0;
    border-radius: var(--r);
    box-shadow: 0 24px 64px rgba(46, 57, 72, .28);
}

.modal-header {
    background: var(--lacivert);
    color: #fff;
    border-radius: var(--r) var(--r) 0 0;
}

.modal-header .close { color: #fff; opacity: .8; text-shadow: none; }

.modal-body .form-control,
.form-control {
    border: 1.5px solid var(--kenar-koyu);
    border-radius: var(--r-kucuk);
    color: var(--metin);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

.form-control:focus {
    border-color: var(--mavi);
    box-shadow: 0 0 0 4px rgba(127, 178, 217, .16);
}

/* ---------- Sol kategori listesi (masaustu) ---------- */
.left-list {
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    background: #fff;
    box-shadow: var(--golge);
    overflow: hidden;
}

.left-list a { color: var(--metin); transition: background var(--gecis), padding-left var(--gecis); }
.left-list a:hover { background: var(--zemin); color: var(--lacivert); }

/* ---------- Footer ---------- */
footer {
    background: var(--lacivert-koyu) !important;
    color: #b9c2cf;
}

footer h4 {
    color: #fff;
    font-size: 15px;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 14px;
    position: relative;
    padding-bottom: 10px;
}

footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: var(--sari);
}

footer a { color: #b9c2cf !important; transition: color var(--gecis), padding-left var(--gecis); }
footer a:hover { color: var(--sari) !important; }

footer ul li a:hover { padding-left: 4px; }

.fLogo, .fTescilliMarka, .fKatalog { border-color: rgba(255, 255, 255, .1) !important; }

.copyright {
    background: var(--lacivert-koyu);
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: var(--soluk);
}

.copyright a { color: #b9c2cf !important; }

/* ---------- Sabit butonlar (WhatsApp / yukari) ---------- */
.araButton {
    background: var(--lacivert) !important;
    box-shadow: var(--golge-hover);
    transition: background var(--gecis), transform var(--gecis);
}

.araButton:hover { background: var(--mercan) !important; transform: translateY(-2px); }

.wpButton .wpText { border-radius: 999px; }

/* ---------- Mobil basliklar ---------- */
.mobileHeader { border-bottom: 1px solid var(--kenar) !important; }

.mobileHeader i {
    border: 1px solid var(--kenar) !important;
    background: var(--zemin) !important;
    color: var(--lacivert);
    border-radius: var(--r-kucuk) !important;
}

.mobileSearch .form-control { border-color: var(--kenar) !important; }
.mobileSearch .go { color: var(--lacivert) !important; }

.mobileLeftCategoriesList .leftMobileMenuTitle {
    color: var(--soluk);
    font-size: 12px;
    letter-spacing: .8px;
}

.mobileLeftCategoriesList ul li { border-color: var(--zemin) !important; }
.mobileLeftCategoriesList ul li a { color: var(--metin) !important; }
.mobileLeftCategoriesList .leftMenuTop { color: var(--lacivert) !important; }

/* ---------- Siralama secimi / kucuk kontroller ---------- */
select,
select.form-control {
    border: 1.5px solid var(--kenar-koyu);
    border-radius: var(--r-kucuk);
    padding: 8px 12px;
    background: #fff;
    color: var(--metin);
}

/* ---------- Sayfa icerigi ---------- */
.pageContent { line-height: 1.7; color: var(--lacivert-acik); }

h1, h2, h3, h4 { color: var(--lacivert); }

/* Eski parlak maviyi kalan yerlerde yumusat */
.text-blue { color: var(--mavi-koyu) !important; }

/* Kategori dropdown sarmalayicisi: gri hap yerine seffaf, mercan buton one ciksin */
.headerBottom .dropdown {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    max-width: 300px;
}

.headerBottom .dropdown .anaKategorilerMenusu {
    border-radius: var(--r-kucuk) var(--r-kucuk) 0 0 !important;
    padding: 14px 18px;
}

header .dropdown-menu li a { color: var(--metin); }

header .dropdown-menu li a:hover {
    background: var(--zemin) !important;
    color: var(--lacivert) !important;
}

header .dropdown-menu li a i { color: var(--mercan) !important; }

/* Sekmeler (nav-pills) */
.nav-pills { border-bottom-color: var(--kenar) !important; }

.nav-pills .nav-link {
    border-bottom-color: var(--kenar) !important;
    color: var(--soluk);
}

.nav-pills .nav-link.active {
    border-bottom-color: var(--lacivert) !important;
    background: var(--lacivert) !important;
}

/* Footer eski mavi kalintilari */
.footer-bottom a:hover { color: var(--sari) !important; }

.footer-bottom .fast-links h4,
.footer-bottom h4 { color: #fff !important; }

.numara, .numara a { color: var(--sari) !important; }

/* =========================================================
   2. ASAMA: megamenu, klavyeli arama, footer, breadcrumb,
   urun detay (galeri + bilgi + varyasyon), ana sayfa kartlari
   ========================================================= */

/* ---------- Canli arama: klavye vurgusu ---------- */
.cs-satir.cs-aktif,
#arama_sonuclari li .cs-satir.cs-aktif {
    background: var(--zemin);
    box-shadow: inset 3px 0 0 var(--mercan);
}

/* ---------- Megamenu ---------- */
.megaMenu {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1000;
    display: flex !important;
    width: 860px;
    max-width: calc(100vw - 30px);
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: 0 var(--r) var(--r) var(--r);
    box-shadow: 0 24px 60px rgba(46, 57, 72, .22);
    overflow: hidden;
}

.megaMenu[style*="display:none"],
.megaMenu[style*="display: none"] { display: none !important; }

.megaSol {
    flex: 0 0 280px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: var(--zemin);
    border-right: 1px solid var(--kenar);
    max-height: 480px;
    overflow-y: auto;
}

.megaSol .megaAna a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 18px;
    color: var(--metin) !important;
    font-weight: 500;
    font-size: 14px;
    transition: background var(--gecis), color var(--gecis);
}

.megaSol .megaAna a i { color: var(--soluk); transition: transform var(--gecis), color var(--gecis); }

.megaSol .megaAna.aktif a,
.megaSol .megaAna a:hover {
    background: #fff;
    color: var(--lacivert) !important;
    box-shadow: inset 3px 0 0 var(--mercan);
}

.megaSol .megaAna.aktif a i { color: var(--mercan); transform: translateX(3px); }

.megaSag { flex: 1; position: relative; }

.megaPanel {
    display: flex;
    gap: 22px;
    padding: 22px 24px;
    min-height: 100%;
}

.megaAltlar { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.megaPanelBaslik {
    font-size: 16px;
    font-weight: 600;
    color: var(--lacivert);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--sari);
}

.megaAltlar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 18px;
}

.megaAltlar ul li a {
    display: block;
    padding: 6px 0;
    font-size: 13.5px;
    color: var(--lacivert-acik) !important;
    transition: color var(--gecis), padding-left var(--gecis);
}

.megaAltlar ul li a:hover { color: var(--mercan) !important; padding-left: 4px; }

.megaBos { color: var(--soluk); font-size: 13.5px; padding: 8px 0; }

.megaTumu {
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mavi-koyu) !important;
}

.megaTumu:hover { color: var(--mercan) !important; }

/* 1:1 kategori gorseli */
.megaGorsel {
    flex: 0 0 200px;
    align-self: flex-start;
}

.megaGorsel img,
.megaGorsel .megaGorselYok {
    display: block;
    width: 200px;
    height: 200px;             /* 1:1 */
    object-fit: cover;
    border-radius: var(--r);
    border: 1px solid var(--kenar);
    background: var(--zemin);
    transition: transform var(--gecis), box-shadow var(--gecis);
}

.megaGorsel a:hover img { transform: scale(1.03); box-shadow: var(--golge-hover); }

.megaGorselYok {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--kenar-koyu);
    font-size: 40px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    background: #fff !important;
    border-bottom: 1px solid var(--kenar);
    padding: 0 !important;
    margin-bottom: 22px;
    border-radius: 0;
}

.breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 12px 0;
    list-style: none;
}

.breadcrumb-item { font-size: 13px; }

.breadcrumb-item a { color: var(--soluk) !important; }
.breadcrumb-item a:hover { color: var(--mercan) !important; }

.breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    color: var(--kenar-koyu);
    padding: 0 10px;
    font-size: 15px;
}

.breadcrumb-item.active a {
    color: var(--lacivert) !important;
    font-weight: 600;
    pointer-events: none;
    display: inline-block;
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* ---------- Urun detay: galeri ---------- */
.thumbnail {
    border: 1px solid var(--kenar) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--golge);
    padding: 10px !important;
    background: #fff;
}

.thumbnail .carousel-inner { border-radius: var(--r-kucuk); overflow: hidden; }

.carousel-control-prev,
.carousel-control-next {
    width: 40px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(46, 57, 72, .55) !important;
    border-radius: 50%;
    margin: 0 10px;
    opacity: 0;
    transition: opacity var(--gecis), background var(--gecis);
}

.thumbnail:hover .carousel-control-prev,
.thumbnail:hover .carousel-control-next { opacity: 1; }

.carousel-control-prev:hover,
.carousel-control-next:hover { background: var(--mercan) !important; }

/* Iletisim kutusu (detayli bilgi al) */
.alert-warning {
    background: #fff !important;
    border: 1px solid var(--kenar) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--golge);
    color: var(--metin) !important;
}

.alert-warning p { color: var(--lacivert) !important; }

.teklif .fancy.button {
    border: 0;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    background: var(--lacivert);
    transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis);
}

.teklif .fancy.button:hover { background: var(--mercan); transform: translateY(-1px); box-shadow: var(--golge-hover); }

.teklif .fancy.button i { margin-right: 6px; }

/* ---------- Urun detay: aciklama + bilgi kutusu ---------- */
.detayAciklama ul, .detayAciklama { padding-left: 0; }

.aciklamaSatir {
    list-style: none;
    padding: 9px 0 9px 24px;
    position: relative;
    border-bottom: 1px dashed var(--kenar);
    color: var(--lacivert-acik);
    line-height: 1.55;
}

.aciklamaSatir::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 9px;
    color: var(--mavi-koyu);
    font-weight: 700;
}

.aciklamaSatir:last-child { border-bottom: 0; }

.urunBilgiKutu {
    border: 1px solid var(--kenar) !important;
    border-radius: var(--r) !important;
    background: #fff;
    box-shadow: var(--golge);
    padding: 20px !important;
    margin-top: 10px;
}

.urunBilgiBaslik { width: 100%; }

.urunBilgiBaslik h3 {
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--lacivert);
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--sari);
}

.urunBilgiKutu .sutun {
    width: 50%;
    padding: 9px 4px;
    font-size: 14px;
    border-bottom: 1px solid var(--zemin);
}

.urunBilgiKutu .sutun:nth-child(odd) { color: var(--soluk); }
.urunBilgiKutu .sutun:nth-child(even) { color: var(--metin); font-weight: 500; }

.urunBilgiKutu .sutun a { color: var(--mavi-koyu) !important; font-weight: 600; }
.urunBilgiKutu .sutun a:hover { color: var(--mercan) !important; }

/* ---------- Varyasyonlar ---------- */
.vrBlok {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    box-shadow: var(--golge);
    padding: 18px;
}

.vrBaslik {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--lacivert);
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 2px solid var(--sari);
}

.vrSayi {
    background: var(--lacivert);
    color: #fff;
    font-size: 12px;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.vrAciklama { color: var(--soluk); font-size: 13px; margin: 8px 0 14px; }

.vrListe {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 4px;
}

.vr {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--kenar);
    border-radius: var(--r-kucuk);
    background: #fff;
    transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}

.vr:hover {
    border-color: var(--mavi);
    box-shadow: var(--golge-hover);
    transform: translateY(-1px);
}

.vr.vrAktif {
    border-color: var(--mercan);
    background: #fff8f8;
    box-shadow: inset 3px 0 0 var(--mercan);
}

.vrResim {
    width: 58px;
    height: 58px;
    flex: none;
    object-fit: cover;
    border-radius: var(--r-kucuk);
    border: 1px solid var(--kenar);
    background: var(--zemin);
}

.vrResimYok {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kenar-koyu);
    font-size: 20px;
}

.vrBilgi { flex: 1; min-width: 0; }

.vrAd {
    font-size: 13px;
    font-weight: 600;
    color: var(--metin);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vrAd.vrUyari { color: var(--kirmizi); }

.vrEtiketler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.vrChip {
    font-size: 11px;
    font-weight: 600;
    color: var(--lacivert-acik);
    background: var(--zemin);
    border: 1px solid var(--kenar);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

.vrChip.vrChipAktif {
    background: var(--mercan);
    border-color: var(--mercan);
    color: #fff;
}

.vrSag { flex: none; text-align: right; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }

.vrStok {
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

.vrStok.vrVar { background: var(--yesil-bg); color: var(--yesil); }
.vrStok.vrYok { background: var(--kirmizi-bg); color: var(--kirmizi); }

.vrFiyat { font-size: 13px; font-weight: 700; color: var(--lacivert); white-space: nowrap; }
.vrFiyat small { font-weight: 500; color: var(--soluk); }
.vrFiyat.vrFiyatSor { color: var(--soluk); font-weight: 600; }

/* KDV notu */
.kdvNotu {
    background: var(--zemin) !important;
    border: 1px dashed var(--kenar-koyu) !important;
    border-radius: var(--r) !important;
    color: var(--soluk) !important;
    font-size: 13px;
    line-height: 1.6;
}

.kdvNotu i { color: var(--mavi); font-size: 20px; display: block; margin-bottom: 8px; }

/* ---------- Footer okunabilirlik ---------- */
.footer-bottom { background: transparent !important; }

footer, footer p, footer span, footer li, .footer-about, .footer-bottom {
    color: #aeb9c8;
}

footer strong, footer b { color: #fff; }

/* Koyu zeminde koyu logo kaybolmasin: beyaz kart icinde goster */
.footer-logo {
    display: inline-block;
    background: #fff;
    padding: 14px 20px;
    border-radius: var(--r);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.footer-logo img { height: 72px !important; width: auto; display: block; }

footer h5, .footer-social-icons h5, .footer-general-content h5 {
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .8px;
    margin: 18px 0 12px;
    position: relative;
    padding-bottom: 8px;
}

footer h5::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--sari);
}

.footer-social-icons .icons { display: flex; gap: 10px; }

.footer-social-icons .icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
    transition: background var(--gecis), transform var(--gecis);
}

.footer-social-icons .icons a:hover { background: var(--mercan); transform: translateY(-2px); }

.footer-social-icons .icons img { width: 18px; height: 18px; }

.footer-contact a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.footer-contact i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    background: rgba(255, 255, 255, .08);
    border-radius: var(--r-kucuk);
}

.footer-contact i img { width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: .9; }

.footer-contact span { display: block; font-size: 12px; color: #8a97a8; }
.footer-contact strong { font-size: 16px; color: #fff; }
.footer-contact a:hover strong { color: var(--sari); }

.fast-links ul li a, .footer-menu-content a {
    font-size: 13.5px;
    line-height: 1.5;
    padding: 5px 0;
    display: inline-block;
}

/* ---------- Ana sayfa kategori kartlari ---------- */
.homeImg .hizala { margin-bottom: 22px; }

.homeImg .box {
    display: block;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--golge);
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.homeImg .box:hover {
    transform: translateY(-5px);
    box-shadow: var(--golge-hover);
    border-color: var(--kenar-koyu);
}

.homeImg .bannerImage { position: relative; }

.homeImg .bannerImage img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.homeImg .box:hover .bannerImage img { transform: scale(1.05); }

.bannerBaslik {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    padding: 12px 10px;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: .3px;
    text-align: center;
    color: var(--lacivert) !important;
    background: #fff !important;
    border-top: 1px solid var(--kenar);
    transition: background var(--gecis), color var(--gecis);
}

.bannerBaslik i { color: var(--mercan); transition: transform var(--gecis); }

.homeImg .box:hover .bannerBaslik { background: var(--lacivert) !important; color: #fff !important; }
.homeImg .box:hover .bannerBaslik i { color: var(--sari); transform: translateX(4px); }

/* ---------- Megamenu mobil daralt ---------- */
@media screen and (max-width: 991px) {
    .megaMenu { width: calc(100vw - 30px); }
    .megaGorsel { display: none; }
    .megaAltlar ul { columns: 1; }
}

/* =========================================================
   3. ASAMA: varyasyon kartlari v2 (dar sutuna uygun),
   footer yeniden dizayn, kucuk duzeltmeler
   ========================================================= */

/* ---------- Varyasyon kartlari v2 ---------- */
/* Dar sag sutunda tek satira sigmayan icerik iki katli duzene gecer:
   ust: gorsel + ad + chipler, alt serit: stok --- fiyat            */

.vrBlok { position: sticky; top: 16px; }

.vr,
.vr:hover { text-decoration: none !important; }

.vr { flex-wrap: wrap; row-gap: 0; }

.vrBilgi { display: block; }

.vrResim { width: 52px; height: 52px; }

.vrSag {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    border-top: 1px dashed var(--kenar);
    margin-top: 10px;
    padding-top: 9px;
}

.vr.vrAktif .vrSag { border-top-color: #f3d4d5; }

.vrListe { max-height: 520px; }

/* Kaydirma cubugu inceltilmis */
.vrListe::-webkit-scrollbar { width: 6px; }
.vrListe::-webkit-scrollbar-thumb { background: var(--kenar-koyu); border-radius: 6px; }

/* ---------- Fancybox ince ayar ---------- */
.fancybox__backdrop { background: rgba(30, 38, 50, .92); }

.carousel-item a { display: block; cursor: zoom-in; }

/* ---------- FOOTER yeniden dizayn ---------- */
footer {
    background: linear-gradient(180deg, #333f4f 0%, #2a3442 100%) !important;
    border-top: 0;
    position: relative;
    margin-top: 48px;
}

/* Ust renk seridi: logo paleti */
footer::before {
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--mercan) 0 25%, var(--sari) 25% 50%, var(--mavi) 50% 75%, var(--lacivert-acik) 75% 100%);
}

.footer-bottom { padding: 44px 0 20px; }

.footer-info > [class*="col-"] { margin-bottom: 26px; }

/* Metin hiyerarsisi */
footer, footer p, footer span, footer li, .footer-about {
    color: #c3cdda;
    font-size: 13.5px;
    line-height: 1.7;
}

footer strong, footer b { color: #fff; }

footer a { color: #c3cdda !important; }
footer a:hover { color: var(--sari) !important; }

/* Logo karti */
.footer-logo {
    background: #fff;
    padding: 12px 18px;
    border-radius: var(--r);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

.footer-about { margin-top: 16px; }

.footer-about a { color: var(--sari) !important; }
.footer-about a:hover { text-decoration: underline; }

/* Bolum basliklari */
footer h4, footer h5 {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 16px;
    padding-bottom: 10px;
    position: relative;
}

footer h4::after, footer h5::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: var(--sari);
}

/* Iletisim kartlari */
.footer-contact a {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-kucuk);
    padding: 10px 14px;
    margin-bottom: 10px;
    transition: background var(--gecis), border-color var(--gecis), transform var(--gecis);
}

.footer-contact a:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(249, 206, 105, .4);
    transform: translateX(3px);
}

.footer-contact i { background: rgba(249, 206, 105, .15); }
.footer-contact i img { filter: brightness(0) invert(1); }
.footer-contact span { color: #8d9aac; font-size: 11.5px; letter-spacing: .3px; }
.footer-contact strong { font-size: 15.5px; letter-spacing: .3px; }

/* Sosyal ikonlar */
.footer-social-icons { margin-top: 20px; }

.footer-social-icons .icons a {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
}

.footer-social-icons .icons a:hover {
    background: var(--mercan);
    border-color: var(--mercan);
}

/* Link listeleri */
footer ul { margin: 0; padding: 0; list-style: none; }

.fast-links ul li a,
.footer-menu-content ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    transition: color var(--gecis), padding-left var(--gecis);
}

.fast-links ul li a::before,
.footer-menu-content ul li a::before {
    content: "\203A";
    color: var(--mercan);
    font-weight: 700;
    transition: transform var(--gecis);
}

.fast-links ul li a:hover,
.footer-menu-content ul li a:hover { padding-left: 5px; }

.fast-links ul li a:hover::before { transform: translateX(3px); }

.footer-menu-content ul li a i { display: none; } /* eski sepet ikonlarini gizle */

/* Kategori akordiyon basliklari (linkler sutunu) */
.footer-menu-content .accordion-button,
.links-info h5 { color: #fff; }

/* Copyright */
.copyright {
    background: #232c38 !important;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: #7f8ca0 !important;
    font-size: 12.5px;
    text-align: center;
    padding: 16px 10px;
    letter-spacing: .3px;
}

.copyright a { color: #aeb9c8 !important; font-weight: 600; }
.copyright a:hover { color: var(--sari) !important; }

/* fKatalog / fTescilliMarka eski ayraclar */
.fLogo, .fTescilliMarka, .fKatalog { border-color: rgba(255, 255, 255, .08) !important; }

/* Mobilde footer ortalama: h4/h5 alt cizgisi ortaya */
@media screen and (max-width: 768px) {
    footer h4::after, footer h5::after { left: 50%; transform: translateX(-50%); }
    .footer-logo { margin: 0 auto; }
    .footer-contact a { justify-content: center; }
    .fast-links ul li a, .footer-menu-content ul li a { justify-content: center; }
    .footer-social-icons .icons { justify-content: center; }
    .vrBlok { position: static; }
}

/* =========================================================
   4. ASAMA: urun detay sifirdan (galeri + varyasyon grid +
   iletisim karti), megamenu kayma duzeltmeleri, footer v3
   ========================================================= */

/* ---------- Galeri: ana gorsel + gorunum seridi ---------- */
.galeri {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    box-shadow: var(--golge);
    padding: 12px;
}

.galeriAna {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-kucuk);
    overflow: hidden;
    background: var(--zemin);
    cursor: zoom-in;
}

.galeriAna img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.galeriAna:hover img { transform: scale(1.03); }

.galeriZoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 57, 72, .75);
    color: #fff;
    border-radius: 50%;
    font-size: 15px;
    opacity: 0;
    transition: opacity var(--gecis);
    pointer-events: none;
}

.galeriAna:hover .galeriZoom { opacity: 1; }

.galeriYok {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--soluk);
    cursor: default;
}

.galeriYok i { font-size: 44px; color: var(--kenar-koyu); }

/* Gorunum seridi */
.galeriThumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.galeriThumb {
    flex: none;
    width: 74px;
    height: 74px;
    padding: 0;
    border: 2px solid var(--kenar);
    border-radius: var(--r-kucuk);
    background: var(--zemin);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

.galeriThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.galeriThumb:hover { border-color: var(--mavi); }

.galeriThumb.aktif {
    border-color: var(--mercan);
    box-shadow: 0 0 0 3px rgba(237, 107, 110, .18);
}

/* ---------- Iletisim karti ---------- */
.iletisimKart {
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    box-shadow: var(--golge);
    padding: 18px;
    text-align: center;
}

.iletisimBaslik {
    font-size: 15px;
    font-weight: 600;
    color: var(--lacivert);
    margin-bottom: 6px;
}

.iletisimBaslik i { color: var(--mavi-koyu); margin-right: 6px; }

.iletisimKart p { color: var(--soluk); font-size: 13px; margin: 0 0 14px; }

.iletisimButonlar { display: flex; gap: 10px; }

.iletisimBtn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 10px;
    border: 0;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #fff !important;
    cursor: pointer;
    transition: filter var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}

.iletisimBtn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--golge-hover); }

.iletisimMail { background: var(--lacivert); }
.iletisimWp   { background: #27c15c; }

.iletisimTel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--lacivert) !important;
    letter-spacing: .5px;
}

.iletisimTel i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--yesil-bg);
    color: var(--yesil);
    border-radius: 50%;
    font-size: 14px;
}

.iletisimTel:hover { color: var(--mercan) !important; }

/* ---------- Fiyat / stok dengesi ---------- */
.detayFiyat { font-size: 26px !important; margin: 6px 0 4px; }

/* ---------- Varyasyon secici (grid) ---------- */
.vrSecim {
    margin: 18px 0 6px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    box-shadow: var(--golge);
}

.vrSecimBaslik {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--lacivert);
    margin-bottom: 14px;
}

.vrGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px;
}

.vrKart {
    display: block;
    text-align: center;
    text-decoration: none !important;
    border: 2px solid var(--kenar);
    border-radius: var(--r-kucuk);
    padding: 7px 7px 8px;
    background: #fff;
    transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}

.vrKart:hover {
    border-color: var(--mavi);
    box-shadow: var(--golge-hover);
    transform: translateY(-2px);
}

.vrKart.vrSecili {
    border-color: var(--mercan);
    box-shadow: 0 0 0 3px rgba(237, 107, 110, .15);
}

.vrKartImg {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: var(--zemin);
}

.vrKartImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vrKartBos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--kenar-koyu);
    font-size: 20px;
}

/* Stok durumu noktasi */
.vrDurum {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.vrKartImg .vrDurum {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.vrDurumVar { background: #34b46a; }
.vrDurumYok { background: var(--mercan); }

/* Secili tik rozeti */
.vrTik {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mercan);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.vrKartAd {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--metin);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vrKart.vrSecili .vrKartAd { color: var(--mercan); }

.vrSecimNot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--soluk);
}

.vrSecimNot .vrDurum { border-color: var(--zemin); }

/* ---------- Megamenu: kayma duzeltmeleri ---------- */
/* Hover'da hicbir olcu degismez; yalnizca renk gecisi olur */
.megaSol .megaAna a {
    border-left: 3px solid transparent;   /* kaymayi onler: bosluk hep ayrilmis */
    box-shadow: none !important;
}

.megaSol .megaAna.aktif a,
.megaSol .megaAna a:hover {
    box-shadow: none !important;
    border-left-color: var(--mercan);
}

.megaSol .megaAna a i,
.megaSol .megaAna.aktif a i { transform: none !important; }

.megaAltlar ul li a { border-left: 2px solid transparent; }

.megaAltlar ul li a:hover {
    padding-left: 0 !important;           /* kayma yok */
    border-left-color: var(--sari);
    color: var(--mercan) !important;
}

.megaAltlar ul li a { padding-left: 8px; }
.megaAltlar ul li a:hover { padding-left: 8px !important; }

footer ul li a:hover { padding-left: 0; }

/* ---------- FOOTER v3: renk optimizasyonu + beyaz logo ---------- */
/* Ana metin rengi kullanicinin istedigi #aeb9c8 uzerine kurulu */

footer, footer p, footer span, footer li, .footer-about,
.fast-links ul li a, .footer-menu-content ul li a, footer a {
    color: #aeb9c8 !important;
}

footer strong, footer b, .footer-contact strong { color: #f2f5f9 !important; }

footer a:hover,
.fast-links ul li a:hover,
.footer-menu-content ul li a:hover,
.footer-bottom a:hover { color: var(--sari) !important; }

/* Ikincil / soluk bilgiler */
.footer-contact span { color: #7e8a9c !important; }
.copyright { color: #76839a !important; }
.copyright a { color: #aeb9c8 !important; }

/* Beyaz logo: kart yok, dogrudan buyukce */
.footer-logo {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
}

.footer-logo img {
    height: 96px !important;
    width: auto;
    display: block;
}

@media screen and (max-width: 768px) {
    .footer-logo img { margin: 0 auto; }
    .iletisimButonlar { flex-direction: row; }
    .vrGrid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* =========================================================
   5. ASAMA: footer kompaktlastirma, buyuk beyaz logo,
   varyasyon kartlarinda ebat + stok satirlari
   ========================================================= */

/* ---------- Footer: buyuk beyaz logo ---------- */
.footer-logo img { height: 132px !important; }

/* ---------- Footer: kategoriler cok sutunlu ve kompakt ---------- */
.links-info .footer-menu-content ul {
    columns: 3;
    column-gap: 22px;
}

.links-info .footer-menu-content ul li { break-inside: avoid; }

.links-info .footer-menu-content ul li a {
    font-size: 12.5px;
    padding: 3px 0;
    line-height: 1.45;
}

/* Footer dikey nefesi azalt */
.footer-bottom { padding: 34px 0 10px; }
.footer-info > [class*="col-"] { margin-bottom: 16px; }
footer { margin-top: 36px; }

@media screen and (max-width: 991px) {
    .links-info .footer-menu-content ul { columns: 2; }
}

@media screen and (max-width: 576px) {
    .links-info .footer-menu-content ul { columns: 2; column-gap: 12px; }
    .footer-logo img { height: 104px !important; }
}

/* ---------- Varyasyon karti: renk / ebat / stok alt alta ---------- */
.vrKartAd { margin-top: 8px; }

.vrKartEbat {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--soluk);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vrKartStok {
    display: inline-block;
    margin-top: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.vrKartStok.vrStokVar { background: var(--yesil-bg); color: var(--yesil); }
.vrKartStok.vrStokYok { background: var(--kirmizi-bg); color: var(--kirmizi); }

/* Kartlar biraz genissin: uc satir icerik rahat sigsin */
.vrGrid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); }

/* ---------- Footer: genis yerlesim ---------- */
/* Icerik dar 1140px kutuya sikismasin; ekrana yayilsin */
footer .container,
.copyright .container {
    max-width: 1560px;
    width: 100%;
    padding-left: clamp(18px, 4vw, 64px);
    padding-right: clamp(18px, 4vw, 64px);
}

/* Genis alanda sutun oranlari: logo | iletisim | kategoriler */
@media screen and (min-width: 992px) {
    .footer-info { align-items: flex-start; }
    .footer-info > .col-lg-4 { flex: 0 0 30%; max-width: 30%; }
    .footer-info > .col-lg-3 { flex: 0 0 26%; max-width: 26%; }
    .footer-info > .col-lg-5 { flex: 0 0 44%; max-width: 44%; }

    /* Genis kategori alaninda 4 sutun */
    .links-info .footer-menu-content ul { columns: 4; column-gap: 26px; }
}

@media screen and (min-width: 1400px) {
    .links-info .footer-menu-content ul { columns: 4; }
}

/* ---------- Footer: tam ekran genisligi (full-bleed) ---------- */
/* Footer dar icerik kapsayicisinin icinde kaliyordu; kapsayicidan
   tasirilip koyu zemin ekranin tamamina yayilir. */
footer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Kategori kolonlari genis alanda rahat nefes alsin */
@media screen and (min-width: 992px) {
    .links-info .footer-menu-content ul {
        columns: 3;
        column-gap: 34px;
    }
}

@media screen and (min-width: 1500px) {
    .links-info .footer-menu-content ul { columns: 4; }
}

/* Kolon ici satir kaymalarini onle: link tek blok halinde kirilir */
.links-info .footer-menu-content ul li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.links-info .footer-menu-content ul li a {
    display: flex;
    align-items: flex-start;
    white-space: normal;
}

.links-info .footer-menu-content ul li a::before { flex: none; margin-top: 1px; }

/* =========================================================
   6. ASAMA: buyuk logo, kucuk arama, genis megamenu,
   urun bilgileri kutusu (dar etiket sutunu)
   ========================================================= */

/* ---------- Logo daha buyuk ---------- */
.navbar-brand img { height: 132px !important; }

.headerTop { padding: 14px 0 !important; }

/* ---------- Arama daha ufak ---------- */
.headerTop .center {
    width: 42% !important;
    max-width: 440px;
}

.topArama { border-width: 2px; }

.topArama .form-control {
    padding: 8px 16px;
    font-size: 14px;
}

.topArama .btn,
#btnSearch {
    padding: 6px 18px;
    font-size: 13.5px;
    margin: 3px;
}

/* ---------- Megamenu daha genis ---------- */
.megaMenu { width: 1080px; }

.megaSol { flex: 0 0 300px; max-height: 520px; }

.megaPanel { padding: 24px 28px; gap: 26px; }

.megaGorsel { flex: 0 0 240px; }

.megaGorsel img,
.megaGorsel .megaGorselYok {
    width: 240px;
    height: 240px;
}

@media screen and (min-width: 992px) {
    .megaAltlar ul { columns: 3; column-gap: 20px; }
}

@media screen and (max-width: 1200px) {
    .megaMenu { width: calc(100vw - 30px); }
    .megaAltlar ul { columns: 2; }
}

/* ---------- Urun Bilgileri: dar etiket + genis deger ---------- */
/* Onceden iki esit %50 sutundu; etiket tarafi gereksiz genisti.
   Grid ile etiket icerigine gore dar, deger kalan alani alir. */
.urunBilgiKutu {
    display: grid !important;
    grid-template-columns: minmax(110px, max-content) 1fr;
    column-gap: 26px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.urunBilgiBaslik { grid-column: 1 / -1; }

.urunBilgiKutu .sutun {
    width: auto !important;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--zemin);
    display: flex;
    align-items: center;
}

/* Kaynak sirasi etiket-deger ciftleri: baslik 1. div oldugundan
   etiketler nth-of-type cift, degerler tek sirada gelir */
.urunBilgiKutu .sutun:nth-of-type(even) {
    color: var(--soluk);
    font-weight: 500;
    white-space: nowrap;
}

.urunBilgiKutu .sutun:nth-of-type(odd) {
    color: var(--metin);
    font-weight: 600;
}

.urunBilgiKutu .sutun:nth-last-of-type(-n+2) { border-bottom: 0; }

.urunBilgiKutu .sutun b { font-weight: 600; }

/* Deger rozetleri (stok) */
.bilgiDeger {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
}

.bilgiVar { background: var(--yesil-bg); color: var(--yesil); }
.bilgiYok { background: var(--kirmizi-bg); color: var(--kirmizi); }

@media screen and (max-width: 576px) {
    .urunBilgiKutu { column-gap: 14px; grid-template-columns: minmax(90px, max-content) 1fr; }
    .navbar-brand img { height: 100px !important; }
}

/* =========================================================
   7. ASAMA: headerTop uc bolge (logo | arama | iletisim),
   footer kategorileri duzenli grid
   ========================================================= */

/* ---------- headerTop yerlesimi ---------- */
.headerTop .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
}

.headerTop .first { width: auto !important; flex: none; }

.headerTop .center {
    flex: 1 1 auto;
    width: auto !important;
    max-width: 480px;
    position: relative;
}

.headerTop .last { width: auto !important; flex: none; }

/* Iletisim kartlari (sag) */
.headerIletisim { display: flex; align-items: center; gap: 22px; }

.hiKart {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none !important;
}

.hiKart i {
    width: 42px;
    height: 42px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vurgu-soluk);
    color: var(--mavi-koyu);
    border-radius: 50%;
    font-size: 16px;
    transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}

.hiKart:hover i { background: var(--mercan); color: #fff; transform: translateY(-2px); }

.hiYazi { display: flex; flex-direction: column; line-height: 1.25; }

.hiYazi small {
    font-size: 11px;
    color: var(--soluk);
    letter-spacing: .4px;
    text-transform: uppercase;
}

.hiYazi strong {
    font-size: 14.5px;
    color: var(--lacivert);
    font-weight: 700;
    white-space: nowrap;
}

.hiKart:hover .hiYazi strong { color: var(--mercan); }

/* Orta boy ekranda e-posta karti gizlenir, telefon kalir */
@media screen and (max-width: 1250px) {
    .hiKart:nth-child(2) { display: none; }
}

@media screen and (max-width: 991px) {
    .headerIletisim { display: none; }
}

/* ---------- Footer kategorileri: columns yerine duzenli grid ---------- */
.links-info .footer-menu-content ul {
    columns: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 2px;
}

.links-info .footer-menu-content ul li { break-inside: auto; }

.links-info .footer-menu-content ul li a {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.45;
    white-space: normal;
}

@media screen and (min-width: 1500px) {
    .links-info .footer-menu-content ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 576px) {
    .links-info .footer-menu-content ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

/* =========================================================
   8. ASAMA: footer kategorileri — derli toplu liste
   ========================================================= */

/* Tek satir = tek kategori; sutunlar esit, satirlar hizali.
   Uzun adlar sarmak yerine ... ile kesilir (title'da tam hali var). */
.links-info .footer-menu-content ul {
    columns: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 0;
    margin-top: 2px;
}

.links-info .footer-menu-content ul li {
    break-inside: auto;
    min-width: 0;                       /* grid hucresinde tasmayi onler */
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.links-info .footer-menu-content ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    font-size: 12.5px;
    line-height: 1.3;
    white-space: nowrap;                /* satir kaymasi olmaz */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ok isareti sabit genislikte: metinler ayni hizadan baslar */
.links-info .footer-menu-content ul li a::before {
    content: "\203A";
    flex: none;
    width: 8px;
    color: var(--mercan);
    font-weight: 700;
    line-height: 1;
    transition: transform var(--gecis);
}

.links-info .footer-menu-content ul li a:hover { padding-left: 0 !important; }
.links-info .footer-menu-content ul li a:hover::before { transform: translateX(2px); }

/* Kategori bloguna hafif ust bosluk */
.links-info .footer-menu-content { margin-top: 4px; }

@media screen and (max-width: 1200px) {
    .links-info .footer-menu-content ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
}

@media screen and (max-width: 576px) {
    .links-info .footer-menu-content ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
    .links-info .footer-menu-content ul li a { font-size: 12px; padding: 6px 0; }
}

/* ---------- Footer kategorileri: 2 genis sutun ---------- */
/* Genis footer alaninda 3 dar sutun yerine 2 ferah sutun:
   uzun kategori adlari kesilmeden sigar. */
.links-info .footer-menu-content ul,
.links-info .footer-menu-content ul[class] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 40px;
}

@media screen and (min-width: 1500px) {
    .links-info .footer-menu-content ul { column-gap: 56px; }
}

@media screen and (max-width: 576px) {
    .links-info .footer-menu-content ul { column-gap: 16px; }
}

/* ---------- Footer kategorileri: tam metin, kesme yok ---------- */
/* nowrap + ellipsis uzun adlari kesiyordu; artik metin sarar ve
   ok isareti ile ayni hizada ikinci satira devam eder. */
.links-info .footer-menu-content ul li a {
    align-items: flex-start;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal;
    overflow-wrap: anywhere;
}

.links-info .footer-menu-content ul li a::before {
    margin-top: 3px;   /* sarma durumunda ok ilk satirla hizali kalir */
}

/* =========================================================
   9. ASAMA: uretim (imalat) urunu gostergeleri
   ========================================================= */

/* Stok rozetinin yanindaki uretim etiketi */
.uretimRozet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--vurgu-soluk);
    color: var(--mavi-koyu);
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}

.uretimRozet i { font-size: 12px; }

/* Stok yoksa uretim rozeti tek basina durur; daha belirgin */
.uretimRozet.uretimRozetGuclu {
    margin-left: 0;
    background: #fdf3dc;
    color: #a97b12;
    font-size: 14px;
    padding: 6px 16px;
}

.detayStokDurumu .aktif,
.detayStokDurumu .pasif { vertical-align: middle; display: inline-block; }

/* Uretim aciklama notu */
.uretimNot {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0 4px;
    padding: 14px 16px;
    background: #fffaf0;
    border: 1px solid #f6e3b8;
    border-left: 4px solid var(--sari);
    border-radius: var(--r-kucuk);
    font-size: 13.5px;
    line-height: 1.6;
    color: #7a5c14;
}

.uretimNot i { color: #c99a2e; font-size: 18px; margin-top: 2px; flex: none; }
.uretimNot strong { color: #5d4610; display: block; margin-bottom: 2px; }

/* Urun bilgileri tablosunda uretim degeri */
.bilgiUretim { background: #fdf3dc; color: #a97b12; }

/* =========================================================
   10. ASAMA: kart stok seridi renkleri, uretim rozeti
   ========================================================= */

/* Kart altindaki stok seridi: dolgulu yesil yerine soft zemin +
   renkli nokta. Kart kompozisyonunu bozmayan sakin bir gorunum. */
.product .caption .stok,
.stokSatir {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #f6f8fb !important;
    color: var(--lacivert-acik) !important;
    border-top: 1px solid var(--kenar);
    border-radius: 0 0 var(--r) var(--r);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 6px;
    letter-spacing: .2px;
}

.product .caption .stok::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--kenar-koyu);
}

/* Stok var: sakin yesil nokta, metin koyu */
.product .caption .stok.stokVar { color: #2f7d52 !important; }
.product .caption .stok.stokVar::before { background: #3fa06a; }

/* Stok yok */
.product .caption .stok.stokYok { color: #9aa6b6 !important; }
.product .caption .stok.stokYok::before { background: #c3ccd8; }

/* Uretim urunu: mercan/sari tonlu, marka vurgusu */
.product .caption .stok.stokUretim {
    background: #fff8ec !important;
    color: #a97b12 !important;
    border-top-color: #f6e3b8;
}

.product .caption .stok.stokUretim::before { background: var(--sari); }

/* =========================================================
   11. ASAMA: urun bilgi kutusu (dl), mobil arama,
   mobil breadcrumb, footer 2 sutun
   ========================================================= */

/* ---------- Urun Bilgileri: temiz tanim listesi ---------- */
.urunBilgiKutu {
    display: block !important;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    box-shadow: var(--golge);
    padding: 20px 22px !important;
    margin-top: 18px;
}

.bilgiListe { margin: 0; padding: 0; }

.bilgiSatir {
    display: grid;
    grid-template-columns: minmax(96px, 150px) 1fr;
    gap: 16px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--zemin);
}

.bilgiSatir:last-child { border-bottom: 0; padding-bottom: 0; }
.bilgiSatir:first-child { padding-top: 0; }

.bilgiListe dt {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--soluk);
    letter-spacing: .2px;
}

.bilgiListe dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--metin);
    min-width: 0;
    overflow-wrap: anywhere;
}

.bilgiListe dd a { color: var(--mavi-koyu) !important; }
.bilgiListe dd a:hover { color: var(--mercan) !important; }

.bilgiFiyat { font-size: 16px; font-weight: 700; color: var(--lacivert); }
.bilgiFiyat small { font-size: 11.5px; font-weight: 500; color: var(--soluk); }

.bilgiUyari { background: var(--kirmizi-bg); color: var(--kirmizi); }

/* ---------- Mobil: arama ---------- */
@media screen and (max-width: 768px) {

    .mobileSearch {
        margin-top: 10px;
        padding: 0 2px;
    }

    .mobileSearch .input-group {
        background: var(--zemin);
        border: 2px solid var(--kenar);
        border-radius: 999px;
        overflow: hidden;
        transition: border-color var(--gecis), background var(--gecis);
    }

    .mobileSearch .input-group:focus-within {
        background: #fff;
        border-color: var(--mavi);
    }

    .mobileSearch .form-control.arama {
        border: 0 !important;
        background: transparent !important;
        line-height: 1.4 !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 8px 0 18px;
        font-size: 16px;   /* iOS zoom engeli */
        box-shadow: none !important;
    }

    .mobileSearch .input-group-btn { display: flex; align-items: center; }

    .mobileSearch .go {
        height: 38px !important;
        margin-right: 4px;
        padding: 0 18px;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--lacivert) !important;
        color: #fff !important;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .mobileSearch .go:active { background: var(--mercan) !important; }

    /* Mobil canli arama paneli */
    #arama_sonuclari {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-top: 8px;
        max-height: 60vh;
    }

    .cs-resim { width: 40px; height: 40px; }
    .cs-ad { font-size: 13px; }
    .cs-satir { padding: 9px 12px; gap: 10px; }
    .cs-rozet { font-size: 10.5px; padding: 3px 8px; }
}

/* ---------- Mobil: breadcrumb ---------- */
@media screen and (max-width: 768px) {

    .breadcrumb {
        margin-bottom: 14px;
        background: #fff !important;
    }

    .breadcrumb ol {
        padding: 10px 0;
        gap: 2px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .breadcrumb ol::-webkit-scrollbar { display: none; }

    .breadcrumb-item {
        font-size: 12px;
        white-space: nowrap;
        flex: none;
    }

    .breadcrumb-item + .breadcrumb-item::before { padding: 0 6px; }

    /* Son ogenin tamami gorunsun, kaydirarak okunur */
    .breadcrumb-item.active span,
    .breadcrumb-item.active a {
        max-width: none;
        font-size: 12px;
    }
}

/* ---------- Mobil: urun bilgi kutusu ---------- */
@media screen and (max-width: 576px) {

    .urunBilgiKutu { padding: 16px !important; }

    /* Dar ekranda etiket ustte, deger altta */
    .bilgiSatir {
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 10px 0;
    }

    .bilgiListe dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
    .bilgiListe dd { font-size: 14px; }

    .urunBilgiBaslik h3 { font-size: 13px !important; }
}

/* ---------- Footer: kategoriler kalktiktan sonra 2 sutun ---------- */
@media screen and (min-width: 992px) {
    .footer-info > .col-lg-4 { flex: 0 0 48%; max-width: 48%; }
    .footer-info > .col-lg-3 { flex: 0 0 44%; max-width: 44%; }
}

/* ---------- Breadcrumb: urun adi kesilmesin ---------- */
/* Masaustunde de son oge kirpilmiyordu ama genis adlarda ... cikiyordu;
   artik tam metin gosterilir, gerekirse alt satira gecer. */
.breadcrumb-item.active span,
.breadcrumb-item.active a {
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

@media screen and (max-width: 768px) {
    /* Yatay kaydirma yerine sarma: urun adi ekranda kalir */
    .breadcrumb ol {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        row-gap: 2px;
        padding: 9px 0;
    }

    .breadcrumb-item {
        white-space: normal;
        line-height: 1.45;
    }

    /* Uzun urun adi tam genislikte alt satira gecer */
    .breadcrumb-item.active {
        flex: 1 1 100%;
        margin-top: 1px;
    }

    .breadcrumb-item.active::before { display: none; }

    .breadcrumb-item.active span {
        display: block;
        font-size: 12.5px;
        color: var(--lacivert) !important;
    }
}

/* =========================================================
   12. ASAMA: breadcrumb ortalama, arama butonu rengi,
   Turkce buyuk harf sorunu, footer bosluklari,
   mobil arama sonuclari + sol menu
   ========================================================= */

/* ---------- Breadcrumb ortali ---------- */
.breadcrumb ol {
    justify-content: center;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .breadcrumb ol { justify-content: center; }
    .breadcrumb-item.active { text-align: center; }
}

/* ---------- Arama butonu: mercan (pembe) hover kalksin ---------- */
.topArama .btn:hover,
#btnSearch:hover,
.topArama .btn:focus,
#btnSearch:focus {
    background: var(--lacivert-koyu) !important;
    color: #fff !important;
}

.topArama .btn:active,
#btnSearch:active { background: var(--lacivert-koyu) !important; }

/* Odak halkasi da notr kalsin */
#btnSearch:focus { box-shadow: none !important; outline: none; }

/* ---------- Turkce buyuk harf sorunu ----------
   text-transform: uppercase, "i" harfini "I" yapar (İ degil).
   Basliklar zaten Turkce yazildigi icin donusumu kaldiriyoruz. */
.urunBilgiBaslik h3,
.vrSecimBaslik,
.vrBaslik,
.iletisimBaslik,
.kart-bas h2 {
    text-transform: none !important;
}

/* Footer basliklari da ayni sorunu yasiyordu */
footer h4, footer h5 { text-transform: none !important; letter-spacing: .5px; }

/* ---------- Footer: gereksiz bosluklar ---------- */
footer { margin-top: 28px; }

.footer-bottom { padding: 30px 0 6px !important; }

.footer-info > [class*="col-"] { margin-bottom: 10px !important; }

.footer-about { margin-top: 12px !important; }
.footer-about p { margin-bottom: 6px; }

.footer-social-icons { margin-top: 14px !important; }

footer h4, footer h5 { margin: 12px 0 10px !important; padding-bottom: 8px; }

.footer-contact a { padding: 9px 13px; margin-bottom: 8px; }

.footer-general-content p { margin-bottom: 10px; }

.copyright { padding: 13px 10px !important; }

/* ---------- Mobil: canli arama sonuclari ---------- */
@media screen and (max-width: 768px) {

    /* Mobil arama panelinin sonuc kutusu */
    #mobilAramaSonuc {
        background: #fff;
        border: 1px solid var(--kenar);
        border-radius: var(--r);
        box-shadow: var(--golge-hover);
        margin-top: 8px;
        max-height: 62vh;
        overflow-y: auto;
    }

    #mobilAramaSonuc:empty { display: none; }

    #mobilAramaSonuc ul { list-style: none; margin: 0; padding: 0; }

    #mobilAramaSonuc li {
        border-bottom: 1px solid var(--zemin);
    }

    #mobilAramaSonuc li:last-child { border-bottom: 0; }

    #mobilAramaSonuc .cs-satir { padding: 10px 12px; gap: 10px; }
    #mobilAramaSonuc .cs-resim { width: 42px; height: 42px; }
    #mobilAramaSonuc .cs-ad { font-size: 13px; }
    #mobilAramaSonuc .cs-kod { font-size: 11.5px; }
    #mobilAramaSonuc .cs-rozet { font-size: 10.5px; padding: 3px 8px; }
    #mobilAramaSonuc .cs-tumu { padding: 12px; font-size: 13px; }
    #mobilAramaSonuc .cs-bos { padding: 18px 14px; font-size: 13px; }
}

/* ---------- Mobil sol menu: iletisim kartlari ---------- */
.mobilIletisim {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 18px;
}

.miKart {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--kenar);
    border-radius: var(--r-kucuk);
    background: var(--zemin);
    text-decoration: none !important;
    transition: background var(--gecis), border-color var(--gecis);
}

.miKart:active { background: #eef2f7; }

.miKart i {
    width: 38px;
    height: 38px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--mavi-koyu);
    font-size: 15px;
    border: 1px solid var(--kenar);
}

.miKart:nth-child(2) i { color: #27c15c; }

.miKart span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.miKart small { font-size: 11px; color: var(--soluk); letter-spacing: .3px; }
.miKart strong { font-size: 14px; color: var(--lacivert); font-weight: 700; }

/* Mobil menu basliklari ve kapatma dugmesi */
.mobileLeftCategoriesList .leftMenuTop {
    padding: 4px 6px 12px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--kenar);
    line-height: 1.2 !important;
}

.mobileLeftCategoriesList .btnClose {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--zemin);
    color: var(--lacivert);
    border: 1px solid var(--kenar);
}

.mobileLeftCategoriesList .leftMobileMenuTitle {
    margin: 16px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--soluk);
}

/* =========================================================
   13. ASAMA: mobil kategori menusu — renkli hiyerarsi
   ========================================================= */

#kategoriMenuMobile { list-style: none; margin: 0; padding: 0; }

#kategoriMenuMobile .mkOge {
    border-bottom: 1px solid var(--zemin) !important;
    border-radius: var(--r-kucuk);
    overflow: hidden;
    transition: background var(--gecis);
}

/* --- Ana kategori satiri --- */
#kategoriMenuMobile .mkAna {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 10px !important;
    color: var(--lacivert) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    white-space: normal !important;
    transition: background var(--gecis), color var(--gecis);
}

#kategoriMenuMobile .mkAna:active { background: var(--zemin); }

/* Ana kategori isaretci noktasi */
#kategoriMenuMobile .mkNokta {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--mercan);
    box-shadow: 0 0 0 3px rgba(237, 107, 110, .16);
}

#kategoriMenuMobile .mkAd { flex: 1; min-width: 0; line-height: 1.35; }

/* Alt kategori sayisi + ok */
#kategoriMenuMobile .mkOk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    color: var(--soluk);
}

#kategoriMenuMobile .mkSayi {
    min-width: 22px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--vurgu-soluk);
    color: var(--mavi-koyu);
    font-size: 11px;
    font-weight: 700;
}

#kategoriMenuMobile .mkOk i { transition: transform var(--gecis); font-size: 16px; }

#kategoriMenuMobile .mkGit { color: var(--kenar-koyu); font-size: 15px; flex: none; }

/* --- Acik durum: ana satir vurgulanir --- */
#kategoriMenuMobile .mkGenisledi { background: #fbfcfe; }

#kategoriMenuMobile .mkAna.mkAcik {
    background: var(--lacivert);
    color: #fff !important;
}

#kategoriMenuMobile .mkAna.mkAcik .mkNokta {
    background: var(--sari);
    box-shadow: 0 0 0 3px rgba(249, 206, 105, .25);
}

#kategoriMenuMobile .mkAna.mkAcik .mkOk { color: rgba(255, 255, 255, .75); }

#kategoriMenuMobile .mkAna.mkAcik .mkSayi {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

#kategoriMenuMobile .mkAna.mkAcik .mkOk i { transform: rotate(180deg); }

/* --- Alt kategori listesi: sol serit ile bagli --- */
#kategoriMenuMobile .mkAltListe {
    list-style: none;
    margin: 0;
    padding: 4px 0 8px 22px !important;
    position: relative;
    background: #fbfcfe;
}

/* Hiyerarsi cizgisi */
#kategoriMenuMobile .mkAltListe::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 4px;
    bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--sari), var(--mavi));
}

#kategoriMenuMobile .mkAltListe li { border: 0 !important; }

#kategoriMenuMobile .mkAltListe li a {
    display: block;
    position: relative;
    padding: 9px 10px 9px 16px !important;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--lacivert-acik) !important;
    white-space: normal !important;
    line-height: 1.35;
}

/* Her alt kategoriye baglanti isareti */
#kategoriMenuMobile .mkAltListe li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: var(--kenar-koyu);
}

#kategoriMenuMobile .mkAltListe li a:active { color: var(--mercan) !important; }

/* "Tum <kategori>" baglantisi */
#kategoriMenuMobile .mkTumu a {
    color: var(--mavi-koyu) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
}

#kategoriMenuMobile .mkTumu a::before { background: var(--mavi); }

#kategoriMenuMobile .mkBos { padding: 12px 10px; color: var(--soluk); font-size: 13px; }