/* =========================================================
   CONIA 2026 BRAND COLORS
   Navy + Cloud Blue + Cyan palette from new logo
========================================================= */
:root,
html[data-theme="light"]{
    --primary-dark:#061a45 !important;
    --primary:#0b2d6f !important;
    --primary-light:#2667d8 !important;
    --secondary:#14c6e8 !important;
    --accent:#14c6e8 !important;
    --accent-hover:#2667d8 !important;
    --bg-primary:#ffffff !important;
    --bg-secondary:#f6f9fd !important;
    --text-primary:#061a45 !important;
    --text-secondary:#2f405c !important;
    --text-muted:#617089 !important;
    --border-color:#dfe8f4 !important;
    --card-bg:#ffffff !important;
    --header-bg:#ffffff !important;
    --footer-bg:#061a45 !important;
    --dropdown-bg:#ffffff !important;
    --conia-navy:#061a45 !important;
    --conia-navy-dark:#020b25 !important;
    --conia-blue:#2667d8 !important;
    --conia-cyan:#14c6e8 !important;
    --conia-bg:#f6f9fd !important;
    --conia-card:#ffffff !important;
    --conia-border:#dfe8f4 !important;
    --conia-text:#061a45 !important;
    --conia-muted:#617089 !important;
    --conia-shadow:0 18px 50px rgba(6,26,69,.10) !important;
}

body{background:#fff!important;color:#061a45!important;}
a{color:#0b2d6f;}
a:hover{color:#14c6e8;}

/* Header */
.top-bar{background:#061a45!important;color:#fff!important;}
.top-bar i,.top-bar-left i,.top-bar-right i{color:#14c6e8!important;}
.uptime-badge{background:rgba(38,103,216,.22)!important;color:#fff!important;border:1px solid rgba(20,198,232,.25)!important;}
.promo-badge{background:linear-gradient(135deg,#2667d8,#14c6e8)!important;color:#fff!important;}
.main-header{background:#fff!important;border-bottom:1px solid #dfe8f4!important;box-shadow:0 8px 24px rgba(6,26,69,.06)!important;}
.logo img{height:80px!important;width:auto!important;}
.nav-link,.header-actions a{color:#061a45!important;}
.nav-link:hover,.nav-link.active,.header-actions a:hover{color:#14c6e8!important;}
.cart-badge{background:#14c6e8!important;color:#061a45!important;font-weight:900!important;}
.theme-toggle{display:none!important;}

/* Dropdown / mega menu */
.mega-menu{background:#fff!important;border-top:1px solid #dfe8f4!important;box-shadow:0 22px 55px rgba(6,26,69,.10)!important;}
.hosting-item{border-color:#dfe8f4!important;}
.hosting-item:hover{border-color:#14c6e8!important;box-shadow:0 16px 36px rgba(6,26,69,.08)!important;}
.hosting-item h3 i,.detail-link i{color:#14c6e8!important;}
.detail-link{color:#2667d8!important;}
.detail-link:hover{color:#14c6e8!important;}

/* Buttons */
.btn,
.btn-primary,
.btn-buy,
.btn-package,
.btn-game,
.btn-submit,
.cta-button,
.hero-btn,
.live-chat-btn,
.conia-package-btn,
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success,
#order-standard_cart .checkout,
#order-standard_cart .btn-checkout{
    background:linear-gradient(135deg,#2667d8 0%,#14c6e8 100%)!important;
    color:#fff!important;
    border:none!important;
    box-shadow:0 10px 24px rgba(38,103,216,.20)!important;
}
.btn:hover,
.btn-primary:hover,
.btn-buy:hover,
.btn-package:hover,
.btn-game:hover,
.btn-submit:hover,
.cta-button:hover,
.hero-btn:hover,
.live-chat-btn:hover,
.conia-package-btn:hover,
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover,
#order-standard_cart .checkout:hover,
#order-standard_cart .btn-checkout:hover{
    background:linear-gradient(135deg,#0b2d6f 0%,#2667d8 100%)!important;
    color:#fff!important;
}
.btn-default,.btn-secondary,#order-standard_cart .btn-default,#order-standard_cart .btn-secondary{
    background:#edf5ff!important;
    color:#061a45!important;
    box-shadow:none!important;
}

/* Cards / features */
.feature-modern-card::before,
.package-card::before,
.conia-cart-table thead th,
#order-standard_cart .view-cart-items-header,
#order-standard_cart .cart-header,
#order-standard_cart .products-header{
    background:linear-gradient(135deg,#061a45 0%,#2667d8 55%,#14c6e8 100%)!important;
}
.feature-modern-icon,
.conia-order-nav a i,
.conia-cart-empty i,
.conia-plan-features li > i:first-child{
    background:linear-gradient(135deg,#2667d8 0%,#14c6e8 100%)!important;
    color:#fff!important;
}
.feature-modern-card:hover,.package-card:hover,.hosting-item:hover,.product-card:hover{border-color:#14c6e8!important;}
.price-monthly,.price-one-time,.package-price,.game-price,.ext-name{color:#2667d8!important;}

/* WHMCS order/cart */
#order-standard_cart,
.conia-cart-page{background:#f6f9fd!important;}
.conia-order-nav a{color:#061a45!important;border-color:#dfe8f4!important;}
.conia-order-nav a:hover,.conia-order-nav a.active{color:#2667d8!important;border-color:rgba(20,198,232,.65)!important;}
.conia-order-nav a.active i{background:linear-gradient(135deg,#061a45,#14c6e8)!important;}
.conia-cart-card,.conia-summary-card,#order-standard_cart .summary-container,#order-standard_cart .order-summary{border-color:#dfe8f4!important;box-shadow:0 18px 50px rgba(6,26,69,.10)!important;}
.conia-summary-title,#order-standard_cart .summary-container .header,#order-standard_cart .order-summary .header{background:linear-gradient(135deg,#061a45,#0b2d6f)!important;color:#fff!important;}
.conia-summary-total strong,.conia-cart-table tbody td:last-child{color:#061a45!important;}
.conia-promo button,.conia-checkout-btn{background:linear-gradient(135deg,#2667d8,#14c6e8)!important;color:#fff!important;}
#order-standard_cart input:focus,#order-standard_cart select:focus,#order-standard_cart textarea:focus,#order-standard_cart .form-control:focus{border-color:#14c6e8!important;box-shadow:0 0 0 4px rgba(20,198,232,.14)!important;}

/* Package feature list for WHMCS product descriptions */
.conia-plan-features{list-style:none;margin:0;padding:0;background:#fff;border-radius:14px;overflow:hidden;border:1px solid #dfe8f4;box-shadow:0 4px 18px rgba(6,26,69,.04);}
.conia-plan-features li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid #edf3fa;transition:all .2s ease;font-size:15px;color:#2f405c;line-height:1.4;}
.conia-plan-features li:last-child{border-bottom:none;}
.conia-plan-features li:hover{background:#f6fbff;}
.conia-plan-features li > i:first-child{width:18px;min-width:18px;text-align:center;font-size:15px;background:none!important;color:#14c6e8!important;}
.conia-plan-features li span{flex:1;font-weight:500;color:#2f405c;}
.conia-plan-features li strong{font-weight:700;color:#061a45;white-space:nowrap;font-size:14px;}
.conia-plan-features li strong .fa-check{color:#14c6e8;font-size:15px;}
.conia-plan-features li strong .fa-times{color:#ef4444;font-size:15px;}

/* Footer */
.footer{background:#061a45!important;}
.footer-title::after,.footer-title{border-color:#14c6e8!important;}
.footer a:hover,.footer-contact i,.footer-bank i{color:#14c6e8!important;}
.footer-social a:hover{background:#14c6e8!important;color:#061a45!important;}

@media(max-width:768px){.logo img{height:40px!important;}.conia-order-nav{grid-template-columns:1fr!important;}}

/* =========================================================
   CONIA MOBILE HEADER / MENU FINAL FIX
   Telefon görünümünde logo, menü ve aksiyon butonları hizalama
========================================================= */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    /* Üst bar mobilde tek satır, çakışma yok */
    .top-bar {
        position: relative !important;
        z-index: 1000 !important;
        padding: 6px 10px !important;
        min-height: 38px !important;
        overflow: hidden !important;
    }

    .top-bar .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .top-bar-left {
        display: none !important;
    }

    .top-bar-right {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .top-bar .social-icons {
        display: none !important;
    }

    .top-bar .uptime-badge {
        display: none !important;
    }

    .top-bar .promo-badge {
        max-width: 100% !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 auto !important;
    }

    /* Ana header mobilde düzgün blok olsun, fixed logo yok */
    .main-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1001 !important;
        background: #ffffff !important;
        min-height: 78px !important;
        box-shadow: 0 8px 24px rgba(6,26,69,.08) !important;
    }

    .main-header .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 14px !important;
    }

    .navbar {
        height: 78px !important;
        min-height: 78px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 0 !important;
        position: relative !important;
    }

    .logo {
        position: static !important;
        top: auto !important;
        left: auto !important;
        z-index: auto !important;
        display: flex !important;
        align-items: center !important;
        flex: 0 1 auto !important;
        max-width: 170px !important;
        order: 1 !important;
    }

    .logo img {
        height: 52px !important;
        max-height: 52px !important;
        width: auto !important;
        max-width: 170px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .header-actions {
        position: static !important;
        top: auto !important;
        right: auto !important;
        z-index: auto !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        gap: 8px !important;
        order: 2 !important;
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .header-actions a:not(.cart-icon),
    .header-actions .cart-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f3f7fd !important;
        border: 1px solid #dfe8f4 !important;
        border-radius: 50% !important;
        color: #061a45 !important;
        font-size: 0 !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    .header-actions a:not(.cart-icon) i,
    .header-actions .cart-icon i {
        font-size: 17px !important;
        color: #061a45 !important;
        margin: 0 !important;
    }

    .cart-badge {
        top: -6px !important;
        right: -6px !important;
        width: 19px !important;
        height: 19px !important;
        font-size: 10px !important;
        color: #061a45 !important;
        background: #14c6e8 !important;
        border: 2px solid #fff !important;
    }

    .mobile-menu-btn {
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f3f7fd !important;
        border: 1px solid #dfe8f4 !important;
        border-radius: 14px !important;
        color: #061a45 !important;
        font-size: 20px !important;
        order: 3 !important;
        z-index: 10005 !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        box-shadow: 0 8px 22px rgba(6,26,69,.08) !important;
    }

    body.menu-open .mobile-menu-btn {
        position: fixed !important;
        top: 18px !important;
        right: 18px !important;
        background: #ffffff !important;
        color: #14c6e8 !important;
        box-shadow: 0 12px 30px rgba(6,26,69,.16) !important;
    }

    /* Mobil menü paneli: tam erişilebilir, taşma yok */
    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        width: 86vw !important;
        max-width: 390px !important;
        min-width: 280px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 88px 0 28px !important;
        margin: 0 !important;
        list-style: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: -24px 0 60px rgba(6,26,69,.22) !important;
        transition: right .28s ease !important;
        z-index: 10004 !important;
    }

    .nav-menu.active {
        right: 0 !important;
    }

    .menu-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        background: rgba(6, 26, 69, .62) !important;
        backdrop-filter: blur(2px) !important;
        z-index: 10003 !important;
    }

    .nav-item {
        width: 100% !important;
        display: block !important;
        border-bottom: 1px solid #edf3fa !important;
    }

    .nav-link {
        width: 100% !important;
        min-height: 58px !important;
        padding: 18px 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-radius: 0 !important;
        color: #061a45 !important;
        background: #ffffff !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }

    .nav-link.active,
    .nav-link:hover {
        color: #14c6e8 !important;
        background: #f6f9fd !important;
    }

    .nav-link i {
        color: #061a45 !important;
        font-size: 14px !important;
        margin-left: 10px !important;
    }

    .nav-item.active > .nav-link i {
        transform: rotate(180deg) !important;
        color: #14c6e8 !important;
    }

    .mega-menu {
        position: static !important;
        width: 100% !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: #f6f9fd !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-height: none !important;
    }

    .nav-item.active .mega-menu {
        display: block !important;
    }

    .mega-menu .container {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .mega-menu-content {
        padding: 10px 14px 18px !important;
    }

    .hosting-grid,
    .mega-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .hosting-item {
        padding: 14px 16px !important;
        text-align: left !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        border: 1px solid #dfe8f4 !important;
    }

    .hosting-item h3 {
        font-size: 15px !important;
        margin: 0 0 6px !important;
    }

    .hosting-item p {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin: 0 0 8px !important;
    }

    .hosting-item .detail-link {
        font-size: 13px !important;
    }

    body.menu-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    /* Slider üst boşluk ve taşma toparlama */
    .slider-section {
        padding: 32px 0 !important;
    }

    .slider-container {
        border-radius: 22px !important;
        max-height: none !important;
        overflow: hidden !important;
    }
}

@media (max-width: 430px) {
    .logo {
        max-width: 150px !important;
    }

    .logo img {
        height: 48px !important;
        max-width: 150px !important;
    }

    .header-actions a:not(.cart-icon),
    .header-actions .cart-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
}

@media (max-width: 370px) {
    .logo {
        max-width: 125px !important;
    }

    .logo img {
        height: 42px !important;
        max-width: 125px !important;
    }

    .header-actions {
        gap: 5px !important;
    }

    .header-actions a:not(.cart-icon),
    .header-actions .cart-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .mobile-menu-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }
}

/* =========================================================
   CONIA MODERN HEADER + COMPACT MENU v5
========================================================= */
.conia-promo-strip{
    background:linear-gradient(90deg,#061a45 0%,#0b2d6f 48%,#14c6e8 100%)!important;
    color:#fff!important;
    min-height:34px!important;
    display:flex!important;
    align-items:center!important;
    font-size:13px!important;
    font-weight:600!important;
}
.conia-promo-strip .container{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    min-height:34px!important;
}
.conia-promo-strip i{color:#14c6e8!important;margin-right:6px!important;filter:drop-shadow(0 0 6px rgba(20,198,232,.55))!important;}
.conia-promo-strip a{color:#fff!important;text-decoration:none!important;font-weight:800!important;border-bottom:1px solid rgba(255,255,255,.65)!important;}
.conia-promo-strip a:hover{color:#e8fbff!important;border-color:#14c6e8!important;}

.top-bar{
    background:#071735!important;
    color:#dcecff!important;
    min-height:34px!important;
    padding:0!important;
    border:0!important;
    font-size:13px!important;
}
.top-bar .container{
    min-height:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:18px!important;
}
.top-bar-left,.top-bar-right{display:flex!important;align-items:center!important;gap:22px!important;}
.top-bar span,.top-bar a{color:#dcecff!important;line-height:1!important;}
.top-bar i{color:#14c6e8!important;margin-right:7px!important;}
.top-bar .uptime-badge{
    background:rgba(20,198,232,.12)!important;
    border:1px solid rgba(20,198,232,.35)!important;
    color:#ffffff!important;
    padding:6px 13px!important;
    border-radius:999px!important;
}
.top-bar .promo-badge{
    background:rgba(20,198,232,.15)!important;
    border:1px solid rgba(20,198,232,.35)!important;
    color:#ffffff!important;
    padding:6px 14px!important;
    border-radius:999px!important;
}
.social-icons a{color:#14c6e8!important;opacity:1!important;margin-left:8px!important;}

.main-header{
    position:sticky!important;
    top:0!important;
    z-index:5000!important;
    background:#ffffff!important;
    border-bottom:1px solid #dbe8f7!important;
    box-shadow:0 12px 32px rgba(6,26,69,.08)!important;
}
.main-header .container{max-width:1280px!important;}
.navbar{
    height:92px!important;
    min-height:92px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:22px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
}
.logo{
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    line-height:1!important;
    padding:0!important;
}
.logo img{
    height:66px!important;
    max-height:66px!important;
    width:auto!important;
    display:block!important;
    object-fit:contain!important;
}
.nav-menu{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    flex:1 1 auto!important;
}
.nav-item{height:100%!important;display:flex!important;align-items:center!important;position:static!important;}
.nav-link{
    height:46px!important;
    padding:0 17px!important;
    border-radius:16px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    color:#061a45!important;
    background:#f6faff!important;
    border:1px solid #cfe3fb!important;
    font-size:14px!important;
    font-weight:800!important;
    text-decoration:none!important;
    box-shadow:0 8px 18px rgba(6,26,69,.035)!important;
}
.nav-link:hover,.nav-link.active{
    color:#ffffff!important;
    background:linear-gradient(135deg,#061a45 0%,#0b2d6f 58%,#14c6e8 100%)!important;
    border-color:rgba(20,198,232,.70)!important;
    box-shadow:0 14px 28px rgba(6,26,69,.18)!important;
    transform:translateY(-1px)!important;
}
.nav-link i{font-size:12px!important;transition:transform .22s ease!important;}
.nav-link:hover i{transform:rotate(180deg)!important;color:#fff!important;}
.header-actions{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    flex:0 0 auto!important;
}
.header-actions a:not(.cart-icon){
    height:46px!important;
    padding:0 16px!important;
    border-radius:16px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    background:#f6faff!important;
    border:1px solid #cfe3fb!important;
    color:#061a45!important;
    font-weight:800!important;
    text-decoration:none!important;
}
.header-actions a:not(.cart-icon):hover{
    background:#061a45!important;
    color:#fff!important;
    border-color:#061a45!important;
}
.header-actions a:not(.cart-icon) i{color:inherit!important;}
.cart-icon{
    width:50px!important;
    height:50px!important;
    border-radius:18px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:linear-gradient(135deg,#0b2d6f 0%,#14c6e8 100%)!important;
    color:#fff!important;
    box-shadow:0 14px 30px rgba(20,198,232,.24)!important;
    position:relative!important;
}
.cart-icon i{color:#fff!important;}
.cart-badge{
    top:-7px!important;right:-6px!important;
    background:#14c6e8!important;
    color:#061a45!important;
    border:2px solid #fff!important;
    font-weight:900!important;
}

/* Compact dropdown */
.mega-menu{
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    background:#ffffff!important;
    border-top:1px solid #dbe8f7!important;
    box-shadow:0 24px 50px rgba(6,26,69,.13)!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateY(10px)!important;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important;
    z-index:4999!important;
    padding:22px 0!important;
}
.nav-item:hover>.mega-menu,
.nav-item:focus-within>.mega-menu{
    opacity:1!important;
    visibility:visible!important;
    transform:translateY(0)!important;
}
.mega-menu .container{
    max-width:1260px!important;
    padding-left:18px!important;
    padding-right:18px!important;
}
.mega-menu-content{padding:0!important;}
.hosting-grid,
.mega-menu .hosting-grid,
.mega-menu .hosting-grid[style]{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
}
.hosting-item{
    position:relative!important;
    min-height:102px!important;
    padding:20px 22px 18px 88px!important;
    border-radius:0!important;
    background:#ffffff!important;
    border:1px solid #dbe8f7!important;
    box-shadow:none!important;
    text-align:left!important;
    transition:all .18s ease!important;
    overflow:hidden!important;
}
.hosting-item:before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:3px!important;
    background:linear-gradient(180deg,#0b2d6f,#14c6e8)!important;
    opacity:0!important;
    transition:opacity .18s ease!important;
}
.hosting-item:hover{
    transform:none!important;
    border-color:#a9d9f4!important;
    background:#fbfdff!important;
    box-shadow:0 12px 26px rgba(6,26,69,.08)!important;
}
.hosting-item:hover:before{opacity:1!important;}
.hosting-item h3{
    margin:0 0 6px!important;
    padding:0!important;
    color:#061a45!important;
    font-size:16px!important;
    line-height:1.25!important;
    font-weight:900!important;
}
.hosting-item h3 i{
    position:absolute!important;
    left:24px!important;
    top:25px!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    border-radius:14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#eef8ff!important;
    color:#0b79d0!important;
    border:1px solid #bfe9fb!important;
    font-size:22px!important;
    transition:all .18s ease!important;
}
.hosting-item:hover h3 i{
    transform:none!important;
    background:linear-gradient(135deg,#0b2d6f,#14c6e8)!important;
    color:#ffffff!important;
    border-color:transparent!important;
}
.hosting-item p{
    margin:0!important;
    color:#617089!important;
    font-size:13px!important;
    line-height:1.45!important;
    max-width:100%!important;
}
.hosting-item .detail-link{
    display:none!important;
}

@media (min-width:769px) and (max-width:1180px){
    .navbar{gap:12px!important;}
    .logo img{height:58px!important;max-height:58px!important;}
    .nav-link{padding:0 12px!important;font-size:13px!important;}
    .header-actions a:not(.cart-icon){padding:0 12px!important;}
    .hosting-grid,.mega-menu .hosting-grid,.mega-menu .hosting-grid[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

@media (max-width:768px){
    .conia-promo-strip{min-height:32px!important;font-size:12px!important;}
    .conia-promo-strip .container{min-height:32px!important;padding:0 12px!important;}
    .conia-promo-strip a{display:none!important;}
    .top-bar{display:none!important;}
    .navbar{height:78px!important;min-height:78px!important;}
    .logo img{height:50px!important;max-height:50px!important;}
    .hosting-grid,.mega-menu .hosting-grid,.mega-menu .hosting-grid[style]{grid-template-columns:1fr!important;}
    .hosting-item{min-height:auto!important;padding:15px 16px 15px 66px!important;border-radius:14px!important;}
    .hosting-item h3 i{left:16px!important;top:16px!important;width:36px!important;height:36px!important;font-size:18px!important;}
}

/* CONIA header ve kompakt mega menu v6 */
.navbar{
    height:88px!important;
    min-height:88px!important;
}
.logo img{
    height:62px!important;
    max-height:62px!important;
}
.nav-menu{
    gap:7px!important;
}
.nav-link{
    height:44px!important;
    padding:0 14px!important;
    border-radius:14px!important;
    font-size:13px!important;
    font-weight:800!important;
    letter-spacing:-.2px!important;
}
.header-actions a:not(.cart-icon){
    height:44px!important;
    padding:0 14px!important;
    font-size:13px!important;
    border-radius:14px!important;
}
.cart-icon{
    width:48px!important;
    height:48px!important;
    border-radius:17px!important;
}
.mega-menu{
    padding:16px 0!important;
    box-shadow:0 22px 46px rgba(6,26,69,.12)!important;
}
.mega-menu .container{
    max-width:1280px!important;
}
.hosting-grid,
.mega-menu .hosting-grid,
.mega-menu .hosting-grid[style]{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr)) minmax(320px,400px)!important;
    gap:14px!important;
    align-items:stretch!important;
}
.hosting-item{
    min-height:86px!important;
    padding:16px 18px 14px 76px!important;
    border-radius:12px!important;
    background:#ffffff!important;
}
.hosting-item h3{
    font-size:14px!important;
    line-height:1.25!important;
    margin-bottom:5px!important;
    letter-spacing:-.15px!important;
}
.hosting-item h3 i{
    left:18px!important;
    top:18px!important;
    width:42px!important;
    height:42px!important;
    border-radius:11px!important;
    font-size:19px!important;
}
.hosting-item p{
    font-size:12.2px!important;
    line-height:1.45!important;
    color:#5d6b83!important;
}
.mega-promo-card{
    grid-column:4!important;
    grid-row:1 / span 2!important;
    min-height:186px!important;
    border-radius:14px!important;
    padding:24px 22px 20px 26px!important;
    background:linear-gradient(135deg,#dbeeff 0%,#eef7ff 48%,#ffffff 100%)!important;
    border:1px solid #b9dcff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    overflow:hidden!important;
    position:relative!important;
    box-shadow:0 14px 32px rgba(6,26,69,.08)!important;
}
.mega-promo-card:before{
    content:""!important;
    position:absolute!important;
    inset:auto -45px -55px auto!important;
    width:150px!important;
    height:150px!important;
    border-radius:50%!important;
    background:rgba(20,198,232,.16)!important;
}
.mega-promo-card h3{
    margin:0 0 12px!important;
    color:#0879e8!important;
    font-size:18px!important;
    font-weight:900!important;
    letter-spacing:-.25px!important;
}
.mega-promo-card ul{
    margin:0 0 16px!important;
    padding:0!important;
    list-style:none!important;
}
.mega-promo-card li{
    margin:0 0 7px!important;
    color:#24354f!important;
    font-size:12.5px!important;
    line-height:1.35!important;
    font-weight:600!important;
}
.mega-promo-card li i{
    color:#061a45!important;
    margin-right:7px!important;
    font-size:11px!important;
}
.promo-card-btn{
    height:38px!important;
    padding:0 16px!important;
    border-radius:8px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:linear-gradient(135deg,#0879e8,#14c6e8)!important;
    color:#ffffff!important;
    text-decoration:none!important;
    font-weight:900!important;
    font-size:12.5px!important;
    box-shadow:0 10px 22px rgba(8,121,232,.22)!important;
}
.promo-card-btn:hover{
    color:#fff!important;
    transform:translateY(-1px)!important;
}
.promo-card-visual{
    position:relative!important;
    flex:0 0 96px!important;
    height:96px!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.72)!important;
    border:1px solid rgba(8,121,232,.16)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-shadow:0 16px 30px rgba(6,26,69,.10)!important;
}
.promo-card-visual i{
    font-size:42px!important;
    color:#0879e8!important;
}
@media (min-width:769px) and (max-width:1180px){
    .navbar{height:82px!important;min-height:82px!important;gap:10px!important;}
    .logo img{height:56px!important;max-height:56px!important;}
    .nav-link{padding:0 10px!important;font-size:12.5px!important;}
    .hosting-grid,.mega-menu .hosting-grid,.mega-menu .hosting-grid[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    .mega-promo-card{grid-column:1 / -1!important;grid-row:auto!important;min-height:150px!important;}
}
@media (max-width:768px){
    .mega-promo-card{display:none!important;}
    .navbar{height:76px!important;min-height:76px!important;}
    .logo img{height:50px!important;max-height:50px!important;}
    .nav-link{font-size:13px!important;}
}


/* CONIA modern mega menu width and compact alignment v7 */
@media (min-width: 769px) {
    .main-header{
        position:relative!important;
        z-index:6000!important;
        overflow:visible!important;
    }
    .main-header > .container{
        max-width:1420px!important;
        width:calc(100% - 56px)!important;
        overflow:visible!important;
    }
    .navbar{
        position:relative!important;
        overflow:visible!important;
    }
    .nav-menu,
    .nav-item{
        position:static!important;
    }

    /* Mega menü container genişletildi */
    .mega-menu{
        left:50%!important;
        right:auto!important;
        width:min(1420px, calc(100vw - 48px))!important;
        max-width:min(1420px, calc(100vw - 48px))!important;
        transform:translate(-50%, 8px)!important;
        padding:14px 0!important;
        border-top:1px solid #dbe8f7!important;
        border-radius:0 0 18px 18px!important;
        box-shadow:0 22px 48px rgba(6,26,69,.13)!important;
        overflow:hidden!important;
    }
    .nav-item:hover > .mega-menu,
    .nav-item:focus-within > .mega-menu{
        transform:translate(-50%, 0)!important;
    }
    .mega-menu .container{
        max-width:100%!important;
        width:100%!important;
        padding-left:18px!important;
        padding-right:18px!important;
    }
    .mega-menu-content{
        padding:0!important;
    }

    /* Kartlar sıkıştırıldı; sağ avantaj kutusu korundu */
    .hosting-grid,
    .mega-menu .hosting-grid,
    .mega-menu .hosting-grid[style]{
        grid-template-columns:repeat(3, minmax(240px, 1fr)) minmax(330px, 400px)!important;
        gap:12px!important;
        align-items:stretch!important;
    }
    .hosting-item{
        min-height:74px!important;
        padding:13px 15px 12px 66px!important;
        border-radius:12px!important;
        background:#fff!important;
    }
    .hosting-item h3{
        font-size:13.2px!important;
        line-height:1.22!important;
        margin:0 0 4px!important;
        font-weight:900!important;
    }
    .hosting-item h3 i{
        left:15px!important;
        top:14px!important;
        width:38px!important;
        height:38px!important;
        border-radius:10px!important;
        font-size:17px!important;
    }
    .hosting-item p{
        font-size:11.4px!important;
        line-height:1.36!important;
        margin:0!important;
    }
    .detail-link{
        display:none!important;
    }

    .mega-promo-card{
        grid-column:4!important;
        grid-row:1 / span 2!important;
        min-height:160px!important;
        padding:20px 20px 18px 24px!important;
        border-radius:14px!important;
        gap:12px!important;
    }
    .mega-promo-card h3{
        font-size:16px!important;
        margin-bottom:10px!important;
    }
    .mega-promo-card li{
        font-size:11.8px!important;
        margin-bottom:6px!important;
    }
    .promo-card-btn{
        height:34px!important;
        padding:0 14px!important;
        font-size:11.7px!important;
    }
    .promo-card-visual{
        flex-basis:82px!important;
        width:82px!important;
        height:82px!important;
        border-radius:20px!important;
    }
    .promo-card-visual i{
        font-size:36px!important;
    }

    /* 1366px civarı ekranlarda da sarkmayı engelle */
    @media (max-width: 1366px){
        .main-header > .container{width:calc(100% - 28px)!important;}
        .mega-menu{width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important;}
        .hosting-grid,.mega-menu .hosting-grid,.mega-menu .hosting-grid[style]{
            grid-template-columns:repeat(3, minmax(210px, 1fr)) minmax(300px, 360px)!important;
            gap:10px!important;
        }
        .hosting-item{min-height:70px!important;padding:12px 13px 11px 60px!important;}
        .hosting-item h3{font-size:12.8px!important;}
        .hosting-item p{font-size:11px!important;line-height:1.32!important;}
        .hosting-item h3 i{left:13px!important;top:13px!important;width:36px!important;height:36px!important;font-size:16px!important;}
        .mega-promo-card{min-height:150px!important;padding:18px!important;}
    }
}

/* CONIA menu hover/active tone fix v8 */
@media (min-width: 769px) {
    .nav-link,
    .nav-link.active,
    .nav-item.active > .nav-link {
        color:#061a45!important;
        background:#f7fbff!important;
        border:1px solid #cfe3fb!important;
        box-shadow:0 7px 16px rgba(6,26,69,.035)!important;
        transform:none!important;
        position:relative!important;
        overflow:hidden!important;
    }

    .nav-link:before {
        content:""!important;
        position:absolute!important;
        left:14px!important;
        right:14px!important;
        bottom:0!important;
        height:3px!important;
        border-radius:8px 8px 0 0!important;
        background:linear-gradient(90deg,#0879e8,#14c6e8)!important;
        opacity:0!important;
        transition:opacity .2s ease!important;
    }

    .nav-link:hover,
    .nav-item:hover > .nav-link,
    .nav-item:focus-within > .nav-link,
    .nav-link.active:hover,
    .nav-item.active:hover > .nav-link {
        color:#061a45!important;
        background:#ffffff!important;
        border-color:#9ed8f4!important;
        box-shadow:0 10px 22px rgba(6,26,69,.07)!important;
        transform:none!important;
    }

    .nav-link.active:before,
    .nav-link:hover:before,
    .nav-item:hover > .nav-link:before,
    .nav-item:focus-within > .nav-link:before {
        opacity:1!important;
    }

    .nav-link i {
        width:26px!important;
        height:26px!important;
        min-width:26px!important;
        border-radius:9px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        color:#061a45!important;
        background:transparent!important;
        transition:all .2s ease!important;
        transform:none!important;
    }

    .nav-link:hover i,
    .nav-item:hover > .nav-link i,
    .nav-item:focus-within > .nav-link i,
    .nav-link.active i {
        color:#0879e8!important;
        background:#eaf8ff!important;
        box-shadow:inset 0 0 0 1px rgba(20,198,232,.22)!important;
        transform:none!important;
    }

    .nav-item:hover > .nav-link i.fa-chevron-down,
    .nav-item:focus-within > .nav-link i.fa-chevron-down,
    .nav-link.active i.fa-chevron-down {
        transform:rotate(180deg)!important;
    }
}

/* CONIA menu line and active state cleanup v9 */
@media (min-width: 769px) {
    .nav-link,
    .nav-link.active,
    .nav-item.active > .nav-link,
    .nav-item.current > .nav-link,
    .nav-item.open > .nav-link {
        color:#061a45!important;
        background:#f7fbff!important;
        border:1px solid #cfe3fb!important;
        box-shadow:0 7px 16px rgba(6,26,69,.035)!important;
        transform:none!important;
    }

    .nav-link:hover,
    .nav-item:hover > .nav-link,
    .nav-item:focus-within > .nav-link,
    .nav-link.active:hover,
    .nav-item.active:hover > .nav-link,
    .nav-item.current:hover > .nav-link,
    .nav-item.open > .nav-link {
        color:#061a45!important;
        background:#ffffff!important;
        border-color:#9ed8f4!important;
        box-shadow:0 10px 22px rgba(6,26,69,.07)!important;
        transform:none!important;
    }

    .nav-link:before,
    .nav-link:after,
    .nav-link.active:before,
    .nav-link.active:after,
    .nav-link:hover:before,
    .nav-link:hover:after,
    .nav-item:hover > .nav-link:before,
    .nav-item:hover > .nav-link:after,
    .nav-item:focus-within > .nav-link:before,
    .nav-item:focus-within > .nav-link:after {
        content:none!important;
        display:none!important;
        opacity:0!important;
        height:0!important;
        background:transparent!important;
        border:0!important;
    }

    .nav-link i,
    .nav-link.active i,
    .nav-item.active > .nav-link i {
        color:#061a45!important;
        background:transparent!important;
        box-shadow:none!important;
    }

    .nav-link:hover i,
    .nav-item:hover > .nav-link i,
    .nav-item:focus-within > .nav-link i {
        color:#0879e8!important;
        background:#eefaff!important;
        box-shadow:inset 0 0 0 1px rgba(20,198,232,.18)!important;
    }
}

/* CONIA menu border and clickable card fix v10 */
@media (min-width: 769px) {
    .nav-link,
    .nav-link.active,
    .nav-item.active > .nav-link,
    .nav-item.current > .nav-link,
    .nav-item.open > .nav-link {
        background:#f8fbff!important;
        color:#061a45!important;
        border:0!important;
        outline:0!important;
        box-shadow:0 8px 18px rgba(6,26,69,.045)!important;
        border-radius:14px!important;
        position:relative!important;
        overflow:hidden!important;
    }

    .nav-link:hover,
    .nav-item:hover > .nav-link,
    .nav-item:focus-within > .nav-link,
    .nav-link.active:hover,
    .nav-item.active:hover > .nav-link,
    .nav-item.current:hover > .nav-link,
    .nav-item.open > .nav-link {
        background:#ffffff!important;
        color:#061a45!important;
        border:0!important;
        outline:0!important;
        box-shadow:0 10px 24px rgba(6,26,69,.075)!important;
    }

    .nav-link:before,
    .nav-link.active:before,
    .nav-link:hover:before,
    .nav-item:hover > .nav-link:before,
    .nav-item:focus-within > .nav-link:before {
        content:""!important;
        display:block!important;
        position:absolute!important;
        left:16px!important;
        right:16px!important;
        bottom:0!important;
        height:2px!important;
        border-radius:999px!important;
        background:linear-gradient(90deg,#0879e8,#14c6e8)!important;
        opacity:0!important;
        transform:scaleX(.55)!important;
        transition:opacity .18s ease, transform .18s ease!important;
    }

    .nav-link.active:before,
    .nav-link:hover:before,
    .nav-item:hover > .nav-link:before,
    .nav-item:focus-within > .nav-link:before {
        opacity:1!important;
        transform:scaleX(1)!important;
    }

    .nav-link:after,
    .nav-link.active:after,
    .nav-link:hover:after,
    .nav-item:hover > .nav-link:after,
    .nav-item:focus-within > .nav-link:after {
        content:none!important;
        display:none!important;
    }

    .nav-link i,
    .nav-link.active i,
    .nav-item.active > .nav-link i {
        color:#061a45!important;
        background:transparent!important;
        box-shadow:none!important;
    }

    .nav-link:hover i,
    .nav-item:hover > .nav-link i,
    .nav-item:focus-within > .nav-link i {
        color:#0879e8!important;
        background:#eefaff!important;
        box-shadow:inset 0 0 0 1px rgba(20,198,232,.18)!important;
    }

    .mega-menu .hosting-item.is-clickable {
        cursor:pointer!important;
    }
}

/* CONIA focus outline clean fix v11 */
.main-header a,
.main-header button,
.main-header .logo,
.main-header .logo img,
.main-header .nav-link,
.main-header .header-actions a,
.main-header .cart-icon,
.top-bar a,
.announcement-bar a,
.mega-menu a,
.mega-menu .hosting-item,
.promo-card-btn {
    -webkit-tap-highlight-color: transparent !important;
}

.main-header a:focus,
.main-header a:active,
.main-header a:focus-visible,
.main-header button:focus,
.main-header button:active,
.main-header button:focus-visible,
.main-header .logo:focus,
.main-header .logo:active,
.main-header .logo:focus-visible,
.main-header .logo img:focus,
.main-header .logo img:active,
.main-header .nav-link:focus,
.main-header .nav-link:active,
.main-header .nav-link:focus-visible,
.main-header .header-actions a:focus,
.main-header .header-actions a:active,
.main-header .header-actions a:focus-visible,
.main-header .cart-icon:focus,
.main-header .cart-icon:active,
.main-header .cart-icon:focus-visible,
.top-bar a:focus,
.top-bar a:active,
.top-bar a:focus-visible,
.announcement-bar a:focus,
.announcement-bar a:active,
.announcement-bar a:focus-visible,
.mega-menu a:focus,
.mega-menu a:active,
.mega-menu a:focus-visible,
.mega-menu .hosting-item:focus,
.mega-menu .hosting-item:active,
.mega-menu .hosting-item:focus-visible,
.promo-card-btn:focus,
.promo-card-btn:active,
.promo-card-btn:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Logoya tıklanınca oluşan siyah çerçeveyi tamamen kapat */
.main-header .logo,
.main-header .logo:hover,
.main-header .logo:focus,
.main-header .logo:active,
.main-header .logo:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.main-header .logo img,
.main-header .logo:hover img,
.main-header .logo:focus img,
.main-header .logo:active img,
.main-header .logo:focus-visible img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Menü butonlarının focus durumunda siyah çerçeve almaması */
@media (min-width: 769px) {
    .main-header .nav-link:focus,
    .main-header .nav-link:active,
    .main-header .nav-link:focus-visible,
    .main-header .nav-item:focus-within > .nav-link {
        outline: none !important;
        border-color: transparent !important;
        box-shadow: 0 8px 18px rgba(6,26,69,.045) !important;
    }

    .main-header .nav-link:hover,
    .main-header .nav-item:hover > .nav-link {
        box-shadow: 0 10px 24px rgba(6,26,69,.075) !important;
    }
}

/* CONIA color harmony fix v12 */
:root{
    --conia-navy:#061a45;
    --conia-blue:#0879e8;
    --conia-cyan:#14c6e8;
    --conia-soft:#eefaff;
}

/* Kart ikonlarındaki yeşil tonları CONIA navy/cyan çizgisine çek */
.feature-modern-icon,
.whmcs-page-wrapper .feature-modern-icon,
.service-icon,
.feature-icon,
.os-icon,
.game-icon,
.hosting-icon,
.mega-menu .item-icon,
.mega-menu .hosting-icon,
.conia-benefit-icon {
    background:linear-gradient(135deg,#0879e8 0%,#14c6e8 100%) !important;
    color:#ffffff !important;
    box-shadow:0 14px 32px rgba(20,198,232,.22) !important;
}

.feature-modern-icon i,
.whmcs-page-wrapper .feature-modern-icon i,
.service-icon i,
.feature-icon i,
.os-icon i,
.game-icon i,
.hosting-icon i,
.mega-menu .item-icon i,
.mega-menu .hosting-icon i,
.conia-benefit-icon i {
    color:#ffffff !important;
}

/* Kart üst çizgileri ve hover kenarları da yeşil yerine cyan/navy olsun */
.feature-modern-card::before,
.whmcs-page-wrapper .feature-modern-card::before,
.service-card::before,
.package-card::before,
.game-card::before {
    background:linear-gradient(90deg,#061a45 0%,#0879e8 45%,#14c6e8 100%) !important;
}

.feature-modern-card:hover,
.whmcs-page-wrapper .feature-modern-card:hover,
.service-card:hover,
.package-card:hover,
.game-card:hover {
    border-color:rgba(20,198,232,.45) !important;
    box-shadow:0 20px 46px rgba(6,26,69,.10),0 0 0 1px rgba(20,198,232,.12) !important;
}

/* Sayfa içi yeşil butonları CONIA rengine uydur */
.btn-buy,
.btn-home,
.btn-submit,
.btn-package,
.btn-game,
.btn-offer,
.hero .btn-primary,
.hero-section .btn-primary,
.slider-content .btn-primary,
.price-card .btn-primary,
.package-card .btn-primary,
.whmcs-page-wrapper .btn-success,
.whmcs-page-wrapper .btn-primary {
    background:linear-gradient(135deg,#0879e8 0%,#14c6e8 100%) !important;
    border-color:#14c6e8 !important;
    color:#ffffff !important;
    box-shadow:0 12px 28px rgba(20,198,232,.22) !important;
}

.btn-buy:hover,
.btn-home:hover,
.btn-submit:hover,
.btn-package:hover,
.btn-game:hover,
.btn-offer:hover,
.hero .btn-primary:hover,
.hero-section .btn-primary:hover,
.slider-content .btn-primary:hover,
.price-card .btn-primary:hover,
.package-card .btn-primary:hover,
.whmcs-page-wrapper .btn-success:hover,
.whmcs-page-wrapper .btn-primary:hover {
    background:linear-gradient(135deg,#061a45 0%,#0879e8 100%) !important;
    border-color:#0879e8 !important;
    color:#ffffff !important;
    transform:translateY(-1px);
}

/* Vurgulu yazı/ikon renkleri */
.feature-item i,
.price-monthly,
.price-one-time,
.ext-name,
.sidebar-title,
.corporate-menu h3,
.contact-card i,
.description-section h3 {
    color:#0879e8 !important;
}

/* CONIA mobile menu click/focus fix v13 */
@media (max-width: 768px) {
    html.menu-open,
    body.menu-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    .main-header {
        z-index: 99970 !important;
        overflow: visible !important;
    }

    .mobile-menu-btn,
    body.menu-open .mobile-menu-btn {
        z-index: 100000 !important;
        pointer-events: auto !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .menu-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        background: rgba(6, 26, 69, .58) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 99980 !important;
        transition: opacity .22s ease, visibility .22s ease !important;
    }

    .menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .nav-menu,
    #navMenu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 86vw !important;
        max-width: 390px !important;
        min-width: 285px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 86px 0 28px !important;
        margin: 0 !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(105%) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 99990 !important;
        box-shadow: -22px 0 55px rgba(6, 26, 69, .20) !important;
        transition: transform .25s ease !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .nav-menu.active,
    #navMenu.active {
        transform: translateX(0) !important;
        right: 0 !important;
        pointer-events: auto !important;
        z-index: 99990 !important;
    }

    .nav-menu *,
    #navMenu * {
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .nav-item {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        position: relative !important;
        border-bottom: 1px solid #edf3fa !important;
    }

    .nav-link,
    .nav-link.active,
    .nav-item.active > .nav-link {
        width: 100% !important;
        height: auto !important;
        min-height: 56px !important;
        padding: 17px 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #ffffff !important;
        color: #061a45 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        line-height: 1.25 !important;
    }

    .nav-link:hover,
    .nav-link:focus,
    .nav-item.active > .nav-link {
        background: #f5faff !important;
        color: #061a45 !important;
        box-shadow: none !important;
    }

    .nav-link:before,
    .nav-link:after {
        display: none !important;
        content: none !important;
    }

    .nav-link i {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        color: #0879e8 !important;
        background: #eefaff !important;
        transform: none !important;
        margin-left: 10px !important;
        font-size: 12px !important;
    }

    .nav-item.active > .nav-link i {
        transform: rotate(180deg) !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #0879e8, #14c6e8) !important;
    }

    .mega-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: #f6f9fd !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: auto !important;
        pointer-events: auto !important;
    }

    .nav-item.active > .mega-menu {
        display: block !important;
    }

    .mega-menu .container,
    .mega-menu-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 12px 16px !important;
        margin: 0 !important;
    }

    .hosting-grid,
    .mega-menu .hosting-grid,
    .mega-menu .hosting-grid[style] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .hosting-item {
        min-height: 0 !important;
        padding: 13px 14px 13px 58px !important;
        background: #ffffff !important;
        border: 1px solid #dfe8f4 !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        position: relative !important;
    }

    .hosting-item h3 {
        font-size: 14px !important;
        margin: 0 0 5px !important;
        line-height: 1.25 !important;
    }

    .hosting-item p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    .hosting-item h3 i {
        position: absolute !important;
        left: 14px !important;
        top: 14px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
    }

    .detail-link {
        display: none !important;
    }

    .mega-promo-card {
        display: none !important;
    }
}


/* CONIA mobile menu layer fix v14 */
@media (max-width: 768px) {
    html.menu-open,
    body.menu-open {
        overflow: hidden !important;
        touch-action: auto !important;
    }

    body.menu-open .main-header,
    body.menu-open header.main-header {
        position: relative !important;
        z-index: 2147483600 !important;
        overflow: visible !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    body.menu-open .top-bar,
    body.menu-open .conia-promo-strip,
    body.menu-open .whmcs-page-wrapper,
    body.menu-open main,
    body.menu-open .slider-section,
    body.menu-open .hero-section {
        z-index: auto !important;
    }

    .menu-overlay,
    body.menu-open .menu-overlay,
    .menu-overlay.active {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        background: rgba(6, 26, 69, .52) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 2147483000 !important;
        filter: none !important;
        -webkit-filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.menu-open .menu-overlay.active,
    .menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.menu-open #navMenu,
    body.menu-open .nav-menu,
    #navMenu.active,
    .nav-menu.active {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        transform: translateX(0) !important;
        width: 88vw !important;
        max-width: 390px !important;
        min-width: 285px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        background: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 2147483640 !important;
        filter: none !important;
        -webkit-filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: -22px 0 55px rgba(6, 26, 69, .24) !important;
    }

    body.menu-open #navMenu *,
    body.menu-open .nav-menu * {
        pointer-events: auto !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    body.menu-open .mobile-menu-btn,
    body.menu-open #mobileMenuBtn {
        position: fixed !important;
        top: 18px !important;
        right: 18px !important;
        z-index: 2147483647 !important;
        pointer-events: auto !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    body.menu-open #navMenu .nav-link,
    body.menu-open .nav-menu .nav-link,
    body.menu-open #navMenu .hosting-item,
    body.menu-open .nav-menu .hosting-item {
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        -webkit-filter: none !important;
    }
}

/* CONIA mobile submenu full list fix v15 */
@media (max-width: 768px) {
    body.menu-open #navMenu,
    body.menu-open .nav-menu,
    #navMenu.active,
    .nav-menu.active {
        width: 88vw !important;
        max-width: 410px !important;
        padding: 76px 0 24px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.menu-open #navMenu .nav-item,
    body.menu-open .nav-menu .nav-item,
    #navMenu.active .nav-item,
    .nav-menu.active .nav-item {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    body.menu-open #navMenu .nav-item.active > .mega-menu,
    body.menu-open .nav-menu .nav-item.active > .mega-menu,
    #navMenu.active .nav-item.active > .mega-menu,
    .nav-menu.active .nav-item.active > .mega-menu {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: #f6f9fd !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.menu-open #navMenu .mega-menu .container,
    body.menu-open .nav-menu .mega-menu .container,
    body.menu-open #navMenu .mega-menu-content,
    body.menu-open .nav-menu .mega-menu-content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 8px 12px 12px !important;
        margin: 0 !important;
    }

    body.menu-open #navMenu .hosting-grid,
    body.menu-open .nav-menu .hosting-grid,
    #navMenu.active .hosting-grid,
    .nav-menu.active .hosting-grid,
    body.menu-open #navMenu .mega-menu .hosting-grid[style],
    body.menu-open .nav-menu .mega-menu .hosting-grid[style] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.menu-open #navMenu .hosting-item,
    body.menu-open .nav-menu .hosting-item,
    #navMenu.active .hosting-item,
    .nav-menu.active .hosting-item {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 11px 12px 11px 54px !important;
        border-radius: 13px !important;
        overflow: visible !important;
        cursor: pointer !important;
    }

    body.menu-open #navMenu .hosting-item h3,
    body.menu-open .nav-menu .hosting-item h3,
    #navMenu.active .hosting-item h3,
    .nav-menu.active .hosting-item h3 {
        font-size: 13.5px !important;
        line-height: 1.2 !important;
        margin: 0 0 3px !important;
    }

    body.menu-open #navMenu .hosting-item p,
    body.menu-open .nav-menu .hosting-item p,
    #navMenu.active .hosting-item p,
    .nav-menu.active .hosting-item p {
        font-size: 11.5px !important;
        line-height: 1.32 !important;
        margin: 0 !important;
        display: block !important;
    }

    body.menu-open #navMenu .hosting-item h3 i,
    body.menu-open .nav-menu .hosting-item h3 i,
    #navMenu.active .hosting-item h3 i,
    .nav-menu.active .hosting-item h3 i {
        left: 13px !important;
        top: 12px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 11px !important;
        font-size: 14px !important;
    }

    body.menu-open #navMenu .mega-promo-card,
    body.menu-open .nav-menu .mega-promo-card,
    #navMenu.active .mega-promo-card,
    .nav-menu.active .mega-promo-card {
        display: none !important;
    }

    body.menu-open #mobileMenuBtn,
    body.menu-open .mobile-menu-btn {
        top: 16px !important;
        right: 16px !important;
    }
}

@media (max-width: 430px) {
    body.menu-open #navMenu,
    body.menu-open .nav-menu,
    #navMenu.active,
    .nav-menu.active {
        width: 88vw !important;
        padding-top: 72px !important;
    }

    body.menu-open #navMenu .nav-link,
    body.menu-open .nav-menu .nav-link,
    #navMenu.active .nav-link,
    .nav-menu.active .nav-link {
        min-height: 50px !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    body.menu-open #navMenu .hosting-item p,
    body.menu-open .nav-menu .hosting-item p,
    #navMenu.active .hosting-item p,
    .nav-menu.active .hosting-item p {
        font-size: 11px !important;
        line-height: 1.28 !important;
    }
}