/**
 * ==========================================================================
 * PERFECT DARK THEME - COMPLETE SYSTEM OVERHAUL
 * Obsidian Black & Dark Sapphire Royal Blue
 * For WiseCP Modern Theme
 * ==========================================================================
 */

:root {
    --dm-bg-root: #070a13;
    --dm-bg-card: #0d1424;
    --dm-bg-card-hover: #111b30;
    --dm-bg-card-elevated: #0f182c;
    --dm-bg-input: #060911;
    --dm-bg-header: #090e1c;
    --dm-bg-footer: #04070d;
    --dm-border-subtle: rgba(56, 189, 248, 0.15);
    --dm-border-glow: rgba(56, 189, 248, 0.45);
    --dm-blue-primary: #0284c7;
    --dm-blue-dark: #1e3a8a;
    --dm-blue-glow: #38bdf8;
    --dm-blue-royal: #1d4ed8;
    --dm-text-heading: #ffffff;
    --dm-text-body: #cbd5e1;
    --dm-text-muted: #94a3b8;
}

/* ==========================================================================
   1. GLOBAL RESET & BASE STYLING
   ========================================================================== */
html, body, #home, #muspanel, #modernpanel, #wisecp, #fullwidth {
    background: #070a13 !important;
    background-color: #070a13 !important;
    background-image: none !important;
    color: #cbd5e1 !important;
    font-family: 'Urbanist', 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    scrollbar-color: #0284c7 #070a13;
}

/* Global scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #070a13;
}
::-webkit-scrollbar-track {
    background-color: #070a13;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1e3a8a 0%, #0284c7 100%);
    border-radius: 5px;
    border: 2px solid #070a13;
}
::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
}

/* Eliminate all white waves, inset shadows, and background images that cause white glow */
.headerwhite,
#home .headerwhite,
#header2 .headerwhite,
#muspanel .headerwhite,
.header .headerwhite {
    display: none !important;
    background-image: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Wipe out all bright inset box-shadows across all sections */
.tablopaketler,
.nedenbiz,
.anascript,
.blogvehaber,
.domainozellikler,
.anatanitim,
.products_list,
.musterigorusleri {
    box-shadow: none !important;
    background-image: none !important;
}

/* Global Headings & Typography */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
p, span, label, li {
    color: #cbd5e1;
}
a {
    color: #38bdf8;
    text-decoration: none;
    transition: all 0.2s ease;
}
a:hover {
    color: #93c5fd;
}

/* Global Input / Placeholder Styling */
::placeholder,
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    opacity: 1 !important;
}
input, select, textarea {
    background: #060911 !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    outline: none !important;
    box-shadow: none !important;
}
input:focus, select:focus, textarea:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.35) !important;
    background: #090e1a !important;
}

/* ==========================================================================
   2. HEADER & NAVIGATION (Homepage & Inner Pages)
   ========================================================================== */
.header,
#header2,
.header2,
.fullwidthhead {
    background: linear-gradient(180deg, #090e1c 0%, #070a13 100%) !important;
    background-color: #070a13 !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6) !important;
    height: auto !important;
    min-height: 100px;
}
#home .header {
    background: linear-gradient(180deg, #090e1c 0%, #070a13 100%) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
}
.head {
    background: transparent !important;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Modern Pill Style Action Buttons */
.headbutonlar a {
    background: rgba(14, 165, 233, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #f8fafc !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}
.headbutonlar a:hover {
    background: rgba(14, 165, 233, 0.22) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(2, 132, 199, 0.4) !important;
    transform: translateY(-1px);
}

/* Sepet Butonu - Ultra Modern Badge Pill & Glowing Cart Icon */
.headbutonlar #headicon,
#fullwidth .headbutonlar #headicon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.25) 0%, rgba(30, 58, 138, 0.35) 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 50px !important;
    min-width: 44px !important;
    height: 38px !important;
    padding: 4px 14px !important;
    margin-left: 12px !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.headbutonlar #headicon:hover,
#fullwidth .headbutonlar #headicon:hover {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5) !important;
    transform: translateY(-2px);
}
.headbutonlar #headicon i,
.headbutonlar #headicon .fa-shopping-cart {
    color: #38bdf8 !important;
    font-size: 16px !important;
    margin-right: 6px !important;
    transition: color 0.2s ease !important;
}
.headbutonlar #headicon:hover i {
    color: #ffffff !important;
}
.headbutonlar .basket-count,
#fullwidth .headbutonlar #headicon .basket-count {
    position: static !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Nav Menu */
.menu ul li a {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.2s ease;
}
.menu ul li a:hover,
.menu ul li.active a {
    color: #38bdf8 !important;
}

/* Navigation Dropdown Arrow (.ulup) - High-end Sapphire Glow */
.ulup {
    color: #0b1222 !important;
    text-shadow: 0 -2px 0 rgba(56, 189, 248, 0.3) !important;
}

/* ==========================================================================
   ULTRA LUXURY DROPDOWNS & MEGA MENUS
   ========================================================================== */
.menu ul li ul,
.megamenu,
#megamenu,
.mega,
#megamenuli ul {
    background: #090e1a !important;
    background-color: #090e1a !important;
    background-image: none !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 18px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(2, 132, 199, 0.25) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 16px !important;
    overflow: hidden !important;
}

/* Remove any background photo/pattern inside megamenu wrapper */
#megamenu div[style*="background-image"],
#megamenu div[style*="background"] {
    background-image: none !important;
    background-color: transparent !important;
}

/* Standard Dropdown Menu Items */
.menu ul li ul li a {
    color: #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    font-size: 14.5px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
}

.menu ul li ul li a:hover {
    background: linear-gradient(90deg, rgba(2, 132, 199, 0.25) 0%, rgba(56, 189, 248, 0.1) 100%) !important;
    color: #38bdf8 !important;
    padding-left: 20px !important;
    border-left: 2px solid #38bdf8 !important;
}

/* Mega Menu Service Cards - Ultra Luxury Bento Style */
#megamenuservice {
    background: linear-gradient(165deg, rgba(17, 27, 49, 0.95) 0%, rgba(9, 14, 26, 0.98) 100%) !important;
    background-image: none !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
    padding: 20px 18px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-block !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

#megamenuservice:hover {
    border-color: rgba(56, 189, 248, 0.75) !important;
    box-shadow: 0 18px 40px rgba(2, 132, 199, 0.35), 0 0 25px rgba(56, 189, 248, 0.2) !important;
    transform: translateY(-5px) !important;
}

#megamenuservice::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #38bdf8, #818cf8, transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

#megamenuservice:hover::before {
    opacity: 1 !important;
}

#megamenuservice a {
    color: #94a3b8 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    display: block !important;
    background: transparent !important;
}

#megamenuservice a:hover {
    color: #e2e8f0 !important;
    background: transparent !important;
}

#megamenuservice i {
    color: #38bdf8 !important;
    font-size: 44px !important;
    display: inline-block !important;
    margin-bottom: 12px !important;
    filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.5)) !important;
    transition: transform 0.3s ease !important;
}

#megamenuservice:hover i {
    transform: scale(1.1) !important;
    color: #ffffff !important;
}

#megamenuservice h5 {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin: 8px 0 6px 0 !important;
}

#megamenuservice strong {
    color: #38bdf8 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

/* Slogan / Bottom Heading in Mega Menu (Full Performans...) */
#megamenu h4 {
    color: #f1f5f9 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    margin-top: 24px !important;
    margin-bottom: 8px !important;
    text-align: center !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
    padding: 10px 20px !important;
    background: rgba(2, 132, 199, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 30px !important;
    display: inline-block !important;
}

#megamenu h4 strong {
    color: #38bdf8 !important;
    font-weight: 800 !important;
}

/* Corporate Mega Menu Links & Columns */
#megamenu #kurumsalmenu,
#megamenu #corporatemenu {
    background-image: none !important;
    background-color: transparent !important;
}

#megamenu #kurumsalmenulinks h4 {
    color: #38bdf8 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 0 8px 0 !important;
    text-align: left !important;
    display: block !important;
}

#megamenu #kurumsalmenulinks a {
    color: #cbd5e1 !important;
    text-shadow: none !important;
    font-size: 14px !important;
}

#megamenu #kurumsalmenulinks a:hover {
    color: #38bdf8 !important;
    padding-left: 6px !important;
}

#megamenu #kurumsalmenulinks h3 {
    background: rgba(2, 132, 199, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
}

#megamenu #kurumsalmenulinks h3 span {
    color: #94a3b8 !important;
}

/* Sayfa Başlığı / Breadcrumbs in Header */
.sayfabaslik,
#header2 .sayfabaslik {
    background: rgba(6, 9, 17, 0.75) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 12px !important;
    padding: 15px 25px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
.sayfabaslik h1 {
    color: #ffffff !important;
    font-weight: 700 !important;
}
.sayfabaslik a {
    color: #94a3b8 !important;
}
.sayfabaslik a:hover {
    color: #38bdf8 !important;
}
.paypasbutonlar a {
    background: #0d1527 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}
.paypasbutonlar a:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
}

/* ==========================================================================
   3. DOMAIN SEARCH SECTION
   ========================================================================== */
.homedomainarea-con {
    background: transparent !important;
    padding: 20px 0;
}
.homedomainarea {
    background: linear-gradient(135deg, #0d1629 0%, #080d19 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(2, 132, 199, 0.2) !important;
    padding: 35px 30px !important;
    color: #ffffff !important;
}
.homedomainarea h1, .homedomainarea h2, .homedomainarea h3 {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 700 !important;
}
.homedomainarea p, .homedomainarea span {
    color: #94a3b8 !important;
}
.domaincheckinput, .homedomainarea input[type="text"] {
    background: #060911 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    outline: none !important;
    transition: all 0.25s ease;
}
.domaincheckinput:focus, .homedomainarea input[type="text"]:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.35) !important;
    background: #080d18 !important;
}
.domain-check-btn, .homedomainarea .gonderbtn, .homedomainarea input[type="submit"] {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 14px 30px !important;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.4) !important;
    transition: all 0.25s ease !important;
}
.domain-check-btn:hover, .homedomainarea .gonderbtn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%) !important;
    box-shadow: 0 6px 25px rgba(2, 132, 199, 0.6) !important;
    transform: translateY(-2px);
}
.domain-prices, .homedomainarea .domainexts span {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(56, 189, 248, 0.15) !important;
    border-radius: 8px !important;
    color: #38bdf8 !important;
    padding: 4px 10px !important;
    display: inline-block;
    margin: 3px;
    font-weight: 600;
}

/* ==========================================================================
   4. HOSTING & PRICING PACKAGES (3-Column Layout & Modern High-End Cards)
   ========================================================================== */
.tablopaketler {
    background: transparent !important;
    box-shadow: none !important;
    padding: 30px 0 !important;
}
.pakettitle h1, .pakettitle h2, .pakettitle h3 {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 800 !important;
}
.pakettitle h4, .pakettitle p {
    color: #94a3b8 !important;
    font-size: 16px !important;
}

/* 1px subtle divider lines */
.paketline {
    height: 1px !important;
    background: rgba(56, 189, 248, 0.16) !important;
    border: none !important;
    margin: 15px auto !important;
    width: 80% !important;
    display: block !important;
}

/* Period selector tabs */
.miotab-labels {
    margin-bottom: 30px !important;
}
.miotab-labels a {
    background: #0c1427 !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    color: #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    margin: 4px !important;
    font-weight: 600 !important;
    display: inline-block;
    transition: all 0.25s ease !important;
}
.miotab-labels a:hover,
.miotab-labels a.active {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4) !important;
    transform: translateY(-1px);
}

/* Hosting Packages: 3-column layout side by side (31% width, 1% margin) */
.tablepaket,
.tablopaketler .tablepaket,
.tablepaket:first-child:nth-last-child(3),
.tablepaket:first-child:nth-last-child(3) ~ .tablepaket,
.tablepaket:first-child:nth-last-child(4),
.tablepaket:first-child:nth-last-child(4) ~ .tablepaket,
.tablepaket:first-child:nth-last-child(8),
.tablepaket:first-child:nth-last-child(8) ~ .tablepaket {
    width: 31% !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin: 12px 1% !important;
    box-sizing: border-box !important;
}

@media (max-width: 992px) {
    .tablepaket,
    .tablopaketler .tablepaket {
        width: 48% !important;
        margin: 10px 1% !important;
    }
}
@media (max-width: 640px) {
    .tablepaket,
    .tablopaketler .tablepaket {
        width: 96% !important;
        margin: 12px auto !important;
        display: block !important;
    }
}

/* Ultra Modern Hosting Package Card Design */
.tablepaket {
    background: linear-gradient(180deg, #0d1527 0%, #080d19 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 18px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 15px rgba(2, 132, 199, 0.1) !important;
    color: #cbd5e1 !important;
    padding: 35px 24px !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}
.tablepaket:hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(2, 132, 199, 0.3) !important;
}
.tablepaket.active,
#tableactive {
    border-color: #38bdf8 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(2, 132, 199, 0.35) !important;
}

/* Package Title & Headings */
.tpakettitle {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    padding-bottom: 5px !important;
    margin-top: 10px !important;
}
.tablepaket h4 {
    color: #94a3b8 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 12px 0 6px 0 !important;
    font-weight: 600 !important;
}
.amount_spot_view, .tableslogan {
    color: #38bdf8 !important;
    font-weight: 800 !important;
    font-size: 36px !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 0 25px rgba(2, 132, 199, 0.45) !important;
}
.tablepaket strong,
.tablepaket b {
    color: #ffffff !important;
    font-weight: 600 !important;
}
.tablepaket span {
    color: #cbd5e1 !important;
    line-height: 1.8 !important;
}

/* Modern "Sepete Ekle" Order Button */
.tablepaket a.sbtn, 
.tablepaket a.yesilbtn, 
.tablepaket .gonderbtn {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
    padding: 14px 20px !important;
    display: inline-block !important;
    width: 88% !important;
    margin-top: 22px !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-transform: uppercase !important;
}
.tablepaket a.sbtn:hover, 
.tablepaket a.yesilbtn:hover, 
.tablepaket .gonderbtn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%) !important;
    box-shadow: 0 10px 28px rgba(2, 132, 199, 0.65) !important;
    transform: translateY(-2px) scale(1.02) !important;
    border-color: #38bdf8 !important;
}

/* ==========================================================================
   5. WHY CHOOSE US / FEATURES SECTION (Neden Bizi Tercih Etmelisiniz?)
   Yan yana 3'lü (3x2) Grid, Ultra Profesyonel Koyu Cam Kartlar & 3D Hover
   ========================================================================== */
.nedenbiz {
    background: linear-gradient(180deg, #070a13 0%, #0c1427 50%, #070a13 100%) !important;
    background-image: none !important;
    padding: 80px 0 !important;
    box-shadow: none !important;
}

/* 3'lü Yan Yana Kart Yapısı: %31 Genişlik */
.ozellik,
.nedenbiz .ozellik {
    width: 31% !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin: 14px 1% !important;
    box-sizing: border-box !important;
    background: linear-gradient(145deg, #0d1629 0%, #080d19 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 20px !important;
    padding: 35px 25px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    text-align: center !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Animasyonlu Ultra Parlak Hover Efekti */
.ozellik:hover,
.nedenbiz .ozellik:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(2, 132, 199, 0.35) !important;
}
.ozellik::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.ozellik:hover::after {
    opacity: 1;
}

/* Servis İkonu - Modern Glowing Neon Daire */
.servisikon,
.ozellik .servisikon {
    width: 90px !important;
    height: 90px !important;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.2) 0%, rgba(30, 58, 138, 0.3) 100%) !important;
    border: 2px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px auto !important;
    line-height: normal !important;
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.25) !important;
    transition: all 0.35s ease !important;
}
.ozellik:hover .servisikon {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 10px 30px rgba(2, 132, 199, 0.5) !important;
    transform: scale(1.08) rotate(4deg) !important;
}
.servisikonalt,
.ozellik .servisikonalt {
    border: none !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    margin: 0 !important;
}
.servisikon i,
.servisikonalt i,
.ozellik i {
    font-size: 38px !important;
    color: #38bdf8 !important;
    transition: color 0.3s ease !important;
}
.ozellik:hover i {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8) !important;
}

/* Başlık ve Açıklamalar */
.ozellik h4 {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    margin: 15px 0 12px 0 !important;
    letter-spacing: -0.01em !important;
}
.ozellik p {
    color: #94a3b8 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

@media (max-width: 992px) {
    .ozellik,
    .nedenbiz .ozellik {
        width: 48% !important;
        margin: 10px 1% !important;
    }
}
@media (max-width: 640px) {
    .ozellik,
    .nedenbiz .ozellik {
        width: 96% !important;
        margin: 12px auto !important;
        display: block !important;
    }
}

/* Product Features (Sunucu / VDS Sayfası Özellik Kutuları) */
.urunozellikleri {
    background: transparent !important;
}
.urunozellik {
    background: #0d1527 !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    color: #cbd5e1 !important;
    transition: all 0.3s ease !important;
}
.urunozellik:hover {
    border-color: #38bdf8 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(2, 132, 199, 0.25) !important;
    transform: translateY(-4px);
}
.urunozellik h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-top: 10px !important;
}
.urunozellik p {
    color: #94a3b8 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}
.urunozellik i {
    color: #38bdf8 !important;
}
.urunozellikleri .fa-caret-right {
    color: rgba(56, 189, 248, 0.4) !important;
}
.urunozellikleri .fa-check-circle {
    color: #10b981 !important;
    background: transparent !important;
}

/* ==========================================================================
   6. ABOUT US / INTRO SECTION (.anatanitim)
   ========================================================================== */
.anatanitim {
    background: #070a13 !important;
    background-image: none !important;
    color: #cbd5e1 !important;
    border-top: 1px solid rgba(56, 189, 248, 0.12) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.12) !important;
    box-shadow: none !important;
}
.anatanitim h1, .anatanitim h2, .anatanitim h3, .anatanitim h4 {
    color: #ffffff !important;
}
.anatanitim .gonderbtn {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4) !important;
}
.anatanitim .gonderbtn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 25px rgba(2, 132, 199, 0.6) !important;
}

/* ==========================================================================
   7. SOFTWARES / SCRIPTS & HOVER BUTON ÇAKIŞMASI ÇÖZÜMÜ
   ========================================================================== */
.anascript,
#scriptlistesi {
    background: #070a13 !important;
    background-image: none !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(56, 189, 248, 0.12) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.12) !important;
    padding: 60px 0 !important;
}
.scriptlisttitle {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
    font-size: 22px !important;
    margin-bottom: 25px !important;
}

/* Software Product Cards */
.anascriptlist,
.scriptkutu {
    background: #0d1527 !important;
    background-color: #0d1527 !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
    color: #cbd5e1 !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}
.anascriptlist:hover,
.scriptkutu:hover {
    border-color: #38bdf8 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(2, 132, 199, 0.3) !important;
    transform: translateY(-5px) !important;
}
.anascriptlist h4,
.anascriptlist h5,
.scriptkutu h4,
.scriptkutu h5 {
    color: #ffffff !important;
}
.anascriptlist strong {
    color: #ffffff !important;
}
.anascriptlist .amount_spot_view {
    color: #38bdf8 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
}
.anascriptlist .padding5 {
    padding: 15px !important;
}

/* Hover Overlay (.scripthoverinfo): Butonların rozetlerin altında kalmaması için */
.scripthoverinfo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 190px !important;
    background: rgba(7, 10, 19, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    z-index: 25 !important;
    transition: all 0.3s ease !important;
}
.scripthoverinfo a {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4) !important;
    transition: all 0.25s ease !important;
}
.scripthoverinfo a:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.7) !important;
    transform: scale(1.12) !important;
}
.scripthoverinfo a i {
    font-size: 16px !important;
    margin: 0 !important;
}

/* ==========================================================================
   ROZET DÜZELTMESİ (Badge Styling & Z-Index)
   z-index: 10 ile hover butonlarının (z-index: 25) üstüne ASLA binmez!
   ========================================================================== */
.scriptozellk,
.anascriptlist .scriptozellk,
#scriptlistesi .scriptozellk {
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    background: #047857 !important;
    color: #ffffff !important;
    border: 1px solid #10b981 !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 9px !important;
    letter-spacing: 0.02em !important;
    z-index: 10 !important; /* Butonların altında kalacak şekilde güvenli z-index */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    text-align: center !important;
    pointer-events: none !important; /* Tıklamayı engellemez */
}

/* İkinci Rozet: Mobil Uyumlu (#mobiluyum) - Üst üste binmeyi engellemek için top: 40px */
#mobiluyum,
.anascriptlist #mobiluyum,
#scriptlistesi #mobiluyum {
    top: 40px !important;
    left: 12px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid #38bdf8 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Kart üzerine gelindiğinde rozetlerin opaklığı azalsın ki butonlar pırıl pırıl parlasın */
.anascriptlist:hover .scriptozellk {
    opacity: 0.4 !important;
    transition: opacity 0.25s ease !important;
}

/* Software Categories Sidebar */
.scriptkategoriler {
    background: #090e1b !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    border-radius: 12px !important;
    padding: 10px 0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}
.scriptkategoriler a {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-right: none !important;
    padding: 12px 18px !important;
    display: block !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}
.scriptkategoriler a:hover,
.scriptkategoriler #scataktif {
    background: rgba(2, 132, 199, 0.15) !important;
    color: #38bdf8 !important;
    border-left: 3px solid #38bdf8 !important;
    padding-left: 22px !important;
}
.scriptkategoriler a span {
    color: #64748b !important;
    font-size: 12px;
}

/* Search Box in Software Page */
#searchForm input[type="search"],
#searchForm input[type="text"] {
    background: #060911 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #ffffff !important;
    border-radius: 8px 0 0 8px !important;
    padding: 10px 14px !important;
}
#searchForm a.sbtn {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 0 8px 8px 0 !important;
    color: #ffffff !important;
    line-height: 40px !important;
    text-align: center !important;
}

/* ==========================================================================
   8. CUSTOMER TESTIMONIALS & MODERN CAROUSEL DESIGN (Görsel 1 Çözümü)
   ========================================================================== */
.musterigorusleri {
    background: #070a13 !important;
    background-image: none !important;
    padding: 70px 0 80px 0 !important;
    box-shadow: none !important;
}

/* Carousel Konteyner Boyut ve Boşlukları */
.musterigorusleri .list_carousel,
.musterigorusleri .list_carousel ul,
#foo2,
#foo2 li {
    height: auto !important;
    min-height: 310px !important;
    overflow: visible !important;
}

/* Modern Yorum Balonu (Glassmorphic Midnight Card) */
.musyorum {
    background: linear-gradient(145deg, #0d1629 0%, #080d19 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.25) !important;
    color: #f8fafc !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(2, 132, 199, 0.15) !important;
    padding: 32px 35px !important;
    position: relative !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}
.musyorum p, .musyorum span, .musyorum {
    color: #e2e8f0 !important;
}

/* Yorum balonu altındaki ok simgesi */
#mgorusarrow {
    color: #0d1629 !important;
    font-size: 45px !important;
    margin-top: -38px !important;
    margin-left: 45px !important;
    z-index: 10 !important;
}

/* Yorum Yapan Kişi Bilgisi & Kusursuz Profil Resmi */
.yorumyapan {
    display: flex !important;
    align-items: center !important;
    margin-top: 18px !important;
    margin-left: 30px !important;
    width: auto !important;
    float: none !important;
    padding-bottom: 25px !important;
}
.yorumyapan img {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    border-radius: 50% !important;
    border: 2.5px solid #0284c7 !important;
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.5) !important;
    margin-right: 20px !important;
    object-fit: cover !important;
    float: none !important;
    display: block !important;
}
.yorumyapan h3 {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}
.yorumyapan h4 {
    color: #38bdf8 !important;
    font-size: 14px !important;
    margin: 4px 0 0 0 !important;
    float: none !important;
    width: auto !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   SAYFALAMA / NUMARALANDIRMA (.pager) ULTRA MODERN PILL & BULLET DİZAYNI
   (Çirkin 1, 2, 3 Numaraları Yerine Şık Koyu Safir Hap Pagination)
   ========================================================================== */
.pager,
#pager2,
#pager3,
.haberblog .pager {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 20px auto 0 auto !important;
    float: none !important;
    text-align: center !important;
    position: relative !important;
    z-index: 30 !important;
}

/* Pager Butonları: Ultra Modern Safir Haplar */
.pager a,
#pager2 a,
#pager3 a,
.haberblog .pager a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 10px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    font-size: 0 !important;             /* Rakamları gizle */
    text-indent: -9999px !important;     /* Rakamları dışarı at */
    overflow: hidden !important;
    white-space: nowrap !important;
    color: transparent !important;
    margin: 0 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

/* Hover Hali */
.pager a:hover,
#pager2 a:hover,
#pager3 a:hover,
.haberblog .pager a:hover {
    background: rgba(56, 189, 248, 0.5) !important;
    border-color: #38bdf8 !important;
    width: 36px !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.5) !important;
}

/* Aktif Seçili Sayfa (Genişleyen Safir Kapsül) */
.pager a.selected,
#pager2 a.selected,
#pager3 a.selected,
.haberblog .pager a.selected {
    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%) !important;
    border-color: #38bdf8 !important;
    width: 44px !important;
    height: 10px !important;
    box-shadow: 0 0 18px rgba(2, 132, 199, 0.8) !important;
}

/* ==========================================================================
   9. BLOG & NEWS
   ========================================================================== */
.blogvehaber {
    background: #070a13 !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 60px 0 !important;
    border-top: 1px solid rgba(56, 189, 248, 0.12) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.12) !important;
}
.haberblog {
    background: #0d1527 !important;
    background-color: #0d1527 !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden !important;
}
.haberblog .list_carousel li {
    background: #090e1c !important;
    background-color: #090e1c !important;
    border: 1px solid rgba(56, 189, 248, 0.15) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    color: #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
.haberblog h4,
.haberblog h4 a {
    color: #ffffff !important;
    font-weight: 700 !important;
}
.haberblog h4 a:hover {
    color: #38bdf8 !important;
}
.haberblog p,
.haberblog span {
    color: #94a3b8 !important;
}
.haberbloktitle h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   10. STATISTICS / BY NUMBERS (Rakamlarla Biz)
   ========================================================================== */
.rakamlarlabiz {
    background: #070a13 !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 50px 0 !important;
    margin-bottom: 0 !important;
}
.istatistik {
    text-align: center !important;
    position: relative !important;
}
.istatistik h1,
.istatistik .counter {
    color: #ffffff !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    text-shadow: 0 0 20px rgba(2, 132, 199, 0.4) !important;
    margin-bottom: 5px !important;
}
.istatistik h2 {
    color: #38bdf8 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
}
.istatistik span {
    background: rgba(56, 189, 248, 0.4) !important;
}
.istatistik i {
    color: rgba(56, 189, 248, 0.08) !important;
    text-shadow: none !important;
}

/* ==========================================================================
   11. PARTNER LOGOS & NEWSLETTER
   ========================================================================== */
.footlogos {
    background: #070a13 !important;
    border-top: 1px solid rgba(56, 189, 248, 0.1) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.1) !important;
    padding: 35px 0 !important;
    margin: 0 !important;
}
.footlogos img {
    filter: brightness(0.7) contrast(1.2) !important;
    opacity: 0.7 !important;
    transition: all 0.3s ease !important;
}
.footlogos img:hover {
    filter: brightness(1) !important;
    opacity: 1 !important;
    transform: scale(1.05);
}

.ebulten {
    background: #070a13 !important;
    background-image: none !important;
    padding: 40px 0 !important;
    height: auto !important;
}
.ebultencont {
    background-color: #0d1527 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(2, 132, 199, 0.2) !important;
    border-radius: 50px !important;
    height: 56px !important;
    margin-top: 20px !important;
    overflow: hidden !important;
}
.ebultencont i {
    color: #38bdf8 !important;
}
.ebultencont input {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    line-height: 45px !important;
}
.aboneolbtn,
.gonderbtn.aboneolbtn {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4) !important;
    transition: all 0.25s ease !important;
}
.aboneolbtn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%) !important;
    box-shadow: 0 6px 25px rgba(2, 132, 199, 0.6) !important;
}

/* ==========================================================================
   12. FOOTER & FOOTER SLOGAN
   ========================================================================== */
.footslogan {
    background: #070a13 !important;
    color: #cbd5e1 !important;
    padding: 40px 0 20px 0 !important;
}
.footslogan h4 {
    color: #94a3b8 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
}
.footslogan h2,
.footslogan h2 a {
    color: #38bdf8 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 0 25px rgba(2, 132, 199, 0.5) !important;
    transition: all 0.25s ease !important;
}
.footslogan h2 a:hover {
    color: #93c5fd !important;
    transform: scale(1.03);
}

.footer {
    background: linear-gradient(180deg, #080d19 0%, #04070d 100%) !important;
    background-image: none !important;
    border-top: 1px solid rgba(56, 189, 248, 0.15) !important;
    color: #94a3b8 !important;
    padding: 50px 0 25px 0 !important;
}
.footer .line {
    background: rgba(56, 189, 248, 0.12) !important;
    height: 1px !important;
}
.footblok h2, .footblok h3, .footblok h4, .footblok h5 {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid #0284c7;
    display: inline-block;
    padding-bottom: 6px;
}
.footblok a {
    color: #94a3b8 !important;
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
}
.footblok a:hover {
    color: #38bdf8 !important;
    padding-left: 4px;
}
.footsosyal a {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
    border-radius: 50% !important;
    width: 38px;
    height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
.footsosyal a:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(2, 132, 199, 0.5) !important;
    transform: translateY(-2px);
}
.footcopyright {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #64748b !important;
    padding-top: 20px !important;
    margin-top: 30px !important;
}
.footinfos span,
.footinfos h4,
.footinfos h5 {
    color: #94a3b8 !important;
}

/* ==========================================================================
   13. SCROLL-TO-TOP BUTTON (.cd-top)
   ========================================================================== */
.cd-top {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    background-color: #0284c7 !important;
    background-image: none !important;
    border: 1px solid rgba(56, 189, 248, 0.6) !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    bottom: 25px !important;
    right: 25px !important;
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.5) !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    z-index: 99999 !important;
}
.cd-top::before {
    content: "\f077" !important;
    font-family: "FontAwesome" !important;
    font-size: 18px !important;
    color: #ffffff !important;
    text-indent: 0 !important;
    float: none !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
}
.cd-top:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%) !important;
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.7) !important;
}
.scroll-top {
    display: none !important;
}

/* ==========================================================================
   14. FAQ / SSS ACCORDION
   ========================================================================== */
.sss {
    background: transparent !important;
    border-top: 1px solid rgba(56, 189, 248, 0.15) !important;
    padding-top: 30px !important;
    margin-top: 30px !important;
}
.sss h4 {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}
.sss #accordion h3,
.ui-accordion .ui-accordion-header {
    background: #0d1527 !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 10px !important;
    color: #f8fafc !important;
    padding: 16px 20px !important;
    margin-top: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.25s ease !important;
}
.sss #accordion h3:hover,
.ui-accordion .ui-accordion-header:hover {
    border-color: #38bdf8 !important;
    background: #111d35 !important;
    color: #38bdf8 !important;
}
.sss #accordion h3.ui-state-active,
.ui-accordion .ui-accordion-header.ui-state-active {
    background: linear-gradient(135deg, #1e3a8a 0%, #0c1c38 100%) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.3) !important;
}
.sss #accordion div,
.ui-accordion .ui-accordion-content {
    background: #080d19 !important;
    border: 1px solid rgba(56, 189, 248, 0.15) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    color: #cbd5e1 !important;
    padding: 22px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* ==========================================================================
   15. SEPET SAYFASI (Shopping Cart Modern Dark Redesign)
   ========================================================================== */
.sepet {
    background: transparent !important;
}
.sepetbaslik {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}
.sepetlist {
    background: #0d1527 !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
    color: #cbd5e1 !important;
    margin: 14px 0 !important;
    overflow: hidden !important;
}
.sepetlistcon {
    padding: 22px !important;
}
.sepetrightshadow {
    background: #0d1527 !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden !important;
}
.sepetrightcon {
    background: transparent !important;
    padding: 20px !important;
}
.sepetsipinfo {
    color: #cbd5e1 !important;
}
.sepetsipinfo tr td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 0 !important;
    color: #cbd5e1 !important;
}
.sepetsipinfo tr td strong {
    color: #ffffff !important;
    font-weight: 600 !important;
}
.sepetsipinfo h5 {
    color: #38bdf8 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

/* Empty Cart View (#empty_list) */
#empty_list {
    background: #0d1527 !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 16px !important;
    padding: 50px 30px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
#empty_list i {
    color: #0284c7 !important;
    text-shadow: 0 0 20px rgba(2, 132, 199, 0.4) !important;
}
#empty_list h4 {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
}
#empty_list span {
    color: #94a3b8 !important;
}

/* Cart Action Buttons */
#continueshopbtn {
    background: rgba(14, 165, 233, 0.1) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    display: inline-block !important;
    transition: all 0.25s ease !important;
}
#continueshopbtn:hover {
    background: rgba(14, 165, 233, 0.25) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Devam Et Button (Cart Checkout) */
#continue_go,
.sepetright .gonderbtn {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 16px 0 !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 17px !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4) !important;
    margin-top: 15px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}
#continue_go:hover,
.sepetright .gonderbtn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%) !important;
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Disabled continue button (#continue_block) */
#continue_block,
.sepetright #continue_block {
    background: #111a2e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #64748b !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 16px 0 !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 17px !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    margin-top: 15px !important;
}

/* ==========================================================================
   16. INNER PAGES, SIDEBAR & MEMBER PANEL
   ========================================================================== */
.sayfacontent,
.mpanelcon,
.content-box,
.mpanelright {
    background: #0c1427 !important;
    border: 1px solid rgba(56, 189, 248, 0.14) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    color: #cbd5e1 !important;
    padding: 30px !important;
}
.sidebar,
.mpanelsidebar,
.mpanelleft {
    background: #090e1b !important;
    border: 1px solid rgba(56, 189, 248, 0.14) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}
.sidebar a,
.mpanelsidebar a,
.sidelinks a {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.sidebar a:hover,
.mpanelsidebar a:hover,
.sidelinks a:hover {
    color: #38bdf8 !important;
    background: rgba(2, 132, 199, 0.12) !important;
}
table, .datatable, .table {
    background: #080d19 !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(56, 189, 248, 0.14) !important;
    border-radius: 10px !important;
}
th {
    background: #0f1930 !important;
    color: #ffffff !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.25) !important;
    font-weight: 700 !important;
    padding: 12px !important;
}
td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 12px !important;
    color: #cbd5e1 !important;
}
tr:hover td {
    background: rgba(2, 132, 199, 0.08) !important;
}

/* Modal Dialogs */
.modalDialog > div {
    background: #0c1427 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9) !important;
}

/* Order Steps & Server Config Sidebar */
.skonfigside {
    background: linear-gradient(180deg, #0d1629 0%, #080d19 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 10px !important;
}
.skonfiginfo {
    border: 1px solid rgba(56, 189, 248, 0.14) !important;
    background: #090e1b !important;
    border-radius: 10px !important;
    padding: 15px !important;
}
.skonfiginfo h4 {
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
    color: #ffffff !important;
}

/* Invoices & Checkouts */
.invoicex {
    background: #0c1427 !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7) !important;
}


/* ==========================================================================
   17. SIGN UP & SIGN IN (HESAP OLUSTUR & GIRIS YAP) - ULTRA MODERN DARK THEME
   ========================================================================== */
#uyeolgirisbody {
    background-color: #070a13 !important;
    background: #070a13 !important;
    color: #cbd5e1 !important;
}

#uyeolgiris {
    background: radial-gradient(circle at 20% 30%, rgba(30, 58, 138, 0.4) 0%, rgba(7, 10, 19, 0.95) 70%),
                linear-gradient(135deg, #070a13 0%, #0d1527 100%) !important;
    background-color: #070a13 !important;
    color: #cbd5e1 !important;
}

/* Slogan & Left Side */
.uyeolgirisslogan {
    color: #cbd5e1 !important;
}

.uyeolgirisslogan-con {
    padding: 20px !important;
}

.uyeolgirisslogan-con .logo img {
    filter: drop-shadow(0 4px 15px rgba(2, 132, 199, 0.35));
    transition: transform 0.3s ease;
}
.uyeolgirisslogan-con .logo img:hover {
    transform: scale(1.03);
}

.uyeolgirisslogan h4 {
    color: #94a3b8 !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
}

.uyeolgirisslogan-con .gonderbtn,
.uyeolgirisyap .gonderbtn {
    display: inline-block !important;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.15) 0%, rgba(30, 58, 138, 0.25) 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
    color: #38bdf8 !important;
    border-radius: 50px !important;
    padding: 13px 36px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.uyeolgirisslogan-con .gonderbtn:hover,
.uyeolgirisyap .gonderbtn:hover {
    background: linear-gradient(135deg, #0284c7 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.5) !important;
    transform: translateY(-2px);
}

/* Right Side - Form Card Container */
.uyeol {
    background: transparent !important;
}

.signupcon {
    background: #0c1427 !important;
    border-left: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.7) !important;
    min-height: 100vh !important;
    color: #cbd5e1 !important;
}

.signinsignup-title {
    color: #ffffff !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    position: relative !important;
    display: inline-block !important;
    margin-bottom: 25px !important;
}

.signinsignup-title::after {
    content: '' !important;
    display: block !important;
    width: 50px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #38bdf8, #1d4ed8) !important;
    border-radius: 2px !important;
    margin-top: 8px !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

/* Steps Indicator (Stages 1, 2, 3) */
.signup-stages {
    position: relative !important;
    margin: 25px 0 35px 0 !important;
}

.signup-stage-line {
    background: rgba(56, 189, 248, 0.15) !important;
    height: 3px !important;
    border-radius: 3px !important;
    margin-top: 30px !important;
    margin-bottom: -33px !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.2) !important;
}

.signup-stages-block {
    background: #070a13 !important;
    border: 2px solid rgba(56, 189, 248, 0.25) !important;
    color: #64748b !important;
    width: 62px !important;
    height: 62px !important;
    line-height: 58px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
}

.signup-stages-block:hover {
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    transform: translateY(-2px);
}

.signup-stages-block.active {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.55), inset 0 0 12px rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.08);
}

/* Clean Theme Form Boxes */
.clean-theme-signup-box {
    background: #090e1a !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    border-radius: 14px !important;
    padding: 24px 20px 20px 20px !important;
    margin-bottom: 25px !important;
    position: relative !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

.clean-theme-signup-box-title {
    position: absolute !important;
    top: -14px !important;
    left: 20px !important;
    background: linear-gradient(135deg, #0d172e 0%, #080d19 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 3px 14px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Inputs & Form Elements */
#uyeolgiris input[type="text"],
#uyeolgiris input[type="password"],
#uyeolgiris input[type="email"],
#uyeolgiris input[type="tel"],
#uyeolgiris select,
#uyeolgiris textarea {
    background: #050811 !important;
    border: 1.5px solid rgba(56, 189, 248, 0.2) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.25s ease !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#uyeolgiris input:focus,
#uyeolgiris select:focus,
#uyeolgiris textarea:focus {
    border-color: #38bdf8 !important;
    background: #080d1a !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.35), inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

#uyeolgiris input::placeholder {
    color: #64748b !important;
    font-size: 14px !important;
}

/* Radio & Checkbox Labels */
#uyeolgiris .radio-custom-label,
#uyeolgiris .checkbox-custom-label {
    color: #cbd5e1 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    user-select: none !important;
}

#uyeolgiris .radio-custom + .radio-custom-label:before {
    border: 2px solid rgba(56, 189, 248, 0.4) !important;
    background: #050811 !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

#uyeolgiris .radio-custom:checked + .radio-custom-label:before {
    background: #0284c7 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
}

#uyeolgiris .checkbox-custom + .checkbox-custom-label:before {
    border: 2px solid rgba(56, 189, 248, 0.4) !important;
    background: #050811 !important;
    border-radius: 6px !important;
    width: 20px !important;
    height: 20px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

#uyeolgiris .checkbox-custom:checked + .checkbox-custom-label:before {
    background: #0284c7 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
}

/* International Tel Input Styling - Ultra Clean & Perfectly Padded */
.intl-tel-input,
#uyeolgiris .intl-tel-input,
.sepetleft .intl-tel-input,
#SubmitStepAccount .intl-tel-input {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

.intl-tel-input .flag-container,
#uyeolgiris .intl-tel-input .flag-container,
.sepetleft .intl-tel-input .flag-container,
#SubmitStepAccount .intl-tel-input .flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
}

.intl-tel-input .selected-flag,
#uyeolgiris .intl-tel-input .selected-flag,
.sepetleft .intl-tel-input .selected-flag,
#SubmitStepAccount .intl-tel-input .selected-flag {
    background: rgba(2, 132, 199, 0.15) !important;
    border-right: 1.5px solid rgba(56, 189, 248, 0.3) !important;
    border-top-left-radius: 9px !important;
    border-bottom-left-radius: 9px !important;
    padding: 0 10px 0 14px !important;
    height: calc(100% - 4px) !important;
    margin: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 90px !important;
}

.intl-tel-input .selected-flag:hover,
#uyeolgiris .intl-tel-input .selected-flag:hover {
    background: rgba(2, 132, 199, 0.25) !important;
}

.intl-tel-input .selected-flag .iti-flag,
#uyeolgiris .intl-tel-input .selected-flag .iti-flag {
    margin: 0 !important;
    position: static !important;
    display: inline-block !important;
    vertical-align: middle !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
    border-radius: 2px !important;
}

.intl-tel-input .selected-dial-code,
#uyeolgiris .intl-tel-input .selected-dial-code {
    color: #38bdf8 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-block !important;
    padding-left: 2px !important;
    line-height: normal !important;
}

.intl-tel-input .selected-flag .iti-arrow,
#uyeolgiris .intl-tel-input .selected-flag .iti-arrow {
    position: static !important;
    margin-top: 0 !important;
    border-top-color: #38bdf8 !important;
    margin-left: 2px !important;
}

/* GSM input field padding to prevent overlap with +90 badge */
.intl-tel-input input#gsm,
.intl-tel-input input[type="tel"],
.intl-tel-input input[type="text"],
#uyeolgiris .intl-tel-input input#gsm,
#uyeolgiris #gsm,
#SubmitStepAccount #gsm,
.sepetleft #gsm {
    padding-left: 110px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    height: 48px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    letter-spacing: 0.03em !important;
}

.intl-tel-input .country-list,
#uyeolgiris .country-list {
    background-color: #0c1427 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8) !important;
    border-radius: 10px !important;
    color: #cbd5e1 !important;
    margin-top: 5px !important;
    z-index: 9999 !important;
}

.intl-tel-input .country-list .country,
#uyeolgiris .country-list .country {
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight,
#uyeolgiris .country-list .country:hover,
#uyeolgiris .country-list .country.highlight {
    background-color: rgba(2, 132, 199, 0.2) !important;
    color: #ffffff !important;
}

.intl-tel-input .country-list .country-name,
#uyeolgiris .country-list .country-name {
    color: #cbd5e1 !important;
    margin-right: 8px !important;
}

.intl-tel-input .country-list .dial-code,
#uyeolgiris .country-list .dial-code {
    color: #38bdf8 !important;
    font-weight: 600 !important;
}

/* Random Password Generator Button & Strength */
#uyeolgiris .sbtn {
    display: inline-block !important;
    background: rgba(2, 132, 199, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
    padding: 11px 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}

#uyeolgiris .sbtn:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
}

.level-block {
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    margin-top: 6px !important;
}

#weak {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

#good {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

#strong {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

/* Action Buttons (Devam Et & Kayıt Ol) */
.signin-signup-foot-btn {
    text-align: center !important;
    margin-top: 30px !important;
    margin-bottom: 40px !important;
}

.signin-signup-foot-btn button,
#nextStepBtn,
#signUpBtn {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 50px !important;
    padding: 16px 48px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    box-shadow: 0 8px 30px rgba(2, 132, 199, 0.45) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: auto !important;
    min-width: 260px !important;
}

.signin-signup-foot-btn button:hover,
#nextStepBtn:hover,
#signUpBtn:hover {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 35px rgba(56, 189, 248, 0.7) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* ==========================================================================
   CONTRACT & INFORMATION MODALS (iziModal Ultra Dark)
   ========================================================================== */
.iziModal,
div.iziModal,
.iziModal-wrap,
.iziModal .iziModal-wrap,
.iziModal-content,
.iziModal .iziModal-content {
    background: #0b1329 !important;
    color: #cbd5e1 !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(2, 132, 199, 0.2) !important;
}

.iziModal {
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    overflow: hidden !important;
}

.iziModal .iziModal-header {
    background: linear-gradient(135deg, #0d1b38 0%, #070d1f 100%) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.25) !important;
    padding: 16px 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.iziModal .iziModal-header-title {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.iziModal .iziModal-header-subtitle {
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.iziModal .iziModal-button-close {
    filter: brightness(2) contrast(1.5) !important;
    opacity: 0.85 !important;
    transition: all 0.2s ease !important;
}

.iziModal .iziModal-button-close:hover {
    opacity: 1 !important;
    filter: drop-shadow(0 0 8px #38bdf8) !important;
}

/* Modal Content & Contract Text Formatting */
.iziModal .padding20 {
    background: #0b1329 !important;
    color: #cbd5e1 !important;
    padding: 24px 28px !important;
}

.iziModal .contract-wrapper {
    color: #cbd5e1 !important;
    background: transparent !important;
    font-size: 14.5px !important;
    line-height: 1.8 !important;
}

.iziModal .contract-wrapper h2 {
    color: #38bdf8 !important;
    background: rgba(2, 132, 199, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.iziModal .contract-wrapper p,
.iziModal .contract-wrapper li {
    color: #94a3b8 !important;
    font-size: 14px !important;
    margin-bottom: 14px !important;
}

.iziModal .contract-wrapper strong {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
}

.iziModal .contract-wrapper a {
    color: #38bdf8 !important;
    text-decoration: underline !important;
}

.iziModal .contract-wrapper a:hover {
    color: #93c5fd !important;
}

/* Modal Scrollbar */
.iziModal-wrap::-webkit-scrollbar {
    width: 8px !important;
}
.iziModal-wrap::-webkit-scrollbar-track {
    background: #070d1a !important;
}
.iziModal-wrap::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.3) !important;
    border-radius: 4px !important;
}
.iziModal-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.6) !important;
}

/* Sign In Page (Giris Yap) Overhauls */
#Signin_Form, #Signforget_Form {
    color: #cbd5e1 !important;
}

#Signin_Form h4, #Signforget_Form h4 {
    color: #ffffff !important;
}

#Signin_Form p, #Signforget_Form p {
    color: #94a3b8 !important;
}

.sifreunuttulink {
    color: #38bdf8 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.sifreunuttulink:hover {
    color: #93c5fd !important;
    text-decoration: underline !important;
}

.createnewaccountlink {
    color: #38bdf8 !important;
    font-weight: 700 !important;
}
.createnewaccountlink:hover {
    color: #93c5fd !important;
}

/* Social Connect Buttons */
.socialconnect {
    margin: 20px 0 !important;
}

.socialconnect a,
.socialconnect button {
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s ease !important;
}


#uyeolgiris select option {
    background: #090e1a !important;
    color: #ffffff !important;
}

#uyeolgiris textarea {
    min-height: 80px;
    resize: vertical;
}

#uyeolgiris .checktext a {
    color: #38bdf8 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}
#uyeolgiris .checktext a:hover {
    color: #93c5fd !important;
}

/* Captcha styling inside signup/signin */
#uyeolgiris .captcha-content {
    background: rgba(9, 14, 26, 0.6) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    margin: 15px 0 !important;
    display: inline-block !important;
}
#uyeolgiris .captchainput {
    margin-top: 10px !important;
}

/* Line separators */
#uyeolgiris .line {
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
    margin: 15px 0 20px 0 !important;
}

/* Form error alerts */
#uyeolgiris .error, #FormOutput {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    margin-top: 15px !important;
}

/* Success screen */
#Success_div {
    color: #ffffff !important;
}
#Success_div i {
    color: #38bdf8 !important;
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.6) !important;
}
#Success_div h4 {
    color: #ffffff !important;
}
#Success_div h5 {
    color: #94a3b8 !important;
}


/* ==========================================================================
   18. ORDER STEPS & SOFTWARE DOMAIN WIZARD - ULTRA LUXURY DARK THEME
   ========================================================================== */

/* Steps Indicator Top Bar (Hizmet Süresi, Alan Adı Belirle, vb.) */
.ilanasamalar {
    margin: 30px 0 45px 0 !important;
}

.ilanasamax {
    color: #94a3b8 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.ilanasamax h3 {
    background: #090e1a !important;
    border: 2px solid rgba(56, 189, 248, 0.25) !important;
    color: #64748b !important;
    text-shadow: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

.ilanasamax.active h3,
.ilanasamax.current h3 {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.55) !important;
    transform: scale(1.08);
}

.asamaline {
    background: rgba(56, 189, 248, 0.15) !important;
    height: 3px !important;
}

/* Period Selection Cards (Tek Sefer, Aylık vb.) */
.orderperiodblock-con {
    margin-top: 30px !important;
}

.orderperiodblock {
    background: linear-gradient(180deg, #0d1629 0%, #080d19 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6) !important;
    padding: 35px 25px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    color: #cbd5e1 !important;
}

.orderperiodblock h2 {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-top: 10px !important;
}

.orderperiodblock h3,
.orderperiodblock .amount_spot_view {
    color: #38bdf8 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.4) !important;
}

.orderperiodblock:hover {
    border-color: #38bdf8 !important;
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 15px 40px rgba(2, 132, 199, 0.35) !important;
}

.orderperiodblock.active {
    background: linear-gradient(180deg, #0f1c38 0%, #091024 100%) !important;
    border: 2px solid #38bdf8 !important;
    box-shadow: 0 0 35px rgba(56, 189, 248, 0.4), inset 0 0 15px rgba(56, 189, 248, 0.15) !important;
    transform: scale(1.03) !important;
}

.periodselectbox {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.7) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    bottom: -19px !important;
}

.periodselectbox i {
    color: #ffffff !important;
    font-size: 20px !important;
    line-height: normal !important;
}

/* Devam Butonları & Form Gönderim Butonları */
.siparisbilgileri .gonderbtn,
.domainsec .gonderbtn,
.alanadisorgu .gonderbtn,
a.gonderbtn.btn,
button.gonderbtn.btn {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 50px !important;
    padding: 15px 45px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 8px 30px rgba(2, 132, 199, 0.45) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.siparisbilgileri .gonderbtn:hover,
.domainsec .gonderbtn:hover,
.alanadisorgu .gonderbtn:hover,
a.gonderbtn.btn:hover,
button.gonderbtn.btn:hover {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 35px rgba(56, 189, 248, 0.7) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* Domain Seçim Akordeon & Kutuları */
.domainsec {
    width: 100% !important;
    max-width: 900px !important;
    margin: 30px auto !important;
}

.domainsec .ui-accordion .ui-accordion-header {
    background: linear-gradient(135deg, #0d172e 0%, #080d19 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    transition: all 0.25s ease !important;
    outline: none !important;
}

.domainsec .ui-accordion .ui-accordion-header:hover,
.domainsec .ui-accordion .ui-accordion-header.ui-state-active {
    background: linear-gradient(135deg, #132247 0%, #0c1527 100%) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.25) !important;
}

.domainsec .ui-accordion .ui-accordion-content {
    background: #090e1a !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 30px !important;
    margin-top: -12px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Domain Arama Formu & Buton Hizalaması */
.alanadisorgu input,
#domainInput {
    background: #050811 !important;
    border: 1.5px solid rgba(56, 189, 248, 0.3) !important;
    color: #ffffff !important;
    border-radius: 50px 0 0 50px !important;
    padding: 14px 24px !important;
    height: 52px !important;
    font-size: 16px !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6) !important;
    outline: none !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.alanadisorgu input:focus,
#domainInput:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.35) !important;
}

.domainsec .alanadisorgu .gonderbtn,
.alanadisorgu .gonderbtn {
    border-radius: 0 50px 50px 0 !important;
    margin-left: -5px !important;
    height: 52px !important;
    line-height: 50px !important;
    padding: 0 35px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.4) !important;
}

/* Domain Arama Sonuçları Tablosu */
.tescilsonuc table {
    background: #080d19 !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.tescilsonuc tr td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #cbd5e1 !important;
    padding: 12px 15px !important;
}

.tescilsonuc tr:hover td {
    background: rgba(2, 132, 199, 0.08) !important;
}


/* ==========================================================================
   19. ULTRA LUXURY INNER PAGES & HAKKIMIZDA SHOWCASE
   ========================================================================== */

/* Page Wrapper */
.inner-page-wrapper {
    margin-top: 30px !important;
    margin-bottom: 60px !important;
}

/* 2-Column Side-by-Side Flex Layout Container */
.inner-layout-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 30px !important;
    width: 100% !important;
    margin-top: 0 !important;
    clear: both !important;
}

.inner-layout-container::after,
.inner-layout-container::before {
    display: none !important;
}

.inner-layout-container .sidebar.inner-sidebar {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.inner-layout-container .sayfacontent.inner-page-content {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.inner-layout-container.no-sidebar .sayfacontent.inner-page-content {
    width: 100% !important;
}

@media (max-width: 991px) {
    .inner-layout-container {
        flex-direction: column !important;
        gap: 25px !important;
    }
    .inner-layout-container .sidebar.inner-sidebar,
    .inner-layout-container .sayfacontent.inner-page-content {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
}

/* Page Hero Banner */
.inner-page-hero {
    background: radial-gradient(circle at 30% 30%, rgba(30, 58, 138, 0.45) 0%, rgba(7, 10, 19, 0.95) 80%),
                linear-gradient(135deg, #070a13 0%, #0d1527 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 18px !important;
    padding: 40px 35px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6) !important;
    position: relative !important;
    overflow: hidden !important;
}

.inner-page-hero::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -10% !important;
    width: 300px !important;
    height: 300px !important;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.inner-hero-content {
    position: relative !important;
    z-index: 2 !important;
}

.hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(2, 132, 199, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
}

.inner-hero-title {
    color: #ffffff !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 10px 0 !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5) !important;
}

.inner-hero-subtitle {
    color: #94a3b8 !important;
    font-size: 16px !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Inner Sidebar */
.inner-sidebar {
    background: linear-gradient(180deg, #090e1a 0%, #060911 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.sidebar-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
    margin-bottom: 15px !important;
}

.sidebar-header i {
    color: #38bdf8 !important;
    font-size: 20px !important;
}

.sidebar-header h4 {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
}

.sidelinks a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: rgba(13, 20, 36, 0.4) !important;
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.25s ease !important;
}

.sidelinks a i {
    color: #64748b !important;
    font-size: 14px !important;
    transition: transform 0.25s ease !important;
}

.sidelinks a:hover {
    background: rgba(2, 132, 199, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
    transform: translateX(4px) !important;
}

.sidelinks a:hover i {
    color: #38bdf8 !important;
    transform: translateX(3px) !important;
}

.sidelinks a.active {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.4) 0%, rgba(2, 132, 199, 0.25) 100%) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.2) !important;
}

.sidelinks a.active i {
    color: #38bdf8 !important;
}

/* Sidebar Contact Widget */
.sidebar-contact-box {
    background: linear-gradient(135deg, #0c1830 0%, #070d1a 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    text-align: center !important;
    margin-top: 25px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

.sidebar-contact-box i {
    font-size: 32px !important;
    color: #38bdf8 !important;
    margin-bottom: 10px !important;
    text-shadow: 0 0 15px rgba(56, 189, 248, 0.5) !important;
}

.sidebar-contact-box h5 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 5px 0 !important;
}

.sidebar-contact-box p {
    color: #94a3b8 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 15px !important;
}

.sidebar-contact-btn {
    display: inline-block !important;
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    transition: all 0.25s ease !important;
}

.sidebar-contact-btn:hover {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* Main Content Area */
.inner-page-content {
    background: linear-gradient(180deg, #0c1427 0%, #080d19 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    border-radius: 18px !important;
    padding: 35px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5) !important;
    color: #cbd5e1 !important;
}

/* About Hero Card */
.about-hero-card {
    background: linear-gradient(135deg, #0f1a33 0%, #090e1b 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 16px !important;
    padding: 35px 30px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
}

.about-tag {
    display: inline-block !important;
    background: rgba(2, 132, 199, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
}

.about-hero-text h2 {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
}

.about-hero-text .lead {
    color: #cbd5e1 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

/* 4 Column Features Grid */
.about-features-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

@media (max-width: 768px) {
    .about-features-grid {
        grid-template-columns: 1fr !important;
    }
}

.about-feat-box {
    background: #090e1a !important;
    border: 1px solid rgba(56, 189, 248, 0.15) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.about-feat-box:hover {
    border-color: #38bdf8 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 35px rgba(2, 132, 199, 0.25) !important;
}

.feat-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.35) 0%, rgba(2, 132, 199, 0.2) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.feat-icon i {
    font-size: 22px !important;
    color: #38bdf8 !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

.about-feat-box h3 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.about-feat-box p {
    color: #94a3b8 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Mission & Vision Grid */
.about-mission-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

@media (max-width: 768px) {
    .about-mission-grid {
        grid-template-columns: 1fr !important;
    }
}

.mission-card {
    background: linear-gradient(180deg, #0d1629 0%, #080d19 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.mission-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.12) !important;
    padding-bottom: 12px !important;
}

.mission-header i {
    font-size: 24px !important;
    color: #38bdf8 !important;
}

.mission-header h3 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.mission-card p {
    color: #cbd5e1 !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* Stats Bar */
.about-stats-bar {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
    background: #080d19 !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 14px !important;
    padding: 25px 20px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

@media (max-width: 768px) {
    .about-stats-bar {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.stat-item .stat-num {
    display: block !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #38bdf8 !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
}

.stat-item .stat-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin-top: 5px !important;
}


/* ==========================================================================
   20. ULTRA LUXURY CONTACT PAGE (BİZE ULAŞIN) REDESIGN
   ========================================================================== */

/* Page Wrapper */
.contact-page-wrapper {
    margin-top: 30px !important;
    margin-bottom: 70px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Contact Hero Banner */
.contact-hero-banner {
    background: radial-gradient(circle at 30% 30%, rgba(30, 58, 138, 0.45) 0%, rgba(7, 10, 19, 0.95) 80%),
                linear-gradient(135deg, #070a13 0%, #0d1527 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 18px !important;
    padding: 40px 35px !important;
    margin-bottom: 35px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6) !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
}

.contact-hero-banner::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -10% !important;
    width: 320px !important;
    height: 320px !important;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.contact-hero-inner {
    position: relative !important;
    z-index: 2 !important;
}

.contact-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(2, 132, 199, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
}

.contact-hero-title {
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 12px 0 !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5) !important;
}

.contact-hero-subtitle {
    color: #94a3b8 !important;
    font-size: 16px !important;
    margin: 0 auto !important;
    max-width: 700px !important;
    line-height: 1.6 !important;
}

/* 4-Card Contact Grid - Ultra Luxury Bento Layout */
.contact-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px !important;
    margin-bottom: 45px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1100px) {
    .contact-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .contact-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Force complete neutralization of WiseCP legacy #compnayinfo 30% rule */
#compnayinfo,
div#compnayinfo,
.contact-info-card#compnayinfo,
.contact-info-card.company-info-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    text-align: center !important;
    line-height: inherit !important;
}

.contact-info-card {
    background: linear-gradient(165deg, rgba(17, 27, 49, 0.95) 0%, rgba(9, 14, 26, 0.98) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 20px !important;
    padding: 36px 24px 32px 24px !important;
    text-align: center !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 250px !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(12px) !important;
}

.contact-info-card:hover {
    border-color: rgba(56, 189, 248, 0.7) !important;
    transform: translateY(-7px) !important;
    box-shadow: 0 20px 45px rgba(2, 132, 199, 0.35), 0 0 25px rgba(56, 189, 248, 0.2) !important;
}

.contact-info-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #38bdf8, #818cf8, transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
}

.contact-info-card:hover::before {
    opacity: 1 !important;
}

.contact-info-card::after {
    content: '' !important;
    position: absolute !important;
    top: -60px !important;
    right: -60px !important;
    width: 140px !important;
    height: 140px !important;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    transition: all 0.4s ease !important;
}

.contact-info-card:hover::after {
    transform: scale(1.4) !important;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, transparent 70%) !important;
}

.card-icon-box {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.4) 0%, rgba(2, 132, 199, 0.25) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 18px !important;
    box-shadow: 0 0 20px rgba(2, 132, 199, 0.25) !important;
    transition: all 0.3s ease !important;
}

.contact-info-card:hover .card-icon-box {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.6) !important;
    transform: scale(1.08) !important;
}

.card-icon-box i {
    color: #38bdf8 !important;
    font-size: 24px !important;
    transition: color 0.3s ease !important;
}

.contact-info-card:hover .card-icon-box i {
    color: #ffffff !important;
}

.contact-info-card h3 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    border: none !important;
    padding: 0 !important;
    letter-spacing: -0.01em !important;
}

.card-text-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.card-text-list span,
.card-text-list .contact-val {
    color: #f1f5f9 !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    word-break: break-word !important;
}

.card-text-list .contact-link {
    color: #f1f5f9 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.card-text-list .contact-link:hover .contact-val {
    color: #38bdf8 !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

/* Bottom Grid (Map + Form) */
.contact-bottom-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
    align-items: stretch !important;
}

@media (max-width: 991px) {
    .contact-bottom-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Map Card Wrapper */
.contact-map-wrapper {
    background: linear-gradient(180deg, #0c1427 0%, #080d19 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 18px !important;
    padding: 28px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
}

.map-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
}

.map-title-con {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.map-title-con i {
    color: #38bdf8 !important;
    font-size: 20px !important;
}

.map-title-con h4 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.bigmaplink {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(2, 132, 199, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.bigmaplink:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.5) !important;
}

.map-frame-container {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
    flex: 1 !important;
    min-height: 450px !important;
}

.map-frame-container iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 450px !important;
    border: 0 !important;
}

/* Contact Form Wrapper */
.contact-form-wrapper {
    background: linear-gradient(180deg, #0c1427 0%, #080d19 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 18px !important;
    padding: 30px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5) !important;
}

.form-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
}

.form-card-header i {
    color: #38bdf8 !important;
    font-size: 20px !important;
}

.form-card-header h4 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Ultra Form Fields */
.ultra-contact-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.form-field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.form-field-group label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #f8fafc !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

.form-field-group label i {
    color: #38bdf8 !important;
    font-size: 14px !important;
}

.ultra-contact-form input[type="text"],
.ultra-contact-form input[type="email"],
.ultra-contact-form textarea {
    width: 100% !important;
    background: #0d172e !important;
    border: 1.5px solid rgba(56, 189, 248, 0.38) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.ultra-contact-form input::placeholder,
.ultra-contact-form textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

.ultra-contact-form input[type="text"]:focus,
.ultra-contact-form input[type="email"]:focus,
.ultra-contact-form textarea:focus {
    border-color: #38bdf8 !important;
    background: #111e3b !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.45) !important;
    color: #ffffff !important;
}

.ultra-contact-form textarea {
    min-height: 130px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

/* Phone input container styling */
.ultra-contact-form .intl-tel-input {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

.ultra-contact-form .intl-tel-input .flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
}

.ultra-contact-form .intl-tel-input .selected-flag {
    background: rgba(2, 132, 199, 0.12) !important;
    border-right: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-top-left-radius: 9px !important;
    border-bottom-left-radius: 9px !important;
    padding: 0 12px 0 14px !important;
    height: calc(100% - 4px) !important;
    margin: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 86px !important;
}

.ultra-contact-form .intl-tel-input .selected-flag:hover {
    background: rgba(2, 132, 199, 0.22) !important;
}

.ultra-contact-form .intl-tel-input .selected-flag .iti-flag {
    margin: 0 !important;
    position: static !important;
    display: inline-block !important;
    vertical-align: middle !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
    border-radius: 2px !important;
}

.ultra-contact-form .intl-tel-input .selected-dial-code {
    color: #38bdf8 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-block !important;
    padding-left: 0 !important;
    line-height: normal !important;
}

.ultra-contact-form .intl-tel-input .selected-flag .iti-arrow {
    position: static !important;
    margin-top: 0 !important;
    border-top-color: #38bdf8 !important;
    margin-left: 4px !important;
}

.ultra-contact-form .intl-tel-input input#phone,
.ultra-contact-form #phone {
    padding-left: 105px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    height: 48px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    letter-spacing: 0.03em !important;
}

.ultra-contact-form .country-list {
    background-color: #0c1427 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8) !important;
    border-radius: 10px !important;
    color: #cbd5e1 !important;
    margin-top: 5px !important;
    z-index: 9999 !important;
}

.ultra-contact-form .country-list .country {
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ultra-contact-form .country-list .country:hover,
.ultra-contact-form .country-list .country.highlight {
    background-color: rgba(2, 132, 199, 0.2) !important;
    color: #ffffff !important;
}

.ultra-contact-form .country-list .country-name {
    color: #cbd5e1 !important;
    margin-right: 8px !important;
}

.ultra-contact-form .country-list .dial-code {
    color: #38bdf8 !important;
    font-weight: 600 !important;
}

/* Captcha styling */
.contact-captcha-box {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    background: rgba(9, 14, 26, 0.6) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin: 5px 0 !important;
}

.contact-captcha-box .captchainput {
    width: 140px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    height: 42px !important;
}

/* GDPR Group */
.contact-gdpr-group {
    margin: 8px 0 12px 0 !important;
}

.contact-gdpr-group .kinfo,
.contact-gdpr-group .kinfo a {
    color: #94a3b8 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.contact-gdpr-group .kinfo a {
    color: #38bdf8 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.contact-gdpr-group .kinfo a:hover {
    color: #93c5fd !important;
}

/* Contact Submit Buttons */
.contact-btn-con {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 10px !important;
}

.contact-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 38px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.contact-submit-btn.inactive {
    background: #1e293b !important;
    color: #64748b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: not-allowed !important;
}

.contact-submit-btn.active {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 8px 30px rgba(2, 132, 199, 0.45) !important;
}

.contact-submit-btn.active:hover {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 35px rgba(56, 189, 248, 0.7) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* Success Card */
.contact-success-card {
    text-align: center !important;
    padding: 50px 20px !important;
}

.success-icon-wrap {
    margin-bottom: 20px !important;
}

.success-icon-wrap i {
    font-size: 70px !important;
    color: #38bdf8 !important;
    text-shadow: 0 0 30px rgba(56, 189, 248, 0.6) !important;
}

.contact-success-card h4 {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
}

.contact-success-card p {
    color: #94a3b8 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    max-width: 500px !important;
    margin: 0 auto !important;
}


/* ==========================================================================
   21. ULTRA MODERN STANDARDIZED MEGA MENU CARDS
   ========================================================================== */

/* Megamenu Container & Glassmorphism Backdrop */
#megamenu {
    background: rgba(8, 14, 28, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(2, 132, 199, 0.15) !important;
    overflow: hidden !important;
    padding: 25px !important;
}

#megamenu > div,
#megamenu .padding20 {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
}

/* Flex Container for Cards */
#megamenu center,
#megamenu div[align="center"] {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    text-align: center !important;
}

/* Standardized Mega Menu Card - IDENTICAL UNIFORM SIZE */
#megamenu #megamenuservice,
#megamenuservice {
    flex: 0 1 260px !important;
    width: 260px !important;
    min-width: 240px !important;
    max-width: 280px !important;
    min-height: 220px !important;
    height: 220px !important;
    margin: 0 !important;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.8) 0%, rgba(12, 18, 34, 0.9) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.15) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

#megamenu #megamenuservice:hover,
#megamenuservice:hover {
    background: linear-gradient(145deg, rgba(20, 30, 55, 0.95) 0%, rgba(14, 24, 45, 0.95) 100%) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 12px 35px rgba(2, 132, 199, 0.3), 0 0 20px rgba(56, 189, 248, 0.2) !important;
    transform: translateY(-4px) !important;
}

/* Inner Padding & Layout inside Card */
#megamenu #megamenuservice .padding20,
#megamenuservice .padding20 {
    padding: 20px !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Card Link */
#megamenu #megamenuservice a,
#megamenuservice a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
}

/* Card Icons */
#megamenu #megamenuservice i,
#megamenuservice i {
    font-size: 42px !important;
    color: #38bdf8 !important;
    margin-bottom: 12px !important;
    filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.5)) !important;
    transition: transform 0.3s ease !important;
}

#megamenu #megamenuservice:hover i,
#megamenuservice:hover i {
    transform: scale(1.1) !important;
    color: #60a5fa !important;
}

/* Card Titles */
#megamenu #megamenuservice h5,
#megamenuservice h5 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 6px 0 8px 0 !important;
    letter-spacing: -0.01em !important;
}

/* Card Price Highlighting */
#megamenu #megamenuservice a strong,
#megamenuservice a strong {
    color: #38bdf8 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}

/* Uniform Ribbon (Popüler) Badge */
#megamenu #megamenuservice .ribbon,
#megamenuservice .ribbon {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 75px !important;
    height: 75px !important;
    overflow: hidden !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

#megamenu #megamenuservice .ribbon div,
#megamenuservice .ribbon div {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 20px !important;
    transform: rotate(-45deg) !important;
    -webkit-transform: rotate(-45deg) !important;
    width: 105px !important;
    display: block !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    position: absolute !important;
    top: 17px !important;
    left: -24px !important;
    letter-spacing: 0.05em !important;
}

#megamenu #megamenuservice .ribbon div::before,
#megamenu #megamenuservice .ribbon div::after,
#megamenuservice .ribbon div::before,
#megamenuservice .ribbon div::after {
    border-top-color: #0369a1 !important;
    border-left-color: #0369a1 !important;
}

/* Mega Menu Subtitle / Footnote (e.g. Full Performans, Ücretsiz SSL) */
#megamenu h4,
#megamenu center > h4,
#megamenu div[align="center"] > h4 {
    width: 100% !important;
    color: #94a3b8 !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    margin-top: 22px !important;
    margin-bottom: 5px !important;
    text-align: center !important;
    letter-spacing: 0.02em !important;
}

#megamenu h4 strong,
#megamenu center > h4 strong,
#megamenu div[align="center"] > h4 strong {
    color: #38bdf8 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   CHECKOUT & BASKET ACCOUNT FORM ULTRA DARK CONTRAST
   ========================================================================== */
#SubmitStepAccount table tr td,
.sepetleft table tr td,
#form_register_content table tr td,
#form_login_content table tr td {
    border-bottom: 1px solid rgba(56, 189, 248, 0.12) !important;
    color: #cbd5e1 !important;
    padding: 12px 10px !important;
}

#SubmitStepAccount table tr td h5,
.sepetleft table tr td h5 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em !important;
}

#SubmitStepAccount input[type="text"],
#SubmitStepAccount input[type="email"],
#SubmitStepAccount input[type="password"],
#SubmitStepAccount select,
#SubmitStepAccount textarea,
.sepetleft input[type="text"],
.sepetleft input[type="email"],
.sepetleft input[type="password"],
.sepetleft select,
.sepetleft textarea {
    background: #080e1e !important;
    border: 1.5px solid rgba(56, 189, 248, 0.25) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14.5px !important;
    outline: none !important;
    transition: all 0.25s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

#SubmitStepAccount input:focus,
#SubmitStepAccount select:focus,
#SubmitStepAccount textarea:focus,
.sepetleft input:focus,
.sepetleft select:focus,
.sepetleft textarea:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35), inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

#SubmitStepAccount input::placeholder,
.sepetleft input::placeholder {
    color: #64748b !important;
}

#SubmitStepAccount .radio-custom-label,
#SubmitStepAccount .checkbox-custom-label,
.sepetleft .radio-custom-label,
.sepetleft .checkbox-custom-label {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

#SubmitStepAccount .radio-custom:checked + .radio-custom-label::before,
.sepetleft .radio-custom:checked + .radio-custom-label::before {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
}

#SubmitStepAccount .checkbox-custom:checked + .checkbox-custom-label::before,
.sepetleft .checkbox-custom:checked + .checkbox-custom-label::before {
    background: #0284c7 !important;
    border-color: #38bdf8 !important;
}

/* ==========================================================================
   GLOBAL INTL-TEL-INPUT & GSM PADDING OVERRIDE (FIX FOR +90 OVERLAP)
   ========================================================================== */
.intl-tel-input {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.intl-tel-input .flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
}

.intl-tel-input .selected-flag {
    background: rgba(2, 132, 199, 0.15) !important;
    border-right: 1.5px solid rgba(56, 189, 248, 0.35) !important;
    border-top-left-radius: 9px !important;
    border-bottom-left-radius: 9px !important;
    padding: 0 10px 0 14px !important;
    height: calc(100% - 4px) !important;
    margin: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 92px !important;
}

.intl-tel-input .selected-dial-code {
    color: #38bdf8 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-block !important;
    padding-left: 2px !important;
    line-height: normal !important;
}

.intl-tel-input .selected-flag .iti-arrow {
    position: static !important;
    margin-top: 0 !important;
    border-top-color: #38bdf8 !important;
    margin-left: 2px !important;
}

.intl-tel-input input[type="text"],
.intl-tel-input input[type="tel"],
.intl-tel-input input#gsm,
#SubmitStepAccount .intl-tel-input input,
.sepetleft .intl-tel-input input,
#SubmitStepAccount input#gsm,
.sepetleft input#gsm,
#uyeolgiris input#gsm,
input#gsm {
    padding-left: 115px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    height: 48px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    letter-spacing: 0.03em !important;
}