/* ── Mobil dokunma highlight kaldır ────────────────────────── */
* {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}
a, button, [role="button"], input, select, textarea {
  outline: none;
  -webkit-tap-highlight-color: transparent !important;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
  background-color: inherit;
}
/* ═══════════════════════════════════════════════════════════
   BULUTATOM — SHARED BASE CSS
   ═══════════════════════════════════════════════════════════ */
:root {
  --header-h: 72px;
  --obsidian:   #080c10; --obsidian-2: #0d1117; --obsidian-3: #141920;
  --obsidian-4: #1c2330; --obsidian-5: #252e3d; --obsidian-6: #2f3a4d;
  --emerald: #00e676; --emerald-dim: #00c853;
  --emerald-glow: rgba(0,230,118,.15); --emerald-border: rgba(0,230,118,.25);
  --bone: #f0ede8; --bone-dim: #c8c4bc; --bone-muted: #8a8680;
  --azure: #0ea5e9; --azure-glow: rgba(14,165,233,.15);
  --amber: #f59e0b; --rose: #f43f5e;
  --font-display:'Syne',sans-serif; --font-body:'DM Sans',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;
  --s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--s24:6rem;--s32:8rem;
  --r1:4px;--r2:8px;--r3:12px;--r4:16px;--r5:24px;--r6:32px;--r-full:9999px;
  --ease-smooth:cubic-bezier(.4,0,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(0,0,.2,1);
  --dur-fast:150ms;--dur-base:250ms;--dur-slow:400ms;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:0 8px 40px rgba(0,0,0,.6); --shadow-xl:0 20px 80px rgba(0,0,0,.7);
  --shadow-emerald:0 0 30px rgba(0,230,118,.2); --shadow-emerald-lg:0 0 60px rgba(0,230,118,.3);
}
[data-theme="light"] {
  --obsidian:#f8f9fb;--obsidian-2:#f0f2f5;--obsidian-3:#e8ebf0;
  --obsidian-4:#dde1ea;--obsidian-5:#c8cdd8;--obsidian-6:#b0b7c6;
  --bone:#1a1f2e;--bone-dim:#3d4558;--bone-muted:#6b7280;
  --emerald:#00a854;--emerald-dim:#008f45;
  --emerald-glow:rgba(0,168,84,.12);--emerald-border:rgba(0,168,84,.3);
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 16px rgba(0,0,0,.1);--shadow-lg:0 8px 40px rgba(0,0,0,.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body{font-family:var(--font-body);background:var(--obsidian);color:var(--bone);line-height:1.6;overflow-x:hidden;transition:background var(--dur-slow),color var(--dur-slow);}
::selection{background:var(--emerald);color:var(--obsidian);}
::-webkit-scrollbar{width:6px;} ::-webkit-scrollbar-track{background:var(--obsidian-2);}
::-webkit-scrollbar-thumb{background:var(--obsidian-5);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--emerald);}
a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
input,textarea,select{font-family:inherit;}

/* --- TYPOGRAPHY --- */
.t-display-xl{font-family:var(--font-display);font-size:clamp(3rem,8vw,7rem);font-weight:800;line-height:.95;letter-spacing:-.03em;}
.t-display-lg{font-family:var(--font-display);font-size:clamp(2.25rem,5vw,4.5rem);font-weight:800;line-height:1;letter-spacing:-.03em;}
.t-display-md{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.75rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;}
.t-display-sm{font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.75rem);font-weight:700;line-height:1.2;letter-spacing:-.02em;}
.t-body-lg{font-size:1.125rem;line-height:1.75;font-weight:300;}
.t-body{font-size:1rem;line-height:1.7;}
.t-body-sm{font-size:.875rem;line-height:1.6;}
.t-mono{font-family:var(--font-mono);font-size:.8125rem;}
.t-label{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;}
.text-emerald{color:var(--emerald);} .text-muted{color:var(--bone-muted);} .text-dim{color:var(--bone-dim);}
.grad-text{background:linear-gradient(135deg,var(--emerald) 0%,#64ffda 40%,var(--azure) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* --- LAYOUT --- */
.container{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--s8);}
.container-sm{max-width:960px;margin:0 auto;padding:0 var(--s8);}
.container-xs{max-width:720px;margin:0 auto;padding:0 var(--s8);}
.section{padding:var(--s32) 0;position:relative;overflow:hidden;}
.section-sm{padding:var(--s20) 0;position:relative;overflow:hidden;}
.grid{display:grid;gap:var(--s6);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.flex{display:flex;} .flex-center{display:flex;align-items:center;justify-content:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.items-center{align-items:center;}
.gap-2{gap:var(--s2);} .gap-3{gap:var(--s3);} .gap-4{gap:var(--s4);} .gap-6{gap:var(--s6);} .gap-8{gap:var(--s8);}
.text-center{text-align:center;} .w-full{width:100%;}

/* --- BUTTONS --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-family:var(--font-display);font-weight:600;font-size:.9375rem;letter-spacing:-.01em;padding:.8125rem 1.75rem;border-radius:var(--r2);border:1.5px solid transparent;transition:all var(--dur-base) var(--ease-smooth);white-space:nowrap;position:relative;overflow:hidden;cursor:pointer;text-decoration:none;}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);transform:translateX(-100%);transition:transform .5s ease;}
.btn:hover::after{transform:translateX(100%);}
.btn-primary{background:var(--emerald);color:var(--obsidian);border-color:var(--emerald);box-shadow:0 0 0 0 var(--emerald-glow);}
.btn-primary:hover{background:#1aff89;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,230,118,.35);}
.btn-ghost{background:transparent;color:var(--bone);border-color:var(--obsidian-6);}
.btn-ghost:hover{border-color:var(--emerald-border);color:var(--emerald);background:var(--emerald-glow);transform:translateY(-2px);}
.btn-dark{background:var(--obsidian-4);color:var(--bone);border-color:var(--obsidian-5);}
.btn-dark:hover{background:var(--obsidian-5);border-color:var(--obsidian-6);transform:translateY(-2px);}
.btn-sm{padding:.5rem 1.125rem;font-size:.875rem;}
.btn-lg{padding:1.0625rem 2.25rem;font-size:1rem;}
.btn-xl{padding:1.25rem 2.75rem;font-size:1.0625rem;}

/* --- CARDS --- */
.card{background:var(--obsidian-3);border:1px solid var(--obsidian-5);border-radius:var(--r4);padding:var(--s8);position:relative;overflow:hidden;transition:border-color var(--dur-base),transform var(--dur-base),box-shadow var(--dur-base);}
.card::before{content:'';position:absolute;inset:0;background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(0,230,118,.04) 0%,transparent 70%);opacity:0;transition:opacity var(--dur-base);pointer-events:none;}
.card:hover::before{opacity:1;}
.card:hover{border-color:var(--emerald-border);transform:translateY(-4px);box-shadow:var(--shadow-lg),0 0 0 1px var(--emerald-border);}

/* --- BADGES --- */
.badge{display:inline-flex;align-items:center;gap:var(--s2);padding:.3125rem .75rem;border-radius:var(--r-full);font-size:.75rem;font-weight:500;letter-spacing:.02em;}
.badge-emerald{background:var(--emerald-glow);color:var(--emerald);border:1px solid var(--emerald-border);}
.badge-azure{background:var(--azure-glow);color:var(--azure);border:1px solid rgba(14,165,233,.3);}
.badge-amber{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.badge-muted{background:var(--obsidian-4);color:var(--bone-muted);border:1px solid var(--obsidian-5);}

/* --- INPUTS --- */
.input{width:100%;background:var(--obsidian-3);border:1.5px solid var(--obsidian-5);border-radius:var(--r2);padding:.875rem 1.25rem;color:var(--bone);font-family:var(--font-body);font-size:1rem;transition:border-color var(--dur-fast),box-shadow var(--dur-fast);outline:none;}
.input::placeholder{color:var(--bone-muted);}
.input:focus{border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-glow);}
textarea.input{resize:vertical;min-height:140px;line-height:1.6;}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238a8680'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1rem;padding-right:2.5rem;cursor:pointer;}
select.input option{background:var(--obsidian-3);}
.label{display:block;font-size:.875rem;font-weight:500;color:var(--bone-dim);margin-bottom:var(--s2);}
.form-group{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);}

/* --- DOT LIVE --- */
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 0 rgba(0,230,118,.4);animation:ping 2s infinite;}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(0,230,118,.4);}70%{box-shadow:0 0 0 8px rgba(0,230,118,0);}100%{box-shadow:0 0 0 0 rgba(0,230,118,0);}}

/* --- DIVIDER --- */
.divider{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--obsidian-5) 20%,var(--obsidian-5) 80%,transparent);margin:var(--s8) 0;}

/* --- SECTION HEADER --- */
.section-header{text-align:center;max-width:720px;margin:0 auto var(--s16);}
.section-header .t-label{color:var(--emerald);margin-bottom:var(--s4);display:block;}
.section-header .t-display-md{color:var(--bone);margin-bottom:var(--s4);}
.section-header .t-body-lg{color:var(--bone-muted);}

/* --- PROGRESS --- */
.progress{width:100%;height:4px;background:var(--obsidian-5);border-radius:var(--r-full);overflow:hidden;}
.progress-fill{height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--emerald),var(--azure));}

/* --- BREADCRUMB --- */
.breadcrumb{display:flex;align-items:center;gap:var(--s2);font-size:.875rem;color:var(--bone-muted);padding:var(--s5) 0;flex-wrap:wrap;}
.breadcrumb a{color:var(--bone-muted);transition:color var(--dur-fast);}
.breadcrumb a:hover{color:var(--emerald);}
.breadcrumb .sep{opacity:.4;}
.breadcrumb .current{color:var(--bone);}

/* --- PAGE HERO --- */
.page-hero{padding:calc(68px + var(--s16)) 0 var(--s16);position:relative;overflow:hidden;}
.page-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 0%,rgba(0,230,118,.08) 0%,transparent 70%);}
.page-hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--obsidian-3) 1px,transparent 1px),linear-gradient(90deg,var(--obsidian-3) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 0%,black 20%,transparent 80%);opacity:.3;}

/* --- HEADER --- */
#header{position:fixed;top:0;left:0;right:0;z-index:900;transition:background var(--dur-base),backdrop-filter var(--dur-base),border-color var(--dur-base);}
.header-inner{display:flex;align-items:center;gap:var(--s6);height:68px;border-bottom:1px solid transparent;transition:border-color var(--dur-base);}
#header.scrolled .header-inner{border-bottom-color:var(--obsidian-4);}
#header.scrolled{background:rgba(8,12,16,.88);backdrop-filter:blur(20px) saturate(180%);}
[data-theme="light"] #header.scrolled{background:rgba(248,249,251,.88);}
.logo{display:flex;align-items:center;gap:var(--s3);font-family:var(--font-display);font-weight:800;font-size:1.375rem;letter-spacing:-.04em;color:var(--bone);text-decoration:none;flex-shrink:0;}
.logo-mark{width:32px;height:32px;background:var(--emerald);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;color:var(--obsidian);position:relative;overflow:hidden;}
.logo-mark::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 60%);}
.nav-primary{display:flex;align-items:center;gap:var(--s1);flex:1;}
.nav-link{display:flex;align-items:center;gap:var(--s2);padding:.5rem .875rem;font-size:.9rem;font-weight:400;color:var(--bone-dim);border-radius:var(--r2);transition:color var(--dur-fast),background var(--dur-fast);white-space:nowrap;}
.nav-link:hover{color:var(--bone);background:var(--obsidian-4);}
.nav-link.active{color:var(--emerald);}

/* Desktop nav dropdown */
.dropdown-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r3);cursor:pointer;transition:background var(--dur-fast);color:var(--bone-dim);}
.dropdown-item:hover{background:var(--obsidian-4);color:var(--bone);}
.dropdown-item-icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--obsidian-4);border-radius:var(--r2);color:var(--bone-dim);}
.dropdown-item:hover .dropdown-item-icon{background:var(--obsidian-5);color:var(--emerald);}
.nav-sub-link-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--bone-muted);}
.nav-sub-link:hover .nav-sub-link-icon{color:var(--emerald);}
.nav-cat-emoji{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--bone-dim);}
.nav-mobile-link svg{vertical-align:middle;margin-right:var(--s2);}
.dropdown-item-text{font-size:.8125rem;color:var(--bone-muted);margin-top:1px;}
.nav-actions{display:flex;align-items:center;gap:var(--s3);flex-shrink:0;}
.theme-btn{width:40px;height:40px;border-radius:var(--r2);background:var(--obsidian-4);border:1px solid var(--obsidian-5);display:flex;align-items:center;justify-content:center;color:var(--bone-dim);font-size:1rem;transition:all var(--dur-fast);}
.theme-btn:hover{border-color:var(--emerald-border);color:var(--emerald);background:var(--emerald-glow);}
.hamburger{display:none;width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:var(--r2);background:var(--obsidian-4);border:1px solid var(--obsidian-5);cursor:pointer;}
.hamburger span{display:block;width:20px;height:2px;background:var(--bone);border-radius:1px;transition:all var(--dur-base) var(--ease-smooth);}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
/* ── MOBILE NAV ── */
.nav-mobile{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;background:var(--obsidian-2);padding:var(--s5) var(--s4);overflow-y:auto;flex-direction:column;gap:0;z-index:899;}
.nav-mobile.open{display:flex;}
.nav-cat{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s4);border-radius:var(--r3);color:var(--bone);font-size:1rem;font-weight:600;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);user-select:none;margin-bottom:2px;font-family:var(--font-display);letter-spacing:-.01em;}
.nav-cat:hover{background:var(--obsidian-4);color:var(--emerald);}
.nav-cat.open{color:var(--emerald);background:var(--obsidian-4);}
.nav-cat-left{display:flex;align-items:center;gap:var(--s3);}
.nav-cat-emoji{font-size:1rem;}
.nav-cat-icon{width:26px;height:26px;border-radius:var(--r2);background:var(--obsidian-5);display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:transform var(--dur-base) var(--ease-spring),background var(--dur-fast),color var(--dur-fast);flex-shrink:0;color:var(--bone-muted);}
.nav-cat.open .nav-cat-icon{transform:rotate(90deg);background:var(--emerald-glow);color:var(--emerald);}
.nav-sub{display:none;flex-direction:column;gap:2px;padding:var(--s1) 0 var(--s3) var(--s4);border-left:2px solid var(--obsidian-5);margin:0 0 var(--s2) var(--s5);}
.nav-sub.open{display:flex;}
.nav-sub-link{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s3);border-radius:var(--r2);color:var(--bone-muted);font-size:.875rem;transition:background var(--dur-fast),color var(--dur-fast);text-decoration:none;}
.nav-sub-link:hover{background:var(--obsidian-4);color:var(--emerald);}
.nav-sub-link-icon{width:32px;height:32px;border-radius:var(--r2);background:var(--obsidian-4);border:1px solid var(--obsidian-5);display:flex;align-items:center;justify-content:center;font-size:.875rem;flex-shrink:0;}
.nav-sub-link-title{font-weight:500;color:var(--bone);font-size:.875rem;line-height:1.2;display:block;}
.nav-sub-link:hover .nav-sub-link-title{color:var(--emerald);}
.nav-sub-link-desc{font-size:.7188rem;color:var(--bone-muted);margin-top:1px;display:block;}
.nav-mobile-link{padding:var(--s4) var(--s4);border-radius:var(--r3);color:var(--bone-dim);font-size:1rem;font-weight:500;transition:background var(--dur-fast),color var(--dur-fast);display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;text-decoration:none;}
.nav-mobile-link:hover,.nav-mobile-link.active{background:var(--obsidian-4);color:var(--emerald);}
.nav-mobile-sep{height:1px;background:var(--obsidian-4);margin:var(--s3) 0;}

/* --- FOOTER --- */
footer{background:var(--obsidian-2);border-top:1px solid var(--obsidian-4);padding:var(--s20) 0 var(--s10);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:var(--s12);margin-bottom:var(--s16);}
.footer-brand p{font-size:.9375rem;color:var(--bone-muted);line-height:1.7;margin:var(--s4) 0 var(--s6);max-width:300px;}
.footer-social{display:flex;gap:var(--s3);}
.social-btn{width:38px;height:38px;border-radius:var(--r2);background:var(--obsidian-4);border:1px solid var(--obsidian-5);display:flex;align-items:center;justify-content:center;color:var(--bone-muted);font-size:.875rem;transition:all var(--dur-fast);cursor:pointer;}
.social-btn:hover{background:var(--emerald-glow);border-color:var(--emerald-border);color:var(--emerald);transform:translateY(-2px);}
.footer-col h5{font-family:var(--font-display);font-size:.875rem;font-weight:700;letter-spacing:-.01em;color:var(--bone);margin-bottom:var(--s5);}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:var(--s3);}
.footer-links a{font-size:.9rem;color:var(--bone-muted);display:flex;align-items:center;gap:var(--s2);transition:color var(--dur-fast),gap var(--dur-fast);}
.footer-links a:hover{color:var(--emerald);gap:var(--s3);}
.footer-bottom{border-top:1px solid var(--obsidian-4);padding-top:var(--s8);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);}
.footer-bottom-links{display:flex;gap:var(--s6);}
.footer-bottom-links a{font-size:.875rem;color:var(--bone-muted);transition:color var(--dur-fast);}
.footer-bottom-links a:hover{color:var(--bone);}
.status-indicator{display:flex;align-items:center;gap:var(--s2);font-size:.8125rem;color:var(--emerald);}

/* --- REVEAL --- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.1s;} .reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;} .reveal-delay-4{transition-delay:.4s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* --- FAQ --- */
.faq-list{display:flex;flex-direction:column;gap:var(--s3);}
.faq-item{background:var(--obsidian-3);border:1px solid var(--obsidian-5);border-radius:var(--r3);overflow:hidden;transition:border-color var(--dur-base);}
.faq-item.open{border-color:var(--emerald-border);}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:var(--s5) var(--s6);cursor:pointer;font-weight:500;font-size:1rem;color:var(--bone);transition:color var(--dur-fast);gap:var(--s4);user-select:none;}
.faq-question:hover,.faq-item.open .faq-question{color:var(--emerald);}
.faq-icon{width:28px;height:28px;border-radius:var(--r2);background:var(--obsidian-5);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem;transition:background var(--dur-fast),transform var(--dur-base) var(--ease-spring);}
.faq-item.open .faq-icon{background:var(--emerald-glow);transform:rotate(45deg);color:var(--emerald);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-smooth),padding .3s;font-size:.9375rem;color:var(--bone-muted);line-height:1.75;padding:0 var(--s6);}
.faq-item.open .faq-answer{max-height:500px;padding:0 var(--s6) var(--s6);}

/* --- LIVE CHAT --- */
.live-chat-btn{position:fixed;bottom:var(--s8);right:var(--s8);z-index:800;background:var(--emerald);color:var(--obsidian);border-radius:var(--r-full);padding:.875rem 1.5rem;font-family:var(--font-display);font-size:.9375rem;font-weight:700;display:flex;align-items:center;gap:var(--s3);cursor:pointer;box-shadow:var(--shadow-emerald-lg);transition:all var(--dur-base) var(--ease-spring);letter-spacing:-.01em;border:none;}
.live-chat-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 50px rgba(0,230,118,.45);}

/* --- TABLE --- */
.data-table{width:100%;border-collapse:collapse;}
.data-table thead th{padding:var(--s4) var(--s6);text-align:left;font-size:.8125rem;color:var(--bone-muted);font-family:var(--font-mono);border-bottom:1px solid var(--obsidian-4);letter-spacing:.05em;}
.data-table tbody tr{border-bottom:1px solid var(--obsidian-4);transition:background var(--dur-fast);}
.data-table tbody tr:last-child{border-bottom:none;}
.data-table tbody tr:hover{background:var(--obsidian-4);}
.data-table td{padding:var(--s5) var(--s6);font-size:.9rem;color:var(--bone-dim);vertical-align:middle;}
.data-table td:first-child{color:var(--bone);font-weight:500;}
.data-table td.hl{color:var(--emerald);font-family:var(--font-mono);font-size:.875rem;}

/* --- PRICING CARD --- */
.pricing-card{background:var(--obsidian-3);border:1px solid var(--obsidian-5);border-radius:var(--r5);padding:var(--s8);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color var(--dur-base),transform var(--dur-base),box-shadow var(--dur-base);}
.pricing-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--obsidian-6),transparent);}
.pricing-card.popular{border-color:var(--emerald);background:linear-gradient(160deg,var(--obsidian-3) 0%,rgba(0,230,118,.04) 100%);box-shadow:var(--shadow-emerald);transform:scale(1.03);}
.pricing-card.popular::before{background:linear-gradient(90deg,transparent,var(--emerald),transparent);}
.pricing-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);}
.pricing-card.popular:hover{transform:scale(1.03) translateY(-6px);box-shadow:var(--shadow-emerald-lg);}
.plan-name{font-family:var(--font-display);font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin-bottom:var(--s2);}
.plan-desc{font-size:.875rem;color:var(--bone-muted);line-height:1.5;margin-bottom:var(--s6);}
.plan-price{font-family:var(--font-display);font-size:3rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--bone);margin-bottom:var(--s6);}
.plan-price .currency{font-size:1.25rem;font-weight:600;vertical-align:top;margin-top:.5rem;color:var(--bone-dim);display:inline-block;margin-right:2px;}
.plan-price .period{font-size:.875rem;color:var(--bone-muted);font-weight:400;margin-left:4px;}
.plan-features{list-style:none;margin-bottom:var(--s8);flex:1;display:flex;flex-direction:column;gap:var(--s3);}
.plan-feature{display:flex;align-items:flex-start;gap:var(--s3);font-size:.9rem;color:var(--bone-dim);}
.feature-check{width:18px;height:18px;border-radius:50%;background:var(--emerald-glow);border:1px solid var(--emerald-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.feature-check svg{width:10px;height:10px;stroke:var(--emerald);}
.plan-feature.dim .feature-check{background:var(--obsidian-5);border-color:var(--obsidian-6);}
.plan-feature.dim .feature-check svg{stroke:var(--bone-muted);}
.plan-feature.dim{opacity:.5;}
.plan-cta{margin-top:auto;}

/* --- TABS --- */
.tab-list{display:flex;background:var(--obsidian-3);border:1px solid var(--obsidian-5);border-radius:var(--r3);padding:4px;gap:4px;width:fit-content;}
.tab-btn{padding:.5rem 1.25rem;border-radius:var(--r2);font-size:.9375rem;font-weight:500;color:var(--bone-muted);cursor:pointer;transition:all var(--dur-fast);}
.tab-btn.active{background:var(--obsidian-6);color:var(--bone);}

/* --- TIMELINE --- */
.timeline{display:flex;flex-direction:column;gap:0;}
.timeline-item{display:flex;gap:var(--s6);position:relative;padding-bottom:var(--s8);}
.timeline-item:last-child{padding-bottom:0;}
.timeline-line{display:flex;flex-direction:column;align-items:center;flex-shrink:0;}
.timeline-dot{width:12px;height:12px;border-radius:50%;background:var(--emerald);border:2px solid var(--obsidian-3);box-shadow:0 0 0 3px var(--emerald-border);flex-shrink:0;margin-top:4px;}
.timeline-track{width:2px;flex:1;background:var(--obsidian-5);margin-top:var(--s2);}
.timeline-item:last-child .timeline-track{display:none;}
.timeline-content{flex:1;}
.timeline-date{font-family:var(--font-mono);font-size:.75rem;color:var(--emerald);margin-bottom:var(--s2);}
.timeline-title{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--bone);margin-bottom:var(--s2);}
.timeline-desc{font-size:.9rem;color:var(--bone-muted);line-height:1.65;}

/* --- TEAM CARD --- */
.team-card{background:var(--obsidian-3);border:1px solid var(--obsidian-5);border-radius:var(--r4);padding:var(--s6);text-align:center;transition:all var(--dur-base);}
.team-card:hover{border-color:var(--obsidian-6);transform:translateY(-4px);}
.team-avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.5rem;font-weight:800;margin:0 auto var(--s4);position:relative;}
.team-avatar::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(135deg,var(--emerald),var(--azure));z-index:-1;}
.team-name{font-family:var(--font-display);font-size:1.0625rem;font-weight:700;color:var(--bone);margin-bottom:var(--s1);}
.team-role{font-size:.8125rem;color:var(--emerald);font-family:var(--font-mono);margin-bottom:var(--s3);}
.team-bio{font-size:.875rem;color:var(--bone-muted);line-height:1.6;}

/* --- STATS STRIP --- */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--obsidian-4);border:1px solid var(--obsidian-4);border-radius:var(--r4);overflow:hidden;}
.stat-box{background:var(--obsidian-2);padding:var(--s6) var(--s8);text-align:center;}
.stat-num{font-family:var(--font-display);font-size:2rem;font-weight:800;letter-spacing:-.04em;color:var(--emerald);line-height:1;margin-bottom:var(--s2);}
.stat-lbl{font-size:.8125rem;color:var(--bone-muted);}

/* --- RESPONSIVE --- */
@media(max-width:1200px){.footer-grid{grid-template-columns:1fr 1fr 1fr;}}
@media(max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr);}.grid-4{grid-template-columns:repeat(2,1fr);}.form-row{grid-template-columns:1fr;}}
@media(max-width:768px){
  .nav-primary,.nav-actions .btn:not(.theme-btn){display:none;} .hamburger{display:flex;}
  .container{padding:0 var(--s5);} .section{padding:var(--s20) 0;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s8);}
  .footer-bottom{flex-direction:column;text-align:center;} .footer-bottom-links{justify-content:center;}
  .live-chat-btn span:last-child{display:none;} .live-chat-btn{padding:.875rem;border-radius:50%;}
  .pricing-card.popular{transform:none;}
}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;}.stats-strip{grid-template-columns:repeat(2,1fr);}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ============================================================
   KAPSAMLI MOBİL RESPONSIVE — Tüm sayfalar
   ============================================================ */

/* ---- TABLET: 1024px ---- */
@media (max-width: 1024px) {
  /* Yasal sayfa sidebar grid */
  [style*="grid-template-columns:240px 1fr"],
  [style*="grid-template-columns: 240px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 4 kolonlu grid → 2 kolon */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Hosting/About 1fr 1fr yan yana bloklar */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* TOC sticky kaldır */
  [style*="position:sticky"][style*="top:calc(68px"] {
    position: relative !important;
    top: auto !important;
  }
  /* Fiyat kartları */
  .pricing-card.popular { transform: none !important; }
  /* Hero floating card */
  .floating-card { display: none !important; }
  /* VDS 4'lü kart grid */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Testimonials */
  .testi-card { flex: 0 0 calc(50% - 10px) !important; }
  /* Blog grid */
  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Featured blog */
  .blog-featured { grid-template-columns: 1fr !important; }
  .blog-featured-img { min-height: 200px !important; }
}

/* ---- MOBİL: 768px ---- */
@media (max-width: 768px) {
  :root {
    --s8: 1.5rem;
    --s10: 2rem;
    --s12: 2.5rem;
    --s16: 3rem;
    --s20: 3.5rem;
    --s24: 4rem;
    --s32: 5rem;
  }

  /* ===== HEADER ===== */
  .nav-primary { display: none !important; }
  .nav-actions .btn:not(.theme-btn):not(.hamburger) { display: none !important; }
  .hamburger { display: flex !important; }
  .header-inner { padding: 0 var(--s4) !important; }

  /* ===== CONTAINERS ===== */
  .container,
  .container-sm,
  .container-xs { padding: 0 var(--s4) !important; }

  /* ===== SECTIONS ===== */
  .section { padding: var(--s16) 0 !important; }
  .section-sm { padding: var(--s12) 0 !important; }
  .page-hero { padding-top: calc(68px + var(--s10)) !important; }

  /* ===== TÜM INLINE GRID'LERİ TEK KOLONA AL ===== */
  [style*="display:grid"],
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }
  /* 2 kolon kalabilecek istisnalar */
  .stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .metric-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ===== TYPOGRAPHY ===== */
  .t-display-xl { font-size: 2.25rem !important; }
  .t-display-lg { font-size: 2rem !important; }
  .t-display-md { font-size: 1.5rem !important; }
  .t-display-sm { font-size: 1.25rem !important; }
  .hero-title   { font-size: 2.25rem !important; }
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.5rem !important; }

  /* ===== HERO ===== */
  .hero-orb { display: none !important; }
  .floating-card { display: none !important; }
  .hero-actions { flex-direction: column !important; gap: var(--s3) !important; }
  .hero-actions .btn { width: 100% !important; justify-content: center !important; }
  .hero-trust { flex-direction: column !important; align-items: flex-start !important; gap: var(--s3) !important; }
  .trust-divider { display: none !important; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-stat-num { font-size: 1.5rem !important; }
  .domain-search-form { flex-direction: column !important; }
  .domain-search-form .btn { width: 100% !important; }
  .ext-chips { gap: var(--s2) !important; }

  /* ===== BUTTONS ===== */
  .btn-xl { padding: 0.875rem 1.5rem !important; font-size: 1rem !important; }
  .btn-lg { padding: 0.75rem 1.25rem !important; font-size: .9375rem !important; }
  .cta-actions { flex-direction: column !important; }
  .cta-actions .btn { width: 100% !important; justify-content: center !important; }

  /* ===== BENTO ===== */
  .bento-grid { display: flex !important; flex-direction: column !important; }
  .bento-item { width: 100% !important; }
  .bento-1,.bento-2,.bento-3,.bento-4,.bento-5,.bento-6,.bento-7 {
    grid-column: span 1 !important;
  }
  .uptime-ticks { max-width: 100% !important; flex-wrap: wrap !important; }

  /* ===== PRICING ===== */
  .pricing-grid { grid-template-columns: 1fr !important; }
  .pricing-card { transform: none !important; }
  .pricing-card.popular { transform: none !important; box-shadow: var(--shadow-emerald) !important; }
  .tab-list { flex-wrap: wrap !important; justify-content: center !important; width: 100% !important; }

  /* ===== CARDS ===== */
  .card { padding: var(--s5) !important; }
  .vds-card { padding: var(--s5) !important; }

  /* ===== GAME GRID ===== */
  .game-grid { grid-template-columns: 1fr !important; }
  .game-card { padding: var(--s5) !important; }

  /* ===== TESTIMONIALS ===== */
  .testi-card { flex: 0 0 100% !important; }
  .testimonials-track { gap: var(--s4) !important; }

  /* ===== BLOG ===== */
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-featured { display: flex !important; flex-direction: column !important; }
  .blog-featured-img { min-height: 160px !important; }
  .blog-featured-body { padding: var(--s5) !important; }

  /* ===== SPECS TABLE ===== */
  .specs-card,.data-table-wrap { overflow-x: auto !important; }
  .data-table { min-width: 560px !important; font-size: .8125rem !important; }
  .data-table thead th,
  .data-table td { padding: var(--s3) var(--s4) !important; }

  /* ===== FAQ ===== */
  .faq-list { gap: var(--s2) !important; }
  [style*="display:grid;grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ===== FORMS ===== */
  .form-row { grid-template-columns: 1fr !important; }

  /* ===== CONTACT ===== */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:var(--s5)"] {
    grid-template-columns: 1fr !important;
  }

  /* ===== TLD CARDS ===== */
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ===== TEAM ===== */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ===== FOOTER ===== */
  footer { padding: var(--s12) 0 var(--s8) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: var(--s6) !important; }
  .footer-brand p { max-width: 100% !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: var(--s3) !important; }
  .footer-bottom-links { justify-content: center !important; flex-wrap: wrap !important; gap: var(--s3) !important; }

  /* ===== LIVE CHAT ===== */
  .live-chat-btn { padding: 0.875rem !important; border-radius: 50% !important; bottom: var(--s5) !important; right: var(--s5) !important; }
  .live-chat-btn span:last-child { display: none !important; }

  /* ===== SECTION HEADER ===== */
  .section-header { margin-bottom: var(--s10) !important; }
  .section-header .t-body-lg { font-size: 1rem !important; }

  /* ===== CTA ===== */
  .cta-block { padding: var(--s10) var(--s5) !important; border-radius: var(--r4) !important; }
  .cta-title  { font-size: 1.75rem !important; }

  /* ===== TIMELINE ===== */
  .timeline-item { gap: var(--s4) !important; }

  /* ===== STATS ===== */
  .stat-num { font-size: 1.5rem !important; }

  /* ===== HAKKIMIZDA ===== */
  .team-card { padding: var(--s5) !important; }
  .team-avatar { width: 64px !important; height: 64px !important; }

  /* ===== YASAL SAYFALAR ===== */
  .legal-content h2 { font-size: 1.1875rem !important; margin-top: var(--s8) !important; }
  .legal-content h3 { font-size: 1rem !important; }

  /* ===== VDS OS PILLS ===== */
  [style*="display:flex;flex-wrap:wrap;gap:var(--s3)"] {
    gap: var(--s2) !important;
  }
  .os-pill { font-size: .75rem !important; padding: .25rem .625rem !important; }

  /* ===== FLOATING FEATURES STRIP ===== */
  [style*="display:flex;flex-wrap:wrap;gap:var(--s6);justify-content:center"] {
    gap: var(--s3) !important;
  }
  [style*="width:1px;height:16px;background:var(--obsidian-5)"] {
    display: none !important;
  }
}

/* ---- KÜÇÜK MOBİL: 480px ---- */
@media (max-width: 480px) {
  :root {
    --s8: 1.25rem;
    --s10: 1.75rem;
    --s12: 2rem;
    --s16: 2.5rem;
  }

  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr !important; }

  /* TLD fiyat kartları tek kolon */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .metric-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .plan-price { font-size: 2.25rem !important; }
  .vds-card { padding: var(--s4) !important; }

  /* Blog filter chips */
  [style*="display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s10)"] {
    gap: var(--s2) !important;
  }

  /* Contact channels grid */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* SSS iki kolon → tek */
  [style*="display:grid;grid-template-columns:1fr 1fr;gap:var(--s12)"] {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ---- TOUCH CİHAZLAR ---- */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .nav-mobile-link { min-height: 48px; }
  .faq-question { min-height: 48px; }
  .ext-chip { min-height: 36px; padding: .5rem .875rem; }
  .filter-btn { min-height: 36px; }
  .toc-a { min-height: 40px; display: flex; align-items: center; }
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   GRID CLASS RESPONSIVE OVERRIDES (class tabanlı)
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr !important; }
}

/* Yasal sayfa sidebar grid */
.legal-grid {
  grid-template-columns: 240px 1fr;
  gap: var(--s12);
}
@media (max-width: 1024px) {
  .legal-grid { grid-template-columns: 1fr !important; gap: var(--s8) !important; }
  .legal-grid [style*="position:sticky"] { position: relative !important; top: auto !important; }
}
@media (max-width: 768px) {
  .legal-grid { grid-template-columns: 1fr !important; gap: var(--s6) !important; }
}

/* TLD grid */
.tld-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s4);
}
@media (max-width: 1024px) { .tld-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 768px)  { .tld-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 480px)  { .tld-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ═══════════════════════════════════════════════════════════
   INDEX PAGE — EXTENDED STYLES
   ═══════════════════════════════════════════════════════════ */
/* ───── LIGHT THEME ───── */
[data-theme="light"] {
  --obsidian: #f8f9fb;
  --obsidian-2: #f0f2f5;
  --obsidian-3: #e8ebf0;
  --obsidian-4: #dde1ea;
  --obsidian-5: #c8cdd8;
  --obsidian-6: #b0b7c6;
  --bone: #1a1f2e;
  --bone-dim: #3d4558;
  --bone-muted: #6b7280;
  --emerald: #00a854;
  --emerald-dim: #008f45;
  --emerald-glow: rgba(0, 168, 84, 0.12);
  --emerald-border: rgba(0, 168, 84, 0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--obsidian);
  color: var(--bone);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background var(--dur-slow) var(--ease-smooth), color var(--dur-slow) var(--ease-smooth);
}

::selection { background: var(--emerald); color: var(--obsidian); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--obsidian-2); }
::-webkit-scrollbar-thumb { background: var(--obsidian-5); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--emerald); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

.t-display-xl {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.t-display-md {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.t-display-sm {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.t-body-lg { font-size: 1.125rem; line-height: 1.75; font-weight: 300; }
.t-body { font-size: 1rem; line-height: 1.7; }
.t-body-sm { font-size: 0.875rem; line-height: 1.6; }
.t-mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.t-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}

.text-emerald { color: var(--emerald); }
.text-muted { color: var(--bone-muted); }
.text-dim { color: var(--bone-dim); }

/* Gradient text */
.grad-text {
  background: linear-gradient(135deg, var(--emerald) 0%, #64ffda 40%, var(--azure) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--s8);
}
.container-sm { max-width: 960px; margin: 0 auto; padding: 0 var(--s8); }
.container-xs { max-width: 720px; margin: 0 auto; padding: 0 var(--s8); }

.section { padding: var(--s32) 0; position: relative; overflow: hidden; }
.section-sm { padding: var(--s20) 0; position: relative; overflow: hidden; }

.grid { display: grid; gap: var(--s6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.items-center { align-items: center; }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }
.gap-6 { gap: var(--s6); }
.gap-8 { gap: var(--s8); }

.text-center { text-align: center; }
.w-full { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  padding: 0.8125rem 1.75rem;
  border-radius: var(--r2);
  border: 1.5px solid transparent;
  transition: all var(--dur-base) var(--ease-smooth);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}

/* Shimmer effect */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.btn:hover::after { transform: translateX(100%); }

.btn-primary {
  background: var(--emerald);
  color: var(--obsidian);
  border-color: var(--emerald);
  box-shadow: 0 0 0 0 var(--emerald-glow);
}
.btn-primary:hover {
  background: #1aff89;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 230, 118, 0.35);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--obsidian-6);
}
.btn-ghost:hover {
  border-color: var(--emerald-border);
  color: var(--emerald);
  background: var(--emerald-glow);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--obsidian-4);
  color: var(--bone);
  border-color: var(--obsidian-5);
}
.btn-dark:hover {
  background: var(--obsidian-5);
  border-color: var(--obsidian-6);
  transform: translateY(-2px);
}

.btn-sm { padding: 0.5rem 1.125rem; font-size: 0.875rem; }
.btn-lg { padding: 1.0625rem 2.25rem; font-size: 1rem; }
.btn-xl { padding: 1.25rem 2.75rem; font-size: 1.0625rem; }

.btn-icon {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: var(--r2);
  font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — CARDS
   ═══════════════════════════════════════════════════════════════ */

.card {
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r4);
  padding: var(--s8);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-smooth),
              transform var(--dur-base) var(--ease-smooth),
              box-shadow var(--dur-base) var(--ease-smooth);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(0, 230, 118, 0.04) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }

.card:hover {
  border-color: var(--emerald-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--emerald-border);
}

.card-featured {
  background: linear-gradient(135deg, var(--obsidian-3) 0%, var(--obsidian-4) 100%);
  border-color: var(--emerald);
  box-shadow: var(--shadow-emerald);
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — BADGES & CHIPS
   ═══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.3125rem 0.75rem;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.badge-emerald { background: var(--emerald-glow); color: var(--emerald); border: 1px solid var(--emerald-border); }
.badge-azure { background: var(--azure-glow); color: var(--azure); border: 1px solid rgba(14, 165, 233, 0.3); }
.badge-amber { background: rgba(245, 158, 11, 0.1); color: var(--amber); border: 1px solid rgba(245, 158, 11, 0.25); }
.badge-muted { background: var(--obsidian-4); color: var(--bone-muted); border: 1px solid var(--obsidian-5); }

.dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.4);
  animation: ping 2s infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(0, 230, 118, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — INPUTS
   ═══════════════════════════════════════════════════════════════ */

.input-group { position: relative; }

.input {
  width: 100%;
  background: var(--obsidian-3);
  border: 1.5px solid var(--obsidian-5);
  border-radius: var(--r2);
  padding: 0.875rem 1.25rem;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  outline: none;
}
.input::placeholder { color: var(--bone-muted); }
.input:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-glow);
  background: var(--obsidian-4);
}

.input-lg {
  padding: 1.125rem 1.5rem;
  font-size: 1.0625rem;
  border-radius: var(--r3);
}

.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bone-dim);
  margin-bottom: var(--s2);
  letter-spacing: 0.01em;
}

textarea.input { resize: vertical; min-height: 140px; line-height: 1.6; }

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238a8680'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}
select.input option { background: var(--obsidian-3); }

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — DIVIDERS & DECORATIONS
   ═══════════════════════════════════════════════════════════════ */

.divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--obsidian-5) 20%, var(--obsidian-5) 80%, transparent);
  margin: var(--s8) 0;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.section-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--emerald);
  border-radius: 1px;
}

/* Noise texture overlay */
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — PROGRESS & STATS
   ═══════════════════════════════════════════════════════════════ */

.progress {
  width: 100%;
  height: 4px;
  background: var(--obsidian-5);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--emerald), var(--azure));
  transform-origin: left;
  animation: progressIn 1.5s var(--ease-out) 0.3s both;
}
@keyframes progressIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Uptime bar */
.uptime-bar {
  display: flex;
  gap: 3px;
  align-items: flex-end;
}
.uptime-tick {
  width: 4px;
  background: var(--emerald);
  border-radius: 2px;
  opacity: 0.8;
}
.uptime-tick.down { background: var(--rose); opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   HEADER / NAV
   ═══════════════════════════════════════════════════════════════ */

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  transition: background var(--dur-base), backdrop-filter var(--dur-base), border-color var(--dur-base);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s6);
  height: 68px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base);
}

#header.scrolled .header-inner {
  border-bottom-color: var(--obsidian-4);
}
#header.scrolled {
  background: rgba(8, 12, 16, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
}
[data-theme="light"] #header.scrolled {
  background: rgba(248, 249, 251, 0.85);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.04em;
  color: var(--bone);
  text-decoration: none;
  flex-shrink: 0;
}
.logo-mark {
  width: 32px;
  height: 32px;
  background: var(--emerald);
  border-radius: var(--r2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: var(--obsidian);
  position: relative;
  overflow: hidden;
}
.logo-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 60%);
}

/* Primary Nav */
.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex: 1;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.5rem 0.875rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--bone-dim);
  border-radius: var(--r2);
  transition: color var(--dur-fast), background var(--dur-fast);
  white-space: nowrap;
}
.nav-link svg { width: 14px; height: 14px; transition: transform var(--dur-fast); }
.nav-link:hover { color: var(--bone); background: var(--obsidian-4); }
.nav-link:hover svg { transform: rotate(180deg); }
.nav-link.active { color: var(--emerald); }

/* Mega Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r4);
  padding: var(--s4);
  min-width: 280px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-smooth);
  box-shadow: var(--shadow-xl);
  z-index: 100;
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r2);
  transition: background var(--dur-fast);
  cursor: pointer;
}
.dropdown-item:hover { background: var(--obsidian-4); }
.dropdown-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r2);
  background: var(--obsidian-5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.dropdown-item-text { font-size: 0.875rem; color: var(--bone-dim); margin-top: 2px; }

/* Nav Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-shrink: 0;
}

/* Theme Toggle */
.theme-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r2);
  background: var(--obsidian-4);
  border: 1px solid var(--obsidian-5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-dim);
  font-size: 1rem;
  transition: all var(--dur-fast);
}
.theme-btn:hover { border-color: var(--emerald-border); color: var(--emerald); background: var(--emerald-glow); }

/* Mobile Toggle */
.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--r2);
  background: var(--obsidian-4);
  border: 1px solid var(--obsidian-5);
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--bone);
  border-radius: 1px;
  transition: all var(--dur-base) var(--ease-smooth);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile Nav */
.nav-mobile {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--obsidian-2);
  padding: var(--s5) var(--s4);
  overflow-y: auto;
  flex-direction: column;
  gap: 0;
  z-index: 899;
}
.nav-mobile.open { display: flex; }

/* Kategori başlığı */
.nav-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s4);
  border-radius: var(--r3);
  color: var(--bone);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  user-select: none;
  margin-bottom: 2px;
  font-family: var(--font-display);
  letter-spacing: -.01em;
}
.nav-cat:hover { background: var(--obsidian-4); color: var(--emerald); }
.nav-cat.open   { color: var(--emerald); background: var(--obsidian-4); }
.nav-cat-left   { display: flex; align-items: center; gap: var(--s3); }
.nav-cat-emoji  { font-size: 1rem; }
.nav-cat-icon {
  width: 26px; height: 26px;
  border-radius: var(--r2);
  background: var(--obsidian-5);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
  color: var(--bone-muted);
}
.nav-cat.open .nav-cat-icon {
  transform: rotate(90deg);
  background: var(--emerald-glow);
  color: var(--emerald);
}

/* Alt linkler */
.nav-sub {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: var(--s1) 0 var(--s3) var(--s4);
  border-left: 2px solid var(--obsidian-5);
  margin: 0 0 var(--s2) var(--s5);
  animation: fadeUp .2s var(--ease-out) both;
}
.nav-sub.open { display: flex; }

.nav-sub-link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s3);
  border-radius: var(--r2);
  color: var(--bone-muted);
  font-size: .875rem;
  transition: background var(--dur-fast), color var(--dur-fast);
  text-decoration: none;
}
.nav-sub-link:hover { background: var(--obsidian-4); color: var(--emerald); }
.nav-sub-link-icon {
  width: 32px; height: 32px;
  border-radius: var(--r2);
  background: var(--obsidian-4);
  border: 1px solid var(--obsidian-5);
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem;
  flex-shrink: 0;
}
.nav-sub-link-title { font-weight: 500; color: var(--bone); font-size: .875rem; line-height: 1.2; display: block; }
.nav-sub-link:hover .nav-sub-link-title { color: var(--emerald); }
.nav-sub-link-desc { font-size: .7188rem; color: var(--bone-muted); margin-top: 1px; display: block; }

/* Düz link */
.nav-mobile-link {
  padding: var(--s4) var(--s4);
  border-radius: var(--r3);
  color: var(--bone-dim);
  font-size: 1rem;
  font-weight: 500;
  transition: background var(--dur-fast), color var(--dur-fast);
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
  text-decoration: none;
}
.nav-mobile-link:hover, .nav-mobile-link.active { background: var(--obsidian-4); color: var(--emerald); }

/* Ayırıcı */
.nav-mobile-sep { height: 1px; background: var(--obsidian-4); margin: var(--s3) 0; }

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════ */

#hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 68px;
  position: relative;
  overflow: hidden;
}

/* Animated grid background */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--obsidian-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--obsidian-3) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
  opacity: 0.4;
}

/* Glow orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.12;
  animation: orbFloat 12s ease-in-out infinite;
  pointer-events: none;
}
.hero-orb-1 {
  width: 600px;
  height: 600px;
  background: var(--emerald);
  top: -100px;
  right: -100px;
  animation-delay: 0s;
}
.hero-orb-2 {
  width: 400px;
  height: 400px;
  background: var(--azure);
  bottom: 0;
  left: -80px;
  animation-delay: -6s;
}
.hero-orb-3 {
  width: 300px;
  height: 300px;
  background: var(--emerald);
  top: 40%;
  left: 40%;
  animation-delay: -3s;
  opacity: 0.06;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -30px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: var(--s20) 0 var(--s16);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 0.4375rem 1rem;
  background: var(--emerald-glow);
  border: 1px solid var(--emerald-border);
  border-radius: var(--r-full);
  margin-bottom: var(--s8);
  animation: fadeUp 0.6s var(--ease-out) 0.1s both;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 8.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-bottom: var(--s8);
  animation: fadeUp 0.6s var(--ease-out) 0.2s both;
}

.hero-title .line-1 { display: block; color: var(--bone); }
.hero-title .line-2 { display: block; }
.hero-title .line-3 { display: block; color: var(--bone-muted); font-weight: 400; font-size: 0.55em; margin-top: 0.15em; letter-spacing: -0.02em; }

.hero-desc {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--bone-dim);
  max-width: 560px;
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: var(--s10);
  animation: fadeUp 0.6s var(--ease-out) 0.3s both;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s16);
  animation: fadeUp 0.6s var(--ease-out) 0.4s both;
}

/* Trusted by logos */
.hero-trust {
  display: flex;
  align-items: center;
  gap: var(--s6);
  animation: fadeUp 0.6s var(--ease-out) 0.5s both;
}
.trust-divider {
  width: 1px;
  height: 24px;
  background: var(--obsidian-5);
}
.trust-items {
  display: flex;
  align-items: center;
  gap: var(--s5);
}
.trust-item {
  font-size: 0.8125rem;
  color: var(--bone-muted);
  font-family: var(--font-mono);
  opacity: 0.7;
  letter-spacing: 0.05em;
}

/* Domain search card */
.hero-domain-card {
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r5);
  padding: var(--s8);
  animation: fadeUp 0.6s var(--ease-out) 0.35s both;
  box-shadow: var(--shadow-xl);
}

.domain-search-form {
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.domain-search-input-wrap {
  flex: 1;
  position: relative;
}
.domain-search-input-wrap .t-mono {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--emerald);
  pointer-events: none;
  font-size: 1rem;
}
.domain-search-input {
  width: 100%;
  background: var(--obsidian-4);
  border: 1.5px solid var(--obsidian-5);
  border-radius: var(--r2);
  padding: 0.9375rem 1rem 0.9375rem 2.5rem;
  color: var(--bone);
  font-size: 1.0625rem;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  font-family: var(--font-body);
}
.domain-search-input::placeholder { color: var(--bone-muted); }
.domain-search-input:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-glow);
}

.ext-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.ext-chip {
  padding: 0.3125rem 0.75rem;
  background: var(--obsidian-4);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  color: var(--bone-dim);
  cursor: pointer;
  transition: all var(--dur-fast);
  font-family: var(--font-mono);
}
.ext-chip:hover, .ext-chip.active {
  background: var(--emerald-glow);
  border-color: var(--emerald);
  color: var(--emerald);
}

/* Hero stats strip */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--obsidian-4);
  border: 1px solid var(--obsidian-4);
  border-radius: var(--r4);
  overflow: hidden;
  margin-top: var(--s16);
  animation: fadeUp 0.6s var(--ease-out) 0.6s both;
}
.hero-stat {
  background: var(--obsidian-2);
  padding: var(--s6) var(--s8);
  text-align: center;
}
.hero-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--emerald);
  line-height: 1;
  margin-bottom: var(--s2);
}
.hero-stat-label { font-size: 0.8125rem; color: var(--bone-muted); }

/* Floating server card */
.floating-card {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-40%);
  width: 340px;
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r5);
  padding: var(--s6);
  box-shadow: var(--shadow-xl);
  animation: floatCard 4s ease-in-out infinite, fadeRight 0.8s var(--ease-out) 0.5s both;
  z-index: 2;
}
@keyframes floatCard {
  0%, 100% { transform: translateY(-40%); }
  50% { transform: translateY(-43%); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px) translateY(-40%); }
  to { opacity: 1; transform: translateX(0) translateY(-40%); }
}

.server-visual {
  background: var(--obsidian-2);
  border: 1px solid var(--obsidian-4);
  border-radius: var(--r3);
  padding: var(--s5);
  margin-bottom: var(--s5);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.server-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2); }
.server-line:last-child { margin-bottom: 0; }
.server-line-label { color: var(--bone-muted); }
.server-line-value { color: var(--emerald); font-weight: 500; }
.server-line-bar {
  flex: 1;
  margin: 0 var(--s3);
  height: 3px;
  background: var(--obsidian-5);
  border-radius: 2px;
  overflow: hidden;
}
.server-line-bar-fill {
  height: 100%;
  background: var(--emerald);
  border-radius: 2px;
  transition: width .7s cubic-bezier(.4,0,.2,1), background .4s ease;
}
.bar-warn { background: var(--amber) !important; }
.bar-crit { background: var(--rose)  !important; }

/* Node seçici butonlar */
.fc-node-btn {
  padding: .25rem .625rem;
  border-radius: var(--r1);
  font-size: .6875rem;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--bone-muted);
  background: var(--obsidian-4);
  border: 1px solid var(--obsidian-5);
  cursor: pointer;
  transition: all var(--dur-fast);
  letter-spacing: .03em;
}
.fc-node-btn:hover { color: var(--bone); border-color: var(--obsidian-6); }
.fc-node-btn.active {
  background: var(--emerald-glow);
  border-color: var(--emerald-border);
  color: var(--emerald);
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.metric-box {
  background: var(--obsidian-2);
  border: 1px solid var(--obsidian-4);
  border-radius: var(--r3);
  padding: var(--s4);
}
.metric-val {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--bone);
}
.metric-lbl { font-size: 0.6875rem; color: var(--bone-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   TICKER / MARQUEE
   ═══════════════════════════════════════════════════════════════ */

.ticker-wrap {
  overflow: hidden;
  border-top: 1px solid var(--obsidian-4);
  border-bottom: 1px solid var(--obsidian-4);
  background: var(--obsidian-2);
  padding: var(--s3) 0;
}
.ticker-track {
  display: flex;
  gap: var(--s10);
  animation: ticker 30s linear infinite;
  white-space: nowrap;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--bone-muted);
  font-size: 0.875rem;
  flex-shrink: 0;
}
.ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--emerald); }
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════
   LOGOS / TECH STRIP
   ═══════════════════════════════════════════════════════════════ */

.tech-strip {
  padding: var(--s16) 0;
  border-bottom: 1px solid var(--obsidian-4);
}
.tech-strip-title {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--bone-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: var(--s10);
}
.tech-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s12);
  flex-wrap: wrap;
}
.tech-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--bone-muted);
  opacity: 0.45;
  letter-spacing: -0.03em;
  transition: opacity var(--dur-base);
  cursor: default;
}
.tech-logo:hover { opacity: 0.75; }

/* ═══════════════════════════════════════════════════════════════
   SERVICES / PRICING
   ═══════════════════════════════════════════════════════════════ */

.pricing-tabs {
  display: flex;
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r3);
  padding: 4px;
  gap: 4px;
  width: fit-content;
  margin: 0 auto var(--s16);
}
.pricing-tab {
  padding: 0.5rem 1.25rem;
  border-radius: var(--r2);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bone-muted);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.pricing-tab.active {
  background: var(--obsidian-6);
  color: var(--bone);
  box-shadow: var(--shadow-sm);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  align-items: stretch;
}

.pricing-card {
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r5);
  padding: var(--s8);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--obsidian-6), transparent);
}

.pricing-card.popular {
  border-color: var(--emerald);
  background: linear-gradient(160deg, var(--obsidian-3) 0%, rgba(0, 230, 118, 0.04) 100%);
  box-shadow: var(--shadow-emerald);
  transform: scale(1.03);
}
.pricing-card.popular::before {
  background: linear-gradient(90deg, transparent, var(--emerald), transparent);
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--obsidian-6);
}
.pricing-card.popular:hover {
  transform: scale(1.03) translateY(-6px);
  border-color: var(--emerald);
  box-shadow: var(--shadow-emerald-lg);
}

.popular-tag {
  position: absolute;
  top: var(--s5);
  right: var(--s5);
}

.plan-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--s5);
  position: relative;
}
.plan-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 60%);
}

.plan-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--s2);
}
.plan-desc {
  font-size: 0.875rem;
  color: var(--bone-muted);
  line-height: 1.5;
  margin-bottom: var(--s6);
}

.plan-price-wrap { margin-bottom: var(--s6); }
.plan-price {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bone);
}
.plan-price .currency {
  font-size: 1.25rem;
  font-weight: 600;
  vertical-align: top;
  margin-top: 0.5rem;
  margin-right: 2px;
  color: var(--bone-dim);
  display: inline-block;
}
.plan-price .period {
  font-size: 0.875rem;
  color: var(--bone-muted);
  font-weight: 400;
  margin-left: 4px;
}
.plan-savings { font-size: 0.8125rem; color: var(--emerald); margin-top: var(--s2); }

.plan-features {
  list-style: none;
  margin-bottom: var(--s8);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.plan-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: 0.9rem;
  color: var(--bone-dim);
}
.feature-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--emerald-glow);
  border: 1px solid var(--emerald-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.feature-check svg { width: 10px; height: 10px; stroke: var(--emerald); }
.plan-feature.dim .feature-check { background: var(--obsidian-5); border-color: var(--obsidian-6); }
.plan-feature.dim .feature-check svg { stroke: var(--bone-muted); }
.plan-feature.dim { opacity: 0.5; }

.plan-cta { margin-top: auto; }

/* Specs table for VDS */
.specs-card {
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r5);
  overflow: hidden;
}
.specs-header {
  padding: var(--s6) var(--s8);
  border-bottom: 1px solid var(--obsidian-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--obsidian-4);
}
.specs-table {
  width: 100%;
  border-collapse: collapse;
}
.specs-table thead th {
  padding: var(--s4) var(--s6);
  text-align: left;
  font-size: 0.8125rem;
  color: var(--bone-muted);
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--obsidian-4);
  letter-spacing: 0.05em;
}
.specs-table tbody tr {
  border-bottom: 1px solid var(--obsidian-4);
  transition: background var(--dur-fast);
}
.specs-table tbody tr:last-child { border-bottom: none; }
.specs-table tbody tr:hover { background: var(--obsidian-4); }
.specs-table td {
  padding: var(--s5) var(--s6);
  font-size: 0.9rem;
  color: var(--bone-dim);
  vertical-align: middle;
}
.specs-table td:first-child { color: var(--bone); font-weight: 500; }
.specs-table td.highlight { color: var(--emerald); font-family: var(--font-mono); font-size: 0.875rem; }

/* ═══════════════════════════════════════════════════════════════
   FEATURES BENTO GRID
   ═══════════════════════════════════════════════════════════════ */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: var(--s4);
}

.bento-item {
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r4);
  padding: var(--s8);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base), transform var(--dur-base);
}
.bento-item:hover { border-color: var(--obsidian-6); transform: translateY(-2px); }

.bento-1 { grid-column: span 8; }
.bento-2 { grid-column: span 4; }
.bento-3 { grid-column: span 4; }
.bento-4 { grid-column: span 4; }
.bento-5 { grid-column: span 4; }
.bento-6 { grid-column: span 6; }
.bento-7 { grid-column: span 6; }

.bento-icon-lg {
  width: 60px;
  height: 60px;
  border-radius: var(--r4);
  background: linear-gradient(135deg, var(--emerald-glow), var(--azure-glow));
  border: 1px solid var(--emerald-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: var(--s5);
}

.bento-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
  color: var(--bone);
}

.bento-desc { font-size: 0.9375rem; color: var(--bone-muted); line-height: 1.65; }

/* Uptime visual */
.uptime-display {
  margin-top: var(--s5);
}
.uptime-percentage {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--emerald);
  line-height: 1;
}
.uptime-ticks {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: var(--s4);
}
.uptick {
  width: 8px;
  height: 24px;
  border-radius: 2px;
  background: var(--emerald);
  opacity: 0.7;
}
.uptick.partial { height: 16px; opacity: 0.4; }
.uptick.down { height: 8px; background: var(--rose); opacity: 1; }

/* Speed visual */
.speed-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin: var(--s5) 0;
}
.speed-ring svg { transform: rotate(-90deg); }
.speed-ring-bg { fill: none; stroke: var(--obsidian-5); stroke-width: 8; }
.speed-ring-fill {
  fill: none;
  stroke: url(#speedGrad);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 42;
  animation: ringFill 1.5s var(--ease-out) 0.5s both;
}
@keyframes ringFill {
  from { stroke-dashoffset: 283; }
  to { stroke-dashoffset: 42; }
}
.speed-val {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.speed-num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--emerald);
  line-height: 1;
}
.speed-unit { font-size: 0.6875rem; color: var(--bone-muted); margin-top: 2px; }

/* DDoS visual */
.ddos-waves {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 50px;
  margin-top: var(--s4);
}
.ddos-bar {
  flex: 1;
  border-radius: 2px;
  background: linear-gradient(to top, var(--rose), rgba(244,63,94,0.3));
  animation: ddosBar 1.5s ease-in-out infinite alternate;
}
.ddos-bar.blocked { background: linear-gradient(to top, var(--emerald), var(--emerald-glow)); }

@keyframes ddosBar {
  from { height: var(--h1); }
  to { height: var(--h2); }
}

/* Location map dots */
.location-map {
  position: relative;
  margin-top: var(--s5);
}
.location-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 4px var(--emerald-glow);
}
.location-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--emerald-border);
  animation: ping 3s infinite;
}

/* ═══════════════════════════════════════════════════════════════
   GAME SERVERS
   ═══════════════════════════════════════════════════════════════ */

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
}

.game-card {
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r4);
  padding: var(--s6);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-smooth);
  display: flex;
  flex-direction: column;
}

.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-base);
  background: var(--game-gradient, linear-gradient(135deg, rgba(0,230,118,0.1) 0%, transparent 60%));
}
.game-card:hover::before { opacity: 1; }
.game-card:hover {
  transform: translateY(-6px);
  border-color: var(--obsidian-6);
  box-shadow: var(--shadow-lg);
}

.game-emoji { font-size: 2.25rem; margin-bottom: var(--s4); line-height: 1; }

.game-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--s2);
  color: var(--bone);
}
.game-desc { font-size: 0.875rem; color: var(--bone-muted); line-height: 1.5; margin-bottom: var(--s5); flex: 1; }

.game-specs {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s5);
  padding: var(--s3);
  background: var(--obsidian-2);
  border-radius: var(--r2);
  border: 1px solid var(--obsidian-4);
}
.game-spec {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
}
.game-spec-label { color: var(--bone-muted); font-family: var(--font-mono); }
.game-spec-value { color: var(--bone-dim); font-family: var(--font-mono); }

.game-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.game-price {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--emerald);
}
.game-price-period { font-size: 0.8125rem; color: var(--bone-muted); font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════ */

.testimonials-track-wrap { overflow: hidden; position: relative; }
.testimonials-track {
  display: flex;
  gap: var(--s5);
  transition: transform 0.5s var(--ease-smooth);
}

.testi-card {
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r5);
  padding: var(--s8);
  flex: 0 0 calc(33.333% - var(--s4));
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  transition: border-color var(--dur-base);
}
.testi-card:hover { border-color: var(--obsidian-6); }

.testi-stars { display: flex; gap: 3px; }
.star { color: var(--amber); font-size: 0.875rem; }

.testi-quote {
  font-size: 0.9375rem;
  color: var(--bone-dim);
  line-height: 1.75;
  font-style: italic;
  flex: 1;
}
.testi-quote::before { content: '"'; color: var(--emerald); font-size: 1.5rem; line-height: 0; vertical-align: -0.4em; margin-right: 3px; }

.testi-author {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--obsidian-4);
}
.testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--obsidian);
}
.testi-name { font-weight: 600; font-size: 0.9375rem; margin-bottom: 2px; }
.testi-role { font-size: 0.8125rem; color: var(--bone-muted); }
.testi-company {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--bone-muted);
  font-family: var(--font-mono);
  background: var(--obsidian-4);
  padding: 3px 8px;
  border-radius: var(--r1);
}

/* Slider controls */
.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  margin-top: var(--s10);
}
.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r2);
  background: var(--obsidian-4);
  border: 1px solid var(--obsidian-5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-dim);
  font-size: 1.125rem;
  transition: all var(--dur-fast);
  cursor: pointer;
}
.slider-btn:hover { background: var(--obsidian-5); border-color: var(--obsidian-6); color: var(--bone); }

.slider-dots { display: flex; gap: var(--s2); }
.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--obsidian-5);
  border: none;
  cursor: pointer;
  transition: all var(--dur-base);
  padding: 0;
}
.slider-dot.active { width: 24px; background: var(--emerald); }

/* ═══════════════════════════════════════════════════════════════
   BLOG / KNOWLEDGE
   ═══════════════════════════════════════════════════════════════ */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}

.blog-card {
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--dur-base);
}
.blog-card:hover {
  border-color: var(--obsidian-6);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.blog-image-area {
  height: 180px;
  background: var(--obsidian-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}
.blog-image-area::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--obsidian-3) 100%);
}

.blog-body { padding: var(--s6); flex: 1; display: flex; flex-direction: column; }
.blog-cat {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--emerald);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}
.blog-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--bone);
  margin-bottom: var(--s3);
  flex: 1;
}
.blog-excerpt { font-size: 0.875rem; color: var(--bone-muted); line-height: 1.65; margin-bottom: var(--s5); }
.blog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s4);
  border-top: 1px solid var(--obsidian-4);
  font-size: 0.8125rem;
  color: var(--bone-muted);
}
.blog-read-more {
  color: var(--emerald);
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: var(--s1);
  transition: gap var(--dur-fast);
}
.blog-card:hover .blog-read-more { gap: var(--s2); }

/* ═══════════════════════════════════════════════════════════════
   CONTACT / CTA
   ═══════════════════════════════════════════════════════════════ */

.cta-block {
  position: relative;
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r6);
  padding: var(--s20) var(--s12);
  overflow: hidden;
  text-align: center;
}

.cta-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: var(--emerald);
  filter: blur(120px);
  opacity: 0.07;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: var(--s6);
  position: relative;
}
.cta-desc { font-size: 1.125rem; color: var(--bone-dim); max-width: 600px; margin: 0 auto var(--s10); position: relative; }

.cta-actions { display: flex; align-items: center; justify-content: center; gap: var(--s4); flex-wrap: wrap; position: relative; }

.contact-form-card {
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r5);
  padding: var(--s10);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.form-group { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }

/* ═══════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════ */

.faq-list { display: flex; flex-direction: column; gap: var(--s3); }

.faq-item {
  background: var(--obsidian-3);
  border: 1px solid var(--obsidian-5);
  border-radius: var(--r3);
  overflow: hidden;
  transition: border-color var(--dur-base);
}
.faq-item.open { border-color: var(--emerald-border); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s5) var(--s6);
  cursor: pointer;
  font-weight: 500;
  font-size: 1rem;
  color: var(--bone);
  transition: color var(--dur-fast);
  gap: var(--s4);
  user-select: none;
}
.faq-question:hover { color: var(--emerald); }
.faq-item.open .faq-question { color: var(--emerald); }

.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r2);
  background: var(--obsidian-5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  transition: background var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}
.faq-item.open .faq-icon {
  background: var(--emerald-glow);
  transform: rotate(45deg);
  color: var(--emerald);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-smooth), padding 0.3s;
  font-size: 0.9375rem;
  color: var(--bone-muted);
  line-height: 1.75;
  padding: 0 var(--s6);
}
.faq-item.open .faq-answer {
  max-height: 500px;
  padding: 0 var(--s6) var(--s6);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

footer {
  background: var(--obsidian-2);
  border-top: 1px solid var(--obsidian-4);
  padding: var(--s20) 0 var(--s10);
}

.footer-bottom-links {
  display: flex;
  gap: var(--s6);
}
.footer-bottom-links a { font-size: 0.875rem; color: var(--bone-muted); transition: color var(--dur-fast); }
.footer-bottom-links a:hover { color: var(--bone); }

.status-indicator {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.8125rem;
  color: var(--emerald);
}

/* Live chat float */
.live-chat-btn {
  position: fixed;
  bottom: var(--s8);
  right: var(--s8);
  z-index: 800;
  background: var(--emerald);
  color: var(--obsidian);
  border-radius: var(--r-full);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--s3);
  cursor: pointer;
  box-shadow: var(--shadow-emerald-lg);
  transition: all var(--dur-base) var(--ease-spring);
  letter-spacing: -0.01em;
  border: none;
}
.live-chat-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 50px rgba(0, 230, 118, 0.45);
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER COMPONENT
   ═══════════════════════════════════════════════════════════════ */

.section-header { text-align: center; max-width: 720px; margin: 0 auto var(--s16); }
.section-header .t-label { color: var(--emerald); margin-bottom: var(--s4); display: block; }
.section-header .t-display-md { color: var(--bone); margin-bottom: var(--s4); }
.section-header .t-body-lg { color: var(--bone-muted); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .bento-1 { grid-column: span 12; }
  .bento-2 { grid-column: span 6; }
  .bento-3 { grid-column: span 6; }
  .bento-4 { grid-column: span 4; }
  .bento-5 { grid-column: span 4; }
  .bento-6 { grid-column: span 4; }
  .bento-7 { grid-column: span 12; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.popular { transform: none; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .floating-card { display: none; }
  .hero-inner .container { max-width: 100%; }
}

@media (max-width: 1024px) {
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-card { flex: 0 0 calc(50% - var(--s3)); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* === TABLET 1024px === */
@media (max-width: 1024px) {
  .floating-card { display: none; }
  .pricing-card.popular { transform: none; }
  .testi-card { flex: 0 0 calc(50% - 10px); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* === MOBİL 768px === */
@media (max-width: 768px) {
  :root {
    --s8: 1.5rem; --s10: 2rem; --s12: 2.5rem;
    --s16: 3rem;  --s20: 3.5rem; --s32: 5rem;
  }

  /* Header */
  .nav-primary, .nav-actions .btn:not(.theme-btn):not(.hamburger) { display: none !important; }
  .hamburger { display: flex !important; }
  .container, .container-sm, .container-xs { padding: 0 1rem !important; }
  .section { padding: 3rem 0 !important; }
  .section-sm { padding: 2rem 0 !important; }

  /* Hero */
  .hero-title { font-size: 2rem !important; line-height: 1.1 !important; }
  .hero-desc { font-size: .9375rem !important; }
  .hero-actions { flex-direction: column !important; gap: .75rem !important; }
  .hero-actions .btn { width: 100% !important; justify-content: center !important; }
  .hero-trust { flex-direction: column !important; align-items: flex-start !important; gap: .5rem !important; }
  .trust-divider { display: none !important; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-stat-num { font-size: 1.5rem !important; }
  .hero-orb { display: none !important; }
  .floating-card { display: none !important; }

  /* Domain search */
  .domain-search-form { flex-direction: column !important; }
  .domain-search-form .btn,
  .domain-search-form button { width: 100% !important; }
  .domain-prefix input { font-size: .9375rem !important; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr !important; }
  .pricing-card.popular { transform: none !important; }
  .tab-list { width: 100% !important; justify-content: center !important; flex-wrap: wrap !important; }

  /* Game grid */
  .game-grid { grid-template-columns: 1fr !important; }

  /* Bento */
  .bento-grid { display: flex !important; flex-direction: column !important; gap: 1rem !important; }
  .bento-item { width: 100% !important; grid-column: span 1 !important; }
  .uptime-ticks { max-width: 100% !important; flex-wrap: wrap !important; }
  .speed-ring { width: 100px !important; height: 100px !important; }

  /* Testimonials */
  .testi-card { flex: 0 0 100% !important; }
  .testi-company { display: none !important; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-featured { display: flex !important; flex-direction: column !important; }
  .blog-featured-img { min-height: 160px !important; }
  .blog-featured-body { padding: 1.25rem !important; }

  /* VDS table */
  .specs-card { overflow-x: auto !important; }
  .data-table { min-width: 560px !important; font-size: .8125rem !important; }

  /* Stats */
  .stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-num { font-size: 1.5rem !important; }

  /* Buttons */
  .btn-xl { padding: .875rem 1.5rem !important; font-size: 1rem !important; }
  .cta-actions { flex-direction: column !important; gap: .75rem !important; }
  .cta-actions .btn { width: 100% !important; justify-content: center !important; }
  .cta-block { padding: 2.5rem 1rem !important; border-radius: 1rem !important; }

  /* FAQ iki kolon → tek */
  .faq-two-col { display: flex !important; flex-direction: column !important; }

  /* Form */
  .form-row { grid-template-columns: 1fr !important; }

  /* Tech logos */
  .tech-logos { gap: 1rem !important; flex-wrap: wrap !important; justify-content: center !important; }
  .tech-logo { font-size: .9375rem !important; }

  /* Footer */
  footer { padding: 2.5rem 0 1.5rem !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
  .footer-brand p { max-width: 100% !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: .75rem !important; }
  .footer-bottom-links { justify-content: center !important; flex-wrap: wrap !important; }

  /* Live chat */
  .live-chat-btn { padding: .875rem !important; border-radius: 50% !important; bottom: 1.25rem !important; right: 1.25rem !important; }
  .live-chat-btn span:last-child { display: none !important; }

  /* Section header */
  .section-header { margin-bottom: 2rem !important; }
  .section-header .t-display-md { font-size: 1.5rem !important; }

  /* Slider controls */
  .slider-controls { margin-top: 1.5rem !important; }

  /* Inline grids - force override */
  [style*="display:grid;grid-template-columns:repeat(3,1fr)"],
  [style*="display:grid;grid-template-columns:repeat(4,1fr)"],
  [style*="display:grid;grid-template-columns:1fr 1fr"],
  [style*="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* === KÜÇÜK MOBİL 480px === */
@media (max-width: 480px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .metric-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .plan-price { font-size: 2rem !important; }
  .game-emoji { font-size: 1.75rem !important; }
  .hero-stat-num { font-size: 1.25rem !important; }

  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* === TOUCH === */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .nav-mobile-link { min-height: 48px; }
  .faq-question { min-height: 48px; }
  .ext-chip { min-height: 36px; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}
</style>
 }

/* ══════════════════════════════════════════════════════════
   SMOOTH SCROLL
   ══════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }

/* ══════════════════════════════════════════════════════════
   VDS YATAY SATIRLAR
   ══════════════════════════════════════════════════════════ */

.vds-row:hover { border-color: #3a4555; }
.vds-row-pop { border-color: rgba(0,230,118,.3) !important; }
.vds-row-pop:hover { border-color: rgba(0,230,118,.55) !important; }

.vds-row-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  background: #00e676;
  color: #000;
  font-size: .6rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 14px;
  border-radius: 0 0 8px 8px;
  letter-spacing: .05em;
  z-index: 2;
}

.vds-row-main {
  display: grid;
  grid-template-columns: 140px 1fr 1fr 1fr 160px auto auto;
  align-items: center;
  gap: 0;
  padding: 18px 20px;
  cursor: pointer;
}



.vds-row-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-left: 1px solid #1c2330;
  color: #5a6a7e;
}
.vds-row-spec strong {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: #e8e6e1;
  line-height: 1.2;
}
.vds-row-spec span {
  display: block;
  font-size: .7rem;
  color: #8892a4;
  font-family: 'JetBrains Mono', monospace;
}

.vds-row-price-wrap {
  padding: 0 16px;
  border-left: 1px solid #1c2330;
  text-align: right;
}
.vds-row-old {
  font-size: .8rem;
  color: #5a6a7e;
  text-decoration: line-through;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  margin-bottom: 2px;
}
.vds-row-price {
  font-family: 'Syne', sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  color: #e8e6e1;
  line-height: 1;
}
.vds-row-price span {
  font-size: .8rem;
  font-weight: 400;
  color: #8892a4;
}

.vds-row-btn { margin: 0 12px; flex-shrink: 0; }

.vds-row-toggle {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #1c2330;
  border: 1px solid #252e3d;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #8892a4;
  transition: background .15s, color .15s, transform .25s;
  flex-shrink: 0;
}
.vds-row-toggle:hover { background: #252e3d; color: #e8e6e1; }
.vds-row.open .vds-row-toggle { transform: rotate(180deg); color: #00e676; }

/* Detay paneli */


.vds-detail-inner {
  padding: 20px 20px 24px;
  border-top: 1px solid #1c2330;
  background: #0d1117;
}
.vds-detail-desc {
  font-size: .9rem;
  color: #8892a4;
  margin-bottom: 16px;
  line-height: 1.6;
}
.vds-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.vds-detail-item {
  background: #141920;
  border: 1px solid #252e3d;
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 0;
}
.vds-detail-item span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #8892a4;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vds-detail-item strong {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: #e8e6e1;
  word-break: break-word;
}
@media (max-width: 900px) {
  .vds-detail-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .vds-detail-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vds-detail-inner { padding: 16px 14px 20px; }
}

@media (max-width: 900px) {
  .vds-row-main { grid-template-columns: 120px 1fr 1fr 130px auto auto; }
  .vds-row-spec:last-of-type { display: none; }
  .vds-detail-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 600px) {
  .vds-row-main { grid-template-columns: 1fr 1fr auto auto; gap: 8px; padding: 14px; }
  
  .vds-row-spec { border-left: none; padding: 0; }
  .vds-row-price-wrap { border-left: none; padding: 0; }
  .vds-detail-grid { grid-template-columns: repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════════════
   HEADER NAV DROPDOWN — hover ile açılır
   ══════════════════════════════════════════════════════════ */
.nav-item {
  position: relative;
  /* Köprü: link ile dropdown arası boşlukta hover kopmaz */
  padding-bottom: 14px;
  margin-bottom: -14px;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 260px;
  padding-top: 10px;  /* görünmez köprü */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 9999;
}
.nav-dropdown-inner {
  background: #141920;
  border: 1px solid #252e3d;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
}
/* Hover ile açılsın — tıklama gerekmez */
.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-item:hover > .nav-link { color: #e8e6e1; }

.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: .5rem .875rem;
  font-size: .9rem; font-weight: 400;
  color: #9aa3b0;
  border-radius: 8px;
  transition: color .15s, background .15s;
  white-space: nowrap; cursor: pointer;
  text-decoration: none;
}
.nav-link svg { transition: transform .2s; flex-shrink: 0; }
.nav-item:hover > .nav-link svg { transform: rotate(180deg); }
.nav-link:hover { color: #e8e6e1; background: #1c2330; }
.nav-link.active { color: #00e676; }

.dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  color: #9aa3b0;
}
.dropdown-item:hover { background: #1c2330; color: #e8e6e1; }
.dropdown-item-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #1c2330; border-radius: 9px;
  color: #9aa3b0;
  transition: background .15s, color .15s;
}
.dropdown-item:hover .dropdown-item-icon { background: #252e3d; color: #00e676; }
.dropdown-item-text { font-size: .78rem; color: #5a6a7e; margin-top: 2px; }

/* cPanel hosting paket kartları */
.cp-pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cp-pkg-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  color: #1a1a2e;
}
[data-theme="dark"] .cp-pkg-card { background: #141920; color: #e8e6e1; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
.cp-pkg-popular {
  border: 2px solid #00c18a;
}
.cp-popular-badge {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  background: #00c18a; color: #fff;
  font-size: .65rem; font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  padding: 4px 18px;
  border-radius: 0 0 10px 10px;
  letter-spacing: .06em; white-space: nowrap;
}
.cp-pkg-top {
  padding: 32px 24px 24px;
  border-bottom: 1px solid #f0f0f0;
}
[data-theme="dark"] .cp-pkg-top { border-color: #1c2330; }
.cp-pkg-name {
  font-family: 'Syne', sans-serif;
  font-size: 1.375rem; font-weight: 800;
  letter-spacing: -.02em; margin-bottom: 4px;
}
.cp-pkg-sub { font-size: .8125rem; color: #888; margin-bottom: 20px; }
[data-theme="dark"] .cp-pkg-sub { color: #8892a4; }
.cp-pkg-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; }
.cp-price-num {
  font-family: 'Syne', sans-serif;
  font-size: 2.75rem; font-weight: 800; line-height: 1;
  letter-spacing: -.03em;
}
.cp-cur { font-size: 1.5rem; font-weight: 700; vertical-align: super; font-style: normal; }
.cp-cents { font-size: 1.25rem; font-weight: 600; }
.cp-price-per { font-size: .875rem; color: #888; }
[data-theme="dark"] .cp-price-per { color: #8892a4; }
.cp-pkg-saving {
  font-size: .8125rem; color: #00c18a;
  margin-bottom: 20px;
}
.cp-pkg-saving strong { font-weight: 700; }
.cp-buy-btn {
  display: flex !important; align-items: center; justify-content: space-between !important;
  border-radius: 12px !important; padding: 14px 20px !important;
  font-size: .9375rem !important; font-weight: 700 !important;
  background: #1a1a2e !important; color: #fff !important;
  border: none !important; text-decoration: none;
  transition: opacity .15s !important;
}
.cp-buy-btn:hover { opacity: .85 !important; transform: none !important; }
.cp-buy-popular {
  background: #00c18a !important;
}
.cp-pkg-features {
  padding: 20px 24px;
  flex: 1;
  border-bottom: 1px solid #f0f0f0;
}
[data-theme="dark"] .cp-pkg-features { border-color: #1c2330; }
.cp-feat-label {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #aaa; text-align: center;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
[data-theme="dark"] .cp-feat-label { color: #5a6a7e; border-color: #1c2330; }
.cp-feat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: .875rem;
}
[data-theme="dark"] .cp-feat-row { border-color: #1c2330; }
.cp-feat-row:last-child { border-bottom: none; }
.cp-feat-row span { color: #555; }
[data-theme="dark"] .cp-feat-row span { color: #8892a4; }
.cp-feat-row strong { font-weight: 700; color: #1a1a2e; }
[data-theme="dark"] .cp-feat-row strong { color: #e8e6e1; }
.cp-pkg-footer {
  padding: 16px 24px;
  display: flex; align-items: center; gap: 14px;
}

@media (max-width: 900px) { .cp-pkg-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* ══════════════════════════════════════════════════════════
   VDS ADIMLAR — Animasyonlu
   ══════════════════════════════════════════════════════════ */
.vds-steps-section { background: #080c10; overflow: hidden; }
.vds-steps-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.vds-step {
  background: #0d1117;
  border: 1px solid #1c2330;
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .3s;
  animation: stepIn .5s ease both;
}
.vds-step:nth-child(1){animation-delay:.05s}
.vds-step:nth-child(2){animation-delay:.15s}
.vds-step:nth-child(3){animation-delay:.25s}
.vds-step:nth-child(4){animation-delay:.35s}
@keyframes stepIn {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
.vds-step:hover {
  border-color: rgba(0,230,118,.35);
  transform: translateY(-4px);
}
.vds-step-glow {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,230,118,.15), transparent 70%);
  top: -30px; right: -30px;
  pointer-events: none;
  transition: opacity .3s;
  opacity: 0;
}
.vds-step:hover .vds-step-glow { opacity: 1; }
.vds-step-num {
  font-family: 'Syne', sans-serif;
  font-size: 3rem; font-weight: 800;
  color: #1c2330;
  line-height: 1;
  position: absolute;
  top: 16px; right: 20px;
  pointer-events: none;
  transition: color .3s;
}
.vds-step:hover .vds-step-num { color: rgba(0,230,118,.12); }
.vds-step-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(0,230,118,.08);
  border: 1px solid rgba(0,230,118,.2);
  display: flex; align-items: center; justify-content: center;
  color: #00e676;
  margin-bottom: 20px;
  transition: background .3s, transform .3s;
}
.vds-step:hover .vds-step-icon {
  background: rgba(0,230,118,.15);
  transform: scale(1.08);
}
.vds-step-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.0625rem; font-weight: 700;
  color: #e8e6e1; margin-bottom: 10px;
}
.vds-step-desc {
  font-size: .875rem; color: #8892a4; line-height: 1.65;
  margin-bottom: 20px;
}
.vds-step-tag {
  display: inline-flex; align-items: center;
  background: #1c2330;
  border: 1px solid #252e3d;
  border-radius: 100px;
  padding: 4px 12px;
  font-family: monospace;
  font-size: .7rem;
  color: #8892a4;
}
.vds-step-tag-green {
  background: rgba(0,230,118,.1);
  border-color: rgba(0,230,118,.25);
  color: #00e676;
}
@media (max-width:900px) { .vds-steps-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:500px) { .vds-steps-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   BLOG MAKALE SAYFASI
   ══════════════════════════════════════════════════════════ */
.blog-article-page { min-height: 100vh; }
.blog-article-hero {
  background: linear-gradient(160deg,#080c10,#0d1117);
  border-bottom: 1px solid #1c2330;
  padding: 100px 0 60px;
}
.blog-article-meta-top {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
}
.blog-back-btn {
  font-size: .875rem; color: #8892a4;
  text-decoration: none;
  transition: color .15s;
}
.blog-back-btn:hover { color: #00e676; }
.blog-cat-badge {
  font-size: .7rem; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: .08em;
  background: rgba(0,230,118,.12);
  border: 1px solid rgba(0,230,118,.25);
  color: #00e676;
  padding: 3px 10px; border-radius: 100px;
}
.blog-article-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800; color: #e8e6e1;
  letter-spacing: -.03em;
  margin-bottom: 16px;
  max-width: 760px;
}
.blog-article-lead {
  font-size: 1.125rem; color: #8892a4;
  line-height: 1.7; max-width: 640px;
  margin-bottom: 24px;
}
.blog-article-info {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: .8125rem; color: #5a6a7e;
  font-family: 'JetBrains Mono', monospace;
}
.blog-article-body {
  max-width: 740px;
  margin: 0 auto;
  padding: 64px 0 80px;
}
.blog-article-body h2 {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem; font-weight: 700;
  color: #e8e6e1; margin: 48px 0 16px;
  letter-spacing: -.02em;
}
.blog-article-body h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.125rem; font-weight: 700;
  color: #e8e6e1; margin: 32px 0 12px;
}
.blog-article-body p {
  font-size: .9375rem; color: #8892a4;
  line-height: 1.8; margin-bottom: 20px;
}
.blog-article-body ul {
  padding-left: 0; margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.blog-article-body ul li {
  font-size: .9375rem; color: #8892a4;
  padding-left: 20px; position: relative; line-height: 1.7;
}
.blog-article-body ul li::before {
  content: '→'; position: absolute; left: 0;
  color: #00e676; font-weight: 700;
}
.blog-article-body pre {
  background: #0d1117;
  border: 1px solid #1c2330;
  border-radius: 10px;
  padding: 20px 24px;
  overflow-x: auto;
  margin: 20px 0;
}
.blog-article-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8125rem; color: #00e676;
  line-height: 1.7;
}
.blog-cta-box {
  background: linear-gradient(135deg,rgba(0,230,118,.06),#141920);
  border: 1px solid rgba(0,230,118,.25);
  border-radius: 14px;
  padding: 32px;
  margin-top: 48px;
  text-align: center;
}
.blog-cta-box h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem; font-weight: 700;
  color: #e8e6e1; margin: 0 0 8px !important;
}
.blog-cta-box p {
  color: #8892a4; margin-bottom: 20px !important;
}
.blog-card { cursor: pointer; }
.blog-card:hover .blog-read-more { color: #00e676; }

/* ══════════════════════════════════════════════════════════
   LIGHT THEME FIX — Tüm sayfalarda beyaz mod düzeltmeleri
   ══════════════════════════════════════════════════════════ */

/* Genel kart ve metin düzeltmeleri */
[data-theme="light"] .card { background: #fff; border-color: #e2e8f0; color: #1a202c; }
[data-theme="light"] .card:hover { border-color: #00c18a; }
[data-theme="light"] .t-display-lg,
[data-theme="light"] .t-display-md,
[data-theme="light"] .t-body-lg,
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,
[data-theme="light"] .plan-name,
[data-theme="light"] .vds-card-name,
[data-theme="light"] 
[data-theme="light"] .text-dim,
[data-theme="light"] .t-body-lg,
[data-theme="light"] p { color: #4a5568; }

/* Blog makaleler */
[data-theme="light"] .blog-article-hero { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .blog-article-title { color: #1a202c; }
[data-theme="light"] .blog-article-lead { color: #4a5568; }
[data-theme="light"] .blog-back-btn { color: #4a5568; }
[data-theme="light"] .blog-back-btn:hover { color: #00c18a; }
[data-theme="light"] .blog-article-body h2,
[data-theme="light"] .blog-article-body h3 { color: #1a202c; }
[data-theme="light"] .blog-article-body p { color: #4a5568; }
[data-theme="light"] .blog-article-body ul li { color: #4a5568; }
[data-theme="light"] .blog-article-body pre { background: #f1f5f9; border-color: #e2e8f0; }
[data-theme="light"] .blog-article-body code { color: #0d9488; }
[data-theme="light"] .blog-cta-box { background: #f0fdf4; border-color: #86efac; }
[data-theme="light"] .blog-cta-box h3 { color: #1a202c !important; }
[data-theme="light"] .blog-cta-box p { color: #4a5568 !important; }
[data-theme="light"] .blog-cat-badge { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }

/* VDS paket satırları */
[data-theme="light"] .vds-row { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .vds-row:hover { border-color: #a7f3d0; }
[data-theme="light"] .vds-row-pop { border-color: #6ee7b7 !important; background: #f0fdf4; }
[data-theme="light"] .vds-row-main { background: transparent; }
[data-theme="light"] 
[data-theme="light"] .vds-row-spec { border-color: #e2e8f0; color: #94a3b8; }
[data-theme="light"] .vds-row-spec strong { color: #1a202c; }
[data-theme="light"] .vds-row-spec span { color: #64748b; }
[data-theme="light"] .vds-row-price-wrap { border-color: #e2e8f0; }
[data-theme="light"] .vds-row-price { color: #1a202c; }
[data-theme="light"] .vds-row-toggle { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .vds-row-toggle:hover { background: #e2e8f0; color: #1a202c; }
[data-theme="light"] .vds-detail-inner { background: #f8fafc; border-top-color: #e2e8f0; }
[data-theme="light"] .vds-detail-item { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .vds-detail-item span { color: #64748b; }
[data-theme="light"] .vds-detail-item strong { color: #1a202c; }
[data-theme="light"] .vds-detail-desc { color: #4a5568; }

/* Satın Al butonu light modda görünür */
[data-theme="light"] .btn-ghost {
  border-color: #cbd5e1;
  color: #374151;
}
[data-theme="light"] .btn-ghost:hover {
  border-color: #00c18a;
  color: #00c18a;
  background: #f0fdf4;
}
[data-theme="light"] .vds-row .btn-ghost {
  border-color: #94a3b8;
  color: #374151;
  background: #f8fafc;
}
[data-theme="light"] .vds-row .btn-primary {
  background: #00c18a;
  color: #fff;
}

/* VDS karşılaştırma tablosu */
[data-theme="light"] .table-scroll table { background: #fff; }
[data-theme="light"] .table-scroll thead tr { background: #f1f5f9; }
[data-theme="light"] .table-scroll th { color: #64748b; border-color: #e2e8f0; }
[data-theme="light"] .table-scroll td { color: #374151; border-color: #f1f5f9; }
[data-theme="light"] .table-scroll tr:hover td { background: #f8fafc; }

/* VDS adımlar */
[data-theme="light"] .vds-step { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .vds-step:hover { border-color: #6ee7b7; }
[data-theme="light"] .vds-step-title { color: #1a202c; }
[data-theme="light"] .vds-step-desc { color: #4a5568; }
[data-theme="light"] .vds-step-num { color: #e2e8f0; }
[data-theme="light"] .vds-step-tag { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }

/* Reseller dropdown */
[data-theme="light"] #resellerSelect { background: #f8fafc; border-color: #e2e8f0; color: #1a202c; }
[data-theme="light"] .faq-item { border-color: #e2e8f0; }
[data-theme="light"] .faq-question { color: #1a202c; }
[data-theme="light"] .faq-answer { color: #4a5568; }

/* Premium VDS */
[data-theme="light"] .premium-pkg-card { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .premium-pkg-card:hover { border-color: #a5b4fc; }
[data-theme="light"] .premium-pkg-name { color: #1a202c; }
[data-theme="light"] .premium-pkg-desc { color: #4a5568; }
[data-theme="light"] .premium-spec-k { color: #64748b; }
[data-theme="light"] .premium-feature-item { color: #374151; }
[data-theme="light"] .premium-price { color: #1a202c; }

/* cPanel hosting kartları light mod */
[data-theme="light"] .cp-pkg-card { background: #fff; color: #1a202c; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
[data-theme="light"] .cp-pkg-top { border-color: #f0f0f0; }
[data-theme="light"] .cp-pkg-name { color: #1a202c; }
[data-theme="light"] .cp-pkg-sub { color: #64748b; }
[data-theme="light"] .cp-price-per { color: #64748b; }
[data-theme="light"] .cp-feat-label { color: #94a3b8; border-color: #f0f0f0; }
[data-theme="light"] .cp-feat-row { border-color: #f5f5f5; }
[data-theme="light"] .cp-feat-row span { color: #4a5568; }
[data-theme="light"] .cp-feat-row strong { color: #1a202c; }
[data-theme="light"] .cp-pkg-footer { border-color: #f0f0f0; }
[data-theme="light"] .cp-buy-btn { background: #1a202c !important; color: #fff !important; }

/* Dropdown nav light mode */
[data-theme="light"] .nav-dropdown-inner { background: #fff; border-color: #e2e8f0; box-shadow: 0 16px 48px rgba(0,0,0,.12); }
[data-theme="light"] .dropdown-item { color: #4a5568; }
[data-theme="light"] .dropdown-item:hover { background: #f8fafc; color: #1a202c; }
[data-theme="light"] .dropdown-item-icon { background: #f1f5f9; color: #64748b; }
[data-theme="light"] .dropdown-item:hover .dropdown-item-icon { background: #e2e8f0; color: #00c18a; }

/* VDS mobil - tablo scroll */
@media (max-width: 768px) {
  .vds-rows { gap: 6px; }
  .vds-row-main {
    grid-template-columns: 1fr auto auto !important;
    grid-template-rows: auto auto auto;
    gap: 8px 0 !important;
    padding: 14px 14px !important;
  }
  
  .vds-row-spec { border-left: none !important; padding: 0 !important; }
  .vds-row-specs-wrap {
    grid-column: 1 / -1;
    display: flex; gap: 16px; flex-wrap: wrap;
  }
  .vds-row-price-wrap { border-left: none !important; padding: 0 !important; }
  .vds-row-btn { font-size: .75rem; padding: 6px 10px; }
  .vds-detail-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ══════════════════════════════════════════════════════════
   VDS + PREMIUM VDS — LIGHT/DARK TAM UYUMLULUK
   ══════════════════════════════════════════════════════════ */


[data-theme="light"] .vds-row .btn-ghost {
  background:#f8fafc !important; border-color:#cbd5e1 !important;
  color:#374151 !important;
}
[data-theme="light"] .vds-row .btn-ghost:hover {
  border-color:#00c18a !important; color:#00c18a !important;
  background:#f0fdf4 !important;
}
[data-theme="light"] .vds-row .btn-primary {
  background:#00c18a !important; color:#fff !important; border-color:#00c18a !important;
}

/* VDS karşılaştırma tablosu */
[data-theme="light"] .vds-cmp-wrap table { background:#fff; border-radius:12px; overflow:hidden; }
[data-theme="light"] .vds-cmp-wrap thead tr { background:#f1f5f9 !important; }
[data-theme="light"] .vds-cmp-wrap th { color:#64748b !important; border-color:#e2e8f0 !important; }
[data-theme="light"] .vds-cmp-wrap td { color:#374151 !important; border-color:#f1f5f9 !important; }
[data-theme="light"] .vds-cmp-wrap tr:hover td { background:#f8fafc !important; }

/* Premium VDS kartları - light mod */
[data-theme="light"] .premium-vds-card-wrap { background:#fff !important; border-color:#e2e8f0 !important; }
[data-theme="light"] .premium-vds-card-wrap:hover { border-color:#a5b4fc !important; box-shadow:0 8px 32px rgba(0,0,0,.08) !important; }
[data-theme="light"] .premium-vds-card-wrap.elite { border-color:#818cf8 !important; background:#fafaff !important; }

/* VDS adımlar - light mod */
[data-theme="light"] .vds-steps-section { background:#f8fafc; }
[data-theme="light"] .vds-step { background:#fff !important; border-color:#e2e8f0 !important; }
[data-theme="light"] .vds-step:hover { border-color:#6ee7b7 !important; }
[data-theme="light"] .vds-step-title { color:#1e293b !important; }
[data-theme="light"] .vds-step-desc { color:#475569 !important; }
[data-theme="light"] .vds-step-num { color:#e2e8f0 !important; }
[data-theme="light"] .vds-step-tag { background:#f1f5f9 !important; border-color:#e2e8f0 !important; color:#64748b !important; }
[data-theme="light"] .vds-step-tag-green { background:#d1fae5 !important; border-color:#6ee7b7 !important; color:#065f46 !important; }
[data-theme="light"] .vds-step-icon { background:#d1fae5 !important; border-color:#6ee7b7 !important; color:#065f46 !important; }

/* VDS güvenlik kartları */
[data-theme="light"] .feat-card { background:#fff !important; border-color:#e2e8f0 !important; }

/* Premium VDS karşılaştırma inline table */
[data-theme="light"] table td[style*="background:#0d1117"],
[data-theme="light"] table [style*="background:#141920"] {
  background:#fff !important;
}
[data-theme="light"] table [style*="color:#e8e6e1"] { color:#1e293b !important; }
[data-theme="light"] table [style*="color:#8892a4"] { color:#64748b !important; }
[data-theme="light"] table [style*="background:#1c2330"] { background:#f1f5f9 !important; }
[data-theme="light"] table [style*="border-bottom:1px solid #1c2330"] { border-color:#f1f5f9 !important; }

/* Genel inline style override for light mode */
[data-theme="light"] [style*="background:#080c10"] { background:#f8fafc !important; }
[data-theme="light"] [style*="background:#0d1117"] { background:#f8fafc !important; }
[data-theme="light"] [style*="background:#141920"] { background:#fff !important; }
[data-theme="light"] [style*="background:#1c2330"] { background:#f1f5f9 !important; }
[data-theme="light"] [style*="color:#e8e6e1"] { color:#1e293b !important; }
[data-theme="light"] [style*="color:#8892a4"] { color:#64748b !important; }
[data-theme="light"] [style*="color:#5a6a7e"] { color:#94a3b8 !important; }
[data-theme="light"] [style*="border:1px solid #252e3d"] { border-color:#e2e8f0 !important; }
[data-theme="light"] [style*="border:1px solid #1c2330"] { border-color:#f1f5f9 !important; }
[data-theme="light"] [style*="border-bottom:2px solid #252e3d"] { border-color:#e2e8f0 !important; }
[data-theme="light"] [style*="border-top:1px solid #1c2330"] { border-color:#e2e8f0 !important; }

/* Section backgrounds */
[data-theme="light"] section[style*="background:#080c10"],
[data-theme="light"] section[style*="background:#0d1117"] { background:#fff !important; }
[data-theme="light"] div[style*="background:#080c10"],
[data-theme="light"] div[style*="background:#0d1117"] { background:#f8fafc !important; }




  .vds-detail-inner { padding: 16px 12px 20px; }
}

/* ══════════════════════════════════════════════════════════
   DOMAIN ARAMA KUTUSU
   ══════════════════════════════════════════════════════════ */
.domain-search-box {
  width: 100%;
  max-width: 720px;
}
.domain-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #141920;
  border: 1.5px solid #252e3d;
  border-radius: 14px;
  padding: 8px 8px 8px 20px;
  margin-bottom: 16px;
  transition: border-color .2s;
}
.domain-input-wrap:focus-within {
  border-color: rgba(0,230,118,.5);
  box-shadow: 0 0 0 3px rgba(0,230,118,.08);
}
.domain-prefix {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.domain-prefix .prompt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  color: #00e676;
  font-weight: 700;
  flex-shrink: 0;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.domain-prefix input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.0625rem;
  font-family: 'JetBrains Mono', monospace;
  color: #e8e6e1;
  padding: 8px 0;
}
.domain-prefix input::placeholder { color: #5a6a7e; }
.ext-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ext-chip {
  display: inline-flex;
  align-items: center;
  background: #1c2330;
  border: 1px solid #252e3d;
  border-radius: 8px;
  padding: 6px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8125rem;
  color: #8892a4;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.ext-chip:hover {
  background: #252e3d;
  color: #e8e6e1;
  border-color: #3a4555;
}
.ext-chip.active {
  background: rgba(0,230,118,.12);
  border-color: rgba(0,230,118,.35);
  color: #00e676;
  font-weight: 600;
}

/* Light mode */
[data-theme="light"] .domain-input-wrap {
  background: #fff;
  border-color: #e2e8f0;
}
[data-theme="light"] .domain-input-wrap:focus-within {
  border-color: #00c18a;
  box-shadow: 0 0 0 3px rgba(0,193,138,.1);
}
[data-theme="light"] .domain-prefix input { color: #1e293b; }
[data-theme="light"] .domain-prefix input::placeholder { color: #94a3b8; }
[data-theme="light"] .ext-chip {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}
[data-theme="light"] .ext-chip:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}
[data-theme="light"] .ext-chip.active {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46;
}

/* ══════════════════════════════════════════════════════════
   SÖZLEŞME SAYFASI
   ══════════════════════════════════════════════════════════ */
.sozlesme-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 16px 0 80px;
}
.sozlesme-intro {
  font-size: 1rem;
  color: #8892a4;
  line-height: 1.8;
  padding: 24px 28px;
  background: rgba(0,230,118,.05);
  border: 1px solid rgba(0,230,118,.15);
  border-left: 3px solid #00e676;
  border-radius: 10px;
  margin-bottom: 40px;
}
.sozlesme-section {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #1c2330;
}
.sozlesme-section:last-child { border-bottom: none; }
.sozlesme-h2 {
  font-family: 'Syne', sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  color: #e8e6e1;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sozlesme-h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background: #00e676;
  border-radius: 2px;
  flex-shrink: 0;
}
.sozlesme-p {
  font-size: .9375rem;
  color: #8892a4;
  line-height: 1.8;
  margin-bottom: 14px;
}
.sozlesme-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.sozlesme-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9375rem;
  color: #8892a4;
  line-height: 1.7;
  padding: 4px 0;
}
.sozlesme-list-item::before {
  content: '✓';
  color: #00e676;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.sozlesme-list-titled {
  flex-direction: column;
  background: #141920;
  border: 1px solid #1c2330;
  border-radius: 8px;
  padding: 14px 16px;
  gap: 6px;
}
.sozlesme-list-titled::before { display: none; }
.sozlesme-list-titled strong {
  color: #e8e6e1;
  font-size: .9rem;
  font-family: 'Syne', sans-serif;
}
.sozlesme-list-titled span {
  font-size: .875rem;
  color: #8892a4;
  line-height: 1.7;
}

/* Light mode */
[data-theme="light"] .sozlesme-intro {
  background: #f0fdf4;
  border-color: #86efac;
  color: #374151;
}
[data-theme="light"] .sozlesme-section { border-color: #f1f5f9; }
[data-theme="light"] .sozlesme-h2 { color: #1e293b; }
[data-theme="light"] .sozlesme-p { color: #475569; }
[data-theme="light"] .sozlesme-list-item { color: #475569; }
[data-theme="light"] .sozlesme-list-titled { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .sozlesme-list-titled strong { color: #1e293b; }
[data-theme="light"] .sozlesme-list-titled span { color: #475569; }

/* Gizlilik sayfası alt başlıklar */
.gizlilik-h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e8e6e1;
  margin: 20px 0 10px;
}
[data-theme="light"] .gizlilik-h3 { color: #1e293b; }

/* ══════════════════════════════════════════════════════════
   VDS PAKET SATIRLARI — Fotoğraf tasarımı
   ══════════════════════════════════════════════════════════ */
.vds-rows { display: flex; flex-direction: column; gap: 6px; }

.vds-row {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: border-color .2s, box-shadow .2s;
}
.vds-row:hover { border-color: #374151; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
.vds-row-pop { border-color: rgba(0,230,118,.3) !important; }
.vds-row-pop:hover { border-color: rgba(0,230,118,.55) !important; box-shadow: 0 4px 32px rgba(0,230,118,.1) !important; }
.vds-row-badge {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  background: #00e676; color: #000;
  font-size: .6rem; font-weight: 800;
  font-family: monospace; padding: 2px 14px;
  border-radius: 0 0 8px 8px;
  letter-spacing: .05em; white-space: nowrap; z-index: 2;
}

/* Ana satır grid — tam fotoğraftaki gibi */
.vds-row-main {
  display: grid;
  grid-template-columns: 140px 1fr 1fr 1fr 180px 120px 40px;
  align-items: center;
  gap: 0;
  padding: 0;
  cursor: pointer;
  min-height: 72px;
}

/* Paket adı */
.vds-row-name {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #f9fafb;
  padding: 20px 20px;
  border-right: 1px solid #1f2937;
}

/* Spec kolonları */
.vds-row-spec {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px;
  border-right: 1px solid #1f2937;
  height: 100%;
}
.vds-row-spec svg { color: #4b5563; flex-shrink: 0; }
.vds-row-spec strong {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  color: #f9fafb;
  line-height: 1.2;
  white-space: nowrap;
}
.vds-row-spec span {
  display: block;
  font-size: .75rem;
  color: #6b7280;
  margin-top: 1px;
  white-space: nowrap;
}

/* Fiyat */
.vds-row-price-wrap {
  padding: 20px 20px;
  border-right: 1px solid #1f2937;
  text-align: right;
}
.vds-row-old {
  font-size: .8125rem;
  color: #6b7280;
  text-decoration: line-through;
  font-family: monospace;
  line-height: 1;
  margin-bottom: 3px;
}
.vds-row-price {
  font-family: 'Syne', sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  color: #f9fafb;
  line-height: 1;
  white-space: nowrap;
}
.vds-row-price span {
  font-size: .8rem;
  font-weight: 400;
  color: #9ca3af;
}

/* Satın Al butonu */
.vds-row-btn {
  margin: 0 12px;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: .875rem !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
}

/* Ok butonu */
.vds-row-toggle {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: #6b7280; cursor: pointer;
  transition: color .15s, transform .25s;
  margin: 0 auto;
}
.vds-row-toggle:hover { color: #f9fafb; }
.vds-row.open .vds-row-toggle { transform: rotate(180deg); color: #00e676; }

/* Detay paneli */
.vds-row-detail {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.vds-row.open .vds-row-detail { max-height: 2000px; opacity: 1; }

.vds-detail-inner {
  background: #0d1117;
  border-top: 1px solid #1f2937;
  padding: 24px;
}
.vds-detail-desc { font-size: .9rem; color: #9ca3af; line-height: 1.6; margin-bottom: 16px; }
.vds-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.vds-detail-item {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 12px 14px;
}
.vds-detail-item span {
  display: block;
  font-family: monospace;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  margin-bottom: 5px;
}
.vds-detail-item strong {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: #f9fafb;
  word-break: break-word;
}

/* Specs wrap (mobil için) */
.vds-row-specs-wrap { display: contents; }

/* LIGHT MODE */
[data-theme="light"] .vds-row { background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .vds-row:hover { border-color: #d1d5db; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
[data-theme="light"] .vds-row-pop { border-color: #6ee7b7 !important; background: #f0fdf4 !important; }
[data-theme="light"] .vds-row-name { color: #111827; border-color: #f3f4f6; }
[data-theme="light"] .vds-row-spec { border-color: #f3f4f6; }
[data-theme="light"] .vds-row-spec svg { color: #9ca3af; }
[data-theme="light"] .vds-row-spec strong { color: #111827; }
[data-theme="light"] .vds-row-spec span { color: #6b7280; }
[data-theme="light"] .vds-row-price-wrap { border-color: #f3f4f6; }
[data-theme="light"] .vds-row-old { color: #9ca3af; }
[data-theme="light"] .vds-row-price { color: #111827; }
[data-theme="light"] .vds-row-price span { color: #6b7280; }
[data-theme="light"] .vds-row-toggle { color: #9ca3af; }
[data-theme="light"] .vds-row-toggle:hover { color: #111827; }
[data-theme="light"] .vds-row.open .vds-row-toggle { color: #059669; }
[data-theme="light"] .vds-detail-inner { background: #f9fafb; border-color: #e5e7eb; }
[data-theme="light"] .vds-detail-desc { color: #6b7280; }
[data-theme="light"] .vds-detail-item { background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .vds-detail-item span { color: #9ca3af; }
[data-theme="light"] .vds-detail-item strong { color: #111827; }
[data-theme="light"] .vds-row .btn-ghost { background: #f9fafb; border-color: #d1d5db; color: #374151; }
[data-theme="light"] .vds-row .btn-ghost:hover { border-color: #059669; color: #059669; background: #f0fdf4; }
[data-theme="light"] .vds-row .btn-primary { background: #059669; border-color: #059669; color: #fff; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .vds-row-main { grid-template-columns: 130px 1fr 1fr 1fr 160px 100px 36px; }
  .vds-row-spec { padding: 18px 14px; }
  .vds-row-name { padding: 18px 16px; }
}
@media (max-width: 900px) {
  .vds-row-main {
    display: flex;
    flex-wrap: wrap;
    padding: 16px;
    gap: 12px;
    cursor: pointer;
  }
  .vds-row-name { font-size: .9375rem; padding: 0; border: none; width: 100%; }
  .vds-row-specs-wrap { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
  .vds-row-spec { border: none; padding: 0; gap: 8px; }
  .vds-row-price-wrap { border: none; padding: 0; margin-left: auto; text-align: right; }
  .vds-row-btn { padding: 8px 14px !important; font-size: .8rem !important; }
  .vds-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .vds-detail-inner { padding: 16px; }
}
@media (max-width: 550px) {
  .vds-detail-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   VDS FEAT KARTLARI
   ══════════════════════════════════════════════════════════ */
.feat-card {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 14px;
  padding: 28px 24px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.feat-card:hover {
  border-color: rgba(0,230,118,.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.feat-icon {
  font-size: 1.875rem;
  margin-bottom: 16px;
  display: block;
}
[data-theme="light"] .feat-card {
  background: #fff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
[data-theme="light"] .feat-card:hover {
  border-color: #6ee7b7;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════════════════════════
   LİSANS KARTLARI
   ══════════════════════════════════════════════════════════ */
.lic-card {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lic-card:hover {
  border-color: #374151;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.lic-card-featured {
  border-color: rgba(99,102,241,.35);
  background: linear-gradient(160deg,#111827,rgba(99,102,241,.05));
}
.lic-card-featured:hover { border-color: rgba(99,102,241,.6); }
.lic-popular {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg,#818cf8,#c4b5fd);
  color: #0d0d1a;
  font-size: .65rem; font-weight: 800;
  font-family: monospace;
  padding: 3px 14px;
  border-radius: 100px;
  white-space: nowrap;
}
.lic-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 14px;
  border: 1px solid;
}
.lic-name {
  font-family: 'Syne', sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  color: #f9fafb;
  margin: 0;
}
.lic-desc {
  font-size: .9rem;
  color: #9ca3af;
  line-height: 1.65;
  margin: 0;
}
.lic-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.lic-feat {
  font-size: .875rem;
  color: #d1d5db;
  padding: 7px 0;
  border-bottom: 1px solid #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lic-feat:last-child { border-bottom: none; }
.lic-price-note {
  font-size: .8rem;
  color: #6b7280;
  font-family: monospace;
  padding: 8px 12px;
  background: #0d1117;
  border-radius: 8px;
  border: 1px solid #1f2937;
}
.lic-btn { margin-top: auto; }

[data-theme="light"] .lic-card { background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .lic-card:hover { border-color: #d1d5db; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
[data-theme="light"] .lic-name { color: #111827; }
[data-theme="light"] .lic-desc { color: #6b7280; }
[data-theme="light"] .lic-feat { color: #374151; border-color: #f3f4f6; }
[data-theme="light"] .lic-price-note { background: #f9fafb; border-color: #e5e7eb; color: #9ca3af; }

/* ══════════════════════════════════════════════════════════
   LİSANS SATIR & BUNDLE
   ══════════════════════════════════════════════════════════ */
.lic-row {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  align-items: center;
  gap: 16px;
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 12px;
  padding: 14px 20px;
  transition: border-color .15s, box-shadow .15s;
}
.lic-row:hover { border-color: #374151; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.lic-row-logo {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.lic-row-logo svg { width: 100%; height: 22px; }
.lic-row-info { min-width: 0; }
.lic-row-name {
  font-family: 'Syne', sans-serif;
  font-size: .9375rem;
  font-weight: 700;
  color: #f9fafb;
  margin-bottom: 2px;
}
.lic-row-desc {
  font-size: .8125rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lic-row-price {
  font-family: 'Syne', sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}
.lic-row-price span { font-size: .75rem; font-weight: 400; color: #6b7280; }
.lic-row-btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .lic-row {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
  }
  .lic-row-logo { grid-row: 1; grid-column: 1; }
  .lic-row-info { grid-row: 1; grid-column: 2; }
  .lic-row-info .lic-row-desc { white-space: normal; }
  .lic-row-price { grid-row: 2; grid-column: 1; font-size: 1rem; align-self: center; }
  .lic-row-btn { grid-row: 2; grid-column: 2; justify-self: end; align-self: center; }
}

/* Bundle kartları */
.bundle-card {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.bundle-card:hover {
  border-color: #374151;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.bundle-popular {
  border-color: rgba(0,230,118,.35) !important;
  background: linear-gradient(160deg,#111827,rgba(0,230,118,.04));
}
.bundle-popular:hover { border-color: rgba(0,230,118,.6) !important; }
.bundle-badge {
  position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%);
  background: #00e676; color: #000;
  font-size: .65rem; font-weight: 800;
  font-family: monospace;
  padding: 3px 14px; border-radius: 100px; white-space: nowrap;
}
.bundle-name {
  font-family: 'Syne', sans-serif;
  font-size: 1.0625rem; font-weight: 800;
  margin: 0;
}
.bundle-desc { font-size: .875rem; color: #9ca3af; margin: 0; line-height: 1.6; }
.bundle-items {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 0;
  border-top: 1px solid #1f2937;
  border-bottom: 1px solid #1f2937;
  flex: 1;
}
.bundle-item {
  display: flex; align-items: center; gap: 8px;
  font-size: .875rem; color: #d1d5db;
}
.bundle-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto;
}
.bundle-price {
  font-family: 'Syne', sans-serif;
  font-size: 1.375rem; font-weight: 800; color: #f9fafb; line-height: 1;
}
.bundle-price span { font-size: .8rem; font-weight: 400; color: #6b7280; }
.bundle-save { font-size: .75rem; color: #00e676; font-family: monospace; margin-top: 3px; }

/* Light mode */
[data-theme="light"] .lic-row { background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .lic-row:hover { border-color: #d1d5db; }
[data-theme="light"] .lic-row-name { color: #111827 !important; }
[data-theme="light"] .lic-row-desc { color: #4b5563 !important; }
[data-theme="light"] .lic-row-price { color: #111827 !important; }
[data-theme="light"] .lic-row-price span { color: #6b7280 !important; }
[data-theme="light"] .bundle-card { background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .bundle-card:hover { border-color: #d1d5db; }
[data-theme="light"] .bundle-desc { color: #6b7280; }
[data-theme="light"] .bundle-item { color: #374151; }
[data-theme="light"] .bundle-items { border-color: #f3f4f6; }
[data-theme="light"] .bundle-price { color: #111827; }

/* duplicate 640px block removed — grid rules above handle mobile layout */