/* ============================================================
   DigiCode DX — brand tokens
   ============================================================ */
:root{
  --sync-blue: #000dff;
  --c-blue: #0062ff;
  --d-cyan: #00cfff;

  --navy-950: #04061a;
  --navy-900: #060a26;
  --navy-800: #0a1140;
  --navy-700: #10195c;

  --ink: #0b1020;
  --ink-soft: #4a5170;
  --surface: #ffffff;
  --surface-alt: #f4f7fe;
  --border: #e4e9f7;

  --gradient-brand: linear-gradient(120deg, var(--d-cyan) 0%, var(--c-blue) 55%, var(--sync-blue) 100%);
  --gradient-brand-soft: linear-gradient(120deg, rgba(0,207,255,.16), rgba(0,98,255,.16));

  --font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --radius: 18px;
  --radius-sm: 12px;

  --shadow-soft: 0 20px 60px -20px rgba(2, 12, 60, .25);
  --shadow-card: 0 12px 30px -14px rgba(2, 12, 60, .18);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}
p{ margin: 0 0 1em; }
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
section.section{ padding: 128px 0; position: relative; }
@media (max-width: 720px){
  section.section{ padding: 84px 0; }
}

/* ambient background blobs */
.bg-fx{
  position: fixed; inset: 0; z-index: -1; pointer-events:none;
  background:
    radial-gradient(600px 500px at 85% -5%, rgba(0,207,255,.10), transparent 60%),
    radial-gradient(700px 600px at -10% 20%, rgba(0,98,255,.08), transparent 60%);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display: inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .96rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--gradient-brand);
  background-clip: padding-box;
  background-size: 160% 160%;
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(0, 98, 255, .55);
}
.btn-primary:hover{ transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 18px 36px -8px rgba(0, 98, 255, .65); }
.btn-ghost{
  background: transparent;
  border-color: rgba(11,16,32,.16);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--c-blue); color: var(--c-blue); transform: translateY(-2px); }
.btn-lg{ padding: 18px 38px; font-size: 1.05rem; }
.btn-sm{ padding: 10px 22px; font-size: .88rem; }
.btn-block{ width:100%; }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 20px 0;
  transition: padding .3s ease, background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  padding: 12px 0;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 8px 30px -18px rgba(2,12,60,.35);
}
.header-inner{
  display:flex; align-items:center; gap: 28px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-icon{ height: 34px; width:auto; }
.brand-word{ height: 17px; width:auto; margin-top:2px; }

.main-nav{ display:flex; align-items:center; gap: 22px; }
.main-nav a{
  font-size: .89rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
  position: relative; padding: 4px 0;
  transition: color .2s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--gradient-brand); transition: right .25s ease;
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a:hover::after{ right:0; }
.main-nav a.active{ color: var(--ink); }
.main-nav a.active::after{ right:0; }

/* Koyu hero üzerinde duran header (ör. anasayfa) — kaydırılmadan önce
   menü metinleri koyu zeminde okunaklı olsun diye açık renk kullanılır.
   Mobil menü açıldığında (.main-nav.open) zemin her zaman beyaza döndüğü
   için o durumda normal (koyu) renklere geri dönülür. */
.site-header.has-hero:not(.scrolled) .main-nav:not(.open) a{ color: rgba(255,255,255,.78); }
.site-header.has-hero:not(.scrolled) .main-nav:not(.open) a:hover,
.site-header.has-hero:not(.scrolled) .main-nav:not(.open) a.active{ color: #fff; }

.nav-cta{ margin-left: 4px; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width: 40px; height:40px; border-radius: 10px; border:1px solid var(--border);
  background:#fff; cursor:pointer;
}
.nav-toggle span{ height:2px; background: var(--ink); border-radius:2px; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle span:nth-child(1){ width: 20px; margin-left:8px; }
.nav-toggle span:nth-child(2){ width: 16px; margin-left:8px; }
.nav-toggle span:nth-child(3){ width: 20px; margin-left:8px; }

@media (max-width: 1100px){
  .main-nav{
    position: fixed; top: 72px; left: 16px; right:16px;
    background: #fff; border-radius: var(--radius);
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 14px 20px; box-shadow: var(--shadow-soft);
    transform: translateY(-12px); opacity:0; visibility:hidden;
    transition: all .25s ease;
  }
  .main-nav.open{ transform:translateY(0); opacity:1; visibility:visible; }
  .main-nav a{ padding: 10px 0; width:100%; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position: relative;
  background: radial-gradient(1200px 700px at 75% -10%, #0d1f7a 0%, var(--navy-900) 45%, var(--navy-950) 100%);
  color: #fff;
  padding: 190px 0 140px;
  overflow: hidden;
}
.hero-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(420px 420px at 18% 30%, rgba(0,207,255,.22), transparent 70%),
    radial-gradient(520px 420px at 85% 20%, rgba(0,13,255,.35), transparent 70%);
  filter: blur(10px);
  pointer-events:none;
}
.hero-inner{ position: relative; z-index:2; max-width: 900px; }
.eyebrow{
  text-transform: uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:700;
  color: var(--c-blue); margin-bottom: 18px; display:inline-block;
}
.eyebrow-light{ color: var(--d-cyan); }
.hero h1, .hero h2{ font-size: clamp(2.2rem, 4.2vw, 3.6rem); color:#fff; margin:0 0 .5em; line-height: 1.15; }
.text-gradient{
  background: linear-gradient(100deg, var(--d-cyan), #6fa8ff 60%, var(--d-cyan));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size: 1.15rem; color: rgba(255,255,255,.72); max-width: 620px; margin-bottom: 34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 46px; }
.hero-tags{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-tags span{
  font-size:.82rem; font-weight:600; color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.18); padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.04);
}
.hero-mark{
  position:absolute; right: -6%; top: 10%; width: 46%; max-width: 620px;
  opacity:.9; filter: drop-shadow(0 30px 60px rgba(0,13,255,.45));
  animation: float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-22px) rotate(2deg); }
}
@media (max-width: 900px){
  .hero-mark{ opacity:.28; width:70%; right:-10%; top:6%; }
  .hero{ padding: 150px 0 100px; }
}

/* Hero slider */
.hero-slider{ display:grid; }
.hero-slide{
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s ease;
}
.hero-slide.active{ opacity:1; visibility:visible; pointer-events:auto; }
.hero-slide .hero-actions{ margin-bottom: 0; }
.hero-dots{ display:flex; gap:10px; margin: 28px 0 34px; }
.hero-dot{
  width: 30px; height:4px; border-radius:999px; border:none; padding:0; cursor:pointer;
  background: rgba(255,255,255,.22); transition: background .25s ease, width .25s ease;
}
.hero-dot.active{ background: var(--d-cyan); width:44px; }
.hero-dot:hover{ background: rgba(255,255,255,.4); }

/* ============================================================
   Section heads / shared
   ============================================================ */
.section-head{ max-width: 640px; margin-bottom: 60px; }
.section-head.light h2, .section-head.light .light-h{ color:#fff; }
.light-lead{ color: rgba(255,255,255,.68); }
.lead{ font-size: 1.08rem; color: var(--ink-soft); }
h1, h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); }

.split{
  display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:center;
}
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; gap:40px; }
  .split.reverse{ direction:ltr; }
  .split .split-media{ order:-1; }
}

.check-list{ display:flex; flex-direction:column; gap:14px; margin-top: 26px; }
.check-list li{
  position:relative; padding-left: 32px; color: var(--ink); font-weight:500;
}
.check-list li::before{
  content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:6px;
  background: var(--gradient-brand);
}
.check-list li::after{
  content:""; position:absolute; left:6px; top:7px; width:9px; height:5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform: rotate(-45deg);
}

/* ============================================================
   Approach / sync card
   ============================================================ */
.approach{ background: var(--surface-alt); }
.sync-card{
  background:#fff; border-radius: var(--radius); padding: 40px;
  box-shadow: var(--shadow-card); border:1px solid var(--border);
}
.sync-row{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom: 26px; }
.sync-plus{ font-size:1.4rem; font-weight:800; color: var(--ink-soft); }
.tag{
  font-family: var(--font-head); font-weight:700; letter-spacing:.03em;
  padding: 12px 20px; border-radius: 999px; font-size: 1rem; color:#fff;
}
.tag-cyan{ background: var(--d-cyan); }
.tag-blue{ background: var(--c-blue); }
.tag-sync{ background: var(--sync-blue); display:inline-block; margin-bottom: 12px; }
.step-badge{
  display:inline-block; font-family: var(--font-head); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; font-size:.72rem;
  padding:5px 16px; border-radius:999px; margin: 10px 0 12px;
}
.step-badge-cyan{ background: rgba(0,207,255,.12); color:#0092b8; }
.step-badge-blue{ background: rgba(0,98,255,.12); color: var(--c-blue); }
.sync-result{
  text-align:center; border-top: 1px dashed var(--border); padding-top: 26px;
}
.sync-result p{ color: var(--ink-soft); max-width: 320px; margin: 0 auto; }

/* ============================================================
   Services
   ============================================================ */
.card-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 1024px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .card-grid{ grid-template-columns: 1fr; } }

.service-card{
  background:#fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px 26px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: rgba(0,98,255,.25); }
.service-card.featured{ border-color: rgba(0,98,255,.35); background: linear-gradient(180deg, #fff, var(--surface-alt)); }
.service-icon{
  width: 52px; height:52px; border-radius: 14px; margin-bottom: 20px;
  background: var(--gradient-brand-soft);
  display:flex; align-items:center; justify-content:center;
}
.service-icon svg{
  width: 26px; height:26px; fill:none; stroke: var(--c-blue); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.service-card h3{ font-size: 1.25rem; margin-bottom: 10px; }
.service-card p{ color: var(--ink-soft); font-size: .95rem; margin:0; }
.service-card{ display:block; }
.service-card-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color: var(--c-blue); font-size:.88rem; margin-top:16px; }
.service-card-link svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; transition: transform .2s ease; }
.service-card:hover .service-card-link svg{ transform: translateX(4px); }

/* ============================================================
   Payment automation flow
   ============================================================ */
.payment-flow{
  background: var(--surface-alt);
  color: var(--ink);
}
.flow{
  display:grid; grid-template-columns: repeat(4, 1fr); align-items:start; gap: 24px;
  margin-top: 20px;
}
@media (max-width: 1024px){ .flow{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .flow{ grid-template-columns: 1fr; } }
.flow-step{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 22px;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
  transition-delay: calc(var(--i, 0) * .15s);
}
.flow-step:hover{ transform: translateY(-6px); }
.flow-icon{
  width:52px; height:52px; border-radius:14px; margin-bottom: 18px;
  background: var(--gradient-brand-soft);
  display:flex; align-items:center; justify-content:center;
}
.flow-icon svg{ width:26px; height:26px; fill:none; stroke: var(--c-blue); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.flow-index{
  position:absolute; top: 24px; right: 24px; font-family: var(--font-head);
  font-size: 1.6rem; color: rgba(11,16,32,.12); font-weight:700;
}
.flow-step h3{ font-size: 1.15rem; margin-bottom: 8px; color: var(--ink); }
.flow-step p{ color: var(--ink-soft); font-size:.92rem; margin:0; }

.flow-benefits{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 54px;
}
@media (max-width: 900px){ .flow-benefits{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .flow-benefits{ grid-template-columns: 1fr; } }
.benefit-pill{
  text-align:center; padding: 22px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-card);
}
.benefit-pill strong{ display:block; font-family: var(--font-head); font-size:1.2rem; color: var(--c-blue); margin-bottom:4px; }
.benefit-pill span{ font-size:.86rem; color: var(--ink-soft); }

/* ============================================================
   Netsis integration graphic
   ============================================================ */
.integration-graphic{
  position: relative; width: 100%; aspect-ratio: 1/1; max-width: 420px; margin:0 auto;
}
.integration-lines{ position:absolute; inset:0; width:100%; height:100%; }
.integration-lines line{ stroke: var(--border); stroke-width:2; stroke-dasharray: 6 6; }
.integration-node{
  position:absolute; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--border); border-radius: 16px;
  padding: 14px 18px; box-shadow: var(--shadow-card); font-weight:700; font-size:.86rem;
  color: var(--ink-soft);
}
.node-center{
  top:50%; left:50%; transform: translate(-50%,-50%); z-index:2;
  padding: 20px 24px; border-color: rgba(0,98,255,.35);
}
.node-center img{ width: 34px; height:auto; margin-bottom:2px; }
.node-center span{ color: var(--c-blue); }
.node-1{ top:0; left:50%; transform: translate(-50%,0); }
.node-2{ top:50%; right:0; transform: translate(0,-50%); }
.node-3{ bottom:0; left:50%; transform: translate(-50%,0); }
.node-4{ top:50%; left:0; transform: translate(0,-50%); }

/* ============================================================
   Why us
   ============================================================ */
.why-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } }
.why-card{
  padding: 30px 8px; border-top: 3px solid transparent; border-image: var(--gradient-brand) 1;
}
.why-index{ font-family: var(--font-head); font-size: 2.4rem; color: transparent;
  -webkit-text-stroke: 1.4px rgba(0,98,255,.35); display:block; margin-bottom: 10px; }
.why-card h3{ font-size: 1.2rem; margin-bottom:8px; }
.why-card p{ color: var(--ink-soft); font-size:.94rem; margin:0; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{
  background: linear-gradient(120deg, #061240, var(--navy-950));
  position: relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 300px at 20% 0%, rgba(0,207,255,.18), transparent 70%),
              radial-gradient(600px 300px at 90% 100%, rgba(0,13,255,.3), transparent 70%);
}
.cta-inner{ position:relative; text-align:center; max-width: 640px; }
.cta-inner h2{ color:#fff; }
.cta-inner p{ color: rgba(255,255,255,.65); margin-bottom: 34px; font-size:1.05rem; }

/* ============================================================
   Contact
   ============================================================ */
.contact-info{ display:flex; flex-direction:column; gap:16px; margin-top: 30px; }
.contact-item{ display:flex; align-items:center; gap:12px; font-weight:600; color: var(--ink); }
.contact-item svg{ width:20px; height:20px; fill:none; stroke: var(--c-blue); stroke-width:2; flex-shrink:0; }

.contact-form{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow-card);
  display:flex; flex-direction:column; gap:18px;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width:560px){ .form-row{ grid-template-columns: 1fr; } }
.contact-form label{ display:flex; flex-direction:column; gap:8px; font-size:.86rem; font-weight:700; color: var(--ink-soft); }
.contact-form input, .contact-form textarea{
  font-family: var(--font-body); font-size:.96rem; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-alt);
  color: var(--ink); resize: vertical; transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color: var(--c-blue); box-shadow: 0 0 0 4px rgba(0,98,255,.12);
}
.form-note{ font-size:.86rem; color: var(--c-blue); font-weight:600; min-height: 1.2em; margin:0; }

/* Honeypot: botlara görünür/erişilebilir ama gerçek kullanıcılara gizli */
.hp-field{
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.map-embed{
  margin-top: 64px; border-radius: var(--radius); overflow:hidden;
  border:1px solid var(--border); box-shadow: var(--shadow-card);
}
.map-embed iframe{ width:100%; height:420px; border:0; display:block; }
@media (max-width: 720px){ .map-embed iframe{ height:320px; } }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ position:relative; overflow:hidden; background: var(--navy-950); color: rgba(255,255,255,.7); padding-top: 80px; }
.footer-watermark{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: clamp(320px, 42vw, 640px); height:auto; max-width:none;
  opacity:.05; filter: brightness(0) invert(1);
  pointer-events:none; z-index:0; user-select:none;
}
.footer-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1fr 2.6fr; gap: 60px; padding-bottom: 60px; }
@media (max-width: 800px){ .footer-inner{ grid-template-columns: 1fr; gap:36px; } }
.footer-logo{ height: 30px; width:auto; margin-bottom: 16px; }
.footer-brand p{ color: rgba(255,255,255,.45); font-size:.9rem; margin:0; }
.footer-cols{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px){ .footer-cols{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px){ .footer-cols{ grid-template-columns: 1fr; } }
.footer-col h4{ font-family: var(--font-head); color:#fff; font-size:1rem; margin-bottom: 16px; letter-spacing:.03em; }
.footer-col a, .footer-col span{ display:block; font-size:.9rem; color: rgba(255,255,255,.55); margin-bottom:10px; transition: color .2s ease; }
.footer-col a:hover{ color: var(--d-cyan); }
.footer-bottom{ position:relative; z-index:1; border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; }
.footer-bottom-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color: rgba(255,255,255,.4); }
.footer-sync strong{ color: var(--d-cyan); }

/* ============================================================
   Dark band (generic dark radial section, reuses payment-flow look)
   ============================================================ */
.dark-band{
  background: radial-gradient(1000px 600px at 50% 0%, #0d1f7a, var(--navy-950) 60%);
  color:#fff;
}

/* ============================================================
   Insight / topic cards (dijital dönüşüm, verimlilik, RPA...)
   ============================================================ */
.insight-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px){ .insight-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .insight-grid{ grid-template-columns: 1fr; } }
.insight-card{
  background:#fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px 28px;
}
.insight-card .service-icon{ margin-bottom: 22px; }
.insight-card h3{ font-size: 1.2rem; margin-bottom: 10px; }
.insight-card p{ color: var(--ink-soft); font-size: .95rem; margin:0; }

/* ============================================================
   Roadmap (numbered vertical steps — "nereden başlanmalı")
   ============================================================ */
.roadmap{ display:flex; flex-direction:column; margin-top: 10px; }
.roadmap-step{ display:grid; grid-template-columns: 64px 1fr; gap: 26px; position: relative; padding-bottom: 44px; }
.roadmap-step:last-child{ padding-bottom: 0; }
.roadmap-step::before{
  content:""; position:absolute; left:31px; top:66px; bottom:2px; width:2px;
  background: var(--border);
}
.roadmap-step:last-child::before{ display:none; }
.roadmap-num{
  width:64px; height:64px; border-radius:50%; flex-shrink:0; z-index:1;
  background: var(--gradient-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-weight:700; font-size:1.4rem;
  box-shadow: var(--shadow-card);
}
.roadmap-body{ padding-top: 10px; }
.roadmap-body h3{ font-size: 1.2rem; margin-bottom: 8px; }
.roadmap-body p{ color: var(--ink-soft); margin:0; }
.roadmap.light .roadmap-body h3{ color:#fff; }
.roadmap.light .roadmap-body p{ color: rgba(255,255,255,.62); }
.roadmap.light .roadmap-step::before{ background: rgba(255,255,255,.14); }
@media (max-width: 560px){
  .roadmap-num{ width:52px; height:52px; font-size:1.15rem; }
  .roadmap-step{ grid-template-columns: 52px 1fr; gap:18px; }
  .roadmap-step::before{ left:25px; top:56px; }
}

/* ============================================================
   Blog / insight cards
   ============================================================ */
.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px){ .blog-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } }
.blog-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--border);
  border-radius: var(--radius); overflow:hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: rgba(0,98,255,.25); }
.blog-card-cover{
  height: 150px; background: var(--gradient-brand-soft);
  display:flex; align-items:center; justify-content:center;
}
.blog-card-cover svg{ width:44px; height:44px; fill:none; stroke: var(--c-blue); stroke-width:1.8; }
.blog-card-body{ padding: 26px; display:flex; flex-direction:column; flex:1; }
.blog-tag{
  display:inline-block; align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color: var(--c-blue); background: var(--gradient-brand-soft);
  padding: 6px 14px; border-radius:999px; margin-bottom: 16px;
}
.blog-card-body h3{ font-size: 1.12rem; margin-bottom: 10px; }
.blog-card-body p{ color: var(--ink-soft); font-size:.92rem; flex:1; margin-bottom: 18px; }
.blog-card-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color: var(--c-blue); font-size:.9rem; }
.blog-card-link svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; transition: transform .2s ease; }
.blog-card:hover .blog-card-link svg{ transform: translateX(4px); }

/* ============================================================
   Article (blog post) layout
   ============================================================ */
.article-head{ max-width: 760px; margin: 0 auto 40px; text-align:center; }
.article-head h1{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.article-meta{ display:flex; gap:14px; justify-content:center; align-items:center; color: var(--ink-soft); font-size:.86rem; margin-top: 18px; }
.article-meta span:not(:last-child)::after{ content:"•"; margin-left:14px; color: var(--border); }
.article-cover{
  max-width: 900px; margin: 0 auto 50px; height: 260px; border-radius: var(--radius);
  background: var(--gradient-brand-soft); display:flex; align-items:center; justify-content:center;
}
.article-cover svg{ width:74px; height:74px; fill:none; stroke: var(--c-blue); stroke-width:1.6; }
.article-body{ max-width: 720px; margin: 0 auto; }
.article-body p{ color: var(--ink-soft); font-size: 1.04rem; }
.article-body h2{ font-size: 1.55rem; margin-top: 1.8em; }
.article-body h3{ font-size: 1.2rem; margin-top: 1.5em; }
.article-body ul{ display:flex; flex-direction:column; gap:12px; margin: 24px 0; }
.article-body ul li{ position:relative; padding-left: 28px; color: var(--ink); font-weight:500; }
.article-body ul li::before{
  content:""; position:absolute; left:2px; top:9px; width:8px; height:8px; border-radius:50%;
  background: var(--gradient-brand);
}
.article-cta{
  max-width: 720px; margin: 50px auto 0; padding: 32px; border-radius: var(--radius);
  background: var(--surface-alt); border: 1px solid var(--border); text-align:center;
}
.article-cta h3{ margin-bottom: 10px; }
.article-cta p{ color: var(--ink-soft); margin-bottom: 22px; }
.back-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color: var(--c-blue); font-size:.92rem; margin-bottom: 26px; }
.back-link svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; }

/* ============================================================
   Yasal metin sayfaları (KVKK, çerez politikası vb.)
   ============================================================ */
.legal-content{ max-width: 820px; margin: 0 auto; }
.legal-content .updated-note{ color: var(--ink-faint); font-size:.86rem; margin-bottom: 40px; }
.legal-content h2{ font-size: 1.4rem; margin-top: 2em; }
.legal-content h2:first-child{ margin-top: 0; }
.legal-content h3{ font-size: 1.1rem; margin-top: 1.6em; }
.legal-content p{ color: var(--ink-soft); font-size: 1rem; }
.legal-content strong{ color: var(--ink); }
.legal-content ul, .legal-content ol{ display:flex; flex-direction:column; gap:10px; margin: 18px 0; padding-left: 0; }
.legal-content ul li, .legal-content ol li{ position:relative; padding-left: 26px; color: var(--ink-soft); }
.legal-content ul li::before{
  content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:50%;
  background: var(--gradient-brand);
}
.legal-content ol{ counter-reset: legalCounter; }
.legal-content ol li{ counter-increment: legalCounter; padding-left: 28px; }
.legal-content ol li::before{
  content: counter(legalCounter) "."; position:absolute; left:0; top:0;
  font-weight:700; color: var(--c-blue); font-family: var(--font-head);
}
.legal-content table{ width:100%; border-collapse:collapse; margin: 22px 0; font-size:.9rem; }
.legal-content th, .legal-content td{ border:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top; }
.legal-content th{ background: var(--surface-alt); font-family: var(--font-head); color: var(--ink); }
.legal-content td{ color: var(--ink-soft); }

/* Veri sahibi başvuru formu — iletişim formuyla aynı görsel dil */
.kvkk-form{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow-card);
  display:flex; flex-direction:column; gap:18px; max-width: 820px; margin: 0 auto;
}
.kvkk-form label{ display:flex; flex-direction:column; gap:8px; font-size:.86rem; font-weight:700; color: var(--ink-soft); }
.kvkk-form input, .kvkk-form select, .kvkk-form textarea{
  font-family: var(--font-body); font-size:.96rem; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-alt);
  color: var(--ink); resize: vertical; transition: border-color .2s ease, box-shadow .2s ease;
}
.kvkk-form input:focus, .kvkk-form select:focus, .kvkk-form textarea:focus{
  outline:none; border-color: var(--c-blue); box-shadow: 0 0 0 4px rgba(0,98,255,.12);
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform: translateY(0); }