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

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-card: #1a1a1a;
    --accent: #E30A17;
    --accent-light: #ff2d3a;
    --accent-dark: #b80812;
    --accent-glow: rgba(227,10,23,0.3);
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    --border: #333333;
    --success: #4ade80;
    --gradient: linear-gradient(135deg,#E30A17,#ff2d3a,#b80812);
    --shadow: 0 4px 20px rgba(227,10,23,0.1);
    --shadow-lg: 0 8px 40px rgba(227,10,23,0.15);
    --radius: 12px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:80px }
body { font-family:'Nunito',sans-serif; background:var(--bg-primary); color:var(--text-primary); line-height:1.6; overflow-x:hidden }
::selection { background:var(--accent); color:var(--bg-primary) }
::-webkit-scrollbar { width:8px }
::-webkit-scrollbar-track { background:var(--bg-secondary) }
::-webkit-scrollbar-thumb { background:var(--accent-dark); border-radius:4px }

a { color:var(--accent); text-decoration:none; transition:0.3s }
a:hover { color:var(--accent-light) }
img { max-width:100%; display:block }
.container { max-width:1200px; margin:0 auto; padding:0 20px }

.preloader { position:fixed; inset:0; background:var(--bg-primary); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:99999; transition:opacity .5s,visibility .5s }
.preloader.hidden { opacity:0; visibility:hidden }
.preloader-flag { font-size:80px; animation:flagWave 1.5s ease-in-out infinite }
@keyframes flagWave { 0%,100%{transform:rotate(-5deg) scale(1)} 25%{transform:rotate(5deg) scale(1.1)} 50%{transform:rotate(-3deg) scale(1)} 75%{transform:rotate(3deg) scale(1.05)} }
.preloader-text { margin-top:20px; font-family:'Fira Code',monospace; color:var(--accent); font-size:14px; letter-spacing:2px }
.preloader-bar { width:200px; height:3px; background:var(--bg-card); border-radius:3px; margin-top:15px; overflow:hidden }
.preloader-bar::after { content:''; display:block; width:100%; height:100%; background:var(--gradient); animation:loading 1.5s ease-in-out infinite; transform-origin:left }
@keyframes loading { 0%{transform:scaleX(0)} 50%{transform:scaleX(1)} 100%{transform:scaleX(0);transform-origin:right} }

.particles-container { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.particle { position:absolute; width:4px; height:4px; background:var(--accent); border-radius:50%; opacity:0; animation:floatParticle 8s infinite }
@keyframes floatParticle { 0%{opacity:0;transform:translateY(100vh) scale(0)} 10%{opacity:.6} 90%{opacity:.6} 100%{opacity:0;transform:translateY(-10vh) scale(1)} }

.header { position:fixed; top:0; left:0; width:100%; z-index:1000; background:rgba(10,10,10,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid transparent; transition:0.3s }
.header.scrolled { background:rgba(10,10,10,.95); border-bottom-color:var(--border); box-shadow:0 4px 30px rgba(0,0,0,.3) }
.header-inner { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:70px }

.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-primary) }
.logo-icon { font-size:28px }
.logo-text { font-size:18px; font-weight:800; letter-spacing:1px }
.logo-text span { color:var(--accent) }

nav { display:flex; align-items:center }
.nav-links { display:flex; align-items:center; gap:24px; list-style:none }
.nav-links a { color:var(--text-secondary); font-size:14px; font-weight:600; transition:0.3s }
.nav-links a:hover { color:var(--accent) }
.nav-cta { background:var(--gradient); color:var(--bg-primary)!important; padding:8px 20px; border-radius:8px; font-weight:700!important }
.nav-cta:hover { transform:translateY(-2px); box-shadow:var(--shadow) }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; z-index:1001 }
.hamburger span { width:24px; height:2px; background:var(--text-primary); transition:0.3s }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.hamburger.active span:nth-child(2) { opacity:0 }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }

.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:100px 20px 60px; z-index:1 }
.hero-content { max-width:800px; text-align:center }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:rgba(255,140,0,.1); border:1px solid var(--border); border-radius:50px; font-size:13px; color:var(--accent); margin-bottom:24px }
.pulse { width:8px; height:8px; background:var(--accent); border-radius:50%; animation:pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }
.badge-tag { background:var(--accent); color:var(--bg-primary); padding:2px 8px; border-radius:50px; font-size:11px; font-weight:700 }

.hero h1 { font-size:3.2rem; font-weight:900; line-height:1.1; margin-bottom:20px }
.gradient-text { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.emoji-float { animation:emojiFloat 3s ease-in-out infinite; display:inline-block }
@keyframes emojiFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.hero-desc { font-size:1.1rem; color:var(--text-secondary); margin-bottom:30px; line-height:1.7 }
.hero-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:40px }

.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; border-radius:10px; font-weight:700; font-size:15px; cursor:pointer; border:none; transition:0.3s; text-decoration:none; font-family:inherit }
.btn-primary { background:var(--gradient); color:var(--bg-primary) }
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); color:var(--bg-primary) }
.btn-secondary { background:transparent; color:var(--text-primary); border:2px solid var(--border) }
.btn-secondary:hover { border-color:var(--accent); color:var(--accent) }
.btn-sm { padding:8px 18px; font-size:13px }

.terminal { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:30px; text-align:left; max-width:600px; margin-left:auto; margin-right:auto }
.terminal-header { display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--bg-secondary); border-bottom:1px solid var(--border) }
.terminal-dot { width:10px; height:10px; border-radius:50% }
.terminal-dot.red { background:#ff5f57 }
.terminal-dot.yellow { background:#febc2e }
.terminal-dot.green { background:#28c840 }
.terminal-title { font-family:'Fira Code',monospace; font-size:12px; color:var(--text-muted); margin-left:8px }
.terminal-body { padding:16px; font-family:'Fira Code',monospace; font-size:13px; min-height:120px; line-height:1.8 }
.terminal-line { margin-bottom:4px }
.terminal-line .prompt { color:var(--accent) }
.terminal-line .result { color:var(--success) }
.terminal-line .info { color:var(--text-muted) }
.terminal-cursor { display:inline-block; width:8px; height:16px; background:var(--accent); animation:blink 1s infinite; vertical-align:middle }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px }
.stat-item { text-align:center }
.stat-number { font-family:'Fira Code',monospace; font-size:2rem; font-weight:700; color:var(--accent) }
.stat-label { font-size:13px; color:var(--text-muted); margin-top:4px }

.marquee-section { overflow:hidden; padding:14px 0; background:var(--bg-secondary); border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; z-index:1 }
.marquee-track { display:flex; gap:30px; white-space:nowrap; animation:marquee 25s linear infinite; width:max-content }
.marquee-item { display:flex; align-items:center; gap:8px; font-family:'Fira Code',monospace; font-size:13px; color:var(--text-muted); letter-spacing:1px }
.marquee-item .dot { width:6px; height:6px; background:var(--accent); border-radius:50% }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.section { padding:80px 0; position:relative; z-index:1 }
.section-header { text-align:center; margin-bottom:50px }
.section-header h2 { font-size:2rem; font-weight:800; margin-bottom:12px }
.section-header p { color:var(--text-secondary); font-size:1rem; max-width:600px; margin:0 auto }

.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.service-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:28px 20px; transition:0.3s; text-align:center }
.service-card:hover { border-color:var(--accent-dark); transform:translateY(-4px); box-shadow:var(--shadow) }
.service-icon { font-size:36px; display:block; margin-bottom:12px }
.service-card h3 { font-size:1rem; font-weight:700; margin-bottom:8px }
.service-card p { font-size:13px; color:var(--text-secondary); margin-bottom:16px; line-height:1.5 }

.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.feature-card { display:flex; align-items:flex-start; gap:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; transition:0.3s }
.feature-card:hover { border-color:var(--accent-dark); transform:translateY(-2px) }
.feature-icon { font-size:32px; flex-shrink:0 }
.feature-card h3 { font-size:1rem; font-weight:700; margin-bottom:6px }
.feature-card p { font-size:13px; color:var(--text-secondary); line-height:1.5 }

.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.step-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:32px 24px; text-align:center; position:relative; transition:0.3s }
.step-card:hover { border-color:var(--accent-dark); transform:translateY(-4px) }
.step-number { font-family:'Fira Code',monospace; font-size:48px; font-weight:700; color:rgba(255,140,0,.15); position:absolute; top:12px; right:16px }
.step-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:10px }
.step-card p { font-size:13px; color:var(--text-secondary); line-height:1.5 }

.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.pricing-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:32px 20px; text-align:center; transition:0.3s; position:relative }
.pricing-card:hover { border-color:var(--accent-dark); transform:translateY(-4px) }
.pricing-card.popular { border-color:var(--accent); box-shadow:var(--shadow-lg) }
.pricing-card.popular::before { content:'En Popüler'; position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--gradient); color:var(--bg-primary); padding:4px 16px; border-radius:50px; font-size:11px; font-weight:700 }
.pricing-card h3 { font-size:1rem; font-weight:700; margin-bottom:16px; color:var(--accent) }
.pricing-price { font-family:'Fira Code',monospace; font-size:2.5rem; font-weight:700; margin-bottom:20px }
.pricing-price .currency { font-size:1.2rem; color:var(--accent); vertical-align:top }
.pricing-price .period { display:block; font-size:12px; color:var(--text-muted); font-family:'Nunito',sans-serif; font-weight:400 }
.pricing-features { list-style:none; margin-bottom:24px; text-align:left }
.pricing-features li { padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:8px }
.pricing-features li::before { content:'✓'; color:var(--success); font-weight:700 }

.vip-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.vip-item { display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; font-size:14px; color:var(--text-secondary); transition:0.3s }
.vip-item:hover { border-color:var(--accent-dark); color:var(--text-primary); transform:translateY(-2px) }
.vip-icon { font-size:18px }

.payment-section { background:var(--bg-secondary) }
.payment-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start }
.payment-info h3 { font-size:1.3rem; font-weight:700; margin-bottom:14px }
.payment-info p { color:var(--text-secondary); font-size:14px; margin-bottom:10px; line-height:1.6 }
.payment-warning { background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3); border-radius:10px; padding:14px 18px; font-size:13px; color:var(--warning); margin-top:16px; line-height:1.6 }
.payment-warning a { color:var(--warning); text-decoration:underline }
.payment-methods { display:flex; flex-direction:column; gap:16px }
.payment-method { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; display:flex; align-items:center; gap:16px }
.method-icon { font-size:32px }
.payment-method h4 { font-size:15px; font-weight:700; margin-bottom:4px }
.payment-method p { font-size:13px; color:var(--text-muted); margin:0 }

.faq-list { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:10px }
.faq-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:0.3s }
.faq-item.active { border-color:var(--accent-dark) }
.faq-question { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; cursor:pointer; transition:0.3s }
.faq-question:hover { background:rgba(255,140,0,.05) }
.faq-question h3 { font-size:15px; font-weight:600 }
.faq-toggle { color:var(--accent); font-size:20px; font-weight:700; transition:0.3s }
.faq-item.active .faq-toggle { transform:rotate(45deg) }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease }
.faq-item.active .faq-answer { max-height:500px }
.faq-answer-inner { padding:0 20px 18px; font-size:14px; color:var(--text-secondary); line-height:1.7 }

.cta-section { padding:80px 20px; text-align:center; position:relative; z-index:1; background:var(--bg-secondary) }
.cta-content { max-width:600px; margin:0 auto }
.cta-content h2 { font-size:2rem; font-weight:800; margin-bottom:14px }
.cta-content p { color:var(--text-secondary); margin-bottom:20px }

.back-to-top { position:fixed; bottom:24px; right:24px; width:44px; height:44px; background:var(--accent); color:var(--bg-primary); border:none; border-radius:50%; font-size:18px; cursor:pointer; z-index:999; opacity:0; visibility:hidden; transform:translateY(20px); transition:0.3s; box-shadow:var(--shadow) }
.back-to-top.show { opacity:1; visibility:visible; transform:translateY(0) }
.back-to-top:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }

.footer { background:var(--bg-secondary); border-top:1px solid var(--border); padding:40px 0; position:relative; z-index:1 }
.footer-inner { max-width:1200px; margin:0 auto; padding:0 20px; text-align:center }
.footer-brand { font-size:18px; font-weight:800; margin-bottom:16px }
.footer-brand span { color:var(--accent) }
.footer-links { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-bottom:16px }
.footer-links a { color:var(--text-muted); font-size:14px; transition:0.3s }
.footer-links a:hover { color:var(--accent) }
.footer-copy { font-size:13px; color:var(--text-muted) }
.footer-copy strong { color:var(--accent) }
.heart { color:var(--danger) }

.fade-in { opacity:0; transform:translateY(30px); transition:opacity .6s ease,transform .6s ease }
.fade-in.visible { opacity:1; transform:translateY(0) }

.seo-section { background:var(--bg-secondary) }
.seo-content h2 { font-size:1.8rem; font-weight:800; margin-bottom:16px; color:var(--accent) }
.seo-content h3 { font-size:1.2rem; font-weight:700; margin:24px 0 10px; color:var(--text-primary) }
.seo-content p { color:var(--text-secondary); margin-bottom:12px; line-height:1.8; font-size:15px }
.seo-content strong { color:var(--accent-light) }
.seo-links { margin-top:30px; padding:24px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius) }
.seo-links h3 { color:var(--accent); margin-bottom:14px }
.seo-links ul { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.seo-links li { padding:6px 0 }
.seo-links a { color:var(--text-secondary); font-size:14px; transition:0.3s }
.seo-links a:hover { color:var(--accent) }

@media(max-width:1024px) {
    .services-grid { grid-template-columns:repeat(3,1fr) }
    .pricing-grid { grid-template-columns:repeat(2,1fr) }
    .vip-grid { grid-template-columns:repeat(3,1fr) }
    .payment-grid { grid-template-columns:1fr }
}

@media(max-width:768px) {
    .nav-links { position:fixed; top:0; right:-100%; width:280px; height:100vh; background:var(--bg-secondary); flex-direction:column; padding:80px 24px 24px; gap:16px; transition:0.3s; border-left:1px solid var(--border) }
    .nav-links.open { right:0 }
    .hamburger { display:flex }
    .hero h1 { font-size:2.2rem }
    .services-grid { grid-template-columns:repeat(2,1fr) }
    .features-grid { grid-template-columns:1fr }
    .steps-grid { grid-template-columns:1fr }
    .stats-bar { grid-template-columns:repeat(2,1fr) }
    .pricing-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto }
    .vip-grid { grid-template-columns:repeat(2,1fr) }
    .seo-links ul { grid-template-columns:1fr }
}

@media(max-width:480px) {
    .hero h1 { font-size:1.8rem }
    .hero-buttons { flex-direction:column }
    .btn { justify-content:center }
    .services-grid { grid-template-columns:1fr }
    .pricing-grid { grid-template-columns:1fr }
    .vip-grid { grid-template-columns:1fr }
}

/* ---- SUB-PAGE STYLES ---- */
.page-hero { padding:120px 20px 40px; text-align:center; background:var(--bg-secondary); border-bottom:1px solid var(--border); position:relative; z-index:1 }
.page-hero-content { max-width:800px; margin:0 auto }
.page-hero h1 { font-size:2.4rem; font-weight:900; margin-bottom:16px }
.page-hero .hero-desc { font-size:1.05rem; color:var(--text-secondary); margin-bottom:24px; line-height:1.7 }
.page-hero .hero-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap }

.breadcrumb { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; font-size:13px; color:var(--text-muted) }
.breadcrumb a { color:var(--accent) }
.breadcrumb a:hover { color:var(--accent-light) }

.page-service-detail { max-width:900px; margin:0 auto; padding:40px 20px 80px; position:relative; z-index:1 }
.page-service-detail h2 { font-size:1.6rem; font-weight:800; margin:32px 0 14px; color:var(--accent) }
.page-service-detail h3 { font-size:1.2rem; font-weight:700; margin:24px 0 10px; color:var(--text-primary) }
.page-service-detail p { color:var(--text-secondary); line-height:1.8; margin-bottom:14px; font-size:15px }
.page-service-detail strong { color:var(--accent-light) }
.page-service-detail ul { list-style:none; margin-bottom:20px }
.page-service-detail ul li { padding:8px 0; color:var(--text-secondary); display:flex; align-items:center; gap:10px; font-size:14px; border-bottom:1px solid var(--border) }
.page-service-detail ul li:last-child { border-bottom:none }
.page-service-detail ul li::before { content:'✓'; color:var(--success); font-weight:700; flex-shrink:0 }

.service-cta-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:28px; margin:32px 0; text-align:center }
.service-cta-box h3 { color:var(--accent); margin-bottom:10px; font-size:1.1rem }
.service-cta-box p { color:var(--text-secondary); margin-bottom:16px; font-size:14px }
.service-cta-box .btn { margin-top:8px }

.seo-links { margin-top:30px; padding:24px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius) }
.seo-links h3 { color:var(--accent); margin-bottom:14px; font-size:1.1rem }
.seo-links ul { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.seo-links li { padding:6px 0; border-bottom:none }
.seo-links li::before { display:none }
.seo-links a { color:var(--text-secondary); font-size:14px; transition:0.3s; display:flex; align-items:center; gap:6px }
.seo-links a:hover { color:var(--accent) }
.seo-links a::before { content:'→'; color:var(--accent); font-size:12px }

@media(max-width:768px) {
    .page-hero h1 { font-size:1.8rem }
    .page-service-detail ul li { font-size:13px }
    .seo-links ul { grid-template-columns:1fr }
}

/* ---- SEO CONTENT STYLES ---- */
.seo-content { color:var(--text-secondary); font-size:15px; line-height:1.8 }
.seo-content h2 { font-size:1.6rem; font-weight:800; margin:24px 0 14px; color:var(--accent) }
.seo-content h3 { font-size:1.2rem; font-weight:700; margin:20px 0 10px; color:var(--text-primary) }
.seo-content h4 { font-size:1rem; font-weight:600; margin:16px 0 8px; color:var(--accent) }
.seo-content p { margin-bottom:14px; color:var(--text-secondary) }
.seo-content strong { color:var(--accent-light) }
.seo-content ul { list-style:none; margin:16px 0 }
.seo-content ul li { padding:8px 0; color:var(--text-secondary); font-size:14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px }
.seo-content ul li:last-child { border-bottom:none }
.seo-content ul li::before { content:'✓'; color:var(--success); font-weight:700; flex-shrink:0 }
.seo-content a { color:var(--accent); text-decoration:none; transition:0.3s }
.seo-content a:hover { color:var(--accent-light); text-decoration:underline }

/* Internal links grid */
.seo-content ul[style*="grid"] li { border-bottom:none; padding:4px 0 }
.seo-content ul[style*="grid"] li::before { display:none }
.seo-content ul[style*="grid"] a { color:var(--text-secondary); font-size:13px }
.seo-content ul[style*="grid"] a:hover { color:var(--accent) }

/* SEO box */
.seo-content div[style*="background"] { background:var(--bg-card)!important; border-color:var(--border)!important }
.seo-content div[style*="background"] h3 { color:var(--accent)!important }
.seo-content div[style*="background"] p { color:var(--text-secondary)!important }
.seo-content div[style*="background"] strong { color:var(--accent-light)!important }
.seo-content div[style*="background"] a { color:var(--accent)!important }

/* Fix hero on sub-pages */
.hero[style*="min-height:auto"] { min-height:auto!important }
.hero[style*="min-height:auto"] .hero-content { max-width:800px }
.hero[style*="min-height:auto"] h1 { font-size:2.2rem; margin-bottom:16px }

@media(max-width:768px) {
    .seo-content h2 { font-size:1.3rem }
    .seo-content h3 { font-size:1.1rem }
    .seo-content ul li { font-size:13px }
}