/* ============================================
   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 (+ Results)  (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: #475569;       /* Slate 600 — WCAG AA uyumlu (5.91:1 beyaz, ~5.01:1 gri bg) */
    
    /* 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;
    
    /* Header Heights (Sticky/Fixed Layout İçin) */
    --top-bar-height: 43px;
    --header-height: 91px;
    --total-header-height: 91px;  /* Sadece header (top-bar sticky değil) */
    
    /* 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: #ffffff;     /* BEYAZ/AÇIK YAZI - Pure White for Max Contrast */
    --text-secondary: #e2e8f0;
    --text-muted: #cbd5e1;
    
    /* Border & Shadow */
    --border-color: rgba(59, 130, 246, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* 1.3 LIGHT MODE OVERRIDE */
[data-theme="light"] {
    color-scheme: light;
    
    /* WCAG AA (4.5:1) uyumlu TEXT renkleri
       Bu değişkenler SADECE text/foreground amaçlıdır.
       --color-primary (#3b82f6) ve --color-secondary (#10b981)
       background olarak yeterli, ama TEXT olarak beyaz bg üzerinde
       yetersiz kontrast sağlıyor. Bu yüzden text amaçlı
       daha koyu tonlar kullanıyoruz. */
    --color-primary-text: #1d4ed8;     /* Blue 700 — 5.56:1 beyaz bg */
    --color-secondary-text: #047857;   /* Emerald 700 — 5.2:1 beyaz bg */
}

/* ============================================
   1.4 GENEL LIGHT MODE WCAG AA KONTRAST DÜZELTMELERİ
   Tüm sayfalar için geçerli — sayfaya özel scope YAPMA!
   Minimum kontrast oranı: 4.5:1 (AA standart text)
   ============================================ */

/* --- Section Subtitle (tüm sayfalar) --- */
[data-theme="light"] .section-subtitle {
    color: var(--text-muted);
}

/* --- Primary renk TEXT olarak kullanılan yerler --- */
[data-theme="light"] .feature-text strong {
    color: #2563eb !important; /* Blue 600 — açık bg üzerinde mavi strong metin */
}

[data-theme="light"] .plan-features-divider .divider-title {
    color: #2563eb !important; /* Blue 600 */
}

[data-theme="light"] .domain-extension {
    color: #2563eb !important; /* Blue 600 */
}

[data-theme="light"] .tld-table td strong {
    color: #2563eb !important; /* Blue 600 */
}

/* Section Badge — mavi bg üzerinde beyaz ikon/yazı */
[data-theme="light"] .section-badge i,
[data-theme="light"] .section-badge svg {
    color: #fff !important;
}

/* --- Secondary renk TEXT olarak kullanılan yerler --- */
[data-theme="light"] .price-bonus .total-price,
[data-theme="light"] .benchmark-hint {
    color: var(--color-secondary-text);
}

/* --- Muted text --- 
   --text-muted root'ta #475569 (Slate 600) olarak tanımlı.
   var(--text-muted) kullanan tüm elementler otomatik WCAG AA uyumlu.
   Ek override gerekmiyor. */

/* --- Section Badge (genel) --- */
[data-theme="light"] .section-badge {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

/* --- Header Glass nav-link (beyaz bg üzerinde beyaz text düzeltmesi) --- */
[data-theme="light"] .header-glass .nav-link.active,
[data-theme="light"] .header-glass .nav-link:hover {
    color: var(--color-primary-text) !important;
}

[data-theme="light"] .header-glass .navbar-menu > li > a {
    color: #334155;
}

/* --- Buton Kontrast Düzeltmeleri --- */
[data-theme="light"] .btn-outline-primary {
    border-color: var(--color-primary-text);
    color: var(--color-primary-text);
}

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

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

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

[data-theme="light"] .btn-outline:hover {
    background: var(--color-primary);
    color: #fff;
}

/* --- Domain Search Button --- */
[data-theme="light"] .domain-search-button {
    background: var(--color-primary-text);
}

/* --- VPS/Genel: Price decimal & period opacity düzeltmesi --- */
[data-theme="light"] .vps-price-main .price-decimal {
    opacity: 1;
}

[data-theme="light"] .vps-price-main .price-period {
    opacity: 1;
    color: var(--text-muted); /* #475569 - Slate 600, 5.9:1 kontrast */
}

/* --- color-primary TEXT olarak kullanılan elementler → primary-text --- */
[data-theme="light"] .vps-read-more,
[data-theme="light"] .ip-value {
    color: var(--color-primary-text); /* #1d4ed8 - 6.6:1 kontrast */
}

/* --- Comparison Table: highlight column strong --- */
[data-theme="light"] .highlight-column strong,
[data-theme="light"] .highlight-column.price-cell strong {
    color: var(--color-primary-text);
}

/* --- Competitor Markaları: Generic competitor styling --- */


/* ============================================
   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;
}

/* Body Padding - Scroll'da JS ile eklenecek (header.scrolled için) */
body.header-scrolled {
    padding-top: var(--header-height);
}



/* ============================================
   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
   ============================================ */

/* Ekran okuyucu için görsel olarak gizli ama erişilebilir sınıf */
.sr-only{
    border:0;
    clip:rect(0,0,0,0);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    white-space:nowrap;
    width:1px;
}

.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:#60a5fa; }
[data-theme="dark"] .text-primary{ color:#60a5fa; }
[data-theme="light"] .text-primary{ color:#2563eb; }
.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-primary svg,
.btn-outline-light svg {
    flex-shrink: 0;
}

.btn-primary svg path,
.btn-outline-light svg path {
    stroke: currentColor;
}

.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);
}

/* Light mode kontrast kuralları 1.4 bloğunda (genel) tanımlı */

.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);
}

/* Dark Mode: Beyaz border ve text koyu bg üzerinde görünür */
[data-theme="dark"] .btn-outline-white{
    border-color:rgba(255, 255, 255, 0.8);
    color:rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .btn-outline-white:hover{
    background:rgba(255, 255, 255, 0.1);
    border-color:rgba(255, 255, 255, 1);
    color:rgba(255, 255, 255, 1);
}

/* Light Mode: Primary border ve text açık bg üzerinde görünür */
[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
   ============================================ */

/* ESKİ TOP-BAR TANIMLARI SİLİNDİ 
   Modern tanımlar: Bölüm 25 - TOP BAR (FIXED LAYOUT) - Satır ~5034 */

.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 - LIGHT THEME)
   Light background için navbar stilleri
   ============================================ */

/* Header WITHOUT .header-glass (Light Background) */
header:not(.header-glass) .navbar {
    padding: var(--spacing-md) 0;
}

header:not(.header-glass) .navbar-menu>li>a,
header:not(.header-glass) .nav-link {
    color: var(--color-gray-700);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-md);
}

header:not(.header-glass) .navbar-menu>li>a.active,
header:not(.header-glass) .navbar-menu>li>a:hover,
header:not(.header-glass) .nav-link.active,
header:not(.header-glass) .nav-link:hover {
    color: var(--color-primary);
}

[data-theme=light] header:not(.header-glass) .navbar-menu>li>a,
[data-theme=light] header:not(.header-glass) .nav-link {
    color: #334155;
}

[data-theme=light] header:not(.header-glass) .navbar-menu>li>a.active,
[data-theme=light] header:not(.header-glass) .navbar-menu>li>a:hover,
[data-theme=light] header:not(.header-glass) .nav-link.active,
[data-theme=light] header:not(.header-glass) .nav-link:hover {
    color: #3b82f6;
}


/* ============================================
   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{
    margin-bottom:var(--spacing-xl);
}
@media (min-width:992px){
    .footer-main .row > .col-lg-2{
        flex:0 0 16.666667%;
        max-width:16.666667%;
    }
}

.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, #10b981 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, #059669 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:#60a5fa;
    font-size:2.5rem;
    font-weight:700;
    line-height:1;
    margin-bottom:.5rem;
}
[data-theme="dark"] .stat-value{
    color:#60a5fa;
}
[data-theme="light"] .stat-value{
    color:#2563eb;
}

.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;
    /* Kapalı halde solda sakla, sadece küçük bir şerit görünsün */
    --ssoft-peek: 10px;        /* Ekranda görünecek kısım (ilk çıkıntı ayarı) */
    --ssoft-collapsed: 50px;   /* .s-item kapalı genişliği ile aynı olmalı */
    --ssoft-expanded: 175px;   /* Hover'da açılan genişlik */
    left:calc(var(--ssoft-peek) - var(--ssoft-collapsed)); /* örn: 14 - 50 = -36px */
    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;
    overflow:hidden; /* Hover'da açılırken label taşmasın */
    position:relative;
    text-decoration:none;
    transition:all .3s ease;
    width:50px;
}

/* Kapalı halde sadece renk şeridi görünsün (ikon ucu görünmesin) */
.s-item > i,
.s-item > span,
.s-item > svg{
    /* .s-soft solda saklı durduğu için ikonları görünür alana kaydır */
    left:calc(var(--ssoft-collapsed) - var(--ssoft-peek) + 18px);
    opacity:0;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    transition:opacity .15s ease;
}

.s-item > svg{
    display:block;
    height:20px;
    width:20px;
}

/* Label: linkin title attribute'undan gelir */
.s-item::after{
    color:var(--color-white);
    content:attr(title);
    font-size:.875rem;
    font-weight:700;
    /* Label da aynı şekilde görünür alana kaydırılır */
    left:calc(var(--ssoft-collapsed) - var(--ssoft-peek) + 43px);
    letter-spacing:.2px;
    opacity:0;
    position:absolute;
    top:50%;
    transform:translateY(-50%) translateX(-6px);
    transition:opacity .2s ease, transform .2s ease;
    white-space:nowrap;
}

.s-item:hover{
    box-shadow:4px 4px 15px rgba(0,0,0,.4);
    color:var(--color-white) !important;
    /* Titremeyi engelle: elemanı kaydırma, sadece genişlet */
    width:var(--ssoft-expanded);
}

.s-item:hover > i,
.s-item:hover > span,
.s-item:hover > svg{
    opacity:1;
}

.s-item:hover::after{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

.s-item:focus-visible{
    box-shadow:4px 4px 15px rgba(0,0,0,.4);
    outline:2px solid rgba(255,255,255,.25);
    outline-offset:2px;
    width:var(--ssoft-expanded);
}

.s-item:focus-visible::after{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

.s-item:focus-visible > i,
.s-item:focus-visible > span,
.s-item:focus-visible > svg{
    opacity:1;
}

.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:#60a5fa;
    height:36px;
    width:36px;
}
[data-theme="dark"] .feature-icon svg{
    color:#60a5fa;
}
[data-theme="light"] .feature-icon svg{
    color:#2563eb;
}

.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:#60a5fa;
    font-size:2.5rem;
    font-weight:800;
    line-height:1;
    margin-bottom:.25rem;
}
[data-theme="dark"] .availability-count{
    color:#60a5fa;
}
[data-theme="light"] .availability-count{
    color:#2563eb;
}

.availability-label{
    color:#60a5fa;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}
[data-theme="dark"] .availability-label{
    color:#60a5fa;
}
[data-theme="light"] .availability-label{
    color:#2563eb;
}

.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%) scale(1);
    width:8px;
    z-index:1;
    will-change:transform, opacity;
}

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

@keyframes glowingPulse{
    0%{
        transform:translate(-50%, -50%) scale(1);
        opacity:.8;
    }
    50%{
        transform:translate(-50%, -50%) scale(4);
        opacity:.4;
    }
    to{
        transform:translate(-50%, -50%) scale(6);
        opacity:0;
    }
}
.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:6px;
    justify-content:center;
    left:50%;
    margin-bottom:12px;
    min-width:220px;
    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,
.map-pin:hover .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;
}

.tooltip-domain{
    color:var(--text-muted);
    font-size:.7rem;
    font-weight:400;
    font-family:'Courier New', monospace;
    opacity:0.65;
    padding:2px 8px;
    background:var(--bg-secondary);
    border-radius:6px;
}

.tooltip-ping{
    color:#94a3b8;
    font-size:.95rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    transition:all .2s ease;
}
.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;
}

.widget-result{
    max-height:none;
    min-height:auto;
    padding:1.25rem 1rem;
    gap:0;
}

[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,
.testing-info .testing-title{
    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:1rem;
    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;
}

/* Fiyat Bölümü */
.service-pricing {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

[data-theme=light] .service-pricing {
    background: rgba(27, 60, 136, 0.05);
    border-color: rgba(27, 60, 136, 0.15);
}

.service-price-label {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-price-value {
    color: var(--color-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

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

/* Sipariş Butonu */
.service-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.service-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.service-order-btn:active {
    transform: translateY(0);
}

[data-theme=light] .service-order-btn {
    background: linear-gradient(135deg, #1b3c88, #0f2557);
    box-shadow: 0 4px 12px rgba(27, 60, 136, 0.3);
}

[data-theme=light] .service-order-btn:hover {
    box-shadow: 0 8px 20px rgba(27, 60, 136, 0.4);
    background: linear-gradient(135deg, #0f2557, #0a1b3d);
}


/* ============================================
   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 h3{
    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:#fff;
}

.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;
    color:var(--text-secondary);
}
.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{
    display:flex;
    flex-wrap:nowrap;
    min-height:520px;
    overflow:hidden !important;
}

.reviews-slider.swiper-initialized{
    display:block;
    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:#60a5fa;
}
[data-theme="dark"] .blog-side-post-date i{
    color:#60a5fa;
}
[data-theme="light"] .blog-side-post-date i{
    color:#2563eb;
}

.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:#2563eb !important;
    border-color:#2563eb !important;
}

.blog-badge-dot{
    background:var(--color-primary);
    border-radius:50%;
    height:8px;
    width:8px;
}
[data-theme=light] .blog-badge-dot{
    background:#fff !important;
}

.blog-badge-text{
    color:#60a5fa;
    font-size:.875rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}
[data-theme="dark"] .blog-badge-text{
    color:#60a5fa;
}
[data-theme="light"] .blog-badge-text{
    color:#fff !important;
}

.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:#60a5fa;
}
[data-theme="dark"] .blog-featured-meta i{
    color:#60a5fa;
}
[data-theme="light"] .blog-featured-meta i{
    color:#2563eb;
}

.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);
}
[data-theme="light"] .blog-featured-link,
[data-theme="light"] .blog-featured-title a:hover{
    color:#2563eb;
}

.blog-featured-link{
    align-items:center;
    color:#60a5fa;
    display:inline-flex;
    font-weight:600;
    gap:.5rem;
    margin-top:1rem;
    text-decoration:none;
    transition:all .3s ease;
}
[data-theme="dark"] .blog-featured-link{
    color:#60a5fa;
}
[data-theme="light"] .blog-featured-link{
    color:#2563eb;
}

.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:#60a5fa;
    font-size:1rem;
}
[data-theme="dark"] .blog-meta-item i{
    color:#60a5fa;
}
[data-theme="light"] .blog-meta-item i{
    color:#2563eb;
}

.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:#60a5fa;
    font-size:.875rem;
}
[data-theme="dark"] .blog-post-side-meta i{
    color:#60a5fa;
}
[data-theme="light"] .blog-post-side-meta i{
    color:#2563eb;
}

.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;
}

/* ============================================
   23.1 DOMAIN SEARCH RESULTS (WHOIS)
   Optimized styles for domain availability cards
   ============================================ */

/* Base Result Card */
.domain-result-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: slideInUp 0.4s ease;
}

/* Available Domain Card */
.domain-result-available {
    border-left: 5px solid #10b981;
}

.domain-result-available-body {
    padding: 2.5rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

/* Mobil: Register butonu ile price box arası boşluk */
.domain-result-available-body .domain-btn-register {
    margin-top: 1rem;
}

/* Taken Domain Card */
.domain-result-taken {
    border-left: 5px solid #dc3545;
}

.domain-result-taken-header {
    padding: 2rem;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-bottom: 1px solid #f8d7da;
}

.domain-result-taken-body {
    padding: 2rem;
    background: #fafafa;
}

/* Domain Info Section */
.domain-info-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.domain-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.domain-icon-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.domain-icon-danger {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
}

.domain-icon-box i {
    font-size: 32px;
    color: white;
}

.domain-name-title {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #1e293b !important;
    text-align: center;
}

@media (min-width: 992px) {
    .domain-name-title {
        text-align: left;
    }
}

.domain-status-text {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

@media (min-width: 992px) {
    .domain-status-text {
        text-align: left;
    }
}

.domain-status-success {
    color: #10b981 !important;
}

.domain-status-danger {
    color: #dc2626 !important;
}

.domain-desc-text {
    font-size: 13px;
    margin-top: 0.5rem;
    margin-bottom: 0;
    color: var(--text-secondary) !important;
    text-align: center;
}

@media (min-width: 992px) {
    .domain-desc-text {
        text-align: left;
    }
}

/* Price Box */
.domain-price-box {
    padding: 1rem;
    border-radius: 8px;
    background: white;
    border: 2px solid #10b981;
    text-align: center;
}

.domain-price-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #64748b !important;
}

.domain-price-amount {
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 0;
    color: #10b981 !important;
}

.domain-price-period {
    font-size: 13px;
    color: var(--text-secondary) !important;
}

/* Register/Transfer Buttons */
.domain-btn-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: white !important;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.domain-btn-register i {
    font-size: 15px;
}

.domain-btn-register:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
    color: white !important;
}

/* Taken kart - Kalan gün + Transfer butonu wrapper */
.domain-taken-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.domain-btn-transfer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border: none;
    color: white !important;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    transition: all 0.3s ease;
    text-decoration: none;
}

.domain-btn-transfer i {
    font-size: 13px;
}

.domain-btn-transfer:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
    color: white !important;
}

.domain-secure-payment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
    font-size: 12px;
    color: #64748b !important;
}

.domain-secure-payment i {
    color: #10b981 !important;
}

/* Days Left Badge */
.domain-days-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: white !important;
    white-space: nowrap;
}

.domain-days-danger {
    background: #dc2626 !important;
}

.domain-days-warning {
    background: #f59e0b !important;
}

.domain-days-info {
    background: #3b82f6 !important;
}

.domain-days-expired {
    background: #6b7280 !important;
}

/* Registration Info */
.domain-reg-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
}

.domain-reg-section-title i {
    font-size: 16px;
    color: #3b82f6 !important;
}

.domain-reg-section-title h6 {
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    color: #64748b !important;
}

.domain-reg-info-item {
    padding: 12px 0;
    border-bottom: none;
    display: flex;
    gap: 40px;
    background: transparent;
}

.domain-reg-label {
    font-size: 14px;
    min-width: 80px;
    color: #64748b !important;
}

.domain-reg-value {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b !important;
}

.domain-reg-value-danger {
    font-weight: 700;
    color: #dc2626 !important;
}

/* Nameservers Box */
.domain-nameservers-box {
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: white;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    line-height: 1.8;
    color: #1e293b !important;
    text-align: left;
    word-break: break-all;
}

/* Nameservers - Light Mode */
[data-theme="light"] .domain-nameservers-box {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #0f172a !important;
}

/* Loading State */
.domain-loading-card {
    text-align: center;
    padding: 2rem;
    border-radius: 12px;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.domain-loading-text {
    margin-top: 1rem;
    margin-bottom: 0;
    color: #64748b !important;
}

.domain-loading-text strong {
    color: #1e293b !important;
}

/* Error Messages */
.domain-error-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.domain-error-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive */
/* Tablet & Orta Ekranlar için Domain Responsive */
@media (max-width: 992px) {
    .domain-btn-transfer {
        padding: 9px 14px;
        font-size: 12px;
        gap: 5px;
    }
    
    .domain-btn-transfer i {
        font-size: 12px;
    }
    
    .domain-days-badge {
        padding: 9px 14px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    /* Domain Sonuç Kartları - Mobil Optimizasyon */
    .domain-result-card {
        border-radius: 0.75rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    
    .domain-result-available-body {
        padding: 1.5rem;
    }
    
    .domain-result-taken-header {
        padding: 1.25rem;
    }
    
    .domain-result-taken-body {
        padding: 1.25rem;
    }
    
    .domain-icon-box {
        width: 44px;
        height: 44px;
    }
    
    .domain-icon-box i {
        font-size: 20px;
    }
    
    .domain-info-wrapper {
        gap: 12px;
    }
    
    .domain-name-title {
        font-size: 16px;
        word-break: break-all;
    }
    
    .domain-status-text {
        font-size: 12px;
    }
    
    .domain-desc-text {
        font-size: 13px;
        margin-top: 0.5rem;
        margin-bottom: 0;
    }
    
    /* Fiyat kutusu - kompakt */
    .domain-price-box {
        padding: 0.75rem;
        margin-top: 0.5rem;
    }
    
    .domain-price-label {
        font-size: 10px;
    }
    
    .domain-price-amount {
        font-size: 22px;
    }
    
    .domain-price-period {
        font-size: 11px;
    }
    
    /* Taken kart - Mobil: Altlı üstlü */
    .domain-taken-actions {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 12px;
    }
    
    /* Butonlar */
    .domain-btn-register,
    .domain-btn-transfer {
        padding: 12px 20px;
        font-size: 13px;
        border-radius: 8px;
        width: 100%;
        min-width: auto;
        max-width: 100%;
        gap: 6px;
    }
    
    .domain-btn-transfer i {
        font-size: 13px;
    }
    
    .domain-secure-payment {
        margin-top: 0.5rem;
        font-size: 11px;
    }
    
    /* Kalan gün badge - Mobilde butonla aynı yükseklik/genişlik */
    .domain-days-badge {
        font-size: 13px;
        padding: 12px 20px;
        width: 100%;
        text-align: center;
        border-radius: 8px;
    }
    
    /* WHOIS Detay - Taken kart */
    .domain-reg-section-title h6 {
        font-size: 13px;
    }
    
    .domain-reg-info-item {
        padding: 0.5rem 0;
    }
    
    .domain-reg-label {
        font-size: 12px;
    }
    
    .domain-reg-value {
        font-size: 12px;
    }
    
    .domain-nameservers-box {
        font-size: 12px;
        padding: 0.75rem;
    }
}

.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:#60a5fa;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-size:.875rem;
    font-weight:600;
    margin-bottom:1rem;
    padding:.5rem 1.5rem;
}
[data-theme="dark"] .section-badge{
    color:#60a5fa;
}

.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 - Sadece thead sticky */
.domain-tld-table-section .tld-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* 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;
}

/* Light mode kontrast kuralları 1.4 bloğunda (genel) tanımlı */

.section-badge i,
.section-badge svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    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); }
}

/* Loading Spinner SVG Animation */
.loading-spinner {
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

[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 için özel z-index kontrolü */
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);
}

/* Genel top-bar stilleri */
.top-bar{
    backdrop-filter:blur(10px);
    background:rgba(10,14,26,.95);
    border-bottom:1px solid rgba(59,130,246,.1);
    font-size:.85rem;
    padding:.5rem 0;
    position:relative;
    transition: background 0.3s ease, border-color 0.3s ease;
    width:100%;
}

[data-theme=light] .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{
    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:all .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,
.top-bar-link svg{
    font-size:.9rem;
    flex-shrink:0;
    opacity:.85;
    transition:opacity .2s ease;
}

.top-bar-link:hover i,
.top-bar-link:hover svg{
    opacity:1;
}

.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 - Default (Tüm header'lar için z-index) */
header {
    z-index: var(--z-header);
}

.header-sticky{
    position:relative;
    transition:all .3s cubic-bezier(.4, 0, .2, 1), background 0.3s ease, border-color 0.3s ease;
}

/* Header - Scroll'da Aktif (JS ile eklenir) */
.header-sticky.scrolled{
    left:0;
    position:fixed;
    right:0;
    top:0;
    z-index:var(--z-header);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.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:1.25rem 0;
}

[data-theme=light] .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);
}


/* ============================================
   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), filter .3s ease;
    width:auto;
}

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

/* Logo Display Toggle - Default: Beyaz Logo (Dark Mode) */
.logo-white {
    display: block;
}

.logo-dark {
    display: none;
}

/* Light Mode: Siyah Logo */
[data-theme="light"] .logo-white {
    display: none;
}

[data-theme="light"] .logo-dark {
    display: block;
}

.navbar-brand:hover img{
    transform:scale(1.05);
}
.navbar-menu{
    align-items:center;
    display:flex;
    gap:0.35rem;  /* Kompakt ama rahat - uzun diller için optimize */
    list-style:none;
    margin:0;
    padding:0;
}

.navbar-menu>li{
    margin:0;  /* Margin kaldırıldı, gap yeterli */
    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;
}

.nav-item{
    position:relative;
}

.nav-link{
    align-items:center;
    color:#94a3b8;
    display:flex;
    font-size:.95rem;
    font-weight:500;
    gap:.5rem;
    padding:0.75rem 0.9rem;  /* Optimized padding - yeterli alan, fazla sıkışık değil */
    text-decoration:none;
    transition:color .2s cubic-bezier(.4, 0, .2, 1);
    white-space:nowrap;  /* Tek satırda kal - uzun diller için kritik */
}

.nav-link.active,.nav-link:hover{
    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{
    color:#fff;
}
.nav-link i{
    font-size:1rem;
}
.nav-link i.fa-chevron-down{
    font-size:.7rem;
    margin-left:.25rem;  /* Azaltıldı - daha kompakt */
    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;
    white-space:nowrap;
}

.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);
}

/* VDS gibi panel açmayan direkt linkler */
.mega-tab-direct{
    border-left-color:transparent;
}
.mega-tab-direct:hover{
    background:rgba(59,130,246,.15);
    border-left-color:#10b981;
}
.mega-tab-direct:hover svg{
    color:#10b981;
}

.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;
}

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

.mega-panel-header{
    border-bottom:1px solid rgba(59,130,246,.15);
    margin-bottom:1rem;
    padding-bottom:.75rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.mega-header-content{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:.25rem;
}

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

/* Başlık Renkleri - İkonlarla Eşleşir */
.mega-panel[data-panel="vps"] .mega-panel-header h6{
    color:#3b82f6;
}

.mega-panel[data-panel="dedicated"] .mega-panel-header h6{
    color:#f59e0b;
}

.mega-panel[data-panel="unlimited"] .mega-panel-header h6{
    color:#a855f7;
}

.mega-panel[data-panel="security"] .mega-panel-header h6{
    color:#10b981;
}

.mega-header-icon{
    opacity:.85;
    transition:all .2s ease;
    flex-shrink:0;
    width:40px;
    height:40px;
}

.mega-panel-header:hover .mega-header-icon{
    opacity:1;
}

/* VPS İkonu - Mavi (Cloud) */
.mega-icon-vps{
    stroke:#3b82f6;
    filter:drop-shadow(0 0 6px rgba(59,130,246,.3));
}

/* Dedicated İkonu - Turuncu (Enterprise) */
.mega-icon-dedicated{
    stroke:#f59e0b;
    filter:drop-shadow(0 0 6px rgba(245,158,11,.3));
}

/* Unlimited İkonu - Mor (Premium) */
.mega-icon-unlimited{
    stroke:#a855f7;
    filter:drop-shadow(0 0 6px rgba(168,85,247,.3));
}

/* Security İkonu - Yeşil (Protection) */
.mega-icon-security{
    stroke:#10b981;
    filter:drop-shadow(0 0 6px rgba(16,185,129,.3));
}

.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:.85rem;
    opacity:1;
    width:16px;
    text-align:center;
    display:inline-block;
    margin-right:2px;
}

.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 Menu Promo Card (Reklam Alanı) */
.mega-promo-card{
    background:linear-gradient(135deg, rgba(59,130,246,.1) 0%, rgba(139,92,246,.1) 100%);
    border:1px solid rgba(59,130,246,.2);
    border-radius:12px;
    padding:1.25rem 1.5rem;
    position:relative;
    overflow:hidden;
    transition:all .3s ease;
    min-height:110px;
}

.mega-promo-card:hover{
    background:linear-gradient(135deg, rgba(59,130,246,.15) 0%, rgba(139,92,246,.15) 100%);
    border-color:rgba(59,130,246,.35);
    box-shadow:0 8px 25px rgba(59,130,246,.15);
    transform:translateY(-2px);
}

.mega-promo-icon{
    position:absolute !important;
    bottom:10px !important;
    right:15px !important;
    width:auto !important;
    height:auto !important;
    background:none !important;
    border-radius:0 !important;
    display:block !important;
    font-size:4rem !important;
    color:rgba(59,130,246,.2) !important;
    box-shadow:none !important;
    transition:all .3s ease;
    pointer-events:none;
    line-height:1 !important;
    z-index:1;
    opacity:1 !important;
}

.mega-promo-card:hover .mega-promo-icon{
    color:rgba(59,130,246,.35) !important;
    transform:scale(1.05);
}

.mega-promo-icon i,
.mega-promo-icon svg{
    display:block !important;
    opacity:1 !important;
    font-style:normal !important;
    font-weight:900 !important;
    line-height:1 !important;
}

.mega-promo-content{
    display:flex;
    flex-direction:column;
    gap:.65rem;
    position:relative;
    z-index:1;
    padding-right:70px;
}

.mega-promo-title{
    font-size:.95rem;
    font-weight:700;
    color:#f8fafc;
    margin:0;
    line-height:1.3;
}

.mega-promo-desc{
    font-size:.8rem;
    color:#cbd5e1;
    line-height:1.45;
    margin:0;
}

.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;
}

/* Light Mode - Başlık Renkleri */
[data-theme=light] .mega-panel[data-panel="vps"] .mega-panel-header h6{
    color:#2563eb;
}

[data-theme=light] .mega-panel[data-panel="dedicated"] .mega-panel-header h6{
    color:#ea580c;
}

[data-theme=light] .mega-panel[data-panel="unlimited"] .mega-panel-header h6{
    color:#9333ea;
}

[data-theme=light] .mega-panel[data-panel="security"] .mega-panel-header h6{
    color:#059669;
}

[data-theme=light] .mega-header-icon{
    opacity:.75;
}

/* Light Mode - İkon Renkleri */
[data-theme=light] .mega-icon-vps{
    stroke:#2563eb;
    filter:drop-shadow(0 0 6px rgba(37,99,235,.3));
}

[data-theme=light] .mega-icon-dedicated{
    stroke:#ea580c;
    filter:drop-shadow(0 0 6px rgba(234,88,12,.3));
}

[data-theme=light] .mega-icon-unlimited{
    stroke:#9333ea;
    filter:drop-shadow(0 0 6px rgba(147,51,234,.3));
}

[data-theme=light] .mega-icon-security{
    stroke:#059669;
    filter:drop-shadow(0 0 6px rgba(5,150,105,.3));
}

[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;
}

/* Light Mode - Promo Card */
[data-theme=light] .mega-promo-card{
    background:linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(139,92,246,.08) 100%);
    border-color:rgba(59,130,246,.18);
}

[data-theme=light] .mega-promo-card:hover{
    background:linear-gradient(135deg, rgba(59,130,246,.12) 0%, rgba(139,92,246,.12) 100%);
    border-color:rgba(59,130,246,.28);
    box-shadow:0 8px 25px rgba(59,130,246,.12);
}

[data-theme=light] .mega-promo-title{
    color:#1e293b;
}

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

[data-theme=light] .mega-promo-icon{
    color:rgba(59,130,246,.12);
}

[data-theme=light] .mega-promo-card:hover .mega-promo-icon{
    color:rgba(59,130,246,.2);
}

.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);
    white-space:nowrap;
}

.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:.5rem;
}
.navbar-actions .panel-btn{
    align-items:center;
    display:flex;
    font-size:.875rem;
    gap:.35rem;
    height:48px;
    justify-content:center;
    min-width:48px;
    padding:0 0.85rem;
}

.navbar-actions .panel-btn svg{
    flex-shrink:0;
    height:20px;
    width:20px;
}

/* Panel Button Hover - Uyumlu Renkler */
.navbar-actions .panel-btn:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-1px);
}

.navbar-actions .panel-btn:hover svg {
    color: var(--color-white);
}

[data-theme="light"] .navbar-actions .panel-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .navbar-actions .panel-btn:hover svg {
    color: var(--color-white);
}

.cart-btn i {
    font-size: 1.1rem;
}
.cart-btn{
    position:relative;
    align-items: center;
    justify-content: center;
    display: flex;
    width: 44px;
    height: 48px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.cart-btn:hover {
    background: var(--bg-card);
}

.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;
}

/* Hover köprüsü - dropdown ile buton arasındaki boşluğu doldurur */
.language-selector::after{
    content:'';
    position:absolute;
    top:100%;
    right:0;
    width:100%;
    height:12px;
    background:transparent;
}

.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;
    pointer-events:none;
    position:absolute;
    right:0;
    top:calc(100% + .2rem);
    transform:translateY(-5px);
    transition:all .2s cubic-bezier(.4, 0, .2, 1);
    visibility:hidden;
    z-index:9999 !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 !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
    visibility:visible !important;
}

.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{
    color:var(--color-primary);
    position:relative;
}

[data-theme=dark] .nav-link.active{
    color:var(--color-primary-light);
}

[data-theme=light] .nav-link.active{
    color:#fff;
}

/* Light mode header-glass kontrast kuralları 1.4 bloğunda (genel) tanımlı */

.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); }
    
    /* Navbar - Geniş Ekranlar İçin Rahat Mod */
    .navbar {
        gap: 2rem;  /* Normal genişlik */
    }
    
    .navbar-menu {
        gap: 0.5rem;  /* Daha rahat boşluk */
    }
    
    .nav-link {
        padding: 0.75rem 1.1rem;  /* Daha geniş padding */
        font-size: 0.95rem;  /* Normal font size */
    }
}

/* ====================================================================
   RESPONSIVE: 1024px - 1200px (Tablet & Small Laptops)
   - Extra kompakt navbar (uzun diller için kritik)
   ==================================================================== */
@media (min-width: 1024px) and (max-width: 1199px) {
    .navbar {
        gap: 1.25rem;
    }
    
    .navbar-menu {
        gap: 0.15rem;  /* Minimum boşluk */
    }
    
    .nav-link {
        padding: 0.7rem 0.7rem;  /* Çok kompakt */
        font-size: 0.85rem;  /* Daha küçük font */
        white-space: nowrap;
    }
    
    .nav-link i.fa-chevron-down {
        margin-left: 0.15rem;
        font-size: 0.65rem;  /* Daha küçük icon */
    }
}

@media (max-width:1024px){
    .pricing-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2.5rem; /* Popüler badge için ekstra boşluk */
    }
    
    .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{
        margin-bottom:2rem;
    }
    .section{
        padding:4rem 0;
    }
    
    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-btn svg,
    .top-bar-link i,
    .top-bar-link svg{
        font-size:1rem;
        width:16px;
        height:16px;
    }
    
    .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;
    }
    
    /* Mobile - Promo Card */
    .mega-promo-card{
        padding:1rem;
        min-height:90px;
    }
    
    .mega-promo-content{
        padding-right:55px;
    }
    
    .mega-promo-icon{
        font-size:3rem;
        bottom:8px;
        right:10px;
    }
    
    .mega-promo-title{
        font-size:.85rem;
    }
    
    .mega-promo-desc{
        font-size:.72rem;
        line-height:1.4;
    }
    
    .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;
        white-space:nowrap;
    }
    
    [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;
    }
    
    /* Mobile'da da scroll'da sticky */
    .header-sticky.scrolled{
        top:0;
    }
    
    .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: 2.5rem; /* Mobilde popüler badge için ekstra boşluk */
    }
    
    /* Mobilde popüler badge pozisyonunu ayarla */
    .popular-badge {
        top: -12px;
        font-size: 0.7rem;
        padding: 0.4rem 1rem;
    }
    
    .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;
    }
    
    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;
        margin-top: 2.5rem; /* Üstte boşluk eklendi */
    }
    
    .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;
    }
    
    /* MOBİL PERFORMANS: Hero stat kartlarını gizle (gereksiz render) */
    .hero-stats{
        display: none !important;
    }
    
    .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%{
            transform:translate(-50%, -50%) scale(1);
            opacity:.8;
        }
        50%{
            transform:translate(-50%, -50%) scale(4);
            opacity:.4;
        }
        to{
            transform:translate(-50%, -50%) scale(6);
            opacity:0;
        }
    }
    
    .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 h3{
        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{
        min-height:400px;
    }
    
    .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;
    }
    
    /* MOBİL PERFORMANS: Sol taraftaki dekoratif görseli gizle */
    .premium-visual-side{
        display: none !important;
    }
    
    .premium-search-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-wrap: wrap; /* Satır atlaması için */
    }
    
    /* MOBİL: Globe ikonunu gizle, daha anlaşılır olsun */
    .search-icon-wrapper{
        display: none !important;
    }
    
    .premium-search-input{
        font-size:1rem;
        padding:1rem 1rem;
        flex: 1;
        min-width: 0;
        border-right: 1px solid var(--border-color);
        text-align: center;
    }
    
    .tld-select-wrapper{
        border-left: none;
        border-top: none;
        width: auto;
        flex-shrink: 0;
    }
    
    .premium-tld-select{
        font-size:1rem;
        padding:1rem 1rem;
        width: auto;
        min-width: 100px;
        font-weight: 600;
    }
    
    .premium-search-button{
        font-size:1rem;
        justify-content:center;
        padding:1.25rem 1.5rem;
        width: 100%;
        font-weight: 600;
        border-top: 1px solid var(--border-color);
        border-radius: 0 0 12px 12px;
    }
    
    /* MOBİL PERFORMANS: Quick TLD butonlarını gizle (Alan adı arama optimizasyonu) */
    .quick-tlds{
        display: none !important;
    }
    
    .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:1rem;
        margin-top:1.5rem;
        padding-top:1.5rem;
    }
    
    .feature-item{
        font-size:.9rem;
        font-weight: 600;
    }
    
    .feature-item i{
        font-size: 1.1rem;
        color: var(--color-primary);
    }
    .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{
        margin-bottom:1.5rem;
    }
    .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;
    }
    
    /* MOBİL PERFORMANS: Görsel taraf zaten gizli, sadece search side için padding */
    .premium-search-side{
        padding:1.75rem 1rem;
    }
    
    .premium-globe-container{
        height:160px;
        width:160px;
    }
    
    .search-title{
        font-size:1.35rem !important;
        margin-bottom: 0.5rem;
    }
    
    .search-subtitle{
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
    
    .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 Logo Toggle - Siyah Logo */
        [data-theme="light"] .logo-white {
            display: none;
        }
        
        [data-theme="light"] .logo-dark {
            display: block;
        }
        
        /* 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(16, 185, 129, 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, #10b981, #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-secondary);
    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: #1d4ed8;
    color: #ffffff;
    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 - Resimdeki Kart Stili */
.domain-search-suggestions {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.domain-search-suggestions::-webkit-scrollbar {
    display: none;
}

.domain-suggestion-card {
    position: relative;
    min-width: 130px;
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-image: linear-gradient(var(--bg-card), var(--bg-card)), 
                      linear-gradient(135deg, #14b8a6, #10b981, #06b6d4);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

[data-theme="dark"] .domain-suggestion-card {
    background-image: linear-gradient(rgba(30, 41, 59, 0.9), rgba(30, 41, 59, 0.9)), 
                      linear-gradient(135deg, #14b8a6, #10b981, #06b6d4);
}

[data-theme="light"] .domain-suggestion-card {
    background-image: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), 
                      linear-gradient(135deg, #14b8a6, #10b981, #06b6d4);
}

.domain-suggestion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.25);
}

.domain-card-info {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.domain-suggestion-card:hover .domain-card-info {
    opacity: 1;
    color: var(--color-primary);
}

.domain-card-tld {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.domain-card-old-price {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: line-through;
    opacity: 0.7;
}

.domain-card-new-price {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 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;
}

/* MOBİL: Trust badges eşit genişlik */
@media (max-width: 768px) {
    .domain-trust-badges {
        gap: 12px;
        margin-top: 24px;
    }
    
    .trust-badge {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 0;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        gap: 6px;
        font-size: 12px;
        padding: 8px 4px;
    }
    
    .trust-badge i {
        font-size: 20px;
        margin-bottom: 4px;
    }
    
    .trust-badge span {
        display: block;
        line-height: 1.3;
    }
}

/* 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, #10b981);
    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-secondary);
    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-secondary);
}

/* 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(16, 185, 129, 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 h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Eski h4 desteği için */
.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-secondary);
    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 h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Eski h4 desteği için */
.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-secondary);
    margin: 0;
}

/* TLD Table Section */
.domain-tld-table-section {
    padding: 100px 0;
    background: var(--bg-primary);
}

.domain-tld-table-section .tld-table-wrapper {
    margin-top: 60px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

.domain-tld-table-section .tld-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

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

.domain-tld-table-section .tld-table th {
    padding: 16px 20px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.domain-tld-table-section .tld-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

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

.domain-tld-table-section .tld-table td {
    padding: 16px 20px;
    font-size: 14px;
    color: var(--text-secondary);
}

.domain-tld-table-section .tld-table td strong {
    color: var(--color-primary);
    font-size: 16px;
}

/* 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-secondary);
    margin: 0;
}

/* Domain CTA Section */
.domain-cta-section {
    padding: 100px 0;
    background: var(--bg-primary);
}

.domain-cta-card {
    background: linear-gradient(135deg, #3b82f6, #10b981);
    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 {
        display: none; /* Icon mobilde gizli */
    }
    
    .domain-search-input {
        padding: 12px 20px;
        text-align: center;
    }
    
    .domain-search-button {
        width: 100%;
        justify-content: center;
    }
    
    /* Domain Suggestion Cards - Tablet/Mobil */
    .domain-suggestion-card {
        min-width: 110px;
        padding: 14px 10px;
    }
    
    .domain-card-tld {
        font-size: 18px;
    }
    
    .domain-card-old-price {
        font-size: 10px;
    }
    
    .domain-card-new-price {
        font-size: 16px;
    }
    
    .domain-tld-table-section .tld-table-wrapper {
        overflow-x: auto;
    }
    
    .domain-tld-table-section .tld-table {
        table-layout: auto;
        min-width: 700px;
    }
    
    .domain-cta-actions {
        flex-direction: column;
    }
    
    .domain-cta-actions .btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .domain-hero-title {
        font-size: 28px;
    }
    
    /* Domain Suggestion Cards - Küçük Mobil */
    .domain-suggestion-card {
        min-width: 100px;
        padding: 12px 8px;
    }
    
    .domain-card-tld {
        font-size: 16px;
        margin-bottom: 4px;
    }
    
    .domain-card-old-price {
        font-size: 9px;
    }
    
    .domain-card-new-price {
        font-size: 14px;
    }
    
    .domain-card-info {
        top: 6px;
        right: 6px;
        font-size: 10px;
    }
}

/* ============================================
   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 - Sosyal Kanıt Satırı */
.hosting-hero .hero-social-proof {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    opacity: 0.85;
}

/* 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.33rem, 4.66vw, 3.49rem);
    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;
    align-items: center; /* Dikey ortalama */
    gap: 1rem;
    flex-wrap: nowrap; /* Yan yana kalsin */
    margin-bottom: 0;
}

.hosting-hero .hero-cta .btn {
    white-space: nowrap; /* Metni kirmasi */
    flex-shrink: 0; /* Butonlar kuculmesi */
}

/* Hero section'daki outline buton da btn-lg boyutunda olmalı */
.hosting-hero .hero-cta .btn-outline {
    padding: 1rem 3rem;
    font-size: 1.125rem;
    font-weight: 600;
}

/* 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: 3rem 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;
    }
    
    /* Hosting Hero için dikey düzen (mobil) */
    .hosting-hero .trustpilot-rating {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Trustpilot Logo boyutu (mobil) */
    .trustpilot-logo-sm {
        width: 132px;
        height: auto;
        margin-bottom: 0.25rem;
    }
}


[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;
}

/* Hero visual sadece gerçek mobilde gizle (768px altı) */
@media (max-width: 767px) {
    .hero-visual {
        display: none !important;
    }
}

/* Tablet ve üstünde her zaman göster */
@media (min-width: 768px) {
    .hosting-hero .col-lg-5 {
        display: block !important;
    }
}

/* 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); }
}


[data-theme="light"] .floating-panel-card {
    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);
}

.floating-panel-card:hover {
    transform: scale(1.3);
    box-shadow: 
        0 25px 80px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    z-index: 10;
}

[data-theme="light"] .floating-panel-card:hover {
    box-shadow: 
        0 25px 80px rgba(59, 130, 246, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Ortadaki Aktif Kart - En Büyük ve Ön Plan */
.card-3d.card-center {
    transform: translateY(0) scale(1) translateZ(100px);
    opacity: 1;
    z-index: 10;
    filter: blur(0);
}

.card-3d.card-center:hover {
    transform: translateY(0) scale(1.05) translateZ(100px);
}

/* Arkadaki Kartlar - Küçük ve Blur */
.card-3d.card-back {
    transform: scale(0.75) translateZ(-100px);
    opacity: 0.5;
    z-index: 5;
    filter: blur(2px);
}

/* Üstteki Kart */
.card-3d.card-top {
    top: -120px;
}

/* Alttaki Kart */
.card-3d.card-bottom {
    bottom: -120px;
}

/* Panel Preview Image */
.card-3d .panel-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-xl) - 0.5rem);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-3d:hover .panel-preview-img {
    transform: scale(1.05);
}



/* Uçan Panel Kartları - 2 Büyük Kutu */
.hero-card-stack {
    position: relative;
    width: 100%;
    max-width: 550px;
    height: 500px;
    margin: 0 auto;
    z-index: 1;
}

/* Floating Panel Card Base */
.floating-panel-card {
    position: absolute;
    width: 480px;
    height: 300px;
    padding: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    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);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] .card-3d {
    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(255, 255, 255, 0.1);
}

/* Image Style */
.floating-panel-card .panel-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* Kart Pozisyonları - 2 Büyük Kutu (Statik) */
.panel-card-1 {
    top: 0;
    left: -80px;
    z-index: 2;
}

.panel-card-2 {
    bottom: 0;
    right: -80px;
    z-index: 3;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    .hero-card-stack {
        max-width: 450px;
        height: 450px;
    }
    
    .floating-panel-card {
        width: 400px;
        height: 250px;
    }
    
    .panel-card-1 {
        top: 0;
        left: -40px;
    }
    
    .panel-card-2 {
        bottom: 0;
        right: -40px;
    }
}

/* Responsive - Mobil */
@media (max-width: 576px) {
    .hero-card-stack {
        max-width: 340px;
        height: 380px;
    }
    
    .floating-panel-card {
        width: 320px;
        height: 200px;
        padding: 3px;
    }
    
    .panel-card-1 {
        top: 0;
        left: -10px;
    }
    
    .panel-card-2 {
        bottom: 0;
        right: -10px;
    }
}

.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);
}

/* Billing Cycle Selector */
.billing-cycle-selector {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(10px);
}

.cycle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.cycle-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cycle-btn:not(.active):hover::before {
    opacity: 1;
}

.cycle-btn .cycle-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    color: white;
    padding: 0.25rem 0.625rem;
    background: var(--color-secondary);
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

.cycle-btn.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

.cycle-btn.active {
    color: white;
}

.cycle-btn.active .cycle-badge {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

[data-theme="light"] .billing-cycle-selector {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .cycle-btn:not(.active):hover {
    background: rgba(59, 130, 246, 0.05);
}

[data-theme="light"] .cycle-btn.active {
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
}

/* Price Bonus Update */
.price-bonus {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-top: 0.75rem;
}

.price-bonus .total-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-secondary);
}

.price-bonus .billing-period {
    display: none; /* Gizle, sadece Total göster */
}

/* Responsive - Mobilde alt alta */
@media (max-width: 768px) {
    .billing-cycle-selector {
        gap: 0.5rem;
        padding: 0.5rem;
        width: 100%;
        flex-direction: column;
    }
    
    .cycle-btn {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        width: 100%;
        justify-content: center;
    }
    
    .cycle-btn .cycle-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 576px) {
    .billing-cycle-selector {
        gap: 0.375rem;
    }
    
    .cycle-btn {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }
}

.pricing-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ====================================================================
   1366px ÇÖZÜNÜRLÜK OPTİMİZASYONU (1200px - 1400px)
   - Hosting paketleri: 4 kolon tek satır
   - Dedicated Server: Container genişlik düzelt
   - Top Bar: Kompakt mod (gap azaltıldı)
   - Navbar: Kompakt mod (gap ve padding azaltıldı)
   ==================================================================== */
@media (min-width: 1200px) and (max-width: 1400px) {
    /* Dedicated Server Packages - Container max-width override */
    .ds-packages-section .container {
        max-width: 1180px !important;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    /* Minecraft Console Container - Sosyal medya iconları için genişlik düzelt */
    .game-console-container {
        max-width: 1160px !important;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    /* Hosting Paketleri - 4 paketi tek satırda */
    .hosting-pricing-cards .pricing-cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
        max-width: 1200px;
    }
    
    /* Top Bar - Kompakt Mod (1366px için) */
    .top-bar-left,
    .top-bar-right {
        gap: 0.75rem !important;
    }
    
    .top-bar-content {
        font-size: 0.8rem;
    }
    
    .top-bar-link,
    .top-bar-btn {
        padding: 0.3rem 0.55rem;
        font-size: 0.8rem;
    }
    
    .top-bar-link i,
    .top-bar-link svg,
    .top-bar-btn i,
    .top-bar-btn svg {
        font-size: 0.85rem;
        width:15px;
        height:15px;
    }
    
    /* Navbar - Kompakt Mod (Laptop ekranlar + uzun diller için optimize) */
    .navbar {
        gap: 1.5rem;
    }
    
    .navbar-menu {
        gap: 0.25rem;  /* Kompakt - uzun diller için kritik */
    }
    
    .nav-link {
        padding: 0.75rem 0.8rem;  /* Optimum padding */
        font-size: 0.875rem;  /* Biraz daha küçük - uzun metinler sığar */
        white-space: nowrap;
    }
    
    .nav-link i.fa-chevron-down {
        margin-left: 0.2rem;  /* Daha kompakt */
    }
    
    .navbar-actions {
        gap: 0.75rem;
    }
}

.pricing-card {
    background: var(--bg-card);
    border: 1px 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: 2px solid var(--color-primary);
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
    position: relative;
}

.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;
    z-index: 2;
}

.discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    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);
}

.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: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    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.4rem;
    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.7rem;
    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: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.4;
}

.plan-features li:last-child {
    border-bottom: none;
}

/* Divider'dan önceki li'nin border'ını kaldır */
.plan-features li:has(+ .plan-features-divider) {
    border-bottom: none;
}

/* Divider'dan sonraki ilk li'ye üstten boşluk */
.plan-features-divider + li {
    margin-top: 0;
}

.plan-features li i {
    color: var(--color-secondary);
    font-size: 0.75rem;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Special Icons for Top Features */
.plan-features li i.feature-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.875rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    flex-shrink: 0;
    margin-bottom: 0 !important;
}

/* Domain Icon - Blue */
.plan-features li i.fa-globe.feature-icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Disk Space Icon - Purple */
.plan-features li i.fa-hdd.feature-icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Traffic Icon - Green */
.plan-features li i.fa-chart-line.feature-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Subdomain Icon - Orange */
.plan-features li i.fa-sitemap.feature-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.plan-features li strong {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}

.pricing-note {
    margin-top: 3rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: var(--radius-lg);
}

/* VPN/Proxy Plan Features - Enhanced Layout (for vertical cards if needed) */
.plan-features li div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    line-height: 1;
}

.plan-features li div small {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
    white-space: nowrap;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}

/* Feature Divider/Separator */
.plan-features-divider {
    list-style: none !important;
    margin: 1rem 0 0.5rem 0 !important;
    padding: 0.5rem 0 0.35rem 0 !important;
    border-top: none !important;
    border-bottom: none !important;
}

.plan-features-divider .divider-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    display: inline-block;
    position: relative;
    padding-bottom: 0.5rem;
}

.plan-features-divider .divider-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 2px;
}

[data-theme="dark"] .plan-features-divider .divider-title::after {
    background: linear-gradient(90deg, #3b82f6, #10b981);
}

.plan-features-divider i {
    display: none !important;
}

/* Trust Indicators */
.trust-indicator {
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

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

[data-theme="light"] .trust-indicator:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.trust-indicator .trust-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    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: 50%;
    color: var(--color-primary);
}

.trust-indicator h3,
.trust-indicator h5 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.trust-indicator p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Price Note (Below price) */
.price-note {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

/* VPN/Proxy Locations Grid - Flag Icons Support */
.vpn-locations-section .tech-logo-icon,
.proxy-platforms-section .tech-logo-icon {
    width: 80px;
    height: 80px;
}

.vpn-locations-section .tech-logo-icon .fi,
.proxy-platforms-section .tech-logo-icon .fi {
    font-size: 3.5rem;
    line-height: 1;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

[data-theme="light"] .vpn-locations-section .tech-logo-icon .fi,
[data-theme="light"] .proxy-platforms-section .tech-logo-icon .fi {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.vpn-locations-section .tech-logo-item:hover .fi,
.proxy-platforms-section .tech-logo-item:hover .fi {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .vpn-locations-section .tech-logo-item:hover .fi,
[data-theme="light"] .proxy-platforms-section .tech-logo-item:hover .fi {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* VPN Locations Grid - Responsive */
.vpn-locations-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .vpn-locations-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1rem;
    }
    
    .vpn-locations-section .tech-logo-icon,
    .proxy-platforms-section .tech-logo-icon {
        width: 60px;
        height: 60px;
    }
    
    .vpn-locations-section .tech-logo-icon .fi,
    .proxy-platforms-section .tech-logo-icon .fi {
        font-size: 2.5rem;
    }
}

/* ============================================
   HORIZONTAL PRICING CARD (VPN/Single Product)
   Yatay düzlemde kompakt ve modern kart
   ============================================ */

.horizontal-pricing-card {
    max-width: 1200px;
    margin: 3rem auto 0;
}

.pricing-card-horizontal {
    display: flex;
    background: var(--bg-card);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.pricing-card-horizontal:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(59, 130, 246, 0.25);
}

[data-theme="light"] .pricing-card-horizontal {
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .pricing-card-horizontal:hover {
    box-shadow: 0 20px 60px rgba(59, 130, 246, 0.15);
}

/* Left Side - Features (60%) */
.pricing-left {
    flex: 0 0 60%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
}

.plan-header-horizontal {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    margin-top: 0.5rem;
}

.plan-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--radius-lg);
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.plan-name-horizontal {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.plan-tagline-horizontal {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

/* Pricing Highlights (Right Side) */
.pricing-highlights {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.highlight-item:hover {
    border-color: var(--color-primary);
    transform: translateX(4px);
}

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

/* Price Box (Right Side) */
.price-box {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .price-box {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.06);
}

.price-main-horizontal {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.price-main-horizontal .currency {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-right: 0.25rem;
}

.price-main-horizontal .amount {
    font-size: 3rem;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-primary);
    line-height: 1;
}

.price-main-horizontal .period {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.btn-block-horizontal {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* Trust Badges Compact (Right Side) */
.trust-badges-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1.5rem;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
}

.trust-badges-compact span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.trust-badges-compact i {
    color: var(--color-secondary);
    font-size: 1rem;
}

/* Right Side - Pricing Info (40%) */
.pricing-right {
    flex: 0 0 40%;
    padding: 3rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
    display: flex;
    flex-direction: column;
    position: relative;
}

[data-theme="light"] .pricing-right {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03), rgba(139, 92, 246, 0.03));
}

.pricing-right .popular-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    margin: 0;
}

/* Features Section (Left Side) */
.features-header-horizontal {
    margin-bottom: 1.5rem;
}

.features-header-horizontal h3,
.features-header-horizontal h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.features-header-horizontal i {
    color: var(--color-secondary);
    font-size: 1.25rem;
}

/* Features Grid - 2 Columns (Left Side) */
.features-grid-horizontal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    flex-grow: 1;
}

.feature-item-horizontal {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.03);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

[data-theme="light"] .feature-item-horizontal {
    background: rgba(59, 130, 246, 0.02);
}

.feature-item-horizontal:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

.feature-item-horizontal i {
    color: var(--color-secondary);
    font-size: 1rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.feature-item-horizontal div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.feature-item-horizontal strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.feature-item-horizontal small {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 991px) {
    .pricing-card-horizontal {
        flex-direction: column;
    }
    
    .pricing-left {
        flex: 1;
        border-right: none;
        border-bottom: none;
        padding: 2.5rem 2rem;
        order: 2; /* Features ikinci sırada (altda) */
    }
    
    .pricing-right {
        flex: 1;
        padding: 2.5rem 2rem;
        border-bottom: 1px solid var(--border-color);
        order: 1; /* Pricing ilk sırada (üstte) */
    }
    
    .pricing-right .popular-badge {
        top: 1rem;
        right: 1rem;
    }
    
    .features-grid-horizontal {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 576px) {
    .horizontal-pricing-card {
        margin: 2rem auto 0;
    }
    
    .pricing-left,
    .pricing-right {
        padding: 2rem 1.5rem;
    }
    
    .pricing-right .popular-badge {
        top: 0.75rem;
        right: 0.75rem;
        font-size: 0.625rem;
        padding: 0.375rem 0.75rem;
    }
    
    .plan-header-horizontal {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .plan-icon {
        width: 50px;
        height: 50px;
    }
    
    .plan-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .plan-name-horizontal {
        font-size: 1.25rem;
    }
    
    .price-main-horizontal .amount {
        font-size: 2.5rem;
    }
    
    .pricing-highlights {
        gap: 0.5rem;
    }
    
    .highlight-item {
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
    }
    
    .feature-item-horizontal {
        padding: 0.875rem;
    }
    
    .feature-item-horizontal strong {
        font-size: 0.875rem;
    }
    
    .feature-item-horizontal small {
        font-size: 0.75rem;
    }
    
    .features-header-horizontal h3,
    .features-header-horizontal h4 {
        font-size: 1rem;
    }
}

.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 - Theme Based Display */
.rabisu-logo-dark,
.rabisu-logo-light {
    height: 28px;
    width: auto;
}

.rabisu-logo-dark {
    display: inline-block;
}

.rabisu-logo-light {
    display: none;
}

[data-theme="light"] .rabisu-logo-dark {
    display: none;
}

[data-theme="light"] .rabisu-logo-light {
    display: inline-block;
}

/* Scale */
.benchmark-scale-v2 {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* 32.3 Plan Comparison Table */
.plan-comparison-section {
    padding: 6rem 0;
    background: var(--bg-primary);
    display: block !important; /* PHP mobil kontrolü override - Tablet/Laptop'ta her zaman göster */
}

.comparison-table-wrapper {
    overflow-x: auto;
    margin-top: 3rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

/* Sadece gerçek mobil cihazlarda gizle (768px altı) */
@media (max-width: 767px) {
    .plan-comparison-section {
        display: none !important;
    }
}

.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.comparison-header-row th {
    padding: 2.5rem 1.5rem;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: center;
    vertical-align: top;
}

.comparison-table .plan-header-cell {
    padding: 2rem 1rem;
}

.comparison-table .plan-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.comparison-table .plan-name-header {
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.comparison-table .plan-price-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.comparison-table .old-price-display {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-bottom: 0.25rem;
}

.comparison-table .main-price-display {
    display: flex;
    align-items: flex-start;
    line-height: 1;
}

.comparison-table .price-number {
    font-size: 4rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1;
}

.comparison-table .price-decimal {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-top: 0.5rem;
    margin-left: 0.125rem;
}

.comparison-table .price-period {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0;
    line-height: 1;
}

[data-theme="dark"] .comparison-table thead tr.comparison-header-row th {
    background: rgba(30, 41, 59, 0.5);
}

.comparison-table thead tr.comparison-header-row th.feature-column {
    text-align: left;
    vertical-align: middle;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

/* Responsive Design for Comparison Table */
@media (max-width: 768px) {
    .comparison-table .price-number {
        font-size: 2.5rem;
    }
    
    .comparison-table .price-decimal {
        font-size: 1.125rem;
        margin-top: 0.375rem;
    }
    
    .comparison-table .plan-name-header {
        font-size: 1rem;
    }
    
    .comparison-table .plan-header-cell {
        padding: 1.5rem 0.5rem;
    }
}

[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);
    text-align: center;
}

.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;
}

/* Satın Al Butonları - Eşit Boyut için */
.comparison-table .cta-row td .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

/* Tablet ve Laptop için buton düzenlemesi */
@media (min-width: 768px) and (max-width: 1400px) {
    .comparison-table .cta-row td .btn {
        font-size: 0.875rem;
        padding: 0.625rem 0.75rem;
        min-height: 40px;
    }
}

/* 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;
    padding: 8px;
}

.tech-logo-icon img.tech-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 8px;
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* Dark Mode: İkonları biraz parlat */
[data-theme="dark"] .tech-logo-icon img.tech-icon-img {
    filter: brightness(1.1) saturate(1.2);
}

/* Light Mode: İkonları hafif koyult */
[data-theme="light"] .tech-logo-icon img.tech-icon-img {
    filter: brightness(0.95) saturate(0.9);
}

/* Hover Efektleri */
.tech-logo-item:hover .tech-logo-icon img.tech-icon-img {
    transform: scale(1.05);
}

[data-theme="dark"] .tech-logo-item:hover .tech-logo-icon img.tech-icon-img {
    filter: brightness(1.3) saturate(1.3) drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}

[data-theme="light"] .tech-logo-item:hover .tech-logo-icon img.tech-icon-img {
    filter: brightness(0.85) saturate(1.1) drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
}

.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-secondary);
    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;
}

/* Light Mode Fix - Final CTA Başlık Görünürlüğü */
[data-theme="light"] .final-cta-title {
    color: #fff;
}

.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: nowrap; /* Yan yana kalsin */
    margin-bottom: 2rem;
}

.final-cta-buttons .btn {
    white-space: nowrap; /* Metni kirmasin */
    flex-shrink: 0; /* Butonlar kuculmessin */
}

.final-cta-buttons .btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    vertical-align: middle;
}

.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);
}

.final-cta-trust svg {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 1);
    flex-shrink: 0;
}

/* 32.8 Responsive Design */
@media (max-width: 991px) {
    .hosting-hero {
        padding: 5rem 0 2rem;
    }
    
    .hosting-hero .hero-title {
        font-size: clamp(1.86rem, 4.66vw, 2.33rem);
    }
    
    .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: 1399px) {
    .comparison-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOS için smooth scroll */
    }
    
    .comparison-table {
        min-width: 1000px;
    }
}

/* 1366px için container genişliği artır */
@media (min-width: 1200px) and (max-width: 1399px) {
    .plan-comparison-section .container {
        max-width: 1280px !important;
    }
}

/* Tablet (768px+) için tablo her zaman görünsün */
@media (min-width: 768px) {
    .plan-comparison-section {
        display: block !important;
    }
}

@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(1.86rem, 4.66vw, 2.33rem);
    }
    
    /* Tablet - 3D Card Stack ayarları */
    .hero-card-stack-3d {
        max-width: 400px;
        height: 550px;
    }
    
    .card-3d {
        width: 380px;
        height: 240px;
    }
    
    .card-3d.card-top {
        top: -100px;
    }
    
    .card-3d.card-bottom {
        bottom: -100px;
    }
    
    /* 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: 2.5rem; /* Popüler badge için ekstra boşluk */
    }
    
    .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;
    }
    
    /* Mobil - 3D Card Stack ayarları */
    .hero-card-stack-3d {
        max-width: 320px;
        height: 450px;
    }
    
    .card-3d {
        width: 300px;
        height: 190px;
        padding: 0.5rem;
    }
    
    .card-3d.card-back {
        transform: scale(0.7) translateZ(-80px);
    }
    
    .card-3d.card-top {
        top: -80px;
    }
    
    .card-3d.card-bottom {
        bottom: -80px;
    }
    
    @keyframes card-cycle {
        0% {
            transform: translateY(-80px) scale(0.7) translateZ(-80px);
            opacity: 0.5;
            filter: blur(2px);
        }
        33% {
            transform: translateY(0) scale(1) translateZ(80px);
            opacity: 1;
            filter: blur(0);
        }
        66% {
            transform: translateY(80px) scale(0.7) translateZ(-80px);
            opacity: 0.5;
            filter: blur(2px);
        }
        100% {
            transform: translateY(-80px) scale(0.7) translateZ(-80px);
            opacity: 0.5;
            filter: blur(2px);
        }
    }
    
    /* 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;
    }
    
    
    /* 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;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%; /* Parent yüksekliğini kullan */
}

.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;
    margin-bottom: 20px;
}

.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;
}

/* Turkey VPS Advantage Section Styles (Scoped) */
.support-hero-section .turkey-advantage-check {
    background: linear-gradient(135deg, #e2001a, #c41230);
    min-width: 24px;
    height: 24px;
}

.support-hero-section .turkey-adv-badge {
    display: inline-block;
    background: linear-gradient(135deg, #e2001a, #c41230);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.support-hero-section .turkey-adv-badge .fi {
    margin-right: 8px;
}

.support-hero-section .turkey-adv-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.support-hero-section .turkey-adv-desc {
    margin-bottom: 25px;
    font-size: 1.05rem;
}

.support-hero-section .support-features {
    margin-top: 30px;
}

.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;
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-visual img {
    /* Arka plan kutu efektleri kaldırıldı - direkt görsel */
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ============================================
   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 h3 {
    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 visual sadece gerçek mobilde gizle (768px altı) */
@media (max-width: 767px) {
    .showcase-visual {
        display: none !important;
    }
}

/* Tablet ve üstünde her zaman göster */
@media (min-width: 768px) {
    .features-showcase-section .col-lg-6:last-child {
        display: block !important;
    }
}

.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;
        padding-left: 0; /* Mobilde her iki padding'i de sıfırla */
        margin-bottom: 3rem;
        justify-content: flex-start;
    }
    
    .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;
        min-height: auto !important;
        cursor: default; /* Mobilde tıklanabilir değil */
        pointer-events: none; /* Tıklama devre dışı */
    }
    
    /* Mobilde hover ve active efektleri kaldır */
    .showcase-feature-item:hover {
        transform: none;
        border-color: transparent;
    }
    
    .showcase-feature-item.active {
        background: var(--bg-primary);
        border-color: transparent;
    }
    
    [data-theme="dark"] .showcase-feature-item.active {
        background: rgba(30, 41, 59, 0.4);
    }
    
    [data-theme="light"] .showcase-feature-item.active {
        background: rgba(248, 250, 252, 0.6);
    }
    
    .showcase-feature-item.active .feature-icon-wrapper {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.15));
    }
    
    .showcase-feature-item.active .feature-icon-wrapper svg {
        color: var(--color-primary);
    }
    
    .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: none; /* Mobilde hover efekti yok */
    }
    
    .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 */
.game-platform-tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.game-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;
}

.game-tag i {
    font-size: 0.8rem;
    color: var(--color-primary);
}

.game-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 */
.game-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;
}

/* =============================================
   FORCE DARK MODE (Game Pages)
   ============================================= */
.force-dark-mode {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.force-dark-mode [data-theme="light"],
.force-dark-mode.light-mode {
    display: none !important;
}

.force-dark-mode [data-theme-toggle],
.force-dark-mode .theme-toggle,
.force-dark-mode .theme-switcher,
.force-dark-mode #themeToggle,
.force-dark-mode .dark-mode-toggle {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* =============================================
   GAME HERO SECTION (Generic for all games)
   ============================================= */
.game-console-section.game-hero-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: visible;
    margin-top: -25px !important;
    padding-top: 4rem !important;
    min-height: 100vh;
    will-change: auto;
}

/* Mobilde margin-top'u kaldır (Minecraft gibi) */
@media (max-width: 768px) {
    .game-console-section.game-hero-section {
        margin-top: 0 !important;
        padding-top: 3rem !important;
    }
}

.game-console-section.game-hero-section::before {
    display: none;
}

.game-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.84) 0%, rgba(30, 41, 59, 0.9) 100%);
    z-index: 1;
}

.game-hero-section .game-console-container {
    position: relative;
    z-index: 2;
}

.game-hero-character {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease-out;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.trust-brand strong svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

/* Reset & Base */
.game-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 */
.game-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;
}

.game-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 */
.game-tumbling-cubes {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.game-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;
}

.game-tumbling-cube:nth-child(1) {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.game-tumbling-cube:nth-child(2) {
    bottom: 20%;
    right: 12%;
    animation-delay: 2s;
}

/* RGB Dance Mode - Hızlı dönme */
.game-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) {
    .game-tumbling-cube {
        animation-duration: 20s;
    }
}

/* Hide 3D elements on mobile for better performance */
@media (max-width: 768px) {
    .game-tumbling-cube,
    #steveContainer,
    .game-dance-btn {
        display: none !important;
    }
    
    .game-hero-content {
        max-width: 100% !important;
    }
}

/* Cube Faces - Optimized */
.game-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 */
.game-cube-face.rgb-mode {
    animation: mcCubeRGB 2s linear infinite;
    border-color: rgba(255, 255, 255, 0.6); /* var(--color-white) with opacity */
}

.game-cube-face.front {
    transform: translateZ(40px);
}

.game-cube-face.back {
    transform: translateZ(-40px) rotateY(180deg);
}

.game-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 */
}

.game-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 */
}

.game-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 */
}

.game-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 */
.game-cube-face.rgb-mode.front {
    animation-delay: 0s;
}

.game-cube-face.rgb-mode.back {
    animation-delay: 0.3s;
}

.game-cube-face.rgb-mode.left {
    animation-delay: 0.6s;
}

.game-cube-face.rgb-mode.right {
    animation-delay: 0.9s;
}

.game-cube-face.rgb-mode.top {
    animation-delay: 1.2s;
}

.game-cube-face.rgb-mode.bottom {
    animation-delay: 1.5s;
}

.game-console-container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   HERO SECTION - SHARP & ANGULAR
   ============================================ */

.game-console-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 60px;
    min-height: 550px;
}

/* Platform Badge */
.game-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 */
}

.game-platform-badge svg {
    width: 14px;
    height: 14px;
}

/* Main Title */
.game-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);
}

.game-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;
}

.game-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 */
.game-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;
}

.game-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;
}

.game-console-cta:hover::before {
    left: 100%;
}

.game-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 */
.game-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 80px;
}

.game-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;
}

.game-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;
}

.game-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);
}

.game-bento-item:hover {
    background: rgba(20, 20, 20, 0.8);
    transform: translateY(-6px);
    border-color: rgba(59, 130, 246, 0.4);
}

.game-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;
}

.game-bento-item:hover .game-bento-icon {
    filter: drop-shadow(0 0 25px rgba(59, 130, 246, 1));
    transform: scale(1.15) rotate(-8deg);
}

.game-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;
}

.game-bento-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.game-bento-item-large {
    grid-column: span 2;
}

/* Bento Grid Responsive */
@media (max-width: 992px) {
    .game-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 60px;
    }
}

@media (max-width: 768px) {
    .game-bento-grid {
        grid-template-columns: 1fr;
        margin-top: 40px;
        gap: 12px;
    }
    
    .game-bento-item-large {
        grid-column: span 1;
    }
}

/* ============================================
   HERO VISUAL - Grid Background + Character
   ============================================ */

.game-hero-visual {
    position: relative;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rust Character Mouse Follow Effect */
.game-hero-visual > img {
    transition: transform 0.2s ease-out;
}

/* Grid Background Container - Optimized */
.game-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 */
.game-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 */
.game-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;
}

.game-character-container:active {
    cursor: grabbing;
}

/* Three.js Canvas */
#steveCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Loading Indicator */
.game-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;
}

.game-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 */
.game-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 */
.game-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 */
.game-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;
}

.game-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);
}

.game-dance-btn:hover::after {
    opacity: 0.6;
}

.game-dance-btn:active {
    transform: translateX(-50%) translateY(-1px) scale(0.98);
}

.game-dance-btn svg {
    width: 16px;
    height: 16px;
    animation: mcMusicNote 1s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.game-dance-btn span {
    position: relative;
    z-index: 1;
}

.game-dance-btn.dancing {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent-blue) 100%);
    animation: mcDancingPulse 0.5s ease-in-out infinite;
}

.game-dance-btn.dancing::before {
    animation: mcSweepShineFast 1s ease-in-out infinite;
}

.game-dance-btn.dancing::after {
    opacity: 0.8;
    animation: mcRainbowGlow 1.5s linear infinite;
}

.game-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 */
.game-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 48px;
}

.game-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;
}

.game-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);
}

.game-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;
}

.game-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

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

@media (max-width: 1200px) {
    .game-console-hero {
        grid-template-columns: 1fr;
        gap: 50px;
        min-height: auto;
    }
    
    .game-hero-visual {
        height: 400px;
    }
    
    .game-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .game-hero-title {
        font-size: 52px;
    }
    
    .game-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .game-console-section {
        padding: 40px 0 30px;
    }
    
    .game-platform-tags {
        gap: 0.4rem;
        margin-bottom: 1.25rem;
        justify-content: flex-start;
    }
    
    .game-tag {
        font-size: 0.7rem;
        padding: 0.35rem 0.8rem;
    }
    
    .game-hero-title {
        font-size: 42px;
    }
    
    .game-hero-visual {
        display: none;
    }
    
    .game-bento-grid {
        grid-template-columns: 1fr;
    }
    
    .game-bento-item-large {
        grid-column: span 1;
    }
    
    .game-stats-bar {
        grid-template-columns: 1fr;
    }
    
    .game-trust-badge {
        margin-top: 1.5rem;
        font-size: 0.875rem;
        justify-content: center;
    }
    
    .trust-stars i {
        font-size: 1rem;
    }
}

/* ============================================
   MINECRAFT BLOCK SVG ICONS
   ============================================ */

.game-plan-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.4));
}

.game-plan-icon img,
.game-plan-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.4));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ============================================
   INTERACTIVE FEATURES SHOWCASE
   ============================================ */

.game-features-showcase {
    margin: 80px 0;
    padding-bottom: 60px;
}

.game-showcase-header {
    text-align: center;
    margin-bottom: 50px;
}

.game-showcase-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 60px;
    align-items: start;
}

.game-showcase-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
}

.game-showcase-features-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin: auto 0;
}

.game-showcase-feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 18px;
    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: background-color 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.game-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;
}

.game-showcase-feature-item:hover::before,
.game-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);
}

.game-showcase-feature-item:hover,
.game-showcase-feature-item.active {
    background: rgba(20, 20, 20, 0.8);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateX(8px);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.game-feature-icon-wrapper {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.game-feature-icon-wrapper svg {
    width: 20px;
    height: 20px;
}

.game-showcase-feature-item.active .game-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);
}

.game-feature-icon-wrapper svg {
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.game-showcase-feature-item.active .game-feature-icon-wrapper svg {
    color: var(--text-primary);
}

.game-feature-text-content h3,
.game-feature-text-content .game-tool-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-feature-text-content p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.game-showcase-feature-item.active .game-feature-text-content p {
    color: var(--text-muted);
}

/* Progress Bar */
.game-feature-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    transform-origin: left center;
    will-change: transform;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    transform: scaleX(0);
    opacity: 0;
}

.game-showcase-feature-item.active .game-feature-progress {
    opacity: 1;
    animation: progressBar 3s linear forwards;
}

@keyframes progressBar {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* Showcase Visual */
.game-showcase-visual {
    position: relative;
    height: 600px;
    width: 100%;
}

.game-showcase-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    will-change: opacity;
}

.game-showcase-screen.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.game-showcase-screen svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.3));
}

.game-showcase-screen img {
    border-radius: 20px;
    width: 100%;
    height: auto;
}

/* No Data Fallback */
.game-no-data {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
}

/* Responsive */
@media (max-width: 992px) {
    .game-features-showcase {
        margin: 60px 0;
        padding-bottom: 40px;
    }
    
    .game-showcase-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .game-showcase-content {
        min-height: auto;
    }
    
    .game-showcase-visual {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .game-features-showcase {
        margin: 50px 0;
        padding-bottom: 30px;
    }
    
    .game-showcase-header {
        margin-bottom: 40px;
    }
    
    .game-showcase-content {
        min-height: auto;
    }
    
    .game-showcase-feature-item {
        padding: 20px;
        gap: 16px;
    }
    
    .game-feature-icon-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .game-feature-text-content h3,
    .game-feature-text-content .game-tool-title {
        font-size: 14px;
    }
    
    .game-feature-text-content p {
        font-size: 12px;
    }
    
    .game-showcase-visual {
        height: 300px;
    }
}

/* ============================================
   SUPPORTED SERVER TYPES - FULL WIDTH SECTION
   ============================================ */

.game-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 */
.game-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 */
.game-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);
    }
}

.game-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 */
.game-supported-icons-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

.game-icon-row {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

.game-row-3 {
    /* 3 icons centered relative to 4-icon row */
    justify-content: center;
}

.game-row-4 {
    /* 4 icons aligned to start */
    justify-content: flex-start;
}

.game-type-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    cursor: pointer;
}

/* Icon Card Container */
.game-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;
    box-sizing: border-box;
}

.game-icon-card svg,
.game-icon-card img.game-server-icon-img {
    padding: 26px;
}

.game-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;
}

.game-type-icon:hover .game-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);
}

.game-type-icon:hover .game-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);
}

.game-icon-card svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(96, 165, 250, 0.35));
    transition: filter 0.4s ease;
}

.game-type-icon:hover .game-icon-card svg {
    filter: drop-shadow(0 8px 25px rgba(96, 165, 250, 0.7));
}

/* SimpleIcons IMG Support */
.game-icon-card img.game-server-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: filter 0.4s ease, transform 0.4s ease;
    filter: brightness(1.2) saturate(1.1) drop-shadow(0 4px 12px rgba(96, 165, 250, 0.35));
}

.game-type-icon:hover .game-icon-card img.game-server-icon-img {
    filter: brightness(1.4) saturate(1.3) drop-shadow(0 8px 25px rgba(96, 165, 250, 0.7));
    transform: scale(1.05);
}

.game-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;
}

.game-type-icon:hover span {
    color: var(--color-primary-light);
    transform: translateY(-2px);
}

/* Content Section */
.game-supported-types-content {
    max-width: 100%;
}

.game-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;
}

.game-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;
}

.game-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;
}

.game-supported-description strong {
    color: var(--text-primary);
    font-weight: 700;
}

.game-highlight-blue {
    color: var(--color-primary-light) !important;
    font-weight: 700 !important;
}

.game-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;
}

.game-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;
}

.game-supported-cta-btn:hover::before {
    left: 100%;
}

.game-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);
}

.game-supported-cta-btn svg {
    transition: transform 0.3s ease;
}

.game-supported-cta-btn:hover svg {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1200px) {
    .game-supported-types-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .game-icon-row {
        justify-content: center;
    }
    
    .game-supported-types-content {
        max-width: 100%;
        text-align: center;
    }
}

@media (max-width: 992px) {
    .game-supported-types-section {
        padding: 80px 0;
    }
    
    .game-supported-title {
        font-size: 36px;
    }
    
    .game-icon-row {
        gap: 16px;
    }
    
    .game-icon-card {
        width: 120px;
        height: 120px;
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    }
    
    .game-icon-card svg,
    .game-icon-card img.game-server-icon-img {
        padding: 22px;
    }
    
    .game-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) {
    .game-supported-types-section {
        padding: 60px 0;
    }
    
    .game-supported-title {
        font-size: 30px;
        margin-bottom: 24px;
    }
    
    .game-supported-description {
        font-size: 14px;
        margin-bottom: 16px;
    }
    
    .game-supported-icons-container {
        gap: 16px;
    }
    
    .game-icon-row {
        gap: 12px;
    }
    
    .game-icon-card {
        width: 96px;
        height: 96px;
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }
    
    .game-icon-card svg,
    .game-icon-card img.game-server-icon-img {
        padding: 18px;
    }
    
    .game-icon-card::before {
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }
    
    .game-type-icon span {
        font-size: 8px;
        letter-spacing: 1.5px;
        margin-top: 10px;
    }
    
    .game-supported-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 10px;
    }
}

@media (max-width: 576px) {
    .game-icon-row {
        gap: 10px;
    }
    
    .game-icon-card {
        width: 84px;
        height: 84px;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    }
    
    .game-icon-card svg,
    .game-icon-card img.game-server-icon-img {
        padding: 15px;
    }
    
    .game-icon-card::before {
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    }
    
    .game-type-icon span {
        font-size: 7px;
        letter-spacing: 1.2px;
    }
}

/* ============================================
   MINECRAFT INFORMATION SECTION
   ============================================ */

.game-info-section {
    background: var(--bg-primary); /* Solid dark background */
    padding: 80px 0;
    margin: 0;
    position: relative;
}

.game-info-row {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
}

.game-info-row:last-child {
    margin-bottom: 0;
}

/* Reverse layout for alternating rows */
.game-info-row-reverse {
    grid-template-columns: 1.5fr 0.5fr;
}

.game-info-row-reverse .game-info-text-box {
    order: 1;
}

.game-info-row-reverse .game-info-image-box {
    order: 2;
}

/* Image Box */
.game-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;
}

.game-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;
}

.game-info-image-box:hover {
    background: rgba(20, 20, 20, 0.8);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-6px);
}

.game-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);
}

.game-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;
}

.game-info-image-box:hover img {
    filter: drop-shadow(0 12px 35px rgba(59, 130, 246, 0.5));
    transform: scale(1.02);
}

/* Text Box */
.game-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);
}

.game-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;
}

.game-info-text-box:hover {
    background: rgba(20, 20, 20, 0.8);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-6px);
}

.game-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);
}

.game-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));
}

.game-info-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
    margin: 0 0 16px 0;
}

.game-info-desc:last-child {
    margin-bottom: 0;
}

/* Custom List Styling */
.game-info-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.game-info-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
}

.game-info-list li:last-child {
    margin-bottom: 0;
}

.game-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) {
    .game-info-row,
    .game-info-row-reverse {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 50px;
    }
    
    .game-info-row-reverse .game-info-text-box,
    .game-info-row-reverse .game-info-image-box {
        order: initial;
    }
    
    .game-info-title {
        font-size: 26px;
    }
}

@media (max-width: 992px) {
    .game-info-section {
        padding: 60px 0;
    }
    
    .game-info-row {
        margin-bottom: 40px;
    }
    
    .game-info-image-box {
        padding: 45px;
    }
    
    .game-info-image-box img {
        max-width: 350px;
    }
    
    .game-info-text-box {
        padding: 35px 30px;
    }
    
    .game-info-title {
        font-size: 24px;
        margin-bottom: 18px;
    }
    
    .game-info-desc {
        font-size: 14px;
    }
    
    .game-info-list li {
        font-size: 14px;
        margin-bottom: 14px;
    }
}

@media (max-width: 768px) {
    .game-info-section {
        padding: 50px 0;
    }
    
    .game-info-row {
        gap: 25px;
        margin-bottom: 35px;
    }
    
    .game-info-image-box {
        padding: 40px;
        clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    }
    
    .game-info-image-box::before {
        clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    }
    
    .game-info-image-box img {
        max-width: 280px;
    }
    
    .game-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);
    }
    
    .game-info-text-box::before {
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    }
    
    .game-info-title {
        font-size: 22px;
        margin-bottom: 16px;
    }
    
    .game-info-desc {
        font-size: 13px;
        margin-bottom: 14px;
    }
    
    .game-info-list {
        margin: 16px 0;
    }
    
    .game-info-list li {
        font-size: 13px;
        padding-left: 25px;
        margin-bottom: 12px;
    }
    
    .game-info-list li::before {
        width: 14px;
        height: 14px;
        top: 7px;
    }
}

/* ============================================
   COMPARISON TABLE SECTION
   ============================================ */

.game-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;
}

.game-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;
}

.game-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; }
}

.game-comparison-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.game-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);
}

.game-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;
}

.game-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);
}

.game-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.game-comparison-table thead tr {
    background: rgba(20, 20, 20, 0.8);
}

.game-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);
}

.game-feature-col {
    text-align: left !important;
    width: 25%;
    min-width: 220px;
    padding-left: 30px !important;
}

.game-host-col {
    width: 15%;
    min-width: 150px;
}

.game-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;
}

.game-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));
}

.game-host-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-primary);
}

.game-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); }
}

.game-comparison-table tbody tr {
    transition: all 0.3s ease;
}

.game-comparison-table tbody tr:hover {
    background: rgba(20, 20, 20, 0.6);
}

.game-comparison-table tbody tr:nth-child(even) {
    background: rgba(15, 15, 15, 0.3);
}

.game-comparison-table tbody tr:nth-child(even):hover {
    background: rgba(20, 20, 20, 0.6);
}

.game-comparison-table td {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.game-feature-name {
    text-align: left !important;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    padding-left: 30px !important;
}

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

.game-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;
}

.game-value-best span {
    color: var(--text-primary);
    font-weight: 700;
}

.game-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));
}

.game-value-yes {
    color: var(--color-secondary);
}

.game-value-yes i {
    color: #fbbf24 !important;
}

.game-value-no {
    color: var(--text-muted);
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .game-comparison-title {
        font-size: 36px;
    }
    
    .game-comparison-table th,
    .game-comparison-table td {
        padding: 16px 12px;
        font-size: 13px;
    }
    
    .game-feature-col {
        min-width: 180px;
    }
    
    .game-host-col {
        min-width: 120px;
    }
}

@media (max-width: 992px) {
    .game-comparison-section {
        padding: 80px 0;
        margin: 0;
    }
    
    .game-comparison-title {
        font-size: 32px;
    }
    
    .game-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) {
    .game-comparison-section {
        padding: 60px 0;
        margin: 0;
    }
    
    .game-comparison-header {
        margin-bottom: 40px;
    }
    
    .game-comparison-title {
        font-size: 26px;
    }
    
    .game-comparison-table th,
    .game-comparison-table td {
        padding: 14px 10px;
        font-size: 12px;
    }
    
    .game-feature-col {
        min-width: 160px;
        padding-left: 20px !important;
    }
    
    .game-feature-name {
        font-size: 13px;
        padding-left: 20px !important;
    }
    
    .game-host-col {
        min-width: 100px;
    }
    
    .game-host-header {
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
    }
    
    .game-host-header i {
        font-size: 14px;
    }
    
    .game-value-best i {
        font-size: 12px;
    }
}

/* ============================================
   MINECRAFT PRICING PLANS
   ============================================ */

.game-pricing-section {
    margin-top: 70px;
    margin-bottom: 50px;
}

.game-section-header {
    text-align: center;
    margin-bottom: 40px;
}

.game-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;
}

.game-section-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 14px 0;
    letter-spacing: -1px;
}

.game-section-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Pricing Grid */
.game-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* Single Package - With Promo (Side by Side) */
.game-pricing-grid.single-package-with-promo {
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
    margin: 0 auto 20px;
    gap: 24px;
}

.game-promo-card {
    position: relative;
    border-radius: 16px;
    min-height: 450px;
    perspective: 1500px;
    cursor: pointer;
}

.game-promo-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 450px;
    transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
}

/* HOVER'DA FLIP ANIMASYONU */
.game-promo-card:hover .game-promo-card-inner {
    transform: rotateY(180deg);
}

/* ÖN YÜZ */
.game-promo-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
    pointer-events: auto;
}

/* Kart döndüğünde ön yüzü tıklanamaz yap */
.game-promo-card:hover .game-promo-card-front {
    pointer-events: none;
}

/* ARKA YÜZ */
.game-promo-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 10px 30px -5px rgba(239, 68, 68, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

/* Kart döndüğünde arka yüzü tıklanabilir yap */
.game-promo-card:hover .game-promo-card-back {
    pointer-events: auto;
    z-index: 3;
}

.game-promo-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.game-promo-card:hover .game-promo-bg {
    transform: scale(1.05);
}

.game-promo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.5) 100%);
    z-index: 1;
}

.game-promo-content {
    position: relative;
    z-index: 2;
    padding: 40px;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

.game-promo-header h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--color-primary);
}

.game-promo-header h2 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 30px;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    color: #fff;
}

.game-promo-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.game-promo-features li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    color: #e2e8f0;
}

.game-promo-features li i {
    color: #ef4444;
    margin-right: 12px;
    font-size: 18px;
    background: rgba(239, 68, 68, 0.1);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.game-promo-footer-badge {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    opacity: 0.7;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* ARKA YÜZ STİLLERİ */
.game-promo-back-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(45deg, rgba(239, 68, 68, 0.05) 0px, rgba(239, 68, 68, 0.05) 10px, transparent 10px, transparent 20px),
        repeating-linear-gradient(-45deg, rgba(239, 68, 68, 0.05) 0px, rgba(239, 68, 68, 0.05) 10px, transparent 10px, transparent 20px);
    opacity: 0.3;
}

.game-promo-back-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px;
    color: #fff;
}

.game-promo-back-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    color: #ef4444;
}

.game-promo-back-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.5));
}

.game-promo-back-content h3 {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: 3px;
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.game-promo-back-content > p {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 30px;
    letter-spacing: 1px;
    color: #94a3b8;
}

/* İNDİRİM BADGE - ARKA YÜZ */
.game-promo-discount-badge {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.05) 100%);
    border: 2px solid #ef4444;
    border-radius: 12px;
    padding: 15px 25px;
    margin: 20px auto 40px;
    max-width: 300px;
    box-shadow: 
        0 0 30px rgba(239, 68, 68, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 5;
    user-select: none;
    -webkit-user-select: none;
}

.game-promo-discount-badge:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: #fca5a5;
    box-shadow: 
        0 0 40px rgba(239, 68, 68, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.game-promo-discount-badge:active {
    transform: scale(0.98);
    box-shadow: 
        0 0 20px rgba(239, 68, 68, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.game-discount-icon {
    font-size: 28px;
    color: #ef4444;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

.game-discount-text {
    text-align: left;
}

.game-discount-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fca5a5;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.game-discount-code {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(239, 68, 68, 0.5);
    font-family: 'Courier New', monospace;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* KOPYALANDI MESAJI */
.game-copy-success {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #10b981;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    opacity: 0;
    pointer-events: none;
    animation: copySuccessAnim 2s ease-out forwards;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 6px;
}

.game-copy-success i {
    font-size: 14px;
}

@keyframes copySuccessAnim {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    90% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Pricing Card */
.game-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;
}

.game-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;
}

.game-pricing-card:hover {
    background: rgba(20, 20, 20, 0.8);
    transform: translateY(-6px);
    border-color: rgba(59, 130, 246, 0.5);
}

.game-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 */
.game-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);
}

.game-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 */
.game-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.game-plan-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.game-plan-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Plan-specific Name Colors */
.game-pricing-card:nth-child(1) .game-plan-name { color: var(--color-gray-400); } /* STONE - Gray */
.game-pricing-card:nth-child(2) .game-plan-name { color: #F97316; } /* IRON - Orange (Hard-coded özel turuncu) */
.game-pricing-card:nth-child(3) .game-plan-name { color: #FBBF24; } /* GOLD - Yellow (Hard-coded altın sarısı) */
.game-pricing-card:nth-child(4) .game-plan-name { color: var(--color-accent-red); } /* REDSTONE - Red */

/* Second Row Colors */
.game-pricing-grid:nth-of-type(2) .game-pricing-card:nth-child(1) .game-plan-name { color: var(--color-accent-blue); } /* DIAMOND - Cyan */
.game-pricing-grid:nth-of-type(2) .game-pricing-card:nth-child(2) .game-plan-name { color: var(--color-secondary); } /* EMERALD - Green */
.game-pricing-grid:nth-of-type(2) .game-pricing-card:nth-child(3) .game-plan-name { color: #A855F7; } /* AMETHYST - Purple (Hard-coded özel mor) */
.game-pricing-grid:nth-of-type(2) .game-pricing-card:nth-child(4) .game-plan-name { color: #38BDF8; } /* BEACON - Sky Blue (Hard-coded özel mavi) */

.game-plan-ram {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
}

.game-plan-icon {
    width: 64px;
    height: 64px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
    flex-shrink: 0;
}

.game-pricing-card:hover .game-plan-icon {
    transform: rotateY(180deg);
}

/* IMG içeren iconlarda flip efektini devre dışı bırak (tüm oyun sayfaları için) */
.game-pricing-card:hover .game-plan-icon:has(img),
.game-pricing-card:hover .game-plan-icon:has(.game-plan-icon-img) {
    transform: none !important;
}

/* Plan Features */
.game-plan-features {
    margin-bottom: 16px;
}

.game-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);
}

.game-feature-item:last-child {
    border-bottom: none;
}

.game-feature-icon {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.game-feature-icon svg {
    width: 100%;
    height: 100%;
}

.game-feature-text {
    flex: 1;
}

.game-feature-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Plan Footer */
.game-plan-footer {
    text-align: center;
}

.game-plan-price-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 6px;
}

.game-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;
}

.game-plan-period {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

.game-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;
}

.game-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);
}

.game-plan-button svg {
    width: 14px;
    height: 14px;
}

/* Responsive */
@media (max-width: 1200px) {
    .game-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .game-pricing-grid.single-package-with-promo {
        max-width: 100%;
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .game-section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .game-pricing-section {
        margin-top: 50px;
        margin-bottom: 40px;
    }
    
    .game-section-header {
        margin-bottom: 30px;
    }
    
    .game-pricing-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    
    .game-pricing-grid.single-package-with-promo {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .game-promo-card {
        min-height: 350px;
    }
    
    .game-promo-card-inner {
        min-height: 350px;
    }
    
    .game-promo-back-icon {
        width: 80px;
        height: 80px;
    }
    
    .game-promo-back-content h3 {
        font-size: 28px;
    }
    
    .game-promo-discount-badge {
        flex-direction: column;
        text-align: center;
        padding: 12px 20px;
        gap: 10px;
        margin-bottom: 30px;
    }
    
    .game-copy-success {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .game-discount-icon {
        font-size: 24px;
    }
    
    .game-discount-text {
        text-align: center;
    }
    
    .game-discount-code {
        font-size: 20px;
    }
    
    .game-section-title {
        font-size: 30px;
    }
    
    .game-section-subtitle {
        font-size: 13px;
    }
    
    .game-plan-info {
        gap: 3px;
    }
    
    .game-plan-icon {
        width: 54px;
        height: 54px;
    }
    
    .game-plan-ram {
        font-size: 20px;
    }
    
    .game-plan-price {
        font-size: 24px;
    }
}

/* ============================================
   HARDWARE SPECS - ULTRA CLEAN
   ============================================ */

.game-hardware-clean {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    margin: 70px 0;
    padding: 0;
}

.game-hw-clean-item {
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s ease;
}

.game-hw-clean-item:hover {
    transform: translateY(-4px);
}

.game-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;
}

.game-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;
}

.game-hw-clean-item:hover .game-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);
}

.game-hw-clean-item:hover .game-hw-clean-icon::before {
    opacity: 1;
}

.game-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;
}

.game-hw-clean-item:hover .game-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);
}

.game-hw-clean-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.game-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;
}

.game-hw-clean-item:hover .game-hw-clean-title {
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.5));
}

.game-hw-clean-sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

.game-hw-clean-item:hover .game-hw-clean-sub {
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 1200px) {
    .game-hardware-clean {
        gap: 60px;
    }
    
    .game-hw-clean-icon {
        width: 56px;
        height: 56px;
    }
    
    .game-hw-clean-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .game-hw-clean-title {
        font-size: 16px;
    }
    
    .game-hw-clean-sub {
        font-size: 12px;
    }
}

@media (max-width: 992px) {
    .game-hardware-clean {
        gap: 40px;
        padding: 0 20px;
    }
    
    .game-hw-clean-item {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .game-hardware-clean {
        flex-direction: column;
        gap: 40px;
        margin: 50px 0;
    }
    
    .game-hw-clean-item {
        width: 100%;
        max-width: 320px;
    }
}

/* ============================================
   PLAN SELECTOR HELPER CTA
   ============================================ */

.game-plan-helper-cta {
    margin: 70px 0 60px;
    padding: 0;
}

.game-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);
}

.game-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;
}

.game-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;
}

.game-helper-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75); /* var(--color-white) with opacity */
    margin: 0;
    line-height: 1.5;
}

.game-helper-characters {
    position: relative;
    width: 280px;
    height: 120px;
    flex-shrink: 0;
}

.game-helper-characters img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
}

.game-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);
}

.game-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 */
}

.game-helper-button svg {
    width: 16px;
    height: 16px;
}

/* Responsive */
@media (max-width: 1200px) {
    .game-helper-banner {
        grid-template-columns: 1fr auto;
        gap: 30px;
        padding: 40px 50px;
    }
    
    .game-helper-characters {
        grid-column: 1 / 3;
        justify-self: center;
        order: -1;
    }
}

@media (max-width: 768px) {
    .game-plan-helper-cta {
        margin: 50px 0 40px;
    }
    
    .game-helper-banner {
        grid-template-columns: 1fr;
        padding: 30px 20px;
        text-align: center;
        gap: 20px;
    }
    
    /* Mobil Sıralama: Başlık → Resim → Buton */
    .game-helper-content {
        order: 1; /* Başlık en üstte */
    }
    
    .game-helper-characters {
        order: 2; /* Resim ortada */
        width: 220px;
        height: 90px;
        justify-self: center;
        margin: 0 auto;
    }
    
    .game-helper-button {
        order: 3; /* Buton en altta */
        justify-self: center;
        width: 100%;
        max-width: 100%;
        padding: 14px 24px;
        font-size: 11px;
    }
    
    .game-helper-content h3 {
        font-size: 20px;
    }
    
    .game-helper-content p {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .game-helper-banner {
        padding: 25px 18px;
        gap: 18px;
    }
    
    .game-helper-content h3 {
        font-size: 18px;
    }
    
    .game-helper-content p {
        font-size: 12px;
    }
    
    .game-helper-characters {
        width: 200px;
        height: 80px;
    }
    
    .game-helper-button {
        padding: 12px 20px;
        font-size: 10px;
    }
}

/* ============================================
   FAQ SECTION (Inside Comparison Section)
   ============================================ */

/* Reviews Container (Inside Comparison Section) */
.game-reviews-container {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.game-reviews-container .game-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.game-reviews-container .game-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;
}

.game-reviews-container .game-section-badge svg {
    width: 16px;
    height: 16px;
}

.game-reviews-container .game-section-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.2;
}

.game-reviews-container .game-gradient-text {
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.game-reviews-container .game-section-subtitle {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.game-faq-container {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
}

.game-comparison-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.game-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;
}

.game-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;
}

.game-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) {
    .game-faq-container {
        margin-top: 60px;
        padding-top: 50px;
    }
    
    .game-comparison-section .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 992px) {
    .game-reviews-container {
        margin-top: 60px;
        padding-top: 50px;
    }
    
    .game-reviews-container .game-section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .game-reviews-container {
        margin-top: 50px;
        padding-top: 40px;
    }
    
    .game-reviews-container .game-section-header {
        margin-bottom: 40px;
    }
    
    .game-reviews-container .game-section-title {
        font-size: 28px;
    }
    
    .game-reviews-container .game-section-subtitle {
        font-size: 16px;
    }
    
    .game-faq-container {
        margin-top: 50px;
        padding-top: 40px;
    }
    
    .game-comparison-section .section-title {
        font-size: 1.75rem;
    }
    
    .game-comparison-section .section-description {
        font-size: 1rem;
    }
}

/* ============================================
   REVIEWS SECTION (Bağımsız)
   ============================================ */

.game-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;
}

.game-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%);
}

.game-reviews-section .game-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.game-reviews-section .game-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;
}

.game-reviews-section .game-section-badge svg {
    width: 16px;
    height: 16px;
}

.game-reviews-section .game-section-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.2;
}

.game-reviews-section .game-gradient-text {
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.game-reviews-section .game-section-subtitle {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive Reviews */
@media (max-width: 992px) {
    .game-reviews-section {
        padding: 80px 0;
    }
    
    .game-reviews-section .game-section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .game-reviews-section {
        padding: 60px 0;
    }
    
    .game-reviews-section .game-section-header {
        margin-bottom: 40px;
    }
    
    .game-reviews-section .game-section-title {
        font-size: 28px;
    }
    
    .game-reviews-section .game-section-subtitle {
        font-size: 16px;
    }
}

/* ============================================
   FAQ SECTION (Bağımsız)
   ============================================ */

.game-faq-section {
    padding: 100px 0;
    background-color: var(--bg-primary); /* Solid dark background */
    background: linear-gradient(180deg, 
        #1e293b 0%, 
        #0f172a 100%);
    position: relative;
}

.game-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%);
}

.game-faq-section .section-header {
    margin-bottom: 60px;
}

.game-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;
}

.game-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;
}

.game-faq-section .section-description {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive FAQ */
@media (max-width: 992px) {
    .game-faq-section {
        padding: 80px 0;
    }
    
    .game-faq-section .section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .game-faq-section {
        padding: 60px 0;
    }
    
    .game-faq-section .section-header {
        margin-bottom: 40px;
    }
    
    .game-faq-section .section-title {
        font-size: 28px;
    }
    
    .game-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.95rem;
    padding: 0.5rem 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);
}

/* Yeni: Label solda */
.hosting-hero .hero-live-stats .net-label-left {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Yeni: Değer sağda, daha büyük */
.hosting-hero .hero-live-stats .net-val-right {
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hosting-hero .hero-live-stats .net-val-right strong {
    font-size: 1.15rem;
}

.hosting-hero .hero-live-stats .net-val-right.in { 
    color: #3b82f6; 
}

.hosting-hero .hero-live-stats .net-val-right.out { 
    color: #10b981; 
}

.hosting-hero .hero-live-stats .net-val-right i {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Eski class'lar (backward compatibility) */
.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.5rem, 2.5vw, 1.875rem);
    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);
    white-space: nowrap;
}

.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);
}

/* "Tüm Bölgeler/CPU/Type" seçeneklerinde tick işareti gösterme */
.ds-dropdown-option.selected[data-value="all"]::after {
    content: none;
}

.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;
    padding-top: 0.75rem; /* Badge için üstten boşluk */
}

/* 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: visible; /* Badge'in dışarı çıkması için */
    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;
    transition: all 0.3s ease;
}

/* Dark Mode - CPU Logoları Yumuşak Beyaz */
.ds-cpu-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Beyaz ton */
    opacity: 0.15;
    transition: all 0.3s ease;
}

.ds-server-item:hover .ds-cpu-logo img {
    opacity: 0.25;
}

/* Light Mode - CPU Logoları Koyu Ton (Daha Belirgin) */
[data-theme="light"] .ds-cpu-logo img {
    filter: brightness(0.4) saturate(0.3) contrast(1.1);
    opacity: 0.35;
}

[data-theme="light"] .ds-server-item:hover .ds-cpu-logo img {
    filter: brightness(0.3) saturate(0.5) contrast(1.2);
    opacity: 0.5;
}

.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;
}

/* ============================================
   DEDICATED SERVER - PRODUCT BADGE (VPS Style)
   Sol üst köşe, absolute position
   ============================================ */

/* Featured item border highlight */
.ds-server-item.ds-featured-item {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .ds-server-item.ds-featured-item {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.ds-server-item.ds-featured-item:hover {
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
}

/* Badge - VPS benzeri stil */
.ds-product-badge {
    position: absolute;
    top: -12px; /* Daha fazla yukarı çıksın */
    left: 1.5rem;
    transform: none;
    color: white;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    z-index: 10;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* Icon inside badge */
.ds-product-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Badge Variants - Specific Tag Colors */
.ds-badge-cheapest {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}

.ds-badge-popular {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.15);
}

.ds-badge-newproduct,
.ds-badge-new {
    background: #60a5fa;
    box-shadow: 0 2px 6px rgba(96, 165, 250, 0.15);
}

[data-theme="light"] .ds-badge-newproduct,
[data-theme="light"] .ds-badge-new {
    background: #2563eb;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
}

.ds-badge-bestseller {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}

.ds-badge-featured {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.15);
}

.ds-badge-recommended {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    box-shadow: 0 2px 6px rgba(6, 182, 212, 0.15);
}

.ds-badge-hot {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15);
    animation: badgeHotPulse 1.5s ease-in-out infinite;
}

@keyframes badgeHotPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15);
    }
    50% {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
    }
}

.ds-badge-sale {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}

.ds-badge-limited {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
    animation: badgeBlink 2s ease-in-out infinite;
}

@keyframes badgeBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Light Mode Badge - Cleaner look */
[data-theme="light"] .ds-product-badge {
    font-weight: 800;
}

/* Dark Mode Badge - Minimal glow */
[data-theme="dark"] .ds-product-badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .ds-product-badge {
        font-size: 0.65rem;
        padding: 0.25rem 0.625rem;
        top: -8px;
        left: 1rem;
    }
    
    .ds-product-badge svg {
        width: 12px;
        height: 12px;
    }
}

.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;
}

/* Benchmark Tag - Better Contrast for Dark Mode */
.ds-tag.benchmark {
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
}

[data-theme="light"] .ds-tag.benchmark {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #1d4ed8 !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
}

/* 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: #60a5fa;
    color: #0f172a;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ds-order-btn:hover {
    background: #93c5fd;
    transform: none; /* No movement */
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
}

/* Light Mode - Better Contrast for Order Button */
[data-theme="light"] .ds-order-btn {
    background: #2563eb;
    color: white;
}

[data-theme="light"] .ds-order-btn:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.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;
    }
}

.game-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;
}

.game-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);
    }
}

.game-final-cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.game-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);
    }
}

.game-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));
}

.game-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);
}

.game-final-cta-subtitle {
    font-size: 20px;
    color: var(--text-muted);
    margin-bottom: 40px;
    line-height: 1.6;
}

.game-final-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.game-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;
}

.game-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;
}

.game-final-cta-primary:hover::before {
    left: 100%;
}

.game-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);
}

.game-final-cta-primary svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.game-final-cta-primary:hover svg {
    transform: translateX(5px);
}

.game-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;
}

.game-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);
}

.game-final-cta-secondary svg {
    width: 20px;
    height: 20px;
}

.game-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);
}

.game-final-stat {
    text-align: center;
}

.game-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;
}

.game-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) {
    .game-final-cta-section {
        padding: 100px 0;
    }
    
    .game-final-cta-title {
        font-size: 40px;
    }
    
    .game-final-cta-subtitle {
        font-size: 18px;
    }
    
    .game-final-stat-value {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .game-final-cta-section {
        padding: 80px 0;
    }
    
    .game-final-cta-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }
    
    .game-final-cta-icon svg {
        width: 30px;
        height: 30px;
    }
    
    .game-final-cta-title {
        font-size: 32px;
    }
    
    .game-final-cta-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .game-final-cta-buttons {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 50px;
    }
    
    .game-final-cta-primary,
    .game-final-cta-secondary {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    
    .game-final-cta-stats {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 30px;
    }
    
    .game-final-stat-value {
        font-size: 28px;
    }
}

/* ============================================
   SECTION SPACING OPTIMIZATION
   ============================================ */

/* Tüm major section'lara standart spacing */
.game-console-section,
.game-comparison-section,
.game-supported-types-section,
.global-infrastructure-section,
.game-info-section,
.game-faq-section,
.game-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 */
.game-faq-section .section-title {
    color: var(--text-primary) !important;
}

.game-faq-section .section-description {
    color: var(--text-muted) !important;
}

/* Section geçiş animasyonları için hazırlık */
.game-console-section,
.game-comparison-section {
    scroll-margin-top: 80px; /* Sticky header için offset */
}

/* ============================================
   PERFORMANS: content-visibility & contain
   Below-the-fold bölümlerin render'ını geciktir
   ~650ms Style & Layout tasarrufu sağlar
   ============================================ */
.game-comparison-section,
.game-info-section,
.game-faq-section,
.game-final-cta-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px; /* Tahmini yükseklik (CLS önleme) */
}

.game-supported-types-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* 3D Container - Layout izolasyonu (paint yok: dance butonu tasmamali) */
.game-character-container {
    contain: layout style;
}

/* Tumbling Cubes - İzole katman (diğer elementleri etkilemesin) */
.game-tumbling-cubes {
    contain: strict;
    contain-intrinsic-size: 100% 100%;
}

.game-reviews-section {
    margin: 80px 0 60px 0;
    position: relative;
}

.game-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

/* Review Card - Gaming Console Style */
.game-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 */
.game-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);
}

.game-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);
}

.game-review-card:hover::before {
    opacity: 0.15;
}

/* Review Header */
.game-review-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
}

.game-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);
}

.game-review-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #3b82f6;
}

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

.game-review-author {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.game-review-stars {
    display: flex;
    gap: 4px;
}

.game-review-stars i {
    color: #00b67a;
    font-size: 12px;
    filter: drop-shadow(0 0 4px rgba(0, 182, 122, 0.4));
}

.game-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 */
.game-review-title {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

.game-review-text {
    font-size: 13px;
    color: #9a9a9a;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

/* Review Footer */
.game-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;
}

.game-review-footer svg {
    color: #00b67a;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .game-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .game-reviews-section {
        margin: 60px 0 40px 0;
    }
    
    .game-reviews-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .game-review-card {
        padding: 20px;
    }
    
    .game-review-title {
        font-size: 15px;
    }
    
    .game-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;
    font-size: clamp(1.85rem, 3.8vw, 2.4rem);
}

.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;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.location-flag {
    font-size: 3rem;
    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;
}

.location-ping-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.11rem;
    font-size: 0.045rem;
    font-weight: 600;
    padding: 0.27rem 0.60rem;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ping-dot {
    width: 2px;
    height: 2px;
    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 1px 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 1px 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 1px rgba(239, 68, 68, 0.3);
}

.ping-poor {
    background: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

.ping-poor .ping-dot {
    background: #dc2626;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.4);
}

@keyframes pingPulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Card Body */
.location-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    margin-bottom: 1.25rem;
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.location-city {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.location-country {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Yuvarlak Goto Button */
.location-goto-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
    border: 1.5px solid rgba(59, 130, 246, 0.25);
    color: var(--color-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    text-decoration: none;
}

[data-theme="light"] .location-goto-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.08));
    border-color: rgba(59, 130, 246, 0.2);
}

.location-goto-btn svg {
    transition: transform 0.3s ease;
}

.location-goto-btn:hover {
    background: linear-gradient(135deg, var(--color-primary), #6366f1);
    border-color: var(--color-primary);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
}

[data-theme="light"] .location-goto-btn:hover {
    background: linear-gradient(135deg, var(--color-primary), #6366f1);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.location-goto-btn:hover svg {
    transform: translateX(2px);
}

.vps-location-card:hover .location-goto-btn {
    border-color: rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.15));
}

/* 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;
    }
    
    .location-flag .fi {
        width: 2.5rem;
        height: 1.875rem;
    }
    
    .location-city {
        font-size: 1rem;
    }
    
    .location-ping-badge {
        font-size: 0.04rem;
        padding: 0.24rem 0.53rem;
    }
    
    .location-goto-btn {
        width: 38px;
        height: 38px;
    }
    
    .location-goto-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 576px) {
    .vps-locations-grid {
        grid-template-columns: 1fr;
    }
    
    .vps-location-card {
        padding: 1rem 1.25rem;
    }
    
    .location-card-header {
        gap: 0.75rem;
    }
    
    .location-flag {
        font-size: 2rem;
    }
    
    .location-flag .fi {
        width: 2rem;
        height: 1.5rem;
    }
    
    .location-city {
        font-size: 0.95rem;
    }
    
    .location-country {
        font-size: 0.75rem;
    }
    
    .location-ping-badge {
        font-size: 0.035rem;
        padding: 0.21rem 0.45rem;
    }
    
    .ping-dot {
        width: 1.2px;
        height: 1.2px;
    }
    
    .location-goto-btn {
        width: 36px;
        height: 36px;
    }
    
    .location-goto-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .location-test-ip {
        flex-direction: column;
        align-items: flex-start;
        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;
}

/* Trust Badge (Trustpilot) */
.mc-trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 0.875rem 1.5rem;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.mc-trust-badge .trust-stars {
    display: flex;
    gap: 0.125rem;
    color: #fbbf24;
    font-size: 1rem;
}

.mc-trust-badge .trust-stars i {
    color: #fbbf24;
}

.mc-trust-badge .trust-text {
    font-size: 0.875rem;
    color: #cbd5e1;
    font-weight: 500;
}

.mc-trust-badge .trust-text strong {
    color: #f8fafc;
    font-weight: 700;
}

.mc-trust-badge .trust-brand {
    font-size: 0.875rem;
    color: #10b981;
    font-weight: 700;
    border-left: 1px solid rgba(148, 163, 184, 0.2);
    padding-left: 1rem;
}

.mc-trust-badge .trust-brand strong {
    color: #10b981;
}

/* 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); /* DESKTOP: 5 kolon (ESKİ HALİ) */
    gap: 1.75rem;
    margin-top: 3rem;
}

.game-card-modern {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 340px; /* DESKTOP: Eski yükseklik (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) 0%,        /* Üst tamamen şeffaf - RESİM TAM GÖRÜNSÜN */
        rgba(0, 0, 0, 0) 50%,       /* Ortası şeffaf - RESİM TAM GÖRÜNSÜN */
        rgba(0, 0, 0, 0.2) 70%,     /* Hafif karartma başlasın */
        rgba(0, 0, 0, 0.85) 100%    /* Sadece en altta koyu (yazılar için) */
    );
    z-index: 1;
}

.game-card-modern:hover .game-card-image-wrapper::before {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.9) 100%
    );
}

.game-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kırpmadan kart boyutuna sığdırır */
    object-position: center center; /* TAM ORTADAN göster */
    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 - MİNİMUM YÜKSEKLİK */
.game-card-content-wrapper {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 0.625rem 0.875rem; /* Kompakt padding */
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* Gap azaltıldı: 0.5rem -> 0.375rem */
    min-height: 80px; /* Minimum yükseklik, resim alanı maksimize */
}

.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;
    max-height: 2.4em; /* Maksimum 2 satır */
    overflow: hidden;
}

.game-card-price {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}

.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.375rem; /* 0.5rem -> 0.375rem (Kompakt) */
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.game-card-platforms i {
    width: 18px; /* 20px -> 18px (Daha kompakt) */
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 4px;
    color: #94a3b8;
    font-size: 0.65rem; /* 0.7rem -> 0.65rem */
    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-box .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; /* TABLET: Eski yükseklik */
    }
    
    .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; /* MOBİL: Eski yükseklik */
    }
    
    .game-card-content-wrapper {
        padding: 0.5rem 0.625rem;
        gap: 0.25rem; /* MOBİL: Kompakt gap */
    }
    
    .game-card-name {
        font-size: 0.75rem;
        max-height: 2.3em; /* MOBİL: Maksimum 2 satır */
        overflow: hidden;
        letter-spacing: 0.5px;
        line-height: 1.15;
    }
    
    .game-card-price {
        font-size: 0.65rem; /* MOBİL: Daha küçük */
        line-height: 1.2;
    }
    
    .game-card-platforms {
        padding-top: 0.3rem; /* MOBİL: Daha kompakt */
        margin-top: 0.2rem;
    }
    
    .game-card-platforms i {
        width: 16px; /* MOBİL: Daha küçük ikonlar */
        height: 16px;
        font-size: 0.6rem;
    }
    
    .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;
    }

    .mc-trust-badge {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        text-align: center;
    }

    .mc-trust-badge .trust-brand {
        border-left: none;
        border-top: 1px solid rgba(148, 163, 184, 0.2);
        padding-left: 0;
        padding-top: 0.5rem;
    }

    .games-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .game-card-modern {
        height: 260px; /* EN KÜÇÜK MOBİL: Eski yükseklik */
    }
    
    .game-card-content-wrapper {
        padding: 0.625rem 0.75rem;
        gap: 0.25rem; /* MOBİL: Kompakt gap */
    }

    .game-filter-buttons {
        gap: 0.5rem;
    }

    .game-filter-btn {
        padding: 0.625rem 1rem;
        font-size: 0.8rem;
    }

    .game-card-platforms {
        padding-top: 0.3rem; /* MOBİL: Kompakt */
        margin-top: 0.2rem;
    }

    .game-card-platforms i {
        width: 18px; /* MOBİL: 20px -> 18px */
        height: 18px;
        font-size: 0.6rem; /* 0.65rem -> 0.6rem */
    }

    .game-card-name {
        font-size: 0.85rem; /* MOBİL: 0.875rem -> 0.85rem */
        max-height: 2.3em; /* Maksimum 2 satır */
        overflow: hidden;
        line-height: 1.15;
    }
    
    .game-card-price {
        font-size: 0.65rem; /* MOBİL: Daha küçük */
        line-height: 1.2;
    }

    .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;
    }

    .mc-trust-badge {
        padding: 0.625rem 0.875rem;
        gap: 0.375rem;
        font-size: 0.8rem;
    }

    .mc-trust-badge .trust-stars {
        font-size: 0.875rem;
    }

    .mc-trust-badge .trust-text,
    .mc-trust-badge .trust-brand {
        font-size: 0.75rem;
    }

    .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;
    }

    /* MOBİL: Resim tüm kartı kaplasın */
    .game-card-image-wrapper {
        height: 100%; /* Resim tüm kartı kaplasın */
    }

    .game-card-content-wrapper {
        padding: 0.75rem 0.875rem; /* 1rem -> 0.75rem (Kompakt) */
        min-height: 85px; /* Minimum yükseklik - en küçük mobil (yazılar için yeterli alan) */
        gap: 0.35rem;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.7) 30%,
            rgba(0, 0, 0, 0.95) 100%
        ); /* Yazılar için ekstra gradient arka plan */
    }

    .game-card-platforms {
        gap: 0.375rem;
        padding-top: 0.375rem;
    }

    .game-card-platforms i {
        width: 20px; /* 24px -> 20px (Kompakt) */
        height: 20px;
        font-size: 0.7rem; /* 0.75rem -> 0.7rem */
    }

    .game-card-info-btn {
        width: 28px;
        height: 28px;
    }

    .game-card-name {
        font-size: 0.95rem;
        max-height: 2.4em;
    }

    .game-card-price {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .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-box .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 h3 {
    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;
}

/* WCAG AA Kontrast Düzeltmesi - Light mode için daha koyu ton */
[data-theme="light"] .member-role {
    color: var(--color-primary-text);
}

/* WCAG AA Kontrast Düzeltmesi - Light mode için daha koyu ton */
[data-theme="light"] .member-role {
    color: var(--color-primary-text);
}

.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; flex-direction: row; 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-sublabel { 
    font-size: 0.75rem; 
    font-weight: 500; 
    color: var(--text-muted); 
    margin-top: 0.25rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}
.stat-mega-desc { display: none; }

/* Full Width Counter Card */
.stat-mega-card-full {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
}

.stat-mega-content-full {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Live Counter Display - Transparent Digital Style */
.live-counter-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-family: 'Orbitron', monospace;
    padding: 0;
    background: transparent;
}

/* Counter Numbers - Banner Overlay Style */
.hero-counter-banner .counter-number {
    font-size: 4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-counter-banner .counter-unit {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: lowercase;
    margin-right: 1.2rem;
}

.hero-counter-banner .counter-separator {
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--text-muted);
    opacity: 0.5;
    margin: 0 0.75rem;
    position: relative;
    top: -4px;
}

/* Signature Text - Classic Impressive */
.hero-counter-banner .stat-signature {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.5;
    opacity: 0.9;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Trust Badges - Minimal Inline Style (Extra Large) */
.trust-badges-minimal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3rem; /* Boşluk azaltıldı (6rem -> 3rem) */
    margin-top: auto;
    padding-top: 3rem; /* Üst boşluk azaltıldı (6rem -> 2rem) */
    padding-bottom: 4rem; /* Alt boşluk (sayfa sonu için) */
    transform: scale(1.5); /* %50 büyüme */
    transform-origin: bottom center; /* Aşağıdan büyüme */
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 1.25rem; /* Logo ve puan arası */
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.trust-item:hover {
    opacity: 1;
    transform: scale(1.05); /* Hafif büyüme efekti */
}

.trust-logo {
    height: 32px; /* Logo yüksekliği artırıldı */
    width: auto;
    color: var(--text-primary);
}

/* Mobilde Trust Badges Alt Alta */
@media (max-width: 768px) {
    .trust-badges-minimal {
        flex-direction: column; /* Alt alta */
        gap: 1.5rem; /* Aralarındaki boşluk */
        transform: scale(1.2); /* Mobilde daha küçük scale */
        padding-top: 2rem; /* Üst boşluk azalt */
        padding-bottom: 3rem; /* Alt boşluk azalt */
    }
    
    .trust-divider {
        display: none; /* Mobilde ayırıcı noktayı gizle */
    }
}

.trust-score {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem; /* Puan boyutu artırıldı */
    font-weight: 700;
    color: var(--text-primary);
}

.trust-score i {
    font-size: 1.1rem; /* Yıldız boyutu artırıldı */
}

.trust-divider {
    width: 6px; /* Nokta boyutu artırıldı */
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    opacity: 0.4;
}

/* Colors */
.text-warning { color: #f59e0b; }
.text-success { color: #10b981; }
/* .text-primary burada tanımlanmaz — asıl tanım satır ~524'te #60a5fa olarak mevcut */

/* Light Mode */
[data-theme="light"] .trust-logo {
    color: #1e293b;
}

[data-theme="light"] .trust-score {
    color: #334155;
}

/* Who Are We Sayfası İçin Özel Hero Content */
.whoarewe-hero-section .payment-hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 12rem;
    min-height: 60vh;
    position: relative;
    z-index: 2;
}

/* Trust Badges Alta - Sadece Who Are We */
.whoarewe-hero-section .trust-badges-row {
    margin-top: auto;
    padding-top: 3rem;
}

/* Light Mode */
[data-theme="light"] .counter-number {
    color: #1e293b;
}

[data-theme="light"] .counter-unit {
    color: #64748b;
}

/* 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); }

/* WCAG AA Kontrast Düzeltmesi */
[data-theme="light"] .tag {
    color: var(--color-primary-text);
    background: rgba(29, 78, 216, 0.08);
    border-color: rgba(29, 78, 216, 0.2);
}

/* WCAG AA Kontrast Düzeltmesi */
[data-theme="light"] .tag {
    color: var(--color-primary-text);
    background: rgba(29, 78, 216, 0.08);
    border-color: rgba(29, 78, 216, 0.2);
}
.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); }

/* WCAG AA Kontrast Düzeltmesi */
[data-theme="light"] .service-pill {
    color: var(--color-secondary-text);
    background: rgba(4, 120, 87, 0.08);
    border-color: rgba(4, 120, 87, 0.2);
}

/* WCAG AA Kontrast Düzeltmesi */
[data-theme="light"] .service-pill {
    color: var(--color-secondary-text);
    background: rgba(4, 120, 87, 0.08);
    border-color: rgba(4, 120, 87, 0.2);
}

/* 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;
}

/* Mobilde Filtre Butonları Alt Alta */
@media (max-width: 768px) {
    .client-filter-bar {
        flex-direction: column; /* Alt alta */
        width: 100%;
        gap: 0.75rem;
        margin: 2rem 0;
    }
    
    .filter-btn {
        width: 100%; /* Tam genişlik */
        justify-content: center;
        padding: 0.875rem 1.5rem;
    }
}
.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; }

/* WCAG AA Kontrast Düzeltmesi */
[data-theme="light"] .review-platform-badge {
    color: var(--color-primary-text);
    background: rgba(29, 78, 216, 0.08);
    border-color: rgba(29, 78, 216, 0.2);
}
[data-theme="light"] .review-platform-badge.google i { color: #1a73e8; }
[data-theme="light"] .review-platform-badge.trustpilot i { color: #00875a; }

/* WCAG AA Kontrast Düzeltmesi */
[data-theme="light"] .review-platform-badge {
    color: var(--color-primary-text);
    background: rgba(29, 78, 216, 0.08);
    border-color: rgba(29, 78, 216, 0.2);
}
[data-theme="light"] .review-platform-badge.google i { color: #1a73e8; }
[data-theme="light"] .review-platform-badge.trustpilot i { color: #00875a; }

/* 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;
}

/* =========================================
   HERO SHOWCASE EFFECTS (3D TILT & COUNTER BANNER)
   ========================================= */

/* Sahne Derinliği - Sadece Who Are We Sayfası İçin */
.whoarewe-hero-section {
    perspective: 1000px;
    overflow: hidden;
    position: relative;
    min-height: 100vh; /* Tam ekran */
    display: flex;
    align-items: center;
    padding-top: 80px; /* Header payı */
}

/* Top Counter Banner - Direkt Hero Üzerine */
.hero-counter-banner {
    position: absolute;
    top: 120px; /* Menüden uzaklaştırıldı */
    left: 0;
    right: 0;
    z-index: 10;
    padding: 1.5rem 0;
    text-align: center;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

/* Arka Plandaki Yüzen Elementler */
.hero-floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.float-item {
    position: absolute;
    opacity: 0.6;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
    animation: float-animation 6s ease-in-out infinite;
}

.float-item svg {
    width: 100%;
    height: 100%;
    color: var(--color-primary);
}

.float-1 { top: 10%; right: 10%; width: 60px; height: 60px; animation-delay: 0s; color: #3b82f6; }
.float-2 { bottom: 20%; left: 5%; width: 40px; height: 40px; animation-delay: 1s; color: #10b981; }
.float-3 { top: 40%; right: 25%; width: 30px; height: 30px; animation-delay: 2s; color: #f59e0b; }
.float-4 { bottom: 10%; right: 15%; width: 50px; height: 50px; animation-delay: 3s; color: #ec4899; }

@keyframes float-animation {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* Light Mode Özel Efektler */
[data-theme="light"] .stat-mega-card-full {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 20px 60px rgba(59, 130, 246, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

[data-theme="light"] .counter-number {
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
}

/* Live Counter Display - Banner Style (No Background) */
.hero-counter-banner .live-counter-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-family: 'Orbitron', monospace;
    padding: 0;
    background: transparent; /* Arka plan yok */
    border: none;
    position: relative;
    margin-bottom: 0.5rem;
}

/* Sayaç İmza Yazısı */
.hero-counter-banner .stat-signature {
    margin: 0;
    padding: 0;
}

/* Mission/Vision Section Önceki Kodlar */
.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; }

/* Light Mode Fix - Final CTA Mega Başlık */
[data-theme="light"] .final-cta-content-mega h2 {
    color: #0f172a;
}
.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; }
    .hero-counter-banner .counter-number { font-size: 3rem; letter-spacing: 2px; }
    .hero-counter-banner .counter-unit { font-size: 1.2rem; margin-right: 0.8rem; }
    .hero-counter-banner .counter-separator { font-size: 2.5rem; margin: 0 0.5rem; }
    .hero-counter-banner .stat-signature { font-size: 1rem; }
    .payment-hero-content { padding-top: 8rem; }
    .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 !important; }
    .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; }
    .hero-counter-banner { padding: 1rem 0; }
    .hero-counter-banner .counter-number { font-size: 2rem; letter-spacing: 1px; }
    .hero-counter-banner .counter-unit { font-size: 0.9rem; margin-right: 0.4rem; }
    .hero-counter-banner .counter-separator { font-size: 1.75rem; margin: 0 0.25rem; }
    .hero-counter-banner .stat-signature { font-size: 0.85rem; }
    .payment-hero-content { padding-top: 6rem; }
    .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, 4.5rem);
    font-weight: 800;
    line-height: 1.2; /* Line height biraz artırıldı */
    margin-bottom: 1rem;
    color: var(--text-primary);
    max-width: 1100px; /* Maksimum genişlik ile denge */
    margin-left: auto;
    margin-right: auto;
}

/* Light Mode Fix - Payment Hero Başlık Görünürlüğü */
[data-theme="light"] .payment-hero-title {
    color: #0f172a;
}

.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;
}

/* Hero Buttons - Genel Tanım (Payment, Who-are-we, DDOS için) */
.hero-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.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);
}

/* WCAG AA Kontrast Düzeltmesi - Beyaz arka plan üzerinde */
[data-theme="light"] .btn-cta.primary {
    color: var(--color-primary-text);
}

/* WCAG AA Kontrast Düzeltmesi - Beyaz arka plan üzerinde */
[data-theme="light"] .btn-cta.primary {
    color: var(--color-primary-text);
}

.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%; }
    
    /* MOBİL: DDoS Hero - Üst boşluğu %60 daha azalt */
    .ddos-hero-section {
        min-height: auto; /* 100vh yerine auto */
        padding: 1.5rem 0 2rem; /* Üst padding %60 azaltıldı (3rem -> 1.2rem) */
        justify-content: flex-start; /* Center yerine üstten başlasın */
    }
    
    .ddos-hero-section .payment-hero-content {
        padding-top: 0; /* İçerik container'ın üst padding'i kaldırıldı */
    }
    
    .ddos-hero-section .payment-hero-title {
        margin-top: 0 !important; /* Başlığın üst margin'i tamamen kaldırıldı */
        margin-bottom: 1.5rem;
        padding-top: 0; /* Üst padding varsa kaldır */
    }
    
    .ddos-hero-section .payment-hero-subtitle {
        margin-bottom: 2rem;
    }
    
    .ddos-hero-section .hero-buttons {
        margin-bottom: 2.5rem;
    }
}

/* ============================================
   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-logo svg {
    color: white;
}

.discord-info h2 {
    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-stat-box.online svg {
    color: #10b981;
    animation: pulse 2s infinite;
}

.discord-stat-box.online span {
    color: #10b981;
}

.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;
}

.discord-join-btn svg {
    color: white;
}

/* Contact Unified Section */
.contact-unified-section {
    padding: 6rem 0;
    background: var(--bg-primary);
}

[data-theme="light"] .contact-unified-section {
    background: #f8fafc;
}

/* Contact Info Card */
.contact-info-card {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
}

[data-theme="light"] .contact-info-card {
    background: white;
}

.contact-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.contact-info-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-info-item svg {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.contact-info-item strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.contact-info-item p {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Quick Contact Methods */
.quick-contact-methods,
.quick-contact-methods-standalone {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
}

[data-theme="light"] .quick-contact-methods,
[data-theme="light"] .quick-contact-methods-standalone {
    background: white;
}

.contact-method-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.05);
    border-left: 3px solid var(--color-primary);
    border-radius: 8px;
}

[data-theme="light"] .contact-method-note {
    background: rgba(59, 130, 246, 0.08);
}

.contact-method-note svg {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.contact-method-note p {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.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,
.contact-benefits-standalone {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    padding: 2rem;
}

[data-theme="light"] .contact-benefits-mini,
[data-theme="light"] .contact-benefits-standalone {
    background: white;
}

.contact-benefits-standalone {
    height: 100%;
}

.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 svg {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.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-info-card,
    .quick-contact-methods,
    .quick-contact-methods-standalone,
    .contact-benefits-mini,
    .contact-benefits-standalone {
        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;
    }
    
    .discord-logo svg {
        width: 30px;
        height: 30px;
    }
    
    .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) - SCOPE EDİLDİ */
.ddos-hero-section .hero-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.ddos-hero-section .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;
}

.ddos-hero-section .btn-link-arrow:hover {
    gap: 1rem;
    color: var(--color-primary);
}

.ddos-hero-section .hero-stats-row {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.ddos-hero-section .stat-col {
    text-align: center;
}

.ddos-hero-section .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;
}

.ddos-hero-section .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-attacks .row {
    row-gap: 2rem;
}

.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: #60a5fa; /* WCAG AA: Blue-400 - Dark bg üzerinde 5.2:1 kontrast */
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Light Mode - WCAG AA */
[data-theme="light"] .section-badge-top {
    color: #1e40af; /* WCAG AA: Blue-800 - Light bg üzerinde 8.2:1 kontrast */
    background: rgba(59, 130, 246, 0.08);
}

.section-subtitle {
    font-size: 1.15rem;
    color: #cbd5e1; /* WCAG AA: Slate-300 - Dark bg üzerinde 7.8:1 kontrast */
    margin-top: 1rem;
}

/* Light Mode - WCAG AA */
[data-theme="light"] .section-subtitle {
    color: #475569; /* WCAG AA: Slate-600 - Light bg üzerinde 8.6:1 kontrast */
}

.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: #cbd5e1; /* WCAG AA: Slate-300 - Dark bg üzerinde 7.8:1 kontrast */
    margin-bottom: 1.5rem;
}

/* Light Mode - WCAG AA */
[data-theme="light"] .attack-card p {
    color: #475569; /* WCAG AA: Slate-600 - Light bg üzerinde 8.6:1 kontrast */
}

.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: #34d399; /* WCAG AA: Emerald-400 - Dark bg üzerinde 5.1:1 kontrast */
    font-size: 0.85rem;
    font-weight: 600;
}

/* Light Mode - WCAG AA */
[data-theme="light"] .protected-badge {
    color: #047857; /* WCAG AA: Emerald-700 - Light bg üzerinde 7.5:1 kontrast */
    background: rgba(16, 185, 129, 0.08);
}

/* 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: #cbd5e1; /* WCAG AA: Slate-300 - Dark bg üzerinde 7.8:1 kontrast */
    margin-bottom: 1.5rem;
}

/* Light Mode - WCAG AA */
[data-theme="light"] .process-item p {
    color: #475569; /* WCAG AA: Slate-600 - Light bg üzerinde 8.6:1 kontrast */
}

.mini-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: left;
}

.mini-list li {
    font-size: 0.9rem;
    color: #cbd5e1; /* WCAG AA: Slate-300 - Dark bg üzerinde 7.8:1 kontrast */
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Light Mode - WCAG AA */
[data-theme="light"] .mini-list li {
    color: #475569; /* WCAG AA: Slate-600 - Light bg üzerinde 8.6:1 kontrast */
}

.mini-list li svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    stroke: var(--color-secondary);
}

/* Stats Section - DDOS Page Specific - SCOPE EDİLDİ */
.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);
}

.section-stats .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-stats .stat-item {
    text-align: center;
}

.section-stats .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);
}

.section-stats .stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.section-stats .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 h3,
.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: #cbd5e1; /* WCAG AA: Slate-300 - Dark bg üzerinde 7.8:1 kontrast */
    margin: 0;
}

/* Light Mode - WCAG AA */
[data-theme="light"] .why-card p {
    color: #475569; /* WCAG AA: Slate-600 - Light bg üzerinde 8.6:1 kontrast */
}

/* 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 h3,
.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: #cbd5e1; /* WCAG AA: Slate-300 - Dark bg üzerinde 7.8:1 kontrast */
    margin: 0;
}

/* Light Mode - WCAG AA */
[data-theme="light"] .compliance-item p {
    color: #475569; /* WCAG AA: Slate-600 - Light bg üzerinde 8.6:1 kontrast */
}

/* 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 h2 {
    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;
}

/* WCAG AA Kontrast Düzeltmesi */
[data-theme="light"] .toc-number {
    color: var(--color-primary-text);
}

/* WCAG AA Kontrast Düzeltmesi */
[data-theme="light"] .toc-number {
    color: var(--color-primary-text);
}

.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.7; /* 0.5'ten 0.7'ye yükseltildi - WCAG AA uyumluluğu için */
}

/* WCAG AA Kontrast Düzeltmesi */
[data-theme="light"] .accordion-number {
    color: var(--text-secondary);
    opacity: 0.85; /* Light mode'da daha yüksek opacity */
}

.accordion-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

/* h3 olarak kullanıldığında stil bozulmasını önle */
h3.accordion-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
    color: inherit;
}

.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: #1e40af;
    border: 1px solid #3b82f6;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .lg-beta-badge {
    background: #dbeafe;
    color: #1e3a8a;
    border: 1px solid #93c5fd;
    text-shadow: none;
}

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

[data-theme="light"] .lg-pulse-dot {
    background: #059669;
}

.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;
    position: relative;
}

[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);
}

/* Dropdown içindeki ping değeri için özel stil */
.lg-location-dropdown-custom .lg-location-ping {
    margin-left: auto;
    margin-right: 2rem; /* Icon için yer bırak */
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Ping spinner stilleri */
.lg-location-ping .fa-circle-notch {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.6;
}

.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 Segmented Control (Modern Tab Switch) */
.vps-billing-wrapper {
    display: flex;
    justify-content: center;
    margin: 3rem 0 2rem;
    padding: 0 1rem;
}

.vps-billing-segmented-control {
    position: relative;
    display: inline-flex;
    background: rgba(30, 41, 59, 0.8); /* Daha açık slate tonu */
    backdrop-filter: blur(20px);
    border: 2px solid rgba(59, 130, 246, 0.15); /* Mavi border daha belirgin */
    border-radius: 99px;
    padding: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .vps-billing-segmented-control {
    background: rgba(248, 250, 252, 0.9);
    border-color: rgba(203, 213, 225, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.vps-segment-btn {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    color: rgba(148, 163, 184, 0.85);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: 120px;
}

[data-theme="light"] .vps-segment-btn {
    color: #475569; /* Slate 600 - solid renk, opacity yok, 5.9:1 kontrast */
}

.vps-segment-btn:hover {
    color: rgba(248, 250, 252, 1);
}

[data-theme="light"] .vps-segment-btn:hover {
    color: rgba(15, 23, 42, 1);
}

.vps-segment-btn.active {
    color: #ffffff;
    font-weight: 700;
}

[data-theme="light"] .vps-segment-btn.active {
    color: #ffffff;
    font-weight: 700;
}

/* Glider Animation */
.segment-glider {
    position: absolute;
    top: 6px;
    left: 6px;
    height: calc(100% - 12px);
    width: 120px; /* Initial width */
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 99px;
    z-index: 1;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s ease-in-out;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    opacity: 0;
}

[data-theme="light"] .segment-glider {
    background: linear-gradient(135deg, #1e40af 0%, #047857 100%);
    box-shadow: 0 4px 20px rgba(30, 64, 175, 0.5);
}

.segment-glider.loaded {
    opacity: 1;
}

/* Badge inside segment */
.segment-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7; /* Emerald 300 — koyu bg üzerinde WCAG AA 5.8:1+ kontrast */
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    opacity: 0;
    transition: all 0.3s;
    letter-spacing: 0.3px;
}

[data-theme="light"] .segment-badge {
    background: rgba(6, 78, 59, 0.2);
    color: #064e3b; /* Emerald 900 - WCAG AA 7.4:1+ kontrast (açık bg üzerinde) */
}

.vps-segment-btn.active .segment-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff; /* Beyaz metin, koyu mavi gradient (#2563eb) üzerinde 8.6:1 kontrast */
    font-weight: 700;
}

[data-theme="light"] .vps-segment-btn.active .segment-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff; /* Beyaz metin, koyu gradient (Blue 800/Emerald 700) üzerinde 7.5+:1 kontrast */
    font-weight: 700;
}

/* Responsive */
@media (max-width: 992px) {
    .vps-billing-segmented-control {
        padding: 5px;
    }
    
    .vps-segment-btn {
        padding: 0.7rem 1.25rem;
        font-size: 0.9rem;
        min-width: 100px;
    }
    
    .segment-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.45rem;
    }
}

@media (max-width: 768px) {
    .vps-billing-wrapper {
        padding: 0;
    }
    
    .vps-billing-segmented-control {
        flex-direction: column;
        border-radius: 16px;
        max-width: 100%;
        width: 100%;
        background: rgba(30, 41, 59, 0.6);
        border-color: rgba(59, 130, 246, 0.2);
    }
    
    [data-theme="light"] .vps-billing-segmented-control {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(203, 213, 225, 0.6);
    }
    
    .segment-glider {
        top: 6px;
        left: 6px;
        width: calc(100% - 12px);
        height: auto;
        background: linear-gradient(135deg, #1e40af 0%, #047857 100%);
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(30, 64, 175, 0.6);
    }
    
    [data-theme="light"] .segment-glider {
        background: linear-gradient(135deg, #1e40af 0%, #047857 100%);
        box-shadow: 0 4px 16px rgba(30, 64, 175, 0.5);
    }
    
    .vps-segment-btn {
        width: 100%;
        padding: 1rem 1.25rem;
        min-width: auto;
        font-size: 1rem;
        justify-content: space-between;
        border-radius: 12px;
    }
    
    .vps-segment-btn:not(.active) {
        color: rgba(148, 163, 184, 1);
    }
    
    [data-theme="light"] .vps-segment-btn:not(.active) {
        color: rgba(71, 85, 105, 1);
    }
    
    .vps-segment-btn.active {
        color: #60a5fa;
        font-weight: 700;
    }
    
    [data-theme="light"] .vps-segment-btn.active {
        color: #2563eb;
        font-weight: 700;
    }
    
    .vps-segment-btn.active .segment-badge {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff; /* Beyaz metin, koyu gradient (#1e40af / #047857) üzerinde 11+:1 kontrast */
        font-weight: 700;
    }
    
    [data-theme="light"] .vps-segment-btn.active .segment-badge {
        background: rgba(255, 255, 255, 0.25);
        color: #ffffff; /* Beyaz metin, koyu gradient (Blue 800/Emerald 700) üzerinde 7.5+:1 kontrast */
        font-weight: 700;
    }
}

@media (max-width: 480px) {
    .vps-billing-wrapper {
        padding: 0;
    }
    
    .vps-billing-segmented-control {
        width: 100%;
        max-width: 100%;
    }
    
    .vps-segment-btn {
        font-size: 0.95rem;
        padding: 0.875rem 1rem;
        font-weight: 600;
    }
    
    .segment-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }
}

/* VPS Accordion Packages Styling - Clean Row Design */
.vps-accordion-packages {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
}

.vps-package-item {
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: visible;
    transition: all 0.2s ease;
    position: relative;
}

[data-theme="light"] .vps-package-item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.vps-package-item:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.vps-package-item.popular-package {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .vps-package-item.popular-package {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.vps-package-item.popular-package:hover {
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.vps-popular-badge {
    position: absolute;
    top: -10px;
    left: 2rem; /* Left aligned looks cleaner */
    transform: none;
    background: var(--color-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
    z-index: 10;
}

[data-theme="light"] .vps-popular-badge {
    background: var(--color-primary-text); /* #1d4ed8 - beyaz text ile 6.6:1 kontrast */
}

.vps-popular-badge svg {
    display: none; /* Cleaner without icon */
}

.vps-package-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

/* Remove side borders/gradients for cleaner look */
.vps-package-header::before {
    display: none;
}

.vps-package-header:hover {
    background: rgba(59, 130, 246, 0.02);
}

.vps-package-item.active .vps-package-header {
    background: rgba(59, 130, 246, 0.03);
}

/* Clean Header Left */
.vps-header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 0 0 220px;
}

.vps-toggle-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    background: transparent;
    border-radius: 0;
    color: var(--text-muted);
}

.vps-toggle-icon svg {
    color: inherit;
}

.vps-package-item.active .vps-toggle-icon {
    transform: rotate(180deg);
    background: transparent;
    color: var(--color-primary);
}

.vps-package-item.active .vps-toggle-icon svg {
    color: inherit;
}

.vps-package-name-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* Simplified Ryzen Badge */
/* Ryzen Badge Styling - Premium Hardware Look */
.ryzen-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(20, 20, 25, 0.9); /* Dark matte background */
    color: #ffffff;
    padding: 0.25rem 0.6rem;
    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.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: static; /* Desktop için normal akış */
    overflow: hidden;
    transition: all 0.3s ease;
    width: fit-content;
}

.ryzen-badge::after {
    display: none; /* Kırmızı sweep animasyonu kaldırıldı */
}

.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: rgba(237, 28, 36, 0.4);
    border-left-color: #ed1c24;
}

.vps-package-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: initial;
    letter-spacing: -0.02em;
}

/* Specs Row - Clean Columns */
.vps-specs-row {
    display: flex;
    gap: 1.5rem;
    flex: 1;
    justify-content: space-between;
    margin: 0 6rem;
}

.vps-spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.1rem;
    padding: 0;
    background: transparent !important;
    border-radius: 0;
    transition: none;
    min-width: 70px;
}

.vps-spec-item:hover {
    background: transparent !important;
    transform: none;
}

.spec-icon {
    display: none;
}

.spec-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.spec-value {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: initial;
}

.spec-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    opacity: 0.9;
}

.vps-header-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.vps-price-block {
    display: block; /* Allows inline spans */
    text-align: right;
}

.vps-price-label {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 0.3rem;
    vertical-align: baseline;
    opacity: 0.9;
}

.vps-price-main {
    display: inline-flex;
    align-items: flex-start;
    color: var(--color-primary); /* Blue */
    line-height: 1;
    background: none;
    -webkit-text-fill-color: initial;
    animation: none;
    letter-spacing: -0.03em;
}

.vps-price-main .price-display {
    display: inline-flex;
    align-items: flex-start;
    line-height: 1;
}

.vps-price-main .price-integer {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 0.8;
}

.vps-price-main .price-suffix-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 2px;
}

.vps-price-main .price-decimal {
    font-size: 1.25rem;
    font-weight: 700;
    opacity: 0.9;
    line-height: 1;
}

.vps-price-main .price-period {
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.7;
    line-height: 1;
    margin-top: 0;
}

.vps-price-period {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.8;
}

/* Light mode overrides for specific blue if needed, but var(--color-primary) is usually correct */
[data-theme="light"] .vps-price-main {
    color: #2563eb; /* Stronger blue on white */
}

.vps-price-old-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.vps-price-old {
    font-size: 1rem;
    color: var(--text-primary); /* Darker strikethrough */
    opacity: 0.6;
    text-decoration: line-through;
    text-decoration-color: currentColor;
    font-weight: 500;
}

.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);
}

[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: var(--color-primary);
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    font-size: 0.9rem;
}

.vps-order-btn::before {
    display: none;
}

.vps-order-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .vps-order-btn {
    background: var(--color-primary-text); /* #1d4ed8 - beyaz text ile 6.6:1 kontrast */
}

.vps-package-item.popular-package .vps-order-btn {
    background: var(--color-primary);
}

.vps-package-item.popular-package .vps-order-btn:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .vps-package-item.popular-package .vps-order-btn {
    background: var(--color-primary-text);
}

[data-theme="light"] .vps-package-item.popular-package .vps-order-btn:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.vps-package-details {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0 2rem;
    opacity: 0;
    background: rgba(0,0,0,0.02);
}

.vps-package-item.active .vps-package-details {
    max-height: 800px; /* Increased for safety */
    padding: 1.5rem 2rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 1;
}

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

[data-theme="light"] .vps-package-item.active .vps-package-details {
    border-top-color: rgba(0, 0, 0, 0.05);
    background: rgba(0,0,0,0.01);
}

.vps-package-item.popular-package.active .vps-package-details {
    border-top-color: transparent;
    background: rgba(0,0,0,0.02);
}

[data-theme="light"] .vps-package-item.popular-package.active .vps-package-details {
    border-top-color: transparent;
    background: rgba(0,0,0,0.01);
}

.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;
    }
    
    .vps-package-header {
        position: relative;
    }
    
    .ryzen-badge {
        position: absolute;
        top: 1.75rem;
        right: 0.75rem;
        font-size: 0.65rem;
        padding: 0.25rem 0.55rem;
        gap: 0.3rem;
        z-index: 10;
    }
    
    .ryzen-badge svg {
        width: 13px;
        height: 13px;
    }
    
    .vps-header-right {
        padding-top: 2.5rem;
    }
    
    .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 .price-integer {
        font-size: 2rem;
    }
    
    .vps-price-main .price-decimal {
        font-size: 1rem;
    }
    
    .vps-price-main .price-period {
        font-size: 0.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: #60a5fa; /* WCAG AA — koyu bg üzerinde 7.1:1+ kontrast */
}

[data-theme="light"] .os-apps-title .text-primary {
    color: #2563eb; /* Light modda Blue 600 — beyaz bg üzerinde 4.6:1 */
}

[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 h3 {
    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);
}

[data-theme="light"] .competitor-name {
    opacity: 1;
}

/* 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);
}

/* Resim solda olduğu için içeriğe sol padding ver */
.vps-packages-row .support-content {
    padding-right: 0;
    padding-left: 2rem;
}

.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;
}

/* VDS SEO Metin Bloğu */
.yazi-alan {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
}

.yazi-alan h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.yazi-alan h3 {
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.yazi-alan p {
    margin-bottom: 0.75rem;
}

@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;
    }
    
    .yazi-alan {
        font-size: 0.875rem;
    }
    
    .yazi-alan h2 {
        font-size: 1.25rem;
    }
    
    .yazi-alan h3 {
        font-size: 1rem;
    }
}


/* ============================================
   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;
}

/* LOCATION LIST ITEM PING */
.ds-list-item-ping {
    color: var(--color-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

/* 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 h3 {
    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-icon svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.ds-why-box:hover .ds-why-box-icon {
    background: linear-gradient(135deg, var(--color-primary), #2563eb);
    color: #fff;
}

.ds-why-box-content h3 {
    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 h3 {
        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: #60a5fa;
}

.ds-cta-badge span:last-child {
    font-size: 0.875rem;
    font-weight: 700;
    color: #60a5fa;
    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: #60a5fa;
    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-check svg {
    width: 12px;
    height: 12px;
    color: #fff;
}

.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: #60a5fa;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.ds-cta-link:hover {
    gap: 12px;
    color: #93c5fd;
}

.ds-cta-link i {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

.ds-cta-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.ds-cta-link:hover i,
.ds-cta-link:hover svg {
    transform: translateX(4px);
}

/* Light Mode - Better Contrast for CTA Elements */
[data-theme="light"] .ds-cta-dot,
[data-theme="light"] .ds-cta-check {
    background: #2563eb;
}

[data-theme="light"] .ds-cta-badge span:last-child,
[data-theme="light"] .ds-cta-link {
    color: #2563eb;
}

[data-theme="light"] .ds-cta-link:hover {
    color: #1d4ed8;
}

.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 h3 {
    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);
}

/* ============================================
   40. PROXY PAGE - Specific Styles
   Proxy pricing cards & platform grid
   ============================================ */

/* Proxy Cards - 2 Column Layout */
.proxy-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 900px;
    margin: 0 auto;
}

/* Proxy Platforms - Özelleştirme */
.proxy-platforms-section .tech-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Fix for Proxy Showcase Features - Equal Heights */
/* Use Flexbox to match heights within the same row */
.features-showcase-section.proxy-server-page .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.features-showcase-section.proxy-server-page .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.hosting-hero ~ .features-showcase-section .showcase-feature-item,
.features-showcase-section.proxy-server-page .showcase-feature-item,
.vpn-use-cases-section .showcase-feature-item {
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
}

/* Hosting sayfası için özel min-height (VPN'den daha küçük) */
.hosting-hero ~ .features-showcase-section .showcase-feature-item {
    min-height: 140px;
}

.hosting-hero ~ .features-showcase-section .feature-text-content,
.features-showcase-section.proxy-server-page .feature-text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hosting-hero ~ .features-showcase-section .feature-text-content h3,
.features-showcase-section.proxy-server-page .feature-text-content h3 {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.hosting-hero ~ .features-showcase-section .feature-text-content p,
.features-showcase-section.proxy-server-page .feature-text-content p {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Responsive - Proxy Cards */
@media (max-width: 768px) {
    .proxy-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   41. KNOWLEDGE BASE SECTION (Proxy & Info Pages)
   Modern card-based knowledge layout
   ============================================ */

.knowledge-base-section {
    padding: 5rem 0;
    background: var(--bg-primary);
    position: relative;
}

.knowledge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.knowledge-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.knowledge-card {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
}

.knowledge-card:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.15);
}

.knowledge-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.knowledge-icon svg {
    color: white;
}

.knowledge-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.knowledge-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #cbd5e1; /* WCAG AA: Daha açık gri (slate-300) */
    margin: 0;
}

.knowledge-card strong {
    color: #60a5fa; /* WCAG AA: Daha açık mavi (blue-400) - 4.5:1+ kontrast */
    font-weight: 600;
}

/* Light Theme */
[data-theme="light"] .knowledge-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .knowledge-card:hover {
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.1);
}

/* Light Theme - WCAG AA kontrast düzeltmeleri */
[data-theme="light"] .knowledge-card p {
    color: #475569; /* WCAG AA: Koyu gri (slate-600) - beyaz bg üzerinde 7:1+ kontrast */
}

[data-theme="light"] .knowledge-card strong {
    color: #1e40af; /* WCAG AA: Koyu mavi (blue-800) - beyaz bg üzerinde 7:1+ kontrast */
}

/* Responsive */
@media (max-width: 992px) {
    .knowledge-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .knowledge-base-section {
        padding: 3rem 0;
    }
}

@media (max-width: 576px) {
    .knowledge-card {
        padding: 1.5rem;
    }
    
    .knowledge-icon {
        width: 48px;
        height: 48px;
    }
    
    .knowledge-card h3 {
        font-size: 1.1rem;
    }
    
    .knowledge-card p {
        font-size: 0.9rem;
    }
}

/* ============================================
   DEDICATED SERVER LOCATION PAGES
   Turkey, Germany, USA, Bulgaria Datacenter Pages
   ============================================ */

/* Datacenter Info Section */
.dc-info-section {
    padding: 5rem 0;
    background: var(--bg-primary);
    position: relative;
}

.dc-info-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.dc-info-header .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.dc-info-header .section-subtitle {
    font-size: 1.125rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Datacenter Info Cards */
.dc-info-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dc-info-card:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.dc-info-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
}

.dc-info-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.dc-info-desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

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

.dc-info-list li {
    padding: 0.625rem 0;
    color: var(--text-primary);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dc-info-list li:last-child {
    border-bottom: none;
}

.dc-info-list li:before {
    content: "•";
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.25rem;
}

/* Test Tools */
.dc-test-info {
    margin-top: 1rem;
}

.dc-test-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dc-test-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.dc-test-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.dc-test-value {
    display: inline-block;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.9375rem;
    color: var(--color-primary);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.dc-test-link {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-secondary);
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    margin-right: 0.5rem;
    border: 1px solid rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
}

.dc-test-link:hover {
    background: rgba(16, 185, 129, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

/* Light Theme - Datacenter Info */
[data-theme="light"] .dc-info-section {
    background: var(--bg-secondary);
}

[data-theme="light"] .dc-info-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .dc-info-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .dc-info-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
}

[data-theme="light"] .dc-info-list li {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .dc-test-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .dc-test-value {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .dc-test-link {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.15);
}

[data-theme="light"] .dc-test-link:hover {
    background: rgba(16, 185, 129, 0.15);
}

/* Responsive - Datacenter Info */
@media (max-width: 992px) {
    .dc-info-header .section-title {
        font-size: 2rem;
    }
    
    .dc-info-card {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 576px) {
    .dc-info-section {
        padding: 3rem 0;
    }
    
    .dc-info-header .section-title {
        font-size: 1.75rem;
    }
    
    .dc-info-card {
        padding: 1.5rem;
    }
    
    .dc-test-link {
        display: block;
        margin-bottom: 0.5rem;
        text-align: center;
    }
}

/* ============================================
   DATACENTER DETAILS & SHOWCASE SECTIONS
   Turkey Dedicated Server Page Components
   ============================================ */

/* Datacenter Details Section */
.dc-details-section {
    padding: 80px 0;
    background: 
        linear-gradient(135deg, 
            rgba(15, 23, 42, 0.98) 0%, 
            rgba(30, 41, 59, 0.98) 50%,
            rgba(15, 23, 42, 0.98) 100%);
    position: relative;
    overflow: hidden;
}

.dc-details-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(239, 68, 68, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    opacity: 0.4;
    pointer-events: none;
    animation: bgFloat 60s ease-in-out infinite;
}

@keyframes bgFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

.dc-details-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.dc-details-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.dc-title-main {
    display: block;
    color: #ffffff;
    text-shadow: 
        1px 1px 0 rgba(0, 0, 0, 0.3),
        2px 2px 4px rgba(0, 0, 0, 0.2);
}

.dc-title-sub {
    display: block;
    color: #64748b;
    font-weight: 400;
    font-size: 1.5rem;
}

.dc-details-card {
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.dc-details-card:hover {
    transform: translateY(-2px);
}

.dc-details-card:hover .dc-card-icon {
    transform: scale(1.05);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.15) 100%);
}

.dc-card-header {
    margin-bottom: 24px;
}

.dc-card-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #ef4444;
    transition: all 0.3s ease;
}

.dc-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

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

.dc-feature-list li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
}

.dc-feature-list li:last-child {
    border-bottom: none;
}

.dc-bullet {
    color: #ef4444;
    margin-right: 12px;
    font-size: 0.7em;
    flex-shrink: 0;
    margin-top: 4px;
}

/* Datacenter Showcase Slider Section */
.dc-showcase-section {
    padding: 100px 0;
    background: transparent;
    position: relative;
}

.dc-showcase-slider {
    position: relative;
    overflow: hidden;
    background: transparent;
}

.dc-slider-container {
    position: relative;
    width: 100%;
    padding-bottom: 120%;
    background: transparent;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    border-radius: 8px;
}

.dc-slider-container:active {
    cursor: grabbing;
}

.dc-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.dc-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.dc-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.dc-showcase-content {
    padding-left: 40px;
}

.dc-showcase-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #b91c1c;
    border: 1px solid #ef4444;
    border-radius: 20px;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
}

.dc-showcase-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.2;
}

.dc-showcase-subtitle {
    color: #64748b;
    font-weight: 400;
    font-size: 1.5rem;
}

.dc-showcase-desc {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 16px;
}

.dc-showcase-features {
    margin-top: 32px;
}

.dc-showcase-feature {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.dc-showcase-feature:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.dc-feature-icon {
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    flex-shrink: 0;
}

.dc-showcase-feature h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dc-showcase-feature p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .dc-details-title {
        font-size: 2.5rem;
    }
    
    .dc-showcase-content {
        padding-left: 0;
        margin-top: 40px;
    }
    
    .dc-showcase-title {
        font-size: 2rem;
    }
    
    .dc-slider-container {
        padding-bottom: 100%;
    }
}

@media (max-width: 767px) {
    .dc-details-section {
        padding: 60px 0;
    }
    
    .dc-details-title {
        font-size: 2rem;
    }
    
    .dc-details-card {
        padding: 24px;
    }
    
    .dc-showcase-title {
        font-size: 1.75rem;
    }
    
    .dc-slider-container {
        padding-bottom: 130%;
        border-radius: 8px;
    }
}

/* UK Dedicated Server - British Blue Theme */
.dc-details-section-uk::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 61, 165, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 85, 204, 0.1) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-uk .dc-card-icon {
    background: rgba(0, 61, 165, 0.1);
    color: #003DA5;
}

.dc-details-section-uk .dc-details-card:hover .dc-card-icon {
    background: rgba(0, 61, 165, 0.2);
    color: #003DA5;
    transform: scale(1.1);
}

.dc-details-section-uk .dc-bullet {
    color: #003DA5;
}

.dc-showcase-section-uk .dc-showcase-badge {
    background: #1e40af;
    color: #ffffff;
    border: 1px solid #3b82f6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dc-showcase-section-uk .dc-feature-icon {
    background: rgba(0, 61, 165, 0.1);
    color: #003DA5;
}

/* Australia Dedicated Server - Dark Blue & Red Theme (Sydney SYD-1) */
.dc-details-section-australia::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 0, 139, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 0, 0, 0.08) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-australia .dc-card-icon {
    background: rgba(0, 0, 139, 0.1);
    color: #00008B;
}

.dc-details-section-australia .dc-details-card:hover .dc-card-icon {
    background: rgba(0, 0, 139, 0.2);
    color: #00008B;
    transform: scale(1.1);
}

.dc-details-section-australia .dc-bullet {
    color: #00008B;
}

.dc-showcase-section-australia .dc-showcase-badge {
    background: #4338ca;
    color: #ffffff;
    border: 1px solid #6366f1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dc-showcase-section-australia .dc-feature-icon {
    background: rgba(0, 0, 139, 0.1);
    color: #00008B;
}

/* Pakistan Dedicated Server - Pakistan Green Theme (Multinet Karachi DC) */
.dc-details-section-pakistan::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 102, 0, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 153, 0, 0.1) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-pakistan .dc-card-icon {
    background: rgba(0, 102, 0, 0.1);
    color: #006600;
}

.dc-details-section-pakistan .dc-details-card:hover .dc-card-icon {
    background: rgba(0, 102, 0, 0.2);
    color: #006600;
    transform: scale(1.1);
}

.dc-details-section-pakistan .dc-bullet {
    color: #006600;
}

.dc-showcase-section-pakistan .dc-showcase-badge {
    background: #15803d;
    color: #ffffff;
    border: 1px solid #22c55e;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dc-showcase-section-pakistan .dc-feature-icon {
    background: rgba(0, 102, 0, 0.1);
    color: #006600;
}

/* Los Angeles Dedicated Server - Deep Navy & Bright Blue Theme (LAX-1 Pacific Gateway) */
.dc-details-section-la::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(8, 28, 61, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 123, 255, 0.1) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-la .dc-card-icon {
    background: rgba(8, 28, 61, 0.1);
    color: #081C3D;
}

.dc-details-section-la .dc-details-card:hover .dc-card-icon {
    background: rgba(8, 28, 61, 0.2);
    color: #081C3D;
    transform: scale(1.1);
}

.dc-details-section-la .dc-bullet {
    color: #081C3D;
}

.dc-showcase-section-la .dc-showcase-badge {
    background: #1e3a8a;
    color: #ffffff;
    border: 1px solid #3b82f6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dc-showcase-section-la .dc-feature-icon {
    background: rgba(8, 28, 61, 0.1);
    color: #081C3D;
}

/* Miami Dedicated Server - Ocean Teal & Sunset Orange Theme (MIA-1 Gateway) */
.dc-details-section-miami::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 140, 149, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 140, 0, 0.1) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-miami .dc-card-icon {
    background: rgba(0, 140, 149, 0.1);
    color: #008C95;
}

.dc-details-section-miami .dc-details-card:hover .dc-card-icon {
    background: rgba(0, 140, 149, 0.2);
    color: #008C95;
    transform: scale(1.1);
}

.dc-details-section-miami .dc-bullet {
    color: #008C95;
}

.dc-showcase-section-miami .dc-showcase-badge {
    background: #0e7490;
    color: #ffffff;
    border: 1px solid #06b6d4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dc-showcase-section-miami .dc-feature-icon {
    background: rgba(0, 140, 149, 0.1);
    color: #008C95;
}

/* Dallas Dedicated Server - Texas Red & Deep Blue Theme (DAL-1 Central Hub) */
.dc-details-section-dallas::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(196, 18, 48, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 40, 104, 0.1) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-dallas .dc-card-icon {
    background: rgba(196, 18, 48, 0.1);
    color: #C41230;
}

.dc-details-section-dallas .dc-details-card:hover .dc-card-icon {
    background: rgba(196, 18, 48, 0.2);
    color: #C41230;
    transform: scale(1.1);
}

.dc-details-section-dallas .dc-bullet {
    color: #C41230;
}

.dc-showcase-section-dallas .dc-showcase-badge {
    background: #991b1b;
    color: #ffffff;
    border: 1px solid #dc2626;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dc-showcase-section-dallas .dc-feature-icon {
    background: rgba(196, 18, 48, 0.1);
    color: #C41230;
}

/* Canada Dedicated Server - Canada Red Theme (Quebec BHS-1 High-Scale) */
.dc-details-section-canada::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(213, 43, 30, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-canada .dc-card-icon {
    background: rgba(213, 43, 30, 0.1);
    color: #D52B1E;
}

.dc-details-section-canada .dc-details-card:hover .dc-card-icon {
    background: rgba(213, 43, 30, 0.2);
    color: #D52B1E;
    transform: scale(1.1);
}

.dc-details-section-canada .dc-bullet {
    color: #D52B1E;
}

.dc-showcase-section-canada .dc-showcase-badge {
    background: #b91c1c;
    color: #ffffff;
    border: 1px solid #dc2626;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dc-showcase-section-canada .dc-feature-icon {
    background: rgba(213, 43, 30, 0.1);
    color: #D52B1E;
}

/* USA Dedicated Server - American Blue/Red Theme (General) */
.dc-details-section-usa::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-usa .dc-card-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.dc-details-section-usa .dc-details-card:hover .dc-card-icon {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    transform: scale(1.1);
}

.dc-details-section-usa .dc-bullet {
    color: #3b82f6;
}

/* USA Locations Section */
.usa-locations-section {
    padding: 80px 0;
    background: var(--bg-secondary);
}

.usa-locations-section .section-header {
    margin-bottom: 48px;
    text-align: center;
}

.usa-locations-section .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}

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

.usa-location-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(148, 163, 184, 0.15);
    transition: all 0.3s ease;
}

.usa-location-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(147, 197, 253, 0.4);
}

.usa-location-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.usa-location-card .location-facility {
    color: #93c5fd;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.usa-location-card .location-desc {
    color: var(--text-secondary);
    margin-bottom: 24px;
    flex-grow: 1;
    line-height: 1.6;
    font-size: 0.95rem;
}

.usa-location-card .btn-primary {
    width: 100%;
}

/* Light Mode - USA Locations */
[data-theme="light"] .usa-location-card {
    border-color: rgba(148, 163, 184, 0.2);
}

[data-theme="light"] .usa-location-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: rgba(37, 99, 235, 0.3);
}

[data-theme="light"] .usa-location-card .location-facility {
    color: #1e40af;
}

/* Responsive */
@media (max-width: 768px) {
    .usa-locations-section {
        padding: 60px 0;
    }
    
    .usa-locations-section .section-title {
        font-size: 2rem;
    }
    
    .usa-location-card {
        padding: 24px;
        margin-bottom: 20px;
    }
}

/* Singapore Dedicated Server - Singapore Red Theme */
.dc-details-section-singapore::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(237, 41, 57, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-singapore .dc-card-icon {
    background: rgba(237, 41, 57, 0.1);
    color: #ED2939;
}

.dc-details-section-singapore .dc-details-card:hover .dc-card-icon {
    background: rgba(237, 41, 57, 0.2);
    color: #ED2939;
    transform: scale(1.1);
}

.dc-details-section-singapore .dc-bullet {
    color: #ED2939;
}

.dc-showcase-section-singapore .dc-showcase-badge {
    background: #be123c;
    color: #ffffff;
    border: 1px solid #e11d48;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dc-showcase-section-singapore .dc-feature-icon {
    background: rgba(237, 41, 57, 0.1);
    color: #ED2939;
}

/* New York Dedicated Server - Navy Blue Theme (NYC Metro Tier 4) */
.dc-details-section-newyork::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(27, 54, 93, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(213, 43, 30, 0.08) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-newyork .dc-card-icon {
    background: rgba(27, 54, 93, 0.1);
    color: #1B365D;
}

.dc-details-section-newyork .dc-details-card:hover .dc-card-icon {
    background: rgba(27, 54, 93, 0.2);
    color: #1B365D;
    transform: scale(1.1);
}

.dc-details-section-newyork .dc-bullet {
    color: #1B365D;
}

.dc-showcase-section-newyork .dc-showcase-badge {
    background: #1e3a8a;
    color: #ffffff;
    border: 1px solid #2563eb;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dc-showcase-section-newyork .dc-feature-icon {
    background: rgba(27, 54, 93, 0.1);
    color: #1B365D;
}

/* Bulgaria Dedicated Server - Green Theme (BIX.BG Hub) */
.dc-details-section-bulgaria::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 150, 110, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 184, 125, 0.1) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-bulgaria .dc-card-icon {
    background: rgba(0, 150, 110, 0.1);
    color: #00966E;
}

.dc-details-section-bulgaria .dc-details-card:hover .dc-card-icon {
    background: rgba(0, 150, 110, 0.2);
    color: #00966E;
    transform: scale(1.1);
}

.dc-details-section-bulgaria .dc-bullet {
    color: #00966E;
}

.dc-showcase-section-bulgaria .dc-showcase-badge {
    background: #047857;
    color: #ffffff;
    border: 1px solid #10b981;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dc-showcase-section-bulgaria .dc-feature-icon {
    background: rgba(0, 150, 110, 0.1);
    color: #00966E;
}

/* Germany Dedicated Server - Red & Black Theme */
.dc-details-section-germany::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(221, 0, 0, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 51, 51, 0.1) 0%, transparent 50%),
        url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+');
    animation: bgFloat 20s ease-in-out infinite;
}

.dc-details-section-germany .dc-card-icon {
    background: rgba(221, 0, 0, 0.1);
    color: #DD0000;
}

.dc-details-section-germany .dc-details-card:hover .dc-card-icon {
    background: rgba(221, 0, 0, 0.2);
    color: #DD0000;
    transform: scale(1.1);
}

.dc-details-section-germany .dc-bullet {
    color: #DD0000;
}

.dc-showcase-section-germany .dc-showcase-badge {
    background: #b91c1c;
    color: #ffffff;
    border: 1px solid #ef4444;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dc-showcase-section-germany .dc-feature-icon {
    background: rgba(221, 0, 0, 0.1);
    color: #DD0000;
}

/* DC Showcase Link - Better Contrast */
.dc-showcase-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.dc-showcase-link:hover {
    color: #93c5fd;
}

/* Light Mode */
[data-theme="light"] .dc-details-section {
    background: linear-gradient(135deg, 
        rgba(248, 250, 252, 0.95) 0%, 
        rgba(241, 245, 249, 0.95) 100%);
}

[data-theme="light"] .dc-details-card {
    background: transparent;
    border: none;
}

[data-theme="light"] .dc-showcase-badge {
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
    text-shadow: none;
}

[data-theme="light"] .dc-showcase-link {
    color: #2563eb;
}

[data-theme="light"] .dc-showcase-link:hover {
    color: #1d4ed8;
}

/* Unlimited Dedicated Server - Blue Badge (Inherits from lg-beta-badge, no override needed) */
.unlimited-badge span {
    color: inherit;
}

/* Light Mode - Country Specific Badges */
[data-theme="light"] .dc-showcase-section-bulgaria .dc-showcase-badge {
    background: #d1fae5;
    color: #064e3b;
    border: 1px solid #6ee7b7;
}

[data-theme="light"] .dc-showcase-section-uk .dc-showcase-badge {
    background: #dbeafe;
    color: #1e3a8a;
    border: 1px solid #93c5fd;
}

[data-theme="light"] .dc-showcase-section-australia .dc-showcase-badge {
    background: #e0e7ff;
    color: #312e81;
    border: 1px solid #a5b4fc;
}

[data-theme="light"] .dc-showcase-section-pakistan .dc-showcase-badge {
    background: #dcfce7;
    color: #14532d;
    border: 1px solid #86efac;
}

[data-theme="light"] .dc-showcase-section-la .dc-showcase-badge {
    background: #dbeafe;
    color: #1e3a8a;
    border: 1px solid #93c5fd;
}

[data-theme="light"] .dc-showcase-section-miami .dc-showcase-badge {
    background: #cffafe;
    color: #164e63;
    border: 1px solid #67e8f9;
}

[data-theme="light"] .dc-showcase-section-dallas .dc-showcase-badge {
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}

[data-theme="light"] .dc-showcase-section-canada .dc-showcase-badge {
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}

[data-theme="light"] .dc-showcase-section-singapore .dc-showcase-badge {
    background: #ffe4e6;
    color: #881337;
    border: 1px solid #fda4af;
}

[data-theme="light"] .dc-showcase-section-newyork .dc-showcase-badge {
    background: #dbeafe;
    color: #1e3a8a;
    border: 1px solid #93c5fd;
}

[data-theme="light"] .dc-showcase-section-germany .dc-showcase-badge {
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}

/* ============================================
   40. TURKEY VPS PAGE - SPECIFIC STYLES
   ============================================ */

/* Turkey VPS Hero - Istanbul Skyline */
.turkey-vps-hero {
    position: relative;
    overflow: hidden;
}

.istanbul-skyline-silhouette {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

.istanbul-skyline-silhouette svg {
    width: 100%;
    height: 100%;
}

/* ============================================
   COUNTRY-SPECIFIC DATACENTER SECTIONS
   ============================================ */

/* Turkey Datacenter Section - Red */
.turkey-datacenter-section {
    background: linear-gradient(135deg, rgba(226, 0, 26, 0.05), rgba(59, 130, 246, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .turkey-datacenter-section {
    background: linear-gradient(135deg, rgba(226, 0, 26, 0.08), rgba(59, 130, 246, 0.08)) !important;
}

[data-theme="light"] .turkey-datacenter-section {
    background: linear-gradient(135deg, rgba(226, 0, 26, 0.05), rgba(59, 130, 246, 0.05)) !important;
}

/* Germany Datacenter Section - Black/Red/Gold */
.germany-datacenter-section {
    background: linear-gradient(135deg, rgba(221, 0, 0, 0.05), rgba(255, 206, 0, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .germany-datacenter-section {
    background: linear-gradient(135deg, rgba(221, 0, 0, 0.08), rgba(255, 206, 0, 0.08)) !important;
}

[data-theme="light"] .germany-datacenter-section {
    background: linear-gradient(135deg, rgba(221, 0, 0, 0.05), rgba(255, 206, 0, 0.05)) !important;
}

/* Bulgaria Datacenter Section - White/Green/Red */
.bulgaria-datacenter-section {
    background: linear-gradient(135deg, rgba(0, 150, 110, 0.05), rgba(214, 38, 18, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .bulgaria-datacenter-section {
    background: linear-gradient(135deg, rgba(0, 150, 110, 0.08), rgba(214, 38, 18, 0.08)) !important;
}

[data-theme="light"] .bulgaria-datacenter-section {
    background: linear-gradient(135deg, rgba(0, 150, 110, 0.05), rgba(214, 38, 18, 0.05)) !important;
}

/* UK Datacenter Section - Red/Blue */
.uk-datacenter-section {
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.05), rgba(1, 33, 105, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .uk-datacenter-section {
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.08), rgba(1, 33, 105, 0.08)) !important;
}

[data-theme="light"] .uk-datacenter-section {
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.05), rgba(1, 33, 105, 0.05)) !important;
}

/* USA Datacenter Sections - Red/Blue */
.usa-datacenter-section,
.ny-datacenter-section,
.la-datacenter-section,
.miami-datacenter-section,
.dallas-datacenter-section {
    background: linear-gradient(135deg, rgba(178, 34, 52, 0.05), rgba(60, 59, 110, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .usa-datacenter-section,
[data-theme="dark"] .ny-datacenter-section,
[data-theme="dark"] .la-datacenter-section,
[data-theme="dark"] .miami-datacenter-section,
[data-theme="dark"] .dallas-datacenter-section {
    background: linear-gradient(135deg, rgba(178, 34, 52, 0.08), rgba(60, 59, 110, 0.08)) !important;
}

[data-theme="light"] .usa-datacenter-section,
[data-theme="light"] .ny-datacenter-section,
[data-theme="light"] .la-datacenter-section,
[data-theme="light"] .miami-datacenter-section,
[data-theme="light"] .dallas-datacenter-section {
    background: linear-gradient(135deg, rgba(178, 34, 52, 0.05), rgba(60, 59, 110, 0.05)) !important;
}

/* Canada Datacenter Section - Red */
.canada-datacenter-section {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.05), rgba(59, 130, 246, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .canada-datacenter-section {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.08), rgba(59, 130, 246, 0.08)) !important;
}

[data-theme="light"] .canada-datacenter-section {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.05), rgba(59, 130, 246, 0.05)) !important;
}

/* Australia Datacenter Section - Blue/Red */
.australia-datacenter-section {
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.05), rgba(255, 0, 0, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .australia-datacenter-section {
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.08), rgba(255, 0, 0, 0.08)) !important;
}

[data-theme="light"] .australia-datacenter-section {
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.05), rgba(255, 0, 0, 0.05)) !important;
}

/* Pakistan Datacenter Section - Green */
.pakistan-datacenter-section {
    background: linear-gradient(135deg, rgba(1, 65, 28, 0.05), rgba(59, 130, 246, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .pakistan-datacenter-section {
    background: linear-gradient(135deg, rgba(1, 65, 28, 0.08), rgba(59, 130, 246, 0.08)) !important;
}

[data-theme="light"] .pakistan-datacenter-section {
    background: linear-gradient(135deg, rgba(1, 65, 28, 0.05), rgba(59, 130, 246, 0.05)) !important;
}

/* Singapore Datacenter Section - Red/White */
.singapore-datacenter-section {
    background: linear-gradient(135deg, rgba(239, 51, 64, 0.05), rgba(59, 130, 246, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .singapore-datacenter-section {
    background: linear-gradient(135deg, rgba(239, 51, 64, 0.08), rgba(59, 130, 246, 0.08)) !important;
}

[data-theme="light"] .singapore-datacenter-section {
    background: linear-gradient(135deg, rgba(239, 51, 64, 0.05), rgba(59, 130, 246, 0.05)) !important;
}

/* Special VPS Types */
.windows-datacenter-section {
    background: linear-gradient(135deg, rgba(0, 120, 215, 0.05), rgba(59, 130, 246, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .windows-datacenter-section {
    background: linear-gradient(135deg, rgba(0, 120, 215, 0.08), rgba(59, 130, 246, 0.08)) !important;
}

.macos-datacenter-section {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.05), rgba(88, 86, 214, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .macos-datacenter-section {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.08), rgba(88, 86, 214, 0.08)) !important;
}

.mikrotik-datacenter-section {
    background: linear-gradient(135deg, rgba(41, 128, 185, 0.05), rgba(59, 130, 246, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .mikrotik-datacenter-section {
    background: linear-gradient(135deg, rgba(41, 128, 185, 0.08), rgba(59, 130, 246, 0.08)) !important;
}

.forex-datacenter-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(245, 158, 11, 0.05)) !important;
    position: relative;
    overflow: visible;
}

[data-theme="dark"] .forex-datacenter-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(245, 158, 11, 0.08)) !important;
}

/* ============================================
   COUNTRY-SPECIFIC HERO TITLE GRADIENTS
   ============================================ */

/* Turkey - Red Gradient (existing) */
/* Already handled by existing gradient-text-animated */

/* Germany - Black/Red/Gold Gradient */
.germany-gradient {
    background: linear-gradient(90deg, #000000, #DD0000, #FFCE00, #DD0000, #000000) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(221, 0, 0, 0.3));
}

/* Bulgaria - Green/White/Red Gradient */
.bulgaria-gradient {
    background: linear-gradient(90deg, #FFFFFF, #00966E, #D62612, #00966E, #FFFFFF) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(0, 150, 110, 0.3));
}

/* UK - Red/Blue Gradient */
.uk-gradient {
    background: linear-gradient(90deg, #C8102E, #012169, #C8102E, #012169, #C8102E) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(200, 16, 46, 0.3));
}

/* USA - Red/White/Blue Gradient */
.usa-gradient {
    background: linear-gradient(90deg, #B22234, #FFFFFF, #3C3B6E, #FFFFFF, #B22234) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(178, 34, 52, 0.3));
}

/* Canada - Red/White Gradient */
.canada-gradient {
    background: linear-gradient(90deg, #FF0000, #FFFFFF, #FF0000, #FFFFFF, #FF0000) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.3));
}

/* Australia - Blue/Red Gradient */
.australia-gradient {
    background: linear-gradient(90deg, #00008B, #FFFFFF, #FF0000, #FFFFFF, #00008B) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(0, 0, 139, 0.3));
}

/* Pakistan - Green/White Gradient */
.pakistan-gradient {
    background: linear-gradient(90deg, #01411C, #FFFFFF, #01411C, #FFFFFF, #01411C) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(1, 65, 28, 0.3));
}

/* Singapore - Red/White Gradient */
.singapore-gradient {
    background: linear-gradient(90deg, #EF3340, #FFFFFF, #EF3340, #FFFFFF, #EF3340) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(239, 51, 64, 0.3));
}

/* Windows - Blue Gradient */
.windows-gradient {
    background: linear-gradient(90deg, #0078D7, #00A4EF, #0078D7, #00A4EF, #0078D7) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(0, 120, 215, 0.3));
}

/* macOS - Blue/Purple Gradient */
.macos-gradient {
    background: linear-gradient(90deg, #007AFF, #5856D6, #007AFF, #5856D6, #007AFF) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(0, 122, 255, 0.3));
}

/* MikroTik - Blue Gradient */
.mikrotik-gradient {
    background: linear-gradient(90deg, #2980B9, #3498DB, #2980B9, #3498DB, #2980B9) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(41, 128, 185, 0.3));
}

/* Forex - Green/Gold Gradient */
.forex-gradient {
    background: linear-gradient(90deg, #10B981, #F59E0B, #10B981, #F59E0B, #10B981) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.3));
}

.turkey-datacenter-section .container {
    position: relative;
}

.turkey-datacenter-section .turkey-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

/* Turkey Map Visual */
.turkey-map-visual {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 55%;
    max-width: 900px;
    z-index: 1;
}

.turkey-map-visual img {
    width: 100%;
    height: auto;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: multiply;
}

/* Turkey Location Highlight */
.turkey-location-highlight {
    border: 2px solid rgba(226, 0, 26, 0.5) !important;
    box-shadow: 0 0 30px rgba(226, 0, 26, 0.2) !important;
}

/* Germany Specific Styles */
.germany-vps-hero {
    position: relative;
    overflow: hidden;
}

.germany-skyline-silhouette {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

.germany-skyline-silhouette svg {
    width: 100%;
    height: 100%;
}

.germany-datacenter-section .germany-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.germany-adv-badge {
    display: inline-block;
    background: linear-gradient(135deg, #DD0000, #000000);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.germany-adv-badge .fi {
    margin-right: 8px;
}

.germany-adv-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.germany-adv-desc {
    margin-bottom: 25px;
    font-size: 1.05rem;
}

.germany-advantage-check {
    background: linear-gradient(135deg, #DD0000, #000000);
    min-width: 24px;
    height: 24px;
}

.germany-map-visual {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 55%;
    max-width: 900px;
    z-index: 1;
}

.germany-map-visual img {
    width: 100%;
    height: auto;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: multiply;
}

.germany-location-highlight {
    border: 2px solid rgba(221, 0, 0, 0.5) !important;
    box-shadow: 0 0 30px rgba(221, 0, 0, 0.2) !important;
}

/* Pricing Flag Icon */
.pricing-flag-icon {
    font-size: 16px;
    margin-right: 5px;
}

/* Responsive */
@media (max-width: 991px) {
    .turkey-map-visual {
        position: relative;
        top: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin-top: 3rem;
    }
    
    .istanbul-skyline-silhouette {
        width: 80%;
        opacity: 0.02;
    }
}

@media (max-width: 768px) {
    .turkey-datacenter-section .turkey-content {
        max-width: 100%;
    }
    
    .istanbul-skyline-silhouette {
        display: none;
    }
}

/* ========================================
   41. UK VPS PAGE - SPECIFIC STYLES
   ======================================== */

/* UK Hero Title Gradient (Red, White, Blue - UK Flag) */
.gradient-text-animated.uk {
    background: linear-gradient(135deg, #012169 0%, #FFFFFF 50%, #C8102E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

[data-theme="light"] .gradient-text-animated.uk {
    background: linear-gradient(135deg, #012169 0%, #FFFFFF 50%, #C8102E 100%);
}

/* UK Datacenter Section Background */
.uk-datacenter-section {
    background: linear-gradient(135deg, #012169 0%, #1a2f6f 50%, #C8102E 100%) !important;
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .uk-datacenter-section {
    background: linear-gradient(135deg, rgba(1, 33, 105, 0.08) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(200, 16, 46, 0.08) 100%) !important;
}

/* UK Advantage Check Icon */
.uk-advantage-check {
    color: #C8102E !important;
}

/* UK Skyline Silhouette */
.london-skyline-silhouette {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35%;
    max-width: 600px;
    height: auto;
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
}

.london-skyline-silhouette svg {
    width: 100%;
    height: auto;
    color: var(--color-primary);
}

/* UK VPS Hero Specific */
.uk-vps-hero {
    position: relative;
    overflow: hidden;
}

/* UK Content Styling */
.uk-content {
    position: relative;
    z-index: 2;
}

/* UK Map Visual */
.uk-map-visual {
    position: absolute;
    top: 50%;
    right: -50px;
    transform: translateY(-50%);
    width: 55%;
    max-width: 900px;
    z-index: 1;
}

.uk-map-visual img {
    width: 100%;
    height: auto;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: multiply;
}

.uk-location-highlight {
    border: 2px solid rgba(200, 16, 46, 0.5) !important;
    box-shadow: 0 0 30px rgba(200, 16, 46, 0.2) !important;
}

/* Responsive */
@media (max-width: 991px) {
    .uk-map-visual {
        position: relative;
        top: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin-top: 3rem;
    }
    
    .london-skyline-silhouette {
        width: 80%;
        opacity: 0.02;
    }
}

@media (max-width: 768px) {
    .uk-datacenter-section .uk-content {
        max-width: 100%;
    }
    
    .london-skyline-silhouette {
        display: none;
    }
}

/* ========================================
   42. BULGARIA VPS PAGE - SPECIFIC STYLES
   ======================================== */

/* Bulgaria Hero Title Gradient (White, Green, Red - Bulgaria Flag) */
.gradient-text-animated.bulgaria {
    background: linear-gradient(135deg, #FFFFFF 0%, #00966E 50%, #D62612 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

[data-theme="light"] .gradient-text-animated.bulgaria {
    background: linear-gradient(135deg, #FFFFFF 0%, #00966E 50%, #D62612 100%);
}

/* Bulgaria Datacenter Section Background */
.bulgaria-datacenter-section {
    background: linear-gradient(135deg, #FFFFFF 0%, #00966E 50%, #D62612 100%) !important;
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .bulgaria-datacenter-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 150, 110, 0.08) 50%, rgba(214, 38, 18, 0.08) 100%) !important;
}

/* Bulgaria Advantage Check Icon */
.bulgaria-advantage-check {
    color: #00966E !important;
}

/* Sofia Skyline Silhouette */
.sofia-skyline-silhouette {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35%;
    max-width: 600px;
    height: auto;
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
}

.sofia-skyline-silhouette svg {
    width: 100%;
    height: auto;
    color: var(--color-primary);
}

/* Bulgaria VPS Hero Specific */
.bulgaria-vps-hero {
    position: relative;
    overflow: hidden;
}

/* Bulgaria Content Styling */
.bulgaria-content {
    position: relative;
    z-index: 2;
}

/* Bulgaria Map Visual */
.bulgaria-map-visual {
    position: absolute;
    top: 50%;
    right: -50px;
    transform: translateY(-50%);
    width: 55%;
    max-width: 900px;
    z-index: 1;
}

.bulgaria-map-visual img {
    width: 100%;
    height: auto;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: multiply;
}

.bulgaria-location-highlight {
    border: 2px solid rgba(0, 150, 110, 0.5) !important;
    box-shadow: 0 0 30px rgba(0, 150, 110, 0.2) !important;
}

/* Responsive */
@media (max-width: 991px) {
    .bulgaria-map-visual {
        position: relative;
        top: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin-top: 3rem;
    }
    
    .sofia-skyline-silhouette {
        width: 80%;
        opacity: 0.02;
    }
}

@media (max-width: 768px) {
    .bulgaria-datacenter-section .bulgaria-content {
        max-width: 100%;
    }
    
    .sofia-skyline-silhouette {
        display: none;
    }
}

/* ========================================
   43-50. OTHER COUNTRY VPS PAGES
   ======================================== */

/* Canada - Red & White */
.gradient-text-animated.canada { background: linear-gradient(135deg, #FF0000 0%, #FFFFFF 50%, #FF0000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 8s ease infinite; }
.canada-datacenter-section { background: linear-gradient(135deg, #FF0000 0%, #FFFFFF 50%, #FF0000 100%) !important; }
.canada-advantage-check { color: #FF0000 !important; }
.canada-location-highlight { border: 2px solid rgba(255, 0, 0, 0.5) !important; box-shadow: 0 0 30px rgba(255, 0, 0, 0.2) !important; }
.toronto-skyline-silhouette { position: absolute; bottom: 0; right: 0; width: 35%; opacity: 0.04; pointer-events: none; z-index: 1; }

/* Australia - Blue, White, Red */
.gradient-text-animated.australia { background: linear-gradient(135deg, #00008B 0%, #FFFFFF 50%, #FF0000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 8s ease infinite; }
.australia-datacenter-section { background: linear-gradient(135deg, #00008B 0%, #FFFFFF 50%, #FF0000 100%) !important; }
.australia-advantage-check { color: #00008B !important; }
.australia-location-highlight { border: 2px solid rgba(0, 0, 139, 0.5) !important; box-shadow: 0 0 30px rgba(0, 0, 139, 0.2) !important; }
.sydney-skyline-silhouette { position: absolute; bottom: 0; right: 0; width: 35%; opacity: 0.04; pointer-events: none; z-index: 1; }

/* Pakistan - Green & White */
.gradient-text-animated.pakistan { background: linear-gradient(135deg, #01411C 0%, #FFFFFF 50%, #01411C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 8s ease infinite; }
.pakistan-datacenter-section { background: linear-gradient(135deg, #01411C 0%, #FFFFFF 50%, #01411C 100%) !important; }
.pakistan-advantage-check { color: #01411C !important; }
.pakistan-location-highlight { border: 2px solid rgba(1, 65, 28, 0.5) !important; box-shadow: 0 0 30px rgba(1, 65, 28, 0.2) !important; }
.karachi-skyline-silhouette { position: absolute; bottom: 0; right: 0; width: 35%; opacity: 0.04; pointer-events: none; z-index: 1; }

/* Singapore - Red & White */
.gradient-text-animated.singapore { background: linear-gradient(135deg, #ED2939 0%, #FFFFFF 50%, #ED2939 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 8s ease infinite; }
.singapore-datacenter-section { background: linear-gradient(135deg, #ED2939 0%, #FFFFFF 50%, #ED2939 100%) !important; }
.singapore-advantage-check { color: #ED2939 !important; }
.singapore-location-highlight { border: 2px solid rgba(237, 41, 57, 0.5) !important; box-shadow: 0 0 30px rgba(237, 41, 57, 0.2) !important; }
.singapore-skyline-silhouette { position: absolute; bottom: 0; right: 0; width: 35%; opacity: 0.04; pointer-events: none; z-index: 1; }

/* USA Cities - Red, White, Blue */
.gradient-text-animated.newyork, .gradient-text-animated.losangeles, .gradient-text-animated.miami, .gradient-text-animated.dallas { background: linear-gradient(135deg, #B22234 0%, #FFFFFF 50%, #3C3B6E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 8s ease infinite; }
.newyork-datacenter-section, .losangeles-datacenter-section, .miami-datacenter-section, .dallas-datacenter-section { background: linear-gradient(135deg, #B22234 0%, #FFFFFF 50%, #3C3B6E 100%) !important; }
.newyork-advantage-check, .losangeles-advantage-check, .miami-advantage-check, .dallas-advantage-check { color: #B22234 !important; }
.newyork-location-highlight, .losangeles-location-highlight, .miami-location-highlight, .dallas-location-highlight { border: 2px solid rgba(178, 34, 52, 0.5) !important; box-shadow: 0 0 30px rgba(178, 34, 52, 0.2) !important; }
.newyork-skyline-silhouette, .losangeles-skyline-silhouette, .miami-skyline-silhouette, .dallas-skyline-silhouette { position: absolute; bottom: 0; right: 0; width: 35%; opacity: 0.04; pointer-events: none; z-index: 1; }

/* Responsive for all */
@media (max-width: 768px) {
    .toronto-skyline-silhouette, .sydney-skyline-silhouette, .karachi-skyline-silhouette, .singapore-skyline-silhouette,
    .newyork-skyline-silhouette, .losangeles-skyline-silhouette, .miami-skyline-silhouette, .dallas-skyline-silhouette {
        display: none;
    }
    
    /* MOBİL: Dedicated Server - Bölge Tabları Alt Alta */
    .ds-loc-tabs {
        flex-direction: column; /* Alt alta */
        gap: 0.5rem;
        margin: 2rem auto;
        width: 100%;
        max-width: 400px;
    }
    
    .ds-loc-tab-btn {
        width: 100%; /* Tam genişlik */
        padding: 1rem 1.5rem;
        font-size: 1rem;
        border-bottom: none; /* Alt border kaldır */
        border-left: 3px solid transparent; /* Sol border ekle */
        border-radius: 12px;
        text-align: left;
        background: rgba(30, 41, 59, 0.5);
    }
    
    [data-theme="light"] .ds-loc-tab-btn {
        background: rgba(248, 250, 252, 0.8);
        border: 1px solid rgba(226, 232, 240, 0.8);
    }
    
    .ds-loc-tab-btn.active {
        border-left-color: var(--color-primary);
        background: rgba(59, 130, 246, 0.1);
        font-weight: 700;
    }
    
    [data-theme="light"] .ds-loc-tab-btn.active {
        background: rgba(59, 130, 246, 0.08);
        border: 1px solid var(--color-primary);
        border-left-width: 3px;
    }
}