/* ============================================
   RABISU.COM - GLOBAL STYLES
   Modern Gaming Hosting Theme
   ============================================

   TABLE OF CONTENTS:
   
   1. CSS Variables & Root                (Line 20)
   2. Reset & Base Styles                 (Line 190)
   3. Typography                          (Line 222)
   4. Utility Classes                     (Line 260)
   5. Buttons                             (Line 325)
   6. Top Bar                             (Line 407)
   7. Header & Navigation (Desktop)       (Line 507)
   8. Footer                              (Line 613)
   9. General Components                  (Line 794)
   10. Theme Toggle                       (Line 865)
   11. Hero Section                       (Line 928)
   12. Domain Premium Section             (Line 1303)
   13. Social Sidebar                     (Line 1684)
   14. Features Section                   (Line 1804)
   15. Global Infrastructure & Map        (Line 1940)
   16. Services Overview                  (Line 2524)
   17. Stats Counter                      (Line 2678)
   18. Get Started Section                (Line 2749)
   19. CTA Section                        (Line 2926)
   20. Testimonials Section               (Line 3051)
   21. Blog Section                       (Line 3485)
   22. Domain Banner & WHOIS              (Line 4018)
   23. Process & FAQ                      (Line 4462)
   24. Top Bar (Fixed Layout)             (Line 4534)
   25. Header (Fixed Layout)              (Line 4643)
   26. Navigation Menu (Detailed)         (Line 4667)
   27. Mobile Menu & Overlay              (Line 5006)
   28. Responsive Media Queries           (Line 5109)
   29. Print Styles                       (Line 6762)
   30. Mobile Menu Fix (Critical Patch)   (Line 6777)
   31. Product Pages (Domain, VPS, etc.)  (Line 6850)
   32. Hosting Page                       (Line 7920)
   33. Minecraft Page                      (Line 9970)
   34. Game Server Page                    (Line 14550)
   35. Payment Methods Page                (Line 16200)
   36. Legal Pages (Service Contract)      (Line 17590)
   37. DDoS Protection & Looking Glass     (Line 18000)
   38. VPS Page - Complete Styles          (Line 20070)
   39. Dedicated Server Premium Animations (Line 20863)

   ============================================ */


/* ============================================
   1. CSS VARIABLES & ROOT
   Color Palette & Theming System
   ============================================ */

/* 1.1 VARSAYILAN (DEFAULT) - LIGHT MODE */
:root {
    color-scheme: light; /* Tarayıcıya bunun açık tema olduğunu bildirir */

    /* Ana Marka Renkleri (Sabit) */
    --color-primary: #3b82f6;
    --color-primary-light: #60a5fa;
    --color-primary-dark: #2563eb;
    --color-secondary: #10b981;
    --color-secondary-light: #34d399;
    --color-secondary-dark: #059669;
    
    /* Accent (Vurgu) Renkleri */
    --color-accent-pink: #ec4899;
    --color-accent-orange: #f59e0b;
    --color-accent-blue: #06b6d4;
    --color-accent-red: #ef4444;
    
    /* Temel Renkler (Light Mode İçin) */
    --color-white: #ffffff;
    --color-black: #0f172a;
    
    /* Grayscale (Light Mode) */
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    
    /* Arka Planlar (Light Mode) */
    --bg-primary: #f8fafc;       /* Çok açık gri/beyaz */
    --bg-secondary: #f1f5f9;     /* Biraz daha koyu gri */
    --bg-tertiary: #e2e8f0;
    --bg-card: rgba(255, 255, 255, 0.9); /* Kartlar Beyaz */
    --bg-accent: linear-gradient(135deg, #3b82f6, #8b5cf6);
    
    /* Metin Renkleri (Light Mode = Koyu Yazı) */
    --text-primary: #0f172a;     /* SİYAH/KOYU YAZI */
    --text-secondary: #334155;
    --text-muted: #64748b;
    
    /* Border & Shadow */
    --border-color: rgba(226, 232, 240, 0.8);
    --shadow-color: rgba(15, 23, 42, 0.08);
    
    /* Typography */
    --font-primary: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "Ubuntu Sans Mono", "Courier New", monospace;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Spacing & Layout */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;
    
    /* Radius & Shadows */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,.15);
    --shadow-2xl: 0 25px 50px rgba(0,0,0,.25);
    
    /* Z-Index Hierarchy (Modern Stack) */
    --z-overlay: 899;       /* Header'ın altı */
    --z-header: 900;        /* Sayfa içeriğinin üstü */
    --z-top-bar: 950;       /* Header'ın üstü */
    --z-dropdown: 1000;     /* Top Bar'ın üstü */
    --z-mobile-menu: 1100;  /* Her şeyin en üstü */
    
    /* Legacy Z-Index (Geri uyumluluk için tutuldu) */
    --z-sticky: 900;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Containers */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
}

/* 1.2 DARK MODE OVERRIDE (MANUEL SEÇİM İÇİN) */
[data-theme="dark"] {
    color-scheme: dark; /* Tarayıcıya bunun koyu tema olduğunu bildirir */
    
    /* Temel Renkler (Dark Mode İçin) */
    --color-white: #0f172a; /* Dark modda white değişkeni koyu olur */
    --color-black: #f8fafc; /* Dark modda black değişkeni açık olur */
    
    /* Grayscale (Dark Mode) */
    --color-gray-50: #1e293b;
    --color-gray-100: #1e293b;
    --color-gray-200: #334155;
    --color-gray-300: #475569;
    --color-gray-400: #64748b;
    --color-gray-500: #94a3b8;
    --color-gray-600: #cbd5e1;
    --color-gray-700: #e2e8f0;
    --color-gray-800: #f1f5f9;
    --color-gray-900: #f8fafc;
    
    /* Arka Planlar (Dark Mode) */
    --bg-primary: #0f172a;       /* Koyu Lacivert */
    --bg-secondary: #1e293b;     /* Daha açık lacivert */
    --bg-tertiary: #334155;
    --bg-card: rgba(30, 41, 59, 0.5); /* Yarı saydam koyu kart */
    
    /* Metin Renkleri (Dark Mode = Açık Yazı) */
    --text-primary: #f8fafc;     /* BEYAZ/AÇIK YAZI */
    --text-secondary: #e2e8f0;
    --text-muted: #94a3b8;
    
    /* Border & Shadow */
    --border-color: rgba(59, 130, 246, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* 1.3 LIGHT MODE OVERRIDE (İsteğe Bağlı - Tekrar light yapma) */
[data-theme="light"] {
    color-scheme: light;
    
    /* :root zaten light mode, burası opsiyonel override için */
    /* Gerekirse burada özel light mode değişiklikleri yapılabilir */
}



/* ============================================
   2. RESET & BASE STYLES
   Temel HTML Element Ayarları
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden; /* Yatay taşmayı engeller */
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    
    /* KRİTİK: Renkler Step 1'deki değişkenlerden çekiliyor */
    background-color: var(--bg-primary); 
    color: var(--text-primary);
    
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding-top: 0;
    width: 100%;
    max-width: 100vw;
}



/* ============================================
   3. TYPOGRAPHY
   Başlıklar, Paragraflar, Linkler
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary); /* Başlık rengini garantiye al */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
}

/* Responsive Font Boyutları (Clamp) */
h1 { font-size: clamp(2rem, 5vw + 0.5rem, 3rem); }
h2 { font-size: clamp(1.75rem, 4vw + 0.5rem, 2.25rem); }
h3 { font-size: clamp(1.5rem, 3vw + 0.5rem, 1.875rem); }
h4 { font-size: clamp(1.25rem, 2.5vw + 0.25rem, 1.5rem); }
h5 { font-size: clamp(1.125rem, 2vw + 0.25rem, 1.25rem); }
h6 { font-size: clamp(1rem, 1.5vw + 0.25rem, 1.125rem); }

p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-secondary);
}

b,strong{
    font-weight:var(--font-weight-bold);
}

small{
    font-size:var(--font-size-sm);
}


/* ============================================
   4. UTILITY CLASSES
   Layout, Spacing, Display, Text Utilities
   ============================================ */

.container{
    margin-left:auto;
    margin-right:auto;
}

.container,.container-fluid{
    padding-left:var(--spacing-md);
    padding-right:var(--spacing-md);
    width:100%;
}
.d-flex{ display:flex; }
.d-inline-flex{ display:inline-flex; }
.flex-row{ flex-direction:row; }
.flex-column{ flex-direction:column; }
.flex-wrap{ flex-wrap:wrap; }
.flex-nowrap{ flex-wrap:nowrap; }
.justify-start{ justify-content:flex-start; }
.justify-center{ justify-content:center; }
.justify-end{ justify-content:flex-end; }
.justify-between{ justify-content:space-between; }
.justify-around{ justify-content:space-around; }
.align-start{ align-items:flex-start; }
.align-center{ align-items:center; }
.align-end{ align-items:flex-end; }
.align-stretch{ align-items:stretch; }
.d-none{ display:none; }
.d-block{ display:block; }
.d-inline{ display:inline; }
.d-inline-block{ display:inline-block; }
.m-0{ margin:0; }
.mt-1{ margin-top:var(--spacing-xs); }
.mt-2{ margin-top:var(--spacing-sm); }
.mt-3{ margin-top:var(--spacing-md); }
.mt-4{ margin-top:var(--spacing-lg); }
.mt-5{ margin-top:var(--spacing-xl); }

.mb-1{ margin-bottom:var(--spacing-xs); }
.mb-2{ margin-bottom:var(--spacing-sm); }
.mb-3{ margin-bottom:var(--spacing-md); }
.mb-4{ margin-bottom:var(--spacing-lg); }
.mb-5{ margin-bottom:var(--spacing-xl); }

.p-0{ padding:0; }
.pt-1{ padding-top:var(--spacing-xs); }
.pt-2{ padding-top:var(--spacing-sm); }
.pt-3{ padding-top:var(--spacing-md); }
.pt-4{ padding-top:var(--spacing-lg); }
.pt-5{ padding-top:var(--spacing-xl); }

.pb-1{ padding-bottom:var(--spacing-xs); }
.pb-2{ padding-bottom:var(--spacing-sm); }
.pb-3{ padding-bottom:var(--spacing-md); }
.pb-4{ padding-bottom:var(--spacing-lg); }
.pb-5{ padding-bottom:var(--spacing-xl); }
.text-left{ text-align:left; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.text-uppercase{ text-transform:uppercase; }
.text-lowercase{ text-transform:lowercase; }
.text-capitalize{ text-transform:capitalize; }

.text-primary{ color:var(--color-primary); }
.text-secondary{ color:var(--color-secondary); }
.text-white{ color:var(--color-white); }
.text-gray{ color:var(--color-gray-600); }


/* ============================================
   5. BUTTONS
   Button Styles & Variants
   ============================================ */

.btn{
    border:2px solid transparent;
    border-radius:var(--radius-md);
    cursor:pointer;
    display:inline-block;
    font-family:var(--font-primary);
    font-size:var(--font-size-base);
    font-weight:var(--font-weight-semibold);
    line-height:var(--line-height-normal);
    outline:none;
    padding:var(--spacing-sm) var(--spacing-lg);
    text-align:center;
    text-decoration:none;
    transition:all var(--transition-base);
    user-select:none;
    vertical-align:middle;
    white-space:nowrap;
}

.btn:disabled{
    cursor:not-allowed;
    opacity:.6;
}
.btn-primary{
    background:linear-gradient(135deg, var(--color-primary) 0, var(--color-primary-light) 100%);
    border-color:var(--color-primary);
    color:var(--color-white);
}

.btn-primary:hover{
    background:linear-gradient(135deg, var(--color-primary-dark) 0, var(--color-primary) 100%);
    box-shadow:var(--shadow-lg);
    transform:translateY(-2px);
}

.btn-secondary{
    background:linear-gradient(135deg, var(--color-secondary) 0, var(--color-secondary-light) 100%);
    border-color:var(--color-secondary);
    color:var(--color-white);
}

.btn-secondary:hover{
    background:linear-gradient(135deg, var(--color-secondary-dark) 0, var(--color-secondary) 100%);
    box-shadow:var(--shadow-lg);
    transform:translateY(-2px);
}

.btn-outline-primary{
    background:transparent;
    border-color:var(--color-primary);
    color:var(--color-primary);
}

.btn-outline-primary:hover{
    background:var(--color-primary);
    color:var(--color-white);
}

.btn-outline-white{
    background:transparent;
    border-color:var(--color-white);
    color:var(--color-white);
}

.btn-outline-white:hover{
    background:var(--color-white);
    color:var(--color-primary);
}

[data-theme="light"] .btn-outline-white{
    border-color:var(--color-primary);
    color:var(--color-primary);
}

[data-theme="light"] .btn-outline-white:hover{
    background:var(--color-primary);
    color:var(--color-white);
}
.btn-sm{
    font-size:var(--font-size-sm);
    padding:var(--spacing-xs) var(--spacing-md);
}

.btn-lg{
    font-size:var(--font-size-lg);
    padding:var(--spacing-md) var(--spacing-2xl);
}

.btn-block{
    display:block;
    width:100%;
}


/* ============================================
   6. TOP BAR
   Üst Bilgi Çubuğu & Dropdown Menüler
   ============================================ */

div.top-bar{
    background:var(--bg-primary);
    border-bottom:1px solid var(--border-color);
    padding:.5rem 0;
    position:relative !important;
    transition:none;
    width:100%;
    z-index:var(--z-top-bar) !important;
}
[data-theme=dark] div.top-bar{
    background:rgba(15,23,42,.95);
    border-bottom:1px solid rgba(59,130,246,.15);
    box-shadow:0 1px 3px rgba(0,0,0,.2);
}
[data-theme=light] div.top-bar{
    background:linear-gradient(135deg, #1e293b, #334155);
    border-bottom:1px solid rgba(15,23,42,.2);
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}

.top-bar-content,.top-bar-link{
    font-size:.875rem;
}

.top-bar-link{
    color:var(--text-secondary);
    transition:color .3s ease;
}
[data-theme=light] .top-bar-link{
    color:#cbd5e1;
}

.top-bar-link:hover{
    color:var(--color-primary);
}
[data-theme=light] .top-bar-link:hover{
    color:#3b82f6;
}

.top-bar-btn,.top-bar-link i{
    font-size:.875rem;
}

.top-bar-btn{
    border:none;
    color:var(--text-secondary);
    padding:.25rem .5rem;
    transition:color .3s ease;
}
[data-theme=light] .top-bar-btn{
    color:#cbd5e1;
}

.top-bar-btn:hover{
    color:var(--color-primary);
}
[data-theme=light] .top-bar-btn:hover{
    color:#3b82f6;
}

.dropdown-toggle{
    cursor:pointer;
}

.dropdown-menu{
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    margin-top:.5rem;
    min-width:150px;
    top:100%;
    transition:all .3s ease;
    z-index:var(--z-dropdown) !important;
}

.dropdown-menu.show{
    opacity:1;
    transform:translateY(0);
    visibility:visible;
}

.dropdown-item{
    color:var(--text-primary);
    display:block;
    font-size:.875rem;
    padding:.75rem 1rem;
    transition:all .3s ease;
}
[data-theme=light] .dropdown-item{
    color:#1e293b;
}

.dropdown-item:hover{
    background:var(--bg-secondary);
}
[data-theme=light] .dropdown-item:hover{
    background:#f1f5f9;
    color:#3b82f6;
}


/* ============================================
   7. HEADER & NAVIGATION (DESKTOP)
   Header, Navbar, Mega Menu, Toggle
   ============================================ */

header.header-sticky{
    left:0;
    position:sticky !important;
    right:0;
    top:0 !important;
    transition:all var(--transition-base);
    width:100%;
    z-index:var(--z-header) !important;
}

header.header-glass{
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    background:rgba(248,250,252,.95);
    border-bottom:1px solid rgba(226,232,240,.8);
    box-shadow:0 4px 20px rgba(15,23,42,.06);
}
[data-theme=dark] header.header-glass{
    background:rgba(15,23,42,.9);
    border-bottom:1px solid rgba(59,130,246,.15);
    box-shadow:0 4px 20px rgba(0,0,0,.3);
}
[data-theme=light] header.header-glass{
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
    background:hsla(0,0%,100%,.95);
    border-bottom:1px solid rgba(226,232,240,.8);
    box-shadow:0 4px 20px rgba(15,23,42,.08);
}

.navbar{
    padding:var(--spacing-md) 0;
}

.navbar-brand{
    align-items:center;
    display:flex;
}

.navbar-brand img{
    transition:filter .3s ease;
}
[data-theme=light] .navbar-brand img{
    filter:brightness(0) saturate(100%);
}

.navbar-menu>li{
    margin:0 var(--spacing-sm);
    position:relative;
}

.navbar-menu>li>a{
    color:var(--color-gray-700);
    display:block;
    font-weight:var(--font-weight-medium);
    padding:var(--spacing-sm) var(--spacing-md);
    transition:color var(--transition-base);
}

.navbar-menu>li>a.active,.navbar-menu>li>a:hover{
    color:var(--color-primary);
}
[data-theme=light] .navbar-menu>li>a{
    color:#334155;
}

[data-theme=light] .navbar-menu>li>a.active,[data-theme=light] .navbar-menu>li>a:hover{
    color:#3b82f6;
}
.mega-menu{
    background:var(--color-white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-2xl);
    margin-top:var(--spacing-sm);
    padding:var(--spacing-xl);
    top:100%;
    transform:translateX(-50%);
    transition:opacity var(--transition-base), visibility var(--transition-base);
    width:800px;
}

.navbar-menu>li:hover .mega-menu{
    opacity:1;
    visibility:visible;
}
.navbar-toggle{
    height:25px;
    justify-content:space-around;
    padding:0;
    width:30px;
}

.navbar-toggle span{
    background:var(--text-primary);
    border-radius:var(--radius-full);
    transition:all var(--transition-base);
    width:100%;
}

.navbar-toggle.active span:first-child{
    transform:rotate(45deg) translate(8px, 8px);
}

.navbar-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(7px, -7px);
}


/* ============================================
   8. FOOTER
   Footer Layout, Links, Social Media
   ============================================ */

footer{
    background:#0a0e1a;
    color:var(--text-secondary);
    overflow:hidden;
    position:relative;
}
[data-theme=light] footer{
    background:#0f172a;
}
.footer-world-map{
    background-position:50%;
    background-repeat:no-repeat;
    background-size:cover;
    height:100%;
    left:0;
    opacity:1;
    pointer-events:none;
    position:absolute;
    top:0;
    width:100%;
    z-index:0;
}

[data-theme=light] .footer-world-map{
    opacity:1;
}
footer:before{
    background:radial-gradient(ellipse at 20% 30%, rgba(59,130,246,.08) 0, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(139,92,246,.06) 0, transparent 50%);
    bottom:0;
    content:"";
    left:0;
    pointer-events:none;
    position:absolute;
    right:0;
    top:0;
    z-index:1;
}
.footer-main{
    padding:5rem 0 3rem;
    position:relative;
    z-index:2;
}
.footer-brand{
    margin-bottom:var(--spacing-lg);
}

.footer-logo{
    height:45px;
    margin-bottom:1.5rem;
    width:auto;
}

.footer-description{
    color:hsla(0,0%,100%,.65);
    font-size:.95rem;
    line-height:1.7;
    margin-bottom:1.5rem;
    max-width:350px;
}

.footer-social-title{
    color:#e2e8f0;
    font-size:.95rem;
    font-weight:600;
    margin-bottom:1rem;
}
.footer-social-links{
    flex-wrap:wrap;
    gap:.75rem;
}

.footer-social-icon,.footer-social-links{
    align-items:center;
    display:inline-flex;
}

.footer-social-icon{
    backdrop-filter:blur(10px);
    background:hsla(0,0%,100%,.05);
    border:1px solid hsla(0,0%,100%,.15);
    border-radius:50%;
    color:hsla(0,0%,100%,.8);
    font-size:1rem;
    height:40px;
    justify-content:center;
    text-decoration:none;
    transition:all .3s ease;
    width:40px;
}

.footer-social-icon:hover{
    background:#3b82f6;
    border-color:#3b82f6;
    box-shadow:0 8px 20px rgba(59,130,246,.4);
    color:#fff;
    transform:translateY(-3px);
}
.footer-columns{
    display:flex;
    flex-wrap:wrap;
    margin:0 -var(--spacing-md);
}

.footer-col{
    flex:0 0 25%;
    margin-bottom:var(--spacing-xl);
    max-width:25%;
    padding:0 var(--spacing-md);
}

.footer-col-title{
    color:#f8fafc;
    font-size:1rem;
    font-weight:700;
    letter-spacing:.3px;
    margin-bottom:1.5rem;
    white-space:nowrap;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:.65rem;
    list-style:none;
    margin:0;
    padding:0;
}

.footer-links li a{
    color:hsla(0,0%,100%,.6);
    display:inline-block;
    font-size:.9rem;
    text-decoration:none;
    transition:color .3s ease;
    white-space:nowrap;
}

.footer-links li a:hover{
    color:#fff;
}
.footer-bottom{
    border-top:1px solid hsla(0,0%,100%,.08);
    padding:1.5rem 0;
    position:relative;
    z-index:2;
}

.footer-bottom-content{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
    justify-content:space-between;
}

.footer-copyright{
    color:hsla(0,0%,100%,.5);
    font-size:.875rem;
    margin:0;
}

.footer-bottom-links{
    align-items:center;
    display:inline-flex;
    flex-wrap:wrap;
    gap:1.5rem;
}

.footer-bottom-links a{
    color:hsla(0,0%,100%,.6);
    font-size:.875rem;
    text-decoration:none;
    transition:color .3s ease;
}

.footer-bottom-links a:hover{
    color:#60a5fa;
}
.foot-one,.foot-three,.foot-two{
    display:none;
}


/* ============================================
   9. GENERAL COMPONENTS
   Section, Images, Animations, Overlay
   ============================================ */

.section{
    padding:5rem 0;
    scroll-margin-top:80px;
}
.img-fluid{
    height:auto;
    max-width:100%;
}

.rounded{
    border-radius:var(--radius-md);
}

.rounded-lg{
    border-radius:var(--radius-lg);
}

.rounded-full{
    border-radius:var(--radius-full);
}

.shadow-sm{
    box-shadow:var(--shadow-sm);
}

.shadow-md{
    box-shadow:var(--shadow-md);
}

.shadow-lg{
    box-shadow:var(--shadow-lg);
}

.overflow-hidden{
    overflow:hidden;
}

.position-relative{
    position:relative;
}

.position-absolute{
    position:absolute;
}

.w-100{
    width:100%;
}

.h-100{
    height:100%;
}

.animate-fade-in{
    animation:fadeIn .6s ease-out;
}

.navbar-toggle.active span:first-child{
    transform:rotate(45deg) translateY(9px);
}

.navbar-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translateY(-9px);
}


/* ============================================
   10. THEME TOGGLE
   Dark/Light Mode Switcher
   ============================================ */

.theme-toggle{
    background:linear-gradient(135deg, #667eea, #764ba2);
    border:none;
    border-radius:var(--radius-full);
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    cursor:pointer;
    height:28px;
    position:relative;
    transition:all .4s cubic-bezier(.4, 0, .2, 1);
    width:56px;
}

[data-theme=light] .theme-toggle{
    background:linear-gradient(135deg, #fbbf24, #f59e0b);
}

[data-theme=dark] .theme-toggle{
    background:linear-gradient(135deg, #1e3a8a, #3b82f6);
}

.theme-toggle-slider{
    align-items:center;
    background:#fff;
    border-radius:var(--radius-full);
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    display:flex;
    font-size:12px;
    height:22px;
    justify-content:center;
    left:3px;
    position:absolute;
    top:3px;
    transition:all .4s cubic-bezier(.4, 0, .2, 1);
    width:22px;
}

.theme-toggle-slider svg{
    color:#fbbf24;
    display:block;
    height:14px;
    transition:all .3s ease;
    width:14px;
}

[data-theme=light] .theme-toggle-slider{
    background:#fff;
    transform:translateX(0);
}

[data-theme=light] .theme-toggle-slider svg{
    color:#f59e0b;
    stroke:#f59e0b;
}

[data-theme=dark] .theme-toggle-slider{
    background:#1e293b;
    transform:translateX(28px);
}

[data-theme=dark] .theme-toggle-slider svg{
    color:#93c5fd;
    stroke:#93c5fd;
}


/* ============================================
   11. HERO SECTION
   Ana Banner, Background, Stats, Animations
   ============================================ */

.hero-section{
    align-items:center;
    background:linear-gradient(180deg, var(--bg-primary) 0, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
    display:flex;
    justify-content:center;
    min-height:100vh;
    overflow:hidden;
    padding:6rem 0 4rem;
    position:relative;
}
[data-theme=dark] .hero-section{
    background:linear-gradient(180deg, #0a0e1a, #0f172a 50%, #1a1f35);
}
[data-theme=light] .hero-section{
    background:linear-gradient(180deg, #eff6ff, #dbeafe 50%, #bfdbfe);
}
.hero-background{
    overflow:hidden;
    z-index:0;
}

.hero-background,.hero-grid{
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    top:0;
}

.hero-grid{
    background-image: linear-gradient(rgba(59,130,246,.05) 1px, transparent 0), linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 0);
    background-size:100px 100px;
}
[data-theme=light] .hero-grid{
    background-image: linear-gradient(rgba(59,130,246,.1) 1px, transparent 0), linear-gradient(90deg, rgba(59,130,246,.1) 1px, transparent 0);
}

@keyframes grid-move{
    0%{ transform:translate(0); }
    to{ transform:translate(100px, 100px); }
}

.hero-gradient{
    animation:pulse 8s ease-in-out infinite;
    background:radial-gradient(
        ellipse at center,
        rgba(59,130,246,.15) 0,
        transparent 70%
    );
    height:150%;
    left:-25%;
    position:absolute;
    top:-50%;
    width:150%;
}
[data-theme=light] .hero-gradient{
    background:radial-gradient(
        ellipse at center,
        rgba(59,130,246,.2) 0,
        transparent 65%
    );
}
.hero-particles{
    height:100%;
    left:0;
    overflow:hidden;
    pointer-events:none;
    position:absolute;
    top:0;
    width:100%;
    z-index:2;
}

.particle{
    animation:float 15s linear infinite;
    background:rgba(96,165,250,.4);
    border-radius:50%;
    box-shadow:0 0 8px rgba(96,165,250,.3);
    height:6px;
    position:absolute;
    width:6px;
    will-change:transform, opacity;
}
[data-theme=light] .particle{
    background:rgba(59,130,246,.6);
    box-shadow:0 0 12px rgba(59,130,246,.4);
}

.particle:first-child{
    animation-delay:0s;
    animation-duration:12s;
    left:10%;
    top:20%;
}

.particle:nth-child(2){
    animation-delay:2s;
    animation-duration:14s;
    left:25%;
    top:60%;
}

.particle:nth-child(3){
    animation-delay:4s;
    animation-duration:13s;
    left:35%;
    top:40%;
}

.particle:nth-child(4){
    animation-delay:1s;
    animation-duration:15s;
    left:50%;
    top:70%;
}

.particle:nth-child(5){
    animation-delay:3s;
    animation-duration:13.5s;
    left:60%;
    top:30%;
}

.particle:nth-child(6){
    animation-delay:5s;
    animation-duration:14.5s;
    left:70%;
    top:50%;
}

.particle:nth-child(7){
    animation-delay:2.5s;
    animation-duration:12.5s;
    left:80%;
    top:25%;
}

.particle:nth-child(8){
    animation-delay:4.5s;
    animation-duration:15.5s;
    left:15%;
    top:65%;
}

.particle:nth-child(9){
    animation-delay:1.5s;
    animation-duration:13.8s;
    left:90%;
    top:45%;
}

.particle:nth-child(10){
    animation-delay:6s;
    animation-duration:16s;
    left:42%;
    top:55%;
}
.hero-content{
    margin:-5rem auto 0;
    max-width:1000px;
    padding:0 1rem;
    position:relative;
    text-align:center;
    z-index:1;
}
.hero-badge{
    align-items:center;
    backdrop-filter:blur(10px);
    background:rgba(59,130,246,.1);
    border:1px solid rgba(59,130,246,.3);
    border-radius:50px;
    color:#60a5fa;
    display:inline-flex;
    font-size:.85rem;
    font-weight:600;
    gap:.5rem;
    letter-spacing:1px;
    margin-bottom:2rem;
    padding:.5rem 1.25rem;
}
[data-theme=light] .hero-badge{
    backdrop-filter:blur(8px);
    background:rgba(59,130,246,.15);
    border-color:rgba(59,130,246,.4);
    color:#2563eb;
}

.hero-badge i{
    animation:glow 2s ease-in-out infinite;
}

@keyframes glow{
    0%,to{ opacity:1; }
    50%{ opacity:.5; }
}
.hero-title{
    color:var(--text-primary);
    font-size:clamp(2.5rem, 6vw, 5rem);
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.1;
    margin-bottom:1.5rem;
}

.hero-title-gradient{
    background:linear-gradient(135deg, #3b82f6, #8b5cf6 50%, #06b6d4);
    -webkit-background-clip:text;
    background-clip:text;
    background-size:200% 200%;
    display:block;
}
.hero-title-gradient,[data-theme=light] .hero-title-gradient{
    -webkit-text-fill-color:transparent;
    animation:gradient-shift 5s ease-in-out infinite;
}
[data-theme=light] .hero-title-gradient{
    background:linear-gradient(135deg, #2563eb, #7c3aed 50%, #0891b2);
    -webkit-background-clip:text;
    background-clip:text;
    background-size:200% 200%;
}

@keyframes gradient-shift{
    0%,to{ background-position:0 50%; }
    50%{ background-position:100% 50%; }
}
.hero-subtitle{
    color:var(--text-secondary);
    font-size:clamp(1.1rem, 2vw, 1.5rem);
    font-weight:400;
    margin-bottom:2rem;
}
.hero-link{
    align-items:center;
    color:#60a5fa;
    display:inline-flex;
    font-size:1rem;
    font-weight:500;
    gap:.5rem;
    margin-bottom:4rem;
    text-decoration:none;
    transition:all .3s ease;
}

.hero-link:hover{
    color:#3b82f6;
    gap:1rem;
}

.hero-link i{
    transition:transform .3s ease;
}

.hero-link:hover i{
    transform:translateX(4px);
}
.hero-stats{
    display:grid;
    gap:1.5rem;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    margin-top:4rem;
}

.stat-card{
    backdrop-filter:blur(20px);
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:16px;
    overflow:hidden;
    padding:2rem 1.5rem;
    position:relative;
    transition:all .3s cubic-bezier(.4, 0, .2, 1);
}

.stat-card:before{
    background:linear-gradient(90deg, 
        transparent, 
        #3b82f6 50%, 
        transparent
    );
    content:"";
    height:2px;
    left:0;
    opacity:0;
    position:absolute;
    right:0;
    top:0;
    transition:opacity .3s ease;
}

[data-theme=light] .stat-card:before{
    background:linear-gradient(90deg, 
        transparent, 
        #1b3c88 50%, 
        transparent
    );
}

.stat-card:hover{
    background:rgba(30,41,59,.7);
    border-color:rgba(59,130,246,.5);
    box-shadow:0 20px 60px rgba(59,130,246,.2);
    transform:translateY(-8px);
}

[data-theme=light] .stat-card:hover{
    background:hsla(0,0%,100%,.9);
    border-color:rgba(27,60,136,.2);
    box-shadow:0 20px 60px rgba(27,60,136,.15);
}

.stat-card:hover:before{
    opacity:1;
}

.stat-value{
    color:var(--color-primary);
    font-size:2.5rem;
    font-weight:700;
    line-height:1;
    margin-bottom:.5rem;
}

.stat-label{
    color:var(--text-secondary);
    font-size:.75rem;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
}
.animate-fade-in{
    animation:fadeIn .8s ease-out;
}

.animate-slide-up{
    animation:slideUp .8s ease-out;
}

.animate-slide-up.delay-1{
    animation-delay:.2s;
    animation-fill-mode:forwards;
    opacity:0;
}

.animate-slide-up.delay-2{
    animation-delay:.4s;
    animation-fill-mode:forwards;
    opacity:0;
}

.animate-slide-up.delay-3{
    animation-delay:.6s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeIn{
    0%{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes slideUp{
    0%{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* ============================================
   12. DOMAIN PREMIUM SECTION
   Domain Arama, Premium Card, Globe Animation
   ============================================ */

.domain-premium-section{
    overflow:hidden;
    padding:4rem 0;
    position:relative;
}
[data-theme=light] .domain-premium-section{
    background:var(--bg-primary);
}

.domain-premium-card{
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    background:var(--bg-card);
    border-radius:28px;
    box-shadow:0 25px 80px rgba(0,0,0,.2),0 0 0 1px rgba(59,130,246,.1);
    overflow:hidden;
    padding:0;
    position:relative;
}

[data-theme=light] .domain-premium-card{
    background:linear-gradient(135deg, hsla(0,0%,100%,.95), rgba(248,250,252,.95));
    box-shadow:0 25px 80px rgba(0,0,0,.1),0 0 0 1px rgba(27,60,136,.08);
}
.premium-bg-animation{
    inset:0;
    overflow:hidden;
    pointer-events:none;
    position:absolute;
    z-index:0;
}

.floating-shape{
    background:linear-gradient(135deg, rgba(59,130,246,.15), rgba(139,92,246,.15));
    border-radius:50%;
    filter:blur(60px);
    position:absolute;
}

[data-theme=light] .floating-shape{
    background:linear-gradient(135deg, rgba(27,60,136,.08), rgba(91,33,182,.08));
}

.shape-1{
    animation:floatShape 15s ease-in-out infinite;
    height:400px;
    left:-100px;
    top:-200px;
    width:400px;
}

.shape-2{
    animation:floatShape 20s ease-in-out infinite reverse;
    bottom:-150px;
    height:300px;
    right:-50px;
    width:300px;
}

.shape-3{
    animation:pulse 10s ease-in-out infinite;
    height:250px;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:250px;
}

@keyframes floatShape{
    0%,to{ transform:translate(0) rotate(0deg); }
    33%{ transform:translate(30px, -30px) rotate(120deg); }
    66%{ transform:translate(-20px, 20px) rotate(240deg); }
}
.premium-visual-side{
    min-height:500px;
    padding:3.5rem 3rem;
    z-index:1;
}

.premium-visual-side,.visual-content{
    align-items:center;
    display:flex;
    justify-content:center;
    position:relative;
}

.visual-content{
    flex-direction:column;
    width:100%;
}
.premium-globe-container{
    height:360px;
    position:relative;
    width:360px;
}

.premium-globe{
    filter:drop-shadow(0 15px 40px rgba(59, 130, 246, .3));
    height:100%;
    width:100%;
}

[data-theme=light] .premium-globe{
    filter:drop-shadow(0 15px 40px rgba(27, 60, 136, .2));
}

.globe-bg{
    animation:pulseGlobe 4s ease-in-out infinite;
}

.orbit{
    animation:rotateOrbit 20s linear infinite;
    transform-origin:center;
}

.orbit-2{
    animation:rotateOrbit 15s linear infinite reverse;
}

.meridian{
    animation:rotateMeridian 10s ease-in-out infinite;
}

.equator{
    animation:slideEquator 8s ease-in-out infinite;
}

.core-dot{
    animation:pulseCore 2s ease-in-out infinite;
}

@keyframes pulseGlobe{
    0%,to{ opacity:.1; transform:scale(1); }
    50%{ opacity:.2; transform:scale(1.05); }
}

@keyframes rotateOrbit{
    0%{ transform:rotate(0deg); }
    to{ transform:rotate(1turn); }
}

@keyframes rotateMeridian{
    0%,to{ transform:rotateY(0deg); }
    50%{ transform:rotateY(180deg); }
}

@keyframes slideEquator{
    0%,to{ opacity:.4; }
    50%{ opacity:.8; }
}

@keyframes pulseCore{
    0%,to{ opacity:1; transform:scale(1); }
    50%{ opacity:.7; transform:scale(1.3); }
}
.premium-search-side{
    padding:3.5rem 3rem;
    position:relative;
    z-index:1;
}
.search-header{
    margin-bottom:2rem;
}

.search-badge{
    align-items:center;
    background:rgba(16,185,129,.1);
    border:1px solid rgba(16,185,129,.3);
    border-radius:50px;
    color:#10b981;
    display:inline-flex;
    font-size:.75rem;
    font-weight:700;
    gap:.5rem;
    margin-bottom:1.25rem;
    padding:.5rem 1rem;
}

.pulse-dot{
    animation:pulseDot 2s ease-in-out infinite;
    background:#10b981;
    border-radius:50%;
    height:8px;
    width:8px;
}

@keyframes pulseDot{
    0%,to{ opacity:1; transform:scale(1); }
    50%{ box-shadow:0 0 0 4px rgba(16,185,129,.3); opacity:.7; transform:scale(1.2); }
}

.search-title{
    color:var(--text-primary);
    font-size:clamp(1.75rem, 3vw, 2.5rem);
    font-weight:800;
    line-height:1.2;
    margin-bottom:.75rem;
}

.search-subtitle{
    color:var(--text-secondary);
    font-size:1rem;
    margin:0;
}
.premium-search-form{
    margin-bottom:2rem;
}

.search-box-wrapper{
    align-items:stretch;
    background:var(--bg-secondary);
    border:2px solid var(--border-color);
    border-radius:16px;
    display:flex;
    overflow:hidden;
    position:relative;
    transition:all .4s cubic-bezier(.4, 0, .2, 1);
}

.search-box-wrapper.focused,.search-box-wrapper:focus-within{
    border-color:var(--color-primary);
    box-shadow:0 10px 40px rgba(59,130,246,.2),0 0 0 4px rgba(59,130,246,.05);
    transform:translateY(-2px);
}

[data-theme=light] .search-box-wrapper:focus-within{
    box-shadow:0 10px 40px rgba(27,60,136,.15),0 0 0 4px rgba(27,60,136,.04);
}

.search-icon-wrapper{
    align-items:center;
    color:var(--color-primary);
    display:flex;
    font-size:1.25rem;
    justify-content:center;
    padding:0 1.25rem;
}

.premium-search-input{
    background:transparent;
    border:none;
    color:var(--text-primary);
    flex:1;
    font-size:1.125rem;
    font-weight:600;
    min-width:0;
    outline:none;
    padding:1.125rem .75rem;
}

.premium-search-input::placeholder{
    color:var(--text-muted);
    font-weight:500;
}

.tld-select-wrapper{
    border-left:1px solid var(--border-color);
    position:relative;
}

.premium-tld-select{
    appearance:none;
    background:transparent;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%233b82f6' d='M5 8 0 3h10z'/%3E%3C/svg%3E");
    background-position:right 1rem center;
    background-repeat:no-repeat;
    border:none;
    color:var(--color-primary);
    cursor:pointer;
    font-size:1rem;
    font-weight:700;
    min-width:110px;
    outline:none;
    padding:1.125rem 2.5rem 1.125rem 1.25rem;
}

[data-theme=light] .premium-tld-select{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%231b3c88' d='M5 8 0 3h10z'/%3E%3C/svg%3E");
}

.premium-search-button{
    align-items:center;
    background:linear-gradient(135deg, #3b82f6, #2563eb);
    border:none;
    color:#fff;
    cursor:pointer;
    display:flex;
    font-size:1rem;
    font-weight:700;
    gap:.75rem;
    padding:0 2rem;
    transition:all .3s ease;
    white-space:nowrap;
}

[data-theme=light] .premium-search-button{
    background:linear-gradient(135deg, #1b3c88, #1e40af);
}

.premium-search-button:hover{
    background:linear-gradient(135deg, #2563eb, #1d4ed8);
}

.premium-search-button i{
    transition:transform .3s ease;
}

.premium-search-button:hover i{
    transform:translateX(4px);
}
.quick-tlds{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:1.25rem;
}

.quick-label{
    color:var(--text-muted);
    font-size:.875rem;
    font-weight:600;
}

.quick-tld-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

.quick-tld{
    background:transparent;
    border:1.5px solid rgba(59,130,246,.25);
    border-radius:50px;
    color:var(--color-primary);
    cursor:pointer;
    font-size:.875rem;
    font-weight:700;
    padding:.5rem 1rem;
    transition:all .3s cubic-bezier(.4, 0, .2, 1);
}

[data-theme=light] .quick-tld{
    border-color:rgba(27,60,136,.25);
}

.quick-tld.active,.quick-tld:hover{
    background:linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-color:transparent;
    box-shadow:0 6px 18px rgba(59,130,246,.3);
    color:#fff;
    transform:translateY(-2px);
}

[data-theme=light] .quick-tld.active,[data-theme=light] .quick-tld:hover{
    background:linear-gradient(135deg, #1b3c88, #5b21b6);
    box-shadow:0 6px 18px rgba(27,60,136,.25);
}
.search-features{
    border-top:1px solid var(--border-color);
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
    margin-top:2rem;
    padding-top:2rem;
}

.feature-item{
    align-items:center;
    color:var(--text-secondary);
    display:flex;
    font-size:.875rem;
    font-weight:500;
    gap:.5rem;
}

.feature-item i{
    color:#10b981;
    font-size:1rem;
}


/* ============================================
   13. SOCIAL SIDEBAR
   Sabit Yan Sosyal Medya Butonları
   ============================================ */

.s-soft{
    display:flex;
    flex-direction:column;
    gap:0;
    left:0;
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    z-index:var(--z-fixed);
}

.s-item{
    align-items:center;
    border-radius:0 var(--radius-md) var(--radius-md) 0;
    color:var(--color-white);
    display:flex;
    font-size:var(--font-size-xl);
    height:50px;
    justify-content:center;
    margin-bottom:2px;
    text-decoration:none;
    transition:all .3s ease;
    width:50px;
}

.s-item:hover{
    box-shadow:4px 4px 15px rgba(0,0,0,.4);
    color:var(--color-white) !important;
    transform:translateX(10px);
}

.s-item.discord{
    background-color:#5865f2;
}

.s-item.discord:hover{
    background-color:#1b3c88;
    box-shadow:4px 4px 20px rgba(27,60,136,.6);
}

.s-item.facebook{
    background-color:#1877f2;
}

.s-item.facebook:hover{
    background-color:#1b3c88;
    box-shadow:4px 4px 20px rgba(27,60,136,.6);
}

.s-item.twitter{
    background-color:#1da1f2;
}

.s-item.twitter:hover{
    background-color:#1b3c88;
    box-shadow:4px 4px 20px rgba(27,60,136,.6);
}

.s-item.instagram{
    background:linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}

.s-item.instagram:hover{
    background:linear-gradient(135deg, #1b3c88, #2d4fa0);
    box-shadow:4px 4px 20px rgba(27,60,136,.6);
}

.s-item.youtube,.s-item.youtube-icon{
    background-color:red;
}

.s-item.youtube-icon:hover,.s-item.youtube:hover{
    background-color:#1b3c88;
    box-shadow:4px 4px 20px rgba(27,60,136,.6);
}

.s-item.whatsapp{
    background-color:#25d366;
}

.s-item.whatsapp:hover{
    background-color:#1b3c88;
    box-shadow:4px 4px 20px rgba(27,60,136,.6);
}


/* ============================================
   14. MISCELLANEOUS UTILITIES
   Clearfix & Theme-Specific Overrides
   ============================================ */

.clearfix:after{
    clear:both;
    content:"";
    display:table;
}
[data-theme=dark] body{
    background-color:var(--bg-primary);
    color:var(--text-primary);
}

[data-theme=dark] .header-glass{
    backdrop-filter:blur(20px);
    background:rgba(15,23,42,.85);
    border-bottom:1px solid rgba(59,130,246,.2);
    box-shadow:0 4px 30px rgba(59,130,246,.1);
}

[data-theme=dark] .mega-menu{
    background:rgba(30,41,59,.95);
    border:1px solid rgba(59,130,246,.3);
}

[data-theme=dark] .card,[data-theme=dark] .sec-twe-bg,[data-theme=dark] .sel-bg{
    background:var(--bg-secondary);
    border-color:var(--color-gray-300);
}

[data-theme=light] .sec-twe-bg{
    background:hsla(0,0%,100%,.8);
    border:2px solid rgba(27,60,136,.2);
}

[data-theme=light] .sec-twe-bg:hover{
    background:hsla(0,0%,100%,.95);
    border-color:rgba(27,60,136,.4);
}


/* ============================================
   15. FEATURES SECTION
   Özellikler Grid & Cards
   ============================================ */

.features-section{
    background:var(--bg-primary);
    padding:5rem 0;
    position:relative;
}
[data-theme=light] .features-section{
    background:linear-gradient(180deg, #f8fafc, #f1f5f9);
}

.section-header{
    margin-bottom:4rem;
}

.section-title{
    color:var(--text-primary);
    font-size:clamp(2rem, 4vw, 2.75rem);
    font-weight:700;
    margin-bottom:1rem;
}

.section-subtitle{
    color:var(--text-secondary);
    font-size:1.125rem;
    margin:0 auto;
    max-width:600px;
}

.features-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}

.feature-card{
    backdrop-filter:blur(10px);
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:20px;
    overflow:hidden;
    padding:2.5rem;
    position:relative;
    transition:all .4s cubic-bezier(.4, 0, .2, 1);
}

.feature-card:before{
    background:linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
    content:"";
    height:4px;
    left:0;
    position:absolute;
    right:0;
    top:0;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s ease;
}

[data-theme=light] .feature-card:before{
    background:linear-gradient(90deg, #1b3c88, #5b21b6, #0891b2);
}

.feature-card:hover{
    border-color:rgba(59,130,246,.4);
    box-shadow:0 20px 60px rgba(59,130,246,.2);
    transform:translateY(-8px);
}

[data-theme=light] .feature-card:hover{
    border-color:rgba(27,60,136,.2);
    box-shadow:0 20px 60px rgba(27,60,136,.15);
}

.feature-card:hover:before{
    transform:scaleX(1);
}

.feature-icon{
    align-items:center;
    background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(139,92,246,.2));
    border-radius:16px;
    display:flex;
    height:70px;
    justify-content:center;
    margin-bottom:1.5rem;
    position:relative;
    width:70px;
}

[data-theme=light] .feature-icon{
    background:linear-gradient(135deg, rgba(27,60,136,.1), rgba(91,33,182,.1));
}

.feature-icon svg{
    color:var(--color-primary);
    height:36px;
    width:36px;
}

.feature-title{
    color:var(--text-primary);
    font-size:1.375rem;
    font-weight:600;
    margin-bottom:1rem;
}

.feature-desc{
    color:var(--text-secondary);
    font-size:.95rem;
    line-height:1.7;
    margin-bottom:1.5rem;
}

.feature-list{
    list-style:none;
    margin:0;
    padding:0;
}

.feature-list li{
    align-items:center;
    color:#cbd5e1;
    display:flex;
    font-size:.9rem;
    gap:.75rem;
    padding:.5rem 0;
}

[data-theme=light] .feature-list li{
    color:#64748b;
}

.feature-list i{
    color:#10b981;
    font-size:.875rem;
}


/* ============================================
   16. GLOBAL INFRASTRUCTURE & MAP
   Harita, Pin'ler, Tooltips, Lokasyon Widget
   ============================================ */

.global-infrastructure-section{
    background:var(--bg-primary);
    overflow:hidden;
    padding:5rem 0;
    position:relative;
}
[data-theme=light] .global-infrastructure-section{
    background:#fff !important;
}
.availability-badge{
    align-items:center;
    display:flex;
    flex-direction:column;
    height:120px;
    justify-content:center;
    margin:0 auto 2rem;
    padding:1rem;
    position:relative;
    width:120px;
}

.availability-badge,.availability-badge:before{
    border:2px solid var(--color-primary);
    border-radius:50%;
}

.availability-badge:before{
    content:"";
    inset:-4px;
    opacity:.3;
    position:absolute;
}

.availability-count{
    color:var(--color-primary);
    font-size:2.5rem;
    font-weight:800;
    line-height:1;
    margin-bottom:.25rem;
}

.availability-label{
    color:var(--color-primary);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.infrastructure-title{
    color:var(--text-primary);
    font-size:clamp(2rem, 4vw, 2.75rem);
    font-weight:800;
    line-height:1.2;
    margin-bottom:1.5rem;
}

.infrastructure-description{
    color:var(--text-secondary);
    font-size:1.125rem;
    line-height:1.7;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    max-width:700px;
}
.map-container{
    margin:0 auto;
    max-width:1200px;
    min-height:600px;
    padding:1.25rem 0 8rem;
    position:relative;
    width:100%;
}
.world-map-bg{
    display:block;
    filter:brightness(.8) contrast(1.1);
    height:auto;
    opacity:.35;
    width:100%;
}

[data-theme=dark] .world-map-bg{
    filter:brightness(.6) contrast(1.3);
    opacity:.35;
}

[data-theme=light] .world-map-bg{
    filter:brightness(1) contrast(1) grayscale(.2);
    opacity:.6;
}
.map-pin{
    cursor:pointer;
    z-index:10;
}
.map-pin,.pin-dot{
    height:8px;
    position:absolute;
    transform:translate(-50%, -50%);
    width:8px;
}
.pin-dot{
    background:#3b82f6;
    border-radius:50%;
    box-shadow:0 0 12px rgba(59,130,246,.8),0 0 24px rgba(59,130,246,.4);
    left:50%;
    top:50%;
    z-index:2;
}

[data-theme=light] .pin-dot{
    background:#57bc54;
    box-shadow:0 0 12px rgba(87,188,84,.8),0 0 24px rgba(87,188,84,.4);
}
.pin-dot:after{
    animation:glowingPulse 2s ease-out infinite;
    background:#3b82f6;
    border-radius:50%;
    content:"";
    height:8px;
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    width:8px;
    z-index:1;
}

[data-theme=light] .pin-dot:after{
    background:#57bc54;
}

@keyframes glowingPulse{
    0%{
        height:8px;
        opacity:.8;
        width:8px;
    }
    50%{
        height:32px;
        opacity:.4;
        width:32px;
    }
    to{
        height:48px;
        opacity:0;
        width:48px;
    }
}
.map-pin:hover .pin-dot:after{
    animation:glowingPulse 1s ease-out infinite;
}

.map-pin:hover .pin-dot{
    transform:translate(-50%, -50%) scale(1.3);
    transition:transform .3s ease;
}
.map-pin.testing .pin-dot{
    animation:testingPulse 1s ease-in-out infinite;
    transform:translate(-50%, -50%) scale(1.5);
}
.map-pin.active .pin-dot{
    transform:translate(-50%, -50%) scale(1.3);
    z-index:100;
}

@keyframes testingPulse{
    0%,to{
        opacity:1; 
        transform:translate(-50%, -50%) scale(1.5); 
    }
    50%{
        opacity:.7; 
        transform:translate(-50%, -50%) scale(1.7); 
    }
}
.pin-tooltip{
    align-items:center;
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
    background:var(--bg-card);
    border:2px solid var(--border-color);
    border-radius:16px;
    bottom:100%;
    box-shadow:0 15px 50px rgba(0,0,0,.35);
    display:flex;
    flex-direction:column;
    gap:0;
    justify-content:center;
    left:50%;
    margin-bottom:12px;
    min-width:200px;
    opacity:0;
    padding:1rem 1.35rem;
    pointer-events:none;
    position:absolute;
    text-align:center;
    transform:translateX(-50%) translateY(-15px);
    transition:all .35s cubic-bezier(.4, 0, .2, 1);
    visibility:hidden;
    z-index:9999;
    z-index:200;
}

[data-theme=dark] .pin-tooltip{
    background:rgba(30,41,59,.98);
    border-color:rgba(59,130,246,.5);
    box-shadow:0 15px 50px rgba(0,0,0,.4),0 0 20px rgba(59,130,246,.15);
}

[data-theme=light] .pin-tooltip{
    background:hsla(0,0%,100%,.98);
    border-color:rgba(87,188,84,.4);
    box-shadow:0 15px 50px rgba(0,0,0,.2),0 0 20px rgba(87,188,84,.1);
}
.pin-tooltip:after{
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid var(--border-color);
    content:"";
    height:0;
    left:50%;
    position:absolute;
    top:100%;
    transform:translateX(-50%);
    width:0;
}

[data-theme=dark] .pin-tooltip:after{
    border-top-color:rgba(59,130,246,.4);
}

[data-theme=light] .pin-tooltip:after{
    border-top-color:rgba(87,188,84,.3);
}
.map-pin.active{
    z-index:10000;
}

.map-pin.active .pin-tooltip{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(-10px);
    visibility:visible;
}
.tooltip-flag{
    font-size:1.5rem;
    line-height:1;
}

/* Flag Icons Global Support */
.fi {
    display: inline-block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Flag Icons Support for tooltip-flag */
.tooltip-flag.fi {
    width: 1.5rem;
    height: 1.125rem;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tooltip-text{
    color:var(--text-primary);
    font-size:.95rem;
    font-weight:600;
    letter-spacing:.3px;
}
.best-location-widget{
    bottom:3.5rem;
    left:50%;
    max-width:90%;
    position:absolute;
    transform:translateX(-50%);
    width:650px;
    z-index:100;
}
.widget-initial,.widget-result,.widget-testing{
    align-items:center;
    animation:slideUpFade .5s ease;
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    background:var(--bg-card);
    border:2px solid var(--border-color);
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
    display:flex;
    flex-direction:column;
    gap:0;
    justify-content:center;
    max-height:200px;
    min-height:200px;
    overflow:hidden;
    position:relative;
    text-align:center;
}

[data-theme=dark] .widget-initial,[data-theme=dark] .widget-result,[data-theme=dark] .widget-testing{
    background:rgba(30,41,59,.95);
    border-color:rgba(59,130,246,.3);
}

[data-theme=light] .widget-initial,[data-theme=light] .widget-result,[data-theme=light] .widget-testing{
    background:hsla(0,0%,100%,.98);
    border-color:rgba(87,188,84,.3);
    box-shadow:0 20px 60px rgba(0,0,0,.15);
}

@keyframes slideUpFade{
    0%{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.find-best-btn{
    align-items:center;
    background:linear-gradient(135deg, #3b82f6, #8b5cf6);
    border:none;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(59,130,246,.4);
    color:#fff;
    cursor:pointer;
    display:flex;
    font-size:1.125rem;
    font-weight:700;
    gap:.75rem;
    justify-content:center;
    margin:0 auto 1rem;
    overflow:hidden;
    padding:1rem 2.5rem;
    position:relative;
    transition:all .3s ease;
}

[data-theme=light] .find-best-btn{
    background:linear-gradient(135deg, #57bc54, #45a33b);
    box-shadow:0 10px 30px rgba(87,188,84,.4);
}

.find-best-btn:hover{
    box-shadow:0 15px 40px rgba(59,130,246,.5);
    transform:translateY(-3px);
}

.find-best-btn i{
    animation:pulse 2s ease-in-out infinite;
    font-size:1.25rem;
}

@keyframes pulse{
    0%,to{ transform:scale(1); }
    50%{ transform:scale(1.1); }
}

.btn-glow{
    background:linear-gradient(45deg, transparent, hsla(0,0%,100%,.2), transparent);
    inset:0;
    position:absolute;
    transform:translateX(-100%);
}

.find-best-btn:hover .btn-glow{
    animation:btnGlowSweep 1.5s ease-in-out infinite;
}

@keyframes btnGlowSweep{
    0%{ transform:translateX(-100%); }
    to{ transform:translateX(100%); }
}

.widget-hint{
    color:var(--text-muted);
    font-size:.875rem;
    margin:0;
}
.testing-spinner{
    align-items:center;
    background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(139,92,246,.2));
    border-radius:50%;
    display:flex;
    height:60px;
    justify-content:center;
    margin:0 auto 1rem;
    width:60px;
}

.testing-spinner i{
    color:var(--color-primary);
    font-size:1.75rem;
}

.testing-info h4{
    color:var(--text-primary);
    font-size:1.25rem;
    font-weight:700;
    margin-bottom:.5rem;
}

.testing-progress{
    color:var(--text-secondary);
    font-size:.95rem;
    margin:0;
}
.widget-refresh-btn{
    align-items:center;
    background:var(--bg-secondary);
    border:1.5px solid var(--border-color);
    border-radius:8px;
    color:var(--color-primary);
    cursor:pointer;
    display:flex;
    height:32px;
    justify-content:center;
    position:absolute;
    right:.75rem;
    top:.75rem;
    transition:all .3s ease;
    width:32px;
    z-index:10;
}

.widget-refresh-btn svg{
    height:16px;
    transition:transform .4s ease;
    width:16px;
}

.widget-refresh-btn:hover{
    background:var(--color-primary);
    border-color:var(--color-primary);
    box-shadow:0 4px 12px rgba(87,188,84,.3);
    color:#fff;
}

.widget-refresh-btn:hover svg{
    transform:rotate(180deg);
}

[data-theme=dark] .widget-refresh-btn{
    color:#3b82f6;
}

[data-theme=dark] .widget-refresh-btn:hover{
    background:#3b82f6;
    border-color:#3b82f6;
    box-shadow:0 4px 12px rgba(59,130,246,.3);
    color:#fff;
}
.top-locations{
    display:grid;
    gap:.875rem;
    grid-template-columns:repeat(3, 1fr);
}

.location-item{
    align-items:center;
    background:var(--bg-secondary);
    border:1.5px solid var(--border-color);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:.75rem .65rem;
    position:relative;
    text-align:center;
    transition:all .3s ease;
}

.location-item:hover{
    border-color:var(--color-primary);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    transform:translateY(-4px);
}

[data-theme=dark] .location-item:hover{
    box-shadow:0 8px 20px rgba(59,130,246,.25);
}
.location-item.best{
    background:linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.06));
    border-color:rgba(16,185,129,.5);
    border-width:2px;
}

[data-theme=light] .location-item.best{
    background:linear-gradient(135deg, rgba(87,188,84,.15), rgba(87,188,84,.08));
    border-color:rgba(87,188,84,.6);
}
.location-rank{
    align-items:center;
    border-radius:6px;
    color:#fff;
    display:flex;
    font-size:.75rem;
    font-weight:700;
    height:24px;
    justify-content:center;
    left:.4rem;
    position:absolute;
    top:.4rem;
    width:24px;
}

.rank-1{
    background:linear-gradient(135deg, #10b981, #059669);
    box-shadow:0 3px 10px rgba(16,185,129,.4);
}

.rank-2{
    background:linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow:0 3px 10px rgba(59,130,246,.3);
}

.rank-3{
    background:linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow:0 3px 10px rgba(139,92,246,.3);
}
.location-flag{
    font-size:2.25rem;
    line-height:1;
    margin:.35rem 0 .5rem;
}

/* Flag Icons Support for location-flag */
.location-flag .fi {
    width: 2.25rem;
    height: 1.6875rem;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.location-flag .fi:hover {
    transform: scale(1.1);
}
.location-details{
    width:100%;
}

.location-name{
    color:var(--text-primary);
    font-size:.8rem;
    font-weight:600;
    line-height:1.2;
    margin-bottom:.3rem;
}

.location-status{
    align-items:center;
    color:#10b981;
    display:flex;
    font-weight:500;
    gap:.3rem;
    justify-content:center;
    margin-bottom:.4rem;
}

.location-status,.location-status i{
    font-size:.65rem;
}

.location-status.secondary{
    color:#3b82f6;
}
.location-ping{
    background:rgba(16,185,129,.1);
    border-radius:8px;
    display:inline-block;
    margin:0 auto;
    padding:.3rem .65rem;
    text-align:center;
}

.location-item:nth-child(2) .location-ping{
    background:rgba(59,130,246,.1);
}

.location-item:nth-child(3) .location-ping{
    background:rgba(139,92,246,.1);
}

.ping-value{
    background:linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip:text;
    font-size:1.25rem;
    font-weight:800;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    display:block;
}

.location-item:nth-child(2) .ping-value{
    background:linear-gradient(135deg, #3b82f6, #2563eb);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.location-item:nth-child(3) .ping-value{
    background:linear-gradient(135deg, #8b5cf6, #7c3aed);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}


/* ============================================
   17. SERVICES OVERVIEW
   Servis Kartları & Grid
   ============================================ */

.services-overview{
    background:linear-gradient(180deg, var(--bg-primary) 0, var(--bg-secondary) 100%);
    padding:5rem 0;
}
[data-theme=light] .services-overview{
    background:linear-gradient(180deg, #f1f5f9, #e2e8f0);
}

.services-grid{
    display:grid;
    gap:2.5rem;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    margin-top:3rem;
}

.service-card{
    backdrop-filter:blur(10px);
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:24px;
    display:flex;
    flex-direction:column;
    padding:2.5rem;
    position:relative;
    transition:all .4s cubic-bezier(.4, 0, .2, 1);
}

.service-card.featured{
    border-color:#3b82f6;
    transform:scale(1.05);
}

[data-theme=light] .service-card.featured{
    border-color:#1b3c88;
}

.featured-badge{
    background:linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius:50px;
    color:#fff;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.5px;
    padding:.4rem 1rem;
    position:absolute;
    right:2rem;
    text-transform:uppercase;
    top:-12px;
}

[data-theme=light] .featured-badge{
    background:linear-gradient(135deg, #1b3c88, #5b21b6);
}

.service-card:hover{
    border-color:rgba(59,130,246,.5);
    box-shadow:0 25px 70px rgba(59,130,246,.25);
    transform:translateY(-10px);
}

[data-theme=light] .service-card:hover{
    border-color:rgba(27,60,136,.3);
    box-shadow:0 25px 70px rgba(27,60,136,.2);
}

.service-icon-wrapper{
    align-items:center;
    background:linear-gradient(135deg, rgba(59,130,246,.15), rgba(139,92,246,.15));
    border-radius:20px;
    display:flex;
    height:80px;
    justify-content:center;
    margin-bottom:1.5rem;
    width:80px;
}

[data-theme=light] .service-icon-wrapper{
    background:linear-gradient(135deg, rgba(27,60,136,.1), rgba(91,33,182,.1));
}

.service-icon{
    color:#60a5fa;
    height:40px;
    width:40px;
}

[data-theme=light] .service-icon{
    color:#1b3c88;
}

.service-name{
    color:var(--text-primary);
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:1rem;
}

.service-description{
    color:var(--text-secondary);
    flex-grow:1;
    font-size:.95rem;
    line-height:1.7;
    margin-bottom:1.5rem;
}

.service-features{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-bottom:1.5rem;
}

.service-badge{
    background:rgba(59,130,246,.15);
    border:1px solid rgba(59,130,246,.3);
    border-radius:50px;
    color:#60a5fa;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.3px;
    padding:.4rem .875rem;
    text-transform:uppercase;
}

[data-theme=light] .service-badge{
    background:rgba(27,60,136,.1);
    border-color:rgba(27,60,136,.25);
    color:#1b3c88;
}

.service-link{
    align-items:center;
    color:#60a5fa;
    display:inline-flex;
    font-size:.95rem;
    font-weight:600;
    gap:.5rem;
    text-decoration:none;
    transition:all .2s ease;
}

[data-theme=light] .service-link{
    color:#1b3c88;
}

.service-link:hover{
    color:#3b82f6;
    gap:.75rem;
}

[data-theme=light] .service-link:hover{
    color:#1e40af;
}


/* ============================================
   18. STATS COUNTER
   İstatistik Sayaçları
   ============================================ */

.stats-counter{
    background:var(--bg-secondary);
    border-bottom:1px solid var(--border-color);
    border-top:1px solid var(--border-color);
    padding:5rem 0;
}
[data-theme=light] .stats-counter{
    background:#fff;
    border-bottom:1px solid #e2e8f0;
    border-top:1px solid #e2e8f0;
}

.stats-counter-grid{
    display:grid;
    gap:3rem;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}

.counter-item{
    text-align:center;
}

.counter-icon{
    align-items:center;
    background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(139,92,246,.2));
    border-radius:16px;
    display:flex;
    height:60px;
    justify-content:center;
    margin:0 auto 1.5rem;
    width:60px;
}

[data-theme=light] .counter-icon{
    background:linear-gradient(135deg, rgba(27,60,136,.1), rgba(91,33,182,.1));
}

.counter-icon svg{
    color:#60a5fa;
    height:32px;
    width:32px;
}

[data-theme=light] .counter-icon svg{
    color:#1b3c88;
}

.counter-value{
    background:linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip:text;
    color:#f8fafc;
    font-size:2.5rem;
    font-weight:800;
    margin-bottom:.5rem;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

[data-theme=light] .counter-value{
    background:linear-gradient(135deg, #1b3c88, #5b21b6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.counter-label{
    color:var(--text-secondary);
    font-size:.95rem;
    font-weight:500;
}


/* ============================================
   19. GET STARTED SECTION
   Başlangıç Adımları & CTA
   ============================================ */

.get-started-section{
    background:linear-gradient(135deg, var(--bg-secondary) 0, var(--bg-tertiary) 100%);
    overflow:hidden;
    padding:5rem 0;
    position:relative;
}
[data-theme=light] .get-started-section{
    background:linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.get-started-wrapper{
    position:relative;
    z-index:2;
}

.get-started-badge{
    align-items:center;
    background:rgba(59,130,246,.1);
    border:1px solid rgba(59,130,246,.3);
    border-radius:50px;
    color:var(--color-primary);
    display:inline-flex;
    font-size:.875rem;
    font-weight:600;
    gap:.5rem;
    margin-bottom:1.5rem;
    padding:.5rem 1rem;
}

.get-started-title{
    color:var(--text-primary);
    font-size:clamp(2rem, 4vw, 3rem);
    font-weight:800;
    line-height:1.2;
    margin-bottom:1.5rem;
}

.get-started-desc{
    color:var(--text-secondary);
    font-size:1.125rem;
    line-height:1.7;
    margin-bottom:2.5rem;
}

.get-started-steps{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    margin-bottom:2.5rem;
}

.step-item-compact{
    align-items:flex-start;
    display:flex;
    gap:1.25rem;
}

.step-number{
    align-items:center;
    background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius:12px;
    box-shadow:0 4px 15px rgba(59,130,246,.3);
    color:#fff;
    display:flex;
    flex-shrink:0;
    font-size:1.25rem;
    font-weight:700;
    height:48px;
    justify-content:center;
    width:48px;
}

.step-content h5{
    color:var(--text-primary);
    font-size:1.125rem;
    font-weight:600;
    margin-bottom:.25rem;
}

.step-content p{
    color:var(--text-secondary);
    font-size:.95rem;
    margin:0;
}

.get-started-actions{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:1.5rem;
}

.get-started-note{
    align-items:center;
    color:var(--text-muted);
    display:flex;
    font-size:.875rem;
    gap:.5rem;
}

.get-started-note i{
    color:#10b981;
}

.get-started-visual{
    height:500px;
    position:relative;
}

.visual-card{
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:20px;
    box-shadow:0 10px 40px var(--shadow-color);
    padding:2rem;
    position:absolute;
    transition:all .3s ease;
}

.visual-card:hover{
    box-shadow:0 20px 60px rgba(59,130,246,.2);
    transform:translateY(-10px);
}

.visual-card-1{
    animation:float 6s ease-in-out infinite;
    left:0;
    top:50px;
    width:60%;
}

.visual-card-2{
    animation:float 6s ease-in-out 2s infinite;
    right:0;
    top:200px;
    width:55%;
    z-index:2;
}

.visual-card-3{
    animation:float 6s ease-in-out 4s infinite;
    bottom:50px;
    left:50px;
    width:50%;
}

@keyframes float{
    0%,to{ transform:translateY(0); }
    50%{ transform:translateY(-20px); }
}

.visual-icon{
    align-items:center;
    background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(139,92,246,.2));
    border-radius:15px;
    color:var(--color-primary);
    display:flex;
    font-size:1.5rem;
    height:60px;
    justify-content:center;
    margin-bottom:1rem;
    width:60px;
}

.visual-card h4{
    color:var(--text-primary);
    font-size:1.25rem;
    font-weight:700;
    margin-bottom:.5rem;
}

.visual-card p{
    color:var(--text-secondary);
    font-size:.95rem;
    margin:0;
}


/* ============================================
   20. CTA SECTION
   Call-to-Action Banner
   ============================================ */

.section-cta{
    background:linear-gradient(135deg, #1e293b, #0f172a);
    overflow:hidden;
    padding:5rem 0;
    position:relative;
}
[data-theme=light] .section-cta{
    background:linear-gradient(135deg, #3b82f6, #2563eb);
}

.cta-content{
    position:relative;
    text-align:center;
    z-index:2;
}

.cta-badge{
    background:rgba(59,130,246,.2);
    border:1px solid rgba(59,130,246,.3);
    border-radius:50px;
    color:#60a5fa;
    display:inline-block;
    font-size:.875rem;
    font-weight:600;
    letter-spacing:.5px;
    margin-bottom:1.5rem;
    padding:.5rem 1.25rem;
    text-transform:uppercase;
}
[data-theme=light] .cta-badge{
    background:hsla(0,0%,100%,.2);
    border-color:hsla(0,0%,100%,.4);
    color:#fff;
}

.cta-title{
    color:#f8fafc;
    font-size:clamp(2rem, 4vw, 3rem);
    font-weight:700;
    margin-bottom:1rem;
}
[data-theme=light] .cta-title{
    color:#0f172a;
}

.cta-subtitle{
    color:#94a3b8;
    font-size:1.125rem;
    margin-bottom:2rem;
    margin-left:auto;
    margin-right:auto;
    max-width:600px;
}
[data-theme=light] .cta-subtitle{
    color:hsla(0,0%,100%,.9);
}

.cta-button{
    background:linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(59,130,246,.3);
    color:#fff;
    display:inline-block;
    font-size:1.125rem;
    font-weight:600;
    padding:1rem 2.5rem;
    text-decoration:none;
    transition:all .3s ease;
}
[data-theme=light] .cta-button{
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    color:#2563eb;
}

.cta-button:hover{
    box-shadow:0 15px 40px rgba(59,130,246,.4);
    transform:translateY(-3px);
}
[data-theme=light] .cta-button:hover{
    background:#f8fafc;
    box-shadow:0 15px 40px rgba(0,0,0,.2);
}

.cta-steps{
    display:flex;
    flex-wrap:wrap;
    gap:3rem;
    justify-content:center;
    margin-top:4rem;
}

.cta-step-item{
    gap:1rem;
}

.cta-step-icon,.cta-step-item{
    align-items:center;
    display:flex;
}

.cta-step-icon{
    background:rgba(59,130,246,.2);
    border-radius:50%;
    color:#60a5fa;
    flex-shrink:0;
    font-size:1.25rem;
    height:48px;
    justify-content:center;
    width:48px;
}
[data-theme=light] .cta-step-icon{
    background:hsla(0,0%,100%,.2);
    color:#fff;
}

.cta-step-text{
    color:#94a3b8;
    font-size:.95rem;
    font-weight:500;
}
[data-theme=light] .cta-step-text{
    color:hsla(0,0%,100%,.9);
}


/* ============================================
   21. TESTIMONIALS SECTION
   Müşteri Yorumları, Platform Ratings, Slider
   ============================================ */

.testimonials-section{
    background:var(--bg-primary);
    overflow:visible;
    padding:5rem 0;
    position:relative;
    width:100%;
}
[data-theme=light] .testimonials-section{
    background:#fff;
}

.testimonials-section .section-header{
    margin-bottom:5rem;
}

.testimonials-section .section-title{
    font-size:3.5rem;
    font-weight:800;
    margin-bottom:1rem;
}

.testimonials-section .section-subtitle{
    font-size:1.25rem;
    opacity:.8;
}
.platform-ratings{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom:4rem;
}

.platform-card{
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    background:var(--bg-card);
    border:2px solid var(--border-color);
    border-radius:20px;
    overflow:hidden;
    padding:2.5rem;
    position:relative;
    text-align:center;
    transition:all .4s cubic-bezier(.4, 0, .2, 1);
}

.platform-card:before{
    background:linear-gradient(135deg, transparent, rgba(59,130,246,.05));
    content:"";
    inset:0;
    opacity:0;
    position:absolute;
    transition:opacity .4s ease;
}

.platform-card:hover:before{
    opacity:1;
}

.platform-card:hover{
    border-color:var(--color-primary);
    transform:translateY(-8px);
}
.platform-card.google:hover{
    border-color:#4285f4;
    box-shadow:0 20px 60px rgba(66,133,244,.25);
}

.platform-card.google:hover:before{
    background:linear-gradient(135deg, transparent, rgba(66,133,244,.08));
}
.platform-card.trustpilot:hover{
    border-color:#00b67a;
    box-shadow:0 20px 60px rgba(0,182,122,.25);
}

.platform-card.trustpilot:hover:before{
    background:linear-gradient(135deg, transparent, rgba(0,182,122,.08));
}
.platform-card.facebook:hover{
    border-color:#1877f2;
    box-shadow:0 20px 60px rgba(24,119,242,.25);
}

.platform-card.facebook:hover:before{
    background:linear-gradient(135deg, transparent, rgba(24,119,242,.08));
}

[data-theme=light] .platform-card:hover{
    box-shadow:0 20px 60px rgba(0,0,0,.1);
}

.platform-logo{
    display:block;
    height:auto;
    margin:0 auto 1.5rem;
    width:120px;
}
[data-theme=dark] .google-logo .logo-text{
    fill:#e5e7eb;
}

[data-theme=light] .google-logo .logo-text{
    fill:#1f2937;
}
.trustpilot-logo .tp-star{
    fill:#00b67a;
}

[data-theme=dark] .trustpilot-logo .logo-text{
    fill:#e5e7eb;
}

[data-theme=light] .trustpilot-logo .logo-text{
    fill:#1f2937;
}
.facebook-logo .fb-circle{
    fill:#1877f2;
}

[data-theme=dark] .facebook-logo .logo-text{
    fill:#e5e7eb;
}

[data-theme=light] .facebook-logo .logo-text{
    fill:#1f2937;
}

.platform-rating{
    align-items:center;
    display:flex;
    flex-direction:column;
    gap:.75rem;
    margin-bottom:1rem;
    position:relative;
    z-index:1;
}

.rating-stars{
    display:flex;
    font-size:1.5rem;
    gap:.25rem;
}

.rating-stars i,.rating-stars i.fa-star-half-alt{
    color:#ffc107;
}

.rating-value{
    color:var(--text-primary);
    font-size:2rem;
    font-weight:800;
    line-height:1;
}

.rating-reviews{
    color:var(--text-secondary);
    font-size:.875rem;
    margin-bottom:1.5rem;
}

.platform-btn{
    align-items:center;
    background:var(--bg-secondary);
    border:2px solid var(--border-color);
    border-radius:50px;
    color:var(--text-primary);
    display:inline-flex;
    font-size:.95rem;
    font-weight:600;
    gap:.5rem;
    padding:.75rem 1.5rem;
    position:relative;
    text-decoration:none;
    transition:all .3s ease;
    z-index:1;
}

.platform-btn:hover{
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:#fff;
    transform:translateY(-2px);
}

.platform-card.google .platform-btn:hover{
    background:#4285f4;
    border-color:#4285f4;
}

.platform-card.trustpilot .platform-btn:hover{
    background:#00b67a;
    border-color:#00b67a;
}

.platform-card.facebook .platform-btn:hover{
    background:#1877f2;
    border-color:#1877f2;
}
.reviews-slider-container{
    margin:0;
    max-width:100%;
    overflow:visible;
    padding:15px 0;
    position:relative;
    width:100%;
}

.reviews-slider{
    overflow:visible !important;
}

.reviews-slider .swiper-slide{
    height:auto;
    padding:15px;
}

.reviews-slider .swiper-wrapper{
    overflow:visible;
    padding:0;
}

.review-card{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:20px;
    box-shadow:0 4px 20px -2px rgba(0,0,0,.15),0 8px 40px -4px rgba(0,0,0,.1);
    cursor:grab;
    display:flex !important;
    flex-direction:column;
    justify-content:space-between;
    min-height:480px;
    overflow:visible;
    padding:2.5rem 2rem;
    position:relative;
}

.review-card:active{
    cursor:grabbing;
}

[data-theme=light] .review-card{
    background:var(--bg-card);
    box-shadow:0 4px 20px -2px rgba(0,0,0,.08),0 8px 40px -4px rgba(0,0,0,.05);
}
.review-card-header{
    gap:1.25rem;
    margin-bottom:1.75rem;
    position:relative;
    z-index:1;
}

.review-avatar,.review-card-header{
    align-items:center;
    display:flex;
}

.review-avatar{
    background:linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius:50%;
    box-shadow:0 4px 15px rgba(59,130,246,.3);
    color:#fff;
    flex-shrink:0;
    font-size:1.5rem;
    font-weight:700;
    height:60px;
    justify-content:center;
    width:60px;
}

[data-theme=light] .review-avatar{
    background:linear-gradient(135deg, #1b3c88, #5b21b6);
}

.review-info-wrapper{
    flex:1;
}

.review-author{
    font-size:1.125rem;
    margin-bottom:.5rem;
}

.review-stars{
    align-items:center;
    display:flex !important;
    flex-direction:row !important;
    gap:.35rem;
    margin-bottom:.75rem;
}

.review-star{
    display:inline-flex;
    flex-shrink:0;
    height:18px;
    position:relative;
    width:18px;
}

.review-star svg{
    display:block;
    fill:currentColor;
    height:100%;
    width:100%;
}

.review-star.full svg{
    color:#fbbf24;
}

.review-star.half .star-base{
    color:hsla(0,0%,100%,.25);
}

[data-theme=light] .review-star.half .star-base{
    color:rgba(15,23,42,.25);
}

.review-star .star-base{
    color:hsla(0,0%,100%,.2);
}

[data-theme=light] .review-star .star-base{
    color:rgba(15,23,42,.2);
}

.review-star .star-fill{
    clip-path:inset(0 50% 0 0);
    -webkit-clip-path:inset(0 50% 0 0);
    color:#fbbf24;
    inset:0;
    position:absolute;
}

.review-title{
    font-size:1.25rem;
    font-weight:700;
    line-height:1.3;
    margin-bottom:1.25rem;
}

.review-text{
    flex:1;
    font-weight:400;
    margin-bottom:1.5rem;
}

.review-platform{
    align-items:center;
    border-top:1px solid hsla(0,0%,100%,.1);
    color:var(--text-muted);
    display:flex;
    font-size:1.1rem;
    font-weight:600;
    gap:.5rem;
    padding-top:1.25rem;
}

[data-theme=light] .review-platform{
    border-top-color:rgba(0,0,0,.1);
}

.review-platform i{
    color:var(--color-primary);
    font-size:1rem;
}
.reviews-slider .swiper-button-next,.reviews-slider .swiper-button-prev{
    display:none !important;
}

.review-header{
    gap:1rem;
    margin-bottom:1.25rem;
}

.review-header,.review-platform-icon{
    align-items:center;
    display:flex;
}

.review-platform-icon{
    border-radius:8px;
    font-size:1.25rem;
    height:32px;
    justify-content:center;
    width:32px;
}

.review-platform-icon.facebook-icon{
    background:#1877f2;
    color:#fff;
}

.review-platform-icon.google-icon{
    background:#4285f4;
    color:#fff;
}

.review-platform-icon.trustpilot-icon{
    background:#00b67a;
    color:#fff;
}

.review-info{
    flex:1;
}

.review-author{
    color:var(--text-primary);
    font-size:1rem;
    font-weight:700;
    margin-bottom:.25rem;
}


.review-rating{
    display:none;
}

.review-stars {
    display: flex;
    gap: 0.25rem;
    color: #fbbf24;
    font-size: 0.875rem;
}

.review-stars i {
    color: inherit;
}

.review-title{
    color:var(--text-primary);
    font-size:1.125rem;
    font-weight:600;
    line-height:1.4;
    margin-bottom:.75rem;
}

.review-text{
    color:var(--text-secondary);
    font-size:.95rem;
    line-height:1.7;
    margin:0;
}


/* ============================================
   22. BLOG SECTION
   Blog Grid, Featured Post, Side Posts
   ============================================ */

.blog-side-posts-list{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.blog-side-post{
    align-items:center;
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:16px;
    display:flex;
    gap:1.5rem;
    justify-content:space-between;
    padding:2rem;
    transition:all .3s ease;
}

.blog-side-post:hover{
    border-color:var(--color-primary);
    box-shadow:0 8px 25px rgba(59,130,246,.15);
    transform:translateX(8px);
}

[data-theme=light] .blog-side-post:hover{
    box-shadow:0 8px 25px rgba(27,60,136,.1);
}

.blog-side-post-content{
    flex:1;
}

.blog-side-post-date{
    align-items:center;
    color:var(--text-muted);
    display:flex;
    font-size:.85rem;
    gap:.5rem;
    margin-bottom:.75rem;
}

.blog-side-post-date i{
    color:var(--color-primary);
}

.blog-side-post-title{
    color:var(--text-primary);
    font-size:1.1rem;
    font-weight:600;
    line-height:1.4;
    margin:0;
}

.blog-side-post-title a{
    color:inherit;
    text-decoration:none;
    transition:color .3s ease;
}

.blog-side-post-arrow,.blog-side-post-title a:hover{
    color:var(--color-primary);
}

.blog-side-post-arrow{
    align-items:center;
    background:rgba(59,130,246,.1);
    border-radius:50%;
    display:flex;
    flex-shrink:0;
    height:40px;
    justify-content:center;
    transition:all .3s ease;
    width:40px;
}

.blog-side-post:hover .blog-side-post-arrow{
    background:var(--color-primary);
    color:#fff;
    transform:scale(1.1);
}

.blog-news-section{
    background:var(--bg-primary);
    padding:5rem 0;
    position:relative;
}
[data-theme=light] .blog-news-section{
    background:#f1f5f9;
}
.blog-news-header{
    align-items:center;
    display:flex;
    gap:2rem;
    justify-content:space-between;
    margin-bottom:4rem;
}

.blog-news-header-left h2{
    color:var(--text-primary);
    font-family:Montserrat,sans-serif;
    font-size:3rem;
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.2;
    margin:0;
}

.blog-news-header-right{
    flex-shrink:0;
}

.blog-view-all-btn{
    align-items:center;
    background:linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius:50px;
    box-shadow:0 8px 25px rgba(59,130,246,.4);
    color:#fff;
    display:inline-flex;
    font-size:1rem;
    font-weight:600;
    gap:.75rem;
    overflow:hidden;
    padding:1rem 2rem;
    position:relative;
    text-decoration:none;
    transition:all .4s ease;
}

[data-theme=light] .blog-view-all-btn{
    background:linear-gradient(135deg, #1b3c88, #1e40af);
}

.blog-view-all-btn:before{
    background:linear-gradient(135deg, hsla(0,0%,100%,.2), transparent);
    content:"";
    inset:0;
    opacity:0;
    position:absolute;
    transition:opacity .4s ease;
}

.blog-view-all-btn:hover{
    box-shadow:0 12px 35px rgba(59,130,246,.6);
    transform:translateY(-2px);
}

.blog-view-all-btn:hover:before{
    opacity:1;
}

.blog-view-all-btn i{
    transition:transform .3s ease;
}

.blog-view-all-btn:hover i{
    transform:translateX(4px);
}

.blog-news-header{
    margin-bottom:3rem;
}

.blog-badge{
    align-items:center;
    background:rgba(59,130,246,.1);
    border:1px solid rgba(59,130,246,.3);
    border-radius:50px;
    display:inline-flex;
    gap:.5rem;
    margin-bottom:1rem;
    padding:.5rem 1rem;
}

[data-theme=light] .blog-badge{
    background:rgba(27,60,136,.1);
    border-color:rgba(27,60,136,.25);
}

.blog-badge-dot{
    background:var(--color-primary);
    border-radius:50%;
    height:8px;
    width:8px;
}

.blog-badge-text{
    color:var(--color-primary);
    font-size:.875rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.blog-title{
    color:var(--text-primary);
    font-size:clamp(2rem, 4vw, 2.75rem);
    font-weight:800;
    line-height:1.2;
    margin-bottom:1rem;
}

.blog-view-all{
    align-items:center;
    background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border:none;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(59,130,246,.3);
    color:#fff;
    display:inline-flex;
    font-size:1rem;
    font-weight:700;
    gap:.75rem;
    padding:1rem 2rem;
    text-decoration:none;
    transition:all .3s ease;
}

[data-theme=light] .blog-view-all{
    background:linear-gradient(135deg, #1b3c88, #1e40af);
    box-shadow:0 10px 30px rgba(27,60,136,.3);
}

.blog-view-all:hover{
    box-shadow:0 15px 40px rgba(59,130,246,.4);
    transform:translateY(-3px);
}

[data-theme=light] .blog-view-all:hover{
    box-shadow:0 15px 40px rgba(27,60,136,.4);
}

.blog-view-all i{
    transition:transform .3s ease;
}

.blog-view-all:hover i{
    transform:translateX(4px);
}
.blog-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1.2fr 1fr;
}
.blog-post-featured{
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:20px;
    overflow:hidden;
    position:relative;
    transition:all .4s ease;
}

.blog-post-featured:hover{
    border-color:var(--color-primary);
    box-shadow:0 20px 60px rgba(0,0,0,.2);
    transform:translateY(-8px);
}

[data-theme=light] .blog-post-featured:hover{
    box-shadow:0 20px 60px rgba(0,0,0,.1);
}
.blog-two-column-grid{
    align-items:start;
    display:grid;
    gap:3rem;
    grid-template-columns:1.5fr 1fr;
}
.blog-featured-post{
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:20px;
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    transition:all .4s ease;
}

.blog-featured-post:hover{
    box-shadow:0 25px 60px rgba(0,0,0,.2);
    transform:translateY(-8px);
}

[data-theme=light] .blog-featured-post:hover{
    box-shadow:0 25px 60px rgba(0,0,0,.1);
}

.blog-featured-image{
    height:350px;
    overflow:hidden;
    width:100%;
}

.blog-featured-image img{
    height:100%;
    object-fit:cover;
    transition:transform .6s cubic-bezier(.4, 0, .2, 1);
    width:100%;
}

.blog-featured-post:hover .blog-featured-image img{
    transform:scale(1.08);
}

.blog-featured-content{
    padding:2.5rem;
}

.blog-featured-meta{
    align-items:center;
    color:var(--text-muted);
    display:flex;
    font-size:.9rem;
    gap:1.5rem;
    margin-bottom:1.5rem;
}

.blog-featured-meta i{
    color:var(--color-primary);
}

.blog-featured-title{
    color:var(--text-primary);
    font-size:1.75rem;
    font-weight:700;
    line-height:1.4;
    margin-bottom:1rem;
}

.blog-featured-title a{
    color:inherit;
    text-decoration:none;
    transition:color .3s ease;
}

.blog-featured-link,.blog-featured-title a:hover{
    color:var(--color-primary);
}

.blog-featured-link{
    align-items:center;
    display:inline-flex;
    font-weight:600;
    gap:.5rem;
    margin-top:1rem;
    text-decoration:none;
    transition:all .3s ease;
}

.blog-featured-link:hover{
    gap:.75rem;
}

.blog-featured-link i{
    transition:transform .3s ease;
}

.blog-featured-link:hover i{
    transform:translateX(4px);
}

.blog-post-content{
    padding:2rem;
}

.blog-post-meta{
    flex-wrap:wrap;
    gap:1.5rem;
    margin-bottom:1rem;
}

.blog-meta-item,.blog-post-meta{
    align-items:center;
    display:flex;
}

.blog-meta-item{
    color:var(--text-secondary);
    font-size:.875rem;
    gap:.5rem;
}

.blog-meta-item i{
    color:var(--color-primary);
    font-size:1rem;
}

.blog-post-title{
    color:var(--text-primary);
    font-size:1.5rem;
    font-weight:700;
    line-height:1.3;
    margin-bottom:1.5rem;
}

.blog-post-title a{
    color:inherit;
    text-decoration:none;
    transition:color .3s ease;
}

.blog-post-title a:hover,.blog-read-more{
    color:var(--color-primary);
}

.blog-read-more{
    align-items:center;
    display:inline-flex;
    font-size:1rem;
    font-weight:600;
    gap:.5rem;
    text-decoration:none;
    transition:all .3s ease;
}

.blog-read-more:hover{
    gap:.75rem;
}

.blog-read-more i{
    transition:transform .3s ease;
}

.blog-read-more:hover i{
    transform:translateX(4px);
}
.blog-side-posts{
    flex-direction:column;
}

.blog-post-side,.blog-side-posts{
    display:flex;
    gap:1.5rem;
}

.blog-post-side{
    align-items:center;
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:16px;
    justify-content:space-between;
    padding:1.75rem;
    transition:all .3s ease;
}

.blog-post-side:hover{
    background:var(--bg-tertiary);
    border-color:var(--color-primary);
    transform:translateX(8px);
}

.blog-post-side-content{
    flex:1;
}

.blog-post-side-meta{
    align-items:center;
    display:flex;
    gap:.5rem;
    margin-bottom:.5rem;
}

.blog-post-side-meta i{
    color:var(--color-primary);
    font-size:.875rem;
}

.blog-post-side-meta span{
    color:var(--text-secondary);
    font-size:.875rem;
    font-weight:500;
}

.blog-post-side-title{
    color:var(--text-primary);
    font-size:1rem;
    font-weight:600;
    line-height:1.4;
    margin-bottom:.75rem;
}

.blog-post-side-title a{
    color:inherit;
    text-decoration:none;
    transition:color .3s ease;
}

.blog-post-side-title a:hover{
    color:var(--color-primary);
}

.blog-post-side-date{
    align-items:center;
    color:var(--text-muted);
    display:flex;
    font-size:.8rem;
    gap:.5rem;
}

.blog-post-side-date i{
    font-size:.875rem;
}

.blog-arrow-icon{
    align-items:center;
    background:var(--bg-secondary);
    border:2px solid var(--border-color);
    border-radius:50%;
    color:var(--color-primary);
    display:flex;
    flex-shrink:0;
    height:40px;
    justify-content:center;
    transition:all .3s ease;
    width:40px;
}

.blog-post-side:hover .blog-arrow-icon{
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:#fff;
    transform:translateX(4px);
}

.blog-error,.blog-loading{
    color:var(--text-secondary);
    padding:3rem;
    text-align:center;
}

.blog-error{
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:16px;
}


/* ============================================
   23. DOMAIN BANNER & WHOIS
   Domain Arama Sayfası, WHOIS Sonuçları, TLD Tablosu
   ============================================ */

.domain-banner{
    background:linear-gradient(135deg, var(--color-primary) 0, var(--color-primary-dark) 100%);
    overflow:hidden;
    padding:8rem 0 6rem;
    position:relative;
}

.domain-banner:before{
    background:radial-gradient(circle at 20% 30%, hsla(0,0%,100%,.1) 0, transparent 50%), radial-gradient(circle at 80% 70%, hsla(0,0%,100%,.05) 0, transparent 50%);
    bottom:0;
    content:"";
    left:0;
    position:absolute;
    right:0;
    top:0;
}

.banner-badge{
    align-items:center;
    background:hsla(0,0%,100%,.15);
    border-radius:50px;
    color:#fff;
    display:inline-flex;
    font-size:.875rem;
    font-weight:600;
    gap:.5rem;
    margin-bottom:1.5rem;
    padding:.75rem 1.5rem;
}

.banner-title{
    color:#fff;
    font-size:clamp(2.5rem, 5vw, 4rem);
    font-weight:800;
    margin-bottom:1rem;
}

.banner-subtitle{
    color:hsla(0,0%,100%,.9);
    font-size:1.25rem;
    line-height:1.6;
    margin-bottom:3rem;
}

.domain-search-form-main{
    margin:0 auto 1.5rem;
    max-width:700px;
    position:relative;
    z-index:10;
}

.search-wrapper{
    background:#fff;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.2);
    display:flex;
    gap:1rem;
    padding:.75rem;
}

.search-input{
    background:transparent;
    border:none;
    color:var(--color-gray-900);
    flex:1;
    font-size:1.125rem;
    outline:none;
    padding:1.25rem 1.5rem;
}

.search-input::placeholder{
    color:var(--color-gray-400);
}

.search-btn{
    align-items:center;
    background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border:none;
    border-radius:12px;
    color:#fff;
    cursor:pointer;
    display:flex;
    font-size:1.125rem;
    font-weight:700;
    gap:.75rem;
    padding:1.25rem 2.5rem;
    transition:all .3s ease;
    white-space:nowrap;
}

.search-btn:hover:not(:disabled){
    box-shadow:0 15px 40px rgba(27,60,136,.4);
    transform:translateY(-3px);
}

.search-btn:disabled{
    cursor:not-allowed;
    opacity:.7;
}

.banner-note{
    color:hsla(0,0%,100%,.8);
    font-size:1rem;
}

.banner-note a{
    color:#fff;
    font-weight:600;
    text-decoration:underline;
}

.whois-result-section{
    padding:3rem 0;
}

#whois-result-output{
    min-height:50px;
}

.loading-card{
    border:1px solid var(--border-color);
    border-radius:16px;
    padding:3rem;
    text-align:center;
}

.loading-card,.result-card{
    background:var(--bg-card);
}

.result-card{
    animation:slideInUp .4s ease;
    border:2px solid var(--border-color);
    border-radius:20px;
    box-shadow:0 10px 40px var(--shadow-color);
    padding:2.5rem;
}

@keyframes slideInUp{
    0%{ opacity:0; transform:translateY(30px); }
    to{ opacity:1; transform:translateY(0); }
}

.result-available{
    background:linear-gradient(135deg, var(--bg-card) 0, rgba(16,185,129,.05) 100%);
    border-color:var(--color-secondary);
}

.result-taken{
    background:linear-gradient(135deg, var(--bg-card) 0, rgba(239,68,68,.03) 100%);
    border-color:var(--color-accent-red);
}

.result-error{
    border-color:var(--color-gray-300);
}

.result-header{
    justify-content:space-between;
    margin-bottom:2rem;
}

.result-header,.result-header h3{
    align-items:center;
    display:flex;
}

.result-header h3{
    color:var(--text-primary);
    font-size:1.75rem;
    font-weight:700;
    gap:.75rem;
}

.result-available .result-header h3 i{
    color:var(--color-secondary);
}

.result-taken .result-header h3 i{
    color:var(--color-accent-red);
}

.result-price{
    color:var(--color-secondary);
    font-size:2rem;
    font-weight:800;
}

.whois-details{
    border-top:1px solid var(--border-color);
    margin-top:2rem;
    padding-top:2rem;
}

.whois-details h5{
    color:var(--text-primary);
    font-size:1.25rem;
    font-weight:600;
    margin-bottom:1.5rem;
}

.details-table{
    width:100%;
}

.details-table td{
    border-bottom:1px solid var(--border-color);
    color:var(--text-secondary);
    padding:.75rem;
}

.details-table td:first-child{
    color:var(--text-primary);
    font-weight:600;
    width:200px;
}

.popular-tlds-section{
    background:var(--bg-secondary);
    padding:6rem 0;
}

.tld-table-card{
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:20px;
    box-shadow:0 10px 40px var(--shadow-color);
    padding:2rem;
}

.search-filter-wrapper{
    margin-bottom:2rem;
    position:relative;
}

.filter-input{
    background:var(--bg-secondary);
    border:2px solid var(--border-color);
    border-radius:12px;
    color:var(--text-primary);
    font-size:1rem;
    padding:1rem 1.5rem 1rem 3.5rem;
    transition:all .3s ease;
    width:100%;
}

.filter-input:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 4px rgba(59,130,246,.1);
    outline:none;
}

.filter-icon{
    color:var(--text-muted);
    left:1.25rem;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

.tld-table{
    border-collapse:collapse;
    width:100%;
}

.tld-table thead{
    background:var(--bg-secondary);
}

.tld-table th{
    color:var(--text-primary);
    font-size:.95rem;
    font-weight:700;
    letter-spacing:.5px;
    padding:1.25rem 1.5rem;
    text-align:left;
    text-transform:uppercase;
}

.tld-table tbody tr{
    border-bottom:1px solid var(--border-color);
    transition:all .3s ease;
}

.tld-table tbody tr:hover{
    background:var(--bg-secondary);
}

.tld-table td{
    color:var(--text-secondary);
    padding:1.25rem 1.5rem;
}

.tld-name{
    color:var(--text-primary);
    font-size:1.125rem;
    font-weight:700;
}

.price-link{
    color:var(--color-primary);
    font-weight:600;
    text-decoration:none;
    transition:color .3s ease;
}

.price-link:hover{
    color:var(--color-primary-dark);
    text-decoration:underline;
}

.domain-benefits-section{
    padding:6rem 0;
}

.benefits-title{
    color:var(--text-primary);
    font-size:clamp(2rem, 4vw, 2.75rem);
    font-weight:700;
    line-height:1.2;
    margin-bottom:1.5rem;
}

.benefits-desc{
    color:var(--text-secondary);
    font-size:1.125rem;
    line-height:1.7;
    margin-bottom:2rem;
}

.benefit-card{
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:16px;
    height:100%;
    padding:2rem;
    transition:all .3s ease;
}

.benefit-card:hover{
    border-color:var(--color-primary);
    box-shadow:0 15px 40px var(--shadow-color);
    transform:translateY(-5px);
}

.benefit-icon{
    align-items:center;
    background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius:16px;
    display:flex;
    height:64px;
    justify-content:center;
    margin-bottom:1.5rem;
    width:64px;
}

.benefit-icon i{
    color:#fff;
    font-size:1.75rem;
}

.benefit-card h5{
    color:var(--text-primary);
    font-size:1.25rem;
    font-weight:700;
    margin-bottom:1rem;
}

.benefit-card p{
    color:var(--text-secondary);
    font-size:.95rem;
    line-height:1.6;
    margin:0;
}


/* ============================================
   24. PROCESS & FAQ
   Süreç Adımları & SSS Accordion
   ============================================ */

.process-section{
    background:var(--bg-secondary);
    padding:6rem 0;
}

.process-card{
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:20px;
    height:100%;
    padding:2.5rem;
    text-align:center;
    transition:all .3s ease;
}

.process-card:hover{
    box-shadow:0 20px 50px var(--shadow-color);
    transform:translateY(-10px);
}

.process-badge{
    border-radius:50px;
    color:#fff;
    display:inline-block;
    font-size:.875rem;
    font-weight:700;
    margin-bottom:1.5rem;
    padding:.5rem 1.25rem;
}

.bg-success{
    background:linear-gradient(135deg, #10b981, #059669);
}

.bg-primary{
    background:linear-gradient(135deg, #3b82f6, #2563eb);
}

.bg-warning{
    background:linear-gradient(135deg, #f59e0b, #d97706);
}

.process-icon{
    align-items:center;
    background:var(--bg-secondary);
    border-radius:50%;
    color:var(--color-primary);
    display:flex;
    font-size:2.5rem;
    height:100px;
    justify-content:center;
    margin:0 auto 1.5rem;
    width:100px;
}

.process-card h5{
    color:var(--text-primary);
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:1rem;
}

.process-card p{
    color:var(--text-secondary);
    font-size:1rem;
    line-height:1.7;
    margin:0;
}

.faq-section{
    padding:6rem 0;
}

.section-badge{
    background:rgba(59,130,246,.1);
    border-radius:50px;
    color:var(--color-primary);
    display:inline-block;
    font-size:.875rem;
    font-weight:600;
    margin-bottom:1rem;
    padding:.5rem 1.5rem;
}

.accordion{
    margin-top:2rem;
}

.accordion-item{
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:12px;
    margin-bottom:1rem;
    overflow:hidden;
}

.accordion-header{
    margin:0;
}

.accordion-button{
    align-items:center;
    background:transparent;
    border:none;
    color:var(--text-primary);
    cursor:pointer;
    display:flex;
    font-size:1.125rem;
    font-weight:600;
    justify-content:space-between;
    padding:1.5rem;
    text-align:left;
    transition:all .3s ease;
    width:100%;
}

.accordion-button:after{
    content:"\f078";
    font-family:Font Awesome\ 6 Free;
    font-weight:900;
    transition:transform .3s ease;
}

.accordion-button:not(.collapsed):after{
    transform:rotate(180deg);
}

.accordion-button:hover{
    background:var(--bg-secondary);
}

.accordion-collapse{
    transition:all .3s ease;
}

.accordion-body{
    color:var(--text-secondary);
    font-size:1rem;
    line-height:1.7;
    padding:0 1.5rem 1.5rem;
}

/* Domain Sayfası - Ekstra Premium Efektler */
.domain-banner .banner-badge {
    animation: badgePulse 3s ease-in-out infinite;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,255,255,0.4); }
    50% { transform: scale(1.02); box-shadow: 0 0 20px rgba(255,255,255,0.3); }
}

.search-wrapper {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-wrapper:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 30px 80px rgba(59,130,246,0.4), 0 0 0 4px rgba(59,130,246,0.1) !important;
}

[data-theme="light"] .search-wrapper:focus-within {
    box-shadow: 0 30px 80px rgba(27,60,136,0.25), 0 0 0 4px rgba(27,60,136,0.08) !important;
}

.search-wrapper:focus-within .search-btn {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    transform: scale(1.05);
}

/* Process Card Neon Glow Effect */
.process-card {
    position: relative;
    overflow: hidden;
}

.process-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--color-primary) 50%, 
        transparent
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.process-card:hover::before {
    opacity: 1;
}

.process-card:hover .process-icon {
    background: var(--color-primary);
    color: #fff;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 40px rgba(59,130,246,0.4);
}

[data-theme="light"] .process-card:hover .process-icon {
    box-shadow: 0 15px 40px rgba(27,60,136,0.3);
}

.process-badge {
    position: relative;
    overflow: hidden;
}

.process-badge::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.process-card:hover .process-badge::after {
    width: 100%;
    height: 100%;
}

/* Benefit Card Glassmorphism Enhancement */
.benefit-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.benefit-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(59,130,246,0.1) 0%, 
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
}

.benefit-card:hover::before {
    opacity: 1;
}

[data-theme="light"] .benefit-card::before {
    background: radial-gradient(circle, 
        rgba(27,60,136,0.08) 0%, 
        transparent 70%
    );
}

/* TLD Table Enhancements */
.tld-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.tld-table tbody tr {
    position: relative;
}

.tld-table tbody tr::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tld-table tbody tr:hover::before {
    opacity: 1;
}

/* WHOIS Result Cards - Premium Animation */
.result-card {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.result-available {
    position: relative;
    overflow: hidden;
}

.result-available::after {
    content: '✓';
    position: absolute;
    top: -100px;
    right: -100px;
    font-size: 300px;
    color: rgba(16,185,129,0.05);
    font-weight: bold;
    pointer-events: none;
}

[data-theme="light"] .result-available::after {
    color: rgba(16,185,129,0.03);
}

/* FAQ Accordion Neon Effect */
.accordion-item {
    transition: all 0.3s ease;
}

.accordion-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px var(--shadow-color);
}

.accordion-button:focus {
    outline: none;
    box-shadow: none;
}

/* Section Badge Universal Enhancement */
.section-badge {
    position: relative;
    border: 1px solid rgba(59,130,246,0.2);
    transition: all 0.3s ease;
}

[data-theme="light"] .section-badge {
    background: rgba(27,60,136,0.08);
    border-color: rgba(27,60,136,0.15);
}

.section-badge i {
    margin-right: 0.5rem;
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Spinner (Loading) Styles */
.spinner-border {
    border: 3px solid rgba(59,130,246,0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

[data-theme="light"] .spinner-border {
    border-color: rgba(27,60,136,0.15);
    border-top-color: var(--color-primary);
}


/* ============================================
   25. TOP BAR (FIXED LAYOUT)
   Sabit Üst Bar - Dil, Tema, İletişim
   ============================================ */

.top-bar{
    backdrop-filter:blur(10px);
    background:rgba(10,14,26,.95);
    border-bottom:1px solid rgba(59,130,246,.1);
    font-size:.85rem;
    left:0;
    padding:.5rem 0;
    position:fixed;
    right:0;
    top:0;
    z-index:10001;
}

[data-theme=light] .top-bar{
    background:#1e5ba8;
    border-bottom:1px solid hsla(0,0%,100%,.1);
    box-shadow:0 1px 3px rgba(0,0,0,.1);
}

.top-bar-content{
    align-items:center;
    display:flex;
    gap:1rem;
    justify-content:space-between;
}

.top-bar-left,.top-bar-right{
    align-items:center;
    display:flex;
    gap:1.5rem;
}

.top-bar-link{
    align-items:center;
    color:#94a3b8;
    display:flex;
    gap:.5rem;
    text-decoration:none;
    transition:color .2s ease;
}

[data-theme=light] .top-bar-link{
    color:hsla(0,0%,100%,.9);
}

.top-bar-link:hover{
    color:#60a5fa;
}

[data-theme=light] .top-bar-link:hover{
    color:#fff;
}

.top-bar-link i{
    font-size:.9rem;
}

.top-bar-btn{
    align-items:center;
    background:transparent;
    border:1px solid rgba(59,130,246,.2);
    border-radius:6px;
    color:#94a3b8;
    cursor:pointer;
    display:flex;
    font-size:.85rem;
    gap:.5rem;
    padding:.4rem .75rem;
    transition:all .2s ease;
}

[data-theme=light] .top-bar-btn{
    border-color:hsla(0,0%,100%,.2);
    color:hsla(0,0%,100%,.9);
}

.top-bar-btn:hover{
    background:rgba(59,130,246,.1);
    border-color:rgba(59,130,246,.3);
    color:#60a5fa;
}

[data-theme=light] .top-bar-btn:hover{
    background:hsla(0,0%,100%,.15);
    border-color:hsla(0,0%,100%,.3);
    color:#fff;
}
.top-bar-right .theme-toggle{
    background:rgba(59,130,246,.2);
    border:1px solid rgba(59,130,246,.3);
    height:24px;
    width:48px;
}

[data-theme=light] .top-bar-right .theme-toggle{
    background:hsla(0,0%,100%,.2);
    border-color:hsla(0,0%,100%,.3);
}

.top-bar-right .theme-toggle-slider{
    height:18px;
    left:2px;
    top:2px;
    width:18px;
}

[data-theme=dark] .top-bar-right .theme-toggle-slider{
    transform:translateX(24px);
}


/* ============================================
   26. HEADER (FIXED LAYOUT)
   Sticky Header & Glass Effect
   ============================================ */

.header-sticky{
    left:0;
    position:fixed;
    right:0;
    top:42px;
    transition:all .3s cubic-bezier(.4, 0, .2, 1);
    z-index:var(--z-sticky);
}

.header-glass{
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    background:rgba(10,14,26,.95);
    border-bottom:1px solid rgba(59,130,246,.15);
    box-shadow:0 4px 30px rgba(0,0,0,.3);
    padding:.75rem 0;
}

[data-theme=light] .header-glass{
    backdrop-filter:none;
    background:#0c2d5e;
    border-bottom:1px solid hsla(0,0%,100%,.1);
    box-shadow:0 4px 20px rgba(0,0,0,.15);
}


/* ============================================
   27. NAVIGATION MENU (DETAILED)
   Navbar, Mega Menu, Dropdown, Language Selector
   ============================================ */

.navbar{
    align-items:center;
    display:flex;
    gap:2rem;
    justify-content:space-between;
}

.navbar-brand img{
    height:45px;
    transition:transform var(--transition-base);
    width:auto;
}

.navbar-brand:hover img{
    transform:scale(1.05);
}
.navbar-menu{
    align-items:center;
    display:flex;
    gap:.5rem;
    list-style:none;
    margin:0;
    padding:0;
}

.nav-item{
    position:relative;
}

.nav-link{
    align-items:center;
    border-radius:8px;
    color:#94a3b8;
    display:flex;
    font-size:.95rem;
    font-weight:500;
    gap:.5rem;
    padding:.75rem 1rem;
    text-decoration:none;
    transition:all .2s cubic-bezier(.4, 0, .2, 1);
}

.nav-link.active,.nav-link:hover{
    background:rgba(59,130,246,.15);
    color:#60a5fa;
}

[data-theme=light] .nav-link{
    color:hsla(0,0%,100%,.9);
}

[data-theme=light] .nav-link.active,[data-theme=light] .nav-link:hover{
    background:hsla(0,0%,100%,.15);
    color:#fff;
}
.nav-link i{
    font-size:1rem;
}
.nav-link i.fa-chevron-down{
    font-size:.7rem;
    margin-left:.35rem;
    opacity:.7;
    transition:transform .3s ease,opacity .2s ease;
}

.nav-link:hover i.fa-chevron-down{
    opacity:1;
}

.has-mega-menu:hover .nav-link i.fa-chevron-down{
    transform:rotate(180deg);
}
.navbar-menu>li:first-child .nav-link{
    justify-content:center;
    min-width:44px;
    padding:.75rem;
}

.navbar-menu>li:first-child .nav-link i{
    font-size:1.15rem;
    margin:0;
}
.has-mega-menu{
    position:relative;
}
.has-mega-menu:after{
    background:transparent;
    bottom:-1rem;
    content:"";
    height:1.5rem;
    left:0;
    position:absolute;
    right:0;
}

.mega-menu{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:#0f172a !important;
    border:1px solid rgba(59,130,246,.3);
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(59,130,246,.15);
    left:50%;
    opacity:0;
    padding:2rem 2.5rem;
    pointer-events:none;
    position:absolute;
    top:calc(100% + .5rem);
    transform:translateX(-50%) translateY(-10px);
    transition:opacity .25s ease,visibility .25s ease,transform .25s ease;
    transition-delay:.15s;
    visibility:hidden;
    width:650px;
    z-index:10002;
}
.mega-menu:before{
    background:transparent;
    content:"";
    height:1.5rem;
    left:0;
    position:absolute;
    right:0;
    top:-1.5rem;
}

[data-theme=light] .mega-menu{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:#fff !important;
    border:1px solid rgba(0,0,0,.12);
    box-shadow:0 20px 60px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05);
}

.mega-menu-wide{
    width:900px;
}

/* ============================================
   TABBED MEGA MENU - Server Products
   ============================================ */
.mega-menu-tabbed{
    display:flex;
    padding:0 !important;
    width:1050px;
    overflow:hidden;
}

.mega-sidebar{
    background:rgba(15,23,42,.6);
    border-right:1px solid rgba(59,130,246,.15);
    display:flex;
    flex-direction:column;
    padding:.75rem 0;
    width:220px;
    flex-shrink:0;
}

.mega-tab{
    align-items:center;
    border-left:3px solid transparent;
    color:#94a3b8;
    display:flex;
    font-size:.875rem;
    font-weight:500;
    gap:.75rem;
    padding:.75rem 1rem;
    transition:all .2s ease;
}

.mega-tab svg{
    flex-shrink:0;
    opacity:.7;
}

.mega-tab span{
    flex:1;
}

.mega-tab-label{
    display:flex;
    flex-direction:column;
    flex:1;
    font-weight:600;
    line-height:1.2;
}

.mega-tab-label small{
    color:#64748b;
    font-size:.65rem;
    font-weight:400;
    margin-top:.15rem;
}

.mega-tab:hover .mega-tab-label small,
.mega-tab.active .mega-tab-label small{
    color:#94a3b8;
}

[data-theme=light] .mega-tab-label small{
    color:#94a3b8;
}

[data-theme=light] .mega-tab:hover .mega-tab-label small,
[data-theme=light] .mega-tab.active .mega-tab-label small{
    color:#64748b;
}

.mega-tab .fa-chevron-right{
    font-size:.65rem;
    opacity:0;
    transition:all .2s ease;
}

.mega-tab:hover,.mega-tab.active{
    background:rgba(59,130,246,.1);
    border-left-color:#3b82f6;
    color:#f1f5f9;
}

.mega-tab:hover svg,.mega-tab.active svg{
    opacity:1;
    color:#3b82f6;
}

.mega-tab:hover .fa-chevron-right,.mega-tab.active .fa-chevron-right{
    opacity:1;
    transform:translateX(3px);
}

.mega-sidebar-divider{
    background:rgba(59,130,246,.15);
    height:1px;
    margin:.5rem 1rem;
}

.mega-content{
    flex:1;
    padding:1.25rem 1.5rem;
    position:relative;
}

.mega-panel{
    display:none;
    animation:fadeInPanel .2s ease;
}

.mega-panel.active{
    display:block;
}

@keyframes fadeInPanel{
    from{opacity:0;transform:translateX(10px);}
    to{opacity:1;transform:translateX(0);}
}

.mega-panel-header{
    border-bottom:1px solid rgba(59,130,246,.15);
    margin-bottom:1rem;
    padding-bottom:.75rem;
}

.mega-panel-header h6{
    color:#f1f5f9;
    font-size:.95rem;
    font-weight:600;
    margin:0 0 .25rem 0;
}

.mega-panel-header span{
    color:#64748b;
    font-size:.75rem;
}

.mega-panel-grid{
    display:grid;
    gap:1.25rem;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
}

.mega-panel-grid-4{
    grid-template-columns:repeat(4, 1fr);
}

.mega-location-group{
    display:flex;
    flex-direction:column;
    gap:.35rem;
}

.location-region{
    color:#64748b;
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.5px;
    margin-bottom:.25rem;
    text-transform:uppercase;
}

.mega-location-group a{
    align-items:center;
    border-radius:6px;
    color:#cbd5e1;
    display:flex;
    font-size:.8rem;
    gap:.5rem;
    padding:.4rem .5rem;
    transition:all .15s ease;
}

.mega-location-group a:hover{
    background:rgba(59,130,246,.12);
    color:#60a5fa;
    transform:translateX(3px);
}

.mega-location-group a .fi{
    font-size:.85rem;
}

.mega-location-group a i{
    font-size:.75rem;
    opacity:.7;
    width:14px;
    text-align:center;
}

.mega-panel-cta{
    align-items:center;
    background:linear-gradient(135deg, rgba(59,130,246,.15) 0%, rgba(139,92,246,.15) 100%);
    border:1px solid rgba(59,130,246,.3);
    border-radius:8px;
    color:#60a5fa;
    display:inline-flex;
    font-size:.8rem;
    font-weight:600;
    gap:.5rem;
    margin-top:1rem;
    padding:.6rem 1rem;
    transition:all .2s ease;
}

.mega-panel-cta:hover{
    background:linear-gradient(135deg, rgba(59,130,246,.25) 0%, rgba(139,92,246,.25) 100%);
    border-color:rgba(59,130,246,.5);
    box-shadow:0 4px 15px rgba(59,130,246,.2);
    color:#93c5fd;
    transform:translateX(3px);
}

.mega-panel-cta i{
    font-size:.7rem;
    transition:transform .2s ease;
}

.mega-panel-cta:hover i{
    transform:translateX(3px);
}

/* Light Mode - Tabbed Mega Menu */
[data-theme=light] .mega-sidebar{
    background:rgba(241,245,249,.8);
    border-right-color:rgba(0,0,0,.08);
}

[data-theme=light] .mega-tab{
    color:#475569;
}

[data-theme=light] .mega-tab:hover,[data-theme=light] .mega-tab.active{
    background:rgba(59,130,246,.08);
    border-left-color:#2563eb;
    color:#1e293b;
}

[data-theme=light] .mega-tab:hover svg,[data-theme=light] .mega-tab.active svg{
    color:#2563eb;
}

[data-theme=light] .mega-sidebar-divider{
    background:rgba(0,0,0,.08);
}

[data-theme=light] .mega-panel-header{
    border-bottom-color:rgba(0,0,0,.08);
}

[data-theme=light] .mega-panel-header h6{
    color:#1e293b;
}

[data-theme=light] .mega-panel-header span{
    color:#64748b;
}

[data-theme=light] .location-region{
    color:#64748b;
}

[data-theme=light] .mega-location-group a{
    color:#475569;
}

[data-theme=light] .mega-location-group a:hover{
    background:rgba(59,130,246,.1);
    color:#2563eb;
}

[data-theme=light] .mega-panel-cta{
    background:linear-gradient(135deg, rgba(59,130,246,.1) 0%, rgba(139,92,246,.1) 100%);
    border-color:rgba(59,130,246,.25);
    color:#2563eb;
}

[data-theme=light] .mega-panel-cta:hover{
    background:linear-gradient(135deg, rgba(59,130,246,.18) 0%, rgba(139,92,246,.18) 100%);
    border-color:rgba(59,130,246,.4);
    color:#1d4ed8;
}

.has-mega-menu:hover .mega-menu,.has-mega-menu.mega-menu-active .mega-menu,.mega-menu:hover{
    background:#0f172a !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
    transition-delay:0s;
    visibility:visible !important;
}

[data-theme=light] .has-mega-menu:hover .mega-menu,[data-theme=light] .has-mega-menu.mega-menu-active .mega-menu,[data-theme=light] .mega-menu:hover{
    background:#fff !important;
}
.has-mega-menu .nav-link:hover+.mega-menu{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
    visibility:visible !important;
}

.mega-menu .row{
    display:flex;
    flex-wrap:wrap;
    margin:0 -.75rem;
}

.mega-menu .col-md-3,.mega-menu .col-md-4,.mega-menu .col-md-6{
    padding:0 .75rem;
}

.mega-menu .col-md-3{ flex:0 0 25%; max-width:25%; }
.mega-menu .col-md-4{ flex:0 0 33.333%; max-width:33.333%; }
.mega-menu .col-md-6{ flex:0 0 50%; max-width:50%; }

.mega-menu-title{
    align-items:center;
    border-bottom:2px solid #3b82f6;
    color:#e2e8f0;
    display:flex;
    font-size:.8rem;
    font-weight:600;
    gap:.5rem;
    letter-spacing:.5px;
    margin-bottom:1rem;
    padding-bottom:.5rem;
    padding-left:1.25rem;
    text-transform:uppercase;
}

[data-theme=light] .mega-menu-title{
    border-bottom-color:#1b3c88;
    color:#1e293b;
}
.mega-menu-title .menu-icon{
    flex-shrink:0;
    opacity:.8;
}

[data-theme=light] .mega-menu-title .menu-icon{
    opacity:.7;
}

.mega-menu-list{
    list-style:none;
    margin:0;
    padding:0;
}

.mega-menu-list li{
    margin-bottom:.25rem;
}

.mega-menu-list a{
    align-items:center;
    border-radius:8px;
    color:#94a3b8;
    display:flex;
    font-size:.9rem;
    padding:.65rem 1.25rem;
    text-decoration:none;
    transition:all .15s cubic-bezier(.4, 0, .2, 1);
}

.mega-menu-list a:hover{
    background:rgba(59,130,246,.15);
    color:#60a5fa;
    transform:translateX(4px);
}

/* Mega Menu CTA Link - Öne Çıkan Linkler (All Games, All VPS vb.) */
.mega-menu-list a[href*="diger-oyunlarimiz"],
.mega-menu-list a[href*="all-games"],
.mega-menu-list .menu-cta-link{
    background:linear-gradient(135deg, rgba(59,130,246,.2) 0%, rgba(139,92,246,.2) 100%);
    border:1px solid rgba(59,130,246,.4);
    color:#60a5fa !important;
    font-weight:600;
    margin-top:.5rem;
    padding:.6rem 1rem;
    position:relative;
}

.mega-menu-list a[href*="diger-oyunlarimiz"]:hover,
.mega-menu-list a[href*="all-games"]:hover,
.mega-menu-list .menu-cta-link:hover{
    background:linear-gradient(135deg, rgba(59,130,246,.35) 0%, rgba(139,92,246,.35) 100%);
    border-color:rgba(59,130,246,.6);
    box-shadow:0 4px 15px rgba(59,130,246,.25);
    color:#93c5fd !important;
    transform:translateX(6px);
}

[data-theme=light] .mega-menu-list a[href*="diger-oyunlarimiz"],
[data-theme=light] .mega-menu-list a[href*="all-games"],
[data-theme=light] .mega-menu-list .menu-cta-link{
    background:linear-gradient(135deg, rgba(59,130,246,.12) 0%, rgba(139,92,246,.12) 100%);
    border:1px solid rgba(59,130,246,.3);
    color:#2563eb !important;
}

[data-theme=light] .mega-menu-list a[href*="diger-oyunlarimiz"]:hover,
[data-theme=light] .mega-menu-list a[href*="all-games"]:hover,
[data-theme=light] .mega-menu-list .menu-cta-link:hover{
    background:linear-gradient(135deg, rgba(59,130,246,.2) 0%, rgba(139,92,246,.2) 100%);
    border-color:rgba(59,130,246,.5);
    box-shadow:0 4px 15px rgba(59,130,246,.15);
    color:#1d4ed8 !important;
}

[data-theme=light] .mega-menu-list a{
    color:#475569;
}

[data-theme=light] .mega-menu-list a:hover{
    background:rgba(27,60,136,.1);
    color:#1b3c88;
}
.navbar-actions{
    align-items:center;
    display:flex;
    gap:.75rem;
}
.navbar-actions .panel-btn{
    align-items:center;
    display:flex;
    font-size:.95rem;
    gap:.5rem;
    height:48px;
    justify-content:center;
    min-width:48px;
    padding:0 1.25rem;
}

.navbar-actions .panel-btn svg{
    flex-shrink:0;
    height:22px;
    width:22px;
}
.cart-btn{
    position:relative;
}

.cart-count{
    background:var(--color-accent-red);
    border-radius:10px;
    color:#fff;
    font-size:.7rem;
    font-weight:600;
    min-width:18px;
    padding:2px 6px;
    position:absolute;
    right:-6px;
    text-align:center;
    top:-6px;
}
.language-selector{
    position:relative;
    z-index:var(--z-dropdown) !important;
}

.dropdown-menu{
    backdrop-filter:blur(20px);
    background:hsla(0,0%,100%,.98);
    border:1px solid rgba(27,60,136,.1);
    border-radius:12px;
    box-shadow:0 10px 40px rgba(0,0,0,.1);
    min-width:180px;
    opacity:0;
    padding:.5rem;
    position:absolute;
    right:0;
    top:calc(100% + .5rem);
    transform:translateY(-10px);
    transition:all .2s cubic-bezier(.4, 0, .2, 1);
    visibility:hidden;
    z-index:var(--z-dropdown) !important;
}

[data-theme=dark] .dropdown-menu{
    background:rgba(30,41,59,.98);
    border-color:rgba(59,130,246,.3);
    box-shadow:0 10px 40px rgba(0,0,0,.5);
}

.dropdown-menu:hover,.language-selector:hover .dropdown-menu{
    opacity:1;
    transform:translateY(0);
    visibility:visible;
}

.dropdown-item{
    align-items:center;
    border-radius:8px;
    color:var(--text-secondary);
    display:flex;
    font-size:.9rem;
    gap:.5rem;
    padding:.65rem 1rem;
    text-decoration:none;
    transition:all .15s cubic-bezier(.4, 0, .2, 1);
}

.dropdown-item:hover{
    background:rgba(27,60,136,.08);
    color:var(--color-primary);
}

[data-theme=dark] .dropdown-item:hover{
    background:rgba(59,130,246,.15);
    color:var(--color-primary-light);
}
[data-theme=light] .dropdown-menu{
    background:#0c2d5e;
    border-color:hsla(0,0%,100%,.2);
}

[data-theme=light] .dropdown-item{
    color:hsla(0,0%,100%,.9);
}

[data-theme=light] .dropdown-item:hover{
    background:hsla(0,0%,100%,.15);
    color:#fff;
}


/* ============================================
   28. MOBILE MENU & OVERLAY
   Mobil Menü Sidebar, Overlay, Toggle Animasyonları
   ============================================ */

.mobile-menu-overlay{
    background:rgba(0,0,0,.75);
    height:100%;
    left:0;
    opacity:0;
    pointer-events:none;
    position:fixed;
    top:0;
    transition:all .4s cubic-bezier(.4, 0, .2, 1);
    visibility:hidden;
    width:100%;
    z-index:var(--z-overlay);
}

.mobile-menu-overlay.active{
    opacity:1;
    pointer-events:auto;
    visibility:visible;
    z-index: var(--z-overlay) !important;
}
.mobile-overlay{
    background:rgba(0,0,0,.75);
    height:100%;
    left:0;
    opacity:0;
    pointer-events:none;
    position:fixed;
    top:0;
    transition:all .4s cubic-bezier(.4, 0, .2, 1);
    visibility:hidden;
    width:100%;
    z-index:var(--z-overlay);
}

.mobile-overlay.active{
    opacity:1;
    pointer-events:auto;
    visibility:visible;
}
.nav-link.active{
    background:rgba(27,60,136,.1);
    color:var(--color-primary);
    position:relative;
}

[data-theme=dark] .nav-link.active{
    background:rgba(59,130,246,.15);
    color:var(--color-primary-light);
}

[data-theme=light] .nav-link.active{
    background:hsla(0,0%,100%,.2);
    color:#fff;
}
.navbar-toggle{
    align-items:center;
    background:transparent;
    border:none;
    border-radius:8px;
    cursor:pointer;
    display:none;
    flex-direction:column;
    gap:6px;
    height:48px;
    justify-content:center;
    padding:12px;
    transition:all .3s ease;
    width:48px;
    z-index:10004 !important;
}

.navbar-toggle:hover{
    background:rgba(59,130,246,.1);
}

[data-theme=light] .navbar-toggle:hover{
    background:rgba(27,60,136,.1);
}

.navbar-toggle span{
    background:#e2e8f0;
    border-radius:3px;
    display:block;
    height:3px;
    transform-origin:center;
    transition:all .3s cubic-bezier(.4, 0, .2, 1);
    width:24px;
}
[data-theme=light] .navbar-toggle span{
    background:#1e293b;
}

.navbar-toggle.active span:first-child{
    transform:rotate(45deg) translateY(8px);
}

.navbar-toggle.active span:nth-child(2){
    opacity:0;
    transform:translateX(-20px);
}

.navbar-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translateY(-8px);
}


/* ============================================
   29. RESPONSIVE MEDIA QUERIES
   Mobile, Tablet, Desktop Breakpoints
   ============================================ */

@media (min-width:576px){
    .container{ max-width:var(--container-sm); }}
@media (min-width:768px){
    .container{ max-width:var(--container-md); }
    .d-md-flex{ display:flex; }}
@media (min-width:992px){
    .container{ max-width:var(--container-lg); }}
@media (min-width:1200px){
    .container{ max-width:var(--container-xl); }}
@media (min-width:1400px){
    .container{ max-width:var(--container-xxl); }}
@media (max-width:1024px){
    .pricing-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    .testimonials-section{
        padding:4rem 0 !important;
    }
    
    .blog-grid,.blog-two-column-grid{
        gap:2rem;
        grid-template-columns:1fr;
    }
    
    .blog-news-header{
        align-items:flex-start;
        flex-direction:column;
        gap:1.5rem;
    }
    
    .blog-news-header-left h2{
        font-size:clamp(2rem, 5vw, 2.5rem);
    }
    
    .blog-view-all-btn{
        justify-content:center;
        width:100%;
    }}
@media (hover:hover) and (max-width:991px){
    .navbar-menu>li>.nav-link:hover,.navbar-menu>li>a:hover{
        background:rgba(59,130,246,.1);
        color:#3b82f6 !important;
    }

    [data-theme=light] .navbar-menu>li>.nav-link:hover,[data-theme=light] .navbar-menu>li>a:hover{
        background:rgba(59,130,246,.08);
        color:#2563eb !important;
    }

    .mega-menu-list a:hover{
        background:rgba(59,130,246,.12) !important;
        color:#60a5fa !important;
    }

    [data-theme=light] .mega-menu-list a:hover{
        background:#e0f2fe !important;
        color:#2563eb !important;
    }}
@media (max-width:991px){
    .footer-col{
        flex:0 0 50%;
        max-width:50%;
    }
    .section{
        padding:4rem 0;
    }
    body{
        padding-top:0 !important;
    }
    div.top-bar{
        padding:.4rem 0;
        position:relative !important;
    }
    
    .top-bar-content{
        font-size:.75rem;
    }
    
    .top-bar-left,.top-bar-right{
        gap:1rem;
    }
    
    .lang-text,.top-bar-link span{
        display:none;
    }
    
    .top-bar-btn i,.top-bar-link i{
        font-size:1rem;
    }
    
    .mobile-menu-overlay{
        z-index:var(--z-overlay) !important;
    }

    header.header-sticky{
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        background:transparent !important;
        box-shadow:none !important;
        position:sticky !important;
        top:0 !important;
        z-index:var(--z-header) !important;
    }
    .navbar-menu{
        background:#0f172a !important;
        border-right:1px solid hsla(0,0%,100%,.05);
        box-shadow:10px 0 30px rgba(0,0,0,.5);
        display:flex;
        max-width:85vw;
        overflow-y:auto;
        padding:6rem 1.5rem 2rem;
        scrollbar-color:rgba(59,130,246,.35) transparent;
        transition:left .3s cubic-bezier(.4, 0, .2, 1);
        width:320px;
        z-index:var(--z-mobile-menu) !important;
    }
    [data-theme=light] .navbar-menu{
        background:#fff !important;
    }

    .navbar-menu::-webkit-scrollbar{
        width:6px;
    }

    .navbar-menu::-webkit-scrollbar-track{
        background:transparent;
    }

    .navbar-menu::-webkit-scrollbar-thumb{
        background:rgba(59,130,246,.35);
    }
    .mega-menu{
        background:hsla(0,0%,100%,.03) !important;
        border:none !important;
        box-shadow:none !important;
        margin:0 !important;
        max-height:0;
        opacity:1 !important;
        overflow:hidden;
        padding:0 !important;
        position:static !important;
        transform:none !important;
        transition:max-height .3s ease-in-out;
        visibility:visible !important;
        width:calc(100% - 10px) !important;
    }
    [data-theme=light] .mega-menu{
        background:#f8fafc !important;
    }
    .has-mega-menu.menu-open .mega-menu{
        border-top:1px solid hsla(0,0%,100%,.05) !important;
        margin-top:10px !important;
        max-height:2000px;
        padding:15px 0 !important;
    }

    [data-theme=light] .has-mega-menu.menu-open .mega-menu{
        border-top:1px solid rgba(0,0,0,.08) !important;
    }
    
    /* Tabbed Mega Menu - Mobile */
    .mega-menu-tabbed{
        flex-direction:column !important;
        width:100% !important;
    }
    
    .mega-sidebar{
        background:transparent !important;
        border-bottom:1px solid rgba(59,130,246,.15);
        border-right:none !important;
        flex-direction:column;
        padding:.5rem 0;
        width:100% !important;
    }
    
    .mega-tab{
        border-left:none !important;
        border-radius:8px;
        font-size:.85rem;
        padding:.65rem .75rem;
    }
    
    .mega-tab .fa-chevron-right{
        display:none;
    }
    
    .mega-tab:hover,.mega-tab.active{
        background:rgba(59,130,246,.15);
    }
    
    .mega-sidebar-divider{
        margin:.25rem .75rem;
    }
    
    .mega-content{
        padding:1rem .5rem;
    }
    
    .mega-panel-header{
        margin-bottom:.75rem;
        padding-bottom:.5rem;
    }
    
    .mega-panel-header h6{
        font-size:.85rem;
    }
    
    .mega-panel-header span{
        font-size:.7rem;
    }
    
    .mega-panel-grid,.mega-panel-grid-4{
        gap:1rem;
        grid-template-columns:1fr !important;
    }
    
    .mega-location-group{
        gap:.25rem;
    }
    
    .location-region{
        font-size:.65rem;
    }
    
    .mega-location-group a{
        font-size:.8rem;
        padding:.35rem .5rem;
    }
    
    .mega-panel-cta{
        font-size:.75rem;
        margin-top:.75rem;
        padding:.5rem .75rem;
        width:100%;
        justify-content:center;
    }
    
    .mega-menu .row{
        display:flex;
        margin:0 !important;
    }

    .mega-menu .col-md-3,.mega-menu .col-md-4,.mega-menu .col-md-6{
        margin-bottom:20px;
        max-width:100% !important;
        padding:0 5px !important;
        width:100% !important;
    }

    .mega-menu .col-md-3:last-child,.mega-menu .col-md-4:last-child,.mega-menu .col-md-6:last-child{
        margin-bottom:0;
    }
    .navbar-menu>li>.nav-link,.navbar-menu>li>a{
        align-items:center;
        border-bottom:1px solid hsla(0,0%,100%,.03);
        color:#cbd5e1 !important;
        display:flex;
        font-size:1rem;
        justify-content:space-between;
        padding:12px 0;
        width:100%;
    }
    [data-theme=light] .navbar-menu>li>.nav-link,[data-theme=light] .navbar-menu>li>a{
        border-bottom-color:#f1f5f9;
        color:#1e293b !important;
    }
    .mega-menu-title{
        border-bottom:none !important;
        color:#94a3b8 !important;
        font-size:.8rem;
        letter-spacing:1px;
        margin-bottom:10px;
        padding-left:5px;
        text-transform:uppercase;
    }

    [data-theme=light] .mega-menu-title{
        color:#64748b !important;
    }
    .mega-menu-list a{
        background:hsla(0,0%,100%,.02);
        border-radius:8px;
        color:#cbd5e1 !important;
        display:block;
        margin-bottom:5px;
        padding:10px 15px !important;
    }
    
    [data-theme=light] .mega-menu-list a{
        background:#fff;
        border:1px solid #f1f5f9;
        color:#475569 !important;
    }
    .navbar-menu i{
        color:#94a3b8 !important;
        font-size:1.1rem;
    }

    [data-theme=light] .navbar-menu i{
        color:#64748b !important;
    }
    .navbar-menu .nav-link i.fa-chevron-down{
        font-size:.8rem;
        margin-left:auto;
        transition:transform .3s ease;
    }
    .navbar-toggle{
        display:flex !important;
        position:relative;
        z-index:10004 !important;
    }
    .navbar-menu.active~.navbar-actions{
        opacity:.2;
        pointer-events:none;
    }
    .navbar-menu.active>li:first-child .nav-link{
        gap:.75rem;
        justify-content:flex-start;
    }
    
    .navbar-menu.active>li:first-child .nav-link:after{
        color:#e2e8f0;
        content:"Anasayfa";
        font-size:1rem;
    }
    
    [data-theme=light] .navbar-menu.active>li:first-child .nav-link:after{
        color:#1e293b;
    }
    h1{ font-size:clamp(1.75rem, 4vw + .5rem, 2.5rem); }
    h2{ font-size:clamp(1.5rem, 3.5vw + .5rem, 2rem); }
    h3{ font-size:clamp(1.25rem, 3vw + .25rem, 1.75rem); }
    .panel-text{
        display:none;
    }
    
    .navbar-actions .panel-btn{
        min-width:40px;
        padding:0 .75rem;
    }
    .hero-content{
        margin:-3rem auto 0;
        max-width:100%;
    }
    .domain-premium-section{
        padding:3rem 0 !important;
    }
    
    .premium-search-side,.premium-visual-side{
        padding:2.5rem 2rem;
    }
    
    .premium-globe-container{
        height:280px;
        width:280px;
    }
    
    .search-title{
        font-size:clamp(1.5rem, 4vw, 1.875rem) !important;
    }
    
    .search-subtitle{
        font-size:.95rem;
    }
    .s-soft{
        display:none;
    }
    .services-grid{
        gap:2rem;
        grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    }
    .get-started-section,.section-cta{
        padding:4rem 0 !important;
    }
    
    .get-started-visual{
        height:400px;
        margin-top:3rem;
    }
    
    .visual-card{
        padding:1.5rem;
    }
    
    .cta-title{
        font-size:clamp(1.75rem, 5vw, 2.5rem);
    }
    
    .cta-subtitle{
        font-size:1rem;
    }
    
    .cta-steps{
        gap:2rem;
    }
    .blog-news-section{
        padding:4rem 0;
    }
    
    .blog-grid,.blog-two-column-grid{
        gap:2rem;
        grid-template-columns:1fr;
    }
    
    .blog-featured-image,.blog-post-image{
        aspect-ratio:16/9;
        height:auto;
    }
    .navbar-menu.active>li:first-child .nav-link:after{
        content:"Home" !important;
    }
    .mega-menu-wide{
        max-width:100% !important;
        width:100% !important;
    }
    .top-bar{
        font-size:.75rem;
        padding:.4rem 0;
    }
    
    .top-bar-left{
        gap:1rem;
    }
    
    .top-bar-left .top-bar-link span,.top-bar-right .top-bar-link span{
        display:none;
    }
    
    .top-bar-right{
        gap:.75rem;
    }
    
    .header-sticky{
        top:36px;
    }
    
    body{
        padding-top:106px;
    }
    
    .navbar-toggle{
        display:flex;
    }
    
    .navbar-menu{
        background:#0f172a;
        border-right:1px solid rgba(59,130,246,.3);
        box-shadow:0 0 50px rgba(0,0,0,.5);
        flex-direction:column;
        height:100vh;
        left:-100%;
        max-width:85%;
        overflow-x:hidden;
        overflow-y:scroll;
        padding:5rem 1.5rem 2rem;
        position:fixed;
        scrollbar-color:rgba(59,130,246,.4) rgba(15,23,42,.5);
        scrollbar-width:thin;
        top:0;
        transition:left .4s ease;
        width:340px;
        z-index:10005;
    }
    
    .navbar-menu::-webkit-scrollbar{
        width:8px;
    }
    
    .navbar-menu::-webkit-scrollbar-track{
        background:rgba(15,23,42,.5);
    }
    
    .navbar-menu::-webkit-scrollbar-thumb{
        background:rgba(59,130,246,.4);
        border-radius:999px;
    }
    
    .navbar-menu::-webkit-scrollbar-thumb:hover{
        background:rgba(59,130,246,.6);
    }
    
    [data-theme=light] .navbar-menu{
        background:#fff;
        border-right:1px solid #e2e8f0;
        box-shadow:0 0 50px rgba(0,0,0,.3);
    }
    
    .navbar-menu.active{
        left:0;
    }
    
    .navbar-menu>li{
        margin:.25rem 0;
        width:100%;
    }
    
    .navbar-menu>li>.nav-link{
        justify-content:space-between;
        padding:1rem;
        width:100%;
    }
    .navbar-menu.active>li:first-child .nav-link:after{
        content:"Home";
        margin-left:.5rem;
    }
    .navbar-menu .has-mega-menu .nav-link i.fa-chevron-down{
        transition:transform .3s ease;
    }
    
    .navbar-menu .has-mega-menu.menu-open .nav-link i.fa-chevron-down{
        transform:rotate(180deg);
    }
    .mega-menu,.mega-menu-wide{
        background:rgba(30,41,59,.5);
        border:1px solid rgba(59,130,246,.2);
        border-radius:12px;
        box-shadow:none;
        left:auto !important;
        margin:.5rem 0 0 !important;
        max-height:0;
        max-width:100% !important;
        opacity:0;
        overflow:hidden;
        padding:0;
        position:static !important;
        top:auto !important;
        transition:max-height .4s ease,opacity .3s ease,padding .3s ease;
        visibility:hidden;
        width:100% !important;
    }
    .has-mega-menu .nav-link:hover+.mega-menu,.has-mega-menu:hover .mega-menu,.mega-menu,.mega-menu-wide,.mega-menu:hover{
        transform:none !important;
    }
    
    [data-theme=light] .mega-menu,[data-theme=light] .mega-menu-wide{
        background:rgba(241,245,249,.95);
        border-color:rgba(226,232,240,.8);
    }
    .has-mega-menu.menu-open .mega-menu{
        margin-bottom:.5rem !important;
        max-height:800px;
        opacity:1;
        padding:1rem;
        visibility:visible;
    }
    
    .mega-menu .row{
        flex-direction:column;
        margin:0;
    }
    
    .mega-menu .col-md-3,.mega-menu .col-md-4,.mega-menu .col-md-6{
        flex:0 0 100%;
        margin-bottom:1rem;
        max-width:100%;
        padding:0 .5rem;
        width:100%;
    }
    
    .mega-menu-title{
        font-size:.75rem;
    }
    
    .navbar-actions{
        margin-left:auto;
    }
    
    .lang-text,.panel-text{
        display:none;
    }
    
    .navbar-actions .btn{
        align-items:center;
        display:flex;
        height:38px;
        justify-content:center;
        min-width:38px;
        padding:.5rem;
    }}

/* --- TABLET & MOBILE BREAKPOINTS --- */

@media (max-width:768px){
    .footer-main{
        padding:4rem 0 2rem;
    }
    
    .footer-brand{
        text-align:center;
    }
    
    .footer-description{
        max-width:100%;
    }
    
    .footer-social-links{
        justify-content:center;
    }
    
    .footer-bottom-content{
        flex-direction:column;
        text-align:center;
    }
    
    .footer-bottom-links{
        flex-direction:column;
        gap:.75rem;
    }
    
    .pricing-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .container,.container-fluid{
        padding-left:1rem;
        padding-right:1rem;
    }
    .blog-news-section,.features-section,.get-started-section,.hero-section,.section,.services-overview,.stats-counter,.testimonials-section{
        padding:3rem 0 !important;
    }
    body{
        padding-top:0 !important;
    }
    
    div.top-bar{
        padding:.35rem 0;
        position:relative !important;
    }
    
    header.header-sticky{
        position:sticky !important;
        top:0 !important;
    }
    .hero-section{
        min-height:auto;
        padding:4rem 0 3rem !important;
    }
    
    .hero-content{
        margin-top:-2rem;
        padding:0 1rem;
    }
    
    .hero-badge{
        font-size:.75rem;
        padding:.4rem 1rem;
    }
    
    .hero-title{
        font-size:clamp(1.75rem, 6vw, 2.5rem) !important;
        line-height:1.2;
        margin-bottom:1rem;
    }
    
    .hero-subtitle{
        font-size:clamp(1rem, 3vw, 1.25rem) !important;
        margin-bottom:1.5rem;
    }
    
    .hero-link{
        font-size:.9rem;
        margin-bottom:2rem;
    }
    .hero-stats{
        gap:1rem;
        grid-template-columns:repeat(2, 1fr);
        margin-top:2rem;
    }
    
    .stat-card{
        padding:1.5rem 1rem;
    }
    
    .stat-value{
        font-size:2rem;
    }
    
    .stat-label{
        font-size:.7rem;
    }
    .features-grid{
        gap:1.5rem;
        grid-template-columns:1fr;
    }
    
    .feature-card{
        padding:2rem 1.5rem;
    }
    
    .feature-title{
        font-size:1.25rem;
    }
    .services-grid{
        gap:1.5rem;
        grid-template-columns:1fr;
    }
    
    .service-card{
        padding:2rem;
    }
    
    .service-card.featured{
        transform:scale(1);
    }
    .section-header{
        margin-bottom:2.5rem;
    }
    
    .section-title{
        font-size:clamp(1.75rem, 5vw, 2.25rem) !important;
    }
    .btn-lg,.cta-button,.section-subtitle{
        font-size:1rem;
    }
    .btn-lg,.cta-button{
        padding:.875rem 2rem;
    }
    .locations-grid{
        gap:1rem;
        grid-template-columns:repeat(2, 1fr);
    }
    
    .location-card{
        padding:1.25rem;
    }
    .global-infrastructure-section{
        padding:4rem 0;
    }
    
    .infrastructure-header{
        margin-bottom:3rem;
    }
    
    .availability-badge{
        height:100px;
        width:100px;
    }
    
    .availability-count{
        font-size:2rem;
    }
    
    .availability-label{
        font-size:.7rem;
    }
    
    .infrastructure-title{
        font-size:1.75rem;
    }
    
    .infrastructure-description{
        font-size:1rem;
    }
    
    .map-container{
        min-height:480px;
        padding:2rem 0 7rem;
    }
    
    .pin-dot,.pin-dot:after{
        height:6px;
        width:6px;
    }
    
    @keyframes glowingPulse{
        0%{
            height:6px;
            opacity:.8;
            width:6px;
        }
        50%{
            height:24px;
            opacity:.4;
            width:24px;
        }
        to{
            height:36px;
            opacity:0;
            width:36px;
        }
    }
    
    .pin-tooltip{
        padding:.5rem 1rem;
        transform:translateX(-50%) translateY(-10px) scale(.9);
    }
    
    .map-pin:hover .pin-tooltip{
        transform:translateX(-50%) translateY(-8px) scale(.9);
    }
    
    .tooltip-flag{
        font-size:1.25rem;
    }
    
    .tooltip-flag.fi {
        width: 1.25rem;
        height: 0.9375rem;
    }
    
    .tooltip-text{
        font-size:.85rem;
    }
    .best-location-widget{
        bottom:1.5rem;
        max-width:95%;
        width:95%;
    }
    
    .widget-initial,.widget-result,.widget-testing{
        max-height:none;
        min-height:auto;
        padding:1rem;
    }
    
    .find-best-btn{
        font-size:.95rem;
        padding:.75rem 1.75rem;
    }
    
    .widget-refresh-btn{
        font-size:.85rem;
        height:28px;
        right:.5rem;
        top:.5rem;
        width:28px;
    }
    .top-locations{
        gap:.65rem;
        grid-template-columns:repeat(2, 1fr);
    }
    
    .location-item:nth-child(3){
        grid-column:1 /  -1;
    }
    
    .location-item{
        padding:.75rem .5rem;
    }
    
    .location-rank{
        font-size:.7rem;
        height:22px;
        left:.35rem;
        top:.35rem;
        width:22px;
    }
    
    .location-flag{
        font-size:1.75rem;
        margin:.3rem 0 .5rem;
    }
    
    .location-flag .fi {
        width: 1.75rem;
        height: 1.3125rem;
    }
    
    .location-name{
        font-size:.75rem;
    }
    
    .location-status{
        font-size:.6rem;
        margin-bottom:.35rem;
    }
    
    .location-ping{
        padding:.3rem .55rem;
    }
    
    .ping-value{
        font-size:1.05rem;
    }
    .get-started-section,.section-cta{
        padding:3rem 0 !important;
    }
    
    .cta-title,.get-started-title{
        font-size:clamp(1.5rem, 6vw, 2rem) !important;
        margin-bottom:1rem;
    }
    
    .cta-subtitle,.get-started-desc{
        font-size:.95rem;
        margin-bottom:2rem;
    }
    
    .get-started-steps{
        gap:1.25rem;
        margin-bottom:2rem;
    }
    
    .step-number{
        font-size:1.125rem;
        height:42px;
        width:42px;
    }
    
    .step-content h5{
        font-size:1rem;
    }
    
    .step-content p{
        font-size:.875rem;
    }
    
    .get-started-actions{
        flex-direction:column;
        gap:.875rem;
    }
    
    .get-started-actions .btn{
        justify-content:center;
        width:100%;
    }
    
    .get-started-visual{
        display:none;
    }
    .cta-badge{
        font-size:.75rem;
        padding:.4rem 1rem;
    }
    
    .cta-button{
        font-size:1rem;
        padding:.875rem 2rem;
        width:100%;
    }
    
    .cta-steps{
        flex-direction:column;
        gap:1.5rem;
        margin-top:3rem;
    }
    
    .cta-step-item{
        justify-content:center;
    }
    
    .cta-step-icon{
        font-size:1.125rem;
        height:44px;
        width:44px;
    }
    
    .cta-step-text{
        font-size:.875rem;
    }
    .testimonials-section{
        padding:3rem 0 !important;
    }
    
    .testimonials-section .section-header{
        margin-bottom:3rem;
    }
    
    .testimonials-section .section-title{
        font-size:clamp(1.75rem, 6vw, 2.25rem) !important;
    }
    
    .testimonials-section .section-subtitle{
        font-size:1rem;
    }
    .platform-ratings{
        gap:1.5rem;
        grid-template-columns:1fr;
        margin-bottom:2.5rem;
    }
    
    .platform-card{
        padding:2rem 1.5rem;
    }
    
    .platform-logo{
        width:100px;
    }
    
    .rating-value{
        font-size:1.75rem;
    }
    .reviews-slider-container{
        padding:10px 0;
    }
    
    .reviews-slider .swiper-slide{
        padding:10px;
    }
    
    .review-card{
        min-height:360px;
        padding:1.75rem 1.5rem;
    }
    
    .review-card-header{
        margin-bottom:1.5rem;
    }
    
    .review-avatar{
        font-size:1.25rem;
        height:50px;
        width:50px;
    }
    
    .review-author{
        font-size:1rem;
    }
    
    .review-title{
        font-size:1.0625rem;
        margin-bottom:1rem;
    }
    
    .review-text{
        font-size:.875rem;
        line-height:1.6;
    }
    
    .review-platform{
        font-size:1rem;
        padding-top:1rem;
    }
    .blog-news-section{
        padding:3rem 0 !important;
    }
    
    .blog-news-header-left h2{
        font-size:clamp(1.75rem, 6vw, 2rem);
    }
    
    .blog-view-all-btn{
        font-size:.95rem;
        padding:.875rem 1.75rem;
    }
    
    .blog-featured-post{
        margin-bottom:2rem;
    }
    
    .blog-featured-image{
        height:220px;
    }
    
    .blog-featured-content{
        padding:1.75rem 1.5rem;
    }
    
    .blog-featured-title{
        font-size:1.5rem;
    }
    
    .blog-side-posts{
        gap:1.25rem;
    }
    
    .blog-post-side-title{
        font-size:.95rem;
    }
    .blog-news-header{
        align-items:flex-start;
        flex-direction:column;
        gap:1.5rem;
        margin-bottom:2rem;
    }
    
    .blog-news-header-left h2{
        font-size:2rem;
    }
    
    .blog-news-header-right{
        width:100%;
    }
    
    .blog-view-all,.blog-view-all-btn{
        justify-content:center;
        width:100%;
    }
    
    .blog-featured-content,.blog-post-content{
        padding:1.5rem;
    }
    
    .blog-featured-title,.blog-post-title{
        font-size:1.25rem;
    }
    
    .blog-post-side{
        gap:1rem;
        padding:1.5rem;
    }
    
    .blog-arrow-icon{
        height:36px;
        width:36px;
    }
    .domain-banner{
        padding:5rem 0 3rem;
    }
    
    .search-wrapper{
        flex-direction:column;
        gap:.75rem;
    }
    
    .search-btn{
        justify-content:center;
        width:100%;
    }
    
    .result-header{
        flex-direction:column;
        gap:1rem;
        text-align:center;
    }
    
    .result-header h3{
        font-size:1.25rem;
    }
    
    .details-table td:first-child{
        font-size:.875rem;
        width:120px;
    }
    
    .tld-table-card{
        padding:1rem;
    }
    
    .tld-table td,.tld-table th{
        font-size:.875rem;
        padding:.75rem .5rem;
    }}

/* --- SMALL TABLET BREAKPOINT --- */

@media (max-width:767px){
    .d-md-none{ display:none; }
    .d-md-block{ display:block; }
    .section{
        padding:3rem 0;
    }
    .domain-premium-section{
        padding:2.5rem 0 !important;
    }
    
    .domain-premium-card{
        border-radius:16px;
        margin:0 .5rem;
    }
    .premium-visual-side{
        min-height:auto;
    }
    
    .premium-search-side,.premium-visual-side{
        padding:2rem 1.5rem;
    }
    
    .premium-globe-container{
        height:200px;
        margin:0 auto;
        width:200px;
    }
    
    .search-badge{
        font-size:.7rem;
        padding:.4rem .875rem;
    }
    
    .search-title{
        font-size:clamp(1.25rem, 5vw, 1.625rem) !important;
        margin-bottom:.5rem;
    }
    
    .search-subtitle{
        font-size:.875rem;
    }
    .search-box-wrapper{
        border-radius:12px;
        flex-direction:column;
    }
    
    .search-icon-wrapper{
        padding:1rem 1rem .5rem;
    }
    
    .premium-search-input{
        font-size:1rem;
        padding:.5rem 1rem;
    }
    
    .tld-select-wrapper{
        border-left:none;
        border-top:1px solid var(--border-color);
    }
    
    .premium-tld-select{
        font-size:.95rem;
        padding:.875rem 1rem;
        width:100%;
    }
    
    .premium-search-button{
        font-size:.95rem;
        justify-content:center;
        padding:1rem;
    }
    .quick-tlds{
        align-items:stretch;
        flex-direction:column;
        gap:.75rem;
    }
    
    .quick-tld-buttons{
        gap:.5rem;
        width:100%;
    }
    
    .quick-tld{
        flex:1;
        font-size:.8rem;
        min-width:0;
        padding:.5rem .75rem;
    }
    .search-features{
        flex-direction:column;
        gap:.75rem;
        margin-top:1.5rem;
        padding-top:1.5rem;
    }
    
    .feature-item{
        font-size:.8rem;
    }
    .floating-shape{
        display:none;
    }
    .features-grid,.services-grid{
        gap:1.5rem;
        grid-template-columns:1fr;
    }
    .services-grid{
        margin-top:2rem;
    }}

/* --- MOBILE BREAKPOINT --- */

@media (max-width:575px){
    .footer-col{
        flex:0 0 100%;
        max-width:100%;
    }
    .navbar-brand img{
        height:38px;
    }
    
    .navbar-actions{
        gap:.5rem;
    }
    
    .navbar-actions .btn{
        height:34px;
        min-width:34px;
        padding:.4rem;
    }
    
    .theme-toggle{
        height:22px;
        width:42px;
    }
    
    .theme-toggle-slider{
        height:16px;
        width:16px;
    }
    
    [data-theme=dark] .theme-toggle-slider{
        transform:translateX(20px);
    }}

/* --- EXTRA SMALL MOBILE BREAKPOINT --- */

@media (max-width:480px){
    .domain-premium-section{
        padding:2rem 0 !important;
    }
    
    .premium-search-side,.premium-visual-side{
        padding:1.75rem 1rem;
    }
    
    .premium-globe-container{
        height:160px;
        width:160px;
    }
    
    .search-title{
        font-size:1.25rem !important;
    }
    
    .search-subtitle{
        font-size:.8rem;
    }
    
    .quick-tld-buttons{
        flex-direction:column;
        gap:.5rem;
    }
    
    .quick-tld{
        text-align:center;
        width:100%;
    }
    
    .premium-search-input{
        font-size:.95rem;
    }
    .blog-news-section,.features-section,.get-started-section,.hero-section,.section,.services-overview,.stats-counter,.testimonials-section{
        padding:2.5rem 0 !important;
    }
    
    .container,.container-fluid{
        padding-left:.75rem;
        padding-right:.75rem;
    }
    .hero-title{
        font-size:clamp(1.5rem, 8vw, 2rem) !important;
    }
    
    .hero-subtitle{
        font-size:.95rem !important;
    }
    
    .hero-stats{
        gap:.875rem;
        grid-template-columns:1fr;
    }
    
    .stat-card{
        padding:1.25rem .875rem;
    }
    
    .stat-value{
        font-size:1.75rem;
    }
    
    .stat-label{
        font-size:.65rem;
    }
    .features-grid,.locations-grid,.services-grid,.stats-counter-grid{
        gap:1rem;
        grid-template-columns:1fr;
    }
    .feature-card{
        padding:1.75rem 1.25rem;
    }
    
    .feature-icon{
        height:60px;
        width:60px;
    }
    
    .feature-icon svg{
        height:30px;
        width:30px;
    }
    
    .feature-title{
        font-size:1.125rem;
    }
    
    .feature-desc{
        font-size:.875rem;
    }
    .service-card{
        padding:1.75rem 1.25rem;
    }
    
    .service-card.featured{
        transform:scale(1);
    }
    
    .service-name{
        font-size:1.25rem;
    }
    
    .service-description{
        font-size:.875rem;
    }
    .stats-counter-grid{
        gap:1.5rem;
    }
    
    .counter-value{
        font-size:2rem;
    }
    
    .counter-icon{
        height:50px;
        width:50px;
    }
    
    .counter-icon svg{
        height:28px;
        width:28px;
    }
    
    .counter-label{
        font-size:.85rem;
    }
    .section-title{
        font-size:clamp(1.5rem, 6vw, 1.875rem) !important;
        margin-bottom:.75rem;
    }
    
    .section-subtitle{
        font-size:.95rem;
    }
    .btn,.btn-lg,.cta-button,.get-started-actions .btn{
        font-size:.95rem;
        padding:.875rem 1.5rem;
        width:100%;
    }
    .navbar-menu{
        max-width:100vw;
        padding:4rem 1.5rem 2rem;
        width:100%;
    }
    .availability-badge{
        height:90px;
        width:90px;
    }
    
    .availability-count{
        font-size:1.75rem;
    }
    
    .map-container{
        min-height:420px;
        padding:1.5rem 0 6rem;
    }
    
    .best-location-widget{
        bottom:1rem;
    }
    
    .find-best-btn{
        font-size:.875rem;
        padding:.65rem 1.25rem;
    }
    
    .widget-hint{
        font-size:.75rem;
    }
    .top-locations{
        gap:.6rem;
        grid-template-columns:1fr;
    }
    
    .location-item:nth-child(3){
        grid-column:auto;
    }
    
    .location-item{
        padding:.65rem .5rem;
    }
    
    .location-flag{
        font-size:1.6rem;
        margin:.25rem 0 .4rem;
    }
    
    .location-flag .fi {
        width: 1.6rem;
        height: 1.2rem;
    }
    
    .location-name{
        font-size:.7rem;
    }
    
    .location-status{
        font-size:.575rem;
        margin-bottom:.3rem;
    }
    
    .location-ping{
        padding:.25rem .5rem;
    }
    
    .ping-value{
        font-size:.95rem;
    }
    
    .pin-tooltip{
        padding:.4rem .875rem;
    }
    
    .tooltip-text{
        font-size:.8rem;
    }
    
    .find-best-btn{
        font-size:.95rem;
        padding:.75rem 1.5rem;
    }
    
    .widget-hint{
        font-size:.8rem;
    }
    .get-started-section,.section-cta{
        padding:2.5rem 0 !important;
    }
    
    .cta-badge,.get-started-badge{
        font-size:.7rem;
        padding:.375rem .875rem;
    }
    
    .step-item-compact{
        gap:1rem;
    }
    
    .step-number{
        font-size:1rem;
        height:38px;
        width:38px;
    }}


/* ============================================
   30. PRINT STYLES
   Yazdırma İçin Özel Stiller
   ============================================ */

@media print{
        .btn,.footer,.navbar{
            display:none;
        }
        
        body{
            font-size:12pt;
        }
        
        a{
            text-decoration:underline;
        }
    }


/* ============================================
   31. MOBILE MENU FIX (CRITICAL PATCH)
   Mobil Menü & Light Mode Düzeltmeleri
   ============================================ */

@media (max-width: 991px) {
        
        /* 1. MENÜYÜ YAN ÇEKMECE (SIDEBAR) HALİNE GETİR */
        .navbar-menu {
            position: fixed !important;
            top: 0 !important;
            left: -100% !important;
            width: 320px !important;
            max-width: 85vw !important;
            height: 100vh !important;
            display: flex !important;
            flex-direction: column !important;
            padding: 5rem 1.5rem 2rem !important;
            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            z-index: 10005 !important;
            box-shadow: 10px 0 30px rgba(0,0,0,0.5) !important;
            background-color: #0f172a !important; 
            border-right: 1px solid rgba(255,255,255,0.05) !important;
        }
    
        /* Menü Aktif Olduğunda */
        .navbar-menu.active {
            left: 0 !important;
        }
    
        /* Link Renkleri (Varsayılan Dark) */
        .navbar-menu > li > a, 
        .navbar-menu > li > .nav-link {
            color: #cbd5e1 !important;
            border-bottom: 1px solid rgba(255,255,255,0.03) !important;
        }
    
        /* 2. LIGHT MODE İÇİN ÖZEL RENK DÜZELTMESİ */
        [data-theme="light"] .navbar-menu {
            background-color: #ffffff !important;
            border-right: 1px solid #e2e8f0 !important;
            box-shadow: 10px 0 30px rgba(0,0,0,0.1) !important;
        }
    
        /* Light Mode Link Renkleri */
        [data-theme="light"] .navbar-menu > li > a, 
        [data-theme="light"] .navbar-menu > li > .nav-link {
            color: #1e293b !important;
            border-bottom: 1px solid #f1f5f9 !important;
        }
    
        /* Light Mode Link Hover Durumu */
        [data-theme="light"] .navbar-menu > li > a:hover,
        [data-theme="light"] .navbar-menu > li > .nav-link:hover {
            color: #3b82f6 !important;
            background-color: rgba(59,130,246,0.05) !important;
        }
    
        /* Hamburger Butonu Light Mode */
        [data-theme="light"] .navbar-toggle span {
            background-color: #1e293b !important;
        }
    
        /* 3. MEGA MENÜ (AÇILIR MENÜ) DÜZELTMESİ */
        .mega-menu {
            position: static !important;
            width: 100% !important;
            box-shadow: none !important;
            background: rgba(255,255,255,0.03) !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
        }
    
        [data-theme="light"] .mega-menu {
            background: #f8fafc !important;
        }
    }

/* ============================================
   31. DOMAIN PAGE STYLES
   Professional Domain Registration Page
   ============================================ */

/* Domain Hero Section */
.domain-hero-section {
    position: relative;
    padding: 140px 0 100px;
    overflow: hidden;
    background: var(--bg-primary);
}

.domain-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.domain-hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.domain-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-primary);
    margin-bottom: 24px;
}

.domain-hero-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.domain-hero-gradient {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.domain-hero-subtitle {
    font-size: 20px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Domain Search Form */
.domain-search-form {
    margin-bottom: 30px;
}

.domain-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 8px 8px 8px 60px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px var(--shadow-color);
}

.domain-search-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.2);
}

.domain-search-icon {
    position: absolute;
    left: 24px;
    color: var(--text-muted);
    font-size: 20px;
}

.domain-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--text-primary);
    padding: 16px 0;
    outline: none;
}

.domain-search-input::placeholder {
    color: var(--text-muted);
}

.domain-search-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.domain-search-button:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* Domain Suggestions */
.domain-search-suggestions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
}

.suggestion-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.domain-suggestion {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.domain-suggestion:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* Domain Trust Badges */
.domain-trust-badges {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.trust-badge i {
    color: var(--color-secondary);
    font-size: 18px;
}

/* Domain Pricing Section */
.domain-pricing-section {
    padding: 100px 0;
    background: var(--bg-secondary);
}

.domain-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.domain-price-card {
    position: relative;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.domain-price-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px var(--shadow-color);
    border-color: var(--color-primary);
}

.domain-price-card.featured {
    border-color: var(--color-primary);
    box-shadow: 0 20px 60px rgba(59, 130, 246, 0.15);
}

.domain-featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.domain-extension {
    font-size: 48px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.domain-price {
    margin-bottom: 20px;
}

.price-currency {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-secondary);
    vertical-align: super;
}

.price-amount {
    font-size: 56px;
    font-weight: 800;
    color: var(--text-primary);
}

.price-period {
    font-size: 16px;
    color: var(--text-muted);
}

.domain-description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 24px;
    min-height: 48px;
}

.domain-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
}

.domain-features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.domain-features-list i {
    color: var(--color-secondary);
    font-size: 16px;
}

/* Domain Features Section */
.domain-features-section {
    padding: 100px 0;
    background: var(--bg-primary);
}

.domain-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.domain-feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.domain-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px var(--shadow-color);
}

.domain-feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    color: var(--color-primary);
}

.domain-feature-icon svg {
    width: 100%;
    height: 100%;
}

.domain-feature-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.domain-feature-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Domain Transfer Section */
.domain-transfer-section {
    padding: 100px 0;
    background: var(--bg-secondary);
}

.domain-transfer-content .section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.transfer-benefits {
    margin: 40px 0;
}

.transfer-benefit {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.benefit-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1));
    border-radius: 12px;
    color: var(--color-secondary);
    font-size: 20px;
}

.benefit-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.benefit-content p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* Transfer Steps */
.domain-transfer-steps {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
}

.transfer-step {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
    position: relative;
}

.transfer-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 50px;
    width: 2px;
    height: calc(100% + 8px);
    background: linear-gradient(180deg, var(--color-primary), transparent);
}

.transfer-step:last-child {
    margin-bottom: 0;
}

.step-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: white;
    font-size: 20px;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.step-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.step-content p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* TLD Table Section */
.domain-tld-table-section {
    padding: 100px 0;
    background: var(--bg-primary);
}

.tld-table-wrapper {
    margin-top: 60px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

.tld-table {
    width: 100%;
    border-collapse: collapse;
}

.tld-table thead {
    background: var(--bg-secondary);
}

.tld-table th {
    padding: 20px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tld-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.tld-table tbody tr:hover {
    background: var(--bg-secondary);
}

.tld-table td {
    padding: 20px;
    font-size: 15px;
    color: var(--text-secondary);
}

.tld-table td strong {
    color: var(--color-primary);
    font-size: 18px;
}

/* Domain FAQ Section */
.domain-faq-section {
    padding: 100px 0;
    background: var(--bg-secondary);
}

.faq-accordion {
    max-width: 900px;
    margin: 60px auto 0;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 8px 30px var(--shadow-color);
}

.faq-item.active {
    border-color: var(--color-primary);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    color: var(--color-primary);
}

.faq-question i {
    transition: transform 0.3s ease;
    color: var(--color-primary);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 28px 24px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
    margin: 0;
}

/* Domain CTA Section */
.domain-cta-section {
    padding: 100px 0;
    background: var(--bg-primary);
}

.domain-cta-card {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 24px;
    padding: 80px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.domain-cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></svg>');
    opacity: 0.4;
}

.domain-cta-content {
    position: relative;
    z-index: 1;
    margin-bottom: 50px;
}

.domain-cta-content h2 {
    font-size: 48px;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
}

.domain-cta-content p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
}

.domain-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.domain-cta-stats {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.cta-stat {
    text-align: center;
}

.cta-stat .stat-value {
    font-size: 42px;
    font-weight: 800;
    color: white;
    margin-bottom: 8px;
}

.cta-stat .stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

/* Light Mode Overrides */
[data-theme="light"] .domain-hero-section,
[data-theme="light"] .domain-features-section,
[data-theme="light"] .domain-tld-table-section,
[data-theme="light"] .domain-cta-section {
    background: #f8fafc;
}

[data-theme="light"] .domain-pricing-section,
[data-theme="light"] .domain-transfer-section,
[data-theme="light"] .domain-faq-section {
    background: #f1f5f9;
}

/* Responsive */
@media (max-width: 992px) {
    .domain-hero-title {
        font-size: 42px;
    }
    
    .domain-pricing-grid,
    .domain-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .domain-cta-card {
        padding: 60px 40px;
    }
    
    .domain-cta-content h2 {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .domain-hero-title {
        font-size: 32px;
    }
    
    .domain-hero-subtitle {
        font-size: 16px;
    }
    
    .domain-search-wrapper {
        flex-direction: column;
        padding: 20px;
    }
    
    .domain-search-icon {
        left: 20px;
        top: 28px;
    }
    
    .domain-search-input {
        padding: 12px 0 12px 40px;
    }
    
    .domain-search-button {
        width: 100%;
        justify-content: center;
    }
    
    .tld-table-wrapper {
        overflow-x: auto;
    }
    
    .domain-cta-actions {
        flex-direction: column;
    }
    
    .domain-cta-actions .btn {
        width: 100%;
    }
}

/* ============================================
   31. PRODUCT PAGES - ÜRÜN SAYFALARI (Domain, VPS, Hosting, vb.)
   Tüm ürün sayfalarında kullanılabilir genel bileşenler
   ============================================ */

/* 31.1 Sonuç Kartı Animasyonu (WHOIS, Ürün Sorguları İçin) */
@keyframes fadeInSlide {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-fade-in {
    animation: fadeInSlide 0.5s ease-out forwards;
}

/* 31.2 Yumuşak Arka Plan Renkleri (Badge'ler ve Durum Göstergeleri İçin) */
.bg-success-soft {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

.bg-danger-soft {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

.bg-warning-soft {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

.bg-info-soft {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="light"] .bg-success-soft {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

[data-theme="light"] .bg-danger-soft {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

/* 31.3 Fiyat Bloku Tipografi (Ürün Kartları İçin) */
.price-block h3,
.price-amount {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.5px;
    font-weight: var(--font-weight-bold);
}

/* 31.4 Responsive Buton ve Fiyat Düzenlemeleri */
@media (max-width: 991px) {
    .btn-lg {
        width: 100% !important;
    }
    
    .price-block {
        margin: 15px 0;
    }
}

/* 31.5 Küçük Yardımcı Sınıflar */
.fs-12 { font-size: 0.75rem; }
.fs-13 { font-size: 0.8125rem; }
.fs-14 { font-size: 0.875rem; }

.tracking-wide { letter-spacing: 0.05em; }

.text-break {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.font-monospace {
    font-family: var(--font-mono);
}


/* ============================================
   32. HOSTING PAGE
   Professional Hosting Page Design (Hostinger Style)
   ============================================ */

/* 32.1 Enhanced Hosting Hero Section */
.hosting-hero {
    padding: 8rem 0 2rem;
    position: relative;
    overflow: hidden;
    background: var(--bg-primary);
    min-height: 85vh;
    display: flex;
    align-items: center;
}

[data-theme="dark"] .hosting-hero {
    background: linear-gradient(135deg, rgba(15, 23, 42, 1), rgba(30, 41, 59, 0.8));
}

[data-theme="light"] .hosting-hero {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

/* Living Background - Arka plan animasyonları */
.hosting-hero .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hosting-hero .hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(59,130,246,.05) 1px, transparent 0), linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 0);
    background-size: 100px 100px;
    opacity: 0.6;
}

[data-theme="light"] .hosting-hero .hero-grid {
    background-image: linear-gradient(rgba(59,130,246,.1) 1px, transparent 0), linear-gradient(90deg, rgba(59,130,246,.1) 1px, transparent 0);
}

.hosting-hero .hero-gradient {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
    animation: pulse 8s ease-in-out infinite;
}

[data-theme="light"] .hosting-hero .hero-gradient {
    background: radial-gradient(circle, rgba(59,130,246,0.2) 0%, rgba(147,197,253,0.15) 50%, transparent 70%);
}

.hosting-hero .hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hosting-hero .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
    opacity: 0.4;
    animation: float-particle 15s infinite ease-in-out;
}

[data-theme="light"] .hosting-hero .particle {
    background: var(--color-primary);
    opacity: 0.3;
}

.hosting-hero .particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; animation-duration: 12s; }
.hosting-hero .particle:nth-child(2) { top: 40%; left: 80%; animation-delay: 2s; animation-duration: 15s; }
.hosting-hero .particle:nth-child(3) { top: 60%; left: 20%; animation-delay: 4s; animation-duration: 18s; }
.hosting-hero .particle:nth-child(4) { top: 80%; left: 70%; animation-delay: 1s; animation-duration: 14s; }
.hosting-hero .particle:nth-child(5) { top: 30%; left: 50%; animation-delay: 3s; animation-duration: 16s; }
.hosting-hero .particle:nth-child(6) { top: 70%; left: 40%; animation-delay: 5s; animation-duration: 13s; }
.hosting-hero .particle:nth-child(7) { top: 15%; left: 60%; animation-delay: 2.5s; animation-duration: 17s; }
.hosting-hero .particle:nth-child(8) { top: 50%; left: 90%; animation-delay: 4.5s; animation-duration: 19s; }

@keyframes float-particle {
    0%, 100% { transform: translate(0, 0); opacity: 0.4; }
    25% { transform: translate(20px, -30px); opacity: 0.6; }
    50% { transform: translate(-20px, -60px); opacity: 0.3; }
    75% { transform: translate(30px, -40px); opacity: 0.5; }
}

/* Hosting Hero İçin Sola Hizalı İçerik */
.hosting-hero .hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 500px;
}

.hosting-hero .hero-description {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 600px;
    text-align: left;
}

/* Hosting Hero İçin Badge ve Title */
.hosting-hero .badge-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

[data-theme="light"] .hosting-hero .badge-label {
    background: rgba(59, 130, 246, 0.08);
}

.hosting-hero .hero-title {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.15;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.gradient-text {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hareketli Gradient Text */
.gradient-text-animated {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease-in-out infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hosting-hero .hero-features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
}

.hosting-hero .hero-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.hosting-hero .hero-feature-item svg {
    flex-shrink: 0;
    color: var(--color-secondary);
}

.hosting-hero .hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* Trustpilot Widget */
.trustpilot-widget {
    margin-top: 3rem;
    padding: 1.5rem 3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    max-width: 100%;
}

[data-theme="dark"] .trustpilot-widget {
    background: rgba(30, 41, 59, 0.5);
}

.trustpilot-rating {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.trustpilot-rating .rating-text {
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.trustpilot-rating .stars {
    display: flex;
    gap: 0.125rem;
}

.trustpilot-rating .star {
    width: 20px;
    height: 20px;
}

.trustpilot-rating .rating-count {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
    white-space: nowrap;
}

.trustpilot-widget-center {
    display: inline-flex;
    justify-content: center;
    margin: 2rem auto 0 auto;
    min-width: 600px;
}

@media (max-width: 768px) {
    .trustpilot-widget-center {
        min-width: auto;
        width: 100%;
    }
    
    .trustpilot-widget {
        padding: 1.25rem 1.5rem;
        width: 100%;
    }
    
    .trustpilot-rating {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }
}

[data-theme="dark"] .trustpilot-rating .trustpilot-logo {
    opacity: 0.9;
}

.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    min-height: 500px;
}

/* Server Glow Background - Görsel Odak Noktası */
.server-glow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.6;
}

.server-illustration {
    width: 100%;
    height: 100%;
    animation: server-pulse 4s ease-in-out infinite;
    filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.3));
}

[data-theme="light"] .server-illustration {
    filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.2));
}

@keyframes server-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.hero-card-stack {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 400px;
    margin: 0 auto;
    z-index: 1;
}

.hosting-hero .stat-card {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-xl);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glassmorphism Effect - Geliştirilmiş Cam Efekti */
.hosting-hero .stat-card-glass {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .hosting-hero .stat-card-glass {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1.5px solid rgba(59, 130, 246, 0.2) !important;
    box-shadow: 
        0 8px 32px rgba(59, 130, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 0 0 1px rgba(59, 130, 246, 0.1);
}

.hosting-hero .stat-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 
        0 20px 60px rgba(59, 130, 246, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .hosting-hero .stat-card:hover {
    box-shadow: 
        0 20px 60px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hosting-hero .stat-card-1 {
    top: 20px;
    left: 0;
    width: 200px;
    z-index: 3;
    animation: float-card-1 6s ease-in-out infinite;
}

.hosting-hero .stat-card-2 {
    top: 140px;
    right: 0;
    width: 220px;
    z-index: 2;
    animation: float-card-2 7s ease-in-out infinite;
}

.hosting-hero .stat-card-3 {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    z-index: 1;
    animation: float-card-3 8s ease-in-out infinite;
}

/* Kartlar için hafif yüzme animasyonu */
@keyframes float-card-1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes float-card-2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes float-card-3 {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

.hosting-hero .stat-card .stat-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.hosting-hero .stat-data .stat-value {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.hosting-hero .stat-data .stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Giriş Animasyonları - Slide In Effects */
.animate-slide-in-left {
    opacity: 1;
}

.animate-slide-in-right {
    animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 32.2 Pricing Cards Section */
.hosting-pricing-cards {
    padding: 6rem 0 6rem;
    background: var(--bg-secondary);
}

[data-theme="dark"] .hosting-pricing-cards {
    background: rgba(30, 41, 59, 0.3);
}

.pricing-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.pricing-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
}

.pricing-card .btn {
    margin-bottom: 1.5rem;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
}

[data-theme="light"] .pricing-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured-plan {
    border-color: var(--color-primary);
    border-width: 2px;
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
}

.pricing-card.featured-plan:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 48px rgba(59, 130, 246, 0.3);
}

.popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    display: flex;
    align-items: center;
}

.discount-badge {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: white;
    white-space: nowrap;
}

.discount-badge-purple {
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.discount-badge-pink {
    background: linear-gradient(135deg, #ec4899, #e11d48);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
}

[data-theme="light"] .discount-badge-purple {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

[data-theme="light"] .discount-badge-pink {
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
    gap: 0.5rem;
}

.limited-offer-badge {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: var(--color-primary);
    padding: 4px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

[data-theme="light"] .limited-offer-badge {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(124, 58, 237, 0.08));
    border-color: rgba(139, 92, 246, 0.25);
}

.plan-header {
    margin-bottom: 1.5rem;
}

.plan-name {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.plan-tagline {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.plan-price {
    margin-bottom: 0;
}

.price-main {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.price-main .currency {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-right: 0.25rem;
}

.price-main .amount {
    font-size: 2.5rem;
    font-weight: var(--font-weight-extrabold);
    color: var(--text-primary);
    line-height: 1;
}

.price-main .period {
    font-size: 1rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.price-renew {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.price-original-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.price-original {
    font-size: 0.95rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.price-bonus {
    font-size: 0.875rem;
    color: var(--color-secondary);
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.price-details {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    line-height: 1.5;
}

.plan-features {
    list-style: none;
    padding: 1.5rem 0 0 0;
    margin: 0 0 2rem 0;
    border-top: 1px solid var(--border-color);
    flex-grow: 1;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--border-color);
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li i {
    color: var(--color-secondary);
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.pricing-note {
    margin-top: 3rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: var(--radius-lg);
}

.pricing-note p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.pricing-note i {
    color: var(--color-primary);
    margin-right: 0.5rem;
}

/* 32.25 Hosting Benchmark Section V2 - Minimal Style */
.hosting-benchmark-v2 {
    padding: 5rem 0 4rem;
    background: #ffffff;
}

[data-theme="dark"] .hosting-benchmark-v2 {
    background: var(--bg-primary);
}

.hosting-benchmark-v2 .section-header {
    max-width: 800px;
    margin: 0 auto 3rem;
}

/* Başlık ve açıklama sitenin varsayılan stillerini kullanır */

.benchmark-hint {
    color: #10b981;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 1rem;
}

/* Grid Layout - 2 Kolonlu */
.benchmark-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .benchmark-grid-v2 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.benchmark-col {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* Her Bir Satır */
.benchmark-row-v2 {
    display: flex;
    flex-direction: column;
}

.benchmark-brand {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.benchmark-brand .brand-logo {
    height: 32px;
    width: auto;
    max-width: 180px;
    font-family: inherit;
    color: var(--text-primary);
}

.benchmark-brand .brand-logo text {
    font-family: inherit;
}

.benchmark-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e3a5f;
    margin-left: auto;
    text-align: right;
    margin-bottom: 0.75rem;
}

[data-theme="dark"] .benchmark-value {
    color: var(--text-primary);
}

/* Logo ve Value aynı satırda */
.benchmark-row-v2 {
    position: relative;
}

.benchmark-row-v2 .benchmark-brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.benchmark-row-v2 .benchmark-value {
    margin: 0;
    font-size: 1.1rem;
}

/* Progress Bar */
.benchmark-bar-wrap {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

[data-theme="dark"] .benchmark-bar-wrap {
    background: rgba(148, 163, 184, 0.2);
}

.benchmark-bar {
    height: 100%;
    width: var(--progress);
    border-radius: 3px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    transition: width 1s ease-out;
}

.benchmark-bar.muted {
    background: #a3a38c;
}

[data-theme="dark"] .benchmark-bar.muted {
    background: #6b7280;
}

/* Featured Row (Rabisu) - Özel Gradient Bar */
.benchmark-bar.rabisu-bar {
    background: linear-gradient(90deg, #3b82f6 0%, #10b981 50%, #06d6a0 100%);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
    position: relative;
}

.benchmark-bar.rabisu-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Rabisu Logo Dark Mode */
[data-theme="dark"] .rabisu-logo text:last-child {
    fill: var(--text-primary);
}

/* Scale */
.benchmark-scale-v2 {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #94a3b8;
}

[data-theme="dark"] .benchmark-scale-v2 {
    color: var(--text-muted);
}

/* 32.3 Plan Comparison Table */
.plan-comparison-section {
    padding: 6rem 0;
    background: var(--bg-primary);
}

.comparison-table-wrapper {
    overflow-x: auto;
    margin-top: 3rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.comparison-table thead tr:first-child th {
    padding: 2rem 1.5rem 1rem;
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
}

[data-theme="dark"] .comparison-table thead tr:first-child th {
    background: rgba(30, 41, 59, 0.5);
}

.comparison-table .feature-column {
    text-align: left;
    min-width: 250px;
    font-weight: var(--font-weight-semibold);
}

.comparison-table .featured-column {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(16, 185, 129, 0.05));
    position: relative;
}

[data-theme="dark"] .comparison-table .featured-column {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.08));
}

.table-badge {
    position: absolute;
    top: -8px;
    right: 1rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

.comparison-table .price-row td {
    padding: 1.5rem;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.comparison-table .category-row td {
    padding: 1.25rem 1.5rem;
    background: var(--bg-secondary);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    border-top: 2px solid var(--border-color);
}

[data-theme="dark"] .comparison-table .category-row td {
    background: rgba(30, 41, 59, 0.3);
}

.comparison-table tbody tr td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-align: center;
}

.comparison-table tbody tr td:first-child {
    text-align: left;
    font-weight: var(--font-weight-medium);
}

.comparison-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.02);
}

.comparison-table .cta-row td {
    padding: 2rem 1.5rem;
    border-bottom: none;
}

/* Hidden Features (for collapsed state) */
.comparison-table .hidden-features {
    display: none;
}

#toggleFeaturesBtn {
    transition: all 0.3s ease;
}

#toggleFeaturesBtn i {
    transition: transform 0.3s ease;
    margin-right: 0.5rem;
}

#toggleFeaturesBtn.expanded i {
    transform: rotate(180deg);
}

/* ============================================
   PLATFORM RATINGS SIMPLE SECTION
   ============================================ */

.platform-ratings-simple {
    background: var(--bg-secondary);
    position: relative;
}

[data-theme="dark"] .platform-ratings-simple {
    background: rgba(30, 41, 59, 0.3);
}

[data-theme="light"] .platform-ratings-simple {
    background: #ffffff;
}

.ratings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

.rating-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: transparent;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.rating-card:hover {
    transform: translateY(-3px);
}

.platform-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    min-height: 40px;
}

.platform-logo svg {
    max-width: 100%;
    height: auto;
}

[data-theme="dark"] .platform-logo svg text tspan[fill="#1f1f1f"],
[data-theme="dark"] .platform-logo svg text tspan[fill="#2C3338"] {
    fill: #f8fafc !important;
}

.stars-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.stars-container i {
    color: #00b67a;
    font-size: 1.25rem;
}

[data-theme="light"] .stars-container i {
    color: #00b67a;
}

.rating-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.rating-score {
    color: var(--text-primary);
}

.rating-score strong {
    font-weight: var(--font-weight-bold);
}

.rating-count {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 991px) {
    .ratings-grid {
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .platform-ratings-simple {
        padding: 3rem 0;
    }
    
    .ratings-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 450px;
    }
    
    .rating-card {
        padding: 2rem 1.5rem;
    }
    
    .platform-logo {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .platform-ratings-simple {
        padding: 2.5rem 0;
    }
    
    .rating-card {
        padding: 1.75rem 1.25rem;
    }
    
    .platform-logo svg {
        transform: scale(0.9);
    }
    
    .stars-container i {
        font-size: 1.125rem;
    }
}

.text-success {
    color: var(--color-secondary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* 32.5 Migration Banner */
.migration-banner {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    position: relative;
    overflow: hidden;
}

.migration-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.migration-content {
    position: relative;
    z-index: 2;
}

.migration-text {
    color: white;
}

.migration-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    color: white;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.migration-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.migration-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.migration-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9375rem;
}

.migration-features li i {
    color: rgba(255, 255, 255, 1);
    font-size: 1.125rem;
}

.btn-light {
    background: white;
    color: var(--color-primary);
    border: 2px solid white;
}

.btn-light:hover {
    background: transparent;
    color: white;
    border-color: white;
}

/* 32.6 Technologies Section */
.technologies-section {
    padding: 5rem 0;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

.technologies-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.05), transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(16, 185, 129, 0.05), transparent 50%);
    pointer-events: none;
}

[data-theme="dark"] .technologies-section {
    background: rgba(30, 41, 59, 0.3);
}

[data-theme="light"] .technologies-section::before {
    background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.08), transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(16, 185, 129, 0.08), transparent 50%);
}

.tech-logos-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    margin: 3rem auto 0;
    position: relative;
    z-index: 1;
}

.tech-logo-item {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.tech-logo-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tech-logo-item:hover::before {
    opacity: 1;
}

.tech-logo-item:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2), 
                0 0 0 1px rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.4);
}

[data-theme="light"] .tech-logo-item {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .tech-logo-item:hover {
    background: white;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 
                0 0 0 1px rgba(59, 130, 246, 0.2);
}

.tech-logo-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    position: relative;
    z-index: 1;
}

.tech-logo-item:hover .tech-logo-icon {
    transform: scale(1.1) rotateY(5deg);
    filter: drop-shadow(0 8px 16px rgba(59, 130, 246, 0.3));
}

.tech-logo-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tech-logo {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.tech-name {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .tech-name {
    color: var(--color-gray-700);
}

/* Tech Logos - Large Screens */
@media (min-width: 1400px) {
    .tech-logos-grid {
        gap: 2.5rem;
    }
    
    .tech-logo-icon {
        width: 90px;
        height: 90px;
    }
    
    .tech-name {
        font-size: 1rem;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .tech-logos-grid {
        gap: 2rem;
    }
}

/* 32.7 FAQ Section */
.faq-section {
    padding: 6rem 0;
    background: var(--bg-primary);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.faq-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    transition: all 0.3s ease;
    gap: 1rem;
}

.faq-question:hover {
    color: var(--color-primary);
}

.faq-question span {
    flex: 1;
}

.faq-question svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--color-primary);
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 1.5rem 1.5rem;
}

.faq-answer p {
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
    font-size: 0.9375rem;
}

/* 32.8 Final CTA Section */
.final-cta-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    position: relative;
    overflow: hidden;
    text-align: center;
}

.final-cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.final-cta-section::after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.final-cta-content {
    position: relative;
    z-index: 2;
}

.final-cta-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: var(--font-weight-extrabold);
    color: white;
    margin-bottom: 1.5rem;
}

.final-cta-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 700px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

.final-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.btn-outline-light {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.btn-outline-light:hover {
    background: white;
    color: var(--color-primary);
}

.final-cta-trust {
    margin-top: 2rem;
}

.final-cta-trust p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.final-cta-trust .separator {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0.5rem;
}

.final-cta-trust i {
    color: rgba(255, 255, 255, 1);
}

/* 32.8 Responsive Design */
@media (max-width: 991px) {
    .hosting-hero {
        padding: 5rem 0 2rem;
    }
    
    .hosting-hero .hero-title {
        font-size: clamp(2rem, 5vw, 2.5rem);
    }
    
    .hosting-hero .hero-visual {
        margin-top: 3rem;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
    
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .hosting-hero {
        padding: 4rem 0 2rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .hosting-hero .hero-cta {
        flex-direction: column;
    }
    
    .hosting-hero .hero-cta .btn {
        width: 100%;
        justify-content: center;
    }
    
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* 32.14 Hosting Responsive Design */
@media (max-width: 1199px) {
    .comparison-table-wrapper {
        overflow-x: auto;
    }
    
    .comparison-table {
        min-width: 1000px;
    }
}

@media (max-width: 991px) {
    .hosting-hero {
        padding: 5rem 0 2rem;
        min-height: auto;
    }
    
    .hosting-hero .hero-content {
        min-height: auto;
        margin-bottom: 3rem;
    }
    
    .hosting-hero .hero-visual {
        min-height: auto;
    }
    
    .hosting-hero .hero-title {
        font-size: clamp(2rem, 5vw, 2.5rem);
    }
    
    .hero-card-stack {
        margin-top: 3rem;
    }
    
    /* Mobilde server illustration'ı küçült */
    .server-glow-bg {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.8);
    }
    
    .pricing-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tech-logos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    
    .tech-logo-icon {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 768px) {
    .hosting-hero {
        padding: 4rem 0 2rem;
    }
    
    /* Mobilde partikülleri azalt */
    .hosting-hero .particle:nth-child(n+5) {
        display: none;
    }
    
    /* Mobilde animasyonları yavaşlat */
    .animate-slide-in-left,
    .animate-slide-in-right {
        animation-duration: 0.6s;
    }
    
    .server-glow-bg {
        opacity: 0.3;
    }
    
    .hosting-hero .hero-features-list {
        grid-template-columns: 1fr;
    }
    
    .hosting-hero .hero-cta {
        flex-direction: column;
    }
    
    .hosting-hero .hero-cta .btn {
        width: 100%;
    }
    
    .why-grid {
        grid-template-columns: 1fr;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .tech-logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    
    .tech-logo-icon {
        width: 65px;
        height: 65px;
    }
    
    .tech-name {
        font-size: 0.875rem;
    }
    
    .comparison-table {
        font-size: 0.875rem;
    }
    
    .migration-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .pricing-card {
        padding: 2rem 1.5rem;
    }
    
    .price-main .amount {
        font-size: 2.25rem;
    }
    
    .hero-card-stack {
        padding: 1.5rem;
        height: 350px;
    }
    
    .hosting-hero .stat-card {
        padding: 1rem;
    }
    
    /* Mobilde kartları daha küçük yap */
    .hosting-hero .stat-card-1,
    .hosting-hero .stat-card-2,
    .hosting-hero .stat-card-3 {
        width: 160px !important;
    }
    
    /* Tech logos mobile */
    .tech-logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .tech-logo-icon {
        width: 60px;
        height: 60px;
    }
    
    .tech-name {
        font-size: 0.8rem;
    }
    
    .tech-logo-item {
        padding: 1.5rem 1rem;
    }
    
    .hosting-hero .stat-card .stat-icon {
        width: 40px;
        height: 40px;
    }
    
    .hosting-hero .stat-data .stat-value {
        font-size: 1.5rem;
    }
    
    .hosting-hero .stat-data .stat-label {
        font-size: 0.75rem;
    }
    
    /* Mobilde grid animasyonunu yavaşlat */
    .hosting-hero .hero-grid {
        animation-duration: 30s;
    }
    
    .final-cta-buttons {
        flex-direction: column;
    }
    
    .final-cta-buttons .btn {
        width: 100%;
    }
}

/* ============================================
   24/7 SUPPORT HERO SECTION
   ============================================ */

.support-hero-section {
    padding: 6rem 0;
    background: var(--bg-secondary);
    position: relative;
}

[data-theme="dark"] .support-hero-section {
    background: rgba(30, 41, 59, 0.3);
}

[data-theme="light"] .support-hero-section {
    background: #ffffff;
}

.support-content {
    padding-right: 2rem;
}

.support-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.support-description {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.support-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.support-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.feature-check {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="light"] .feature-check {
    background: linear-gradient(135deg, #3b82f6, #10b981);
}

.feature-check svg {
    color: white;
}

.feature-text {
    flex: 1;
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.feature-text strong {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.support-visual {
    position: relative;
}

.support-visual img {
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .support-visual img {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* ============================================
   INTERACTIVE FEATURES SHOWCASE
   ============================================ */

.features-showcase-section {
    padding: 6rem 0;
    background: var(--bg-secondary);
    position: relative;
}

[data-theme="dark"] .features-showcase-section {
    background: rgba(30, 41, 59, 0.3);
}

[data-theme="light"] .features-showcase-section {
    background: #ffffff;
}

.showcase-content {
    position: relative;
}

.showcase-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.showcase-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.showcase-features-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.showcase-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

[data-theme="dark"] .showcase-feature-item {
    background: rgba(30, 41, 59, 0.4);
}

[data-theme="light"] .showcase-feature-item {
    background: rgba(248, 250, 252, 0.6);
}

.showcase-feature-item:hover {
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateX(8px);
}

.showcase-feature-item.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    border-color: var(--color-primary);
}

[data-theme="light"] .showcase-feature-item.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.08));
    border-color: #3b82f6;
}

.feature-icon-wrapper {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.showcase-feature-item.active .feature-icon-wrapper {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

[data-theme="light"] .showcase-feature-item.active .feature-icon-wrapper {
    background: linear-gradient(135deg, #3b82f6, #10b981);
}

.feature-icon-wrapper svg {
    color: var(--color-primary);
}

.showcase-feature-item.active .feature-icon-wrapper svg {
    color: white;
}

.feature-text-content {
    flex: 1;
}

.feature-text-content h4 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.feature-text-content p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

.showcase-visual {
    position: relative;
    min-height: 500px;
}

.showcase-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.showcase-screen.active {
    opacity: 1;
    visibility: visible;
}

.showcase-screen img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .showcase-screen img {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* Responsive Design */
@media (max-width: 991px) {
    .support-content {
        padding-right: 0;
        margin-bottom: 3rem;
    }
    
    .support-visual,
    .showcase-visual {
        margin-top: 2rem;
    }
    
    .showcase-visual {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .support-hero-section,
    .features-showcase-section {
        padding: 4rem 0;
    }
    
    .support-title,
    .showcase-title {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
    }
    
    .support-description,
    .showcase-subtitle {
        font-size: 1rem;
    }
    
    .support-features {
        gap: 1.25rem;
    }
    
    .feature-check {
        width: 28px;
        height: 28px;
    }
    
    .showcase-feature-item {
        padding: 1.25rem;
    }
    
    .feature-icon-wrapper {
        width: 42px;
        height: 42px;
    }
    
    .showcase-visual {
        min-height: 300px;
    }
    
    .features-showcase-section .mb-5 {
        margin-bottom: 2.5rem !important;
    }
}

@media (max-width: 576px) {
    .support-hero-section,
    .features-showcase-section {
        padding: 3rem 0;
    }
    
    .showcase-feature-item:hover {
        transform: translateX(4px);
    }
    
    .features-showcase-section .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    .showcase-title {
        font-size: 1.75rem;
    }
    
    .showcase-subtitle {
        font-size: 0.95rem;
    }
}

/* ============================================
   Minecraft Page
   ============================================ */

/* Platform Tags */
.minecraft-platform-tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.mc-tag {
    background: rgba(30, 58, 138, 0.4); /* Primary Blue basis */
    border: 1px solid rgba(59, 130, 246, 0.3); /* var(--color-primary) with opacity */
    color: var(--text-primary);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}

.mc-tag i {
    font-size: 0.8rem;
    color: var(--color-primary);
}

.mc-tag:hover {
    background: rgba(30, 58, 138, 0.6); /* Primary Blue basis */
    border-color: rgba(59, 130, 246, 0.5); /* var(--color-primary) with opacity */
    transform: translateY(-1px);
}

/* Trust Badge */
.mc-trust-badge {
    margin-top: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
}

.trust-stars {
    display: flex;
    gap: 0.2rem;
}

.trust-stars i {
    color: var(--color-secondary); /* #10b981 - Trustpilot yeşili benzeri */
    font-size: 1.1rem;
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.3)); /* var(--color-secondary) with opacity */
}

.trust-text {
    color: var(--text-muted);
}

.trust-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

.trust-brand {
    color: var(--text-secondary);
}

.trust-brand strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Reset & Base */
.minecraft-console-section {
    background: var(--bg-primary); /* Deep Carbon */
    min-height: 100vh;
    padding: 6rem 0 4rem;
    position: relative;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

/* Animated Background Glow */
.minecraft-console-section::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%); /* var(--color-primary) with opacity */
    pointer-events: none;
    will-change: opacity;
}

.minecraft-console-section::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: 10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%); /* Cyan accent with opacity */
    pointer-events: none;
}


/* Tumbling Cubes in Hero Section */
.mc-tumbling-cubes {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mc-tumbling-cube {
    position: absolute;
    width: 80px;
    height: 80px;
    transform-style: preserve-3d;
    animation: cubeTumble 12s ease-in-out infinite;
    will-change: transform; /* GPU acceleration */
    transition: animation-duration 0.5s ease;
}

.mc-tumbling-cube:nth-child(1) {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.mc-tumbling-cube:nth-child(2) {
    bottom: 20%;
    right: 12%;
    animation-delay: 2s;
}

/* RGB Dance Mode - Hızlı dönme */
.mc-tumbling-cube.rgb-dance {
    animation: cubeTumble 3s ease-in-out infinite !important;
}

@keyframes cubeTumble {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0px);
    }
    25% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(45deg) translateY(-15px);
    }
    50% {
        transform: rotateX(180deg) rotateY(180deg) rotateZ(90deg) translateY(0px);
    }
    75% {
        transform: rotateX(270deg) rotateY(270deg) rotateZ(135deg) translateY(-15px);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(180deg) translateY(0px);
    }
}

/* RGB Rainbow Animation - Hard-coded colors for rainbow effect */
@keyframes mcCubeRGB {
    0% {
        background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.15));
        box-shadow: 
            0 0 30px rgba(255, 0, 0, 0.6),
            inset 0 0 20px rgba(255, 0, 0, 0.2);
    }
    16.66% {
        background: linear-gradient(135deg, rgba(255, 165, 0, 0.3), rgba(255, 165, 0, 0.15));
        box-shadow: 
            0 0 30px rgba(255, 165, 0, 0.6),
            inset 0 0 20px rgba(255, 165, 0, 0.2);
    }
    33.33% {
        background: linear-gradient(135deg, rgba(255, 255, 0, 0.3), rgba(255, 255, 0, 0.15));
        box-shadow: 
            0 0 30px rgba(255, 255, 0, 0.6),
            inset 0 0 20px rgba(255, 255, 0, 0.2);
    }
    50% {
        background: linear-gradient(135deg, rgba(0, 255, 0, 0.3), rgba(0, 255, 0, 0.15));
        box-shadow: 
            0 0 30px rgba(0, 255, 0, 0.6),
            inset 0 0 20px rgba(0, 255, 0, 0.2);
    }
    66.66% {
        background: linear-gradient(135deg, rgba(0, 127, 255, 0.3), rgba(0, 127, 255, 0.15));
        box-shadow: 
            0 0 30px rgba(0, 127, 255, 0.6),
            inset 0 0 20px rgba(0, 127, 255, 0.2);
    }
    83.33% {
        background: linear-gradient(135deg, rgba(139, 0, 255, 0.3), rgba(139, 0, 255, 0.15));
        box-shadow: 
            0 0 30px rgba(139, 0, 255, 0.6),
            inset 0 0 20px rgba(139, 0, 255, 0.2);
    }
    100% {
        background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.15));
        box-shadow: 
            0 0 30px rgba(255, 0, 0, 0.6),
            inset 0 0 20px rgba(255, 0, 0, 0.2);
    }
}

/* Performance: Reduce motion on low-end devices */
@media (prefers-reduced-motion: reduce) {
    .mc-tumbling-cube {
        animation-duration: 20s;
    }
}

/* Hide 3D elements on mobile for better performance */
@media (max-width: 768px) {
    .mc-tumbling-cube,
    #steveContainer,
    .mc-dance-btn {
        display: none !important;
    }
    
    .mc-hero-content {
        max-width: 100% !important;
    }
}

/* Cube Faces - Optimized */
.mc-cube-face {
    position: absolute;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(6, 182, 212, 0.15)); /* var(--color-primary) & cyan with opacity */
    border: 1px solid rgba(59, 130, 246, 0.4); /* var(--color-primary) with opacity */
    box-shadow: 
        0 0 20px rgba(59, 130, 246, 0.3), /* var(--color-primary) with opacity */
        inset 0 0 15px rgba(255, 255, 255, 0.1); /* var(--color-white) with opacity */
    will-change: transform;
    transition: all 0.3s ease;
}

/* RGB Mode - Dans sırasında */
.mc-cube-face.rgb-mode {
    animation: mcCubeRGB 2s linear infinite;
    border-color: rgba(255, 255, 255, 0.6); /* var(--color-white) with opacity */
}

.mc-cube-face.front {
    transform: translateZ(40px);
}

.mc-cube-face.back {
    transform: translateZ(-40px) rotateY(180deg);
}

.mc-cube-face.left {
    transform: translateX(-40px) rotateY(-90deg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(6, 182, 212, 0.18)); /* var(--color-primary) & cyan with opacity */
}

.mc-cube-face.right {
    transform: translateX(40px) rotateY(90deg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(6, 182, 212, 0.18)); /* var(--color-primary) & cyan with opacity */
}

.mc-cube-face.top {
    transform: translateY(-40px) rotateX(90deg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.15)); /* var(--color-primary) & cyan with opacity */
}

.mc-cube-face.bottom {
    transform: translateY(40px) rotateX(-90deg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.1)); /* var(--color-primary) & cyan with opacity */
}

/* RGB Mode - Her yüz için farklı gecikme */
.mc-cube-face.rgb-mode.front {
    animation-delay: 0s;
}

.mc-cube-face.rgb-mode.back {
    animation-delay: 0.3s;
}

.mc-cube-face.rgb-mode.left {
    animation-delay: 0.6s;
}

.mc-cube-face.rgb-mode.right {
    animation-delay: 0.9s;
}

.mc-cube-face.rgb-mode.top {
    animation-delay: 1.2s;
}

.mc-cube-face.rgb-mode.bottom {
    animation-delay: 1.5s;
}

.minecraft-console-container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   HERO SECTION - SHARP & ANGULAR
   ============================================ */

.mc-console-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 60px;
    min-height: 550px;
}

/* Platform Badge */
.mc-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(59, 130, 246, 0.08); /* var(--color-primary) with opacity */
    border: 1px solid rgba(59, 130, 246, 0.5); /* var(--color-primary) with opacity */
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.4); /* var(--color-primary) with opacity */
}

.mc-platform-badge svg {
    width: 14px;
    height: 14px;
}

/* Main Title */
.mc-hero-title {
    font-size: 68px;
    font-weight: 900;
    line-height: 0.95;
    color: var(--text-primary);
    margin: 0 0 18px 0;
    text-transform: uppercase;
    letter-spacing: -3px;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
}

.mc-hero-title-gradient {
    display: block;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.6));
    margin-top: 6px;
}

.mc-hero-subtitle {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 0 32px 0;
    max-width: 520px;
    font-weight: 400;
}

/* CTA Button */
.mc-console-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 38px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 35px rgba(59, 130, 246, 0.5);
    position: relative;
    overflow: hidden;
}

.mc-console-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.mc-console-cta:hover::before {
    left: 100%;
}

.mc-console-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 60px rgba(59, 130, 246, 0.8);
}

/* Bento Grid - Kompakt Feature Layout */
.mc-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 0;
}

.mc-bento-item {
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.15);
    padding: 24px 20px;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.mc-bento-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mc-bento-item:hover::before {
    border-color: var(--color-primary);
    opacity: 1;
    box-shadow: inset 0 0 30px rgba(59, 130, 246, 0.2), 0 0 30px rgba(59, 130, 246, 0.5);
}

.mc-bento-item:hover {
    background: rgba(20, 20, 20, 0.8);
    transform: translateY(-6px);
    border-color: rgba(59, 130, 246, 0.4);
}

.mc-bento-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    color: var(--color-primary);
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.6));
    transition: all 0.4s ease;
}

.mc-bento-item:hover .mc-bento-icon {
    filter: drop-shadow(0 0 25px rgba(59, 130, 246, 1));
    transform: scale(1.15) rotate(-8deg);
}

.mc-bento-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.mc-bento-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.mc-bento-item-large {
    grid-column: span 2;
}

/* ============================================
   HERO VISUAL - Grid Background + Character
   ============================================ */

.mc-hero-visual {
    position: relative;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Grid Background Container - Optimized */
.mc-grid-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(rgba(59, 130, 246, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.06) 1px, transparent 1px);
    background-size: 50px 50px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    overflow: hidden;
    will-change: auto; /* Let browser decide optimization */
}

/* Grid Glow Effect */
.mc-grid-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    animation: gridPulse 4s ease-in-out infinite;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* 3D Steve Container - Three.js Canvas */
.mc-character-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 400px;
    min-height: 400px; /* Steve yüklenirken veya sekme değişince çökmesini önler */
    cursor: grab;
}

.mc-character-container:active {
    cursor: grabbing;
}

/* Three.js Canvas */
#steveCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Loading Indicator */
.mc-steve-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
}

.mc-steve-loading::after {
    content: '...';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Dance Button - XenForo Style Sweep Effect */
.mc-dance-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, var(--color-accent-pink) 100%); /* Purple to Pink gradient */
    border: none;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 20px rgba(139, 92, 246, 0.4),
        0 0 0 0 rgba(139, 92, 246, 0.5);
    opacity: 0;
    animation: 
        mcDanceBtnFadeIn 0.5s ease 1s forwards,
        mcButtonPulseGlow 2s ease-in-out infinite;
    z-index: 10;
    position: relative;
    overflow: hidden;
}

/* XenForo Sweep Shine Effect */
.mc-dance-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: mcSweepShine 3s ease-in-out infinite;
}

/* Parlayan kenar efekti */
.mc-dance-btn::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        #8b5cf6, var(--color-accent-pink), var(--color-accent-orange), var(--color-secondary), var(--color-accent-blue), #8b5cf6
    ); /* Purple-Pink-Orange-Green-Cyan gradient for RGB animation */
    background-size: 300% 300%;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    z-index: -1;
    opacity: 0;
    filter: blur(8px);
    animation: mcRainbowGlow 3s linear infinite;
}

.mc-dance-btn:hover {
    transform: translateX(-50%) translateY(-3px) scale(1.05);
    box-shadow: 
        0 8px 30px rgba(139, 92, 246, 0.6),
        0 0 40px rgba(236, 72, 153, 0.4);
}

.mc-dance-btn:hover::after {
    opacity: 0.6;
}

.mc-dance-btn:active {
    transform: translateX(-50%) translateY(-1px) scale(0.98);
}

.mc-dance-btn svg {
    width: 16px;
    height: 16px;
    animation: mcMusicNote 1s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.mc-dance-btn span {
    position: relative;
    z-index: 1;
}

.mc-dance-btn.dancing {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent-blue) 100%);
    animation: mcDancingPulse 0.5s ease-in-out infinite;
}

.mc-dance-btn.dancing::before {
    animation: mcSweepShineFast 1s ease-in-out infinite;
}

.mc-dance-btn.dancing::after {
    opacity: 0.8;
    animation: mcRainbowGlow 1.5s linear infinite;
}

.mc-dance-btn.dancing svg {
    animation: mcMusicNoteFast 0.3s ease-in-out infinite;
}

@keyframes mcDanceBtnFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* XenForo Sweep Shine Animation */
@keyframes mcSweepShine {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

@keyframes mcSweepShineFast {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Rainbow Glow Effect */
@keyframes mcRainbowGlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Pulse Glow Effect */
@keyframes mcButtonPulseGlow {
    0%, 100% {
        box-shadow: 
            0 4px 20px rgba(139, 92, 246, 0.4),
            0 0 0 0 rgba(139, 92, 246, 0.5);
    }
    50% {
        box-shadow: 
            0 4px 20px rgba(139, 92, 246, 0.4),
            0 0 0 8px rgba(139, 92, 246, 0);
    }
}

@keyframes mcMusicNote {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

@keyframes mcMusicNoteFast {
    0%, 100% {
        transform: rotate(-15deg) scale(1.1);
    }
    50% {
        transform: rotate(15deg) scale(1.2);
    }
}

@keyframes mcDancingPulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 8px 40px rgba(16, 185, 129, 0.8);
    }
}


/* Stats Bar - Kompakt */
.mc-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 48px;
}

.mc-stat-box {
    background: rgba(20, 20, 20, 0.5);
    border: 1px solid rgba(59, 130, 246, 0.25);
    padding: 20px 16px;
    text-align: center;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: all 0.3s ease;
}

.mc-stat-box:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4), inset 0 0 20px rgba(59, 130, 246, 0.05);
    transform: translateY(-4px);
}

.mc-stat-value {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
    line-height: 1;
}

.mc-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

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

@media (max-width: 1200px) {
    .mc-console-hero {
        grid-template-columns: 1fr;
        gap: 50px;
        min-height: auto;
    }
    
    .mc-hero-visual {
        height: 400px;
    }
    
    .mc-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .mc-hero-title {
        font-size: 52px;
    }
    
    .mc-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .minecraft-console-section {
        padding: 40px 0 30px;
    }
    
    .minecraft-platform-tags {
        gap: 0.4rem;
        margin-bottom: 1.25rem;
        justify-content: flex-start;
    }
    
    .mc-tag {
        font-size: 0.7rem;
        padding: 0.35rem 0.8rem;
    }
    
    .mc-hero-title {
        font-size: 42px;
    }
    
    .mc-hero-visual {
        display: none;
    }
    
    .mc-bento-grid {
        grid-template-columns: 1fr;
    }
    
    .mc-bento-item-large {
        grid-column: span 1;
    }
    
    .mc-stats-bar {
        grid-template-columns: 1fr;
    }
    
    .mc-trust-badge {
        margin-top: 1.5rem;
        font-size: 0.875rem;
        justify-content: center;
    }
    
    .trust-stars i {
        font-size: 1rem;
    }
}

/* ============================================
   MINECRAFT BLOCK SVG ICONS
   ============================================ */

.mc-plan-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.4));
}

/* ============================================
   INTERACTIVE FEATURES SHOWCASE
   ============================================ */

.mc-features-showcase {
    margin: 80px 0;
}

.mc-showcase-header {
    text-align: center;
    margin-bottom: 50px;
}

.mc-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.mc-showcase-features-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mc-showcase-feature-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.15);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.mc-showcase-feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mc-showcase-feature-item:hover::before,
.mc-showcase-feature-item.active::before {
    border-color: var(--color-primary);
    opacity: 1;
    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.1), 0 0 30px rgba(59, 130, 246, 0.3);
}

.mc-showcase-feature-item:hover,
.mc-showcase-feature-item.active {
    background: rgba(20, 20, 20, 0.8);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateX(8px);
}

.mc-feature-icon-wrapper {
    width: 48px;
    height: 48px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.mc-showcase-feature-item.active .mc-feature-icon-wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.mc-feature-icon-wrapper svg {
    color: var(--color-primary);
    transition: all 0.3s ease;
}

.mc-showcase-feature-item.active .mc-feature-icon-wrapper svg {
    color: var(--text-primary);
}

.mc-feature-text-content h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mc-feature-text-content p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.mc-showcase-feature-item.active .mc-feature-text-content p {
    color: var(--text-muted);
}

/* Showcase Visual */
.mc-showcase-visual {
    position: relative;
    min-height: 500px;
}

.mc-showcase-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mc-showcase-screen.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.mc-showcase-screen svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.3));
}

/* Responsive */
@media (max-width: 992px) {
    .mc-features-showcase {
        margin: 60px 0;
    }
    
    .mc-showcase-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .mc-showcase-visual {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .mc-features-showcase {
        margin: 50px 0;
    }
    
    .mc-showcase-header {
        margin-bottom: 40px;
    }
    
    .mc-showcase-feature-item {
        padding: 20px;
        gap: 16px;
    }
    
    .mc-feature-icon-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .mc-feature-text-content h4 {
        font-size: 14px;
    }
    
    .mc-feature-text-content p {
        font-size: 12px;
    }
    
    .mc-showcase-visual {
        min-height: 300px;
    }
}

/* ============================================
   SUPPORTED SERVER TYPES - FULL WIDTH SECTION
   ============================================ */

.mc-supported-types-section {
    background-color: var(--bg-secondary); /* Solid fallback */
    background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 50%, #581c87 100%); /* Blue-Navy to Purple gradient - hard-coded special */
    padding: 100px 0;
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* Animated Gaming Glow - Left */
.mc-supported-types-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 800px;
    height: 800px;
    background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.25) 0%,
        rgba(59, 130, 246, 0.15) 30%,
        transparent 70%
    );
    pointer-events: none;
    animation: mcGamingGlowLeft 10s ease-in-out infinite alternate;
    filter: blur(40px);
}

/* Animated Gaming Glow - Right */
.mc-supported-types-section::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 900px;
    height: 900px;
    background: radial-gradient(
        circle,
        rgba(6, 182, 212, 0.2) 0%,
        rgba(16, 185, 129, 0.12) 30%,
        transparent 70%
    );
    pointer-events: none;
    animation: mcGamingGlowRight 12s ease-in-out infinite alternate;
    filter: blur(50px);
}

@keyframes mcGamingGlowLeft {
    0% {
        opacity: 0.6;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(30px, -30px) scale(1.1);
    }
}

@keyframes mcGamingGlowRight {
    0% {
        opacity: 0.5;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0.9;
        transform: translate(-40px, 40px) scale(1.15);
    }
}

.mc-supported-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Icon Grid Container - 3-4-3 Layout with Cards */
.mc-supported-icons-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

.mc-icon-row {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

.mc-row-3 {
    /* 3 icons centered relative to 4-icon row */
    justify-content: center;
}

.mc-row-4 {
    /* 4 icons aligned to start */
    justify-content: flex-start;
}

.mc-type-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    cursor: pointer;
}

/* Icon Card Container */
.mc-icon-card {
    width: 144px;
    height: 144px;
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid rgba(96, 165, 250, 0.2);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    box-sizing: border-box;
}

.mc-icon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
}

.mc-type-icon:hover .mc-icon-card::before {
    border-color: var(--color-primary-light);
    opacity: 1;
    box-shadow: 
        inset 0 0 30px rgba(96, 165, 250, 0.25),
        0 0 35px rgba(96, 165, 250, 0.6);
}

.mc-type-icon:hover .mc-icon-card {
    background: rgba(20, 20, 20, 0.8);
    border-color: rgba(96, 165, 250, 0.5);
    transform: translateY(-6px);
    box-shadow: 0 0 45px rgba(96, 165, 250, 0.4);
}

.mc-icon-card svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(96, 165, 250, 0.35));
    transition: filter 0.4s ease;
}

.mc-type-icon:hover .mc-icon-card svg {
    filter: drop-shadow(0 8px 25px rgba(96, 165, 250, 0.7));
}

.mc-type-icon span {
    display: block;
    font-size: 9px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6); /* var(--color-white) with opacity */
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 14px;
    transition: all 0.3s ease;
}

.mc-type-icon:hover span {
    color: var(--color-primary-light);
    transform: translateY(-2px);
}

/* Content Section */
.mc-supported-types-content {
    max-width: 100%;
}

.mc-supported-title {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 28px 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.mc-supported-title-gradient {
    display: block;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #22d3ee 100%); /* #22d3ee = Cyan-lighter */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(96, 165, 250, 0.6));
    margin-top: 6px;
}

.mc-supported-description {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8); /* var(--color-white) with opacity */
    margin: 0 0 18px 0;
}

.mc-supported-description strong {
    color: var(--text-primary);
    font-weight: 700;
}

.mc-highlight-blue {
    color: var(--color-primary-light) !important;
    font-weight: 700 !important;
}

.mc-supported-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: rgba(96, 165, 250, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.5);
    color: var(--color-primary-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: all 0.3s ease;
    margin-top: 24px;
    position: relative;
    overflow: hidden;
}

.mc-supported-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.mc-supported-cta-btn:hover::before {
    left: 100%;
}

.mc-supported-cta-btn:hover {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #22d3ee 100%); /* #22d3ee = Cyan-lighter */
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(96, 165, 250, 0.6);
}

.mc-supported-cta-btn svg {
    transition: transform 0.3s ease;
}

.mc-supported-cta-btn:hover svg {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1200px) {
    .mc-supported-types-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .mc-icon-row {
        justify-content: center;
    }
    
    .mc-supported-types-content {
        max-width: 100%;
        text-align: center;
    }
}

@media (max-width: 992px) {
    .mc-supported-types-section {
        padding: 80px 0;
    }
    
    .mc-supported-title {
        font-size: 36px;
    }
    
    .mc-icon-row {
        gap: 16px;
    }
    
    .mc-icon-card {
        width: 120px;
        height: 120px;
        padding: 22px;
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    }
    
    .mc-icon-card::before {
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    }
}

@media (max-width: 768px) {
    .mc-supported-types-section {
        padding: 60px 0;
    }
    
    .mc-supported-title {
        font-size: 30px;
        margin-bottom: 24px;
    }
    
    .mc-supported-description {
        font-size: 14px;
        margin-bottom: 16px;
    }
    
    .mc-supported-icons-container {
        gap: 16px;
    }
    
    .mc-icon-row {
        gap: 12px;
    }
    
    .mc-icon-card {
        width: 96px;
        height: 96px;
        padding: 18px;
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }
    
    .mc-icon-card::before {
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }
    
    .mc-type-icon span {
        font-size: 8px;
        letter-spacing: 1.5px;
        margin-top: 10px;
    }
    
    .mc-supported-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 10px;
    }
}

@media (max-width: 576px) {
    .mc-icon-row {
        gap: 10px;
    }
    
    .mc-icon-card {
        width: 84px;
        height: 84px;
        padding: 15px;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    }
    
    .mc-icon-card::before {
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    }
    
    .mc-type-icon span {
        font-size: 7px;
        letter-spacing: 1.2px;
    }
}

/* ============================================
   MINECRAFT INFORMATION SECTION
   ============================================ */

.mc-info-section {
    background: var(--bg-primary); /* Solid dark background */
    padding: 80px 0;
    margin: 0;
    position: relative;
}

.mc-info-row {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
}

.mc-info-row:last-child {
    margin-bottom: 0;
}

/* Reverse layout for alternating rows */
.mc-info-row-reverse {
    grid-template-columns: 1.5fr 0.5fr;
}

.mc-info-row-reverse .mc-info-text-box {
    order: 1;
}

.mc-info-row-reverse .mc-info-image-box {
    order: 2;
}

/* Image Box */
.mc-info-image-box {
    position: relative;
    width: 100%;
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    padding: 50px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.mc-info-image-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
}

.mc-info-image-box:hover {
    background: rgba(20, 20, 20, 0.8);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-6px);
}

.mc-info-image-box:hover::before {
    border-color: var(--color-primary);
    opacity: 1;
    box-shadow: inset 0 0 30px rgba(59, 130, 246, 0.15), 0 0 35px rgba(59, 130, 246, 0.4);
}

.mc-info-image-box img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 400px;
    margin: 0 auto;
    filter: drop-shadow(0 8px 25px rgba(59, 130, 246, 0.3));
    transition: all 0.4s ease;
}

.mc-info-image-box:hover img {
    filter: drop-shadow(0 12px 35px rgba(59, 130, 246, 0.5));
    transform: scale(1.02);
}

/* Text Box */
.mc-info-text-box {
    position: relative;
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    padding: 40px 35px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mc-info-text-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
}

.mc-info-text-box:hover {
    background: rgba(20, 20, 20, 0.8);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-6px);
}

.mc-info-text-box:hover::before {
    border-color: var(--color-primary);
    opacity: 1;
    box-shadow: inset 0 0 30px rgba(59, 130, 246, 0.15), 0 0 35px rgba(59, 130, 246, 0.4);
}

.mc-info-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.3));
}

.mc-info-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
    margin: 0 0 16px 0;
}

.mc-info-desc:last-child {
    margin-bottom: 0;
}

/* Custom List Styling */
.mc-info-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.mc-info-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
}

.mc-info-list li:last-child {
    margin-bottom: 0;
}

.mc-info-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .mc-info-row,
    .mc-info-row-reverse {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 50px;
    }
    
    .mc-info-row-reverse .mc-info-text-box,
    .mc-info-row-reverse .mc-info-image-box {
        order: initial;
    }
    
    .mc-info-title {
        font-size: 26px;
    }
}

@media (max-width: 992px) {
    .mc-info-section {
        padding: 60px 0;
    }
    
    .mc-info-row {
        margin-bottom: 40px;
    }
    
    .mc-info-image-box {
        padding: 45px;
    }
    
    .mc-info-image-box img {
        max-width: 350px;
    }
    
    .mc-info-text-box {
        padding: 35px 30px;
    }
    
    .mc-info-title {
        font-size: 24px;
        margin-bottom: 18px;
    }
    
    .mc-info-desc {
        font-size: 14px;
    }
    
    .mc-info-list li {
        font-size: 14px;
        margin-bottom: 14px;
    }
}

@media (max-width: 768px) {
    .mc-info-section {
        padding: 50px 0;
    }
    
    .mc-info-row {
        gap: 25px;
        margin-bottom: 35px;
    }
    
    .mc-info-image-box {
        padding: 40px;
        clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    }
    
    .mc-info-image-box::before {
        clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    }
    
    .mc-info-image-box img {
        max-width: 280px;
    }
    
    .mc-info-text-box {
        padding: 30px 25px;
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    }
    
    .mc-info-text-box::before {
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    }
    
    .mc-info-title {
        font-size: 22px;
        margin-bottom: 16px;
    }
    
    .mc-info-desc {
        font-size: 13px;
        margin-bottom: 14px;
    }
    
    .mc-info-list {
        margin: 16px 0;
    }
    
    .mc-info-list li {
        font-size: 13px;
        padding-left: 25px;
        margin-bottom: 12px;
    }
    
    .mc-info-list li::before {
        width: 14px;
        height: 14px;
        top: 7px;
    }
}

/* ============================================
   COMPARISON TABLE SECTION
   ============================================ */

.mc-comparison-section {
    background-color: var(--bg-primary); /* Solid dark background - prevents body color bleed */
    background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--bg-primary) 50%, var(--color-gray-800) 100%);
    padding: 100px 0;
    margin: 0; /* Remove margin to prevent gaps */
    position: relative;
    overflow: hidden;
}

.mc-comparison-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: floatGlow 8s ease-in-out infinite alternate;
}

.mc-comparison-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
    pointer-events: none;
    animation: floatGlow 10s ease-in-out infinite alternate-reverse;
}

@keyframes floatGlow {
    0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    100% { transform: translate(20px, -20px) scale(1.1); opacity: 1; }
}

.mc-comparison-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.mc-comparison-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--color-accent-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.mc-comparison-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1.2;
    max-width: 900px;
    margin: 0 auto;
    letter-spacing: -1px;
}

.mc-comparison-table-wrapper {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    border-radius: 12px;
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    backdrop-filter: blur(10px);
}

.mc-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.mc-comparison-table thead tr {
    background: rgba(20, 20, 20, 0.8);
}

.mc-comparison-table th {
    padding: 24px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2);
}

.mc-feature-col {
    text-align: left !important;
    width: 25%;
    min-width: 220px;
    padding-left: 30px !important;
}

.mc-host-col {
    width: 15%;
    min-width: 150px;
}

.mc-host-rabisu {
    background: rgba(59, 130, 246, 0.15);
    border-left: 3px solid var(--color-primary);
    border-right: 3px solid var(--color-primary);
    position: relative;
}

.mc-host-rabisu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-blue));
}

.mc-host-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-primary);
}

.mc-host-header i {
    color: #fbbf24; /* Gold/Yellow - CSS değişkeni yok, hard-coded tutuldu */
    font-size: 18px;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
    animation: trophyGlow 2s ease-in-out infinite;
}

@keyframes trophyGlow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.mc-comparison-table tbody tr {
    transition: all 0.3s ease;
}

.mc-comparison-table tbody tr:hover {
    background: rgba(20, 20, 20, 0.6);
}

.mc-comparison-table tbody tr:nth-child(even) {
    background: rgba(15, 15, 15, 0.3);
}

.mc-comparison-table tbody tr:nth-child(even):hover {
    background: rgba(20, 20, 20, 0.6);
}

.mc-comparison-table td {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.mc-feature-name {
    text-align: left !important;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    padding-left: 30px !important;
}

.mc-value {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.mc-value-best {
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid var(--color-primary);
    border-right: 3px solid var(--color-primary);
    position: relative;
}

.mc-value-best span {
    color: var(--text-primary);
    font-weight: 700;
}

.mc-value-best i {
    color: #fbbf24; /* Gold/Yellow - CSS değişkeni yok, hard-coded tutuldu */
    margin-right: 8px;
    font-size: 14px;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.4));
}

.mc-value-yes {
    color: var(--color-secondary);
}

.mc-value-yes i {
    color: #fbbf24 !important;
}

.mc-value-no {
    color: var(--text-muted);
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .mc-comparison-title {
        font-size: 36px;
    }
    
    .mc-comparison-table th,
    .mc-comparison-table td {
        padding: 16px 12px;
        font-size: 13px;
    }
    
    .mc-feature-col {
        min-width: 180px;
    }
    
    .mc-host-col {
        min-width: 120px;
    }
}

@media (max-width: 992px) {
    .mc-comparison-section {
        padding: 80px 0;
        margin: 0;
    }
    
    .mc-comparison-title {
        font-size: 32px;
    }
    
    .mc-comparison-table-wrapper {
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    }
}

@media (max-width: 768px) {
    .mc-comparison-section {
        padding: 60px 0;
        margin: 0;
    }
    
    .mc-comparison-header {
        margin-bottom: 40px;
    }
    
    .mc-comparison-title {
        font-size: 26px;
    }
    
    .mc-comparison-table th,
    .mc-comparison-table td {
        padding: 14px 10px;
        font-size: 12px;
    }
    
    .mc-feature-col {
        min-width: 160px;
        padding-left: 20px !important;
    }
    
    .mc-feature-name {
        font-size: 13px;
        padding-left: 20px !important;
    }
    
    .mc-host-col {
        min-width: 100px;
    }
    
    .mc-host-header {
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
    }
    
    .mc-host-header i {
        font-size: 14px;
    }
    
    .mc-value-best i {
        font-size: 12px;
    }
}

/* ============================================
   MINECRAFT PRICING PLANS
   ============================================ */

.mc-pricing-section {
    margin-top: 70px;
    margin-bottom: 50px;
}

.mc-section-header {
    text-align: center;
    margin-bottom: 40px;
}

.mc-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.mc-section-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 14px 0;
    letter-spacing: -1px;
}

.mc-section-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Pricing Grid */
.mc-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* Pricing Card */
.mc-pricing-card {
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    padding: 20px 16px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.mc-pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    opacity: 0;
    transition: all 0.4s ease;
}

.mc-pricing-card:hover {
    background: rgba(20, 20, 20, 0.8);
    transform: translateY(-6px);
    border-color: rgba(59, 130, 246, 0.5);
}

.mc-pricing-card:hover::before {
    border-color: var(--color-primary);
    opacity: 1;
    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.15), 0 0 30px rgba(59, 130, 246, 0.4);
}

/* Recommended Badge */
.mc-pricing-card.recommended {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(20, 20, 20, 0.8);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
}

.mc-recommended-badge {
    position: absolute;
    top: -1px;
    right: 20px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    color: var(--text-primary);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 14px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* Plan Header */
.mc-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mc-plan-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.mc-plan-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Plan-specific Name Colors */
.mc-pricing-card:nth-child(1) .mc-plan-name { color: var(--color-gray-400); } /* STONE - Gray */
.mc-pricing-card:nth-child(2) .mc-plan-name { color: #F97316; } /* IRON - Orange (Hard-coded özel turuncu) */
.mc-pricing-card:nth-child(3) .mc-plan-name { color: #FBBF24; } /* GOLD - Yellow (Hard-coded altın sarısı) */
.mc-pricing-card:nth-child(4) .mc-plan-name { color: var(--color-accent-red); } /* REDSTONE - Red */

/* Second Row Colors */
.mc-pricing-grid:nth-of-type(2) .mc-pricing-card:nth-child(1) .mc-plan-name { color: var(--color-accent-blue); } /* DIAMOND - Cyan */
.mc-pricing-grid:nth-of-type(2) .mc-pricing-card:nth-child(2) .mc-plan-name { color: var(--color-secondary); } /* EMERALD - Green */
.mc-pricing-grid:nth-of-type(2) .mc-pricing-card:nth-child(3) .mc-plan-name { color: #A855F7; } /* AMETHYST - Purple (Hard-coded özel mor) */
.mc-pricing-grid:nth-of-type(2) .mc-pricing-card:nth-child(4) .mc-plan-name { color: #38BDF8; } /* BEACON - Sky Blue (Hard-coded özel mavi) */

.mc-plan-ram {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
}

.mc-plan-icon {
    width: 68px;
    height: 68px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
    flex-shrink: 0;
}

.mc-pricing-card:hover .mc-plan-icon {
    transform: rotateY(180deg);
}

/* Plan Features */
.mc-plan-features {
    margin-bottom: 16px;
}

.mc-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.08);
    font-size: 13px;
    color: var(--text-muted);
}

.mc-feature-item:last-child {
    border-bottom: none;
}

.mc-feature-icon {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.mc-feature-icon svg {
    width: 100%;
    height: 100%;
}

.mc-feature-text {
    flex: 1;
}

.mc-feature-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Plan Footer */
.mc-plan-footer {
    text-align: center;
}

.mc-plan-price-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 6px;
}

.mc-plan-price {
    font-size: 28px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 3px;
    line-height: 1;
}

.mc-plan-period {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

.mc-plan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 20px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: all 0.3s ease;
    margin-top: 16px;
}

.mc-plan-button:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.mc-plan-button svg {
    width: 14px;
    height: 14px;
}

/* Responsive */
@media (max-width: 1200px) {
    .mc-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .mc-section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .mc-pricing-section {
        margin-top: 50px;
        margin-bottom: 40px;
    }
    
    .mc-section-header {
        margin-bottom: 30px;
    }
    
    .mc-pricing-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    
    .mc-section-title {
        font-size: 30px;
    }
    
    .mc-section-subtitle {
        font-size: 13px;
    }
    
    .mc-plan-info {
        gap: 3px;
    }
    
    .mc-plan-icon {
        width: 56px;
        height: 56px;
    }
    
    .mc-plan-ram {
        font-size: 20px;
    }
    
    .mc-plan-price {
        font-size: 24px;
    }
}

/* ============================================
   HARDWARE SPECS - ULTRA CLEAN
   ============================================ */

.mc-hardware-clean {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    margin: 70px 0;
    padding: 0;
}

.mc-hw-clean-item {
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s ease;
}

.mc-hw-clean-item:hover {
    transform: translateY(-4px);
}

.mc-hw-clean-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid rgba(59, 130, 246, 0.25);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.4s ease;
    position: relative;
}

.mc-hw-clean-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mc-hw-clean-item:hover .mc-hw-clean-icon {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
    transform: scale(1.08);
}

.mc-hw-clean-item:hover .mc-hw-clean-icon::before {
    opacity: 1;
}

.mc-hw-clean-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
    transition: all 0.4s ease;
}

.mc-hw-clean-item:hover .mc-hw-clean-icon svg {
    color: var(--color-primary-light);
    filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.8));
    transform: scale(1.1);
}

.mc-hw-clean-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mc-hw-clean-title {
    font-size: 18px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    line-height: 1.2;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.2));
    transition: filter 0.4s ease;
}

.mc-hw-clean-item:hover .mc-hw-clean-title {
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.5));
}

.mc-hw-clean-sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

.mc-hw-clean-item:hover .mc-hw-clean-sub {
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 1200px) {
    .mc-hardware-clean {
        gap: 60px;
    }
    
    .mc-hw-clean-icon {
        width: 56px;
        height: 56px;
    }
    
    .mc-hw-clean-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .mc-hw-clean-title {
        font-size: 16px;
    }
    
    .mc-hw-clean-sub {
        font-size: 12px;
    }
}

@media (max-width: 992px) {
    .mc-hardware-clean {
        gap: 40px;
        padding: 0 20px;
    }
    
    .mc-hw-clean-item {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .mc-hardware-clean {
        flex-direction: column;
        gap: 40px;
        margin: 50px 0;
    }
    
    .mc-hw-clean-item {
        width: 100%;
        max-width: 320px;
    }
}

/* ============================================
   PLAN SELECTOR HELPER CTA
   ============================================ */

.mc-plan-helper-cta {
    margin: 70px 0 60px;
    padding: 0;
}

.mc-helper-banner {
    background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 50%, #581c87 100%); /* Blue-Navy to Purple gradient - hard-coded special */
    padding: 45px 60px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 8px 40px rgba(59, 130, 246, 0.2);
}

.mc-helper-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.mc-helper-content h3 {
    font-size: 28px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.mc-helper-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75); /* var(--color-white) with opacity */
    margin: 0;
    line-height: 1.5;
}

.mc-helper-characters {
    position: relative;
    width: 280px;
    height: 120px;
    flex-shrink: 0;
}

.mc-helper-characters img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
}

.mc-helper-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.95);
    color: #1e3a8a; /* Dark Navy Blue - Hard-coded special */
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

.mc-helper-button:hover {
    background: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
    color: #1e3a8a; /* Dark Navy Blue - Hard-coded special */
}

.mc-helper-button svg {
    width: 16px;
    height: 16px;
}

/* Responsive */
@media (max-width: 1200px) {
    .mc-helper-banner {
        grid-template-columns: 1fr auto;
        gap: 30px;
        padding: 40px 50px;
    }
    
    .mc-helper-characters {
        grid-column: 1 / 3;
        justify-self: center;
        order: -1;
    }
}

@media (max-width: 768px) {
    .mc-plan-helper-cta {
        margin: 50px 0 40px;
    }
    
    .mc-helper-banner {
        grid-template-columns: 1fr;
        padding: 30px 25px;
        text-align: center;
        gap: 20px;
    }
    
    .mc-helper-content h3 {
        font-size: 22px;
    }
    
    .mc-helper-content p {
        font-size: 13px;
    }
    
    .mc-helper-characters {
        width: 240px;
        height: 100px;
        order: -1;
        justify-self: center;
    }
    
    .mc-helper-button {
        justify-self: center;
        width: 100%;
        max-width: 280px;
    }
}

/* ============================================
   FAQ SECTION (Inside Comparison Section)
   ============================================ */

/* Reviews Container (Inside Comparison Section) */
.mc-reviews-container {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.mc-reviews-container .mc-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.mc-reviews-container .mc-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--color-secondary);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.mc-reviews-container .mc-section-badge svg {
    width: 16px;
    height: 16px;
}

.mc-reviews-container .mc-section-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.2;
}

.mc-reviews-container .mc-gradient-text {
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mc-reviews-container .mc-section-subtitle {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.mc-faq-container {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
}

.mc-comparison-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.mc-comparison-section .section-subtitle {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--color-primary-light);
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    text-transform: uppercase;
}

.mc-comparison-section .section-title {
    color: var(--text-primary);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mc-comparison-section .section-description {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive FAQ Container */
@media (max-width: 992px) {
    .mc-faq-container {
        margin-top: 60px;
        padding-top: 50px;
    }
    
    .mc-comparison-section .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 992px) {
    .mc-reviews-container {
        margin-top: 60px;
        padding-top: 50px;
    }
    
    .mc-reviews-container .mc-section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .mc-reviews-container {
        margin-top: 50px;
        padding-top: 40px;
    }
    
    .mc-reviews-container .mc-section-header {
        margin-bottom: 40px;
    }
    
    .mc-reviews-container .mc-section-title {
        font-size: 28px;
    }
    
    .mc-reviews-container .mc-section-subtitle {
        font-size: 16px;
    }
    
    .mc-faq-container {
        margin-top: 50px;
        padding-top: 40px;
    }
    
    .mc-comparison-section .section-title {
        font-size: 1.75rem;
    }
    
    .mc-comparison-section .section-description {
        font-size: 1rem;
    }
}

/* ============================================
   REVIEWS SECTION (Bağımsız)
   ============================================ */

.mc-reviews-section {
    padding: 100px 0;
    background: linear-gradient(180deg, 
        rgba(15, 23, 42, 0.4) 0%, 
        rgba(30, 41, 59, 0.6) 50%, 
        rgba(15, 23, 42, 0.4) 100%);
    position: relative;
    overflow: hidden;
}

.mc-reviews-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(59, 130, 246, 0.5) 50%, 
        transparent 100%);
}

.mc-reviews-section .mc-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.mc-reviews-section .mc-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--color-secondary);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.mc-reviews-section .mc-section-badge svg {
    width: 16px;
    height: 16px;
}

.mc-reviews-section .mc-section-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.2;
}

.mc-reviews-section .mc-gradient-text {
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mc-reviews-section .mc-section-subtitle {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive Reviews */
@media (max-width: 992px) {
    .mc-reviews-section {
        padding: 80px 0;
    }
    
    .mc-reviews-section .mc-section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .mc-reviews-section {
        padding: 60px 0;
    }
    
    .mc-reviews-section .mc-section-header {
        margin-bottom: 40px;
    }
    
    .mc-reviews-section .mc-section-title {
        font-size: 28px;
    }
    
    .mc-reviews-section .mc-section-subtitle {
        font-size: 16px;
    }
}

/* ============================================
   FAQ SECTION (Bağımsız)
   ============================================ */

.mc-faq-section {
    padding: 100px 0;
    background-color: var(--bg-primary); /* Solid dark background */
    background: linear-gradient(180deg, 
        #1e293b 0%, 
        #0f172a 100%);
    position: relative;
}

.mc-faq-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(139, 92, 246, 0.5) 50%, 
        transparent 100%);
}

.mc-faq-section .section-header {
    margin-bottom: 60px;
}

.mc-faq-section .section-subtitle {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #a855f7; /* Light Purple - Hard-coded special */
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 8px 20px;
    border-radius: 50px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.mc-faq-section .section-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mc-faq-section .section-description {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive FAQ */
@media (max-width: 992px) {
    .mc-faq-section {
        padding: 80px 0;
    }
    
    .mc-faq-section .section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .mc-faq-section {
        padding: 60px 0;
    }
    
    .mc-faq-section .section-header {
        margin-bottom: 40px;
    }
    
    .mc-faq-section .section-title {
        font-size: 28px;
    }
    
    .mc-faq-section .section-description {
        font-size: 16px;
    }
}

/* ============================================
   HERO LIVE STATS (VPS PAGE)
   Hosting Hero içindeki canlı sunucu istatistikleri
   ============================================ */

/* Ana container - hosting-hero içinde scope edildi */
.hosting-hero .hero-live-stats {
    position: relative;
    top: -1rem;
    z-index: 5;
    width: 100%;
    padding: 3rem 0 1rem 0; /* Üstte badge için boşluk */
}

/* Live Statistics Badge (Kartların Üstünde, Ayrı) */
.hosting-hero .hero-live-stats .live-stats-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-secondary);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
    z-index: 10;
}

[data-theme="light"] .hosting-hero .hero-live-stats .live-stats-badge {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1));
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
}

/* Pulse Effect for "LIVE" indicator */
.hosting-hero .hero-live-stats .live-pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--color-secondary);
    border-radius: 50%;
    animation: livePulseDot 1.5s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}

@keyframes livePulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Rotating Refresh Icon */
.hosting-hero .hero-live-stats .live-refresh-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: continuousRotate 2s linear infinite;
}

.hosting-hero .hero-live-stats .live-refresh-icon svg {
    width: 14px;
    height: 14px;
    color: var(--color-secondary);
}

@keyframes continuousRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Stats Grid - VPS hero için özel grid düzeni */
.hosting-hero .hero-live-stats .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* VPS Stat Card - hosting-hero içindeki diğer stat-card'lardan ayrı tutuldu */
.hosting-hero .hero-live-stats .stat-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    animation: none !important;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.25rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* VPS Stat Card - Light Mode */
[data-theme="light"] .hosting-hero .hero-live-stats .stat-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(59, 130, 246, 0.15);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
}

/* VPS Stat Card - Hover */
.hosting-hero .hero-live-stats .stat-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 48px rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.4);
}

[data-theme="light"] .hosting-hero .hero-live-stats .stat-card:hover {
    box-shadow: 0 16px 48px rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
}

/* VPS Hero Card Layouts */
.hosting-hero .hero-live-stats .cpu-card { grid-column: span 1; }
.hosting-hero .hero-live-stats .ram-card { grid-column: span 1; }
.hosting-hero .hero-live-stats .net-card { grid-column: span 1; }
.hosting-hero .hero-live-stats .storage-card { grid-column: span 1; }
.hosting-hero .hero-live-stats .full-width { grid-column: span 2; }

/* VPS Hero Icon Styling */
.hosting-hero .hero-live-stats .stat-icon-wrapper {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.1));
    color: #3b82f6;
    transition: all 0.3s ease;
}

[data-theme="light"] .hosting-hero .hero-live-stats .stat-icon-wrapper {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.08));
}

.hosting-hero .hero-live-stats .stat-card:hover .stat-icon-wrapper {
    background: linear-gradient(135deg, #3b82f6, #10b981);
    color: white;
    transform: rotate(5deg) scale(1.1);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

/* VPS Hero Content Styling */
.hosting-hero .hero-live-stats .stat-content {
    position: relative;
    z-index: 2;
    padding-right: 50px;
}

.hosting-hero .hero-live-stats .stat-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.hosting-hero .hero-live-stats .stat-main-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, var(--text-primary), rgba(59, 130, 246, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .hosting-hero .hero-live-stats .stat-main-value {
    background: linear-gradient(135deg, #1e293b, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hosting-hero .hero-live-stats .stat-sub-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.hosting-hero .hero-live-stats .stat-sub-details span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hosting-hero .hero-live-stats .stat-sub-details i {
    font-size: 0.7rem;
    color: #3b82f6;
}

/* VPS Hero Progress Bars */
.hosting-hero .hero-live-stats .stat-progress-bg {
    margin-top: 0.75rem;
    height: 5px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.hosting-hero .hero-live-stats .stat-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.hosting-hero .hero-live-stats .stat-progress-bar.warning {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* VPS Hero Badges */
.hosting-hero .hero-live-stats .badge-tech {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* VPS Hero Network Stats */
.hosting-hero .hero-live-stats .net-stats-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.hosting-hero .hero-live-stats .net-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hosting-hero .hero-live-stats .net-stat-item:last-child {
    border-bottom: none;
}

[data-theme="light"] .hosting-hero .hero-live-stats .net-stat-item {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.hosting-hero .hero-live-stats .net-label {
    color: var(--text-muted);
    font-weight: 500;
}

.hosting-hero .hero-live-stats .net-val {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.hosting-hero .hero-live-stats .net-val.in { 
    color: #3b82f6; 
}

.hosting-hero .hero-live-stats .net-val.out { 
    color: #10b981; 
}

.hosting-hero .hero-live-stats .net-val i {
    font-size: 0.7rem;
}

/* VPS Hero IO Card Layout */
.hosting-hero .hero-live-stats .stat-row-layout {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.hosting-hero .hero-live-stats .stat-row-layout .stat-icon-wrapper {
    position: static;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.hosting-hero .hero-live-stats .stat-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 1rem;
}

.hosting-hero .hero-live-stats .stat-group {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.hosting-hero .hero-live-stats .stat-group .stat-label {
    margin-bottom: 0.25rem;
}

.hosting-hero .hero-live-stats .stat-group .stat-main-value {
    margin-bottom: 0;
}

/* VPS Hero Status Badge */
.hosting-hero .hero-live-stats .status-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #10b981;
    font-size: 0.85rem;
}

.hosting-hero .hero-live-stats .status-dot {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.hosting-hero .hero-live-stats .status-dot.pulse {
    animation: vpsStatusPulse 2s infinite;
}

@keyframes vpsStatusPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* VPS Hero Text Colors */
.hosting-hero .hero-live-stats .text-success { 
    color: #10b981 !important;
    -webkit-text-fill-color: #10b981 !important;
}

/* VPS Hero Responsive */
@media (max-width: 1200px) {
    .hosting-hero .hero-live-stats {
        top: -0.75rem; /* Tablet'te biraz daha az yukarı */
        padding: 2.5rem 0 1rem 0;
    }
    
    .hosting-hero .hero-live-stats .stats-grid {
        gap: 12px;
    }
    
    .hosting-hero .hero-live-stats .stat-card {
        padding: 1rem;
    }
    
    .hosting-hero .hero-live-stats .stat-main-value {
        font-size: 1.4rem;
    }
    
    /* Live Stats Badge - Tablet */
    .hosting-hero .hero-live-stats .live-stats-badge {
        top: -0.25rem;
        padding: 0.4rem 0.875rem;
        font-size: 0.7rem;
    }
    
    .hosting-hero .hero-live-stats .live-pulse-dot {
        width: 7px;
        height: 7px;
    }
    
    .hosting-hero .hero-live-stats .live-refresh-icon svg {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 991px) {
    .hosting-hero .hero-live-stats {
        top: -0.5rem; /* Mobile'da daha az yukarı */
        margin-top: 2rem;
        padding: 2.5rem 0 1rem 0;
    }
    
    .hosting-hero .hero-live-stats .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hosting-hero .hero-live-stats {
        top: -0.25rem; /* Küçük mobile'da minimal yukarı */
        padding: 2.25rem 0 1rem 0;
    }
    
    .hosting-hero .hero-live-stats .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .hosting-hero .hero-live-stats .full-width {
        grid-column: span 1;
    }
    
    .hosting-hero .hero-live-stats .stat-row-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .hosting-hero .hero-live-stats .stat-content-row {
        flex-wrap: wrap;
        gap: 1rem;
        width: 100%;
    }
    
    .hosting-hero .hero-live-stats .stat-group {
        text-align: left;
        flex: 1;
        min-width: 80px;
    }
    
    .hosting-hero .hero-live-stats .stat-icon-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .hosting-hero .hero-live-stats .stat-row-layout .stat-icon-wrapper {
        width: 48px;
        height: 48px;
    }
    
    /* Live Stats Badge - Mobile */
    .hosting-hero .hero-live-stats .live-stats-badge {
        padding: 0.35rem 0.75rem;
        font-size: 0.65rem;
        gap: 0.375rem;
    }
    
    .hosting-hero .hero-live-stats .live-pulse-dot {
        width: 6px;
        height: 6px;
    }
    
    .hosting-hero .hero-live-stats .live-refresh-icon svg {
        width: 11px;
        height: 11px;
    }
}

@media (max-width: 576px) {
    .hosting-hero .hero-live-stats {
        top: 0; /* En küçük ekranlarda normal pozisyon */
        padding: 2rem 0 1rem 0;
    }
    
    .hosting-hero .hero-live-stats .stat-card {
        padding: 0.875rem;
    }
    
    .hosting-hero .hero-live-stats .stat-main-value {
        font-size: 1.25rem;
    }
    
    .hosting-hero .hero-live-stats .stat-label {
        font-size: 0.65rem;
    }
    
    /* Live Stats Badge - Small Mobile */
    .hosting-hero .hero-live-stats .live-stats-badge {
        top: 0;
        padding: 0.3rem 0.65rem;
        font-size: 0.6rem;
        gap: 0.3rem;
    }
    
    .hosting-hero .hero-live-stats .live-pulse-dot {
        width: 5px;
        height: 5px;
    }
    
    .hosting-hero .hero-live-stats .live-refresh-icon svg {
        width: 10px;
        height: 10px;
    }
}

/* ============================================
   DEDICATED SERVER PACKAGES - TABLE LAYOUT
   Clean & Professional Server Listing
   ============================================ */

.ds-packages-section {
    padding: 4rem 0;
    background: var(--bg-primary);
}

.ds-packages-header {
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.ds-packages-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Active Filters Display */
.ds-active-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0;
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
    animation: slideDown 0.3s ease;
}

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

.ds-active-filters-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ds-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary);
    transition: all 0.2s ease;
}

.ds-filter-badge:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
}

.ds-filter-badge-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    line-height: 1;
}

.ds-filter-badge-remove:hover {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1);
}

.ds-reset-filters {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ds-reset-filters:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ds-reset-filters svg {
    width: 14px;
    height: 14px;
}

.ds-packages-filters {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Filter Dropdown */
.ds-filter-dropdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ds-filter-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ds-dropdown-wrapper {
    position: relative;
}

.ds-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
    white-space: nowrap;
}

.ds-dropdown-btn:hover {
    border-color: var(--color-primary);
}

.ds-dropdown-wrapper.active .ds-dropdown-btn {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ds-dropdown-btn.has-filter {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ds-dropdown-btn svg:first-child {
    color: var(--color-primary);
    flex-shrink: 0;
}

.ds-dropdown-icon {
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.ds-dropdown-wrapper.active .ds-dropdown-icon {
    transform: rotate(180deg);
}

.ds-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    max-height: 300px;
    overflow-y: auto;
}

[data-theme="light"] .ds-dropdown-menu {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.ds-dropdown-wrapper.active .ds-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ds-dropdown-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid var(--border-color);
}

.ds-dropdown-option:last-child {
    border-bottom: none;
}

.ds-dropdown-option:hover {
    background: rgba(59, 130, 246, 0.05);
    color: var(--text-primary);
}

.ds-dropdown-option.selected {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: var(--color-primary);
    font-weight: 700;
    border-left: 3px solid var(--color-primary);
    padding-left: calc(1rem - 3px);
}

.ds-dropdown-option.selected::after {
    content: "✓";
    margin-left: auto;
    font-weight: 700;
    color: var(--color-primary);
}

.ds-dropdown-option svg,
.ds-dropdown-option .fi {
    flex-shrink: 0;
}

.ds-stock-toggle {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.ds-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    padding: 0.625rem 0;
}

.ds-toggle-label input[type="checkbox"] {
    display: none;
}

.ds-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
}

.ds-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-muted);
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
}

.ds-toggle-label input:checked + .ds-toggle-slider {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: var(--color-secondary);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.ds-toggle-label input:checked + .ds-toggle-slider::before {
    transform: translateX(20px);
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ds-toggle-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Packages List Layout */
.ds-packages-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Server Item (Oval Row Card) */
.ds-server-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px; /* Oval Corner */
    padding: 0;
    overflow: hidden;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
}

.ds-server-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
}

[data-theme="light"] .ds-server-item:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.ds-server-item.out-of-stock {
    opacity: 0.85;
}

/* Main Row Content */
.ds-item-main {
    display: grid;
    grid-template-columns: 1.5fr auto 2fr 1fr;
    gap: 1.5rem;
    padding: 1rem 1.5rem; /* Yükseklik düşürüldü */
    align-items: center;
}

/* 1. Server Info Section */
.ds-item-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* CPU Logo (Between Info and Specs) */
.ds-cpu-logo {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.15;
    transition: opacity 0.3s ease;
}

.ds-server-item:hover .ds-cpu-logo {
    opacity: 0.25;
}

.ds-cpu-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
}

.ds-item-details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ds-item-title {
    font-size: 1.25rem; /* Büyütüldü */
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
}

.ds-item-cpu {
    font-size: 1.1rem; /* Büyütüldü ve başlığa yaklaştırıldı */
    font-weight: 700;
    color: var(--text-primary); /* Renk başlıkla aynı yapıldı */
    font-family: var(--font-primary); /* Monospace kaldırıldı, modern font */
    line-height: 1.2;
}

.ds-item-tags {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.375rem;
    align-items: center;
}

.ds-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.ds-tag.location::after {
    content: "•";
    margin-left: 0.5rem;
    opacity: 0.4;
}

/* 2. Specs Grid Section */
.ds-item-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 0 1.5rem;
}

.ds-spec-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.ds-spec-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ds-spec-val {
    font-size: 1.35rem; /* Özellik fontu büyütüldü */
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

.ds-spec-lbl {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 3. Price & Action Section */
.ds-item-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.ds-price-box {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.ds-price-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.125rem;
}

.ds-price-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.125rem;
    color: var(--text-primary);
}

.ds-price-currency {
    font-size: 1rem;
    font-weight: 600;
}

.ds-price-amount {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.ds-price-period {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.ds-price-with-badge {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.125rem;
}

.ds-price-old {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.ds-order-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ds-order-btn:hover {
    background: var(--color-primary-dark);
    transform: none; /* No movement */
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.ds-order-btn:disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Discount Badge */
.ds-discount-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    margin-right: 0.5rem;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.ds-stock-status {
    color: var(--color-accent-orange);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.25rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .ds-item-main {
        grid-template-columns: 1.5fr 2fr 0.8fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .ds-item-specs {
        padding: 0 1.5rem;
        gap: 1rem;
    }
}

@media (max-width: 991px) {
    .ds-item-main {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .ds-item-specs {
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        padding: 1.5rem 0;
    }
    
    .ds-item-action {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .ds-price-box {
        text-align: left;
    }
    
    .ds-price-row {
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {
    .ds-item-specs {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .ds-spec-box {
        background: var(--bg-secondary);
        padding: 0.75rem;
        border-radius: 12px;
    }
}

/* Responsive */

@media (max-width: 991px) {
    .ds-packages-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ds-packages-filters {
        width: 100%;
        gap: 0.75rem;
    }
    
    .ds-filter-dropdown {
        flex: 1;
        min-width: 0;
    }
    
    .ds-dropdown-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 576px) {
    .ds-packages-section {
        padding: 3rem 0;
    }
    
    .ds-packages-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .ds-filter-dropdown {
        width: 100%;
    }
    
    .ds-dropdown-btn {
        font-size: 0.8125rem;
    }
    
    .ds-stock-toggle {
        width: 100%;
    }
    
    .ds-toggle-label {
        width: 100%;
        justify-content: space-between;
    }
    
    .ds-price-value {
        font-size: 1.25rem;
    }
}

.mc-final-cta-section {
    padding: 120px 0;
    background-color: var(--bg-primary); /* Solid dark background */
    background: radial-gradient(ellipse at center, 
        rgba(59, 130, 246, 0.15) 0%, 
        #1e293b 50%, 
        #0f172a 100%);
    position: relative;
    overflow: hidden;
}

.mc-final-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, 
        rgba(59, 130, 246, 0.2) 0%, 
        transparent 70%);
    pointer-events: none;
    animation: mcCtaPulse 4s ease-in-out infinite;
}

@keyframes mcCtaPulse {
    0%, 100% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1.1);
    }
}

.mc-final-cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.mc-final-cta-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 10px 40px rgba(59, 130, 246, 0.4),
        0 0 0 1px rgba(59, 130, 246, 0.2);
    animation: mcCtaIconFloat 3s ease-in-out infinite;
}

@keyframes mcCtaIconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.mc-final-cta-icon svg {
    width: 40px;
    height: 40px;
    color: var(--text-primary);
    stroke-width: 2.5;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.mc-final-cta-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.mc-final-cta-subtitle {
    font-size: 20px;
    color: var(--text-muted);
    margin-bottom: 40px;
    line-height: 1.6;
}

.mc-final-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.mc-final-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 
        0 10px 30px rgba(59, 130, 246, 0.4),
        0 0 0 1px rgba(59, 130, 246, 0.3);
    position: relative;
    overflow: hidden;
}

.mc-final-cta-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 100%);
    transition: left 0.5s ease;
}

.mc-final-cta-primary:hover::before {
    left: 100%;
}

.mc-final-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 15px 40px rgba(59, 130, 246, 0.5),
        0 0 0 1px rgba(59, 130, 246, 0.4);
}

.mc-final-cta-primary svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.mc-final-cta-primary:hover svg {
    transform: translateX(5px);
}

.mc-final-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 32px;
    background: rgba(59, 130, 246, 0.1);
    border: 2px solid rgba(59, 130, 246, 0.3);
    color: var(--color-primary-light);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.mc-final-cta-secondary:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
    color: var(--color-primary-light);
    transform: translateY(-2px);
}

.mc-final-cta-secondary svg {
    width: 20px;
    height: 20px;
}

.mc-final-cta-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.mc-final-stat {
    text-align: center;
}

.mc-final-stat-value {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1;
}

.mc-final-stat-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive Final CTA */
@media (max-width: 992px) {
    .mc-final-cta-section {
        padding: 100px 0;
    }
    
    .mc-final-cta-title {
        font-size: 40px;
    }
    
    .mc-final-cta-subtitle {
        font-size: 18px;
    }
    
    .mc-final-stat-value {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .mc-final-cta-section {
        padding: 80px 0;
    }
    
    .mc-final-cta-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }
    
    .mc-final-cta-icon svg {
        width: 30px;
        height: 30px;
    }
    
    .mc-final-cta-title {
        font-size: 32px;
    }
    
    .mc-final-cta-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .mc-final-cta-buttons {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 50px;
    }
    
    .mc-final-cta-primary,
    .mc-final-cta-secondary {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    
    .mc-final-cta-stats {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 30px;
    }
    
    .mc-final-stat-value {
        font-size: 28px;
    }
}

/* ============================================
   SECTION SPACING OPTIMIZATION
   ============================================ */

/* Tüm major section'lara standart spacing */
.minecraft-console-section,
.mc-comparison-section,
.mc-supported-types-section,
.global-infrastructure-section,
.mc-info-section,
.mc-faq-section,
.mc-final-cta-section {
    position: relative;
    isolation: isolate; /* Create stacking context */
}

/* Minecraft sayfası için Global Infrastructure override - Sadece dark temada */
[data-theme="dark"] .global-infrastructure-section {
    background: #0f172a !important; /* Force dark background */
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}

.global-infrastructure-section .infrastructure-title {
    color: var(--text-primary) !important;
}

.global-infrastructure-section .infrastructure-description {
    color: var(--text-muted) !important;
}

/* Minecraft sayfası için FAQ Section text color override */
.mc-faq-section .section-title {
    color: var(--text-primary) !important;
}

.mc-faq-section .section-description {
    color: var(--text-muted) !important;
}

/* Section geçiş animasyonları için hazırlık */
.minecraft-console-section,
.mc-comparison-section {
    scroll-margin-top: 80px; /* Sticky header için offset */
}

.mc-reviews-section {
    margin: 80px 0 60px 0;
    position: relative;
}

.mc-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

/* Review Card - Gaming Console Style */
.mc-review-card {
    background: #0a0a0a;
    border: 1px solid rgba(59, 130, 246, 0.2);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Glow Effect on Hover */
.mc-review-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.mc-review-card:hover {
    border-color: rgba(59, 130, 246, 0.6);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.25);
}

.mc-review-card:hover::before {
    opacity: 0.15;
}

/* Review Header */
.mc-review-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
}

.mc-review-avatar {
    width: 44px;
    height: 44px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #3b82f6;
}

.mc-review-info {
    flex: 1;
}

.mc-review-author {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.mc-review-stars {
    display: flex;
    gap: 4px;
}

.mc-review-stars i {
    color: #00b67a;
    font-size: 12px;
    filter: drop-shadow(0 0 4px rgba(0, 182, 122, 0.4));
}

.mc-review-platform {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 182, 122, 0.15);
    border: 1px solid rgba(0, 182, 122, 0.3);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

/* Review Content */
.mc-review-title {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

.mc-review-text {
    font-size: 13px;
    color: #9a9a9a;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

/* Review Footer */
.mc-review-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
    font-size: 11px;
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.mc-review-footer svg {
    color: #00b67a;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .mc-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .mc-reviews-section {
        margin: 60px 0 40px 0;
    }
    
    .mc-reviews-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .mc-review-card {
        padding: 20px;
    }
    
    .mc-review-title {
        font-size: 15px;
    }
    
    .mc-review-text {
        font-size: 12px;
    }
}

/* ============================================
   VPS LOCATIONS & LATENCY TEST SECTION
   ============================================ */
.vps-locations-section {
    padding: 5rem 0;
    background: var(--bg-secondary);
}

[data-theme="light"] .vps-locations-section {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Header */
.vps-locations-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.vps-locations-title-area {
    max-width: 600px;
}

.vps-locations-title-area .section-badge {
    margin-bottom: 1rem;
}

.vps-locations-title-area .section-title {
    margin-bottom: 0.5rem;
}

.vps-locations-title-area .section-subtitle {
    margin-bottom: 0;
}

/* Looking Glass Button */
.vps-lg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 12px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.vps-lg-btn:hover {
    background: linear-gradient(135deg, #3b82f6, #10b981);
    border-color: transparent;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.3);
}

.vps-lg-btn svg:last-child {
    transition: transform 0.3s ease;
}

.vps-lg-btn:hover svg:last-child {
    transform: translateX(4px);
}

[data-theme="light"] .vps-lg-btn {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

/* Location Cards Grid */
.vps-locations-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}

/* Location Card */
.vps-location-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .vps-location-card {
    background: white;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.vps-location-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.vps-location-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(59, 130, 246, 0.15);
}

.vps-location-card:hover::before {
    transform: scaleX(1);
}

[data-theme="light"] .vps-location-card:hover {
    box-shadow: 0 16px 40px rgba(59, 130, 246, 0.12);
}

/* Card Header */
.location-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.location-flag {
    font-size: 3rem; /* SVG flag size (48px) - original size */
    border-radius: 6px;
    display: inline-block;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Additional Flag Icons Support */
.location-flag .fi {
    width: 3rem;
    height: 2.25rem;
    border-radius: 6px;
    overflow: hidden;
}

/* Ping Badge */
.location-ping-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.ping-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pingPulse 2s ease-in-out infinite;
}

/* Ping Quality Colors */
.ping-excellent {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.ping-excellent .ping-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.ping-good {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.ping-good .ping-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

.ping-moderate {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.ping-moderate .ping-dot {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

@keyframes pingPulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Card Body */
.location-card-body {
    margin-bottom: 1rem;
}

.location-city {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.location-country {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Card Footer - Test IP */
.location-card-footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .location-card-footer {
    border-top-color: rgba(0, 0, 0, 0.06);
}

.location-test-ip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ip-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ip-value {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    color: var(--color-primary);
    background: rgba(59, 130, 246, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .ip-value {
    background: rgba(59, 130, 246, 0.08);
}

/* Responsive */
@media (max-width: 1200px) {
    .vps-locations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .vps-locations-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .vps-lg-btn {
        width: 100%;
        justify-content: center;
    }
    
    .vps-locations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .vps-locations-section {
        padding: 3rem 0;
    }
    
    .vps-locations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .vps-location-card {
        padding: 1.25rem;
    }
    
    .location-flag {
        font-size: 2.5rem; /* Smaller for tablets - original size */
    }
    
    .location-flag .fi {
        width: 2.5rem;
        height: 1.875rem;
    }
    
    .location-city {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .vps-locations-grid {
        grid-template-columns: 1fr;
    }
    
    .vps-location-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
    }
    
    .location-card-header {
        margin-bottom: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    
    .location-card-header .location-ping-badge {
        display: none;
    }
    
    .location-card-body {
        margin-bottom: 0;
    }
    
    .location-card-footer {
        padding-top: 0;
        border-top: none;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    
    .location-card-footer::before {
        content: '';
        display: flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.3rem 0.6rem;
        border-radius: 16px;
        font-size: 0.75rem;
        font-weight: 700;
        background: rgba(16, 185, 129, 0.15);
        color: #10b981;
        margin-bottom: 0.5rem;
    }
    
    /* Excellent ping (green) */
    .vps-location-card[data-location="bursa"] .location-card-footer::before { content: '8 ms'; }
    .vps-location-card[data-location="istanbul"] .location-card-footer::before { content: '12 ms'; }
    .vps-location-card[data-location="sofia"] .location-card-footer::before { content: '38 ms'; }
    .vps-location-card[data-location="frankfurt"] .location-card-footer::before { content: '45 ms'; }
    .vps-location-card[data-location="london"] .location-card-footer::before { content: '52 ms'; }
    
    /* Good ping (yellow) */
    .vps-location-card[data-location="karachi"] .location-card-footer::before { 
        content: '85 ms'; 
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
    }
    
    /* Moderate ping (red) */
    .vps-location-card[data-location="newyork"] .location-card-footer::before { 
        content: '118 ms'; 
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }
    .vps-location-card[data-location="toronto"] .location-card-footer::before { 
        content: '125 ms'; 
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }
    .vps-location-card[data-location="singapore"] .location-card-footer::before { 
        content: '165 ms'; 
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }
    .vps-location-card[data-location="sydney"] .location-card-footer::before { 
        content: '285 ms'; 
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }
    
    .location-test-ip {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }
    
    .ip-label {
        font-size: 0.65rem;
    }
    
    .ip-value {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

/* ============================================
   WHY CHOOSE RABISU VPS SECTION
   ============================================ */

.why-choose-section {
    padding: 6rem 0;
    background: var(--bg-primary);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.why-card {
    text-align: center;
    padding: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
}

.why-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary);
}

.why-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    border-radius: var(--radius-xl);
    color: var(--color-primary);
}

.why-title {
    font-size: 1.375rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.why-description {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ============================================
   34. GAME SERVER PAGE (DARK MODE ONLY)
   Premium Game Server Hosting Design (Bisect Style)
   ============================================ */

/* ============================================
   GAME SERVER MAIN SECTION
   ============================================ */
.game-server-main-section {
    padding: 5rem 0 6rem;
    background: #010813;
    min-height: 100vh;
}

/* Header */
.game-server-header {
    margin-bottom: 3rem;
    text-align: center;
}

.game-server-header-content {
    margin-bottom: 2.5rem;
}

.game-server-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, 
        var(--color-primary), 
        var(--color-secondary), 
        var(--color-accent-pink),
        var(--color-primary));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift-game 10s ease-in-out infinite;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

@keyframes gradient-shift-game {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.game-server-subtitle {
    font-size: 1rem;
    line-height: 1.7;
    color: #94a3b8;
    max-width: 900px;
    margin: 0 auto;
}

/* Search & Filter Controls */
.game-server-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.game-search-bar {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
}

.game-search-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    color: #f8fafc;
    font-size: 0.95rem;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
}

.game-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.game-search-input::placeholder {
    color: #64748b;
}

.game-filter-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.game-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-filter-btn svg {
    width: 18px;
    height: 18px;
}

.game-filter-btn:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(59, 130, 246, 0.4);
    color: #e2e8f0;
    transform: translateY(-2px);
}

.game-filter-btn.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(16, 185, 129, 0.2));
    border-color: #3b82f6;
    color: #3b82f6;
}

/* ============================================
   MODERN GAME CARDS (Banner Background Style - Keskin Kenarlı)
   ============================================ */
.games-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.75rem;
    margin-top: 3rem;
}

.game-card-modern {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 340px;
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.2);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    padding: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
}

.game-card-modern::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.game-card-modern:hover {
    transform: translateY(-6px);
    border-color: rgba(59, 130, 246, 0.5);
}

.game-card-modern:hover::before {
    border-color: var(--color-primary);
    opacity: 1;
    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.15), 0 0 30px rgba(59, 130, 246, 0.4);
}

.game-card-modern.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(80%);
}

/* Card Background Banner */
.game-card-image-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.game-card-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.85) 100%
    );
    z-index: 1;
}

.game-card-modern:hover .game-card-image-wrapper::before {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0.9) 100%
    );
}

.game-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-card-modern:hover .game-card-img {
    transform: scale(1.05);
}

/* Badge System */
.game-card-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    z-index: 3;
    backdrop-filter: blur(8px);
}

.game-card-badge.popular {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
    color: #fff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.game-card-badge.coming-soon {
    background: rgba(251, 191, 36, 0.95);
    color: #000;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.game-card-badge svg {
    width: 12px;
    height: 12px;
}

/* Card Content Overlay - Left Bottom */
.game-card-content-wrapper {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.game-card-info {
    display: none;
}

.game-card-info-btn {
    display: none;
}

.game-card-name {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    line-height: 1.2;
}

.game-card-price {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.price-highlight {
    display: inline;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
}

.game-card-platforms {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.game-card-platforms i {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 4px;
    color: #94a3b8;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.game-card-modern:hover .game-card-platforms i {
    background: rgba(59, 130, 246, 0.25);
    color: var(--color-primary);
}

/* No Results Message */
.no-results-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
}

.no-results-message svg {
    width: 80px;
    height: 80px;
    color: #475569;
    margin-bottom: 1.5rem;
    opacity: 0.6;
}

.no-results-message h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 0.75rem;
}

.no-results-message p {
    font-size: 1rem;
    color: #94a3b8;
    max-width: 400px;
}

/* ============================================
   GAME FEATURES SECTION
   ============================================ */
.game-features-section {
    padding: 6rem 0;
    background: rgba(15, 23, 42, 0.3);
}

.game-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.game-feature-box {
    padding: 2rem;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.game-feature-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.game-feature-box:hover {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15);
}

.game-feature-box:hover::before {
    transform: scaleX(1);
}

.game-feature-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.15));
    border-radius: 12px;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.game-feature-box:hover .game-feature-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    transform: scale(1.1) rotate(5deg);
}

.game-feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.game-feature-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

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

/* Large Desktop (1600px+) - 5 kolonlu grid */
@media (min-width: 1600px) {
    .games-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Desktop (1200px - 1599px) - 4 kolonlu grid */
@media (max-width: 1599px) {
    .games-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* Tablet (992px - 1199px) - 3 kolonlu grid */
@media (max-width: 1199px) {
    .games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
    
    .game-card-modern {
        height: 300px;
    }
    
    .game-card-content-wrapper {
        padding: 0.5rem 0.75rem;
    }
    
    .game-card-name {
        font-size: 0.8rem;
        min-height: 2.2rem;
    }
}

/* Tablet & Small Desktop */
@media (max-width: 992px) {
    .game-server-main-section {
        padding: 4rem 0 5rem;
    }

    .game-server-title {
        font-size: 2.5rem;
    }

    .game-server-controls {
        flex-direction: column;
        gap: 1rem;
    }

    .game-search-bar {
        max-width: 100%;
    }

    .game-filter-buttons {
        justify-content: center;
        width: 100%;
    }

    .games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .game-card-modern {
        height: 280px;
    }
    
    .game-card-content-wrapper {
        padding: 0.5rem 0.625rem;
    }
    
    .game-card-name {
        font-size: 0.75rem;
        min-height: 2rem;
        letter-spacing: 0.5px;
    }
    
    .price-highlight {
        font-size: 1.5rem;
    }

    .game-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .game-features-section {
        padding: 5rem 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .game-server-main-section {
        padding: 2rem 0 4rem;
    }

    .game-server-header {
        margin-bottom: 2rem;
    }

    .game-server-title {
        font-size: 2rem;
    }

    .game-server-subtitle {
        font-size: 0.95rem;
    }

    .games-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .game-card-modern {
        height: 260px;
    }
    
    .game-card-content-wrapper {
        padding: 0.625rem 0.75rem;
    }

    .game-filter-buttons {
        gap: 0.5rem;
    }

    .game-filter-btn {
        padding: 0.625rem 1rem;
        font-size: 0.8rem;
    }

    .game-card-platforms i {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }

    .game-card-name {
        font-size: 0.875rem;
        min-height: auto;
    }

    .price-highlight {
        font-size: 1.5rem;
    }

    .game-features-section {
        padding: 4rem 0;
    }

    .game-features-grid {
        gap: 1.25rem;
    }

    .game-feature-box {
        padding: 1.75rem;
    }
}

@media (max-width: 576px) {
    .game-server-main-section {
        padding: 1.5rem 0 3rem;
    }

    .game-server-header-content {
        margin-bottom: 1.5rem;
    }

    .game-server-title {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .game-server-subtitle {
        font-size: 0.875rem;
    }

    .game-search-input {
        padding: 0.75rem 0.875rem 0.75rem 2.5rem;
        font-size: 0.875rem;
    }

    .search-icon {
        left: 0.875rem;
    }

    .game-filter-btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
    }

    .game-filter-btn svg {
        width: 16px;
        height: 16px;
    }

    .game-card-image-wrapper {
        height: 140px;
    }

    .game-card-content-wrapper {
        padding: 1rem;
    }

    .game-card-platforms {
        gap: 0.375rem;
    }

    .game-card-platforms i {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .game-card-info-btn {
        width: 28px;
        height: 28px;
    }

    .game-card-name {
        font-size: 0.95rem;
    }

    .game-card-price {
        font-size: 0.8rem;
    }

    .price-highlight {
        font-size: 1rem;
    }

    .game-card-badge {
        font-size: 0.6rem;
        padding: 0.3rem 0.6rem;
        top: 0.75rem;
        right: 0.75rem;
    }

    .game-features-section {
        padding: 3rem 0;
    }

    .game-feature-box {
        padding: 1.5rem;
    }

    .game-feature-icon {
        width: 56px;
        height: 56px;
    }

    .game-feature-title {
        font-size: 1.125rem;
    }

    .game-feature-desc {
        font-size: 0.875rem;
    }

    .no-results-message {
        padding: 4rem 1rem;
    }

    .no-results-message svg {
        width: 64px;
        height: 64px;
    }

    .no-results-message h3 {
        font-size: 1.25rem;
    }

    .no-results-message p {
        font-size: 0.9rem;
    }
}

/* ============================================
   ABOUT US PAGE STYLES
   ============================================ */

/* About Hero Section */
/* About Hero - Uses references-hero-mega styles */

/* Timeline History Section - Modern Horizontal */
.timeline-history-section {
    padding: 6rem 0;
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .timeline-history-section {
    background: linear-gradient(180deg, #0f172a, #1e293b);
}

[data-theme="light"] .timeline-history-section {
    background: linear-gradient(180deg, #f8fafc, #e2e8f0);
}

.timeline-header {
    margin-bottom: 4rem;
}

.timeline-main-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.timeline-main-subtitle {
    font-size: 1.125rem;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

.timeline-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto 4rem;
    padding: 0 60px;
}

.timeline-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid rgba(59, 130, 246, 0.3);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.timeline-nav-btn:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-50%) scale(1.1);
}

.timeline-nav-btn.prev {
    left: 0;
}

.timeline-nav-btn.next {
    right: 0;
}

.timeline-track-wrapper {
    overflow: hidden;
    position: relative;
}

.timeline-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    position: relative;
    padding: 2rem 0;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(59, 130, 246, 0.3) 10%, 
        rgba(59, 130, 246, 0.3) 90%, 
        transparent 100%
    );
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-year-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
}

.timeline-year-badge {
    background: var(--bg-card);
    border: 2px solid rgba(59, 130, 246, 0.2);
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    min-width: 100px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 3px solid rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.timeline-year-item:hover .timeline-year-badge {
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-5px);
}

.timeline-year-item:hover .timeline-dot {
    border-color: rgba(59, 130, 246, 0.6);
    transform: scale(1.2);
}

.timeline-year-item.active .timeline-year-badge {
    background: linear-gradient(135deg, var(--color-primary), #2563eb);
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    transform: translateY(-8px);
}

.timeline-year-item.active .timeline-dot {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
    transform: scale(1.4);
}

.timeline-content-area {
    max-width: 900px;
    margin: 0 auto;
}

.timeline-content {
    display: none;
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 20px;
    padding: 3rem;
    backdrop-filter: blur(20px);
    animation: fadeInUp 0.5s ease;
}

.timeline-content.active {
    display: block;
}

[data-theme="light"] .timeline-content {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.timeline-content h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.timeline-content p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--text-muted);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 991px) {
    .timeline-history-section {
        padding: 4rem 0;
    }
    
    .timeline-container {
        padding: 0 50px;
    }
    
    .timeline-track {
        gap: 2rem;
    }
    
    .timeline-year-badge {
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
        min-width: 85px;
    }
}

@media (max-width: 768px) {
    .timeline-history-section {
        padding: 3rem 0;
    }
    
    .timeline-header {
        margin-bottom: 3rem;
    }
    
    .timeline-main-title {
        font-size: 2rem;
    }
    
    .timeline-main-subtitle {
        font-size: 1rem;
    }
    
    .timeline-container {
        padding: 0 40px;
    }
    
    .timeline-nav-btn {
        width: 36px;
        height: 36px;
    }
    
    .timeline-track {
        gap: 1.5rem;
    }
    
    .timeline-year-badge {
        padding: 0.5rem 1rem;
        font-size: 0.9375rem;
        min-width: 75px;
    }
    
    .timeline-dot {
        width: 10px;
        height: 10px;
        border-width: 2px;
    }
    
    .timeline-content {
        padding: 2rem 1.5rem;
    }
    
    .timeline-content h3 {
        font-size: 1.5rem;
    }
    
    .timeline-content p {
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    .timeline-container {
        padding: 0 35px;
    }
    
    .timeline-year-badge {
        padding: 0.5rem 0.875rem;
        font-size: 0.875rem;
        min-width: 70px;
    }
    
    .timeline-content {
        padding: 1.5rem 1.25rem;
    }
}

.timeline-wrapper {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding: 2rem 0;
}

.timeline-wrapper::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, 
        var(--color-primary) 0%, 
        var(--color-secondary) 50%, 
        var(--color-primary) 100%);
    transform: translateX(-50%);
}

[data-theme="light"] .timeline-wrapper::before {
    background: linear-gradient(180deg, 
        rgba(59, 130, 246, 0.3) 0%, 
        rgba(16, 185, 129, 0.3) 50%, 
        rgba(59, 130, 246, 0.3) 100%);
}

.timeline-item {
    position: relative;
    margin-bottom: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.timeline-item:nth-child(even) {
    direction: rtl;
}

.timeline-item:nth-child(even) .timeline-content {
    direction: ltr;
}

.timeline-year {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-year {
    text-align: left;
}

.timeline-content {
    position: relative;
    background: var(--bg-card);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(59, 130, 246, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
    border-color: var(--color-primary);
}

[data-theme="light"] .timeline-content {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .timeline-content:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.timeline-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    z-index: 2;
}

.timeline-badge.current {
    animation: pulse 2s infinite;
}

.timeline-content h4 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.timeline-content p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Values Section */
.values-section {
    padding: 6rem 0;
    background: var(--bg-secondary);
}

[data-theme="light"] .values-section {
    background: #f8fafc;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.value-card {
    background: var(--bg-card);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
    border-color: var(--color-primary);
}

.value-card:hover::before {
    transform: scaleX(1);
}

[data-theme="light"] .value-card {
    background: var(--bg-card);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .value-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.value-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.value-card:hover .value-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    transform: scale(1.1);
}

.value-icon i {
    font-size: 2rem;
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.value-card:hover .value-icon i {
    color: white;
}

.value-card h3 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.value-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Team Section */
.team-section {
    padding: 6rem 0;
    background: var(--bg-primary);
}

[data-theme="light"] .team-section {
    background: var(--bg-primary);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.team-member {
    text-align: center;
}

.member-photo {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--color-primary);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
}

.member-photo:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.3);
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.member-photo:hover img {
    transform: scale(1.1);
}

.member-social {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.member-photo:hover .member-social {
    opacity: 1;
}

.member-social a {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.member-social a:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
}

.member-info h4 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.member-role {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.member-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .about-hero-section {
        padding: 5rem 0 4rem;
    }
    
    .about-hero-title {
        font-size: 2.5rem;
    }
    
    .about-hero-visual {
        margin-top: 3rem;
    }
    
    .timeline-wrapper::before {
        left: 30px;
    }
    
    .timeline-item {
        grid-template-columns: 1fr;
        gap: 0;
        padding-left: 80px;
    }
    
    .timeline-item:nth-child(even) {
        direction: ltr;
    }
    
    .timeline-year {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 2rem;
        text-align: left;
        width: 80px;
    }
    
    .timeline-badge {
        left: 30px;
        transform: translateX(-50%);
    }
    
    .values-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
    
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .about-hero-section {
        padding: 4rem 0 3rem;
    }
    
    .about-hero-title {
        font-size: 2rem;
    }
    
    .about-hero-subtitle {
        font-size: 1rem;
    }
    
    .our-journey-section,
    .values-section,
    .team-section {
        padding: 4rem 0;
    }
    
    .horizontal-timeline {
        padding: 2rem 0;
    }
    
    .h-timeline-items {
        flex-direction: column;
        gap: 2.5rem;
    }
    
    .h-timeline-item {
        flex: 0 0 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 2rem;
    }
    
    .h-timeline-marker {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .h-timeline-card {
        text-align: left;
        max-width: 100%;
    }
    
    .h-timeline-card h4 {
        font-size: 1.25rem;
    }
    
    .timeline-item {
        padding-left: 60px;
        margin-bottom: 3rem;
    }
    
    .timeline-wrapper::before {
        left: 20px;
    }
    
    .timeline-year {
        font-size: 1.5rem;
        width: 60px;
    }
    
    .timeline-badge {
        left: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .timeline-content {
        padding: 1.5rem;
    }
    
    .timeline-content h4 {
        font-size: 1.25rem;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .value-card {
        padding: 2rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .member-photo {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 576px) {
    .about-hero-section {
        padding: 3rem 0 2rem;
    }
    
    .about-hero-title {
        font-size: 1.75rem;
    }
    
    .h-timeline-item {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .h-timeline-card {
        text-align: center;
    }
    
    .h-timeline-card h4 {
        font-size: 1.125rem;
    }
    
    .h-timeline-card p {
        font-size: 0.8125rem;
    }
    
    .marker-icon {
        width: 45px;
        height: 45px;
        font-size: 1.125rem;
    }
    
    .value-icon {
        width: 60px;
        height: 60px;
    }
    
    .value-icon i {
        font-size: 1.75rem;
    }
    
    .member-photo {
        width: 150px;
        height: 150px;
    }
}

/* ============================================
   ULTRA-PREMIUM REFERENCES PAGE (OPTIMIZED)
   ============================================ */

/* Hero Section */
.references-hero-mega {
    position: relative;
    padding: 10rem 0 8rem;
    overflow: hidden;
    background: var(--bg-primary);
}
[data-theme="dark"] .references-hero-mega { background: linear-gradient(180deg, #0a0e1a, #0f172a 50%, #1a1f35); }
[data-theme="light"] .references-hero-mega { background: linear-gradient(180deg, #eff6ff, #dbeafe 50%, #bfdbfe); }
.references-hero-content { position: relative; z-index: 2; max-width: 95%; }
.references-hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; color: var(--text-primary); }
.references-hero-subtitle { font-size: 1.125rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 2.5rem; }

/* Badge & Effects */
.pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.5rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 50px;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 2rem;
    animation: pulse 2s ease-in-out infinite;
}
[data-theme="light"] .pulse-badge { background: rgba(59, 130, 246, 0.08); }
.badge-dot { width: 8px; height: 8px; background: var(--color-secondary); border-radius: 50%; animation: pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }

.gradient-text-animated {
    background: linear-gradient(90deg, #3b82f6, #10b981, #3b82f6);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-flow 3s linear infinite;
}
@keyframes gradient-flow { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

/* Trust Badges */
.trust-badges-row { display: flex; align-items: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; }
.trust-badge-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: rgba(30, 41, 59, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: 12px; }
[data-theme="light"] .trust-badge-item { background: rgba(255, 255, 255, 0.9); }
.rating-stars-inline { display: flex; gap: 0.125rem; }
.rating-stars-inline i { color: #fbbf24; font-size: 0.875rem; }
.rating-stars-inline.trustpilot-color i { color: #00B67A; }
.rating-value-inline { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.hero-cta-buttons { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

/* Stats Cards */
.references-hero-stats { display: flex; flex-direction: column; gap: 2rem; }

/* Desktop spacing - stats from left content */
@media (min-width: 768px) {
    .references-hero-stats { margin-top: 4rem; }
}

/* Mobile spacing */
@media (max-width: 767px) {
    .references-hero-stats { margin-top: 2.5rem; }
}
.stat-mega-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.4s ease;
}
.stat-mega-card:hover { transform: translateX(-10px); border-color: var(--color-primary); box-shadow: 0 20px 60px rgba(59, 130, 246, 0.25); }
.stat-mega-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2)); border-radius: 12px; flex-shrink: 0; }
.stat-mega-icon svg { color: var(--color-primary); }
.stat-mega-value { font-size: 2rem; font-weight: 800; color: var(--text-primary); line-height: 1; margin-bottom: 0.25rem; }
.stat-mega-label { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0; }
.stat-mega-desc { display: none; }

/* Logo Slider */
.logo-slider-section { padding: 4rem 0; background: var(--bg-secondary); overflow: hidden; }
[data-theme="light"] .logo-slider-section { background: #f8fafc; }
.logo-slider-title { text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2rem; }
.logo-slider-wrapper { overflow: hidden; }
.logo-slider-track { display: flex; gap: 4rem; animation: scroll-logos 30s linear infinite; }
@keyframes scroll-logos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.logo-slide { flex-shrink: 0; width: 180px; height: 80px; display: flex; align-items: center; justify-content: center; }
.logo-slide img { max-width: 100%; max-height: 60px; object-fit: contain; filter: grayscale(1) opacity(0.6); transition: all 0.3s ease; }
.logo-slide img:hover { filter: grayscale(0) opacity(1); transform: scale(1.1); }

/* Success Stories */
.success-stories-section { padding: 8rem 0; background: var(--bg-primary); }
[data-theme="light"] .success-stories-section { background: #ffffff; }
.success-stories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 2.5rem; margin-top: 4rem; }
.success-story-card {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 24px;
    padding: 2.5rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}
[data-theme="light"] .success-story-card { background: rgba(248, 250, 252, 0.9); border-color: rgba(59, 130, 246, 0.2); }
.success-story-card:hover { transform: translateY(-10px); border-color: var(--color-primary); box-shadow: 0 30px 60px rgba(59, 130, 246, 0.2); }
.success-story-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2));
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    z-index: 3;
    backdrop-filter: blur(10px);
}
.success-story-badge svg { color: #fbbf24; width: 12px; height: 12px; }
.success-story-header { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; margin-top: 2.5rem; position: relative; z-index: 2; }
.client-logo-mega { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.6); border-radius: 16px; padding: 1rem; flex-shrink: 0; }
[data-theme="light"] .client-logo-mega { background: rgba(255, 255, 255, 1); }
.client-logo-mega img { max-width: 100%; max-height: 70px; object-fit: contain; }
.client-name-mega { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
.client-industry { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1rem; }
.client-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { padding: 0.25rem 0.75rem; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 6px; font-size: 0.75rem; font-weight: 600; color: var(--color-primary); }
.success-quote { font-size: 1rem; line-height: 1.7; color: var(--text-muted); font-style: italic; margin-bottom: 2rem; padding-left: 1rem; border-left: 3px solid var(--color-primary); position: relative; z-index: 2; }
.success-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; padding: 1.5rem 0; border-top: 1px solid rgba(59, 130, 246, 0.1); border-bottom: 1px solid rgba(59, 130, 246, 0.1); position: relative; z-index: 2; }
[data-theme="light"] .success-metrics { border-color: rgba(0, 0, 0, 0.08); }
.success-metric { text-align: center; }
.metric-value-large { font-size: 1.75rem; font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: 0.5rem; }
.metric-label-large { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.success-services { display: flex; flex-wrap: wrap; gap: 0.5rem; position: relative; z-index: 2; }
.service-pill { padding: 0.5rem 1rem; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 50px; font-size: 0.75rem; font-weight: 600; color: var(--color-secondary); }

/* All Clients Section */
.all-clients-mega-section { padding: 8rem 0; background: var(--bg-secondary); }
[data-theme="light"] .all-clients-mega-section { background: #f8fafc; }
.client-filter-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 3rem 0; flex-wrap: wrap; }
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}
.filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }
.filter-btn.active { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); border-color: var(--color-primary); color: white; }
.clients-mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 3rem; }
.client-mega-card {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}
.client-mega-card:hover { transform: translateY(-8px) scale(1.02); border-color: var(--color-primary); box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2); }
.client-logo-container { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; position: relative; z-index: 2; }
.client-logo-container img { max-width: 90%; max-height: 90px; object-fit: contain; transition: all 0.3s ease; }
.client-mega-card:hover .client-logo-container img { transform: scale(1.1) translateY(-5px); }
.client-card-name { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; position: relative; z-index: 2; }
.client-card-desc { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1rem; position: relative; z-index: 2; }
.client-card-stats { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid rgba(59, 130, 246, 0.1); position: relative; z-index: 2; }
[data-theme="light"] .client-card-stats { border-color: rgba(0, 0, 0, 0.08); }
.client-card-stats span { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.client-card-stats i { color: var(--color-primary); font-size: 0.875rem; }

/* Reviews Section */
.references-reviews-section { padding: 8rem 0; background: var(--bg-primary); }
[data-theme="light"] .references-reviews-section { background: #ffffff; }
.reviews-mega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-top: 4rem; }
.review-mega-card { background: var(--bg-card); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: 20px; padding: 2.5rem; transition: all 0.3s ease; position: relative; }
.review-mega-card::before { content: '"'; position: absolute; top: 1rem; left: 1.5rem; font-size: 6rem; font-family: Georgia, serif; color: rgba(59, 130, 246, 0.05); line-height: 1; }
.review-mega-card:hover { transform: translateY(-5px); border-color: var(--color-primary); box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15); }
.review-stars-mega { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; position: relative; z-index: 2; }
.review-stars-mega i { color: #fbbf24; font-size: 1rem; }
.review-stars-mega.trustpilot i { color: #00B67A; }
.review-text-mega { font-size: 1rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 2rem; position: relative; z-index: 2; }
.review-author-mega { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; position: relative; z-index: 2; }
.author-avatar { width: 50px; height: 50px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.author-avatar svg { color: var(--color-primary); }
.author-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.author-title { font-size: 0.875rem; color: var(--text-muted); }
.review-platform-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 50px; font-size: 0.75rem; font-weight: 600; color: var(--color-primary); position: relative; z-index: 2; }
.review-platform-badge.google i { color: #4285F4; }
.review-platform-badge.trustpilot i { color: #00B67A; }

/* Why Rabisu Ultra */
.why-rabisu-ultra-section { padding: 8rem 0; background: var(--bg-secondary); }
[data-theme="light"] .why-rabisu-ultra-section { background: #f8fafc; }
.why-ultra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2.5rem; margin-top: 4rem; }
.why-ultra-card { background: var(--bg-card); border: 1px solid rgba(59, 130, 246, 0.15); border-radius: 20px; padding: 2.5rem; transition: all 0.4s ease; position: relative; overflow: hidden; }
.why-ultra-card::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.why-ultra-card:hover::before { transform: scaleX(1); }
.why-ultra-card:hover { transform: translateY(-10px); border-color: var(--color-primary); box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2); }
.why-ultra-number { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 3rem; font-weight: 800; color: rgba(59, 130, 246, 0.08); line-height: 1; }
.why-ultra-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.15)); border-radius: 16px; margin-bottom: 1.5rem; transition: all 0.4s ease; position: relative; z-index: 2; }
.why-ultra-card:hover .why-ultra-icon { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); transform: scale(1.1) rotate(5deg); }
.why-ultra-icon svg { color: var(--color-primary); transition: color 0.4s ease; }
.why-ultra-card:hover .why-ultra-icon svg { color: white; }
.why-ultra-card h3 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; position: relative; z-index: 2; }
.why-ultra-card p { font-size: 0.9375rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 1.5rem; position: relative; z-index: 2; }
.why-ultra-list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 2; }
.why-ultra-list li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.why-ultra-list li:last-child { margin-bottom: 0; }
.why-ultra-list i { color: var(--color-secondary); font-size: 0.75rem; flex-shrink: 0; }

/* Mission & Vision Section */
.mission-vision-section {
    padding: 6rem 0;
    background: var(--bg-secondary);
}

[data-theme="light"] .mission-vision-section {
    background: #f8fafc;
}

.mission-card,
.vision-card {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 24px;
    padding: 3rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.mission-card::before,
.vision-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.mission-card:hover,
.vision-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-primary);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
}

.mission-card:hover::before,
.vision-card:hover::before {
    transform: scaleX(1);
}

[data-theme="light"] .mission-card,
[data-theme="light"] .vision-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .mission-card:hover,
[data-theme="light"] .vision-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.mission-icon,
.vision-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.15));
    border-radius: 20px;
    margin-bottom: 2rem;
    transition: all 0.4s ease;
}

.mission-card:hover .mission-icon,
.vision-card:hover .vision-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    transform: scale(1.1) rotate(5deg);
}

.mission-icon i,
.vision-icon i {
    font-size: 2.5rem;
    color: var(--color-primary);
    transition: color 0.4s ease;
}

.mission-card:hover .mission-icon i,
.vision-card:hover .vision-icon i {
    color: white;
}

.mission-card h3,
.vision-card h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.mission-card p,
.vision-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.mission-points,
.vision-points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mission-points li,
.vision-points li {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.mission-points li:last-child,
.vision-points li:last-child {
    margin-bottom: 0;
}

.mission-points i,
.vision-points i {
    color: var(--color-secondary);
    font-size: 1rem;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .mission-vision-section {
        padding: 5rem 0;
    }
    
    .mission-card,
    .vision-card {
        padding: 2.5rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .mission-vision-section {
        padding: 4rem 0;
    }
    
    .mission-card,
    .vision-card {
        padding: 2rem;
    }
    
    .mission-card h3,
    .vision-card h3 {
        font-size: 1.5rem;
    }
    
    .mission-icon,
    .vision-icon {
        width: 70px;
        height: 70px;
    }
    
    .mission-icon i,
    .vision-icon i {
        font-size: 2rem;
    }
}

/* Final CTA */
.references-final-cta { padding: 8rem 0; background: var(--bg-primary); position: relative; overflow: hidden; }
[data-theme="light"] .references-final-cta { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.final-cta-mega-card { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1)); border: 2px solid rgba(59, 130, 246, 0.3); border-radius: 32px; padding: 5rem 4rem; text-align: center; position: relative; overflow: hidden; }
.cta-mega-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%); pointer-events: none; animation: pulse-glow 4s ease-in-out infinite; }
@keyframes pulse-glow { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; } }
.final-cta-content-mega { position: relative; z-index: 2; }
.cta-icon-mega { width: 100px; height: 100px; margin: 0 auto 2rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2)); border-radius: 50%; animation: float-icon 3s ease-in-out infinite; }
@keyframes float-icon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cta-icon-mega svg { color: var(--color-primary); }
.final-cta-content-mega h2 { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; color: var(--text-primary); margin-bottom: 1.5rem; }
.final-cta-content-mega p { font-size: 1.25rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 3rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.cta-features-inline { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.cta-feature-inline { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.cta-feature-inline svg { color: var(--color-secondary); }
.cta-buttons-mega { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.btn-cta-mega { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1.25rem 3rem; border-radius: 50px; font-size: 1.125rem; font-weight: 700; text-decoration: none; transition: all 0.3s ease; }
.btn-cta-mega.primary { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: white; box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3); }
.btn-cta-mega.primary:hover { box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4); transform: translateY(-3px); }
.btn-cta-mega.secondary { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); }
.btn-cta-mega.secondary:hover { background: var(--color-primary); color: white; transform: translateY(-3px); }
.btn-cta-mega:hover svg:last-child { transform: translateX(5px); }
.cta-trust-mega { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 0.9375rem; color: var(--text-muted); flex-wrap: wrap; }
.cta-trust-mega svg { color: #fbbf24; }

/* Responsive */
@media (max-width: 992px) {
    .references-hero-mega, .success-stories-section, .all-clients-mega-section, .references-reviews-section, .why-rabisu-ultra-section, .references-final-cta { padding: 5rem 0; }
}
@media (max-width: 768px) {
    .references-hero-mega { padding: 4rem 0 3rem; }
    .references-hero-title { font-size: 2rem; }
    .references-hero-stats { margin-top: 2rem; gap: 1.5rem; }
    .stat-mega-card { flex-direction: column; text-align: center; padding: 1.25rem; }
    .stat-mega-icon { width: 48px; height: 48px; }
    .stat-mega-value { font-size: 1.75rem; }
    .success-story-header { flex-direction: column; text-align: center; margin-top: 3rem; }
    .success-story-badge { top: 1rem; right: 1rem; padding: 0.4rem 0.875rem; font-size: 0.7rem; }
    .success-metrics { grid-template-columns: 1fr; gap: 1rem; }
    .clients-mega-grid, .reviews-mega-grid, .why-ultra-grid { grid-template-columns: 1fr; }
    .cta-features-inline, .cta-buttons-mega { flex-direction: column; }
    .btn-cta-mega { width: 100%; justify-content: center; }
    .final-cta-mega-card { padding: 3rem 2rem; }
}
@media (max-width: 576px) {
    .references-hero-mega { padding: 3rem 0 2rem; }
    .references-hero-title { font-size: 1.75rem; }
    .references-hero-stats { margin-top: 1.5rem; gap: 1.25rem; }
    .trust-badges-row, .hero-cta-buttons { flex-direction: column; }
    .stat-mega-card { padding: 1.25rem; }
    .stat-mega-icon { width: 44px; height: 44px; }
    .stat-mega-value { font-size: 1.5rem; }
    .stat-mega-label { font-size: 0.8rem; }
    .success-story-card { padding: 2rem 1.5rem; }
    .success-story-badge { top: 0.75rem; right: 0.75rem; padding: 0.375rem 0.75rem; font-size: 0.65rem; }
    .success-story-badge svg { width: 10px; height: 10px; }
    .client-logo-mega { width: 80px; height: 80px; }
    .client-name-mega { font-size: 1.25rem; }
    .final-cta-mega-card { padding: 2.5rem 1.5rem; }
    .cta-icon-mega { width: 80px; height: 80px; }
}

/* ============================================
   35. PAYMENT METHODS PAGE - MINIMAL (~400 lines)
   ============================================ */

/* Hero Section - Refactored to match Looking Glass Premium Style */
.payment-hero-section {
    padding: 6rem 0 5rem;
    background: linear-gradient(180deg, #0a0e1a, #0f172a 50%, #1a1f35);
    position: relative;
    overflow: hidden;
    text-align: center;
}

[data-theme="light"] .payment-hero-section {
    background: linear-gradient(180deg, #eff6ff, #dbeafe 50%, #bfdbfe);
}

/* DDoS Protection Hero Override */
.ddos-hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 4rem;
}

.ddos-hero-section .payment-hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    margin-bottom: 2rem;
    line-height: 1.2;
    margin-top: 0;
}

.ddos-hero-section .payment-hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    margin-bottom: 3rem;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.ddos-hero-section .hero-buttons {
    margin-bottom: 4rem;
    gap: 2rem;
}

.ddos-hero-section .hero-stats-row {
    gap: 4rem;
}

.ddos-hero-section .stat-num {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
}

.ddos-hero-section .stat-label {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    margin-top: 0.75rem;
}

.payment-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.payment-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(59,130,246,.05) 1px, transparent 0), linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 0);
    background-size: 100px 100px;
    animation: grid-move 20s linear infinite;
}

[data-theme="light"] .payment-hero-grid {
    background-image: linear-gradient(rgba(59,130,246,.1) 1px, transparent 0), linear-gradient(90deg, rgba(59,130,246,.1) 1px, transparent 0);
}

.payment-hero-gradient {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(16,185,129,0.1) 50%, transparent 70%);
    animation: pulse 8s ease-in-out infinite;
}

[data-theme="light"] .payment-hero-gradient {
    background: radial-gradient(circle, rgba(59,130,246,0.2) 0%, rgba(147,197,253,0.15) 50%, transparent 70%);
}

.payment-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.payment-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    border: 1px solid rgba(59, 130, 246, 0.1);
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.payment-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.payment-breadcrumb a:hover { color: var(--color-primary); }
.payment-breadcrumb span { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

.payment-hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.payment-gradient-text {
    background: linear-gradient(135deg, #3b82f6, #10b981, #06b6d4);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 5s ease-in-out infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.payment-hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.payment-trust-badges {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
}

[data-theme="light"] .trust-badge {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

.trust-badge:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.trust-badge i {
    font-size: 1.5rem;
    color: var(--color-primary);
}

/* Payment Methods Section */
.payment-methods-section {
    padding: 5rem 0;
    background: var(--bg-secondary);
}

[data-theme="light"] .payment-methods-section {
    background: white;
}

.payment-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title-center {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-extrabold);
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.section-subtitle-center {
    font-size: clamp(0.95rem, 2vw, 1.125rem);
    color: var(--text-secondary);
}

/* Payment Cards */
.payment-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

[data-theme="light"] .payment-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

.payment-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(59, 130, 246, 0.2);
    border-color: var(--color-primary);
}

.payment-card-header {
    padding: 2rem 2rem 0;
    display: flex;
    justify-content: space-between;
}

.payment-icon-wrapper {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    border-radius: var(--radius-lg);
    transition: all 0.4s ease;
}

.payment-icon-wrapper.crypto {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.1));
}

.payment-icon-wrapper.digital {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
}

.payment-card:hover .payment-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.payment-card:hover .payment-icon-wrapper.crypto {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.payment-card:hover .payment-icon-wrapper.digital {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.payment-icon-wrapper i {
    font-size: 2.5rem;
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.payment-icon-wrapper.crypto i { color: #f59e0b; }
.payment-icon-wrapper.digital i { color: #8b5cf6; }
.payment-card:hover .payment-icon-wrapper i { color: white; }

.payment-badge {
    padding: 0 1.5rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}

.payment-badge.popular {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
}

.payment-badge.crypto {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
}

.payment-badge.digital {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: white;
}

.payment-card-body {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.payment-method-title {
    font-size: clamp(1.375rem, 3vw, 2rem);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.payment-method-description {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
    min-height: 75px;
}

.payment-logos {
    padding: 1.5rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    gap: 1.5rem;
}

.payment-logos i {
    font-size: 2.5rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.payment-logos i:hover {
    color: var(--text-primary);
    transform: translateY(-3px) scale(1.1);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Marka Renkleri - Hover Durumunda */
.payment-logos i.fa-cc-visa:hover { color: #1A1F71; }
.payment-logos i.fa-cc-mastercard:hover { color: #EB001B; }
.payment-logos i.fa-cc-amex:hover { color: #2E77BB; }
.payment-logos i.fa-cc-discover:hover { color: #FF6000; }
.payment-logos i.fa-apple-pay:hover { color: var(--text-primary); }
.payment-logos i.fa-google-pay:hover { color: var(--text-primary); }
.payment-logos i.fa-bitcoin:hover { color: #F7931A; }
.payment-logos i.fa-ethereum:hover { color: #3C3C3D; }
[data-theme="dark"] .payment-logos i.fa-ethereum:hover { color: #ECF0F1; }

[data-theme="light"] .payment-logos {
    background: rgba(59, 130, 246, 0.03);
}

.digital-logos {
    /* display: none kaldırıldı, payment-logos stili geçerli olacak */
}

.payment-features {
    margin-bottom: 2rem;
}

.payment-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    transition: transform 0.3s ease;
}

.payment-feature:hover { transform: translateX(5px); }
.payment-feature i { color: var(--color-secondary); }

.payment-info-box {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: var(--radius-lg);
    align-items: flex-start;
    min-height: 85px;
    margin-top: auto;
}

.payment-info-box.crypto { background: rgba(245, 158, 11, 0.05); }
.payment-info-box.digital { background: rgba(139, 92, 246, 0.05); }

[data-theme="light"] .payment-info-box {
    background: rgba(59, 130, 246, 0.03);
}

.payment-info-box i {
    font-size: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.payment-info-box.crypto i { color: #f59e0b; }
.payment-info-box.digital i { color: #8b5cf6; }

.payment-card-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .payment-card-footer {
    border-top-color: rgba(0, 0, 0, 0.08);
}

.payment-processing {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.payment-processing i { color: var(--color-secondary); }

/* Additional Info Cards */
.payment-additional-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.payment-info-card {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
}

[data-theme="light"] .payment-info-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
}

.payment-info-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.payment-info-card i {
    font-size: 2rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.payment-info-card strong {
    display: block;
    font-size: 1.125rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.payment-info-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* CTA Section */
.payment-cta-section {
    padding: 5rem 0;
    background: var(--bg-primary);
}

[data-theme="light"] .payment-cta-section {
    background: #f8fafc;
}

.payment-cta-card {
    background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
    padding: 4rem 2rem;
    border-radius: var(--radius-2xl);
    text-align: center;
    box-shadow: 0 30px 60px rgba(59, 130, 246, 0.3);
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-extrabold);
    color: white;
    margin-bottom: 1rem;
}

.cta-description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-cta.primary {
    background: white;
    color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-cta.primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.btn-cta.secondary {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-cta.secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: white;
    transform: translateY(-5px);
}

.btn-cta i {
    transition: transform 0.3s ease;
}

.btn-cta:hover i {
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 768px) {
    .payment-hero-section { padding: 5rem 0 4rem; }
    .payment-trust-badges { flex-direction: column; gap: 1rem; }
    .payment-card-header { flex-direction: column; align-items: center; text-align: center; }
    .payment-additional-info { grid-template-columns: 1fr; gap: 1rem; }
    .cta-buttons { flex-direction: column; }
    .btn-cta { width: 100%; }
}

/* ============================================
   CONTACT PAGE - Social Media Section
   ============================================ */

/* Contact Sosyal Medya Grid */
.contact-social-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Contact Sosyal Medya Link */
.contact-social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .contact-social-link {
    background: rgba(248, 250, 252, 0.9);
    border-color: rgba(59, 130, 246, 0.15);
}

.contact-social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.contact-social-link:hover::before {
    left: 100%;
}

.contact-social-link i {
    font-size: 1.5rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.contact-social-link span {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.contact-social-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .contact-social-link:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Discord */
.contact-social-link.discord-link:hover {
    background: #5865f2;
    border-color: #5865f2;
}

.contact-social-link.discord-link:hover i,
.contact-social-link.discord-link:hover span {
    color: white;
}

/* Twitter */
.contact-social-link.twitter-link:hover {
    background: #1da1f2;
    border-color: #1da1f2;
}

.contact-social-link.twitter-link:hover i,
.contact-social-link.twitter-link:hover span {
    color: white;
}

/* Facebook */
.contact-social-link.facebook-link:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.contact-social-link.facebook-link:hover i,
.contact-social-link.facebook-link:hover span {
    color: white;
}

/* Instagram */
.contact-social-link.instagram-link:hover {
    background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
    border-color: transparent;
}

.contact-social-link.instagram-link:hover i,
.contact-social-link.instagram-link:hover span {
    color: white;
}

/* YouTube */
.contact-social-link.youtube-link:hover {
    background: #ff0000;
    border-color: #ff0000;
}

.contact-social-link.youtube-link:hover i,
.contact-social-link.youtube-link:hover span {
    color: white;
}

/* Responsive */
@media (max-width: 576px) {
    .contact-social-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-social-link {
        padding: 1.25rem;
    }
    
    .contact-social-link i {
        font-size: 1.75rem;
    }
}

/* Contact Page Value Card Enhancements */
.values-section .value-card .btn {
    margin-top: 1.5rem;
}

.values-section .value-card .btn-block {
    width: 100%;
}

/* Contact Hero Stats düzenlemesi */
.references-hero-stats .stat-mega-card .stat-mega-value {
    font-size: 1.125rem;
    font-weight: 700;
}

.references-hero-stats .stat-mega-card .stat-mega-label {
    font-size: 0.875rem;
}

/* Contact için özel animasyon */
@keyframes contact-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
}

.pulse-badge .badge-dot {
    animation: contact-pulse 2s infinite;
}

/* ============================================
   CONTACT PAGE - Premium Design
   ============================================ */

/* Hero Visual - Contact Status */
.contact-hero-visual {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Discord Community Card */
.contact-discord-card {
    background: var(--bg-card);
    border: 1px solid rgba(88, 101, 242, 0.2);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .contact-discord-card {
    background: rgba(255, 255, 255, 0.9);
}

.contact-discord-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(88, 101, 242, 0.1), transparent);
    animation: status-shine 3s infinite;
}

.discord-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.discord-logo {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #5865f2, #8b5cf6);
    border-radius: 16px;
    flex-shrink: 0;
}

.discord-logo i {
    font-size: 2rem;
    color: white;
}

.discord-info h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.discord-info p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

.discord-stats-inline {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.discord-stat-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: rgba(88, 101, 242, 0.08);
    border: 1px solid rgba(88, 101, 242, 0.2);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.discord-stat-box i {
    font-size: 0.875rem;
    color: #5865f2;
}

.discord-stat-box.online i {
    color: #10b981;
    animation: pulse 2s infinite;
}

.discord-join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #5865f2, #8b5cf6);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.discord-join-btn:hover {
    box-shadow: 0 15px 40px rgba(88, 101, 242, 0.4);
    transform: translateY(-2px);
}

.discord-join-btn i.fa-arrow-right {
    margin-left: auto;
    font-size: 0.875rem;
}

/* Contact Unified Section */
.contact-unified-section {
    padding: 6rem 0;
    background: var(--bg-primary);
}

[data-theme="light"] .contact-unified-section {
    background: #f8fafc;
}

.contact-form-card {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .contact-form-card {
    background: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.form-group label i {
    font-size: 0.875rem;
    color: var(--color-primary);
}

.form-input {
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--bg-primary);
    border: 2px solid rgba(59, 130, 246, 0.15);
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

[data-theme="light"] .form-input {
    background: #f8fafc;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.form-input::placeholder {
    color: var(--text-muted);
}

select.form-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    padding-right: 3rem;
}

textarea.form-input {
    resize: vertical;
    min-height: 150px;
}

.form-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.125rem 2rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.form-submit-btn:hover {
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

.form-submit-btn i.fa-arrow-right {
    margin-left: auto;
    font-size: 0.875rem;
}

/* Contact Sidebar */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* Quick Contact Methods */
.quick-contact-methods {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    padding: 2rem;
}

[data-theme="light"] .quick-contact-methods {
    background: white;
}

.quick-method-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(59, 130, 246, 0.03);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    position: relative;
}

.quick-method-card:last-child {
    margin-bottom: 0;
}

.quick-method-card:hover {
    border-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .quick-method-card {
    background: #f8fafc;
}

.quick-method-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.ticket-card .quick-method-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.15));
}

.email-card .quick-method-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
}

.quick-method-icon i {
    font-size: 1.25rem;
    color: var(--color-primary);
}

.quick-method-content {
    flex: 1;
}

.quick-method-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.quick-method-content p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

.method-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50px;
    font-size: 0.625rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
}

.method-arrow {
    font-size: 0.875rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.quick-method-card:hover .method-arrow {
    color: var(--color-primary);
    transform: translateX(5px);
}

.quick-method-card:hover .quick-method-icon {
    transform: scale(1.1);
}

/* Contact Benefits Mini */
.contact-benefits-mini {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    padding: 2rem;
}

[data-theme="light"] .contact-benefits-mini {
    background: white;
}

.benefit-mini-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.benefit-mini-item:last-child {
    margin-bottom: 0;
}

.benefit-mini-item i {
    font-size: 1.25rem;
    color: var(--color-secondary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.benefit-mini-item strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.benefit-mini-item p {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 992px) {
    .contact-hero-visual {
        margin-top: 3rem;
    }
    
    .status-metrics {
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .contact-unified-section {
        padding: 3rem 0;
    }
    
    .discord-stats-inline {
        flex-direction: column;
    }
    
    .contact-form-card {
        padding: 1.5rem;
    }
    
    .quick-contact-methods,
    .contact-benefits-mini {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .discord-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .discord-logo {
        width: 50px;
        height: 50px;
    }
    
    .discord-logo i {
        font-size: 1.5rem;
    }
    
    .form-submit-btn {
        padding: 1rem 1.5rem;
    }
    
    .quick-method-card {
        padding: 1rem;
    }
    
    .quick-method-icon {
        width: 45px;
        height: 45px;
    }
    
    .quick-method-icon i {
        font-size: 1.125rem;
    }
    
    .benefit-mini-item i {
        font-size: 1.125rem;
    }
}


/* ============================================
   36. DDOS PROTECTION PAGE STYLES
   ============================================ */

/* Hero Elements (Specific to DDoS Page) */
.hero-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.btn-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.btn-link-arrow:hover {
    gap: 1rem;
    color: var(--color-primary);
}

.hero-stats-row {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.stat-col {
    text-align: center;
}

.stat-num {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-label {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Defense Section */
.section-defense {
    padding: 6rem 0;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

[data-theme='light'] .section-defense {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.network-visual {
    max-width: 450px;
    margin: 0 auto;
}

.orbit-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 60px rgba(59, 130, 246, 0.2));
}

.section-title-xl {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.section-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    color: var(--text-secondary);
}

.check-list svg {
    flex-shrink: 0;
    color: var(--color-secondary);
    margin-top: 0.2rem;
}

/* Attack Types Section */
.section-attacks {
    padding: 6rem 0;
    background: var(--bg-primary);
}

.section-badge-top {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 50px;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-top: 1rem;
}

.attack-card {
    padding: 2rem;
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 20px;
    height: 100%;
    transition: all 0.3s ease;
}

[data-theme='light'] .attack-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.attack-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
}

.attack-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 16px;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.attack-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.attack-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.protected-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 20px;
    color: var(--color-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Process Section */
.section-process {
    padding: 6rem 0;
    background: var(--bg-secondary);
}

.process-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.process-item {
    text-align: center;
}

.process-icon-gradient {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 24px;
    color: #ffffff;
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}

.process-item h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.process-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.mini-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: left;
}

.mini-list li {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.mini-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    color: var(--color-secondary);
    margin-right: 0.5rem;
}

/* Stats Section */
.section-stats {
    padding: 6rem 0;
    background: var(--bg-primary);
    border-top: 1px solid rgba(59, 130, 246, 0.1);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
}

.stat-icon-circle {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    color: var(--color-primary);
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Why Choose Section */
.section-why {
    padding: 6rem 0;
    background: var(--bg-secondary);
}

.why-card {
    text-align: center;
    padding: 2rem;
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 20px;
    height: 100%;
    transition: all 0.3s ease;
}

.why-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.why-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.15));
    border-radius: 50%;
    color: var(--color-primary);
}

.why-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.why-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* Compliance Section */
.section-compliance {
    padding: 6rem 0;
    background: var(--bg-primary);
}

.compliance-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.compliance-item {
    text-align: center;
}

.compliance-badge-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
}

.compliance-badge-icon svg {
    width: 100%;
    height: 100%;
}

.compliance-item h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.compliance-item p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}

/* Final CTA */
.section-cta-final {
    padding: 6rem 0;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    position: relative;
}

.cta-box {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem;
    background: var(--bg-card);
    border-radius: 24px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

[data-theme='light'] .cta-box {
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

.cta-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 1.5rem 0;
}

.cta-text {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .hero-stats-row {
        gap: 2rem;
    }
    
    .process-row {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .compliance-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .compliance-row {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   37. LEGAL & SERVICE CONTRACT STYLES
   ============================================ */

/* Legal Hero Section (Matches Payment/DDoS Hero) */
.legal-hero-section {
    padding: 6rem 0 4rem;
    background: linear-gradient(180deg, #0a0e1a, #0f172a 50%, #1a1f35);
    position: relative;
    overflow: hidden;
    text-align: center;
}

[data-theme='light'] .legal-hero-section {
    background: linear-gradient(180deg, #eff6ff, #dbeafe 50%, #bfdbfe);
}

.legal-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 50px;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.legal-hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.legal-hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.legal-meta-info {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    background: var(--bg-card);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* Company Info Section */
.legal-company-section {
    padding: 4rem 0;
    background: var(--bg-secondary);
}

.company-info-card {
    display: flex;
    align-items: center;
    gap: 3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

[data-theme='light'] .company-info-card {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.company-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 20px;
    color: white;
}

.company-details h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.detail-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.detail-label {
    font-weight: 600;
    color: var(--text-muted);
    min-width: 140px;
}

.detail-value {
    color: var(--text-primary);
    font-weight: 500;
}

/* Table of Contents */
.legal-toc-section {
    padding: 4rem 0 2rem;
    background: var(--bg-primary);
}

.toc-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
}

.toc-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--text-primary);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.toc-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    color: var(--text-primary);
    font-weight: 600;
    transition: all 0.2s ease;
}

.toc-item:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-primary);
    transform: translateX(5px);
}

.toc-number {
    color: var(--color-primary);
    font-family: 'Courier New', monospace;
    font-weight: 700;
}

.toc-text {
    flex: 1;
}

/* Accordion Content */
.legal-content-section {
    padding: 2rem 0 6rem;
    background: var(--bg-primary);
}

.legal-accordion {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.legal-accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.legal-accordion-item:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.legal-accordion-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.legal-accordion-button:hover {
    background: rgba(59, 130, 246, 0.05);
}

.accordion-title-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.accordion-number {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-muted);
    opacity: 0.5;
}

.accordion-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.accordion-icon {
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.legal-accordion-button:not(.collapsed) .accordion-icon {
    transform: rotate(180deg);
}

.legal-accordion-body {
    padding: 0 2rem 2rem 4rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.legal-subsection {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--border-color);
}

.legal-subsection h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.highlight-box {
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
}

.highlight-box.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.highlight-box.danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.prohibited-list {
    margin: 1rem 0 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
}

.prohibited-list li {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .company-info-card {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .detail-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .legal-accordion-body {
        padding: 0 1.5rem 1.5rem;
    }
    
    .toc-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   LOOKING GLASS - PREMIUM DEVELOPER CONSOLE
   ============================================ */

/* Flag Icons Styling - Looking Glass Override */
.lg-location-dropdown .fi,
.lg-info-badge-value .fi {
    width: 1.25em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lg-location-dropdown .fi {
    margin-right: 0.5rem;
}

.lg-info-badge-value .fi {
    margin-right: 0.375rem;
}

/* Hero Section */
.lg-hero-section {
    padding: 6rem 0 5rem;
    background: linear-gradient(180deg, #0a0e1a, #0f172a 50%, #1a1f35);
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .lg-hero-section {
    background: linear-gradient(180deg, #eff6ff, #dbeafe 50%, #bfdbfe);
}

.lg-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Premium Animated Grid - Performance Optimized */
.lg-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(59,130,246,.05) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-flow-premium 30s linear infinite;
    opacity: 0.6;
    will-change: transform;
}

[data-theme="light"] .lg-hero-grid {
    background-image: 
        linear-gradient(rgba(59,130,246,.08) 1.5px, transparent 1.5px), 
        linear-gradient(90deg, rgba(59,130,246,.08) 1.5px, transparent 1.5px);
}

@keyframes grid-flow-premium {
    0% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    50% { 
        opacity: 0.7;
    }
    100% { 
        transform: translate(50px, 50px) scale(1);
        opacity: 0.5;
    }
}

/* Premium Gradient Orbs - Performance Optimized */
.lg-hero-gradient {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 1200px;
    background: 
        radial-gradient(circle at 30% 40%, rgba(59,130,246,0.06) 0%, transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(139,92,246,0.04) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(16,185,129,0.03) 0%, transparent 70%);
    animation: gradient-orb-float 15s ease-in-out infinite;
    will-change: transform;
}

[data-theme="light"] .lg-hero-gradient {
    background: 
        radial-gradient(circle at 30% 40%, rgba(59,130,246,0.1) 0%, transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(139,92,246,0.08) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(16,185,129,0.06) 0%, transparent 70%);
}

@keyframes gradient-orb-float {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-50%, -52%) scale(1.05);
        opacity: 0.5;
    }
}

/* Premium Floating Particles - Performance Optimized */
.lg-hero-background::before,
.lg-hero-background::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 65%);
    animation: particle-float 20s ease-in-out infinite;
    will-change: transform;
}

.lg-hero-background::before {
    width: 400px;
    height: 400px;
    top: 10%;
    left: 15%;
    animation-delay: 0s;
}

.lg-hero-background::after {
    width: 350px;
    height: 350px;
    bottom: 15%;
    right: 20%;
    background: radial-gradient(circle, rgba(139,92,246,0.06) 0%, transparent 65%);
    animation-delay: 5s;
}

@keyframes particle-float {
    0%, 100% { 
        transform: translate(0, 0);
        opacity: 0.3;
    }
    50% { 
        transform: translate(20px, -30px);
        opacity: 0.4;
    }
}

.lg-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.lg-beta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

[data-theme="light"] .lg-beta-badge {
    background: rgba(59, 130, 246, 0.08);
}

.lg-pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--color-secondary);
    border-radius: 50%;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.lg-hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.lg-gradient-text {
    background: linear-gradient(135deg, #3b82f6, #10b981, #06b6d4);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 5s ease-in-out infinite;
}

.lg-hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.lg-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.lg-stat-item {
    text-align: center;
}

.lg-stat-value {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.lg-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Trustpilot Badge */
.ds-trustpilot-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    background: rgba(248, 250, 252, 0.95);
    border-radius: 60px;
    padding: 0.625rem 1.25rem;
    margin-top: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ds-trustpilot-badge {
    background: rgba(248, 250, 252, 0.98);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.08);
}

.ds-trustpilot-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ds-trustpilot-stars svg {
    width: 20px;
    height: 20px;
}

.ds-trustpilot-text {
    font-size: 0.875rem;
    color: #1e293b;
    font-weight: 500;
}

.ds-trustpilot-text strong {
    font-weight: 700;
}

.ds-trustpilot-logo {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-left: 0.875rem;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.ds-trustpilot-logo svg {
    width: 16px;
    height: 16px;
}

.ds-trustpilot-logo span {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #191919;
    letter-spacing: -0.02em;
}

/* Trustpilot Badge Responsive */
@media (max-width: 576px) {
    .ds-trustpilot-badge {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.625rem;
        padding: 0.75rem 1rem;
    }
    
    .ds-trustpilot-logo {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding-top: 0.5rem;
        width: 100%;
        justify-content: center;
    }
}

/* Console Section */
.lg-console-section {
    padding: 3rem 0 4rem;
    background: var(--bg-primary);
}

[data-theme="light"] .lg-console-section {
    background: #ffffff;
}

/* Control Panel - Grid Layout */
.lg-control-panel {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

[data-theme="light"] .lg-control-panel {
    background: rgba(248, 250, 252, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
}

.lg-control-grid {
    display: grid;
    grid-template-columns: 65% 35%;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    overflow: visible;
}

[data-theme="light"] .lg-control-grid {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.lg-control-section {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
    position: relative;
}

.lg-control-section.border-right {
    border-right: 1px solid rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .lg-control-section.border-right {
    border-right-color: rgba(0, 0, 0, 0.05);
}

.lg-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Custom Location Dropdown with Flags */
.lg-location-selector {
    position: relative;
    min-width: 200px;
    z-index: 999;
}

.lg-location-dropdown-custom {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    background: rgba(30, 41, 59, 0.4);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

[data-theme="light"] .lg-location-dropdown-custom {
    background: white;
    border-color: rgba(0, 0, 0, 0.15);
}

.lg-location-dropdown-custom:hover {
    border-color: var(--color-primary);
}

.lg-location-dropdown-custom.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.lg-location-dropdown-icon {
    position: absolute;
    right: 1rem;
    pointer-events: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.lg-location-dropdown-custom.active .lg-location-dropdown-icon {
    transform: rotate(180deg);
}

.lg-location-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .lg-location-dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.1);
}

.lg-location-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lg-location-option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    transition: all 0.15s ease;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.lg-location-option:hover {
    background: rgba(59, 130, 246, 0.15);
}

.lg-location-option.selected {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-primary);
}

.lg-location-ping {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.lg-location-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.lg-location-dropdown-menu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.lg-location-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 10px;
}

.lg-location-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

.lg-test-tabs {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-width: 300px;
}

.lg-test-tab {
    flex: 1;
    padding: 0.875rem 1rem;
    background: rgba(30, 41, 59, 0.3);
    border: 2px solid transparent;
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-theme="light"] .lg-test-tab {
    background: rgba(0, 0, 0, 0.03);
}

.lg-test-tab:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-primary);
}

.lg-test-tab.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2));
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.lg-input-section {
    padding: 1.5rem;
}

.lg-input-row {
    display: flex;
    gap: 0.75rem;
}

.lg-input-wrapper {
    flex: 1;
    position: relative;
}

.lg-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
}

.lg-input-field {
    width: 100%;
    padding: 1rem 1rem 1rem 2.75rem;
    background: rgba(30, 41, 59, 0.4);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.2s ease;
}

[data-theme="light"] .lg-input-field {
    background: white;
    border-color: rgba(0, 0, 0, 0.15);
}

.lg-input-field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.lg-input-field::placeholder {
    color: var(--text-muted);
}

.lg-run-btn {
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.lg-run-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.lg-run-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.lg-terminal-info-badges {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.lg-info-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
}

[data-theme="light"] .lg-info-badge {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.15);
}

.lg-info-badge.blue { 
    background: rgba(59, 130, 246, 0.1); 
    border-color: rgba(59, 130, 246, 0.25);
}

.lg-info-badge.cyan { 
    background: rgba(6, 182, 212, 0.1); 
    border-color: rgba(6, 182, 212, 0.25);
}

.lg-info-badge.purple { 
    background: rgba(139, 92, 246, 0.1); 
    border-color: rgba(139, 92, 246, 0.25);
}

.lg-info-badge-label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.75rem;
}

.lg-info-badge-value {
    color: var(--text-primary);
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.lg-badge-separator {
    margin: 0 0.5rem;
    opacity: 0.5;
}

.lg-badge-ip {
    color: var(--text-muted);
    font-size: 0.875em;
}

.lg-info-badge.blue .lg-info-badge-value { 
    color: #3b82f6; 
}

.lg-info-badge.cyan .lg-info-badge-value { 
    color: #06b6d4; 
}

.lg-info-badge.purple .lg-info-badge-value { 
    color: #8b5cf6; 
}

.lg-info-badge-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 0.25rem;
}

.lg-info-badge-copy:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.lg-info-badge-copy i {
    font-size: 0.625rem;
}

.lg-terminal {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    overflow: hidden;
    margin-top: 1.5rem;
}

[data-theme="light"] .lg-terminal {
    background: white;
    border-color: rgba(0, 0, 0, 0.08);
}

.lg-terminal-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(15, 23, 42, 0.5);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .lg-terminal-header {
    background: rgba(15, 23, 42, 0.03);
}

.lg-terminal-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lg-terminal-header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.lg-test-files {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lg-test-files-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 0.25rem;
}

.lg-test-file-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    font-family: 'Courier New', monospace;
}

.lg-test-file-link:hover {
    color: var(--color-secondary);
    transform: translateY(-1px);
}

.lg-test-file-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-secondary);
    transition: width 0.3s ease;
}

.lg-test-file-link:hover::after {
    width: 100%;
}

.lg-test-files-separator {
    color: var(--text-muted);
    opacity: 0.5;
    font-weight: 300;
}

.lg-terminal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.lg-terminal-title i {
    color: var(--color-primary);
}

.lg-terminal-actions {
    display: flex;
    gap: 0.5rem;
}

.lg-terminal-btn {
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.lg-terminal-btn:hover {
    background: var(--color-primary);
    color: white;
}

.lg-terminal-controls {
    display: flex;
    gap: 0.375rem;
    margin-left: 1rem;
}

.lg-terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.3);
}

.lg-terminal-dot.red { 
    background: #ef4444; 
}

.lg-terminal-dot.yellow { 
    background: #f59e0b; 
}

.lg-terminal-dot.green { 
    background: #10b981; 
}

.lg-terminal-body {
    padding: 2rem;
    min-height: 500px;
    max-height: 650px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.3);
}

[data-theme="light"] .lg-terminal-body {
    background: rgba(15, 23, 42, 0.02);
}

.lg-terminal-content {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #00ff41;
    white-space: pre-wrap;
    word-wrap: break-word;
}

[data-theme="light"] .lg-terminal-content {
    color: #065f46;
}

/* Syntax Highlighting */
.syntax-command { 
    color: #22d3ee; 
    font-weight: 600; 
}

.syntax-success { 
    color: #10b981; 
}

.syntax-warning { 
    color: #f59e0b; 
}

.syntax-error { 
    color: #ef4444; 
}

.syntax-info { 
    color: #94a3b8; 
}

.syntax-number { 
    color: #a78bfa; 
}

.syntax-highlight { 
    color: #fbbf24; 
}

[data-theme="light"] .syntax-command { 
    color: #0891b2; 
}

[data-theme="light"] .syntax-success { 
    color: #059669; 
}

[data-theme="light"] .syntax-warning { 
    color: #d97706; 
}

[data-theme="light"] .syntax-error { 
    color: #dc2626; 
}

[data-theme="light"] .syntax-info { 
    color: #64748b; 
}

[data-theme="light"] .syntax-number { 
    color: #7c3aed; 
}

[data-theme="light"] .syntax-highlight { 
    color: #ca8a04; 
}

.lg-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    text-align: center;
    color: #00ff41;
}

[data-theme="light"] .lg-empty-state {
    color: #065f46;
}

.lg-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 65, 0.15);
    border-radius: 50%;
    margin-bottom: 1.25rem;
}

[data-theme="light"] .lg-empty-icon {
    background: rgba(6, 95, 70, 0.15);
}

.lg-empty-icon i {
    font-size: 2.5rem;
    color: var(--color-primary);
    opacity: 0.5;
}

[data-theme="light"] .lg-empty-icon i {
    color: #065f46;
}

.lg-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    gap: 1.25rem;
}

.lg-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(59, 130, 246, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.lg-loading-text {
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.lg-info-section {
    padding: 4rem 0;
    background: var(--bg-secondary);
}

[data-theme="light"] .lg-info-section {
    background: #f8fafc;
}

.lg-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.lg-info-card {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
}

[data-theme="light"] .lg-info-card {
    background: white;
}

.lg-info-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.lg-info-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.lg-info-card:hover::before {
    transform: scaleX(1);
}

.lg-info-icon-wrapper {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.15));
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

.lg-info-icon-wrapper i {
    font-size: 2rem;
    color: var(--color-primary);
}

.lg-info-card h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.lg-info-card p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.lg-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lg-info-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.lg-info-list li:last-child {
    margin-bottom: 0;
}

.lg-info-list i {
    color: var(--color-secondary);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Looking Glass Responsive */
@media (max-width: 991px) {
    .lg-control-grid {
        grid-template-columns: 1fr;
    }
    
    .lg-control-section.border-right {
        border-right: none;
        border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    }
    
    [data-theme="light"] .lg-control-section.border-right {
        border-bottom-color: rgba(0, 0, 0, 0.05);
    }
    
    .lg-location-selector,
    .lg-test-tabs {
        min-width: auto;
        width: 100%;
    }
    
    .lg-terminal-header-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .lg-terminal-info-badges {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .lg-hero-section {
        padding: 5rem 0 4rem;
    }
    
    .lg-console-section {
        padding: 2rem 0 3rem;
    }
    
    .lg-control-panel {
        padding: 0;
    }
    
    .lg-control-section {
        padding: 1.25rem;
    }
    
    .lg-input-section {
        padding: 1.25rem;
    }
    
    .lg-input-row {
        flex-direction: column;
    }
    
    .lg-run-btn {
        width: 100%;
        justify-content: center;
    }
    
    .lg-test-tabs {
        flex-direction: column;
    }
    
    .lg-terminal-body {
        min-height: 350px;
        padding: 1.5rem;
    }
    
    .lg-terminal-content {
        font-size: 0.8125rem;
    }
    
    .lg-terminal-actions {
        flex-wrap: wrap;
    }
    
    .lg-terminal-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .lg-terminal-header-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .lg-test-files {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {
    .lg-control-panel {
        padding: 1rem;
    }
    
    .lg-terminal-btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    
    .lg-info-badge {
        flex: 1;
        min-width: calc(50% - 0.5rem);
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    
    .lg-info-badge-label {
        font-size: 0.6875rem;
    }
}

/* ============================================
   DEDICATED SERVER - PREMIUM HERO ANIMATIONS
   ============================================ */

/* Premium Floating Orbs - Performance Optimized */
.ds-premium-hero .ds-floating-orb {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: orb-appear 2s ease-out forwards, orb-float 18s ease-in-out infinite;
    will-change: transform, opacity;
}

.ds-orb-1 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, rgba(59,130,246,0.02) 60%, transparent);
    top: 20%;
    left: 10%;
    animation-delay: 0.5s;
}

.ds-orb-2 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, rgba(139,92,246,0.015) 60%, transparent);
    top: 60%;
    right: 15%;
    animation-delay: 1s;
}

.ds-orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(16,185,129,0.07) 0%, rgba(16,185,129,0.01) 60%, transparent);
    bottom: 25%;
    left: 20%;
    animation-delay: 1.5s;
}

@keyframes orb-appear {
    from { 
        opacity: 0;
        transform: scale(0.8);
    }
    to { 
        opacity: 0.6;
        transform: scale(1);
    }
}

@keyframes orb-float {
    0%, 100% { 
        transform: translate(0, 0);
        opacity: 0.5;
    }
    50% { 
        transform: translate(15px, -25px);
        opacity: 0.6;
    }
}

/* Animated Dots Pattern - Copied from Index.php */
.ds-animated-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 1;
}

.ds-animated-dots span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(96,165,250,.4);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(96,165,250,.3);
    animation: dot-float 18s ease-in-out infinite;
    will-change: transform, opacity;
}

[data-theme="light"] .ds-animated-dots span {
    background: rgba(59,130,246,.6);
    box-shadow: 0 0 12px rgba(59,130,246,.4);
}

.ds-animated-dots span:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; animation-duration: 18s; }
.ds-animated-dots span:nth-child(2) { top: 25%; left: 80%; animation-delay: 1.5s; animation-duration: 20s; }
.ds-animated-dots span:nth-child(3) { top: 45%; left: 15%; animation-delay: 3s; animation-duration: 19s; }
.ds-animated-dots span:nth-child(4) { top: 55%; right: 10%; animation-delay: 2.2s; animation-duration: 21s; }
.ds-animated-dots span:nth-child(5) { bottom: 20%; left: 70%; animation-delay: 3.7s; animation-duration: 18.5s; }
.ds-animated-dots span:nth-child(6) { top: 35%; left: 45%; animation-delay: 0.7s; animation-duration: 19.5s; }
.ds-animated-dots span:nth-child(7) { top: 65%; left: 55%; animation-delay: 4.5s; animation-duration: 20.5s; }
.ds-animated-dots span:nth-child(8) { top: 75%; right: 25%; animation-delay: 2.7s; animation-duration: 22s; }
.ds-animated-dots span:nth-child(9) { bottom: 30%; left: 35%; animation-delay: 3.3s; animation-duration: 21.5s; }
.ds-animated-dots span:nth-child(10) { top: 10%; right: 40%; animation-delay: 1.2s; animation-duration: 19.8s; }

@keyframes dot-float {
    0%, 100% { 
        transform: translate(0, 0);
        opacity: 0.4;
    }
    25% { 
        transform: translate(20px, -30px);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-20px, -60px);
        opacity: 0.3;
    }
    75% { 
        transform: translate(30px, -40px);
        opacity: 0.5;
    }
}

/* Premium Shimmer Effect - Performance Optimized */
.ds-premium-hero .lg-hero-background::before {
    background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
}

.ds-premium-hero .lg-hero-background::after {
    background: radial-gradient(circle, rgba(139,92,246,0.06) 0%, transparent 70%);
}

/* Responsive - Performance Optimized */
@media (max-width: 768px) {
    .ds-floating-orb {
        width: 180px !important;
        height: 180px !important;
    }
    
    .ds-animated-dots span {
        width: 4px;
        height: 4px;
        box-shadow: 0 0 6px rgba(96,165,250,.3);
    }
    
    /* Disable heavy animations on mobile */
    .lg-hero-gradient {
        animation: none;
    }
    
    .ds-animated-dots span:nth-child(n+6) {
        display: none;
    }
}


/* ============================================
   38. VPS PAGE - COMPLETE STYLES
   VPS Sayfası İçin Tüm Özel Stiller
   ============================================ */

/* Hero Banner Image Styling - Premium Frame */
.hero-image-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
}

.hero-image-frame {
    position: relative;
    padding: 12px;
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.2) 0%, 
        rgba(16, 185, 129, 0.2) 50%, 
        rgba(236, 72, 153, 0.2) 100%);
    border-radius: 24px;
    box-shadow: 
        0 0 0 1px rgba(59, 130, 246, 0.3),
        0 20px 60px rgba(59, 130, 246, 0.4),
        inset 0 0 40px rgba(59, 130, 246, 0.1);
    transition: all 0.4s ease;
}

[data-theme="light"] .hero-image-frame {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.15) 0%, 
        rgba(16, 185, 129, 0.15) 50%, 
        rgba(236, 72, 153, 0.15) 100%);
    box-shadow: 
        0 0 0 1px rgba(59, 130, 246, 0.2),
        0 20px 60px rgba(59, 130, 246, 0.3),
        inset 0 0 40px rgba(59, 130, 246, 0.08);
}

.hero-image-frame:hover {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.3) 0%, 
        rgba(16, 185, 129, 0.3) 50%, 
        rgba(236, 72, 153, 0.3) 100%);
    box-shadow: 
        0 0 0 2px rgba(59, 130, 246, 0.5),
        0 30px 80px rgba(59, 130, 246, 0.5),
        inset 0 0 60px rgba(59, 130, 246, 0.15);
    transform: scale(1.02);
}

/* Köşe Süslemeleri */
.frame-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid;
    border-color: var(--color-primary);
    animation: cornerPulse 2s ease-in-out infinite;
}

.frame-corner-tl {
    top: -8px;
    left: -8px;
    border-right: none;
    border-bottom: none;
    border-radius: 8px 0 0 0;
}

.frame-corner-tr {
    top: -8px;
    right: -8px;
    border-left: none;
    border-bottom: none;
    border-radius: 0 8px 0 0;
}

.frame-corner-bl {
    bottom: -8px;
    left: -8px;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 8px;
}

.frame-corner-br {
    bottom: -8px;
    right: -8px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 8px 0;
}

@keyframes cornerPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.hero-banner-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    transition: all 0.4s ease;
}

.hero-image-frame:hover .hero-banner-image {
    border-radius: 18px;
}

/* Responsive */
@media (max-width: 992px) {
    .hero-image-wrapper {
        margin-bottom: 2rem;
    }
    
    .frame-corner {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 768px) {
    .hero-image-frame {
        padding: 8px;
        border-radius: 16px;
    }
    
    .hero-banner-image {
        border-radius: 12px;
    }
    
    .frame-corner {
        width: 25px;
        height: 25px;
    }
    
    .frame-corner-tl,
    .frame-corner-tr {
        top: -6px;
    }
    
    .frame-corner-bl,
    .frame-corner-br {
        bottom: -6px;
    }
    
    .frame-corner-tl,
    .frame-corner-bl {
        left: -6px;
    }
    
    .frame-corner-tr,
    .frame-corner-br {
        right: -6px;
    }
}

/* VPS Accordion Packages Styling */
.vps-accordion-packages {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
}

.vps-package-item {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: visible;
    transition: all 0.3s ease;
    position: relative;
}

[data-theme="light"] .vps-package-item {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.vps-package-item:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
}

.vps-package-item.popular-package {
    border-color: var(--color-accent-orange);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
}

[data-theme="light"] .vps-package-item.popular-package {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}

.vps-package-item.popular-package:hover {
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.3);
    transform: translateY(-2px);
}

[data-theme="light"] .vps-package-item.popular-package:hover {
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.3);
}

.vps-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 0.4rem 1.25rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    z-index: 10;
    animation: badgePulse 2s ease-in-out infinite;
}

[data-theme="light"] .vps-popular-badge {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
    }
}

.vps-popular-badge svg {
    animation: starRotate 3s linear infinite;
}

@keyframes starRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.vps-package-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.vps-package-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.vps-package-header:hover::before {
    transform: scaleY(1);
}

.vps-package-item.popular-package .vps-package-header::before {
    background: linear-gradient(180deg, #f59e0b, #d97706);
}

[data-theme="light"] .vps-package-item.popular-package .vps-package-header::before {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
}

.vps-package-header:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.03), transparent);
}

.vps-package-item.popular-package .vps-package-header:hover {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.05), transparent);
}

[data-theme="light"] .vps-package-item.popular-package .vps-package-header:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.05), transparent);
}

.vps-package-item.active .vps-package-header {
    background: rgba(59, 130, 246, 0.05);
}

.vps-package-item.popular-package.active .vps-package-header {
    background: rgba(245, 158, 11, 0.05);
}

[data-theme="light"] .vps-package-item.popular-package.active .vps-package-header {
    background: rgba(59, 130, 246, 0.05);
}

.vps-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 200px;
}

/* Ryzen Badge Wrapper */
.vps-package-name-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

/* Ryzen Badge Styling - Premium Hardware Look */
.ryzen-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(20, 20, 25, 0.9); /* Dark matte background */
    color: #ffffff;
    padding: 0.35rem 0.85rem;
    border-radius: 4px;
    border: 1px solid rgba(237, 28, 36, 0.4); /* Thin Ryzen Red */
    border-left: 3px solid #ed1c24; /* Accent on left */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    width: fit-content;
}

.ryzen-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(237, 28, 36, 0.1), transparent);
    transform: translateX(-100%);
    animation: ryzenShine 3s infinite;
}

@keyframes ryzenShine {
    0% { transform: translateX(-100%); }
    20% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

.ryzen-badge svg {
    flex-shrink: 0;
    color: #ed1c24;
    filter: drop-shadow(0 0 5px rgba(237, 28, 36, 0.5));
}

.vps-package-item:hover .ryzen-badge {
    border-color: #ed1c24;
    box-shadow: 0 0 15px rgba(237, 28, 36, 0.15);
    background: rgba(30, 30, 35, 0.95);
}

.vps-package-item.popular-package .ryzen-badge {
    border-color: var(--color-accent-orange);
    border-left-color: var(--color-accent-orange);
}

.vps-package-item.popular-package .ryzen-badge svg {
    color: var(--color-accent-orange);
    filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.5));
}

.vps-package-item.popular-package .ryzen-badge::after {
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);
}

.vps-toggle-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(59, 130, 246, 0.1);
    border-radius: 6px;
}

.vps-toggle-icon svg {
    color: var(--color-primary);
}

.vps-package-item.popular-package .vps-toggle-icon {
    background: rgba(245, 158, 11, 0.1);
}

.vps-package-item.popular-package .vps-toggle-icon svg {
    color: var(--color-accent-orange);
}

[data-theme="light"] .vps-package-item.popular-package .vps-toggle-icon {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .vps-package-item.popular-package .vps-toggle-icon svg {
    color: var(--color-primary);
}

.vps-package-item.active .vps-toggle-icon {
    transform: rotate(180deg);
    background: var(--color-primary);
}

.vps-package-item.active .vps-toggle-icon svg {
    color: white;
}

.vps-package-item.popular-package.active .vps-toggle-icon {
    background: var(--color-accent-orange);
}

[data-theme="light"] .vps-package-item.popular-package.active .vps-toggle-icon {
    background: var(--color-primary);
}

.vps-package-name {
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--text-primary), var(--color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.vps-package-item.popular-package .vps-package-name {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nameGlow 2s ease-in-out infinite;
}

[data-theme="light"] .vps-package-item.popular-package .vps-package-name {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes nameGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
}

.vps-specs-row {
    display: flex;
    gap: 2rem;
    flex: 1;
    justify-content: center;
    margin: 0 1rem;
}

.vps-spec-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[data-theme="light"] .vps-spec-item {
    background: rgba(59, 130, 246, 0.08);
}

.vps-spec-item:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.spec-icon {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* Corporate Look - All spec icons same color */
.cpu-spec .spec-icon,
.ram-spec .spec-icon,
.nvme-spec .spec-icon,
.backup-spec .spec-icon {
    color: var(--color-primary);
}

[data-theme="light"] .cpu-spec .spec-icon,
[data-theme="light"] .ram-spec .spec-icon,
[data-theme="light"] .nvme-spec .spec-icon,
[data-theme="light"] .backup-spec .spec-icon {
    color: #64748b;
}

.spec-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.spec-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

/* Corporate Look - All spec values same color */
.cpu-spec .spec-value,
.ram-spec .spec-value,
.nvme-spec .spec-value,
.backup-spec .spec-value {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .cpu-spec .spec-value,
[data-theme="light"] .ram-spec .spec-value,
[data-theme="light"] .nvme-spec .spec-value,
[data-theme="light"] .backup-spec .spec-value {
    background: linear-gradient(135deg, #475569, #1e293b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.spec-label {
    font-size: 0.77rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.vps-header-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.vps-price-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.vps-price-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.vps-price-main {
    font-size: 2.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    animation: priceGlow 2s ease-in-out infinite;
}

[data-theme="light"] .vps-price-main {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes priceGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2);
    }
}


.vps-price-period {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.8;
}

.vps-price-old-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.vps-price-old {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.vps-discount-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #10b981, #059669);
    padding: 0.25rem 0.65rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    animation: badgeShine 2s ease-in-out infinite;
}

[data-theme="light"] .vps-discount-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}


.vps-package-item.popular-package .vps-discount-badge {
    background: linear-gradient(135deg, #ec4899, #db2777);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

[data-theme="light"] .vps-package-item.popular-package .vps-discount-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}


.vps-order-btn {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.vps-order-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.vps-order-btn:hover::before {
    left: 100%;
}

[data-theme="light"] .vps-order-btn {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

.vps-order-btn:hover {
    background: linear-gradient(135deg, var(--color-primary), #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.vps-package-item.popular-package .vps-order-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.vps-package-item.popular-package .vps-order-btn:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

[data-theme="light"] .vps-package-item.popular-package .vps-order-btn {
    background: linear-gradient(135deg, #2563eb, #1e40af);
}

[data-theme="light"] .vps-package-item.popular-package .vps-order-btn:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.vps-package-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
    padding: 0 2rem;
    opacity: 0;
}

.vps-package-item.active .vps-package-details {
    max-height: 600px;
    padding: 1.5rem 2rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 1;
    animation: slideInDetail 0.5s ease;
}

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

[data-theme="light"] .vps-package-item.active .vps-package-details {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.vps-package-item.popular-package.active .vps-package-details {
    border-top-color: rgba(245, 158, 11, 0.2);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.02), transparent);
}

[data-theme="light"] .vps-package-item.popular-package.active .vps-package-details {
    border-top-color: rgba(59, 130, 246, 0.2);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.02), transparent);
}

.vps-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.vps-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vps-feature svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Corporate Look - All feature ticks same color */
.vps-feature svg {
    color: var(--color-primary) !important;
}

[data-theme="light"] .vps-feature svg {
    color: var(--color-primary) !important;
}

.vps-feature:hover svg {
    transform: scale(1.2) rotate(5deg);
}

.vps-feature span {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.vps-server-locations {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .vps-server-locations {
    border-top-color: rgba(0, 0, 0, 0.05);
}

.location-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.location-flags {
    display: flex;
    gap: 0.5rem;
}

.location-flags .fi {
    font-size: 1.5rem; /* SVG flag size (24px - compact) */
    border-radius: 4px; /* Oval kenarlar */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    display: inline-block;
    overflow: hidden; /* Kenarların düzgün oval görünmesi için */
}

.location-flags .fi:hover {
    transform: translateY(-3px) scale(1.05);
}

.location-flags {
    animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .vps-specs-row {
        gap: 1.5rem;
    }
    .vps-header-right {
        gap: 1.5rem;
    }
    .vps-spec-item {
        padding: 0.5rem 0.85rem;
        gap: 0.45rem;
    }
    .spec-value {
        font-size: 1.38rem;
    }
    .spec-icon {
        font-size: 1.15rem;
        width: 22px;
    }
}

@media (max-width: 992px) {
    .vps-package-header {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .vps-header-left {
        flex: 0 0 160px;
    }
    .vps-specs-row {
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
        gap: 1.25rem;
        margin: 1rem 0 0 0;
        flex-wrap: wrap;
    }
    .vps-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ryzen-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }
}

@media (max-width: 768px) {
    .vps-popular-badge {
        font-size: 0.65rem;
        padding: 0.35rem 1rem;
        top: -10px;
    }
    
    .vps-package-header {
        padding: 1.25rem 1.5rem;
    }
    
    .vps-package-header::before {
        width: 3px;
    }
    
    .vps-header-left {
        flex: 0 0 140px;
    }
    
    .vps-toggle-icon {
        width: 24px;
        height: 24px;
    }
    
    .vps-package-name {
        font-size: 1rem;
    }
    
    .vps-package-name-wrapper {
        gap: 0.35rem;
    }
    
    .ryzen-badge {
        font-size: 0.6rem;
        padding: 0.2rem 0.45rem;
        gap: 0.25rem;
    }
    
    .ryzen-badge svg {
        width: 12px;
        height: 12px;
    }
    
    .vps-spec-item {
        padding: 0.45rem 0.65rem;
        gap: 0.4rem;
        flex: 0 0 calc(50% - 0.5rem);
    }
    
    .spec-icon {
        font-size: 1rem;
        width: 20px;
    }
    
    .spec-value {
        font-size: 1.21rem;
    }
    
    .spec-label {
        font-size: 0.65rem;
    }
    
    .vps-specs-row {
        gap: 1rem;
    }
    
    .vps-price-main {
        font-size: 1.75rem;
    }
    
    .vps-order-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
    
    .vps-features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .location-flags .fi {
        font-size: 1.25rem; /* Smaller for mobile (20px) */
    }
}


/* OS Apps Scroller - Full Width */
.os-apps-scroller {
    padding: 60px 0 0px;
    margin-top: 3rem;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    overflow: hidden;
}

.os-apps-header {
    padding-bottom: 40px;
}

.os-apps-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.os-apps-title .text-primary {
    color: #3b82f6;
}

[data-theme="light"] .os-apps-title {
    color: #1e293b;
}

.scroller-wrapper {
    width: 100%;
    overflow: hidden;
}

.scroller-x {
    width: 100%;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
    mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
}

.scroller-x__list {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    width: max-content;
}

/* Sağa giden animasyon - elemanlar sağa kayar */
.scroller-x[data-direction="right"] .scroller-x__list {
    animation: scrollRight 50s linear infinite;
}

/* Sola giden animasyon - elemanlar sola kayar */
.scroller-x[data-direction="left"] .scroller-x__list {
    animation: scrollLeft 50s linear infinite;
}

@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Hover'da durdur */
.scroller-x:hover .scroller-x__list {
    animation-play-state: paused;
}

.scroller-x + .scroller-x {
    margin-top: 1rem;
}

/* OS Brand Button - Resimdeki beyaz pill tasarım */
.os-brand-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
    background: #ffffff;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: default;
}

.os-brand-btn:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

[data-theme="light"] .os-brand-btn {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .os-brand-btn:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.os-brand-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.os-brand-icon img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

.os-brand-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}

[data-theme="light"] .os-brand-name {
    color: #1e293b;
}

/* Responsive */
@media (max-width: 768px) {
    .os-apps-scroller {
        padding: 40px 0 60px;
    }
    
    .os-apps-title {
        font-size: 1.25rem;
    }
    
    .os-brand-btn {
        padding: 0.4rem 1.25rem 0.4rem 0.4rem;
        gap: 0.75rem;
    }
    
    .os-brand-icon {
        width: 40px;
        height: 40px;
    }
    
    .os-brand-icon img {
        max-width: 32px;
        max-height: 32px;
    }
    
    .os-brand-name {
        font-size: 0.875rem;
    }
}


/* Reliable Network Section - Premium Design */
.reliable-network-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    position: relative;
    overflow: hidden;
}

.reliable-network-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.network-content {
    position: relative;
    z-index: 1;
}

.network-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    font-style: normal;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}

.network-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 560px;
}

.network-features {
    display: flex;
    gap: 2rem;
}

.network-feature-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex: 1;
}

.network-feature-icon {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    flex-shrink: 0;
}

.network-feature-content h4 {
    color: #fff;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.5rem;
}

.network-feature-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

.network-stats-cards {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}

.network-stat-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    transition: all 0.3s ease;
    position: relative;
}

.network-stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
    border-radius: 3px 0 0 3px;
}

.network-stat-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateX(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-value-large {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label-bold {
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.stat-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

[data-theme="light"] .reliable-network-section {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

[data-theme="light"] .network-stat-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(27, 60, 136, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .network-stat-card:hover {
    box-shadow: 0 12px 40px rgba(27, 60, 136, 0.12);
}

@media (max-width: 991px) {
    .reliable-network-section {
        padding: 4rem 0;
    }
    
    .network-content {
        margin-bottom: 2.5rem;
    }
    
    .network-stats-cards {
        flex-direction: row;
    }
    
    .network-stat-card {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .reliable-network-section {
        padding: 3rem 0;
    }
    
    .network-features {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .network-stats-cards {
        flex-direction: column;
    }
    
    .stat-value-large {
        font-size: 1.75rem;
    }
    
    .network-stat-card {
        padding: 1.5rem;
    }
}


/* How We Stack Up - Comparison Section */
.comparison-section {
    padding: 5rem 0;
    background: var(--bg-primary);
    position: relative;
}

.comparison-main-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    font-style: normal;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

[data-theme="light"] .comparison-main-title {
    color: #1e293b;
}

.comparison-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
    font-weight: 400;
}

[data-theme="light"] .comparison-subtitle {
    color: #64748b;
}

.comparison-table-wrapper {
    overflow-x: auto;
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .comparison-table-wrapper {
    background: #ffffff;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.comparison-table thead th {
    padding: 1.5rem 1rem;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .comparison-table thead th {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.comparison-table .feature-column {
    width: 200px;
    text-align: left;
    padding-left: 2rem;
}

.comparison-table .provider-column {
    width: calc((100% - 200px) / 5);
}

/* Highlight Column (Rabisu) */
.comparison-table .highlight-column {
    background: rgba(59, 130, 246, 0.03);
    position: relative;
}

.comparison-table thead th.highlight-column {
    border: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    border-radius: 16px 16px 0 0;
    background: rgba(59, 130, 246, 0.05);
}

.comparison-table tbody td.highlight-column {
    border-left: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
}

.comparison-table tbody tr:last-child td.highlight-column {
    border-bottom: 2px solid var(--color-primary);
    border-radius: 0 0 16px 16px;
}

[data-theme="light"] .comparison-table .highlight-column {
    background: rgba(59, 130, 246, 0.04);
}

/* Provider Logos */
.provider-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

.provider-logo img {
    max-height: 32px;
    max-width: 120px;
    object-fit: contain;
}

.rabisu-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: #3b82f6;
}

.logo-text-fallback {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Competitor Names */
.competitor-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
}

.vultr-text {
    color: #007bfc;
    font-weight: 800;
    letter-spacing: 1px;
}

.linode-text {
    color: #00b050;
    font-weight: 600;
    font-style: italic;
}

.do-text {
    color: #0080ff;
    font-weight: 600;
}

.hetzner-text {
    color: #d50c2d;
    font-weight: 700;
}

[data-theme="light"] .competitor-name {
    opacity: 0.85;
}

/* Table Body */
.comparison-table tbody td {
    padding: 1rem;
    text-align: center;
    vertical-align: middle;
    color: var(--text-primary);
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .comparison-table tbody td {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.comparison-table tbody tr:hover td {
    background: rgba(59, 130, 246, 0.02);
}

.comparison-table tbody tr:hover td.highlight-column {
    background: rgba(59, 130, 246, 0.08);
}

.feature-name {
    text-align: left !important;
    padding-left: 2rem !important;
    font-weight: 500;
    color: var(--text-muted);
}

.price-cell {
    font-weight: 600;
}

.highlight-column.price-cell strong,
.highlight-column strong {
    color: var(--color-primary);
    font-size: 1.1rem;
}

/* Check & X Icons */
.check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
}

.x-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-red);
}

/* CTA Row */
.cta-row td {
    padding: 1.5rem 1rem !important;
    border-bottom: none !important;
}

.comparison-order-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    padding: 0.875rem 2.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.comparison-order-btn:hover {
    background: linear-gradient(135deg, var(--color-primary-dark), #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    color: white;
}

/* Responsive */
@media (max-width: 1200px) {
    .comparison-table {
        min-width: 900px;
    }
}

@media (max-width: 768px) {
    .comparison-section {
        padding: 3rem 0;
    }
    
    .comparison-main-title {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }
    
    .comparison-table-wrapper {
        margin: 0 -1rem;
        border-radius: 0;
    }
    
    .comparison-table thead th,
    .comparison-table tbody td {
        padding: 0.875rem 0.75rem;
    }
    
    .feature-name {
        padding-left: 1rem !important;
        font-size: 0.85rem;
    }
    
    .provider-logo img {
        max-height: 24px;
    }
    
    .competitor-name {
        font-size: 0.9rem;
    }
    
    .comparison-order-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.75rem;
    }
}


/* VPS Information Section - Inline Styles to Classes */
.vps-info-title {
    font-size: 1.75rem;
}

.vps-text-paragraph {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.vps-text-paragraph.vps-text-last {
    margin-bottom: 0;
}

.vps-text-hidden {
    display: none;
}

.vps-read-more {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}

.vps-read-more:hover {
    color: var(--color-primary-light);
    transform: translateX(2px);
}

.vps-packages-row {
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .vps-packages-row {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.vps-pricing-list {
    font-size: 0.875rem;
}

.vps-price-item {
    padding: 0.4rem 0;
}

.vps-check-icon {
    width: 24px;
    height: 24px;
}

.vps-price-text {
    font-size: 0.875rem;
}

.vps-packages-hidden {
    display: none;
}

.vps-packages-note {
    font-size: 0.9rem;
    margin-top: 1rem;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .vps-info-title {
        font-size: 1.5rem;
    }
    
    .vps-text-paragraph {
        font-size: 0.875rem;
    }
    
    .vps-read-more {
        margin-top: 0.75rem;
    }
    
    .vps-packages-row {
        padding-top: 2rem;
    }
}


/* ============================================
   END OF VPS PAGE STYLES
   ============================================ */


/* ============================================
   40. PREMIUM LOCATION HUB (DEDICATED SERVER)
   Advanced Data Center Grid with Tabs
   ============================================ */

.ds-loc-section {
    position: relative;
    padding: var(--spacing-4xl) 0;
    background: var(--bg-primary);
    overflow: hidden;
}

/* Background Elements */
.ds-loc-bg-map {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg width="100%" height="100%" viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M..." fill="%233b82f6" opacity="0.05"/%3E%3C/svg%3E');
    background-size: cover;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

.ds-loc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 100%;
    margin: 0 auto var(--spacing-2xl);
    position: relative;
    z-index: 1;
    gap: 2rem;
}

@media (max-width: 991px) {
    .ds-loc-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .ds-loc-header-content {
        text-align: center;
    }
}

.ds-loc-header-content {
    flex: 1;
    text-align: left;
}

.ds-loc-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ds-loc-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 600px;
}

/* PING MONITOR WIDGET */
.ds-ping-monitor {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.25rem 1.5rem; /* Padding artırıldı */
    min-width: 340px; /* Genişlik artırıldı */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}

.ds-ping-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ds-ping-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ds-live-indicator {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 10px #10b981;
    animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ds-ping-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem; /* Dikey ve Yatay boşluk artırıldı */
}

.ds-ping-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.ds-ping-loc {
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px; /* Bayrak ve yazı arası açıldı */
}

.ds-ping-loc .fi {
    width: 18px; /* Bayrak boyutu sabitlendi */
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.ds-ping-val {
    color: var(--color-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Tab Navigation */
.ds-loc-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: var(--spacing-xl) auto;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
}

.ds-loc-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(148, 163, 184, 0.85);
    padding: 1rem 1.8rem;
    border-radius: 0;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: -1px;
    font-size: 0.9rem;
}

.ds-loc-tab-btn:hover {
    color: var(--text-primary);
}

.ds-loc-tab-btn:hover {
    color: var(--text-primary);
}

.ds-loc-tab-btn.active {
    background: transparent;
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    box-shadow: none;
    font-weight: 700;
}

/* ================================================
   SPLIT SCREEN LAYOUT (Option 2) - MODERN UNIFIED
   ================================================ */

.ds-split-layout {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 0;
    margin-top: 2.5rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.3) 100%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}

.ds-split-layout::before {
    content: '';
    position: absolute;
    top: 140px;
    left: 45%;
    width: 1px;
    height: calc(100% - 140px);
    background: linear-gradient(
        180deg, 
        transparent 0%, 
        rgba(59, 130, 246, 0.4) 10%,
        rgba(59, 130, 246, 0.5) 50%,
        rgba(59, 130, 246, 0.4) 90%,
        transparent 100%
    );
    z-index: 20;
}

/* Left Side - Map */
.ds-split-map {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    backdrop-filter: none;
    min-height: 700px;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-map-container {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: visible;
}

.ds-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.ds-map-overlay h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ds-map-overlay p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem 0;
}

/* Eski map-bg (artık kullanılmıyor, referans için) */
/* SVG Harita */
.ds-map-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: auto;
    object-fit: contain;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

[data-theme="light"] .ds-map-svg {
    opacity: 0.7;
}

.ds-map-markers {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 80%;
    z-index: 2;
}

.ds-map-marker {
    position: absolute;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 5;
}

.ds-marker-dot {
    display: block;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    transition: all 0.25s ease;
}

.ds-map-marker:hover .ds-marker-dot {
    width: 12px;
    height: 12px;
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.1), 0 2px 12px rgba(59, 130, 246, 0.5);
}

.ds-marker-label {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    color: var(--text-primary);
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(59, 130, 246, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
}

.ds-map-marker:hover {
    z-index: 1000;
}

.ds-map-marker:hover .ds-marker-label {
    opacity: 1;
    top: -34px;
}

/* Right Side - Location List */
.ds-split-list {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 3rem 2.5rem 3rem 3rem;
    box-shadow: none;
    backdrop-filter: none;
    max-height: 700px;
    overflow: visible;
    position: relative;
}

.ds-list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.ds-list-header-content {
    flex: 1;
}

.ds-list-header h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ds-list-header p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

.ds-list-count {
    font-size: 0.8rem;
    color: var(--color-primary);
    background: rgba(59, 130, 246, 0.08);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.ds-list-count:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: var(--color-primary);
}

.ds-list-count i {
    font-size: 0.85rem;
}

.ds-location-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    padding-top: 1rem;
    padding-right: 0.5rem;
    margin-right: -0.5rem;
    /* Scroll alanı için yükseklik hesabı - header (yaklaşık 80px) çıkarılıyor */
    max-height: calc(700px - 100px);
}

/* List Items - Modern Flat Design */
.ds-list-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    margin: 0 -0.5rem;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}

.ds-list-item:hover {
    background: rgba(59, 130, 246, 0.04);
    border-bottom-color: transparent;
}

.ds-list-item-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1rem;
}

.ds-list-item-flag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
}

.ds-list-item:hover .ds-list-item-flag {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
}

.ds-list-item-flag .fi {
    font-size: 1.6rem;
    border-radius: 4px;
    box-shadow: none;
}

.ds-list-item-info {
    flex: 1;
}

.ds-list-item-info h4 {
    margin: 0 0 0.4rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.01em;
}

.ds-list-badge {
    font-size: 0.6rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ds-list-badge.flagship {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.ds-list-item-info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Ping değeri - arka plan kutusu yok */
.ds-list-item-ping {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-secondary);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

@keyframes pulse-dot-subtle {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
    }
}

.ds-list-item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ds-list-item-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.ds-list-item-specs span {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

.ds-list-item-specs i {
    color: var(--color-primary);
    font-size: 0.7rem;
    opacity: 0.6;
}

.ds-list-item-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-left: auto;
}

/* Text Button - Minimal */
.ds-list-btn-text {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.ds-list-btn-text.primary {
    background: transparent;
    color: var(--color-primary);
    border-color: rgba(59, 130, 246, 0.2);
}

.ds-list-btn-text.primary:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--color-primary);
}

/* Custom Scrollbar for List */
.ds-location-list::-webkit-scrollbar {
    width: 4px;
}

.ds-location-list::-webkit-scrollbar-track {
    background: transparent;
}

.ds-location-list::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.2);
    border-radius: 4px;
}

.ds-location-list::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.4);
}

/* Responsive */
@media (max-width: 1200px) {
    .ds-split-layout {
        grid-template-columns: 1fr;
        gap: 0;
        border-radius: 24px;
    }
    
    .ds-split-layout::before {
        display: none;
    }
    
    .ds-split-map {
        min-height: 500px;
        padding: 2rem 1.5rem;
        border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    }
    
    .ds-map-container {
        height: 450px;
    }
    
    .ds-split-list {
        max-height: 600px;
        padding: 2.5rem 2rem;
    }
    
    .ds-location-list {
        max-height: calc(600px - 100px);
    }
}

@media (max-width: 768px) {
    .ds-split-layout {
        border-radius: 16px;
    }
    
    .ds-split-map {
        min-height: 400px;
        padding: 1.5rem 1rem;
    }
    
    .ds-map-container {
        height: 350px;
    }
    
    .ds-map-marker {
        transform: scale(0.85);
    }
    
    .ds-marker-label {
        font-size: 0.6rem;
        padding: 0.25rem 0.5rem;
    }
    
    .ds-marker-label {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }
    
    .ds-split-list {
        padding: 2rem 1.5rem;
        max-height: none;
    }
    
    .ds-location-list {
        max-height: 500px;
    }
    
    .ds-list-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .ds-list-header h3 {
        font-size: 1.4rem;
    }
    
    .ds-list-count {
        width: 100%;
        justify-content: center;
    }
    
    .ds-list-item {
        padding: 1.2rem 0.8rem;
    }
    
    .ds-list-item-header {
        gap: 0.8rem;
    }
    
    .ds-list-item-flag {
        width: 36px;
        height: 36px;
    }
    
    .ds-list-item-flag .fi {
        font-size: 1.4rem;
    }
    
    .ds-list-item-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .ds-list-item-specs {
        width: 100%;
    }
    
    .ds-list-item-actions {
        width: 100%;
        justify-content: stretch;
        margin-left: 0;
    }
    
    .ds-list-btn-text {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
}

/* Light Mode */
[data-theme="light"] .ds-split-layout {
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%);
    border-color: rgba(226, 232, 240, 0.6);
}

[data-theme="light"] .ds-split-layout::before {
    background: linear-gradient(
        180deg, 
        transparent 0%, 
        rgba(59, 130, 246, 0.2) 20%,
        rgba(59, 130, 246, 0.3) 50%,
        rgba(59, 130, 246, 0.2) 80%,
        transparent 100%
    );
}

[data-theme="light"] .ds-split-map,
[data-theme="light"] .ds-split-list {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
}

[data-theme="light"] .ds-list-item {
    background: transparent;
    border-bottom-color: rgba(226, 232, 240, 0.5);
}

[data-theme="light"] .ds-list-item:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.06) 0%, transparent 100%);
    border-bottom-color: rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .ds-list-item-flag {
    background: #f8fafc;
    border-color: rgba(226, 232, 240, 0.8);
}

[data-theme="light"] .ds-list-item:hover .ds-list-item-flag {
    background: #e0f2fe;
    border-color: rgba(59, 130, 246, 0.35);
}

[data-theme="light"] .ds-marker-label {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(226, 232, 240, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ds-list-header {
    background: transparent;
}

[data-theme="light"] .ds-list-header h3 {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .ds-list-count {
    background: #eff6ff;
    border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="light"] .ds-list-count:hover {
    background: #dbeafe;
    border-color: var(--color-primary);
}

[data-theme="light"] .ds-list-btn-text.primary {
    color: var(--color-primary);
    border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="light"] .ds-list-btn-text.primary:hover {
    background: #eff6ff;
    border-color: var(--color-primary);
}

[data-theme="light"] .ds-map-overlay h3 {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .ds-list-count {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
}

@media (max-width: 1200px) {
    [data-theme="light"] .ds-split-map {
        border-bottom-color: rgba(59, 130, 246, 0.15);
    }
}

/* Responsive */
@media (max-width: 1400px) {
    .ds-loc-table {
        font-size: 0.9rem;
    }
    
    .ds-loc-table th,
    .ds-loc-table td {
        padding: 1rem;
    }
    
    .ds-table-features {
        min-width: 200px;
    }
    
    .ds-feature-tags {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 1024px) {
    .ds-loc-table-wrapper {
        overflow-x: auto;
    }
    
    .ds-loc-table {
        min-width: 1200px;
    }
}

/* Light Mode */
[data-theme="light"] .ds-loc-table-wrapper {
    background: #fff;
    border-color: rgba(226, 232, 240, 1);
}

[data-theme="light"] .ds-loc-table thead {
    background: #f8fafc;
    border-bottom-color: rgba(226, 232, 240, 1);
}

[data-theme="light"] .ds-loc-table th {
    border-bottom-color: rgba(226, 232, 240, 1);
    color: #64748b;
}

[data-theme="light"] .ds-table-row {
    border-bottom-color: rgba(226, 232, 240, 1);
}

[data-theme="light"] .ds-table-row:hover {
    background: #f8fafc;
}

[data-theme="light"] .ds-feature-tag {
    background: #f8fafc;
    border-color: rgba(226, 232, 240, 1);
}

[data-theme="light"] .ds-table-btn.secondary {
    background: #f8fafc;
    border-color: rgba(203, 213, 225, 1);
    color: #475569;
}

[data-theme="light"] .ds-table-btn.secondary:hover {
    background: #e2e8f0;
}

/* Light Mode Overrides */
[data-theme="light"] .ds-loc-section {
    background: var(--bg-secondary);
}

[data-theme="light"] .ds-ping-monitor {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 1);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ds-loc-tabs {
    background: transparent;
    box-shadow: none;
}

[data-theme="light"] .ds-loc-tab-btn {
    color: rgba(100, 116, 139, 0.9);
}

[data-theme="light"] .ds-loc-tab-btn:hover {
    color: var(--text-primary);
}

[data-theme="light"] .ds-loc-tab-btn.active {
    background: transparent;
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    box-shadow: none;
}
[data-theme="light"] .ds-loc-card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .ds-loc-card:hover {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary);
}

[data-theme="light"] .ds-loc-header-simple {
    border-bottom-color: rgba(226, 232, 240, 1);
}

[data-theme="light"] .ds-loc-flag-wrapper {
    background: #f8fafc;
    border-color: rgba(226, 232, 240, 1);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

[data-theme="light"] .ds-loc-title-group h3 {
    color: #0f172a;
}

[data-theme="light"] .ds-loc-specs {
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 1);
}

[data-theme="light"] .ds-loc-btn.outline {
    border: 1px solid rgba(203, 213, 225, 1);
    color: var(--text-secondary);
    background: #fff;
}

[data-theme="light"] .ds-loc-btn.outline:hover {
    background: #f1f5f9;
    color: var(--text-primary);
    border-color: #94a3b8;
}

/* =============================================
   WHY CHOOSE RABISU SECTION - Dedicated Server
   ============================================= */

.ds-why-section {
    position: relative;
    padding: var(--spacing-4xl) 0;
    background: var(--bg-secondary);
    overflow: visible;
}

/* Why Section - Sağ Üst Shape */
.ds-why-shape-topright {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 350px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
}

[data-theme="light"] .ds-why-shape-topright {
    opacity: 1;
}

@media (max-width: 1199px) {
    .ds-why-shape-topright {
        display: none;
    }
}

.ds-why-section .container {
    max-width: 1400px;
}

/* 3 Kolonlu Layout: Sol Kutular - Resim - Sağ Kutular */
.ds-why-layout {
    display: grid;
    grid-template-columns: 1fr 1.8fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

/* V2 Layout: Sol Büyük Resim - Sağ Kutular */
.ds-why-layout.ds-why-layout-v2 {
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
}

.ds-why-image-side {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ds-why-image-side .ds-why-image-wrapper {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ds-why-image-side .ds-why-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.ds-why-image-side .ds-why-image-wrapper:hover img {
    transform: scale(1.02);
}

.ds-why-boxes-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-content: center;
}

.ds-why-boxes-side .ds-why-box {
    max-width: none;
    width: 100%;
    margin: 0;
    min-height: 100px;
    display: flex;
    align-items: center;
}

.ds-why-boxes-side .ds-why-box-content p {
    min-height: 2.4em;
    line-height: 1.2;
}

.ds-why-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    max-width: 260px;
    transition: all 0.3s ease;
}

.ds-why-box:hover {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -10px rgba(59, 130, 246, 0.2);
}

.ds-why-box-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(16, 185, 129, 0.08));
    border-radius: 12px;
    color: var(--color-primary);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.ds-why-box:hover .ds-why-box-icon {
    background: linear-gradient(135deg, var(--color-primary), #2563eb);
    color: #fff;
}

.ds-why-box-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.ds-why-box-content p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.ds-why-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
}

.ds-why-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
    box-shadow: 0 25px 80px -20px rgba(0, 0, 0, 0.25);
}

/* Üst Başlık - Ortalanmış */
.ds-why-header {
    text-align: center;
    margin-bottom: 3rem;
}

.ds-why-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.ds-why-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 600px;
}

/* Sağ Taraf - İçerik */
.ds-why-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Responsive - Why Section */
@media (max-width: 1100px) {
    .ds-why-layout {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 1.5rem;
    }
    
    .ds-why-layout.ds-why-layout-v2 {
        grid-template-columns: 1.3fr 1fr;
        gap: 2.5rem;
    }
    
    .ds-why-box {
        max-width: 220px;
        padding: 1rem 1.25rem;
    }
    
    .ds-why-boxes-side .ds-why-box {
        max-width: none;
    }
    
    .ds-why-box-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 1.1rem;
    }
    
    .ds-why-box-content h4 {
        font-size: 0.9rem;
    }
    
    .ds-why-box-content p {
        font-size: 0.75rem;
    }
}

@media (max-width: 900px) {
    .ds-why-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .ds-why-layout.ds-why-layout-v2 {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .ds-why-image-side {
        order: 1;
    }
    
    .ds-why-image-side .ds-why-image-wrapper {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .ds-why-boxes-side {
        order: 2;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .ds-why-box {
        max-width: none;
        flex: 1;
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .ds-why-section {
        padding: var(--spacing-2xl) 0;
    }
    
    .ds-why-title {
        font-size: 2rem;
    }
}

@media (max-width: 600px) {
    .ds-why-box {
        width: 100%;
        max-width: 320px;
    }
    
    .ds-why-boxes-side {
        grid-template-columns: 1fr;
        max-width: 320px;
    }
    
    .ds-why-image-side .ds-why-image-wrapper {
        max-width: 100%;
    }
}

/* Light Theme - Why Section */
[data-theme="light"] .ds-why-section {
    background: #f8fafc;
}

[data-theme="light"] .ds-why-box {
    background: #fff;
    border-color: rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ds-why-box:hover {
    background: #fff;
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.1);
}

/* ============================================
   DEDICATED SERVER - CTA SECTION
   Cutting Edge Servers & Global Network CTA
   ============================================ */

.ds-cta-section {
    position: relative;
    padding: 120px 0 60px;
    background: var(--bg-primary);
    overflow: hidden;
    z-index: 1;
}

@media (max-width: 1199px) {
    .ds-cta-shape-topright {
        display: none;
    }
}

.ds-cta-row-reverse {
    margin-top: 80px;
}

.ds-cta-content {
    padding-right: 2rem;
}

.ds-cta-row-reverse .ds-cta-content {
    padding-right: 0;
    padding-left: 2rem;
}

.ds-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ds-cta-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.ds-cta-badge span:last-child {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ds-cta-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 1.25rem;
}

.ds-cta-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.ds-cta-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ds-cta-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ds-cta-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ds-cta-check i {
    font-size: 10px;
    color: #fff;
    line-height: 1;
}

.ds-cta-list p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.ds-cta-list p strong {
    font-weight: 600;
}

.ds-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.ds-cta-link:hover {
    gap: 12px;
    color: var(--color-primary-dark);
}

.ds-cta-link i {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

.ds-cta-link:hover i {
    transform: translateX(4px);
}

.ds-cta-image {
    position: relative;
}

.ds-cta-image img {
    width: 100%;
    height: auto;
}

/* CTA Section - Responsive */
@media (max-width: 991px) {
    .ds-cta-section {
        padding: 80px 0 40px;
    }
    
    .ds-cta-row-reverse {
        margin-top: 60px;
    }
    
    .ds-cta-content {
        padding-right: 0;
        margin-bottom: 2rem;
    }
    
    .ds-cta-row-reverse .ds-cta-content {
        padding-left: 0;
    }
    
    .ds-cta-image img {
        max-width: 80%;
        margin: 0 auto;
        display: block;
    }
}

@media (max-width: 575px) {
    .ds-cta-section {
        padding: 60px 0 30px;
    }
    
    .ds-cta-title {
        font-size: 1.5rem;
    }
    
    .ds-cta-image img {
        max-width: 100%;
    }
}

/* ============================================
   DEDICATED SERVER - TESTIMONIALS SECTION
   What Our Clients Say
   ============================================ */

.ds-testimonials-section {
    padding: 5rem 0;
    background: var(--bg-secondary);
    position: relative;
}

.ds-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.ds-testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
}

.ds-testimonial-card::before {
    content: '"';
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 4rem;
    font-family: Georgia, serif;
    color: var(--color-primary);
    opacity: 0.15;
    line-height: 1;
}

.ds-testimonial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.ds-testimonial-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 1rem;
}

.ds-testimonial-rating i {
    color: #fbbf24;
    font-size: 0.9rem;
}

.ds-testimonial-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-style: italic;
}

.ds-testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.ds-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ds-testimonial-avatar span {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

.ds-testimonial-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px;
}

.ds-testimonial-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Testimonials Responsive */
@media (max-width: 991px) {
    .ds-testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .ds-testimonials-section {
        padding: 3rem 0;
    }
    
    .ds-testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .ds-testimonial-card {
        padding: 1.5rem;
    }
}

/* Light Theme - Testimonials */
[data-theme="light"] .ds-testimonials-section {
    background: #f1f5f9;
}

[data-theme="light"] .ds-testimonial-card {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ds-testimonial-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* ============================================
   VPS Dedicated Server Cross-Sell Banner
   ============================================ */

.dedicated-crosssell-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 2rem;
    padding: 1.25rem 2rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.dedicated-crosssell-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), #8b5cf6, var(--color-secondary));
}

.crosssell-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.crosssell-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
    border-radius: 10px;
    flex-shrink: 0;
}

.crosssell-icon svg {
    color: #fff;
}

.crosssell-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crosssell-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.crosssell-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.crosssell-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.crosssell-btn:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35);
    color: #fff;
}

.crosssell-btn svg {
    transition: transform 0.3s ease;
}

.crosssell-btn:hover svg {
    transform: translateX(3px);
}

/* Responsive - Cross-Sell Banner */
@media (max-width: 768px) {
    .dedicated-crosssell-banner {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        gap: 1.25rem;
    }
    
    .crosssell-content {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .crosssell-text {
        align-items: center;
    }
    
    .crosssell-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Light Theme - Cross-Sell Banner */
[data-theme="light"] .dedicated-crosssell-banner {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
    border-color: rgba(59, 130, 246, 0.15);
}