:root{
  --bg: #0b0f14;
  --bg-elev: #0f1520cc;
  --text: #e6e9ef;
  --muted: #9aa4b2;
  --primary: #7c3aed;
  --primary-2: #22d3ee;
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f8fb; --bg-elev:#ffffffb3; --text:#111827; --muted:#4b5563; --glass:rgba(0,0,0,0.04); --border:rgba(0,0,0,0.1);} 
}
[data-theme="light"]{ --bg:#f7f8fb; --bg-elev:#ffffffb3; --text:#111827; --muted:#4b5563; --glass:rgba(0,0,0,0.04); --border:rgba(0,0,0,0.1);} 

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--text); background:
    radial-gradient(1200px 800px at 20% -10%, rgba(124,58,237,0.22), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, rgba(34,211,238,0.18), transparent 60%),
    radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,0.75), rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.95) 70%),
    var(--bg);
}
.site-header, .hero, .section, .site-footer{ position:relative; z-index:2 }
#bg3d{ position:fixed; inset:0; z-index:1; pointer-events:none }
#bgTint{ position:fixed; inset:0; z-index:0; pointer-events:none; background:
  radial-gradient(1000px 600px at 15% 0%, rgba(124,58,237,0.12), transparent 60%),
  radial-gradient(900px 600px at 85% 5%, rgba(34,211,238,0.10), transparent 60%),
  radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,0.7), rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.95) 70%);
  animation:bgHue 36s linear infinite }
@keyframes bgHue{
  0%{ filter:hue-rotate(0deg) }
  25%{ filter:hue-rotate(90deg) }
  50%{ filter:hue-rotate(180deg) }
  75%{ filter:hue-rotate(270deg) }
  100%{ filter:hue-rotate(360deg) }
}
.wa-fab{ position:fixed; left:18px; bottom:18px; z-index:3; width:56px; height:56px; border-radius:16px; border:1px solid rgba(255,255,255,0.12); cursor:pointer; background:linear-gradient(180deg, rgba(37,211,102,0.95), rgba(18,140,126,0.95)); color:#fff; box-shadow:0 12px 28px rgba(0,0,0,0.35); display:grid; place-items:center }
.wa-fab:hover{ transform: translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,0.45) }
@media (max-width: 980px){ .wa-fab{ width:48px; height:48px; left:12px; bottom:12px } }
.container{ width:min(1280px, 92%); margin-inline:auto }
.site-header{ position:sticky; top:0; z-index:20; backdrop-filter:saturate(140%) blur(10px); background:var(--bg-elev); border-bottom:1px solid var(--border); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0 }
.brand{ color:var(--text); text-decoration:none; font-weight:700; letter-spacing:0.2px }
.nav{ display:flex; align-items:center; gap:18px }
.nav a{ color:var(--muted); text-decoration:none }
.nav a:hover{ color:var(--text) }
.nav .cta{ padding:8px 14px; border:1px solid var(--border); border-radius:999px }
.nav.nav-pill{ padding:6px; border:1px solid var(--border); border-radius:999px; background:var(--glass) }
.nav.nav-pill a{ padding:8px 12px; border-radius:999px }
.nav.nav-pill a:hover{ background:rgba(255,255,255,0.06) }
.nav-full{ flex:1; margin-left:24px; display:flex; align-items:center; gap:12px }
.nav-full{ justify-content:flex-end }
.nav-full #langSelect{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:8px 32px 8px 12px; border-radius:999px; border:1px solid var(--border); color:var(--text); background:
  linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), var(--bg-elev);
  cursor:pointer; font-weight:600; letter-spacing:0.2px }
.nav-full #langSelect:hover{ background:linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)), var(--bg-elev) }
.nav-full #langSelect:focus{ outline:2px solid rgba(124,58,237,0.5); outline-offset:2px }
/* Özel ok ikonu */
.nav-full #langSelect{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:14px }
#themeToggle{ transition: transform .15s ease, box-shadow .2s ease }
#themeToggle:hover{ transform: translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,0.25) }
#themeToggle:focus{ outline:2px solid rgba(124,58,237,0.5); outline-offset:2px }
.social{ display:flex; align-items:center; gap:8px; margin:0 8px }
.icon{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; border:1px solid var(--border); color:var(--text); text-decoration:none; font-size:13px; line-height:1; background:var(--glass); text-align:center }
.icon:hover{ background:rgba(255,255,255,0.08) }
#themeToggle{ background:transparent; border:1px solid var(--border); color:var(--text); padding:8px 12px; border-radius:999px; cursor:pointer }

.hero{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:48px; align-items:center; padding:104px 0 56px }
.hero-content{ padding:44px; border:1px solid var(--border); border-radius:32px; position:relative; overflow:hidden; display:grid; gap:14px }
.hero-content::after{ content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:inherit; background: conic-gradient(from 180deg at 50% 50%, rgba(124,58,237,0.25), rgba(34,211,238,0.25), transparent 30%); filter: blur(30px); opacity:0.6 }
.hero .eyebrow{ color:var(--muted); font-size:14px; letter-spacing:0.4px; text-transform:uppercase; margin-bottom:8px }
.hero h1{ font-size:clamp(40px, 7vw, 80px); line-height:1.04; margin:0 0 16px }
.hero .subtitle{ display:block; font-size:clamp(14px, 2.4vw, 18px); color:var(--muted); font-weight:500; margin-top:6px }
.gradient{ background:linear-gradient(90deg, var(--primary), var(--primary-2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.gradient{ background-size:200% 200%; animation:gradientShift 8s ease infinite }
@keyframes gradientShift{ 0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% } }
.hero p{ color:var(--muted); font-size:clamp(15px, 2.5vw, 18px); max-width:60ch }
.hero-actions{ display:flex; gap:12px; margin:22px 0 12px; flex-wrap:wrap }
.button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:12px; border:1px solid var(--border); color:var(--text); text-decoration:none; background:transparent }
.button.primary{ background:linear-gradient(135deg, rgba(124,58,237,0.9), rgba(34,211,238,0.9)); border:none }
.button.small{ padding:8px 12px; font-size:14px }

.metrics{ display:grid; grid-template-columns:repeat(3, minmax(120px,1fr)); gap:18px; margin-top:16px }
.metric{ padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--glass) }
.metric .num{ font-size:32px; font-weight:800 }
.metric .label{ color:var(--muted); font-size:12px }

.hero-visual{ position:relative; display:grid; place-items:center }
.hero-visual-stage{ position:relative; width:100%; aspect-ratio: 1 / 1; display:grid; place-items:center }
.orb{ position:absolute; inset:auto; width:min(60%, 360px); height:min(60%, 360px); border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(124,58,237,0.65), rgba(34,211,238,0.55)); filter:blur(30px); opacity:0.55; animation:float 8s ease-in-out infinite }
.avatar{ position:relative; width:min(70%, 380px); aspect-ratio: 1 / 1; border-radius:24px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border:1px solid var(--border); box-shadow:var(--shadow) }
.avatar .ring{ position:absolute; inset:14px; border-radius:inherit; border:1px dashed rgba(255,255,255,0.25); animation:spin 18s linear infinite }
.avatar .inner{ width:65%; height:65%; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), rgba(0,0,0,0)); box-shadow: inset 0 0 40px rgba(255,255,255,0.1) }
@keyframes spin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
.code-card{ position:absolute; bottom:-2%; right:-4%; width:70%; max-width:520px }
.code-ide{ padding:0 }
.code-header{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) }
.code-header .dot{ width:10px; height:10px; border-radius:50% }
.code-header .dot.red{ background:#ff5f56 }
.code-header .dot.yellow{ background:#ffbd2e }
.code-header .dot.green{ background:#27c93f }
.code-header .file{ margin-left:auto; color:var(--muted); font-size:12px }
.code pre{ margin:0; padding:14px }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
.card{ border-radius:var(--radius); border:1px solid var(--border); background:var(--glass); box-shadow:var(--shadow); overflow:hidden }
.card .code{ padding:18px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:14px; color:var(--muted) }
.card pre{ margin:8px 0 0; color:var(--text) }

/* Hero dekoratif arkaplan */
.hero::before{ content:""; position:absolute; inset:0 -6vw; z-index:0; pointer-events:none; background:
  radial-gradient(800px 400px at 20% 10%, rgba(124,58,237,0.20), transparent 60%),
  radial-gradient(800px 400px at 90% 20%, rgba(34,211,238,0.18), transparent 60%);
}
.hero > *{ position:relative; z-index:1 }

/* Scroll indicator */
.scroll-indicator{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); text-decoration:none; margin-top:10px }
.scroll-indicator .dot{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:bounce 1.6s infinite }
@keyframes bounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }

.section{ padding:56px 0 }
.section-title{ font-size:clamp(22px, 3.5vw, 32px); margin:0 0 18px }
.lead{ color:var(--muted); font-size:18px }
/* about özel arkaplan kaldırıldı; diğer bölümlerle aynı tasarım kullanılıyor */
.features{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:18px }
.feature{ padding:18px }

.tags{ display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none }
.tags li{ padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--glass) }

.grid.projects{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.price{ padding:18px; border-radius:16px; border:1px solid var(--border); text-align:center }
.price .amount{ font-size:32px; font-weight:800; margin:6px 0 10px }
.price .amount span{ font-size:18px; opacity:0.8; margin-right:2px }
.features-list{ list-style:none; padding:0; margin:0 0 12px; display:grid; gap:8px; color:var(--muted) }
.price.highlight{ outline:2px solid rgba(124,58,237,0.4) }
.testimonials-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.testimonial{ padding:18px; border-radius:16px; border:1px solid var(--border) }
.t-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
.t-avatar{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, rgba(124,58,237,0.5), rgba(34,211,238,0.5)); color:white; font-weight:700 }
.t-role{ color:var(--muted); font-size:13px }
.security-section{ position:relative; border-radius:24px; padding:36px 24px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border:1px solid var(--border) }
.security-section::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background: radial-gradient(600px 240px at 10% 0%, rgba(124,58,237,0.25), transparent 60%), radial-gradient(500px 200px at 90% 0%, rgba(34,211,238,0.22), transparent 60%); opacity:0.6; filter: blur(20px) }
.button.whatsapp{ background:linear-gradient(135deg, #25D366, #128C7E); border:none; color:white }
.project .card-body{ padding:18px }
.project .card-footer{ padding:12px 18px; display:flex; gap:8px; border-top:1px solid var(--border) }

.timeline{ display:grid; gap:14px }
.timeline .item{ padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--glass) }
.timeline .when{ color:var(--muted); font-size:13px }

/* Experience redesign */
.exp-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.exp-card{ padding:18px; border-radius:16px; border:1px solid var(--border); background:var(--glass); box-shadow:var(--shadow) }
.exp-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px }
.exp-when{ color:var(--muted); font-size:13px }
.exp-tags{ display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; margin:10px 0 0 }
.exp-tags li{ padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.04); font-size:12px }

/* Security */
.security-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }

.badge{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:linear-gradient(135deg, rgba(124,58,237,0.2), rgba(34,211,238,0.2)); border:1px solid var(--border); color:var(--text); font-size:12px; margin-right:6px }

.site-footer{ padding:28px 0; border-top:1px solid var(--border); color:var(--muted) }

.glass{ backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); background:linear-gradient(180deg, rgba(249,115,22,0.14), rgba(249,115,22,0.06)), var(--bg-elev) }

.reveal{ opacity:0; transform: translateY(8px); will-change: opacity, transform }
.reveal.visible{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1) }

.tilt{ transform-style: preserve-3d }

@media (max-width: 980px){
  .header-inner{ padding:10px 0 }
  .nav.nav-pill{ overflow:auto hidden; max-width:100%; gap:6px }
  .nav-full{ margin-left:12px }
  .hero{ grid-template-columns:1fr; gap:20px; padding:72px 0 32px }
  .hero-content{ padding:24px; border-radius:20px }
  .hero h1{ font-size:clamp(32px, 9vw, 40px) }
  .hero .subtitle{ font-size:14px }
  .hero-actions{ flex-direction:column }
  .hero-actions .button{ width:100% }
  .metrics{ grid-template-columns:repeat(2, 1fr) }
  .code-card{ position:relative; right:auto; bottom:auto; width:100%; max-width:none; margin-top:8px }
  .features{ grid-template-columns:1fr }
  .grid.projects{ grid-template-columns:1fr }
  .pricing-grid{ grid-template-columns:1fr }
  .testimonials-grid{ grid-template-columns:1fr }
  .exp-grid{ grid-template-columns:1fr }
  .security-grid{ grid-template-columns:1fr }
}

/* Daha küçük ekranlar için ek kırılım */
@media (max-width: 640px){
  .container{ width:min(100%, 94%) }
  .section{ padding:40px 0 }
  .hero{ gap:16px; padding:64px 0 28px }
  .hero h1{ font-size:clamp(28px, 10vw, 34px); margin-bottom:12px }
  .hero .subtitle{ font-size:13px }
  .metrics{ grid-template-columns:1fr }
  .badge{ margin-bottom:6px }
  .wa-fab{ width:46px; height:46px }
}