/**
 * Mega Menu Pointer (Çentik) Styles
 * 
 * Bu dosya, header menüsünde hover yapıldığında açılan mega menu'nun
 * üstüne, hangi menüye hover yapıldıysa o menünün hizasında bir çentik
 * (pointer/triangle) ekler.
 * 
 * Çalışma Mantığı:
 * - Her mega menu'nun üstüne bir çentik pseudo-element'i eklenir
 * - Çentik pozisyonu JavaScript ile dinamik olarak hesaplanır
 * - Hangi menüye hover yapıldıysa çentik o menünün tam hizasında görünür
 */

/* Çentik (Triangle/Pointer) - Mega menu wrapper'a ekleniyor */
/* Pozisyon hesaplaması mega menu'ye göre yapılıyor, bu yüzden yatay konum doğru */
.tp-header-dropdown nav ul li.has-dropdown .tp-megamenu-wrapper.megamenu-white-bg::before {
    content: '';
    position: absolute;
    top: -10px; /* Mega menu'nun üstünde, header ile mega menu arasında */
    left: var(--pointer-left, 50%); /* JavaScript ile hesaplanan pozisyon */
    transform: translateX(-50%); /* Çentiğin merkezini hizala */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffffff; /* Siyah çentik */
    z-index: 9999; /* Header'ın üstünde görünmesi için çok yüksek z-index */
    opacity: 0; /* Varsayılan olarak gizli */
    transition: opacity 0.2s ease; /* Sadece opacity için transition, left için yok */
    pointer-events: none;
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.15)); /* Daha belirgin gölge */
}

#header-black .tp-header-dropdown nav ul li.has-dropdown .tp-megamenu-wrapper.megamenu-white-bg::before {
    border-bottom: 10px solid #000000; /* Siyah çentik */
}

.header-sticky .tp-header-dropdown nav ul li.has-dropdown .tp-megamenu-wrapper.megamenu-white-bg::before {
    border-bottom: 10px solid #000000; /* Siyah çentik */
}

/* Hover durumunda çentiği göster */
.tp-header-dropdown nav ul li.has-dropdown:hover .tp-megamenu-wrapper.megamenu-white-bg::before,
.tp-header-dropdown nav ul li.has-dropdown .tp-megamenu-wrapper.megamenu-white-bg.show-pointer::before {
    opacity: 1;
}

.tp-megamenu-wrapper {
    overflow: visible !important; 
}

/* Responsive - Mobilde çentiği gizle */
@media only screen and (max-width: 1199px) {
    .tp-header-dropdown nav ul li.has-dropdown .tp-megamenu-wrapper.megamenu-white-bg::before {
        display: none !important;
    }

    .tp-megamenu-wrapper {
        overflow: hidden !important; 
    }
}