/* =========================================================
   UĞUR WEB DİJİTAL — Design System
   Motion language (easing curves, velocity motifs) reflects the
   agency's growth/momentum positioning — the subject, not decoration.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- Color tokens ----
     Primary palette follows the Uğur Web Dijital mark: deep navy +
     a confident blue as the dominant brand color, with a small
     warm-orange pop reserved for accents (mirrors the dot in the
     wordmark's tagline divider). */
  --ink:        #10173A;
  --ink-soft:   #1B2559;
  --paper:      #F3F5F9;
  --paper-dim:  #E9ECF3;
  --mist:       #DCE1EC;
  --volt:       #2E52E0;
  --volt-dim:   #2445BF;
  --momentum:   #FF5A1F;
  --momentum-soft: #FFAE85;
  --signal:     #17C787;
  --white:      #FFFFFF;

  --text-on-paper: #14161D;
  --text-muted:    #565D6E;
  --text-on-ink:   #F3F5F9;
  --text-on-ink-muted: #9AA1B4;

  /* ---- Type ---- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  /* Fluid type scale */
  --fs-hero:  clamp(2.6rem, 5.6vw + 1rem, 6rem);
  --fs-h1:    clamp(2.1rem, 3.2vw + 1rem, 3.4rem);
  --fs-h2:    clamp(1.6rem, 2vw + 1rem, 2.4rem);
  --fs-h3:    clamp(1.2rem, 1vw + 1rem, 1.5rem);
  --fs-lead:  clamp(1.05rem, 0.6vw + 1rem, 1.35rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ---- Spacing / layout ---- */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 9vw, 8rem);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  /* ---- Motion: the brand's physics ----
     launch = decelerating arrival (things settle after being fired)
     snap   = slight overshoot, for interactive feedback           */
  --ease-launch: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;
}

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

/* ---------------------------------------------------------
   Reset
   --------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd{ margin: 0; }
ul, ol{ list-style: none; margin: 0; padding: 0; }
img, picture, svg{ display: block; max-width: 100%; }
input, button, textarea, select{ font: inherit; color: inherit; }
button{ cursor: pointer; }
a{ color: inherit; text-decoration: none; }

body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text-on-paper);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: var(--volt); color: var(--white); }

:focus-visible{
  outline: 2.5px solid var(--momentum);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-on-paper);
}

p.lead{ font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.5; }

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section{ padding-block: var(--section-pad); position: relative; }

.section-ink{ background: var(--ink); color: var(--text-on-ink); }
.section-ink h1, .section-ink h2, .section-ink h3{ color: var(--white); }
.section-ink p{ color: var(--text-on-ink-muted); }

.section-dim{ background: var(--paper-dim); }

/* Eyebrow label — mono, functions as a data-tag not decoration */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--volt);
  font-weight: 500;
  margin-bottom: 1rem;
}
.eyebrow::before{
  content: '';
  width: 7px; height: 7px;
  background: var(--volt);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,90,31,0.18);
}
.section-ink .eyebrow{ color: var(--momentum-soft); }
.section-ink .eyebrow::before{ background: var(--momentum-soft); box-shadow: 0 0 0 3px rgba(124,140,255,0.22); }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease-snap),
              background var(--dur-fast) var(--ease-launch),
              box-shadow var(--dur-fast) var(--ease-launch);
  white-space: nowrap;
}
.btn svg{ width: 1.05em; height: 1.05em; transition: transform var(--dur-med) var(--ease-launch); }
.btn:hover{ transform: translateY(-2px) scale(1.015); }
.btn:active{ transform: translateY(0) scale(0.98); }

.btn-primary{ --btn-bg: var(--volt); --btn-fg: var(--white); box-shadow: 0 8px 24px -8px rgba(255,90,31,0.55); }
.btn-primary:hover{ box-shadow: 0 12px 32px -8px rgba(255,90,31,0.65); }
.btn-primary:hover svg{ transform: translate(3px,-3px); }

.btn-ghost{
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: rgba(14,17,22,0.18);
}
.btn-ghost:hover{ background: rgba(14,17,22,0.05); }

.section-ink .btn-ghost{ --btn-fg: var(--white); border-color: rgba(255,255,255,0.25); }
.section-ink .btn-ghost:hover{ background: rgba(255,255,255,0.08); }

.btn-block{ width: 100%; justify-content: center; }

/* ---------------------------------------------------------
   Header / Nav
   --------------------------------------------------------- */
.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: background var(--dur-med) var(--ease-launch),
              box-shadow var(--dur-med) var(--ease-launch),
              padding var(--dur-med) var(--ease-launch);
}
.site-header.is-scrolled{
  background: rgba(243,245,249,0.78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(14,17,22,0.06);
  padding-block: 0.75rem;
}
.site-header .container{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.logo{
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.94rem, 3.6vw + 0.4rem, 1.28rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo-mark{
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--white);
  border: 1px solid rgba(14,17,22,0.08);
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-mark img{ width: 100%; height: 100%; object-fit: contain; padding: 3px; }

.nav-desktop{ display: none; }
.nav-desktop ul{ display: flex; align-items: center; gap: 2.1rem; }
.nav-desktop a{
  font-size: 0.95rem; font-weight: 500; color: var(--text-on-paper);
  position: relative; padding-block: 0.3rem;
}
.nav-desktop a::after{
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--volt); transition: right var(--dur-med) var(--ease-launch);
}
.nav-desktop a:hover::after, .nav-desktop a.is-active::after{ right: 0; }
.nav-desktop a.is-active{ color: var(--volt); }

.nav-cta{ display: flex; align-items: center; gap: 1rem; }
.nav-cta .btn{ padding: 0.75rem 1.3rem; font-size: 0.9rem; }

.nav-toggle{
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  border: none; flex-shrink: 0;
}
.nav-toggle svg{ width: 18px; height: 18px; }
.nav-toggle .icon-close{ display: none; }
.nav-toggle.is-open .icon-menu{ display: none; }
.nav-toggle.is-open .icon-close{ display: block; }

.nav-mobile{
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: 2rem var(--gutter);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-launch);
}
.nav-mobile.is-open{ transform: translateY(0); }
.nav-mobile ul{ display: flex; flex-direction: column; gap: 0.4rem; }
.nav-mobile a{
  font-family: var(--font-display); font-size: clamp(2rem,8vw,2.8rem); font-weight: 700;
  color: var(--white); display: inline-block; padding-block: 0.35rem;
}
.nav-mobile .nav-mobile-foot{ margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
.nav-mobile .nav-mobile-foot a{ font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-on-ink-muted); font-weight: 400; }

@media (min-width: 900px){
  .nav-desktop{ display: block; }
  .nav-toggle{ display: none; }
}

@media (max-width: 420px){
  .logo-mark{ width: 26px; height: 26px; }
  .nav-cta{ gap: 0.55rem; }
  .nav-cta .btn{ padding: 0.6rem 0.95rem; font-size: 0.8rem; }
  .nav-toggle{ width: 38px; height: 38px; }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  padding-top: clamp(7.5rem, 14vw, 10rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.hero-grid{
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}
.hero-copy h1{ font-size: var(--fs-hero); max-width: 16ch; }
.hero-copy h1 em{
  font-style: normal; color: var(--volt);
  position: relative;
}
.hero-copy .lead{ margin-top: 1.5rem; max-width: 46ch; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

.hero-canvas-wrap{
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--ink);
  aspect-ratio: 4/3;
  overflow: hidden;
  isolation: isolate;
}
#momentum-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-curve{ position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-curve path.curve-line{
  fill: none; stroke: var(--volt); stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.hero-curve.is-drawn path.curve-line{
  transition: stroke-dashoffset 1.8s var(--ease-launch);
  stroke-dashoffset: 0;
}
.hero-curve circle.curve-dot{ fill: var(--white); }
.hero-readout{
  position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.4rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--font-mono); color: var(--text-on-ink-muted); font-size: var(--fs-micro);
}
.hero-readout strong{ display: block; color: var(--white); font-size: 1.6rem; font-weight: 600; font-family: var(--font-display); }

@media (min-width: 900px){
  .hero-grid{ grid-template-columns: 1.15fr 0.85fr; }
}

/* ---------------------------------------------------------
   Ticker / marquee
   --------------------------------------------------------- */
.ticker{
  border-top: 1px solid rgba(14,17,22,0.08);
  border-bottom: 1px solid rgba(14,17,22,0.08);
  overflow: hidden;
  padding-block: 1.1rem;
  background: var(--paper);
}
.ticker-track{
  display: flex; gap: 3rem; width: max-content;
  animation: ticker-scroll 26s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state: paused; }
.ticker-item{
  font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: 0.06em; color: var(--text-muted);
  display: flex; align-items: center; gap: 0.9rem; white-space: nowrap;
}
.ticker-item span.dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--volt); }
@keyframes ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------------------------------------------------------
   Section headers
   --------------------------------------------------------- */
.section-head{
  display: flex; flex-direction: column; gap: 1rem;
  max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head.split{
  flex-direction: row; justify-content: space-between; align-items: flex-end;
  max-width: none; flex-wrap: wrap; gap: 1.5rem;
}
.section-head.split .section-head-copy{ max-width: 42rem; }
.section-head p{ color: var(--text-muted); }
.section-ink .section-head p{ color: var(--text-on-ink-muted); }

/* ---------------------------------------------------------
   Reveal-on-scroll
   --------------------------------------------------------- */
.reveal{
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.9s var(--ease-launch), transform 0.9s var(--ease-launch);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------------------------------------------------------
   Service cards
   --------------------------------------------------------- */
.services-grid{
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.service-card{
  background: var(--white);
  border: 1px solid rgba(14,17,22,0.07);
  border-radius: var(--radius-md);
  padding: 2rem 1.7rem;
  transition: transform var(--dur-med) var(--ease-launch), box-shadow var(--dur-med) var(--ease-launch), border-color var(--dur-med) var(--ease-launch);
  position: relative;
  overflow: hidden;
}
.service-card::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,90,31,0.06), transparent 55%);
  opacity: 0; transition: opacity var(--dur-med) var(--ease-launch);
  pointer-events: none;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 40px -20px rgba(14,17,22,0.22); border-color: rgba(255,90,31,0.25); }
.service-card:hover::before{ opacity: 1; }
.service-icon{
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--ink); color: var(--volt);
  display: grid; place-items: center; margin-bottom: 1.4rem;
  transition: transform var(--dur-med) var(--ease-snap);
}
.service-card:hover .service-icon{ transform: rotate(-8deg) scale(1.06); }
.service-icon svg{ width: 22px; height: 22px; }
.service-card h3{ font-size: 1.2rem; margin-bottom: 0.6rem; }
.service-card p{ color: var(--text-muted); font-size: 0.95rem; }
.service-card .card-link{
  margin-top: 1.3rem; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  color: var(--ink); letter-spacing: 0.03em;
}
.service-card .card-link svg{ width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-launch); }
.service-card:hover .card-link svg{ transform: translateX(3px); }

/* ---------------------------------------------------------
   Process timeline (genuinely sequential -> numbered)
   --------------------------------------------------------- */
.timeline{ position: relative; }
.timeline-track{
  position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px;
  background: rgba(255,255,255,0.14);
}
.timeline-track-fill{
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(var(--volt), var(--momentum));
  transition: height 1.4s var(--ease-launch);
}
.timeline-item{
  display: grid; grid-template-columns: 56px 1fr; gap: 1.5rem;
  padding-block: 1.6rem; position: relative;
}
.timeline-num{
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink-soft); border: 1.5px solid rgba(255,255,255,0.14);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--text-on-ink-muted);
  z-index: 1; transition: all var(--dur-med) var(--ease-launch);
}
.timeline-item.is-visible .timeline-num{
  background: var(--volt); border-color: var(--volt); color: var(--white);
}
.timeline-body h3{ color: var(--white); font-size: 1.25rem; margin-bottom: 0.5rem; }
.timeline-body p{ max-width: 42rem; }
.timeline-tag{
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--momentum-soft);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; display: block;
}

/* ---------------------------------------------------------
   Dashboard-style stats panel
   --------------------------------------------------------- */
.dash{
  background: var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.dash-bar{
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 1.3rem;
  background: var(--ink-soft);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dash-dot{ width: 9px; height: 9px; border-radius: 50%; }
.dash-dot:nth-child(1){ background: #FF5F57; }
.dash-dot:nth-child(2){ background: #FEBC2E; }
.dash-dot:nth-child(3){ background: #28C840; }
.dash-title{
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-on-ink-muted);
  margin-left: 0.6rem;
}
.dash-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.dash-stat{
  padding: 2rem 1.6rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.dash-stat .stat-label{
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-on-ink-muted);
  text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.4rem;
}
.dash-stat .stat-value{
  font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.6rem); color: var(--white);
  margin-block: 0.4rem; display: flex; align-items: baseline; gap: 0.2rem;
}
.dash-stat .stat-value .unit{ font-size: 1.2rem; color: var(--volt); font-family: var(--font-mono); }
.dash-stat .stat-delta{ font-family: var(--font-mono); font-size: var(--fs-small); color: var(--signal); display: flex; align-items: center; gap: 0.3rem; }
.dash-stat .spark{ width: 100%; height: 32px; margin-top: 0.8rem; }
.dash-stat .spark path{ fill: none; stroke: var(--momentum-soft); stroke-width: 2; }

/* ---------------------------------------------------------
   Tech hero — "we build campaigns like software"
   --------------------------------------------------------- */
.tech-hero-grid{ display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.tech-hero-copy h2{ color: var(--white); max-width: 14ch; }
.tech-hero-copy p.lead{ margin-top: 1.2rem; max-width: 42ch; color: var(--text-on-ink-muted); }
.tech-contact-line{
  margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.9rem 1.3rem; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  transition: border-color var(--dur-med) var(--ease-launch), background var(--dur-med) var(--ease-launch);
}
.tech-contact-line:hover{ background: rgba(255,255,255,0.1); border-color: rgba(46,82,224,0.5); }
.tech-contact-line .service-icon{ margin: 0; width: 38px; height: 38px; background: var(--volt); color: var(--white); }
.tech-contact-line .service-icon svg{ width: 18px; height: 18px; }
.tech-contact-line-text{ display: flex; flex-direction: column; }
.tech-contact-line-text span{ font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-on-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.tech-contact-line-text strong{ color: var(--white); font-weight: 600; font-size: 1rem; }

.terminal{
  background: #0A0D1F;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.terminal-bar{
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 1.3rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.terminal-title{ font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-on-ink-muted); margin-left: 0.6rem; }
.terminal-body{
  padding: 1.6rem 1.5rem; min-height: 220px;
  font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.9;
}
.terminal-line{ display: flex; }
.terminal-prefix{ flex-shrink: 0; }
.terminal-cmd .terminal-prefix{ color: var(--momentum-soft); }
.terminal-cmd .terminal-text{ color: var(--white); }
.terminal-ok .terminal-prefix{ color: var(--signal); }
.terminal-ok .terminal-text{ color: var(--text-on-ink-muted); }
.terminal-muted .terminal-prefix,
.terminal-muted .terminal-text{ color: var(--text-on-ink-muted); font-style: italic; }
.terminal-cursor{
  display: inline-block; width: 7px; height: 1.05em; background: var(--volt);
  margin-left: 3px; vertical-align: text-bottom;
  animation: terminal-blink 0.9s step-end infinite;
}
@keyframes terminal-blink{ 50% { opacity: 0; } }

@media (min-width: 900px){
  .tech-hero-grid{ grid-template-columns: 1fr 1.1fr; }
}

/* ---------------------------------------------------------
   Quote / positioning
   --------------------------------------------------------- */
.quote-block{
  max-width: 52rem;
}
.quote-block blockquote{
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 500; letter-spacing: -0.01em; line-height: 1.35;
}
.quote-block blockquote span{ color: var(--volt); }
.quote-block cite{
  display: block; margin-top: 1.5rem; font-style: normal;
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-muted);
}

/* ---------------------------------------------------------
   CTA band
   --------------------------------------------------------- */
.cta-band{
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before{
  content: '';
  position: absolute; inset: -40% -10% auto -10%; height: 140%;
  background: radial-gradient(closest-side, rgba(255,90,31,0.25), transparent 70%);
  z-index: -1;
}
.cta-band h2{ color: var(--white); max-width: 24ch; margin-inline: auto; }
.cta-band p{ color: var(--text-on-ink-muted); max-width: 40ch; margin: 1.2rem auto 0; }
.cta-band .hero-actions{ justify-content: center; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{ background: var(--ink); color: var(--text-on-ink); padding-top: clamp(3.5rem, 7vw, 6rem); }
.footer-top{
  display: grid; gap: 3rem;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.09);
}
.footer-tagline{
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--volt); margin-top: 0.9rem;
}
.footer-brand p{ color: var(--text-on-ink-muted); margin-top: 0.6rem; max-width: 28ch; }
.footer-col h4{
  font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-on-ink-muted); margin-bottom: 1.1rem; font-weight: 500;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a{ color: var(--white); font-size: 0.95rem; transition: color var(--dur-fast); }
.footer-col a:hover{ color: var(--volt); }
.footer-bottom{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding-block: 1.6rem; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-on-ink-muted);
}
.social-row{ display: flex; gap: 0.9rem; }
.social-row a{
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15);
  display: grid; place-items: center; transition: all var(--dur-fast) var(--ease-launch);
}
.social-row a:hover{ background: var(--volt); border-color: var(--volt); transform: translateY(-2px); }
.social-row svg{ width: 15px; height: 15px; }

@media (max-width: 780px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   WhatsApp floating button
   --------------------------------------------------------- */
.float-wa{
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  display: grid; place-items: center;
  box-shadow: 0 10px 26px -8px rgba(14,17,22,0.4);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.float-wa:hover{ transform: scale(1.08); }
.float-wa svg{ width: 24px; height: 24px; }

/* ---------------------------------------------------------
   Generic page hero (inner pages)
   --------------------------------------------------------- */
.page-hero{ padding-top: clamp(7.5rem, 12vw, 9.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-hero .eyebrow{ margin-bottom: 1.2rem; }
.page-hero h1{ max-width: 20ch; }
.page-hero p.lead{ margin-top: 1.3rem; max-width: 48ch; }
.breadcrumb{
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted);
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.6rem;
}
.breadcrumb a{ color: var(--text-muted); }
.breadcrumb a:hover{ color: var(--volt); }

/* ---------------------------------------------------------
   Service detail rows (hizmetlerimiz)
   --------------------------------------------------------- */
.service-detail{
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: clamp(0.5rem, 2vw, 1.25rem);
  margin-inline: clamp(-0.5rem, -2vw, -1.25rem);
  border-top: 1px solid rgba(14,17,22,0.09);
  border-radius: var(--radius-md);
  align-items: start;
  transition: background var(--dur-med) var(--ease-launch);
}
.service-detail:hover{ background: rgba(46,82,224,0.035); }
.service-detail:last-of-type{ border-bottom: 1px solid rgba(14,17,22,0.09); }
.service-detail-badge{ display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; }
.service-detail-badge .service-icon{ margin: 0; flex-shrink: 0; transition: transform var(--dur-med) var(--ease-snap); }
.service-detail:hover .service-detail-badge .service-icon{ transform: rotate(-8deg) scale(1.08); }
.service-detail-num{
  font-family: var(--font-mono); color: var(--mist); font-size: 1.35rem;
  font-weight: 600; line-height: 1;
  transition: color var(--dur-med) var(--ease-launch);
}
.service-detail:hover .service-detail-num{ color: var(--volt); }
.service-detail ul.feature-list{ display: flex; flex-direction: column; gap: 0.9rem; }
.service-detail ul.feature-list li{
  display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.95rem; color: var(--text-on-paper);
}
.service-detail ul.feature-list li.reveal{ transform: translateY(14px); }
.service-detail ul.feature-list li.reveal.is-visible{ transform: translateY(0); }
.service-detail ul.feature-list svg{
  width: 18px; height: 18px; color: var(--signal); flex-shrink: 0; margin-top: 0.15rem;
  transform: scale(0.5); opacity: 0;
  transition: transform 0.4s var(--ease-snap), opacity 0.3s linear;
  transition-delay: 0.15s;
}
.service-detail ul.feature-list li.is-visible svg{ transform: scale(1); opacity: 1; }

@media (min-width: 860px){
  .service-detail{ grid-template-columns: 1fr 1fr; }
  .service-detail ul.feature-list{ padding-top: 4.2rem; }
}

/* ---------------------------------------------------------
   Blog listing
   --------------------------------------------------------- */
.blog-grid{
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.blog-card{
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid rgba(14,17,22,0.07);
  border-radius: var(--radius-md); overflow: hidden;
  transition: transform var(--dur-med) var(--ease-launch), box-shadow var(--dur-med) var(--ease-launch), border-color var(--dur-med) var(--ease-launch);
}
.blog-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 40px -20px rgba(14,17,22,0.22); border-color: rgba(46,82,224,0.25); }
.blog-card-top{
  height: 8px;
  background: linear-gradient(90deg, var(--volt), var(--momentum));
}
.blog-card-body{ padding: 1.8rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.blog-card .tag{ align-self: flex-start; color: var(--volt); border-color: rgba(46,82,224,0.3); }
.blog-card h3{ font-size: 1.25rem; line-height: 1.25; }
.blog-card p{ color: var(--text-muted); font-size: 0.94rem; flex: 1; }
.blog-card-meta{
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.blog-card-link{
  margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; font-size: 0.95rem; color: var(--ink);
}
.blog-card-link svg{ width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-launch); }
.blog-card:hover .blog-card-link svg{ transform: translateX(3px); }

/* ---------------------------------------------------------
   Article (blog post) page
   --------------------------------------------------------- */
.article-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1.2rem;
}
.article-meta span{ display: flex; align-items: center; gap: 0.4rem; }
.article-body{
  max-width: 42rem; margin-inline: auto;
  font-size: 1.05rem; line-height: 1.75; color: var(--text-on-paper);
}
.article-body h2{
  font-size: clamp(1.35rem, 2vw, 1.7rem); margin-top: 2.6rem; margin-bottom: 1rem;
}
.article-body h3{ font-size: 1.15rem; margin-top: 2rem; margin-bottom: 0.8rem; }
.article-body p{ margin-bottom: 1.3rem; color: var(--text-on-paper); }
.article-body ul, .article-body ol{ margin: 0 0 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; }
.article-body li{ padding-left: 0.3rem; }
.article-body ul{ list-style: disc; }
.article-body ol{ list-style: decimal; }
.article-body strong{ font-weight: 700; }
.article-body blockquote{
  border-left: 3px solid var(--volt); padding: 0.3rem 0 0.3rem 1.3rem; margin: 1.8rem 0;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--text-on-paper);
}
.article-callout{
  max-width: 42rem; margin: 2.4rem auto; padding: 1.6rem 1.8rem;
  background: var(--paper-dim); border-radius: var(--radius-md); border: 1px solid rgba(14,17,22,0.07);
}
.article-callout p{ margin: 0; color: var(--text-on-paper); font-size: 0.98rem; }
.article-callout a{ color: var(--volt); font-weight: 600; }
.article-share{
  max-width: 42rem; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(14,17,22,0.09);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
}

/* ---------------------------------------------------------
   About page
   --------------------------------------------------------- */
.value-grid{ display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.value-card{
  background: var(--white); border: 1px solid rgba(14,17,22,0.07); border-radius: var(--radius-md);
  padding: 1.8rem;
}
.value-card .service-icon{ margin-bottom: 1.2rem; }
.value-card h3{ font-size: 1.1rem; margin-bottom: 0.5rem; }
.value-card p{ font-size: 0.92rem; color: var(--text-muted); }

.founder-strip{
  display: grid; gap: 2.5rem; align-items: center;
}
.founder-portrait{
  aspect-ratio: 3 / 2; border-radius: var(--radius-lg);
  background: var(--ink);
  position: relative; overflow: hidden;
}
.founder-portrait svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.founder-portrait img{ width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 860px){ .founder-strip{ grid-template-columns: 0.8fr 1.2fr; } }

/* ---------------------------------------------------------
   Contact page
   Form comes first in markup and visually — it's the primary
   action; the info panel supports it, never buries it below a
   wall of separate cards (especially once columns stack on mobile).
   --------------------------------------------------------- */
.contact-grid{ display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 960px){ .contact-grid{ grid-template-columns: 1.15fr 1fr; align-items: start; } }

.info-card{
  background: var(--white); border: 1px solid rgba(14,17,22,0.07); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2rem);
}
.info-list{ display: flex; flex-direction: column; }
.info-list li{
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding-block: 1.15rem;
  border-bottom: 1px solid rgba(14,17,22,0.08);
}
.info-list li:first-child{ padding-top: 0; }
.info-list li:last-child{ border-bottom: none; padding-bottom: 0; }
.info-list h4{ font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; }
.info-list p, .info-list a{ color: var(--text-muted); font-size: 0.93rem; }
.info-list a:hover{ color: var(--volt); }

.form-card{
  background: var(--white); border: 1px solid rgba(14,17,22,0.07); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 3vw, 2.6rem);
}
.form-row{ display: grid; gap: 1.1rem; margin-bottom: 1.1rem; }
@media (min-width: 560px){ .form-row.two{ grid-template-columns: 1fr 1fr; } }
.field label{
  display: block; font-family: var(--font-mono); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.5rem;
}
.field input, .field textarea, .field select{
  width: 100%; padding: 0.85rem 1rem; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(14,17,22,0.14); background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease-launch), background var(--dur-fast);
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--volt); background: var(--white); outline: none;
}
.field textarea{ resize: vertical; min-height: 120px; }
.form-note{ font-size: var(--fs-micro); color: var(--text-muted); margin-top: 1rem; }
.form-success{
  display: none; align-items: center; gap: 0.8rem;
  background: rgba(23,199,135,0.1); border: 1px solid rgba(23,199,135,0.35);
  color: #0E7A54; padding: 1rem 1.2rem; border-radius: var(--radius-sm); margin-top: 1.2rem;
  font-size: 0.92rem;
}
.form-success.is-visible{ display: flex; }
.form-success svg{ width: 20px; height: 20px; flex-shrink: 0; }

/* ---------------------------------------------------------
   Misc utilities
   --------------------------------------------------------- */
.text-center{ text-align: center; }
.mt-lg{ margin-top: clamp(2rem, 4vw, 3.5rem); }
.grid-2{ display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 860px){ .grid-2{ grid-template-columns: 1fr 1fr; } }
.tag-row{ display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tag{
  font-family: var(--font-mono); font-size: var(--fs-micro); padding: 0.4rem 0.8rem;
  border-radius: 999px; border: 1px solid rgba(14,17,22,0.14); color: var(--text-muted);
}