/* =====================================================================
   UD Yazılım — Tema
   Layout: tek kolonlu, geniş nefes alan Apple tarzı bölümler; marka
   motifi olarak kod etiketi < … /> ve logodaki üç teal tonu.
   ===================================================================== */

:root {
  /* — Renk (açık tema) — */
  --bg:            #F5F8F8;
  --bg-2:          #EBF1F1;
  --surface:       #FFFFFF;
  --fg:            #0B1A1C;
  --fg-2:          #4B5E61;
  --fg-3:          #93A3A5;
  --line:          rgba(11, 40, 44, .10);
  --accent:        #008487;   /* logodaki ana teal — yalnızca etkileşim */
  --accent-hover:  #00777A;
  --accent-ink:    #006A6D;   /* açık zeminde teal metin */
  --accent-2:      #40ABB1;   /* logodaki “/” tonu */
  --accent-deep:   #0C5E6A;   /* logodaki “>” tonu */
  --accent-soft:   rgba(0, 132, 135, .09);
  --accent-soft-2: rgba(0, 132, 135, .18);
  --on-accent:     #FFFFFF;
  --glass:         rgba(245, 248, 248, .72);
  --danger:        #C2412D;
  --shadow-lg:     0 40px 80px -30px rgba(8, 44, 48, .30), 0 12px 24px -12px rgba(8, 44, 48, .12);
  --shadow-sm:     0 1px 2px rgba(8, 44, 48, .06), 0 8px 24px -12px rgba(8, 44, 48, .14);
  --dot:           rgba(11, 40, 44, .16);
  --device:        #0B1A1C;

  /* Kod penceresi her iki temada da koyu (bilinçli tercih) */
  --code-bg:       #0B1517;
  --code-bar:      #111E21;
  --code-fg:       #D9E6E6;
  --code-dim:      #5E7376;
  --code-key:      #5FD0CB;
  --code-str:      #E9C08A;
  --code-fn:       #9FC4FF;
  --code-num:      #F29E8E;

  --show-on-light: block;
  --show-on-dark:  none;

  /* — Tipografi — */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* — Ölçü — */
  --maxw:   1200px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --nav-h:  64px;
  --r-lg:   28px;
  --r-md:   20px;
  --r-sm:   14px;
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #050A0B;
    --bg-2:          #091113;
    --surface:       #0E181A;
    --fg:            #EDF3F3;
    --fg-2:          #9DB0B2;
    --fg-3:          #3E5053;
    --line:          rgba(205, 238, 238, .10);
    --accent:        #00898C;
    --accent-hover:  #0A9A9D;
    --accent-ink:    #52C6C4;
    --accent-2:      #40ABB1;
    --accent-deep:   #0C5E6A;
    --accent-soft:   rgba(64, 171, 177, .10);
    --accent-soft-2: rgba(64, 171, 177, .22);
    --on-accent:     #FFFFFF;
    --glass:         rgba(5, 10, 11, .66);
    --danger:        #F08A74;
    --shadow-lg:     0 40px 80px -30px rgba(0, 0, 0, .7), 0 12px 24px -12px rgba(0, 0, 0, .5);
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
    --dot:           rgba(205, 238, 238, .12);
    --device:        #2B3B3E;
    --show-on-light: none;
    --show-on-dark:  block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:            #050A0B;
  --bg-2:          #091113;
  --surface:       #0E181A;
  --fg:            #EDF3F3;
  --fg-2:          #9DB0B2;
  --fg-3:          #3E5053;
  --line:          rgba(205, 238, 238, .10);
  --accent:        #00898C;
  --accent-hover:  #0A9A9D;
  --accent-ink:    #52C6C4;
  --accent-2:      #40ABB1;
  --accent-deep:   #0C5E6A;
  --accent-soft:   rgba(64, 171, 177, .10);
  --accent-soft-2: rgba(64, 171, 177, .22);
  --on-accent:     #FFFFFF;
  --glass:         rgba(5, 10, 11, .66);
  --danger:        #F08A74;
  --shadow-lg:     0 40px 80px -30px rgba(0, 0, 0, .7), 0 12px 24px -12px rgba(0, 0, 0, .5);
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
  --dot:           rgba(205, 238, 238, .12);
  --device:        #2B3B3E;
  --show-on-light: none;
  --show-on-dark:  block;
  color-scheme: dark;
}

/* =========================== Temel =========================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent-soft-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) + var(--gutter-r));
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
.mono { font-family: var(--font-mono); }
.selectable { user-select: all; }

.logo { height: 23px; width: auto; }
.logo--on-light { display: var(--show-on-light); }
.logo--on-dark  { display: var(--show-on-dark); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .15em;
  margin: 0 0 20px;
  font-size: .8125rem; font-weight: 500; letter-spacing: .02em;
  color: var(--accent-ink);
}
.eyebrow .tag { color: var(--fg-3); }

.section { padding-block: clamp(88px, 12vw, 160px); }
.section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-title {
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 650;
  text-wrap: balance;
}
.grad {
  background: linear-gradient(100deg, var(--accent-deep) 0%, var(--accent) 45%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* =========================== Butonlar =========================== */
.btn {
  --press: 1;
  --skew: -14deg;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  border-radius: 3px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 550; letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap;
  transform: skewX(var(--skew)) scale(var(--press));
  transition: transform .4s var(--ease-spring), background-color .2s, border-color .2s, color .2s, box-shadow .3s;
  -webkit-tap-highlight-color: transparent;
}
.btn > * { transform: skewX(calc(var(--skew) * -1)); }
.btn:active { --press: .97; transition-duration: .1s; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease-spring); }
.btn:hover svg { transform: skewX(calc(var(--skew) * -1)) translateX(3px); }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 24px -10px var(--accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn--ghost:hover { background: var(--accent-soft); border-color: transparent; }
.btn--sm { min-height: 36px; padding: 0 22px; font-size: .9375rem; }
.btn--block { width: 100%; }

/* =========================== Navigasyon =========================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .35s, box-shadow .35s, backdrop-filter .35s;
}
.nav.is-scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 12px 24px -20px rgba(0, 0, 0, .35);
}
.nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 32px; }
.nav__brand { display: flex; align-items: center; min-height: 44px; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  --skew: -14deg;
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 18px;
  font-size: .9375rem; font-weight: 500; color: var(--fg-2);
  border-radius: 3px;
  transform: skewX(var(--skew));
  transition: color .2s, background-color .2s, transform .2s;
}
.nav__links a > * { transform: skewX(calc(var(--skew) * -1)); }
.nav__links a:hover, .nav__links a.is-active {
  color: var(--fg);
  background: var(--accent-soft);
}
.nav__toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  position: relative;
}
.nav__toggle span {
  position: absolute; left: 12px; right: 12px; height: 1.6px; border-radius: 2px; background: var(--fg);
  transition: transform .45s var(--ease-spring);
}
.nav__toggle span:first-child { top: 18px; }
.nav__toggle span:last-child  { top: 25px; }
.nav.menu-open .nav__toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav.menu-open .nav__toggle span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  transform-origin: top right;
  transform: scale(.96) translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .45s var(--ease-spring), opacity .25s, visibility .25s;
}
.mobile-menu__inner { display: flex; flex-direction: column; gap: 4px; padding-block: 8px 24px; }
.mobile-menu a:not(.btn) {
  display: flex; align-items: center; min-height: 52px;
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .btn { margin-top: 16px; }
.nav.menu-open {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}
.nav.menu-open .mobile-menu {
  transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

/* =========================== Hero =========================== */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(40px, 8vw, 96px));
  padding-bottom: clamp(40px, 6vw, 72px);
  overflow: hidden;
  isolation: isolate;
}
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 900px; height: 900px; right: -260px; top: -220px; max-width: none;
  background: radial-gradient(closest-side, var(--accent-soft-2), transparent 70%);
  filter: blur(20px);
}
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center; gap: clamp(32px, 5vw, 72px);
}
.hero__copy { min-width: 0; }
.hero__title {
  margin: 0 0 24px;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: .98; letter-spacing: -.05em; font-weight: 680;
}
.hero__title .line { display: block; }
.hero__title .word { display: inline-block; }
.hero__lead { margin: 0 0 36px; max-width: 34em; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--fg-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__platforms {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 40px 0 0; padding: 0; list-style: none;
  font-size: .93rem; color: var(--fg-2);
}
.hero__platforms li { display: inline-flex; align-items: center; gap: 8px; }
.hero__platforms li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }

/* Sahne */
.hero__stage { perspective: 1400px; min-width: 0; }
.stage {
  --rx: 0deg; --ry: 0deg;
  position: relative; height: 500px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
.win {
  position: absolute; border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.win--code {
  left: 0; top: 56px; width: 78%;
  background: var(--code-bg); border-color: rgba(255,255,255,.06);
  overflow: hidden;
  transform: translateZ(0);
}
.win__bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; background: var(--code-bar); }
.win__bar i { width: 11px; height: 11px; border-radius: 50%; background: #2A3A3D; }
.win__bar i:nth-child(1) { background: #FF5F57; }
.win__bar i:nth-child(2) { background: #FEBC2E; }
.win__bar i:nth-child(3) { background: #28C840; }
.win__file { margin-left: 10px; font-size: .75rem; color: var(--code-dim); }
.code {
  margin: 0; padding: 20px 22px 64px; min-height: 290px;
  font-size: clamp(.72rem, 1.05vw, .84rem); line-height: 1.75; color: var(--code-fg);
  white-space: pre; overflow: hidden;
}
.code .ln { display: inline-block; width: 1.8em; color: var(--code-dim); user-select: none; }
.code .k { color: var(--code-key); }
.code .s { color: var(--code-str); }
.code .f { color: var(--code-fn); }
.code .n { color: var(--code-num); }
.code .c { color: var(--code-dim); font-style: italic; }
.code .caret { display: inline-block; width: 8px; height: 1.15em; vertical-align: -0.2em; background: var(--code-key); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.build {
  position: absolute; left: 18px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  font-size: .72rem; color: var(--code-fg);
  background: rgba(95, 208, 203, .12); border: 1px solid rgba(95, 208, 203, .25);
  opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .3s, transform .5s var(--ease-spring);
}
.build.show { opacity: 1; transform: none; }
.build__dot { width: 8px; height: 8px; border-radius: 50%; background: #28C840; box-shadow: 0 0 0 4px rgba(40, 200, 64, .18); }

.win--dash {
  right: 6%; bottom: 0; width: 46%;
  padding: 18px 20px 14px;
  background: var(--surface);
  transform: translateZ(70px);
}
.dash__head { display: flex; align-items: center; justify-content: space-between; }
.dash__label { font-size: .8125rem; color: var(--fg-2); font-weight: 500; }
.dash__chip { font-size: .72rem; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; }
.dash__value { margin: 6px 0 14px; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash__bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 8px; height: 84px; }
.dash__bars i {
  display: block; height: calc(var(--h) * 100%); border-radius: 6px;
  background: linear-gradient(to top, var(--accent-soft-2), var(--accent-2));
  transform-origin: bottom; transform: scaleY(var(--grow, 1));
  transition: transform 1.1s var(--ease-spring);
}
.dash__bars i:nth-child(6) { background: linear-gradient(to top, var(--accent-deep), var(--accent)); }
.dash__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 8px; font-size: .62rem; color: var(--fg-2); text-align: center; }

.win--phone {
  right: 0; top: 0; width: 38%; max-width: 210px;
  padding: 26px 12px 14px;
  border-radius: 30px;
  background: var(--surface);
  border: 6px solid var(--device);
  transform: translateZ(120px);
}
.phone__notch { position: absolute; top: 8px; left: 50%; width: 56px; height: 14px; margin-left: -28px; border-radius: 999px; background: var(--device); }
.phone__title { font-size: .8125rem; font-weight: 650; letter-spacing: -.01em; margin: 6px 4px 10px; }
.phone__row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; margin-bottom: 6px; border-radius: 12px;
  background: var(--bg);
}
.phone__row b { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft-2); }
.phone__row span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.phone__row em { font-style: normal; font-size: .7rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone__row small { font-size: .6rem; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone__row s { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.phone__row s.ok { background: var(--accent); }
.phone__row s.go { background: var(--accent-2); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px var(--accent-soft-2); } }
.phone__btn { margin-top: 10px; padding: 9px; border-radius: 10px; text-align: center; font-size: .7rem; font-weight: 600; background: var(--accent); color: var(--on-accent); }


/* Açılış koreografisi */
.js .hero__title .word { animation: wordIn 1s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
.js .hero__lead, .js .hero__actions, .js .hero__platforms, .js .eyebrow-hero { animation: fadeUp .9s var(--ease-spring) both; }
.js .hero__lead { animation-delay: .45s; }
.js .hero__actions { animation-delay: .55s; }
.js .hero__platforms { animation-delay: .65s; }
.js .hero__stage { animation: stageIn 1.4s var(--ease-spring) .25s both; }
@keyframes wordIn { from { opacity: 0; transform: translateY(.35em); filter: blur(8px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes stageIn { from { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(10px); } }

/* =========================== Hakkımızda =========================== */
.statement {
  margin: 0; max-width: 24em;
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  line-height: 1.18; letter-spacing: -.03em; font-weight: 600;
  text-wrap: pretty;
}
.statement .w { transition: color .35s; }
.js .statement .w { color: var(--fg-3); }
.js .statement .w.on { color: var(--fg); }

.values {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin-top: clamp(56px, 8vw, 96px);
}
.value {
  padding: 28px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.value__icon, .tile__icon {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
  margin-bottom: 20px;
}
.value__icon svg, .tile__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.value h3, .tile h3 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 620; }
.value p, .tile p { margin: 0; color: var(--fg-2); font-size: 1rem; line-height: 1.55; }

.process { margin-top: clamp(80px, 11vw, 140px); }
.process .section-title { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 40px; }
.steps {
  --p: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin: 0; padding: 32px 0 0; list-style: none;
}
.steps::before, .steps::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px;
}
.steps::before { background: var(--line); }
.steps::after { background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-2)); transform-origin: left; transform: scaleX(var(--p)); }
.step { position: relative; min-width: 0; }
.step::before {
  content: ""; position: absolute; top: -38px; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--fg-3);
  transition: border-color .4s, background-color .4s, transform .5s var(--ease-spring);
}
.step.on::before { border-color: var(--accent); background: var(--accent); transform: scale(1.1); }
.step__n { font-size: .8125rem; color: var(--accent-ink); font-weight: 500; }
.step h4 { margin: 8px 0 6px; font-size: 1.125rem; letter-spacing: -.015em; font-weight: 620; }
.step p { margin: 0; font-size: .9375rem; color: var(--fg-2); line-height: 1.55; }

/* =========================== Hizmetler =========================== */
.services { background: var(--bg-2); }
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.tile {
  --mx: 50%; --my: 50%;
  grid-column: span 3;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 28px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  min-width: 0;
  transition: transform .6s var(--ease-spring), box-shadow .4s;
}
.tile:nth-child(n + 5) { grid-column: span 4; }
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--accent-soft-2), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.tile:hover { box-shadow: var(--shadow-sm); }
.tile:hover::before { opacity: 1; }

/* =========================== Referanslar =========================== */
.refs {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.refs__item {
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
  border-radius: var(--r-md);
  background: #FFFFFF;
  border: 1px solid rgba(11, 40, 44, .10);
  transition: transform .5s var(--ease-spring), box-shadow .3s, border-color .2s;
}
.refs__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-soft-2);
}
.refs__logo {
  flex: 1;
  display: grid; place-items: center;
  min-height: 140px; padding: 20px 12px 16px;
  background: #fff;
}
.refs__logo img {
  display: block; width: auto; height: auto;
  max-width: 94%; max-height: 84px;
  object-fit: contain;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: .78;
  transition: filter .35s ease, -webkit-filter .35s ease, opacity .35s ease;
}
.refs__item:hover .refs__logo img,
.refs__item:focus-within .refs__logo img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  opacity: 1;
}
.refs__name {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid rgba(11, 40, 44, .10);
  font-size: .875rem; font-weight: 500; line-height: 1.3;
  color: #0B1A1C; text-align: left;
  background: #fff;
}
/* Logosu olmayan referanslar — iki satırlı, taşmayan, şık markalar */
.refs__wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28em;
  width: 100%;
  max-width: 100%;
  padding: 0 6px;
  box-sizing: border-box;
  text-align: center;
  color: #445456;
  line-height: 1.05;
  white-space: normal;
  overflow: visible;
  transition: color .35s ease;
}
.refs__wordmark em {
  font-style: normal;
  display: block;
  max-width: 100%;
}
.refs__item:hover .refs__wordmark,
.refs__item:focus-within .refs__wordmark {
  color: #0B1A1C;
}

/* Fındıkistan — italic + ligature hissi */
.refs__wm--findikistan {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.45rem, 1.9vw, 1.85rem);
  letter-spacing: -.02em;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
.refs__wm--findikistan em {
  font-style: italic;
  font-weight: 600;
  opacity: .72;
}

/* İnci Davet Evi — büyük script + küçük satır */
.refs__wm--inci {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(2rem, 2.6vw, 2.45rem);
  letter-spacing: .01em;
  line-height: .95;
}
.refs__wm--inci em {
  margin-top: .05em;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: .32em;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .7;
}

/* Kardeşler Bisiklet — net iki satır, taşmaz */
.refs__wm--kardesler {
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 1.45vw, 1.35rem);
  letter-spacing: .06em;
  text-transform: none;
  gap: .15em;
}
.refs__wm--kardesler em {
  font-weight: 500;
  font-size: .78em;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .68;
  padding-left: .35em;
}

/* Mavi Bar — art deco, iki satır */
.refs__wm--mavibar {
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  gap: .4em;
}
.refs__wm--mavibar em {
  position: relative;
  padding-top: .35em;
  font-size: .58em;
  font-weight: 500;
  letter-spacing: .2em;
  opacity: .68;
}
.refs__wm--mavibar em::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: currentColor;
  opacity: .4;
}

/* Nezih Dent — klinik */
.refs__wm--nezih {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 1.65vw, 1.55rem);
  letter-spacing: -.02em;
  gap: .12em;
}
.refs__wm--nezih em {
  font-weight: 500;
  font-size: .52em;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #008487;
  opacity: .9;
}
.refs__item:hover .refs__wm--nezih em,
.refs__item:focus-within .refs__wm--nezih em {
  opacity: 1;
}

/* Ordu Ekspertiz — bold + alt satır */
.refs__wm--ordu {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(1.85rem, 2.35vw, 2.2rem);
  letter-spacing: .06em;
  line-height: .92;
  text-transform: uppercase;
  gap: .22em;
}
.refs__wm--ordu em {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: .34em;
  font-weight: 600;
  letter-spacing: .28em;
  opacity: .65;
}

/* Özgür Okuyucu — edebi iki satır */
.refs__wm--ozgur {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 1.7vw, 1.6rem);
  letter-spacing: -.015em;
  gap: .1em;
}
.refs__wm--ozgur em {
  font-style: italic;
  font-weight: 600;
  font-size: .72em;
  letter-spacing: .03em;
  opacity: .74;
  padding-left: .5em;
}

/* Syrian Hazelnut — çizgili iki satır */
.refs__wm--syrian {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  letter-spacing: .03em;
  gap: .35em;
}
.refs__wm--syrian em {
  padding-top: .3em;
  border-top: 1px solid currentColor;
  font-style: italic;
  font-weight: 400;
  font-size: .72em;
  letter-spacing: .08em;
  opacity: .72;
}

/* =========================== SSS =========================== */
.faq { background: var(--bg); }
.faq__inner { max-width: 760px; }
.faq__list { margin-top: 40px; display: grid; gap: 12px; }
.faq__item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; font-size: 1.0625rem; font-weight: 550; color: var(--fg);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600;
}
.faq__item[open] summary::after { content: "−"; background: var(--accent); color: var(--on-accent); }
.faq__item p {
  margin: 0; padding: 0 22px 20px; max-width: 42em;
  color: var(--fg-2); font-size: 1rem; line-height: 1.65;
}
.faq__item a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* =========================== İletişim =========================== */
.contact { background: var(--bg-2); }
.contact .section-head { text-align: center; }
.contact .section-title { color: var(--fg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .contact .section-title { color: #fff; }
}
:root[data-theme="dark"] .contact .section-title { color: #fff; }
.contact__lead {
  margin: 16px auto 0; max-width: 36em;
  color: var(--fg-2); font-size: 1.125rem; line-height: 1.6;
  text-align: center;
}
.contact__nap {
  margin: 20px auto 0; max-width: 36em;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  font-size: .8125rem; color: var(--fg-3); text-align: center;
}
.contact__nap a { color: inherit; text-decoration: none; }
.contact__nap a:hover { color: var(--accent-ink); }
.contact__channels {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.channel {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); color: inherit; text-decoration: none;
  transition: border-color .2s, transform .4s var(--ease-spring), box-shadow .25s;
}
.channel:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.channel:active { transform: scale(.985); transition-duration: .1s; }
.channel__icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--accent-soft);
}
.channel__icon svg {
  width: 24px; height: 24px; fill: none;
  stroke: var(--accent-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.channel--wa .channel__icon svg { fill: var(--accent-ink); stroke: none; }
.channel__body { display: grid; gap: 4px; min-width: 0; }
.channel__body strong { font-size: 1.0625rem; font-weight: 600; }
.channel__body span { font-size: .9375rem; color: var(--fg-2); }

.section-lead { margin: 16px 0 0; max-width: 36em; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.6; }

/* =========================== Footer =========================== */
.footer { border-top: 1px solid var(--line); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer__brand .logo { height: 19px; }
.footer__brand p { margin: 10px 0 0; font-size: .875rem; color: var(--fg-2); }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: .9375rem; color: var(--fg-2); transition: color .2s; }
.footer__links a:hover { color: var(--fg); }
.footer__copy { margin: 0; font-size: .8125rem; color: var(--fg-2); }

/* =========================== Kaydırma animasyonu =========================== */
.reveal { transition: transform 1s var(--ease-spring), opacity .8s ease; transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal:not(.is-in) { transform: translateY(32px) scale(.985); opacity: .35; }

/* =========================== Duyarlı düzen =========================== */
@media (max-width: 1020px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__stage { max-width: 620px; width: 100%; margin-inline: auto; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile:nth-child(n + 5) { grid-column: auto; }
  .tile:last-child {
    grid-column: 1 / -1;
    max-width: calc((100% - 16px) / 2);
    justify-self: center;
    width: 100%;
  }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .steps::before, .steps::after { display: none; }
  .step { padding-top: 28px; border-top: 2px solid var(--line); }
  .step.on { border-top-color: var(--accent); }
  .step::before { top: -8px; }
  .contact__channels { grid-template-columns: minmax(0, 1fr); }
  .refs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .mobile-menu { display: block; }
  .values { grid-template-columns: minmax(0, 1fr); }
  .stage { height: 420px; }
  .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile:last-child { max-width: none; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .stage { height: 360px; }
  .win--code { width: 92%; top: 40px; }
  .code { min-height: 230px; padding: 16px 14px 56px; font-size: .66rem; }
  .win--phone { width: 44%; top: 0; }
  .win--dash { right: 2%; width: 62%; }
  .win--phone { width: 40%; }
  .bento { grid-auto-rows: auto; }
  .dash__bars { height: 56px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__brand { display: flex; flex-direction: column; align-items: center; }
  .footer__links { justify-content: center; }
}

/* =========================== Erişilebilirlik =========================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; transition-delay: 0s !important; }
  .js .reveal:not(.is-in) { transform: none; opacity: 1; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-scrolled, .nav.menu-open,
  .nav.menu-open .mobile-menu { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(11, 40, 44, .35); }
}