/**
 * Dark Hero CSS
 * Koyu temalı hero bölümleri için header stilleri
 * 
 * Bu dosya aşağıdaki sayfalar için kullanılır:
 * - Contact
 * - WordPress
 * - Ve diğer koyu hero temalı sayfalar
 */

/* ========================================
   HEADER - KOYU TEMA STİLLERİ
   ======================================== */

/* Header arka planını şeffaf yap */
body .header-main {
    background-color: transparent !important;
    background: transparent !important;
    transition: background-color 0.3s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 100 !important;
}

/* Logo filtresi */
body .header-main .logo {
    filter: none;
}

/* Navigasyon linkleri beyaz renk - mega menü HARİÇ */
body .header-main nav>.mega-menu-wrapper>button,
body .header-main nav>a,
body .header-main .login-button {
    color: #ffffff !important;
    font-weight: 500;
}

/* Navigasyon hover durumu */
body .header-main nav a:hover,
body .header-main nav button:hover,
body .header-main nav>div:hover,
body .header-main nav>div>button:hover,
body .header-main nav .mega-menu-trigger:hover,
body .header-main nav [x-data]:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    background-color: transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Mega menü trigger hover efektini kaldır */
body .header-main nav>div>button,
body .header-main nav .relative>button {
    background-color: transparent !important;
    background: transparent !important;
}

body .header-main nav>div>button:hover,
body .header-main nav .relative>button:hover {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* İkonlar beyaz renk - mega menü HARİÇ */
body .header-main>.container svg,
body .header-main>.container>nav>.mega-menu-wrapper>button i.fas,
body .header-main>.container>nav>.mega-menu-wrapper>button i.fab,
body .header-main>.container>nav>a i.fas,
body .header-main>.container>nav>a i.fab,
body .header-main button.xl\:hidden i.fas,
body .header-main .fa-bars {
    color: #ffffff !important;
}

/* Mega menü içindeki elemanlar normal renklerini korusun */
body .header-main .mega-menu i.fas,
body .header-main .mega-menu i.fab {
    color: #4F46E5 !important;
}

body .header-main .mega-menu .mega-col-icon i {
    color: #4F46E5 !important;
}

body .header-main .mega-menu .mega-link-list a {
    color: #475569 !important;
}

body .header-main .mega-menu .mega-link-list a:hover {
    color: #4F46E5 !important;
}

/* Mega menü hover arka planlarını koru */
body .header-main .mega-menu .mega-link:hover {
    background: #f8fafc !important;
}

body .header-main .mega-menu .mega-info-card:hover {
    background: #f8fafc !important;
}

body .header-main .mega-menu .mega-link-list a:hover {
    background: transparent !important;
}


/* Domains mega menu: Search butonu ikonu beyaz olmalı */
body .header-main .mega-menu .mega-domain-btn i.fas {
    color: #ffffff !important;
}

/* Domains mega menu: "See all domain extensions" linki renk düzeltmesi */
body .header-main .mega-menu .mega-domain-ext-link {
    color: #4F46E5 !important;
}

body .header-main .mega-menu .mega-domain-ext-link:hover {
    color: #4338ca !important;
}

/* Mega menu: Alt bağlantılar (More About Domains at DomainQ vb.) hover rengi */
body .header-main .mega-menu .mega-bottom-link {
    color: #4F46E5 !important;
}

body .header-main .mega-menu .mega-bottom-link:hover {
    color: #4338ca !important;
}

/* Mega menu: Promo bağlantıları (Learn More vb.) hover rengi */
body .header-main .mega-menu .mega-promo-link {
    color: #4F46E5 !important;
}

body .header-main .mega-menu .mega-promo-link:hover {
    color: #4338ca !important;
}

body .header-main .mega-menu .mega-features-link {
    color: #4F46E5 !important;
}

body .header-main .mega-menu .mega-features-link:hover {
    color: #4338ca !important;
}

/* ========================================
   MEGA MENÜ TRIGGER - HOVER ÇİZGİSİ DÜZELTMESİ
   ======================================== */

/* Koyu temada mega-menu-trigger'ın hover çizgisini düzelt */
body .header-main .mega-menu-trigger,
body .header-main nav .mega-menu-wrapper .mega-menu-trigger {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: -6px !important;
    margin-bottom: -6px !important;
}

/* Hover çizgisini daha küçük ve kontrollü yap */
body .header-main .mega-menu-trigger::after,
body .header-main nav .mega-menu-wrapper .mega-menu-trigger::after,
body .header-main nav .mega-menu-wrapper:hover .mega-menu-trigger::after {
    height: 2px !important;
    bottom: 2px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    max-width: 40px !important;
    border-radius: 1px !important;
}

/* Hover durumunda çizgi genişliği */
body .header-main .mega-menu-wrapper:hover .mega-menu-trigger::after,
body .header-main nav .mega-menu-wrapper:hover .mega-menu-trigger::after {
    width: 50% !important;
    max-width: 35px !important;
}


/* ========================================
   TOPBAR - KOYU TEMA
   ======================================== */

body .bg-primary {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important;
}

/* ========================================
   BUTONLAR - KOYU TEMA
   ======================================== */

/* Login butonu */
body .login-button {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

body .login-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    text-shadow: none;
}

/* Get Started butonu */
body .get-started-button {
    background: #ffffff !important;
    color: var(--color-primary) !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

body .get-started-button:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #111827 !important;
    transform: translateY(-2px);
}

/* ========================================
   STICKY HEADER - KOYU TEMA UYUMLULUĞU
   ======================================== */

body #main-header.header-sticky {
    background-color: rgba(17, 24, 39, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body #main-header.header-sticky nav a,
body #main-header.header-sticky nav button,
body #main-header.header-sticky .login-button {
    color: #ffffff !important;
}

body #main-header.header-sticky nav a:hover,
body #main-header.header-sticky nav button:hover {
    color: #a5b4fc !important;
}

body #main-header.header-sticky svg,
body #main-header.header-sticky i.fas,
body #main-header.header-sticky i.fab {
    color: #ffffff !important;
}

body #main-header.header-sticky .get-started-button {
    background: #ffffff !important;
    color: var(--color-primary) !important;
}

body #main-header.header-sticky .login-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Sticky durumda mega-menu-trigger hover çizgisi */
body #main-header.header-sticky .mega-menu-trigger::after {
    background: #a5b4fc;
}

/* ========================================
   STICKY HEADER - MEGA MENÜ RENK DÜZELTMELERİ
   ======================================== */

/* Sticky durumda mega menü içindeki elemanlar normal renklerini korusun */
body #main-header.header-sticky .mega-menu i.fas,
body #main-header.header-sticky .mega-menu i.fab {
    color: #4F46E5 !important;
}

body #main-header.header-sticky .mega-menu .mega-col-icon i {
    color: #4F46E5 !important;
}

body #main-header.header-sticky .mega-menu .mega-link-list a {
    color: #475569 !important;
}

body #main-header.header-sticky .mega-menu .mega-link-list a:hover {
    color: #4F46E5 !important;
}

body #main-header.header-sticky .mega-menu .mega-domain-btn i.fas {
    color: #ffffff !important;
}

body #main-header.header-sticky .mega-menu .mega-domain-ext-link,
body #main-header.header-sticky .mega-menu .mega-bottom-link,
body #main-header.header-sticky .mega-menu .mega-promo-link,
body #main-header.header-sticky .mega-menu .mega-features-link {
    color: #4F46E5 !important;
}

body #main-header.header-sticky .mega-menu .mega-domain-ext-link:hover,
body #main-header.header-sticky .mega-menu .mega-bottom-link:hover,
body #main-header.header-sticky .mega-menu .mega-promo-link:hover,
body #main-header.header-sticky .mega-menu .mega-features-link:hover {
    color: #4338ca !important;
}


/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    body .header-main .logo {
        height: 28px;
    }
}