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

:root{
  --void: #05060C;
  --void-2: #0A0E1D;
  --panel: #0F1428;
  --panel-glass: rgba(19,25,48,0.55);
  --border-glass: rgba(140,160,255,0.14);

  --electric: #5B7FFF;
  --electric-2: #8B5CF6;
  --cyan: #22D3EE;
  --violet: #C084FC;
  --gold: #E3C17E;

  --ink: #E9ECF7;
  --ink-soft: #A8B0C8;
  --slate: #7C86A3;

  --bg: #F5F6FB;
  --bg-panel: #FFFFFF;
  --light-ink: #10152B;
  --light-ink-soft: #4A5273;
  --light-border: rgba(16,21,43,0.09);

  --grad-primary: linear-gradient(135deg, var(--electric) 0%, var(--electric-2) 55%, var(--violet) 100%);
  --grad-text: linear-gradient(135deg, #8FB0FF 0%, #C7A6FF 60%, #F2C9FF 100%);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--light-ink);
  font-family: 'Manrope', -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  overflow-x: hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

.wordmark{ font-family: Optima, "Segoe UI", "Century Gothic", Futura, sans-serif; font-weight: 600; letter-spacing: 0.02em; }
.mono{ font-family: 'JetBrains Mono', monospace; }

h1,h2,h3{
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  text-wrap: balance;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(32px, 5vw, 56px); line-height: 1.08; }
h2{ font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; }
h3{ font-size: 20px; }
p{ color: var(--light-ink-soft); }

.container{ max-width: 1160px; margin: 0 auto; padding: 0 24px; }
section{ padding: clamp(56px, 9vw, 108px) 0; position: relative; }

.grad-text{
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--grad-primary); box-shadow: 0 0 12px var(--electric); }
.eyebrow.on-dark{ color: var(--cyan); }
.eyebrow.on-light{ color: var(--electric-2); }

/* ---------- dark shell (header / hero / footer) ---------- */
.dark-shell{
  background: var(--void);
  position: relative;
  overflow: hidden;
}
.tech-grid{
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(120,140,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,255,0.07) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 0%, transparent 75%);
}
.glow-orb{
  position: absolute; border-radius: 50%; filter: blur(70px); pointer-events:none;
  opacity: 0.55; animation: drift 14s ease-in-out infinite;
}
.glow-orb.a{ width: 420px; height: 420px; background: var(--electric); top: -120px; left: -100px; }
.glow-orb.b{ width: 380px; height: 380px; background: var(--violet); top: 40px; right: -120px; animation-delay: -6s; }
.glow-orb.c{ width: 300px; height: 300px; background: var(--cyan); bottom: -140px; left: 40%; opacity: 0.35; animation-delay: -3s; }
@keyframes drift{
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(20px,-24px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce){ .glow-orb{ animation: none; } }

header.site-header{ position: sticky; top:0; z-index: 60; backdrop-filter: blur(14px); background: rgba(5,6,12,0.72); border-bottom: 1px solid var(--border-glass); }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 24px; max-width:1160px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand svg{ height:52px; width:auto; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.08; }
.brand .wordmark{ font-size:26px; color: var(--ink); }
.brand .wordmark .deren{ color: var(--gold); }
.brand-sub{ font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color: var(--slate); margin-top:2px; font-weight:600; }
footer .brand-sub{ color: rgba(124,134,163,0.85); }
footer .brand svg{ height:44px; }
footer .brand .wordmark{ font-size:22px; }

nav.main-nav{ display:flex; gap:26px; flex-wrap:wrap; }
nav.main-nav a{ color: var(--ink-soft); font-size:14.5px; font-weight:600; padding:6px 2px; border-bottom:2px solid transparent; transition: color .15s, border-color .15s; }
nav.main-nav a:hover, nav.main-nav a.active{ color: var(--ink); border-color: var(--electric); }

.nav-toggle{ display:none; width:38px; height:38px; border-radius:9px; border:1px solid var(--border-glass); background:rgba(19,25,48,0.55); cursor:pointer; align-items:center; justify-content:center; flex-shrink:0; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:''; display:block; width:18px; height:2px; background: var(--ink); border-radius:2px; position:relative; transition: transform .2s, opacity .2s; }
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle.open span{ background: transparent; }
.nav-toggle.open span::before{ top:0; transform: rotate(45deg); }
.nav-toggle.open span::after{ top:0; transform: rotate(-45deg); }

@media (max-width: 860px){
  .header-row{ position: relative; flex-wrap: nowrap; }
  .nav-toggle{ display:flex; }
  nav.main-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:2px; background: var(--void-2);
    border-top:1px solid var(--border-glass); border-bottom:1px solid var(--border-glass);
    padding:10px 24px 16px; box-shadow: 0 16px 30px -12px rgba(0,0,0,0.5);
  }
  nav.main-nav.open{ display:flex; }
  nav.main-nav a{ padding:10px 2px; border-bottom:1px solid rgba(140,160,255,0.08); }
}

.hero{ padding: clamp(64px,10vw,120px) 24px clamp(72px,10vw,100px); position: relative; z-index: 1; }
.hero-inner{ max-width: 1160px; margin: 0 auto; text-align:center; }
.hero h1{ color: var(--ink); max-width: 880px; margin: 0 auto 20px; }
.hero p.lede{ color: var(--ink-soft); max-width: 620px; margin: 0 auto 34px; font-size: 17.5px; }

.btn-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:12px; font-weight:700; font-size:15px; transition: transform .15s, box-shadow .2s; border: none; cursor: pointer; font-family: 'Manrope', sans-serif; }
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--grad-primary); color: #fff; box-shadow: 0 14px 34px -12px rgba(91,127,255,0.55); }
.btn-outline{ border: 1px solid var(--border-glass); color: var(--ink); background: rgba(255,255,255,0.03); }
.btn-outline:hover{ border-color: var(--electric); }
.btn-dark{ background: var(--light-ink); color: #fff; }

/* product screenshot strip */
.hero-shot{ margin: 44px auto 0; max-width: 980px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border-glass); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); }
.hero-shot img{ width:100%; display:block; }

/* ---------- glass cards ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 22px; }
.grid-4{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 20px; }

.card{ background: var(--bg-panel); border: 1px solid var(--light-border); border-radius: 18px; padding: 30px 26px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.card:hover{ transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(91,79,255,0.25); border-color: rgba(91,127,255,0.35); }

.card-dark{ background: var(--panel-glass); backdrop-filter: blur(10px); border: 1px solid var(--border-glass); border-radius: 18px; padding: 30px 26px; }
.card-dark h3, .card-dark p{ color: var(--ink); }
.card-dark p{ color: var(--ink-soft); }

.icon-chip{ width:48px; height:48px; border-radius:13px; background: var(--grad-primary); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:#fff; font-weight:800; font-size:19px; font-family:'Sora',sans-serif; box-shadow: 0 10px 22px -10px rgba(91,127,255,0.6); }

.stat-row{ display:flex; gap:40px; flex-wrap:wrap; margin-top:30px; }
.stat b{ display:block; font-family:'Sora',sans-serif; font-size:30px; font-weight:800; }
.stat.on-dark b{ color: var(--ink); } .stat.on-dark span{ color: var(--ink-soft); }
.stat.on-light b{ color: var(--light-ink); } .stat.on-light span{ color: var(--light-ink-soft); }
.stat span{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.04em; }

.two-col{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items:center; }
@media (max-width: 780px){ .two-col{ grid-template-columns: 1fr; } }

.section-light{ background: var(--bg); }
.section-white{ background: var(--bg-panel); }

/* product mockup frame (used on Ürünlerimiz) */
.mockup{ border-radius: 14px; overflow:hidden; border:1px solid var(--light-border); box-shadow: 0 30px 60px -30px rgba(16,21,43,0.25); }
.mockup img{ width:100%; display:block; }
.product-card{ background: var(--bg-panel); border:1px solid var(--light-border); border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:18px; }
.product-card .tag{ display:inline-flex; align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:5px 10px; border-radius:6px; font-weight:600; }
.product-card .visit{ font-weight:700; font-size:14px; }

/* footer */
footer.site-footer{ background: var(--void); color: var(--ink-soft); padding: 56px 24px 30px; font-size:14px; position:relative; z-index:1; border-top: 1px solid var(--border-glass); }
.footer-grid{ max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; }
@media (max-width:720px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color: var(--ink); font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; margin:0 0 14px; font-weight:600; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer-grid a:hover{ color: var(--cyan); }
.footer-brand .brand svg{ height:30px; }
.footer-brand p{ color: var(--slate); font-size:13px; max-width:320px; margin-top:12px; }
.footer-bottom{ max-width:1160px; margin:32px auto 0; padding-top:20px; border-top:1px solid var(--border-glass); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color: var(--slate); }

/* blog */
.blog-section-title{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin: 44px 0 20px; padding-top:8px; border-top:1px solid var(--light-border); }
.blog-section-title:first-child{ margin-top:0; border-top:none; padding-top:0; }
.blog-section-title h2{ margin:0; font-size:22px; }
.blog-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 26px; }
.blog-card{ background: var(--bg-panel); border:1px solid var(--light-border); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition: transform .18s, box-shadow .18s; }
.blog-card:hover{ transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(91,79,255,0.22); }
.blog-card .blog-cover{ height:150px; display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:15px; color:#fff; text-align:center; padding:18px; }
.blog-card .blog-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.blog-meta{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--slate); display:flex; gap:10px; align-items:center; }
.blog-card h3{ font-size:18px; margin:0; }
.blog-card p{ font-size:14px; margin:0; flex:1; }
.blog-card .read-more{ font-weight:700; font-size:13.5px; color: var(--electric-2); }

.blog-post{ max-width: 760px; margin:0 auto; padding: 56px 24px 80px; }
.blog-post h1{ color: var(--light-ink); }
.blog-post h2{ margin-top:36px; font-size:24px; color: var(--light-ink); }
.blog-post h3{ margin-top:26px; color: var(--light-ink); }
.blog-post p{ font-size:15.5px; line-height:1.75; }
.blog-post ul, .blog-post ol{ color: var(--light-ink-soft); font-size:15.5px; line-height:1.75; }
.blog-post .post-meta{ font-family:'JetBrains Mono',monospace; font-size:12px; color: var(--slate); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:6px; }
.blog-post blockquote{ border-left:3px solid var(--electric); margin:26px 0; padding:4px 0 4px 20px; font-style:italic; color: var(--light-ink-soft); }
.back-link{ font-family:'JetBrains Mono',monospace; font-size:13px; color: var(--electric-2); font-weight:600; }

/* blog: category filter tabs */
.blog-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.blog-filter-btn{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; letter-spacing:0.04em;
  padding:9px 18px; border-radius:999px; border:1px solid var(--light-border); background: var(--bg-panel);
  color: var(--light-ink-soft); cursor:pointer; transition: all .15s;
}
.blog-filter-btn:hover{ border-color: var(--electric); color: var(--light-ink); }
.blog-filter-btn.active{ background: var(--grad-primary); color:#fff; border-color:transparent; }

/* blog: pagination */
.blog-pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:44px; }
.page-btn{
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--light-border); background:var(--bg-panel);
  color: var(--light-ink-soft); cursor:pointer; transition: all .15s;
}
.page-btn:hover:not(:disabled){ border-color: var(--electric); color: var(--light-ink); }
.page-btn.active{ background: var(--grad-primary); color:#fff; border-color:transparent; }
.page-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.page-btn.nav{ width:auto; padding:0 14px; }

/* blog post: category hero banner */
.post-hero{
  position:relative; height:240px; border-radius:20px; margin:0 0 32px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.post-hero .post-hero-grid{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, black 0%, transparent 80%);
}
.post-hero svg{ position:relative; width:96px; height:96px; opacity:0.92; }
.post-hero.hero-saas{ background: linear-gradient(135deg,#5B7FFF 0%,#8B5CF6 100%); }
.post-hero.hero-eticaret{ background: linear-gradient(135deg,#C084FC 0%,#F472B6 100%); }
.post-hero.hero-hosting{ background: linear-gradient(135deg,#22D3EE 0%,#5B7FFF 100%); }
.post-hero.hero-webtasarim{ background: linear-gradient(135deg,#FB923C 0%,#F472B6 100%); }

/* blog post: inline stat/highlight box */
.stat-box{
  display:flex; gap:24px; flex-wrap:wrap; background: var(--bg);
  border:1px solid var(--light-border); border-radius:16px; padding:22px 26px; margin:28px 0;
}
.stat-box .stat-item{ display:flex; flex-direction:column; gap:2px; }
.stat-box .stat-item b{ font-family:'Sora',sans-serif; font-size:26px; font-weight:800; color: var(--light-ink); }
.stat-box .stat-item span{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color: var(--slate); letter-spacing:0.03em; }

/* legal pages (clean & readable, same brand fonts) */
.legal-page{ max-width: 780px; margin: 0 auto; padding: 56px 24px 80px; }
.legal-page h1{ color: var(--light-ink); }
.legal-page h2,.legal-page h3{ margin-top: 30px; color: var(--light-ink); }
.legal-page ul{ color: var(--light-ink-soft); font-size: 15px; }
.legal-page p{ font-size: 15px; }
.legal-page .updated{ color: var(--slate); font-size: 13px; margin-top: -6px; font-family:'JetBrains Mono',monospace; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }