@charset "UTF-8";
/* =====================================================================
   Mega menü – sade düzen
   Master sayfalardaki inline <style> bloğundan SONRA yüklenir ve
   oradaki menü kurallarını ezer. Inline CSS'in bu dosyaya taşınması
   ayrı bir görev olarak yapılacak.
   ===================================================================== */

/* ---------- Genel kutu ---------- */

@media (min-width: 992px) {
    .subMenu .menuItems.megaMenu7 {
        padding: 22px !important;
        max-height: calc(100vh - 130px) !important;
        overflow-y: auto !important; /* güvenlik ağı, normal kullanımda kaydırma oluşmaz */
    }

    /* İki kolon eşit yükseklikte; alt öğeler en alta sabitlenebilsin */
    .subMenu .megaBody > .col-lg-6 {
        display: flex;
        flex-direction: column;
    }
}

/* İçerik satırı tam genişlik kaplasın.
   style.css'teki ".subMenu .menuItems { display:flex }" kuralı satırı
   içeriği kadar daraltıyordu; +30px, satırın -15px kenar boşluklarını telafi eder. */
.subMenu .menuItems.megaMenu7 > .megaBody {
    flex: 0 0 calc(100% + 30px);
    max-width: calc(100% + 30px);
    align-items: stretch;
}

/* Kolon başlığı: sağdaki "Kullanım Senaryoları" ile aynı etiket stili */
.subMenu .megaColTitle {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .06em;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    line-height: 16px;
    margin: 0 0 10px 12px !important;
}

/* ---------- Sol kolon: ürün listesi ---------- */

.subMenu .megaProducts {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Kart yerine sade satır */
.subMenu .megaProductItem {
    align-items: center;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.subMenu .megaProductItem:hover,
.subMenu .megaProductItem.is-active {
    background: #f6f7f9 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.subMenu .megaProductItem .pIcon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 10px !important;
    background: #fff !important;
    border: 1px solid rgba(17, 24, 39, 0.06) !important;
}

.subMenu .megaProductItem .pIcon img {
    width: 26px !important;
    height: 26px !important;
}

.subMenu .megaProductItem .pInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.subMenu .megaProductItem .pText {
    flex: 1;
    min-width: 0;
}

.subMenu .megaProductItem .pTitle {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subMenu .megaProductItem .pDesc {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #6b7280 !important;
    margin: 2px 0 0 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Detayları Gör" yazısı gizli; ok sadece üzerine gelinen/aktif satırda görünür */
.subMenu .megaProductItem .pCta {
    font-size: 0 !important;
    gap: 0 !important;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity .15s ease;
}

.subMenu .megaProductItem:hover .pCta,
.subMenu .megaProductItem.is-active .pCta {
    opacity: 1;
}

.subMenu .megaProductItem .pCta svg {
    width: 15px;
    height: 15px;
}

.subMenu .megaProductItem .pCta svg path {
    fill: #cc2131 !important;
}

/* ---------- "Tümünü Keşfet" ---------- */

/* Listenin en altına sabitlenir, sağ panelin alt kenarıyla hizalanır */
.subMenu .megaProductItem.megaExploreAll {
    position: relative;
    margin-top: auto;
}

/* Ürün listesiyle arasına ayırıcı çizgi */
.subMenu .megaProductItem.megaExploreAll::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
}

/* Ayırıcı çizgi için üstte boşluk (margin-top:auto'yu bozmadan) */
.subMenu .megaProducts .megaProductItem:nth-last-child(2) {
    margin-bottom: 12px;
}

/* El ikonu yerine "tüm ürünler" anlamında ızgara ikonu */
.subMenu .megaExploreAll .pIcon {
    background: #f3f4f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E") center / 20px no-repeat !important;
    border-color: transparent !important;
}

.subMenu .megaExploreAll .pIcon img {
    display: none !important;
}

/* Bu satırda ok her zaman görünür ve lacivert */
.subMenu .megaExploreAll .pCta {
    opacity: 1;
}

.subMenu .megaExploreAll .pCta svg path {
    fill: #111827 !important;
}

/* ---------- Sağ kolon: tanıtım paneli ---------- */

/* Kart içinde kart yerine açık gri zemin */
.subMenu .megaPromo {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: auto !important;
    padding: 22px !important;
    border-radius: 14px !important;
    background: #f6f7f9 !important;
    border: none !important;
    box-shadow: none !important;
}

.subMenu .promoInner,
.subMenu .promoExplore {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0 !important;
    padding: 0 !important;
}

.subMenu .promoTitle {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 0 0 6px 0 !important;
}

.subMenu .promoText {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #4b5563 !important;
    margin: 0 0 16px 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Kullanım senaryoları: açıklamadan ince bir çizgiyle ayrılır */
.subMenu .promoOrgWrap {
    border-top: 1px solid rgba(17, 24, 39, 0.08) !important;
    padding-top: 14px !important;
    margin: 0 0 16px 0 !important;
}

.subMenu .promoOrgTitle {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase !important;
    color: #cc2131 !important;
    margin: 0 0 10px 0 !important;
}

.subMenu .promoOrgText {
    display: flex;
    flex-direction: column;
    gap: 8px;
    white-space: normal !important;
}

/* Her senaryo: başında kırmızı onay işareti */
.subMenu .promoOrgText .orgItem {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #1f2937;
}

.subMenu .promoOrgText .orgItem::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cc2131' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 12l2 2l4 -4'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.subMenu .promoBtns {
    margin: 0 !important;
}

.subMenu .btnPromo {
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

.subMenu .btnPromo.ghost {
    background: #fff !important;
}

/* Ürün görseli: küçük, panelin en altında */
.subMenu .promoShot {
    margin-top: auto !important;
    padding-top: 16px !important;
}

.subMenu .promoShot a {
    display: flex;
    justify-content: center;
}

.subMenu .promoShot img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 120px !important;
    margin: 0 auto;
    object-fit: contain !important;
    border-radius: 10px !important;
    border: 1px solid rgba(17, 24, 39, 0.06) !important;
    box-shadow: none !important;
}

/* ---------- "Tümünü Keşfet" paneli: tüm ürünler listesi ---------- */

.subMenu .promoExplore .promoText {
    -webkit-line-clamp: unset;
    display: block;
}

.subMenu .exploreGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.subMenu .exploreItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
    text-decoration: none;
    transition: color .15s ease;
}

.subMenu .exploreItem:hover {
    color: #cc2131;
}

.subMenu .exploreItem .eIcon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subMenu .exploreItem .eIcon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.subMenu .exploreItem .eName {
    min-width: 0;
}

.subMenu .exploreAllLink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 14px;
    font-weight: 800;
    color: #111827;
    text-decoration: none;
}

.subMenu .exploreAllLink svg {
    width: 14px;
    height: 14px;
    transition: transform .15s ease;
}

.subMenu .exploreAllLink svg path {
    fill: #111827;
}

.subMenu .exploreAllLink:hover svg {
    transform: translateX(3px);
}

/* ---------- Ekran boyutları ---------- */

/* Çok kısa ekranlarda ürün görseli gizlenir */
@media (min-width: 992px) and (max-height: 700px) {
    .subMenu .promoShot {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .subMenu .exploreGrid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Panel yığını: hover'da kutu boyu sabit kalsın ---------- */
/* Tüm ürün panelleri aynı ızgara hücresinde üst üste durur; kutu en uzun
   panel kadar yüksek olur. Gizli paneller display:none yerine
   visibility:hidden ile gizlenir, böylece yer kaplamaya devam eder. */
.subMenu .promoStack {
    display: grid;
    flex: 1 1 auto;
}

.subMenu .promoStack > .promoPanel {
    grid-area: 1 / 1;
    visibility: hidden;
}

.subMenu .promoStack > .promoPanel.is-visible {
    visibility: visible;
}

/* Görsel alanı sabit: farklı oranlı görseller aynı yüksekliği kaplar */
.subMenu .promoStack .promoShot img {
    height: 120px !important;
    max-height: 120px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Gizlenen paneldeki öğelerin geçiş (transition) efektleri kapatılır.
   Aksi hâlde transition'ı olan öğeler (ikonlar, butonlar) panel gizlendikten
   sonra kısa bir süre görünür kalıp yeni panelin üstüne biniyor. Görünür
   paneldeki hover efektleri etkilenmez. */
.subMenu .promoStack > .promoPanel:not(.is-visible),
.subMenu .promoStack > .promoPanel:not(.is-visible) * {
    transition: none !important;
}