/* ==========================================================================
   Vivex — stil sayfası
   Renk, tipografi ve hareket kuralları tek dosyada toplanmıştır.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Başlık yazı tipi
   Dosya projede tutulur. Dışarıdan yüklendiğinde aile adı "Ethnocentric Rg"
   olduğu için site hiç eşleşmiyor, yazı tipi kurulu olmayan cihazlarda yedeğe
   düşüyordu. Burada adı kendimiz veriyoruz.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Ethnocentric";
  src: url("../assets/fonts/ethnocentric.woff") format("woff"),
       url("../assets/fonts/ethnocentric.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tasarım değişkenleri
   -------------------------------------------------------------------------- */
:root {
  /* Açık tema varsayılandır. Koyu tema html.dark altında tanımlıdır. */
  --bg: #f4f4f2;
  --bg-card: #ffffff;
  --bg-footer: #ebeae6;

  --text: #1c1c1e;
  --text-strong: #0d0d0d;
  --text-muted: rgba(20, 20, 22, 0.74);
  --text-dim: rgba(20, 20, 22, 0.62);
  --text-faint: rgba(20, 20, 22, 0.5);

  --line: rgba(20, 20, 22, 0.12);
  --line-strong: rgba(20, 20, 22, 0.2);
  --veil: rgba(20, 20, 22, 0.06);
  --veil-strong: rgba(20, 20, 22, 0.1);
  --sheen: rgba(255, 255, 255, 0.6);

  /* Deneyim şeridi: sayfanın tersi tonda durur. */
  --band-bg: #141416;
  --band-text: #f4f4f4;
  --band-text-muted: rgba(255, 255, 255, 0.75);
  --band-text-dim: rgba(255, 255, 255, 0.6);

  /* Birincil düğme her zaman zeminin tersidir. */
  --btn-bg: var(--text-strong);
  --btn-fg: var(--bg);

  --accent: #3b7bff;
  --accent-soft: #2f63d6;
  --accent-glow: rgba(59, 123, 255, 0.35);
  --green: #1f9d55;

  --font-display: Ethnocentric, "Manrope", system-ui, sans-serif;
  --font-body: Manrope, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --shell: 1280px;
  --gutter: clamp(16px, 3vw, 44px);
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --expo-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Çentik navigasyon her iki temada da siyah kalır. */
  --notch-bg: #0d0d0d;
  --notch-light: #f4f4f4;
  --notch-muted: #8a8a84;
}

html.dark {
  --bg: #141416;
  --bg-card: #1a1a1d;
  --bg-footer: #0d0d0f;

  --text: #e8e8e8;
  --text-strong: #f4f4f4;
  --text-muted: rgba(255, 255, 255, 0.72);
  --text-dim: rgba(255, 255, 255, 0.62);
  --text-faint: rgba(255, 255, 255, 0.5);

  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.14);
  --veil: rgba(255, 255, 255, 0.06);
  --veil-strong: rgba(255, 255, 255, 0.1);
  --sheen: rgba(255, 255, 255, 0.35);

  --band-bg: #e9e9e9;
  --band-text: #141416;
  --band-text-muted: rgba(20, 20, 22, 0.75);
  --band-text-dim: rgba(20, 20, 22, 0.65);

  --accent-soft: #7fa6ff;
  --green: #43d17a;
}

/* --------------------------------------------------------------------------
   2. Temel sıfırlama ve tipografi
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-loading {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Görseller WebP sunabilmek için <picture> ile sarılıdır. display: contents
   sarmalayıcıyı düzenden tamamen çıkarır; img yine üst ögenin doğrudan
   çocuğu gibi yerleşir, böylece flex ve grid kuralları değişmez. */
picture {
  display: contents;
}

input,
textarea,
button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

section {
  scroll-margin-top: 72px;
}

::selection {
  background: var(--accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}

.skip-link:focus-visible {
  transform: none;
}

/* Ortak metin yardımcıları -------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent-soft);
  text-transform: uppercase;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-strong);
  text-wrap: balance;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 2.3vw, 30px);
  letter-spacing: 0.02em;
}

.section-head p {
  font-size: 16px;
  color: var(--text-dim);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   3. Animasyonlar
   -------------------------------------------------------------------------- */
@keyframes textSlide {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

@keyframes grainmove {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

/* Görünüme girince ortaya çıkan bloklar */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

[data-reveal]:nth-child(2) { transition-delay: 0.08s; }
[data-reveal]:nth-child(3) { transition-delay: 0.16s; }
[data-reveal]:nth-child(4) { transition-delay: 0.24s; }
[data-reveal]:nth-child(5) { transition-delay: 0.32s; }
[data-reveal]:nth-child(6) { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   4. Açılış ekranı
   -------------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px var(--gutter);
  background-color: var(--bg);
  pointer-events: none;
  /* Zemin solar ama söz işareti kalır: hero'daki marka adına dönüşecektir. */
  transition: background-color 0.6s ease;
}

.loader[hidden] {
  display: none !important;
}

.loader.is-fading {
  background-color: transparent;
}

.loader.is-fading .loader__row,
.loader.is-fading .loader__track {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.loader__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}

.loader__row--bottom {
  align-items: flex-end;
}

.loader__center {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.loader__word {
  font-family: var(--font-display);
  transform-origin: center;
  will-change: transform;
  font-size: clamp(36px, 7vw, 110px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}

.loader__track {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: var(--veil-strong);
}

.loader__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent);
  transition: width 0.12s linear;
}

.loader__count {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   5. İmleç ışığı ve okuma çubuğu
   -------------------------------------------------------------------------- */
.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 123, 255, 0.14), transparent 65%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.6s ease;
  will-change: transform;
}

/* İmleci izleyen ışık yalnızca fare varken anlamlı. Dokunmatik cihazda
   JavaScript tarafı zaten devreye girmiyor; öge de kaldırılarak boşuna
   compositing katmanı tutulması önlenir. */
@media (hover: none) {
  .cursor-glow {
    display: none;
  }
}

.scroll-bar {
  position: fixed;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  z-index: 400;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

/* --------------------------------------------------------------------------
   6. Navigasyon — cam yüzeyli başlık ve kademeli panel
   Başlık sabit durur; menü sağdan, önünde iki renk katmanıyla açılır.
   -------------------------------------------------------------------------- */
.staggered-menu-wrapper {
  --sm-accent: var(--accent);
  --sm-panel-w: clamp(280px, 38vw, 420px);
  --sm-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
}

/* Sarmalayıcı tam ekrandır ama tıklamayı geçirir; yalnızca başlık ve panel
   tıklanabilir olur. Panel kapalıyken taşma gizlendiği için ekran dışında durur. */

.staggered-menu-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  background: transparent;
  pointer-events: none;
}

.staggered-menu-header > *:not(.sm-glass) {
  pointer-events: auto;
}

/* Cam yüzey ---------------------------------------------------------------- */
/* Başlığın içinde değil, altında ayrı bir katmandır: backdrop-filter aynı
   yığın bağlamındaki içeriği yutabiliyor. */
.sm-glass {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sm-header-h, 64px);
  z-index: 15;
  pointer-events: none;
}

.glass-surface {
  /* Başlık, altından geçen fotoğrafın üstünde de okunmalı; bu yüzden
     buzlanma yalnızca dekoratif değil, okunabilirlik için gereklidir. */
  --glass-frost: 0.62;
  --glass-saturation: 1.4;
  overflow: hidden;
  transition: opacity 0.26s ease-out;
}

.glass-surface__filter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

/* Kırılmalı sürüm: yalnızca SVG süzgeçli backdrop-filter destekleyen
   tarayıcılarda kullanılır. */
.glass-surface--svg {
  background: hsl(0 0% 100% / var(--glass-frost));
  backdrop-filter: url(#headerGlassFilter) saturate(var(--glass-saturation));
  box-shadow:
    0 0 2px 1px rgba(20, 20, 22, 0.15) inset,
    0 0 10px 4px rgba(20, 20, 22, 0.1) inset,
    0 4px 16px rgba(17, 17, 26, 0.05),
    0 8px 24px rgba(17, 17, 26, 0.05);
}

html.dark .glass-surface--svg {
  background: hsl(0 0% 0% / var(--glass-frost));
  box-shadow:
    0 0 2px 1px rgba(255, 255, 255, 0.35) inset,
    0 0 10px 4px rgba(255, 255, 255, 0.15) inset;
}

/* Yedek sürüm: klasik bulanıklık. */
.glass-surface--fallback {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(1.05);
  border-bottom: 1px solid rgba(20, 20, 22, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 8px 32px rgba(31, 38, 135, 0.08);
}

html.dark .glass-surface--fallback {
  background: rgba(20, 20, 22, 0.66);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Logo ve başlık aksiyonları ------------------------------------------------ */
.sm-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  color: var(--text);
}

.sm-logo-img {
  display: block;
  height: 20px;
  width: auto;
  object-fit: contain;
  filter: invert(1);
  transition:
    transform 0.5s var(--expo-out),
    opacity 0.4s ease;
}

html.dark .sm-logo-img {
  filter: none;
}

/* Sakin bir yaklaşma: işaret hafifçe büyür, yazı aralığı açılır. */
.sm-logo:hover .sm-logo-img {
  transform: scale(1.08);
}

.sm-logo:hover .sm-logo-word {
  letter-spacing: 0.14em;
  color: var(--text-strong);
}

.sm-logo-word {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition:
    letter-spacing 0.45s var(--expo-out),
    color 0.4s ease;
}

.sm-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}


.sm-cta {
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}

.sm-cta:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}

/* Menü düğmesi -------------------------------------------------------------- */
.sm-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  cursor: pointer;
  overflow: visible;
}

.sm-toggle-textWrap {
  position: relative;
  display: inline-block;
  height: 1.35em;
  overflow: hidden;
  white-space: nowrap;
}

.sm-toggle-textInner {
  display: flex;
  flex-direction: column;
  line-height: 1;
  will-change: transform;
}

.sm-toggle-line {
  display: block;
  height: 1.35em;
  line-height: 1.35;
}

.sm-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transition: transform 0.5s var(--sm-ease);
}

.sm-icon-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.sm-icon-line-v {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Katmanlar ve panel -------------------------------------------------------- */
.sm-prelayers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: var(--sm-panel-w);
  pointer-events: none;
}

.sm-prelayer {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.5s var(--sm-ease);
}

.sm-prelayer--1 { background: #2f2f36; }
.sm-prelayer--2 { background: #16161a; }

.staggered-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: var(--sm-panel-w);
  height: 100%;
  padding: 96px var(--gutter) 40px;
  overflow-y: auto;
  background: var(--bg-card);
  transform: translateX(100%);
  transition: transform 0.65s var(--sm-ease);
  pointer-events: auto;
}

.staggered-menu-wrapper[data-open] .sm-prelayer,
.staggered-menu-wrapper[data-open] .staggered-menu-panel {
  transform: translateX(0);
}

.staggered-menu-wrapper[data-open] .sm-prelayer--1 { transition-delay: 0s; }
.staggered-menu-wrapper[data-open] .sm-prelayer--2 { transition-delay: 0.07s; }
.staggered-menu-wrapper[data-open] .staggered-menu-panel { transition-delay: 0.22s; }

/* Kapanışta katmanlar birlikte ve daha hızlı çekilir. */
.staggered-menu-wrapper:not([data-open]) .sm-prelayer,
.staggered-menu-wrapper:not([data-open]) .staggered-menu-panel {
  transition-duration: 0.32s;
  transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  transition-delay: 0s;
}

.sm-panel-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.25rem;
}

.sm-panel-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: smItem;
}

.sm-panel-itemWrap {
  position: relative;
  overflow: hidden;
  line-height: 1;
  /* Ö, Ü ve İ üzerindeki işaretler kırpılmasın diye üstten pay bırakılır. */
  padding-top: 0.24em;
  margin-top: -0.06em;
}

.sm-panel-item {
  position: relative;
  display: inline-block;
  padding-right: 1.8em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 2vw, 26px);
  /* Bu yazı tipinde küçük "i" noktasız çiziliyor; büyük harfe çevrilince
     tarayıcı lang="tr" kuralıyla İ üretiyor. */
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--text-strong);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s;
}

.sm-panel-item:hover {
  color: var(--sm-accent);
}

.sm-panel-item::after {
  counter-increment: smItem;
  content: counter(smItem, decimal-leading-zero);
  position: absolute;
  top: 0.1em;
  right: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sm-accent);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.6s ease;
}

.sm-panel-itemLabel {
  display: inline-block;
  transform: translateY(140%) rotate(10deg);
  transform-origin: 50% 100%;
  will-change: transform;
  transition: transform 1s var(--sm-ease);
}

.staggered-menu-wrapper[data-open] .sm-panel-itemLabel {
  transform: none;
}

.staggered-menu-wrapper[data-open] .sm-panel-item::after {
  opacity: 1;
}

/* Öğeler panelden sonra sırayla girer. */
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(1) .sm-panel-itemLabel { transition-delay: 0.32s; }
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(2) .sm-panel-itemLabel { transition-delay: 0.42s; }
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(3) .sm-panel-itemLabel { transition-delay: 0.52s; }
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(4) .sm-panel-itemLabel { transition-delay: 0.62s; }
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(5) .sm-panel-itemLabel { transition-delay: 0.72s; }
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(6) .sm-panel-itemLabel { transition-delay: 0.82s; }

.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(1) .sm-panel-item::after { transition-delay: 0.42s; }
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(2) .sm-panel-item::after { transition-delay: 0.5s; }
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(3) .sm-panel-item::after { transition-delay: 0.58s; }
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(4) .sm-panel-item::after { transition-delay: 0.66s; }
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(5) .sm-panel-item::after { transition-delay: 0.74s; }
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap:nth-child(6) .sm-panel-item::after { transition-delay: 0.82s; }

.sm-socials {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 2rem;
}

.sm-socials-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sm-accent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.staggered-menu-wrapper[data-open] .sm-socials-title {
  opacity: 1;
  transition-delay: 0.48s;
}

.sm-socials-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sm-socials-link {
  display: inline-block;
  padding: 2px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.55s ease, transform 0.55s var(--sm-ease), color 0.3s ease;
}

.staggered-menu-wrapper[data-open] .sm-socials-link {
  opacity: 1;
  transform: none;
}

.staggered-menu-wrapper[data-open] .sm-socials-item:nth-child(1) .sm-socials-link { transition-delay: 0.52s; }
.staggered-menu-wrapper[data-open] .sm-socials-item:nth-child(2) .sm-socials-link { transition-delay: 0.6s; }
.staggered-menu-wrapper[data-open] .sm-socials-item:nth-child(3) .sm-socials-link { transition-delay: 0.68s; }

.sm-socials-list:hover .sm-socials-link:not(:hover) {
  opacity: 0.35;
}

.sm-socials-link:hover {
  color: var(--sm-accent);
}

@media (max-width: 700px) {
  .sm-logo-word {
    display: none;
  }

  .staggered-menu-panel,
  .sm-prelayers {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .sm-toggle-textWrap {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-prelayer,
  .staggered-menu-panel,
  .sm-panel-itemLabel,
  .sm-socials-link,
  .sm-socials-title,
  .sm-panel-item::after,
  .sm-icon,
  .sm-toggle-textInner {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   7. Butonlar
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.35s, color 0.35s, transform 0.35s;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, var(--sheen) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}

.btn:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn:active {
  transform: scale(0.97);
}

.btn--sm {
  padding: 9px 16px;
  font-size: 11.5px;
}

.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  transition: all 0.35s;
}

.btn--ghost::after {
  display: none;
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   8. WhatsApp düğmesi
   Normalde yalnızca simge; üzerine gelince genişleyip yazıyı açar.
   -------------------------------------------------------------------------- */
.whatsapp {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 250;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--green);
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  transition:
    width 0.45s var(--ease),
    padding 0.45s var(--ease),
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.6s var(--ease-back) 0.65s,
    opacity 0.5s ease 0.65s,
    box-shadow 0.35s ease;
}

.whatsapp__icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.whatsapp__label {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--text);
  transition:
    max-width 0.45s var(--ease),
    margin-left 0.45s var(--ease),
    opacity 0.3s ease;
}

.whatsapp:hover,
.whatsapp:focus-visible {
  width: 218px;
  padding: 0 18px;
  justify-content: flex-start;
  border-color: var(--green);
  color: var(--green);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.whatsapp:hover .whatsapp__label,
.whatsapp:focus-visible .whatsapp__label {
  max-width: 150px;
  margin-left: 12px;
  opacity: 1;
}

@media (max-width: 560px) {
  .whatsapp {
    right: 16px;
    bottom: 16px;
  }
}

/* --------------------------------------------------------------------------
   9. Hero — kaydırmayla açılan çerçeve
   Çerçeve clip-path ile büyür, görsel yakınlaştırmadan çıkar, başlık çekilir.
   -------------------------------------------------------------------------- */
.scroll-expand {
  position: relative;
  width: 100%;
}

.scroll-expand__track {
  position: relative;
  width: 100%;
}

.scroll-expand__stage {
  position: sticky;
  top: 0;
  width: 100%;
  /* Mobil tarayıcılarda adres çubuğu açılıp kapandıkça görünüm yüksekliği
     değişir. Küçük görünüm birimi sabit kaldığı için açılma oranı geri
     sıçramaz. Masaüstünde bu değer 100vh ile aynıdır. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  --se-title-size: 4rem;
}

.scroll-expand__frame {
  position: absolute;
  inset: 0;
  clip-path: inset(21% 29% 21% 29% round 24px);
  will-change: clip-path;
  background: #3f4247;
}

.scroll-expand__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
  filter: grayscale(0.35) contrast(1.05) brightness(0.62);
  transform-origin: center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.scroll-expand__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.35));
}

.scroll-expand__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 6%;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
}

/* Marka kilidi: üstte ad, altında iş kolları. Ölçü, ada göre belirlenir. */
.scroll-expand__title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  padding: 0 6%;
  font-size: var(--se-title-size);
  line-height: 1;
  text-align: center;
  color: #fff;
  pointer-events: none;
  will-change: opacity, transform;
}

.hero-mark__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* Gölge marka yerine oturduktan sonra yavaşça açılır; anında belirirse
     yazı fotoğrafın üstüne yapıştırılmış gibi duruyor. */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0);
  transition: text-shadow 1.6s ease-out;
}

.hero-mark__tag {
  /* Genişlik dinlenme karesinden türetilir; betik çalışmazsa tam genişlik. */
  max-width: var(--se-tag-max, 100%);
  /* Dinlenme karesinin dışına taşmasın; gerekirse alt satıra iner. */
  text-wrap: balance;
  font-family: var(--font-mono);
  font-weight: 500;
  /* Ad küçüldüğünde alt satır okunmaz olmasın diye alt sınır konur. */
  font-size: max(13px, 0.22em);
  line-height: 1.5;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0);
  transition: text-shadow 1.6s ease-out 0.2s;
}

.scroll-expand__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  /* Çerçevenin dışında, sayfa zemininin üstünde durur. */
  color: var(--text-muted);
  pointer-events: none;
  will-change: opacity, transform;
}

/* Çerçeve içindeki hero metni ---------------------------------------------- */
.hero__rule {
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
}

.hero h1 {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* Hero fotoğrafın üstünde durur; her iki temada da açık renk kalır. */
  font-size: clamp(18px, 3.4vw, 46px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #f4f4f4;
  text-wrap: pretty;
}

.hero h1 > span {
  overflow: hidden;
  /* Türkçe işaretler kırpılmasın. */
  padding-top: 0.12em;
  margin-top: -0.12em;
}

.hero h1 span span {
  display: block;
}

.hero__lede {
  max-width: 62ch;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   10. Kartlar — çözümler, hizmetler, galeri
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, var(--veil) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.9s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(59, 123, 255, 0.6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.card:hover::before {
  transform: translateX(100%);
}

.card img {
  transition: transform 1.2s var(--ease), filter 1s;
}

.card:hover img {
  transform: scale(1.06);
  filter: grayscale(0) brightness(0.8);
}

.card__title {
  transition: transform 0.4s, color 0.4s;
}

.card:hover .card__title {
  /* Kart yüzeyi temaya göre değişir; sabit beyaz açık temada kayboluyordu. */
  color: var(--text-strong);
  transform: translateX(3px);
}

.arrow {
  display: inline-block;
  transition: transform 0.4s, color 0.4s;
}

.card:hover .arrow {
  transform: translateX(6px);
  color: var(--accent);
}

.tag {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  transition: all 0.4s;
}

.card:hover .tag {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--accent-glow);
}

/* Çözümler ---------------------------------------------------------------- */
.solutions {
  padding: 80px var(--gutter) 40px;
}

.solutions__grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 20px;
}

.solution {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 300px;
}

.solution__media {
  overflow: hidden;
}

.solution__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) brightness(0.7);
}

.solution__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 30px 28px;
}

.solution__body .card__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}

.solution__body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.link-mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--accent-soft);
}

/* Hizmetler --------------------------------------------------------------- */
.services {
  padding: 80px var(--gutter);
}

.services__grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.service {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
}

.service img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) brightness(0.55);
}

/* Konusu kadrajın altında kalan fotoğrafları aşağıdan hizala. */
.service img[data-focus="bottom"] {
  object-position: 50% 100%;
}

.service__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(20, 20, 22, 0.95));
}

.service__body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent-soft);
  transition: all 0.5s;
}

.card:hover .service__no {
  color: #fff;
  letter-spacing: 0.3em;
}

.service__body .card__title {
  font-size: 19px;
  font-weight: 600;
  /* Fotoğrafın üstünde durur, temadan bağımsız açık kalır. */
  color: #f4f4f4;
}

.card:hover .service__body .card__title {
  color: #fff;
}

.service__body p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   11. Hakkımızda ve sektör kutuları
   -------------------------------------------------------------------------- */
.about {
  padding: 40px var(--gutter) 80px;
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 40px;
  align-items: center;
}

.about__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about__intro h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.about__intro p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
  text-wrap: pretty;
}

.sectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-card);
  transition: border-color 0.4s, transform 0.4s;
}

.sector:hover {
  border-color: rgba(59, 123, 255, 0.6);
  transform: translateY(-4px);
}

.sector__dot {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--accent);
  transition: width 0.4s var(--ease), box-shadow 0.4s;
}

.sector:hover .sector__dot {
  width: 28px;
  box-shadow: 0 0 12px var(--accent);
}

.sector h3 {
  font-size: 17px;
  font-weight: 600;
}

.sector p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.sector__link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent-soft);
  transition: all 0.4s;
}

.sector:hover .sector__link {
  color: var(--text-strong);
  letter-spacing: 0.2em;
}

/* --------------------------------------------------------------------------
   12. Açık renkli deneyim şeridi
   -------------------------------------------------------------------------- */
.experience {
  position: relative;
  overflow: hidden;
  background: var(--band-bg);
  color: var(--band-text);
}

.experience__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  min-height: 380px;
}

.experience__media {
  position: relative;
  min-height: 260px;
  overflow: hidden;
}

.experience__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.experience__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, var(--band-bg));
}

.experience__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 64px clamp(24px, 4vw, 64px);
}

.experience__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 34px);
  letter-spacing: 0.01em;
}

.experience__body p {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--band-text-muted);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-top: 8px;
}

.stat__value {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.02em;
}

.stat__label {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--band-text-dim);
}

/* --------------------------------------------------------------------------
   13. Marka şeridi (logo loop)
   Logolar sonsuz döngüde kayar; kenarlar solar, üzerine gelince durur.
   -------------------------------------------------------------------------- */
.logo-cloud {
  width: 100%;
  padding: 48px 0;
  /* Tek renk logolar açık zeminde kaybolacağı için bu şerit iki temada da koyudur. */
  background: #0d0d0f;
}

@media (min-width: 768px) {
  .logo-cloud {
    padding: 64px 0;
  }
}

.logo-cloud__inner {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.logo-cloud__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.logo-cloud__desc {
  margin-top: 4px;
  font-size: 12px;
  color: #71717a;
}

.logoloop {
  position: relative;
  width: 100%;
  margin-top: 32px;
  overflow: hidden;

  --logoloop-gap: 56px;
  --logoloop-logoHeight: 28px;
  --logoloop-fadeColor: #0d0d0f;
}

.logoloop--scale-hover {
  padding-block: calc(var(--logoloop-logoHeight) * 0.35);
}

.logoloop__track {
  display: flex;
  width: max-content;
  position: relative;
  z-index: 0;
  user-select: none;
  will-change: transform;
}

.logoloop__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logoloop__item {
  flex: 0 0 auto;
  margin-right: var(--logoloop-gap);
  font-size: var(--logoloop-logoHeight);
  line-height: 1;
  overflow: visible;
}

.logoloop__item img {
  display: block;
  height: var(--logoloop-logoHeight);
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.logoloop__node {
  display: inline-flex;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #e4e4e7;
  opacity: 0.85;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.logoloop--scale-hover .logoloop__item:hover img,
.logoloop--scale-hover .logoloop__item:hover .logoloop__node {
  transform: scale(1.2);
  transform-origin: center center;
  opacity: 1;
}

/* İki satırlı ve kare kilitli logolar aynı optik ağırlığa getirilir. */
.logoloop__item img[src*="schneider"] { height: calc(var(--logoloop-logoHeight) * 1.6); }
.logoloop__item img[src*="hp-mono"] { height: calc(var(--logoloop-logoHeight) * 1.15); }

.logoloop--fade::before,
.logoloop--fade::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  width: clamp(24px, 8%, 120px);
  pointer-events: none;
}

.logoloop--fade::before {
  left: 0;
  background: linear-gradient(to right, var(--logoloop-fadeColor) 0%, rgba(13, 13, 15, 0) 100%);
}

.logoloop--fade::after {
  right: 0;
  background: linear-gradient(to left, var(--logoloop-fadeColor) 0%, rgba(13, 13, 15, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .logoloop__track {
    transform: translate3d(0, 0, 0) !important;
  }

  .logoloop__item img,
  .logoloop__node {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   14. Süreç şeridi
   -------------------------------------------------------------------------- */
/* Marka şeridi koyu bir bant; mavi şerit ona yapışmasın diye üstten boşluk. */
.process {
  padding: 80px var(--gutter);
}

.process__pill {
  max-width: var(--shell);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 44px clamp(24px, 5vw, 72px);
  border-radius: 999px;
  background: var(--accent);
  text-align: center;
}

.process__pill h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.02em;
  color: #fff;
}

.process__pill p {
  margin-top: 8px;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.85);
}

.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1px;
  width: 100%;
}

.step {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  cursor: default;
  transition: transform 0.4s, background 0.4s;
}

.step:last-child {
  border-right: 0;
}

.step:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
}

.step__no {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 26px;
  color: #fff;
  transition: transform 0.4s var(--ease-back);
}

.step:hover .step__no {
  transform: scale(1.15);
}

.step__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   15. Referans listesi
   -------------------------------------------------------------------------- */
.references {
  padding: 0 var(--gutter) 80px;
}

.references__list {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.reference {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.45s var(--ease), background 0.4s;
}

.reference:hover {
  padding-left: 14px;
  background: var(--veil);
}

.reference__cat {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--accent-soft);
  transition: color 0.4s;
}

.reference:hover .reference__cat {
  color: var(--text-strong);
}

.reference__list {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   16. Galeri — akordeon
   Üzerine gelinen kare açılır, diğerleri hafifçe döner ve grileşir.
   Geçişler GSAP yerine CSS ile yapılır; süre ve yumuşatma aynıdır.
   -------------------------------------------------------------------------- */
.gallery {
  padding: 0 var(--gutter) 80px;
}

.gallery__inner {
  max-width: var(--shell);
  margin-inline: auto;
}

.accordion-gallery {
  --ag-accent: var(--accent);
  --ag-overlay: #0d0d0f;
  --ag-text: #ffffff;
  --ag-gap: 10px;
  --ag-radius: 16px;
  --ag-media-size: 320px;
  --ag-duration: 0.6s;
  --ag-ease: cubic-bezier(0.33, 1, 0.68, 1);

  display: flex;
  flex-direction: row;
  gap: var(--ag-gap);
  width: 100%;
  max-width: 100%;
  height: 460px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.ag-panel {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--ag-radius);
  background: #0a0a0c;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  outline: none;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: flex-grow, transform;
  -webkit-tap-highlight-color: transparent;
  transition:
    flex-grow var(--ag-duration) var(--ag-ease),
    transform var(--ag-duration) var(--ag-ease);
}

.ag-panel:focus-visible {
  box-shadow:
    0 0 0 2px var(--ag-accent),
    0 10px 30px -18px rgba(0, 0, 0, 0.8);
}

.ag-panel__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.ag-panel__media {
  --ag-gray: 1;
  --ag-dim: 0.35;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ag-media-size);
  height: 100%;
  transform: translate(-50%, -50%);
  filter: grayscale(var(--ag-gray));
  will-change: transform, filter;
  transition:
    transform var(--ag-duration) var(--ag-ease),
    filter var(--ag-duration) var(--ag-ease);
}

.ag-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.ag-panel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(13, 13, 15, 0.78) 100%),
    rgba(13, 13, 15, var(--ag-dim, 0.35));
  transition: background var(--ag-duration) var(--ag-ease);
}

.ag-panel__label {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.ag-panel__bar {
  flex: 0 0 auto;
  width: 3px;
  height: 26px;
  border-radius: 3px;
  background: var(--ag-accent);
  box-shadow: 0 0 12px var(--accent-glow);
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity var(--ag-duration) var(--ag-ease),
    transform var(--ag-duration) var(--ag-ease);
}

.ag-panel__text {
  overflow: hidden;
  color: var(--ag-text);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 20px);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity var(--ag-duration) var(--ag-ease) 0.06s,
    transform var(--ag-duration) var(--ag-ease) 0.06s;
}

.ag-panel.is-active .ag-panel__bar,
.ag-panel.is-active .ag-panel__text {
  opacity: 1;
  transform: none;
}

@media (max-width: 700px) {
  .accordion-gallery {
    flex-direction: column;
    perspective: none;
    height: auto;
  }

  /* 88 piksel, fotoğraftan ne olduğu anlaşılmayan bir şerit bırakıyordu. */
  .ag-panel {
    min-height: 116px;
    transform: none !important;
  }

  .ag-panel.is-active {
    min-height: 288px;
  }

  /* Yığın düzeninde karenin yüksekliği panele eşitlenir. Masaüstünden
     devralınan sabit ölçü, açık panelin altında ve üstünde siyah bant
     bırakıyordu. */
  .ag-panel__media {
    width: 100%;
    height: 100%;
  }

  /* Dokunmatikte üzerine gelme diye bir şey yok; başlık her karede okunur
     dursun, etkin kare yalnızca tam vurguyla ayrışsın. */
  .ag-panel__bar,
  .ag-panel__text {
    opacity: 0.78;
    transform: none;
  }

  .ag-panel.is-active .ag-panel__bar,
  .ag-panel.is-active .ag-panel__text {
    opacity: 1;
  }

  .ag-panel__label {
    left: 16px;
    right: 16px;
    bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-panel,
  .ag-panel__media,
  .ag-panel__bar,
  .ag-panel__text,
  .ag-panel__overlay {
    transition: none !important;
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   17. İletişim formu
   -------------------------------------------------------------------------- */
.contact {
  padding: 0 var(--gutter) 80px;
}

.contact__head,
.contact__grid,
.contact__foot {
  max-width: 880px;
  margin-inline: auto;
}

.contact__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field input {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 15.5px;
  outline: none;
  transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
}

.field input::placeholder {
  color: var(--text-faint);
  transition: opacity 0.3s, transform 0.3s;
}

.field input:hover {
  border-color: var(--line-strong);
}

.field input:focus {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(59, 123, 255, 0.18);
  transform: translateY(-1px);
}

.field input:focus::placeholder {
  opacity: 0.35;
  transform: translateX(4px);
}

.field input[aria-invalid="true"] {
  border-color: #ff6b6b;
}

.field__error {
  min-height: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #ff8f8f;
}

.contact__foot {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.3s;
}

.check:hover {
  color: var(--text);
}

.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  transition: transform 0.2s;
}

.check:hover input {
  transform: scale(1.1);
}

/* Aydınlatma metni bağlantısı tıklanabilir olduğunu belli etsin. Etiketin
   geri kalanı kutucuğu işaretler; bağlantı ise metni yeni sekmede açar. */
.check a {
  color: var(--accent-soft);
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s ease;
}

.check a:hover {
  opacity: 0.75;
}

.form-status {
  max-width: 880px;
  margin: 14px auto 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent-soft);
}

.form-status.is-error {
  color: #ff8f8f;
}

/* --------------------------------------------------------------------------
   18. Alt bilgi
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--line);
  padding: 56px var(--gutter) 110px;
}

.footer__grid {
  max-width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 36px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__brand img {
  height: 18px;
  /* Logo dosyası beyaz; açık temada koyuya çevrilir. */
  filter: invert(1);
}

html.dark .footer__brand img {
  filter: none;
}

.footer__brand span {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.footer__about {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}

.footer__label {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent-soft);
}

.footer__link {
  position: relative;
  display: inline-block;
  font-size: 14.5px;
  transition: transform 0.3s, color 0.3s;
}

.footer__link::before {
  content: "→";
  position: absolute;
  left: -16px;
  opacity: 0;
  color: var(--accent);
  transition: opacity 0.3s;
}

.footer__link:hover {
  transform: translateX(6px);
  color: var(--text-strong);
}

.footer__link:hover::before {
  opacity: 1;
}

.footer__text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Aynı sütunda ikinci bir başlık gelirse üstünden pay bırakır. */
.footer__label--sep {
  margin-top: 22px;
}

.footer__base {
  max-width: var(--shell);
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   19. Duyarlı düzen
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  /* Sağ çentik dar ekranda yalnızca çağrı düğmesini taşır. */
  .notch__tel {
    display: none;
  }
}

@media (max-width: 880px) {
  /* Orta çentik gizlenir; menü sağ çentikteki hamburgere taşınır. */
  .notch--menu {
    display: none;
  }

  .notch__burger {
    display: grid;
  }
}

@media (max-width: 860px) {
  .solution {
    grid-template-columns: 1fr;
  }

  .solution__media {
    aspect-ratio: 16 / 9;
  }

  .logo-cloud__row {
    gap: 20px 24px;
  }

  .logo-cloud__item {
    min-width: 84px;
  }

  .process__pill {
    border-radius: 28px;
  }

  .step {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .step:last-child {
    border-bottom: 0;
  }

  .reference {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .experience__media {
    aspect-ratio: 16 / 9;
  }

  .experience__media::after {
    background: linear-gradient(180deg, transparent 55%, var(--band-bg));
  }
}

@media (max-width: 620px) {
  /* Dar ekranda çentikler daralır. */
  .notch--logo {
    padding: 0 16px;
  }

  .notch--actions {
    padding: 0 12px;
  }

  .notch__cta {
    padding: 7px 12px;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 560px) {
  .sectors,
  .services__grid {
    grid-template-columns: 1fr;
  }

  .contact__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .contact__foot .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   20. Hareket azaltma tercihi
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .cursor-glow,
  .grain {
    display: none;
  }

  .notch__pill,
  .notch__link,
  .drawer,
  .drawer__link {
    transition: none !important;
  }

  .logo-cloud__item {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none !important;
  }

  .logo-cloud[data-variant="marquee"] .logo-cloud__row {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   21. Tema geçişi
   Görünüm geçişi destekleyen tarayıcılarda yeni tema aşağıdan yukarı açılır.
   -------------------------------------------------------------------------- */
::view-transition-group(root) {
  animation-duration: 0.7s;
  animation-timing-function: var(--expo-out);
}

::view-transition-new(root) {
  animation-name: reveal-bottom-up;
}

::view-transition-old(root),
html.dark::view-transition-old(root) {
  animation: none;
  z-index: -1;
}

html.dark::view-transition-new(root) {
  animation-name: reveal-bottom-up;
}

@keyframes reveal-bottom-up {
  from { clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); }
  to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

/* Tema düğmesi -------------------------------------------------------------- */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, transform 0.3s;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle__halves,
.theme-toggle__ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s ease-in-out;
}

.theme-toggle__light { fill: var(--notch-light); }
.theme-toggle__dark { fill: var(--notch-bg); }

html.dark .theme-toggle__halves { transform: rotate(-180deg); }
html.dark .theme-toggle__ring { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__halves,
  .theme-toggle__ring {
    transition: none;
  }

  ::view-transition-group(root),
  ::view-transition-new(root),
  ::view-transition-old(root) {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   22. Teklif formu penceresi
   Tetikleyici düğmeden büyüyerek açılır; arkadaki sayfa bulanıklaşır.
   -------------------------------------------------------------------------- */
.contact__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  text-align: center;
}

.btn--lg {
  padding: 18px 32px;
  font-size: 13px;
  letter-spacing: 0.14em;
}

.contact__hint {
  font-size: 14px;
  color: var(--text-dim);
}

.contact__hint a {
  color: var(--accent-soft);
}

.contact__hint a:hover {
  color: var(--text);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 24px;
}

.modal[hidden] {
  display: none !important;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.35s ease;
  cursor: pointer;
}

.modal.is-open .modal__backdrop {
  opacity: 1;
}

.modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(86dvh, 780px);
  overflow: auto;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg-card);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  will-change: transform;
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  transition: opacity 0.25s ease 0.12s;
}

.modal.is-open .modal__body {
  opacity: 1;
}

.modal__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  align-items: center;
}

.modal__head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: 0.02em;
}

.modal__head p {
  font-size: 15px;
  color: var(--text-dim);
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.modal__close svg {
  width: 18px;
  height: 18px;
  fill: none;
}

.modal__close:hover {
  background: var(--veil);
  border-color: var(--line-strong);
  transform: rotate(90deg);
}

/* Pencere açıkken form ızgarası tek sütuna düşmesin diye kendi genişliği kullanılır. */
.modal .contact__grid,
.modal .contact__foot,
.modal .form-status {
  max-width: none;
  margin-inline: 0;
}

/* Pencerede alanlar iki sütuna oturur, dar ekranda tek sütuna iner. */
.modal .contact__grid {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 620px) {
  .modal .contact__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .modal {
    padding: 12px;
  }

  .modal__panel {
    max-height: 92dvh;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal__panel,
  .modal__backdrop,
  .modal__body {
    transition: none !important;
  }
}

/* Fotoğraf üstündeki düğmeler temadan bağımsız açık kalır. */
.scroll-expand .btn:not(.btn--ghost) {
  background: #f4f4f4;
  color: #141416;
}

.scroll-expand .btn:not(.btn--ghost):hover {
  background: var(--accent);
  color: #fff;
}

/* --------------------------------------------------------------------------
   23. Açılış sırası
   Yükleme ekranı kapanınca hero belirir, başlık yukarıdan iner ve WhatsApp
   düğmesi yerine oturur. Gizleme yalnızca yükleme sırasında uygulanır; böylece
   betik çalışmazsa arayüz görünür kalır.
   -------------------------------------------------------------------------- */
.staggered-menu-header,
.sm-glass {
  transition:
    opacity 0.55s ease 0.25s,
    transform 0.75s var(--expo-out) 0.25s;
}

.scroll-expand__stage {
  transition: opacity 0.9s ease 0.05s;
}

.scroll-expand__frame {
  transition: transform 1.1s var(--expo-out) 0.05s;
}

body.is-loading .staggered-menu-header,
body.is-loading .sm-glass {
  opacity: 0;
  transform: translateY(-100%);
  transition: none;
}

body.is-loading .whatsapp {
  opacity: 0;
  transform: scale(0.4) translateY(14px);
  transition: none;
}

body.is-loading .scroll-expand__stage {
  opacity: 0;
  transition: none;
}

body.is-loading .scroll-expand__frame {
  transform: scale(0.94);
  transition: none;
}

body.is-loading .scroll-expand__title,
body.is-loading .scroll-expand__hint {
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .staggered-menu-header,
  .sm-glass,
  .scroll-expand__stage,
  .scroll-expand__frame {
    transition: none !important;
  }
}

@media (max-width: 700px) {
  /* Dar ekranda dinlenme karesi görünüm genişliğinin yüzde 78'i kadardır;
     alt satır bu alanın içinde kalacak biçimde daraltılır. */
  .hero-mark__tag {
    letter-spacing: 0.14em;
  }
}

/* Dönüşüm sürerken hero'daki marka adı gizli kalır; yerine yükleme
   ekranındaki söz işareti kayar. Devir teslim tek karede olur: ikisi aynı
   yerde ve aynı ölçüde olduğu için geçiş fark edilmez. Araya solma konursa
   yazı bir kaybolup geri geliyormuş gibi görünüyor. */
body.is-morphing .hero-mark__name {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader__word,
  .hero-mark__name {
    transition: none !important;
  }
}

/* Marka yerine oturunca gölge yavaşça derinleşir. */
body.is-mark-lit .hero-mark__name {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

body.is-mark-lit .hero-mark__tag {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark__name {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
    transition: none;
  }

  .hero-mark__tag {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   24. Mobilde aşırı kaydırma
   Dar ekranda sayfanın uçlarında lastik etkisi ve zincirleme kaydırma kapalı.
   Masaüstü görünümü değişmez.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  html,
  body {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
  }
}

/* --------------------------------------------------------------------------
   25. Dokunmatikte tutma alanları
   Bağlantı ve düğmelerin görünen ölçüsü tasarımın parçası; parmakla
   vurulabilir alan ise çoğu yerde 17-27 piksel kalıyordu. Aşağıdaki
   görünmez katmanlar yalnızca tutma alanını büyütür, hiçbir şeyi
   kaydırmaz veya boyutlandırmaz. Komşu hedeflerin vuruşunu çalmamak
   için genişlemeler aradaki boşlukla sınırlı tutulmuştur.
   Yalnızca fare bulunmayan cihazlarda geçerlidir.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .theme-toggle,
  .link-mono,
  .sector__link,
  .sm-socials-link {
    position: relative;
  }

  .theme-toggle::after,
  .sm-toggle::after,
  .footer__link::after,
  .link-mono::after,
  .sector__link::after,
  .sm-socials-link::after {
    content: "";
    position: absolute;
    z-index: 1;
  }

  /* 34x34 -> 44x44. Yanlardaki 10 piksellik boşluğun yarısı kullanılır,
     böylece komşu düğmelerle çakışmaz. */
  .theme-toggle::after {
    inset: -5px;
  }

  /* 22x26 -> 37x44. Sağda ekran kenarına kadar yer var, solda yalnızca
     tema düğmesiyle arasındaki boşluğun yarısı alınır. */
  .sm-toggle::after {
    inset: -9px -10px -9px -5px;
  }

  /* Alt alta dizili bağlantılar arasında 8 piksel var; katmanlar bu
     boşluğu paylaşır, üst üste binmez. 22 -> 30 piksel. */
  .footer__link::after {
    inset: -4px 0;
  }

  /* Kart içindeki tek bağlantılar; altlarında serbest alan olduğu için
     rahatça büyüyebilir. 17 -> 37 piksel. */
  .link-mono::after,
  .sector__link::after {
    inset: -10px 0;
  }

  /* Menü panelindeki sosyal bağlantılar yan yana; yalnızca dikey büyür.
     27 -> 43 piksel. */
  .sm-socials-link::after {
    inset: -8px 0;
  }
}

/* --------------------------------------------------------------------------
   26. Hukuki metin sayfası (kvkk.html)
   Ana sayfanın değişkenlerini kullanır, iki temada da çalışır. Uzun metin
   okunacağı için satır uzunluğu sınırlanır ve başlıklar kaydırıldığında
   sabit üst barın altında kalmasın diye kaydırma payı bırakılır.
   -------------------------------------------------------------------------- */
.legal-body {
  background: var(--bg);
  color: var(--text);
}

.legal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--gutter);
  background: var(--bg-footer);
  border-bottom: 1px solid var(--line);
}

.legal-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.06em;
  color: var(--text-strong);
}

.legal-header__brand img {
  width: 42px;
  height: auto;
}

/* Logo açık temada beyaz zeminde kaybolmasın. */
:root:not(.dark) .legal-header__brand img {
  filter: invert(1);
}

.legal-header__back {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.legal-header__back:hover {
  color: var(--text-strong);
}

.legal {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(40px, 7vw, 80px) var(--gutter) 80px;
}

.legal__head h1 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 5vw, 44px);
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--text-strong);
}

.legal__lede {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
}

.legal__date {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* İçindekiler */
.legal__toc {
  margin: 40px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--veil);
}

.legal__toc-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.legal__toc ol {
  margin: 14px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 15px;
  color: var(--text-muted);
}

.legal__toc a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.legal__toc a:hover {
  color: var(--text-strong);
  border-bottom-color: var(--line-strong);
}

/* Bölümler */
.legal__section {
  margin: 48px 0 0;
  scroll-margin-top: 90px;
}

.legal__section h2 {
  margin: 0 0 16px;
  font-size: clamp(18px, 2.4vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-strong);
}

.legal__section h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
}

.legal__section p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

.legal__section a {
  color: var(--accent-soft);
  border-bottom: 1px solid currentColor;
}

.legal__list {
  margin: 0 0 14px;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.legal__list strong {
  color: var(--text-strong);
}

/* Veri sorumlusu künyesi */
.legal__facts {
  margin: 0 0 16px;
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line);
}

.legal__facts > div {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 16px;
  padding: 13px 16px;
  background: var(--bg-card);
}

.legal__facts dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.legal__facts dd {
  margin: 0;
  font-size: 15px;
  color: var(--text-strong);
}

/* Tablolar dar ekranda kendi içinde kayar, sayfa yatay taşmaz. */
.legal__table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.6;
  display: block;
  overflow-x: auto;
}

.legal__table th,
.legal__table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--line);
  min-width: 150px;
}

.legal__table th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--veil);
  font-weight: 400;
}

.legal__table td {
  color: var(--text-muted);
}

.legal__section code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--veil-strong);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-strong);
}

.legal__note {
  padding: 14px 16px;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--veil);
  font-size: 14.5px !important;
}

/* Firmanın doldurması gereken alanlar gözden kaçmasın. */
[data-doldurulacak] {
  color: var(--accent-soft) !important;
  font-style: italic;
}

.legal__ack {
  margin: 56px 0 0;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--veil);
  text-align: center;
}

.legal__ack > p:first-child {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
}

.legal__ack .btn {
  margin-top: 18px;
}

.legal__ack .legal__note {
  text-align: left;
}

@media (max-width: 620px) {
  .legal__facts > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  /* Dar ekranda "VIVEX OTOMASYON" iki satıra kırılıyordu; ad kısaldığı için
     yazı artık gizlenmiyor, yalnızca geri bağlantısı tek satıra sabitleniyor. */
  .legal-header {
    padding: 14px var(--gutter);
  }

  .legal-header__brand span,
  .legal-header__back {
    white-space: nowrap;
  }

  .legal-header__back {
    font-size: 11px;
  }
}