/* =============================================================
   FiberServer - Hostcloud Tema Özel CSS
   custom.css | Temel WiseCCP dosyaları değiştirilmeden override
   ============================================================= */

/* ---------------------------------------------------------------
   1. MODERN SCROLLBAR - Tüm tarayıcılar için
   --------------------------------------------------------------- */

/* Webkit tabanlı tarayıcılar (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--logo-background, #1a3a5c);
    border-radius: 10px;
    transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--slider-bottom, #0d6efd);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--logo-background, #1a3a5c) #f1f1f1;
}

/* ---------------------------------------------------------------
   2. HEADER-2 (FULLWIDTH) - KRİTİK MENÜ DÜZELTMESİ
   --------------------------------------------------------------- */

/*
 * TEMEL SORUN: #fullwidth içindeki tüm div'ler float:left kullandığından
 * parent (#fullwidth) yüksekliği 0'a düşer (float collapse).
 * Bu yüzden slider ve diğer içerik, menünün üzerine biner ve menü görünmez.
 * Çözüm: clearfix ile #fullwidth'in float'ları içermesi sağlanır.
 */
#fullwidth::after {
    content: '';
    display: table;
    clear: both;
}

/* Menü barının her zaman slider'ın üzerinde görünmesi için z-index */
#fullwidth {
    position: relative;
    z-index: 100;
}

/* Menü arka planı - resim yüklenemese bile solid renk görünsün */
#fullwidth .menu {
    position: relative;
    z-index: 1000;
    background-color: var(--logo-background, #1a3a5c); /* fallback renk */
}

/* Desktop dropdown menü z-index */
#fullwidth .menu ul li ul {
    z-index: 1001;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* Mega menü z-index */
#megamenu {
    z-index: 1002;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* ---------------------------------------------------------------
   2b. HEADER-2 MOBİL MENÜ DÜZELTMELERİ
   --------------------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 1024px) {

    /*
     * Hamburger butonu (.menuAc) - koyu menü arka planında görünmesi için
     * beyaz renk olmalı. wisecp.php'deki $text_color koyu olduğundan
     * menünün koyu arka planında hamburger görünmüyor.
     */
    #fullwidth .menuAc {
        color: #fff !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }

    /* Mobil menü overlay - ekranın üstünde açılsın */
    #mobmenu {
        z-index: 9999;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
}

/* ---------------------------------------------------------------
   3. HEADER-1 (BOOTSTRAP NAVBAR) MENÜ DÜZELTMELERİ
   --------------------------------------------------------------- */

/*
 * Hamburger butonu: önce HER YERDE gizle (media query yok = en güvenli)
 * Sonra sadece mobilde (< 992px) göster.
 * Bu yaklaşım Bootstrap veya başka CSS'in override'ını engeller.
 */
header.header nav.navbar .navbar-toggler {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Sadece mobilde göster */
@media (max-width: 991.98px) {
    header.header nav.navbar .navbar-toggler {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        width: 50px !important;
        height: 40px !important;
        overflow: visible !important;
        opacity: 1 !important;
    }
}

/* Navbar dropdown geçiş efekti */
header.header nav.navbar .dropdown-menu {
    animation-name: fadeInDown;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    padding: 0 !important;   /* mega-inner kendi padding'ini yönetsin */
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobil: Close button konumu */
@media only screen and (max-width: 992px) {
    header.header nav.navbar.navbar-expand-lg.navbar-light.bg-light .navbar-collapse.collapse button#close-dropdown {
        top: 15px;
        right: 15px;
    }
    /* Menü öğelerini dikey düzelt */
    header.header nav.navbar.navbar-expand-lg.navbar-light.bg-light .navbar-collapse.collapse ul li a {
        line-height: 45px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 0 25px;
    }
    /* Dropdown menü mobilde */
    header.header nav.navbar.navbar-expand-lg.navbar-light.bg-light ul li .dropdown-menu {
        position: relative;
        background: rgba(0,0,0,0.2);
        box-shadow: none;
    }
}

/* ---------------------------------------------------------------
   4. GENEL İYİLEŞTİRMELER
   --------------------------------------------------------------- */

/* Body overflow-x fix - position:fixed elementi bozmaması için */
html {
    overflow-x: hidden;
}
body {
    overflow-x: unset; /* style.css'deki overflow-x:hidden'ı sıfırla */
}

/* Header: tam genişlik + slider'ın üstünde olsun */
header.header {
    z-index: 999;
    width: 100%;
}

/* Navbar da tam genişlik */
header.header nav.navbar {
    width: 100%;
}

/*
 * navbar-brand position:absolute (255px) Bootstrap 4 flexbox'ta float:right'ı eziyor.
 * navbar-collapse 0'dan başlıyor → Alan Adı + Web Hosting logonun arkasına giriyor.
 * Çözüm: navbar-collapse'a logo kadar padding-left ver, items'ı sağa yasla.
 */
header.header nav.navbar .navbar-collapse {
    padding-left: 265px;
    justify-content: flex-end;
}

/* Sticky header düzeltmesi */
.sabithead {
    position: fixed !important;
    left: 0;
    right: 0;
    z-index: 9998;
}

/* Sayfa geçiş yumuşatma */
a {
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

/* Buton hover efekti iyileştirme */
.gonderbtn,
.btn,
button[type="submit"] {
    transition: all 0.25s ease !important;
}

/* Logo img optimize */
#fullwidth .logo img,
header.header .navbar-brand img {
    height: auto;
    max-height: 55px;
}

/* ---------------------------------------------------------------
   5. MEGA MENU - İYİLEŞTİRİLMİŞ KART TASARIMI
   --------------------------------------------------------------- */

.mega-panel {
    min-width: 680px;
    border-radius: 10px;
    overflow: hidden;
}
.mega-inner {
    padding: 20px !important;
    background: rgba(255,255,255,0.97) !important;
}
.mega-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--navbar-background, #2fd3c7);
}
.mega-category-label {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.mega-category-label i { color: var(--navbar-background, #2fd3c7); margin-right: 6px; }
.mega-view-all {
    font-size: 12px;
    color: var(--navbar-background, #2fd3c7) !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity 0.2s;
}
.mega-view-all:hover { opacity: 0.75; }

.mega-services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
    margin-bottom: 14px;
}
.mega-service-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important;
    border-radius: 8px;
    border: 1.5px solid #e8e8e8 !important;
    text-decoration: none !important;
    color: #333 !important;
    background: #fff !important;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    white-space: normal !important;
    width: auto !important;
    clear: none !important;
    font-weight: normal !important;
}
.mega-service-card:hover {
    border-color: var(--navbar-background, #2fd3c7);
    box-shadow: 0 6px 24px rgba(47,211,199,0.18);
    transform: translateY(-2px);
    color: #222 !important;
}
.mega-service-card.mega-popular {
    border-color: var(--navbar-background, #2fd3c7);
    background: linear-gradient(135deg, rgba(47,211,199,0.06) 0%, #fff 100%);
}
.mega-badge {
    position: absolute;
    top: 0; right: 0;
    background: var(--navbar-background, #2fd3c7);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 10px;
    border-bottom-left-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mega-icon {
    width: 42px !important; height: 42px !important;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--logo-background, #201668), var(--navbar-background, #2fd3c7)) !important;
    display: flex !important; align-items: center; justify-content: center;
    margin-bottom: 11px;
    flex-shrink: 0;
}
.mega-icon i { color: #fff !important; font-size: 17px; }
.mega-content h5 {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 0 5px 0 !important;
    color: #222;
    line-height: 1.3;
}
.mega-content p {
    font-size: 11px;
    color: #666;
    margin: 0 0 10px 0;
    line-height: 1.5;
}
.mega-price { font-size: 11px; color: #888; margin-top: auto; }
.mega-price .price {
    font-size: 15px;
    font-weight: 800;
    color: var(--logo-background, #201668);
}
.mega-arrow {
    position: absolute;
    bottom: 10px; right: 10px;
    color: #ddd; font-size: 11px;
    transition: all 0.2s ease;
}
.mega-service-card:hover .mega-arrow { color: var(--navbar-background, #2fd3c7); right: 7px; }
.mega-footer {
    padding: 11px 16px;
    background: linear-gradient(135deg, var(--logo-background, #201668) 0%, #2a2a4a 100%);
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    text-align: center;
}
.mega-footer i { margin-right: 6px; color: var(--navbar-background, #2fd3c7); }
.mega-footer strong { color: var(--navbar-background, #2fd3c7); }

/* ---------------------------------------------------------------
   6. RESPONSIVE DÜZELTMELER
   --------------------------------------------------------------- */

@media only screen and (min-width: 1024px) and (max-width: 1280px) {
    /* Orta ekranlarda menü sıkışıyor ise padding azalt */
    #fullwidth .menu li a {
        padding: 0 18px;
    }
    header.header nav.navbar ul li a {
        padding: 0 10px;
    }
}

@media only screen and (max-width: 768px) {
    /* Küçük ekranlarda menü düzeni */
    .fullwidthhead {
        padding: 8px 0;
    }
    #fullwidth .logo img {
        max-height: 40px;
    }
}