/* ============================================================
   Sanal Veri Merkezi — Modern Kurumsal Tema (v2)
   Canlı mavi (#0066cc) + mor accent (#7c3aed), full-bleed hero.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    --svm-zemin: #ffffff; --svm-zemin-2: #f9fafb; --svm-zemin-3: #f3f4f6;
    --svm-yazi: #0a0e1a; --svm-yazi-ikincil: #475569; --svm-yazi-sonuk: #64748b; --svm-yazi-cok-sonuk: #94a3b8;
    --svm-cizgi: #e5e7eb; --svm-cizgi-vurgu: #d1d5db;
    --svm-vurgu: #0066cc; --svm-vurgu-koyu: #0052a3; --svm-vurgu-aydinlik: #3399ff; --svm-vurgu-soluk: #e6f2ff;
    --svm-mor: #7c3aed; --svm-mor-koyu: #6d28d9; --svm-mor-soluk: #f3e8ff;
    --svm-gradient: linear-gradient(135deg, #0066cc 0%, #7c3aed 100%);
    --svm-gradient-koyu: linear-gradient(135deg, #0052a3 0%, #6d28d9 100%);
    --svm-yesil: #10b981; --svm-yesil-soluk: #d1fae5;
    --svm-sari: #f59e0b; --svm-sari-soluk: #fef3c7;
    --svm-kirmizi: #ef4444; --svm-kirmizi-soluk: #fee2e2;
    --svm-koyu: #0a0e1a; --svm-koyu-2: #1a1f2e;
    --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;--s-20:80px;--s-24:96px;--s-32:128px;
    --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:24px;--r-full:999px;
    --sh-xs: 0 1px 2px rgba(15,23,42,0.04);
    --sh-sm: 0 2px 8px rgba(15,23,42,0.06);
    --sh-md: 0 8px 24px rgba(15,23,42,0.08);
    --sh-lg: 0 20px 48px rgba(15,23,42,0.10);
    --sh-xl: 0 32px 64px rgba(15,23,42,0.12);
    --sh-mavi: 0 16px 40px rgba(0,102,204,0.28);
    --sh-mor: 0 16px 40px rgba(124,58,237,0.28);
    --t-fast: 0.15s ease-out;
    --t-mid: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--svm-yazi); background: var(--svm-zemin); line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--svm-vurgu); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--svm-vurgu-koyu); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--s-4); font-weight: 800; letter-spacing: -0.025em; color: var(--svm-yazi); line-height: 1.15; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; }
p  { margin: 0 0 var(--s-4); color: var(--svm-yazi-ikincil); }
.container { max-width: 1200px !important; }

/* ============================================================
   ÜST BAR (svm-ustbar)
   ============================================================ */
.svm-ustbar {
    background: var(--svm-koyu); color: rgba(255,255,255,0.75);
    font-size: 0.82rem; padding: var(--s-3) 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.svm-ustbar .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); }
.svm-ustbar-sol, .svm-ustbar-sag { display: flex; align-items: center; gap: var(--s-5); }
.svm-ustbar a { color: rgba(255,255,255,0.75); display: inline-flex; align-items: center; gap: var(--s-1); transition: color var(--t-fast); }
.svm-ustbar a:hover { color: #fff; }
.svm-ustbar i { color: var(--svm-vurgu-aydinlik); font-size: 0.9rem; }

/* ============================================================
   NAVBAR (svm-nav)
   ============================================================ */
.svm-nav {
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--svm-cizgi);
    padding: var(--s-3) 0;
    position: sticky; top: 0; z-index: 1030;
    transition: box-shadow var(--t-mid);
}
.svm-nav.scroll { box-shadow: var(--sh-sm); }
.svm-nav .navbar-brand {
    font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em;
    color: var(--svm-yazi); display: flex; align-items: center; gap: var(--s-2);
}
.svm-nav .navbar-brand .logo-ikon {
    width: 36px; height: 36px; border-radius: var(--r-sm);
    background: var(--svm-gradient);
    display: grid; place-items: center;
    color: #fff; font-weight: 900; font-size: 1.05rem;
    box-shadow: var(--sh-sm);
}
.svm-nav .nav-link {
    color: var(--svm-yazi-ikincil) !important;
    font-weight: 500; font-size: 0.95rem;
    padding: var(--s-2) var(--s-4) !important;
    border-radius: var(--r-sm);
    transition: all var(--t-fast);
}
.svm-nav .nav-link:hover { color: var(--svm-vurgu) !important; background: var(--svm-vurgu-soluk); }
.svm-nav .nav-link.aktif { color: var(--svm-vurgu) !important; background: var(--svm-vurgu-soluk); font-weight: 600; }
.svm-nav .navbar-toggler { border: 1px solid var(--svm-cizgi); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
.svm-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--svm-vurgu-soluk); }

/* ============================================================
   BUTONLAR (svm-buton)
   ============================================================ */
.svm-buton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    padding: var(--s-3) var(--s-6);
    border-radius: var(--r-md);
    font-weight: 600; font-size: 0.95rem;
    text-decoration: none;
    transition: all var(--t-fast);
    cursor: pointer;
    border: 1.5px solid transparent;
    line-height: 1;
    white-space: nowrap;
}
.svm-buton:hover { transform: translateY(-1px); }
.svm-buton:active { transform: translateY(0); }
.svm-buton.birincil { background: var(--svm-gradient); color: #fff; box-shadow: var(--sh-mavi); }
.svm-buton.birincil:hover { box-shadow: var(--sh-lg), var(--sh-mavi); color: #fff; }
.svm-buton.ikincil { background: #fff; color: var(--svm-vurgu); border-color: var(--svm-cizgi); }
.svm-buton.ikincil:hover { border-color: var(--svm-vurgu); background: var(--svm-vurgu-soluk); }
.svm-buton.cam {
    background: rgba(255,255,255,0.12); color: #fff;
    border-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(12px);
}
.svm-buton.cam:hover { background: rgba(255,255,255,0.20); color: #fff; }
.svm-buton.kucuk { padding: var(--s-2) var(--s-4); font-size: 0.86rem; }
.svm-buton.buyuk { padding: var(--s-4) var(--s-8); font-size: 1.05rem; border-radius: var(--r-lg); }

/* ============================================================
   HERO (svm-hero) — Full-bleed gradient
   ============================================================ */
.svm-hero {
    position: relative;
    background: var(--svm-gradient);
    color: #fff;
    padding: var(--s-32) 0 var(--s-24);
    overflow: hidden;
    isolation: isolate;
}
.svm-hero::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 32px 32px; opacity: 0.5;
    pointer-events: none;
}
.svm-hero-arkaplan { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.svm-hero-arkaplan .orb {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.12);
    filter: blur(80px);
    animation: svm-yuzme 12s ease-in-out infinite;
}
.svm-hero-arkaplan .orb-1 { width: 480px; height: 480px; top: -180px; left: -120px; }
.svm-hero-arkaplan .orb-2 { width: 600px; height: 600px; bottom: -240px; right: -180px; animation-delay: 4s; }
.svm-hero-arkaplan .orb-3 { width: 360px; height: 360px; top: 40%; left: 60%; animation-delay: 8s; }
@keyframes svm-yuzme {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(40px, -30px) scale(1.08); }
}
.svm-hero .container { position: relative; z-index: 2; text-align: center; }
.svm-hero h1 {
    color: #fff;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900; letter-spacing: -0.035em;
    margin: 0 auto var(--s-6); max-width: 920px;
}
.svm-hero h1 .svm-vurgu-yazi {
    background: linear-gradient(135deg, #fff 0%, #c4d8ff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.svm-hero .kabarcik {
    color: rgba(255,255,255,0.88);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    max-width: 720px; margin: 0 auto var(--s-10);
    line-height: 1.65;
}
.svm-hero .kabarcik strong { color: #fff; font-weight: 700; }
.svm-hero .ctalar { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--s-12); }
.svm-hero .svm-guven-cubugu {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
    padding: var(--s-3) var(--s-6);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--r-full);
    backdrop-filter: blur(12px);
    font-size: 0.84rem;
    color: rgba(255,255,255,0.88);
}
.svm-hero .svm-guven-cubugu .etiket { color: rgba(255,255,255,0.6); font-weight: 500; }
.svm-hero .svm-guven-cubugu .logolar { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.svm-hero .svm-guven-cubugu .logolar span { display: inline-flex; align-items: center; gap: var(--s-1); color: #fff; font-weight: 500; }
.svm-hero .svm-guven-cubugu i { color: #86efac; }
.svm-hero .svm-hero-spec { display: none; }

/* ============================================================
   ROZET (svm-rozet)
   ============================================================ */
.svm-rozet {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: var(--r-full);
    font-size: 0.78rem; font-weight: 600; color: #fff;
    backdrop-filter: blur(12px);
    margin-bottom: var(--s-6);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.svm-rozet .nokta {
    width: 8px; height: 8px; border-radius: 50%; background: #86efac;
    box-shadow: 0 0 0 4px rgba(134,239,172,0.25);
    animation: svm-yanip 1.6s ease-in-out infinite;
}
@keyframes svm-yanip { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.svm-bolum .svm-rozet { background: var(--svm-vurgu-soluk); border-color: var(--svm-vurgu-soluk); color: var(--svm-vurgu); }
.svm-bolum .svm-rozet .nokta { background: var(--svm-vurgu); box-shadow: 0 0 0 4px rgba(0,102,204,0.18); }

/* ============================================================
   BÖLÜM (svm-bolum)
   ============================================================ */
.svm-bolum { padding: var(--s-24) 0; background: var(--svm-zemin); }
.svm-bolum.kucuk { padding: var(--s-20) 0; }
.svm-bolum-baslik { max-width: 760px; margin: 0 auto var(--s-16); text-align: center; }
.svm-bolum-baslik h2 { margin-bottom: var(--s-4); }
.svm-bolum-baslik p { color: var(--svm-yazi-sonuk); font-size: 1.1rem; line-height: 1.65; margin: 0; }

.svm-yumusak-baslik {
    display: inline-block;
    padding: var(--s-2) var(--s-4);
    background: var(--svm-vurgu-soluk);
    color: var(--svm-vurgu);
    border-radius: var(--r-full);
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: var(--s-4);
}
.svm-vurgu-yazi {
    background: var(--svm-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-weight: 900;
}

/* ============================================================
   GÜVEN BAND (svm-guven-band)
   ============================================================ */
.svm-guven-band {
    padding: var(--s-12) 0;
    background: var(--svm-zemin-2);
    border-top: 1px solid var(--svm-cizgi);
    border-bottom: 1px solid var(--svm-cizgi);
}
.svm-guven-band .col-md-3 {
    display: flex; align-items: center; gap: var(--s-3);
    justify-content: center; padding: var(--s-3) var(--s-4);
}
.svm-guven-band .ikon {
    width: 48px; height: 48px; border-radius: var(--r-md);
    background: var(--svm-gradient); color: #fff;
    display: grid; place-items: center; font-size: 1.2rem;
    flex-shrink: 0; box-shadow: var(--sh-sm);
}
.svm-guven-band span { font-weight: 600; color: var(--svm-yazi); font-size: 0.92rem; }

/* ============================================================
   ÖZELLİK KARTI (svm-ozellik-kart)
   ============================================================ */
.svm-ozellik-kart {
    background: var(--svm-zemin);
    border: 1px solid var(--svm-cizgi);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    transition: all var(--t-mid);
    height: 100%;
}
.svm-ozellik-kart:hover {
    border-color: var(--svm-vurgu-aydinlik);
    box-shadow: var(--sh-md);
    transform: translateY(-4px);
}
.svm-ozellik-ikon {
    width: 56px; height: 56px;
    border-radius: var(--r-md);
    background: var(--svm-vurgu-soluk);
    color: var(--svm-vurgu);
    display: grid; place-items: center;
    font-size: 1.5rem;
    margin-bottom: var(--s-5);
    transition: all var(--t-mid);
}
.svm-ozellik-kart:hover .svm-ozellik-ikon {
    background: var(--svm-gradient);
    color: #fff;
    transform: scale(1.08);
}
.svm-ozellik-kart h3 { font-size: 1.05rem; margin-bottom: var(--s-2); color: var(--svm-yazi); }
.svm-ozellik-kart p { font-size: 0.92rem; color: var(--svm-yazi-sonuk); margin: 0; line-height: 1.6; }

/* ============================================================
   ADIM KARTI (svm-adim-kart)
   ============================================================ */
.svm-adim-kart {
    background: var(--svm-zemin);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    text-align: center;
    position: relative;
    border: 1px solid var(--svm-cizgi);
    height: 100%;
}
.svm-adim-kart .numara {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--svm-gradient);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 900; font-size: 1.4rem;
    margin: 0 auto var(--s-5);
    box-shadow: var(--sh-mavi);
}
.svm-adim-kart h3 { font-size: 1.15rem; margin-bottom: var(--s-3); }
.svm-adim-kart p { font-size: 0.92rem; color: var(--svm-yazi-sonuk); margin: 0; }

/* ============================================================
   FİYAT KARTI (svm-fiyat-kart)
   ============================================================ */
.svm-fiyat-kart {
    background: #fff;
    border: 1.5px solid var(--svm-cizgi);
    border-radius: var(--r-xl);
    padding: var(--s-8);
    transition: all var(--t-mid);
    position: relative;
    display: flex; flex-direction: column;
}
.svm-fiyat-kart:hover { border-color: var(--svm-vurgu-aydinlik); box-shadow: var(--sh-md); transform: translateY(-4px); }
.svm-fiyat-kart.populer {
    border-color: transparent;
    background: linear-gradient(#fff, #fff) padding-box,
                var(--svm-gradient) border-box;
    box-shadow: var(--sh-mavi);
    transform: scale(1.02);
}
.svm-fiyat-kart.populer:hover { transform: scale(1.04) translateY(-4px); }
.svm-fiyat-rozet {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--svm-gradient);
    color: #fff;
    padding: var(--s-2) var(--s-5);
    border-radius: var(--r-full);
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    box-shadow: var(--sh-mavi); white-space: nowrap;
}
.svm-fiyat-kart .paket-ad {
    font-size: 0.85rem; font-weight: 700;
    color: var(--svm-vurgu);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: var(--s-2);
}
.svm-fiyat-kart .paket-aciklama {
    font-size: 0.86rem; color: var(--svm-yazi-sonuk);
    margin-bottom: var(--s-5); min-height: 2.5em;
}
.svm-fiyat-kart .fiyat {
    font-size: 2.8rem; font-weight: 900;
    color: var(--svm-yazi);
    line-height: 1; letter-spacing: -0.03em;
    margin-bottom: var(--s-1);
}
.svm-fiyat-kart .fiyat .birim {
    font-size: 1.1rem; font-weight: 600; color: var(--svm-yazi-sonuk);
    margin-left: var(--s-1);
}
.svm-fiyat-kart .donem { font-size: 0.82rem; color: var(--svm-yazi-sonuk); margin-bottom: var(--s-6); }
.svm-fiyat-kart ul { list-style: none; padding: 0; margin: 0 0 var(--s-6); flex: 1; }
.svm-fiyat-kart ul li {
    display: flex; align-items: flex-start; gap: var(--s-2);
    padding: var(--s-2) 0;
    font-size: 0.9rem; color: var(--svm-yazi-ikincil);
}
.svm-fiyat-kart ul li i { color: var(--svm-yesil); font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.svm-fiyat-kart ul li strong { color: var(--svm-yazi); font-weight: 600; }

/* ============================================================
   KAFES / KİTLE KARTI (svm-kafes-kart, svm-kitle-kart)
   ============================================================ */
.svm-kafes-kart, .svm-kitle-kart {
    background: var(--svm-zemin);
    border: 1px solid var(--svm-cizgi);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    transition: all var(--t-mid);
    height: 100%;
}
.svm-kafes-kart:hover, .svm-kitle-kart:hover {
    border-color: var(--svm-vurgu-aydinlik); box-shadow: var(--sh-md); transform: translateY(-2px);
}
.svm-kafes-kart .ikon, .svm-kitle-kart .ikon {
    width: 56px; height: 56px;
    background: var(--svm-mor-soluk);
    color: var(--svm-mor);
    border-radius: var(--r-md);
    display: grid; place-items: center;
    font-size: 1.5rem;
    margin-bottom: var(--s-5);
}
.svm-kafes-kart h3, .svm-kitle-kart h3 { font-size: 1.1rem; margin-bottom: var(--s-3); }
.svm-kafes-kart p, .svm-kitle-kart p { font-size: 0.92rem; color: var(--svm-yazi-sonuk); margin: 0; }

/* ============================================================
   KARŞILAŞTIRMA TABLOSU (svm-kars-tablo)
   ============================================================ */
.svm-kars-tablo {
    background: #fff;
    border: 1px solid var(--svm-cizgi);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}
.svm-kars-tablo table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.svm-kars-tablo th, .svm-kars-tablo td {
    padding: var(--s-4) var(--s-5);
    text-align: center;
    border-bottom: 1px solid var(--svm-cizgi);
}
.svm-kars-tablo th {
    background: var(--svm-zemin-2);
    font-weight: 700; color: var(--svm-yazi);
    font-size: 0.86rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.svm-kars-tablo td:first-child, .svm-kars-tablo th:first-child {
    text-align: left; font-weight: 600; color: var(--svm-yazi);
}
.svm-kars-tablo .svm-kars-bizim {
    background: var(--svm-vurgu-soluk) !important;
    color: var(--svm-vurgu) !important;
    font-weight: 700;
}
.svm-kars-tablo tbody tr:hover td:not(.svm-kars-bizim) { background: var(--svm-zemin-2); }
.svm-kars-tablo .svm-tik { color: var(--svm-yesil); font-weight: 600; }
.svm-kars-tablo .svm-eksi { color: var(--svm-yazi-cok-sonuk); }

/* ============================================================
   İSTATİSTİK BAND (svm-stat-band)
   ============================================================ */
.svm-stat-band {
    padding: var(--s-20) 0;
    background: var(--svm-koyu);
    color: #fff;
    position: relative; overflow: hidden;
}
.svm-stat-band::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,102,204,0.25), transparent 60%);
    pointer-events: none;
}
.svm-stat-band .container { position: relative; z-index: 2; }
.svm-stat-band .stat { text-align: center; padding: var(--s-4); }
.svm-stat-band .deger {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 900;
    background: linear-gradient(135deg, #fff 0%, #93c5fd 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    line-height: 1; letter-spacing: -0.03em;
    margin-bottom: var(--s-3);
}
.svm-stat-band .etiket {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
}

/* ============================================================
   SSS KARTI (svm-sss-kart)
   ============================================================ */
.svm-sss-kart {
    background: var(--svm-zemin);
    border: 1px solid var(--svm-cizgi);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-6);
    margin-bottom: var(--s-3);
    transition: all var(--t-fast);
}
.svm-sss-kart:hover { border-color: var(--svm-vurgu-aydinlik); }
.svm-sss-kart summary {
    font-weight: 600; color: var(--svm-yazi); cursor: pointer;
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
    font-size: 1rem;
}
.svm-sss-kart summary::-webkit-details-marker { display: none; }
.svm-sss-kart summary::after {
    content: '+'; color: var(--svm-vurgu); font-weight: 700; font-size: 1.4rem;
    transition: transform var(--t-fast);
}
.svm-sss-kart[open] summary::after { transform: rotate(45deg); }
.svm-sss-kart .icerik {
    padding-top: var(--s-4);
    color: var(--svm-yazi-sonuk); line-height: 1.65;
    font-size: 0.94rem;
}

/* ============================================================
   CTA BAND (svm-cta-band)
   ============================================================ */
.svm-cta-band {
    padding: var(--s-24) 0;
    background: var(--svm-gradient);
    color: #fff;
    text-align: center;
    position: relative; overflow: hidden;
}
.svm-cta-band::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 32px 32px; opacity: 0.5;
    pointer-events: none;
}
.svm-cta-band .container { position: relative; z-index: 2; }
.svm-cta-band h2 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--s-6);
    max-width: 720px; margin-left: auto; margin-right: auto;
}
.svm-cta-band p { color: rgba(255,255,255,0.88); font-size: 1.1rem; max-width: 600px; margin: 0 auto var(--s-8); }

/* ============================================================
   WISECP BANNER
   ============================================================ */
.svm-wisecp-banner {
    background: var(--svm-koyu);
    color: #fff;
    border-radius: var(--r-2xl);
    padding: var(--s-16) var(--s-12);
    position: relative; overflow: hidden;
}
.svm-wisecp-banner::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(124,58,237,0.35), transparent 60%);
}
.svm-wisecp-banner > * { position: relative; z-index: 2; }
.svm-wisecp-banner h2 { color: #fff; }
.svm-wisecp-banner p { color: rgba(255,255,255,0.8); }

/* ============================================================
   ALTBILGI (svm-altbilgi)
   ============================================================ */
.svm-altbilgi {
    background: var(--svm-koyu);
    color: rgba(255,255,255,0.7);
    padding: var(--s-20) 0 var(--s-8);
    font-size: 0.92rem;
}
.svm-altbilgi h5 {
    color: #fff; font-size: 0.86rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: var(--s-5);
}
.svm-altbilgi ul { list-style: none; padding: 0; margin: 0; }
.svm-altbilgi ul li { margin-bottom: var(--s-3); }
.svm-altbilgi a { color: rgba(255,255,255,0.7); transition: color var(--t-fast); }
.svm-altbilgi a:hover { color: #fff; }
.svm-altbilgi .marka {
    display: flex; align-items: center; gap: var(--s-2);
    color: #fff; font-weight: 800; font-size: 1.15rem;
    margin-bottom: var(--s-4); letter-spacing: -0.02em;
}
.svm-altbilgi .marka .logo-ikon {
    width: 36px; height: 36px; border-radius: var(--r-sm);
    background: var(--svm-gradient);
    display: grid; place-items: center;
    color: #fff; font-weight: 900; font-size: 1.05rem;
}
.svm-altbilgi .aciklama {
    color: rgba(255,255,255,0.6); line-height: 1.65;
    font-size: 0.92rem; margin-bottom: var(--s-5);
}
.svm-altbilgi .sosyal { display: flex; gap: var(--s-2); }
.svm-altbilgi .sosyal a {
    width: 36px; height: 36px; border-radius: var(--r-sm);
    background: rgba(255,255,255,0.06);
    display: grid; place-items: center;
    transition: all var(--t-fast);
}
.svm-altbilgi .sosyal a:hover { background: var(--svm-vurgu); color: #fff; transform: translateY(-2px); }
.svm-altbilgi .alt-cizgi {
    margin-top: var(--s-16); padding-top: var(--s-6);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--s-3);
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
}

/* ============================================================
   YARDIMCI SINIFLAR
   ============================================================ */
.svm-arka-vurgu { background: var(--svm-zemin-2); }
.svm-arka-koyu { background: var(--svm-koyu); color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .svm-bolum { padding: var(--s-16) 0; }
    .svm-bolum-baslik { margin-bottom: var(--s-10); }
    .svm-hero { padding: var(--s-20) 0 var(--s-16); }
    .svm-ustbar { display: none; }
    .svm-nav .nav-link { padding: var(--s-3) var(--s-4) !important; }
    .svm-altbilgi { padding: var(--s-16) 0 var(--s-6); }
}
@media (max-width: 767px) {
    .svm-hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
    .svm-hero .ctalar { flex-direction: column; align-items: stretch; }
    .svm-hero .svm-guven-cubugu .logolar { justify-content: center; }
    .svm-stat-band { padding: var(--s-12) 0; }
    .svm-cta-band { padding: var(--s-16) 0; }
    .svm-wisecp-banner { padding: var(--s-10) var(--s-6); }
    .svm-fiyat-kart.populer { transform: none; }
    .svm-altbilgi .alt-cizgi { text-align: center; justify-content: center; }
}

/* ============================================================
   AUTH FORMLARI (giris/kayit)
   ============================================================ */
.svm-auth-kap {
    min-height: calc(100vh - 80px);
    display: grid; place-items: center;
    background: linear-gradient(180deg, var(--svm-zemin-2) 0%, var(--svm-zemin) 100%);
    padding: var(--s-12) var(--s-4);
}
.svm-auth-kart {
    background: #fff;
    border: 1px solid var(--svm-cizgi);
    border-radius: var(--r-xl);
    padding: var(--s-12);
    width: 100%; max-width: 440px;
    box-shadow: var(--sh-lg);
}
.svm-auth-kart h1 { font-size: 1.6rem; text-align: center; margin-bottom: var(--s-2); }
.svm-auth-kart .alt-yazi { text-align: center; color: var(--svm-yazi-sonuk); margin-bottom: var(--s-8); font-size: 0.94rem; }
.svm-auth-kart label { display: block; font-weight: 600; font-size: 0.86rem; color: var(--svm-yazi); margin-bottom: var(--s-2); }
.svm-auth-kart input[type=text], .svm-auth-kart input[type=email], .svm-auth-kart input[type=password], .svm-auth-kart input[type=tel] {
    width: 100%; padding: var(--s-3) var(--s-4);
    border: 1.5px solid var(--svm-cizgi);
    border-radius: var(--r-md);
    font-size: 0.95rem; font-family: inherit;
    transition: all var(--t-fast);
    margin-bottom: var(--s-4);
}
.svm-auth-kart input:focus {
    outline: none; border-color: var(--svm-vurgu);
    box-shadow: 0 0 0 4px var(--svm-vurgu-soluk);
}
.svm-auth-kart button { width: 100%; margin-top: var(--s-2); }