/* ==========================================================================
   Mega menu — ortak yapi (renkler demo temalarindan gelir)
   Sol: kategoriler. Sag: secili kategorinin icerikleri (kucuk gorsel + ad).
   Panel viewport genisligini asmaz; uzun listeler kendi icinde kaydirilir.
   ========================================================================== */

.nav-wrap { position: relative; }
.has-mega { position: static; }

.has-mega > .mega-trigger { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Panel, header container'inin tam genisligine yayilir */
/* Panel: tetikleyiciye BITISIK (ustte seffaf kopru serit) — arada bosluk yok.
   Acilma tamamen JS kontrolunde (.open); saf :hover kullanilmaz, cunku fare
   komsu menu ogesinin uzerinden gecerken yanlis panel aciliyordu. */
.mega {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    top: 100%;
    padding-top: 0.55rem;          /* gorunmez kopru — panelin KENDI parcasi */
    width: min(1180px, calc(100vw - 3rem));
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    /* KRITIK: .mega-panel.active kendi uzerinde `visibility: visible` tasidigi icin
       ebeveynin `hidden` degerini eziyor ve kapali panel fare olaylarini yakaliyordu
       (sayfanin ortasinda gezinirken menu aciliyordu). pointer-events bunu kesin keser. */
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.mega > .mega-shell {
    background: var(--mega-bg, #fff);
    border: 1px solid var(--mega-border, #e6e8ea);
    border-radius: var(--mega-radius, 14px);
    box-shadow: var(--mega-shadow, 0 24px 60px rgba(16, 24, 32, 0.14));
    overflow: hidden;
}
.has-mega:focus-within > .mega,
.has-mega.open > .mega {
    opacity: 1; visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.mega .mega-inner {
    display: grid;
    grid-template-columns: 264px 1fr;
    max-height: min(70vh, 540px);
}

/* ---------- Sol: kategoriler ---------- */
.mega .mega-cats {
    list-style: none; margin: 0; padding: 0.55rem;
    background: var(--mega-side-bg, #f7f8f9);
    border-right: 1px solid var(--mega-border, #e6e8ea);
    overflow-y: auto;
}
.mega .mega-cat > a {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.58rem 0.65rem;
    border-radius: 9px;
    text-decoration: none;
    color: var(--mega-text, #1f2933);
    font-size: 0.875rem; font-weight: 500; line-height: 1.25;
    transition: background 0.14s ease, color 0.14s ease;
}
.mega .mega-cat .mc-ico {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--mega-ico-bg, #fff);
    border: 1px solid var(--mega-border, #e6e8ea);
    color: var(--mega-ico-color, #5c6773);
    transition: color 0.14s ease, border-color 0.14s ease;
}
.mega .mega-cat .mc-title { flex: 1; }
.mega .mega-cat .mc-arrow { width: 15px; height: 15px; opacity: 0; flex: 0 0 auto; transition: opacity 0.14s ease; }
.mega .mega-cat:hover > a,
.mega .mega-cat.active > a {
    background: var(--mega-active-bg, #fff);
    color: var(--mega-active-text, #0f1720);
    font-weight: 600;
}
.mega .mega-cat.active .mc-arrow { opacity: 0.5; }
.mega .mega-cat.active .mc-ico { color: var(--brand-ink, #2f7a35); border-color: var(--mega-active-ico-border, #d6dbe0); }

/* ---------- Sag: icerikler ---------- */
.mega .mega-panels { position: relative; overflow: hidden; }
.mega .mega-panel {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: 0.95rem 1.05rem 0.85rem;
    opacity: 0; visibility: hidden;
    transition: opacity 0.14s ease, visibility 0.14s;
}
.mega .mega-panel.active { opacity: 1; visibility: visible; position: relative; }

.mega .mega-panel-head {
    display: flex; align-items: center; gap: 1rem;
    padding-bottom: 0.6rem; margin-bottom: 0.7rem;
    border-bottom: 1px solid var(--mega-border, #e6e8ea);
}
.mega .mp-title { font-size: 0.95rem; font-weight: 700; color: var(--mega-active-text, #0f1720); }
.mega .mp-all {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; font-weight: 600; text-decoration: none;
    color: var(--brand-ink, #2f7a35); white-space: nowrap;
}
.mega .mp-all svg { width: 14px; height: 14px; }
.mega .mp-all:hover { text-decoration: underline; }

/* Gorsel + ad — baska metin yok */
.mega .mega-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 0.25rem 0.5rem;
    overflow-y: auto;
    padding-right: 0.35rem;
    align-content: start;
}
.mega .mega-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.38rem 0.45rem;
    border-radius: 9px;
    text-decoration: none;
    color: var(--mega-text, #1f2933);
    font-size: 0.83rem; line-height: 1.3;
    transition: background 0.14s ease, color 0.14s ease;
}
.mega .mega-item:hover { background: var(--mega-item-hover, #f2f5f7); color: var(--mega-active-text, #0f1720); }
.mega .mi-thumb {
    flex: 0 0 auto; width: 44px; height: 44px;
    border-radius: 8px; overflow: hidden;
    background: var(--mega-side-bg, #f7f8f9);
    border: 1px solid var(--mega-border, #e6e8ea);
    display: flex; align-items: center; justify-content: center;
}
.mega .mi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega .mi-ph { color: var(--mega-muted, #6b7683); }
.mega .mi-name {
    flex: 1; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Az ogeli panel: buyuk gorselli dikey kart (<= 8 oge) ----------
   Kompakt listede panelin alti bos kaliyordu; burada gorsel one cikar. */
.mega .mega-items--roomy {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem 0.85rem;
    align-content: start;
}
.mega .mega-items--roomy .mega-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1px solid var(--mega-border, #e6e8ea);
    border-radius: 11px;
    overflow: hidden;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.mega .mega-items--roomy .mega-item:hover {
    background: transparent;
    border-color: var(--mega-active-ico-border, #d6dbe0);
    box-shadow: 0 10px 24px rgba(16, 24, 32, 0.10);
    transform: translateY(-2px);
}
.mega .mega-items--roomy .mi-thumb {
    width: 100%; height: auto; aspect-ratio: 4 / 3;
    border: 0; border-radius: 0;
}
.mega .mega-items--roomy .mi-thumb img { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1); }
.mega .mega-items--roomy .mega-item:hover .mi-thumb img { transform: scale(1.05); }
.mega .mega-items--roomy .mi-name {
    flex: 0 0 auto;
    padding: 0.5rem 0.6rem 0.58rem;
    font-size: 0.82rem; font-weight: 550; line-height: 1.32;
    background: var(--mega-bg, #fff);
}

@media (max-width: 1100px) {
    .mega .mega-items--roomy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Alt seri ---------- */
.nav-menu .mega-foot {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.65rem;
    background: var(--mega-side-bg, #f7f8f9);
    border-top: 1px solid var(--mega-border, #e6e8ea);
    font-size: 0.82rem; font-weight: 600; text-decoration: none;
    color: var(--brand-ink, #2f7a35);
}
.nav-menu .mega-foot svg { width: 15px; height: 15px; }
.nav-menu .mega-foot:hover { background: var(--mega-foot-hover, #eef1f4); }

/* İnce kaydırma çubuğu */
.mega .mega-cats::-webkit-scrollbar, .mega .mega-items::-webkit-scrollbar { width: 8px; }
.mega .mega-cats::-webkit-scrollbar-thumb, .mega .mega-items::-webkit-scrollbar-thumb {
    background: #cfd6dd; border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
}

/* ---------- Dar ekran ---------- */
@media (max-width: 1100px) {
    .mega .mega-inner { grid-template-columns: 220px 1fr; }
    .mega .mega-items { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 900px) {
    .mega {
        position: static; width: auto; transform: none;
        opacity: 1; visibility: visible;
        box-shadow: none; border: 0; border-radius: 0;
    }
    .has-mega::after { display: none; }
    .mega .mega-inner { grid-template-columns: 1fr; max-height: none; }
    .mega .mega-cats { border-right: 0; border-bottom: 1px solid var(--mega-border, #e6e8ea); max-height: 220px; }
    .mega .mega-panels { overflow: visible; }
    .mega .mega-panel { position: relative; }
    .mega .mega-panel:not(.active) { display: none; }
    .mega .mega-items { grid-template-columns: 1fr 1fr; }
}