/* ============================================================
   ParsDX Bilgi Teknolojileri A.Ş. — Tasarım Sistemi
   Fontlar header.php içinde <link> ile yüklenir (Google Fonts).
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  /* Mürekkep (koyu yüzeyler) */
  --ink-950:   #06081F;
  --ink-900:   #0B0D2E;
  --ink-850:   #101340;
  --ink-800:   #171B52;
  --ink-700:   #232961;

  /* Marka */
  --brand-600: #2B49F5;
  --brand-500: #3B5BFF;
  --brand-400: #6B84FF;
  --brand-300: #9DAEFF;
  --violet-500:#7B3FFF;
  --violet-400:#9B6BFF;

  /* Nötr rampa */
  --n-0:       #FFFFFF;
  --n-50:      #F7F8FC;
  --n-100:     #EFF2F9;
  --n-200:     #E1E6F1;
  --n-300:     #C9D1E3;
  --n-400:     #9AA4BF;
  --n-500:     #656E8A;
  --n-700:     #3B4257;
  --n-900:     #141A2E;

  /* Anlamsal */
  --surface:        var(--n-0);
  --surface-alt:    var(--n-50);
  --surface-sunken: var(--n-100);
  --text-strong:    var(--ink-900);
  --text:           #2A3047;
  --text-muted:     var(--n-500);
  --border:         var(--n-200);
  --border-strong:  var(--n-300);

  /* Koyu zeminde metin — gri değil, zeminin tonundan türetilmiş */
  --on-dark:        #FFFFFF;
  --on-dark-soft:   #C6CDEC;
  --on-dark-muted:  #9AA3CE;
  --on-dark-faint:  #838CB8;
  --on-dark-line:   rgba(157,174,255,.16);

  /* Marka gradyanı — yalnızca yüzey/dolgu için, metin için değil */
  --gradient:   linear-gradient(135deg, #3B5BFF 0%, #7B3FFF 100%);
  --gradient-h: linear-gradient(135deg, #5B76FF 0%, #9B5FFF 100%);

  /* Yükseklik — her gölge offset + yumuşak blur taşır */
  --shadow-sm: 0 1px 2px rgba(11,13,46,.06), 0 2px 8px rgba(11,13,46,.05);
  --shadow-md: 0 4px 12px rgba(11,13,46,.07), 0 12px 32px rgba(11,13,46,.08);
  --shadow-lg: 0 8px 24px rgba(11,13,46,.09), 0 28px 64px rgba(11,13,46,.12);
  --shadow-brand: 0 6px 16px rgba(43,73,245,.22), 0 16px 40px rgba(43,73,245,.18);

  /* Yarıçap */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --radius:    var(--r-md);
  --radius-lg: var(--r-lg);

  /* Hareket — üstel ease-out */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-quart:  cubic-bezier(.25, 1, .5, 1);
  --ease-inout:  cubic-bezier(.65, 0, .35, 1);
  --dur-fast:    .18s;
  --dur:         .32s;
  --dur-slow:    .62s;
  --transition:  color var(--dur) var(--ease-quart),
                 background-color var(--dur) var(--ease-quart),
                 border-color var(--dur) var(--ease-quart),
                 box-shadow var(--dur) var(--ease-quart),
                 transform var(--dur) var(--ease-quart),
                 opacity var(--dur) var(--ease-quart);

  /* Geriye dönük takma adlar — sayfa şablonlarında hâlâ kullanılan eski
     değişken isimleri. Tanımsız kalırlarsa arka planlar şeffaf render olur. */
  --navy:       var(--ink-900);
  --navy-light: var(--ink-800);
  --blue:       var(--brand-500);
  --blue-light: var(--brand-400);
  --purple:     var(--violet-500);
  --bg-light:   var(--surface-alt);
  --bg-white:   var(--surface);

  /* Tipografi */
  --font-display: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --nav-h: 74px;
}

/* ── Reset & taban ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--n-300) transparent;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Yatay taşma bileşen düzeyinde kontrol edilir (.hero, .partner-landing vb.).
   body üzerine overflow-x konmaz: spec gereği overflow-y'yi auto'ya çevirir ve
   body'yi ikinci bir kaydırma konteynerine dönüştürür. */

img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; display: block; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

a {
  color: var(--brand-600);
  text-decoration: none;
  transition: color var(--dur) var(--ease-quart);
}
a:hover { color: var(--violet-500); }

/* Tarayıcı yüzeyleri — çizmediğimiz parçalar da tasarımı taşır */
::selection { background: rgba(59,91,255,.22); color: var(--ink-900); }
:where(.hero, .footer, .partners, .cta-banner, .page-hero) ::selection {
  background: rgba(157,174,255,.32); color: #fff;
}
html { caret-color: var(--brand-500); }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 4px;
}
:where(.hero, .footer, .partners, .cta-banner, .navbar) :focus-visible {
  outline-color: var(--brand-300);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--n-300);
  border: 3px solid var(--surface);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--n-400); }

/* Sabit navbar için çapa hedefleri */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ── Tipografi ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: balance;
}
h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.02em; line-height: 1.28; }

p { text-wrap: pretty; }

.u-measure { max-width: 68ch; }

/* Tablo/veri rakamları hizalı aksın */
.u-tnum, .stat__num, .pillar__index, .footer__bottom { font-variant-numeric: tabular-nums; }

/* ── Yerleşim ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.section { padding: clamp(72px, 9vw, 128px) 0; }
.section--alt { background: var(--surface-alt); }
.section--tight { padding: clamp(56px, 6vw, 88px) 0; }

.section__header {
  max-width: 60ch;
  margin-bottom: clamp(44px, 5vw, 72px);
}
.section__header--center { margin-left: auto; margin-right: auto; text-align: center; }

.section__title {
  font-size: clamp(1.85rem, 1.35rem + 2.1vw, 2.95rem);
  margin-bottom: 18px;
}
.section__subtitle {
  font-size: 1.0625rem;
  color: var(--text-muted);
  max-width: 62ch;
  line-height: 1.72;
}
.section__header--center .section__subtitle { margin-inline: auto; }

/* İç sayfalarda hâlâ kullanılıyor — sessiz tutuldu */
.section__label {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--brand-600);
  margin-bottom: 12px;
}

/* ── Butonlar ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  will-change: transform;
}
.btn svg { flex-shrink: 0; }
.btn:active { transform: translateY(1px) scale(.995); }

.btn--primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover {
  background: var(--brand-500);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(43,73,245,.26), 0 22px 52px rgba(43,73,245,.22);
}

.btn--outline {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.btn--outline:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
  background: rgba(59,91,255,.04);
  transform: translateY(-2px);
}

.btn--white {
  background: #fff;
  color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}
.btn--white:hover {
  color: var(--brand-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--ghost-light,
.btn--onDark {
  color: #fff;
  border-color: rgba(198,205,236,.32);
  background: rgba(198,205,236,.07);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover,
.btn--onDark:hover {
  color: #fff;
  border-color: rgba(198,205,236,.6);
  background: rgba(198,205,236,.14);
  transform: translateY(-2px);
}

/* ── Navigasyon ──────────────────────────────────────────── */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  transition: background-color var(--dur) var(--ease-quart),
              box-shadow var(--dur) var(--ease-quart),
              border-color var(--dur) var(--ease-quart);
  border-bottom: 1px solid transparent;
}
.navbar--transparent { background: transparent; }
.navbar--scrolled {
  background: rgba(9,11,38,.82);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--on-dark-line);
  box-shadow: 0 4px 14px rgba(0,0,0,.16), 0 18px 46px rgba(0,0,0,.22);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
  min-width: 0;
}

.navbar__logo { display: flex; align-items: center; flex-shrink: 0; }
.navbar__logo img {
  height: 42px;
  width: auto;
  transition: opacity var(--dur) var(--ease-quart);
}
.navbar__logo:hover img { opacity: .82; }

.navbar__menu { display: flex; align-items: center; gap: 4px; }

.navbar__link {
  position: relative;
  color: var(--on-dark-soft);
  font-size: .92rem;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  transition: var(--transition);
}
.navbar__link::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 1.5px;
  background: var(--brand-400);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.navbar__link:hover { color: #fff; }
.navbar__link:hover::after { transform: scaleX(1); }
.navbar__link.active { color: #fff; }
.navbar__link.active::after { transform: scaleX(1); background: var(--brand-500); }

.navbar__portal {
  margin-left: 6px;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(198,205,236,.28);
  color: var(--on-dark-soft);
  padding: 8px 16px !important;
}
.navbar__portal::after { display: none; }
.navbar__portal:hover {
  border-color: rgba(198,205,236,.55);
  background: rgba(198,205,236,.1);
  color: #fff;
}

.navbar__cta {
  margin-left: 6px;
  background: var(--brand-600);
  color: #fff !important;
  border-radius: var(--r-sm);
  padding: 10px 20px !important;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(43,73,245,.34);
}
.navbar__cta::after { display: none; }
.navbar__cta:hover {
  background: var(--brand-500);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(43,73,245,.42);
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.navbar__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 56px) 0 56px;
  background: var(--ink-900);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.hero__bg svg { width: 100%; height: 100%; }

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .2;
}
.hero__glow--1 {
  width: min(640px, 70vw); aspect-ratio: 1;
  background: var(--brand-500);
  top: -18%; right: -8%;
}
.hero__glow--2 {
  width: min(440px, 55vw); aspect-ratio: 1;
  background: var(--violet-500);
  bottom: -14%; left: 4%;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(36px, 4vw, 64px);
  align-items: center;
}

/* Ölçek gerçek Türkçe metne göre ayarlandı: en uzun satır
   ("Dijital Dönüşümünüzü") her kırılma noktasında kolona sığar. */
.hero__title {
  font-size: clamp(2.05rem, 1.25rem + 3.1vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.038em;
  line-height: 1.06;
  color: #fff;
  margin-bottom: 26px;
}
/* Vurgu ağırlıkla değil renkle değil — ölçüyle: alt satır tam ağırlıkta kalır */
.hero__title .highlight { color: #fff; }
/* Satirlar ayri ayri maskeleniyor: tek blok halinde acilan bir baslik
   "belirdi" diyor, satir satir acilan "yazildi" diyor. Fark kucuk ama
   sayfanin ilk yarim saniyesinde en cok bakilan yer burasi. */
.hero__line { display: block; }

.hero__text {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  color: var(--on-dark-soft);
  line-height: 1.75;
  max-width: 56ch;
  margin-bottom: 36px;
}

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__visual { display: flex; justify-content: center; align-items: center; }
.hero__visual svg {
  width: 100%;
  max-width: 470px;
  height: auto;
  filter: drop-shadow(0 24px 60px rgba(43,73,245,.3));
}

/* Kanıt şeridi — büyük rakam şablonu değil, sessiz künye */
.hero__proof {
  position: relative;
  z-index: 2;
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 28px;
  border-top: 1px solid var(--on-dark-line);
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}
.proof {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.proof__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.proof__label {
  font-size: .875rem;
  color: var(--on-dark-muted);
  line-height: 1.4;
}
.hero__proof-note {
  margin-left: auto;
  font-size: .82rem;
  color: var(--on-dark-faint);
  max-width: 30ch;
}

/* Legacy hero stat sınıfları (diğer sayfalar için korunur) */
.hero__stats { position: relative; z-index: 2; margin-top: 48px; }
.hero__stats-inner { display: flex; gap: clamp(24px,4vw,52px); flex-wrap: wrap; }
.hero__stat { min-width: 0; }
.hero__stat-num {
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 800; color: #fff;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.hero__stat-label { font-size: .84rem; color: var(--on-dark-muted); }

/* Eski rozet — artık kullanılmıyor, iç sayfalar için nötralize edildi */
.hero__badge { display: none; }

/* ── Uzmanlık alanları (3 ana pratik) ────────────────────── */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 3vw, 44px);
  background: var(--surface);
  transition: background-color var(--dur) var(--ease-quart);
}
.pillar:hover { background: var(--surface-alt); }

/*
 * KART ZEMİNİNDEKİ FOTOĞRAF.
 *
 * Kalıp çözümler sayfasındaki bento kartlarından (`.service-card--photo`)
 * alındı; aynı işi iki farklı şekilde yapmanın anlamı yok.
 *
 * `isolation: isolate` + `z-index: -1`: fotoğraf kartın KENDİ yığma
 * bağlamının dibine iniyor, sayfanın değil. Olmasaydı kartın arkasına
 * değil bölümün arkasına düşerdi.
 *
 * Opaklık ve beyaz perde EKRANDA ayarlandı. İlk değerlerde (.16 opaklık,
 * %62'den başlayan perde) fotoğraflar hiç görünmüyordu - kart eskisiyle
 * aynıydı. Perde artık kartın ÜST bandında zayıf, metnin başladığı yerde
 * güçlü: fotoğraf görünüyor, hiçbir satır fotoğrafın koyu bölgesine denk
 * gelmiyor.
 */
.pillar--photo { isolation: isolate; overflow: hidden; }
.pillar__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.pillar__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  filter: saturate(.7);
  transition: opacity var(--dur-slow) var(--ease-quart), transform var(--dur-slow) var(--ease-out);
}
.pillar--photo:hover .pillar__photo img { opacity: .36; transform: scale(1.04); }
.pillar__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.76) 46%, rgba(255,255,255,.9) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .pillar--photo:hover .pillar__photo img { transform: none; }
}
.pillar::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.pillar:hover::before { transform: scaleX(1); }

.pillar__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: 22px;
  border-radius: var(--r-md);
  background: rgba(59,91,255,.09);
  color: var(--brand-600);
  transition: var(--transition);
}
.pillar:hover .pillar__icon {
  background: var(--brand-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}
.pillar__icon svg { width: 23px; height: 23px; }

.pillar__title {
  font-size: 1.22rem;
  margin-bottom: 12px;
}
.pillar__text {
  font-size: .96rem;
  color: var(--text-muted);
  line-height: 1.72;
  margin-bottom: 22px;
}
.pillar__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 26px;
}
.pillar__list li {
  position: relative;
  padding-left: 20px;
  font-size: .9rem;
  color: var(--text);
  line-height: 1.6;
}
.pillar__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-500);
}
.pillar__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--brand-600);
}
.pillar__link svg { transition: transform var(--dur) var(--ease-out); }
.pillar__link:hover svg { transform: translateX(4px); }

/* ── Yetkinlik dizini (tam liste) ────────────────────────── */
.capabilities {
  border-top: 1px solid var(--border);
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: clamp(36px, 4vw, 52px);
}
.capabilities__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.capabilities__title { font-size: 1.35rem; }
.capabilities__note { font-size: .92rem; color: var(--text-muted); }

.capability-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 2px;
}
.capability {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  color: var(--text);
  transition: var(--transition);
}
.capability:hover {
  background: var(--surface-alt);
  color: var(--text-strong);
  transform: translateX(3px);
}
.capability__icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: rgba(59,91,255,.08);
  color: var(--brand-600);
  transition: var(--transition);
}
.capability:hover .capability__icon { background: var(--brand-600); color: #fff; }
.capability__icon svg { width: 17px; height: 17px; }
.capability__name { font-size: .95rem; font-weight: 500; line-height: 1.4; }
.capability__arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--n-400);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.capability:hover .capability__arrow { opacity: 1; transform: translateX(0); color: var(--brand-500); }

/* ── Servis kartları (iç sayfalarda korunur) ─────────────── */
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 24px;
}
.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  overflow: hidden;
  transition: var(--transition);
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.service-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(59,91,255,.08);
  margin-bottom: 22px;
  transition: var(--transition);
}
.service-card:hover .service-card__icon { background: var(--brand-600); }
.service-card:hover .service-card__icon svg * { stroke: #fff; }
.service-card__icon svg { width: 28px; height: 28px; }
.service-card__title { font-size: 1.14rem; margin-bottom: 11px; }
.service-card__text { font-size: .93rem; color: var(--text-muted); line-height: 1.72; margin-bottom: 18px; }
.service-card__list { display: flex; flex-direction: column; gap: 8px; }
.service-card__list-item {
  position: relative;
  padding-left: 18px;
  font-size: .89rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.service-card__list-item::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
}
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand-600);
}
.service-card__link svg { transition: transform var(--dur) var(--ease-out); }
.service-card__link:hover svg { transform: translateX(4px); }
.service-card__badge {
  position: absolute;
  top: 18px; right: 18px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--brand-600);
  background: rgba(59,91,255,.1);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ── Hakkımızda ──────────────────────────────────────────── */
.about__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(44px, 6vw, 88px);
  align-items: center;
}
.about__visual svg { width: 100%; max-width: 480px; margin: 0 auto; height: auto; }
.about__title { font-size: clamp(1.8rem, 1.35rem + 1.9vw, 2.7rem); margin-bottom: 20px; }
.about__text {
  font-size: 1.02rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
  max-width: 62ch;
}
.about__features { display: flex; flex-direction: column; gap: 4px; margin: 34px 0; }
.about__feature {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px;
  margin-left: -16px;
  border-radius: var(--r-md);
  transition: background-color var(--dur) var(--ease-quart);
}
.about__feature:hover { background: rgba(59,91,255,.045); }
.about__feature-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 4px 12px rgba(43,73,245,.24);
}
.about__feature-icon svg { width: 21px; height: 21px; }
.about__feature-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }
.about__feature-text { font-size: .91rem; color: var(--text-muted); line-height: 1.65; }

/* ── İş ortakları ────────────────────────────────────────── */
.partners {
  padding: clamp(52px, 6vw, 76px) 0;
  background: var(--ink-950);
  /* Ust kenarlik yerine "ufuk" var (bkz. SINEMATIK KATMAN): duz gri
     cizgi iki bolumu ayiriyordu, isik cizgisi baglıyor. */
  border-bottom: 1px solid var(--on-dark-line);
}
.partners__title {
  text-align: center;
  font-size: .84rem;
  font-weight: 500;
  color: var(--on-dark-muted);
  margin-bottom: 34px;
}
.partners__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Plakalar kendi ic boslugunu tasidigi icin aradaki bosluk kucultuldu;
     eski 64px'lik acikliık kutulu duzende duvari dagitiyordu. */
  gap: clamp(12px, 1.6vw, 20px);
  flex-wrap: wrap;
}
.partner-logo {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--on-dark-muted);
  transition: color var(--dur) var(--ease-quart), transform var(--dur) var(--ease-out);
}
.partner-logo:hover { color: #fff; transform: translateY(-2px); }

/* ── Yaklaşım / neden biz ────────────────────────────────── */
.whyus__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.whyus-card {
  padding: 34px 30px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.whyus-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.whyus-card__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--brand-600);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.whyus-card__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text-strong); margin-bottom: 10px; }
.whyus-card__text { font-size: .92rem; color: var(--text-muted); line-height: 1.7; }

/* Yaklaşım adımları — numaralar bilgi taşıdığı için var */
.approach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.approach__step { position: relative; padding-top: 26px; border-top: 2px solid var(--border); }
.approach__step:hover { border-top-color: var(--brand-500); }
.approach__step { transition: border-color var(--dur) var(--ease-quart); }
.approach__index {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand-600);
  letter-spacing: .02em;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.approach__title { font-size: 1.08rem; margin-bottom: 10px; }
.approach__text { font-size: .93rem; color: var(--text-muted); line-height: 1.7; }

/* ── CTA şeridi ──────────────────────────────────────────── */
.cta-banner {
  position: relative;
  padding: clamp(64px, 7vw, 104px) 0;
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 15% 0%, rgba(59,91,255,.34), transparent 62%),
    radial-gradient(ellipse 60% 80% at 88% 100%, rgba(123,63,255,.3), transparent 60%);
  z-index: -1;
}
.cta-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.cta-banner__title {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  color: #fff;
  margin-bottom: 14px;
}
.cta-banner__text {
  font-size: 1.04rem;
  color: var(--on-dark-soft);
  line-height: 1.72;
  max-width: 52ch;
}
.cta-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── İletişim ────────────────────────────────────────────── */
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(40px, 5vw, 72px);
}
.contact__info-title { font-size: 1.5rem; margin-bottom: 24px; }
.contact__locations { display: flex; flex-direction: column; gap: 16px; }
.contact__location {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: var(--transition);
}
.contact__location:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.contact__location-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: rgba(59,91,255,.08);
  color: var(--brand-600);
}
.contact__location-icon svg { width: 21px; height: 21px; }
.contact__location-city {
  font-size: .8rem; font-weight: 600; color: var(--brand-600);
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px;
}
.contact__location-addr { font-size: .92rem; color: var(--text-muted); line-height: 1.6; overflow-wrap: anywhere; }
.contact__direct { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.contact__direct-item { display: flex; align-items: center; gap: 12px; font-size: .96rem; }
.contact__direct-item svg { width: 19px; height: 19px; color: var(--brand-600); flex-shrink: 0; }

/* Formlar */
.contact__form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--shadow-sm);
}
.form__title { font-size: 1.3rem; margin-bottom: 26px; }
.form__group { margin-bottom: 18px; }
.form__label { display: block; font-size: .88rem; font-weight: 600; color: var(--text-strong); margin-bottom: 7px; }
.form__input, .form__select, .form__textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: .96rem;
  color: var(--text);
  background: var(--surface);
  transition: var(--transition);
  outline: none;
}
.form__input::placeholder, .form__textarea::placeholder { color: var(--n-400); }
.form__input:focus, .form__select:focus, .form__textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59,91,255,.14);
}
.form__input:disabled, .form__textarea:disabled, .form__select:disabled {
  background: var(--surface-sunken); color: var(--n-400); cursor: not-allowed;
}
.form__textarea { resize: vertical; min-height: 124px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__submit { width: 100%; padding: 15px; font-size: 1rem; }
.form__submit:disabled { opacity: .62; cursor: wait; transform: none; }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--ink-950);
  color: var(--on-dark-muted);
  padding: clamp(56px, 6vw, 84px) 0 0;
}
.footer__inner {
  display: grid;
  /* Beş sütun: marka · Hizmetler · Kurumsal+Yasal · İş Ortaklıkları · İletişim.
     Marka payı 2fr'den 1.6fr'ye indi; beşinci sütun eklenince eski oranla
     bağlantı sütunları sıkışıp başlıklar iki satıra kırılıyordu. */
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.15fr;
  gap: clamp(22px, 2.6vw, 44px);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--on-dark-line);
}
.footer__logo { margin-bottom: 16px; }
.footer__logo img { height: 36px; width: auto; }
.footer__desc { font-size: .91rem; line-height: 1.75; max-width: 38ch; color: var(--on-dark-muted); }
.footer__col-title {
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__link {
  font-size: .91rem;
  color: var(--on-dark-muted);
  transition: color var(--dur) var(--ease-quart), transform var(--dur) var(--ease-out);
  display: inline-block;
}
.footer__link:hover { color: #fff; transform: translateX(3px); }
.footer__office { font-size: .86rem; line-height: 1.65; color: var(--on-dark-faint); overflow-wrap: anywhere; }
.footer__office + .footer__office { margin-top: 12px; }
.footer__office strong { display: block; color: var(--on-dark-soft); font-weight: 600; margin-bottom: 2px; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0;
  font-size: .84rem;
  color: var(--on-dark-faint);
}
.footer__bottom a { color: var(--on-dark-muted); }
.footer__bottom a:hover { color: #fff; }

/* ── İç sayfa başlığı ────────────────────────────────────── */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + 64px) 0 clamp(56px, 6vw, 84px);
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 78% 0%, rgba(59,91,255,.26), transparent 62%);
  z-index: -1;
}
.page-hero__inner { position: relative; }
.page-hero__breadcrumb {
  display: flex; align-items: center; gap: 9px;
  font-size: .86rem; color: var(--on-dark-faint); margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-hero__breadcrumb a { color: var(--on-dark-muted); }
.page-hero__breadcrumb a:hover { color: #fff; }
.page-hero__title {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.3rem);
  color: #fff;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}
.page-hero__subtitle {
  font-size: 1.05rem;
  color: var(--on-dark-soft);
  max-width: 62ch;
  line-height: 1.72;
}

/* ── Değer kartları / iç sayfa yerleşimleri ──────────────── */
.values__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.value-card {
  padding: 30px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.value-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.value-card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-600);
  color: #fff;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(43,73,245,.22);
}
.value-card__icon svg { width: 22px; height: 22px; }
.value-card__title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: var(--text-strong); margin-bottom: 9px; }
.value-card__text { font-size: .92rem; color: var(--text-muted); line-height: 1.7; }

.solution-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,4vw,60px); align-items: center; }
/* Bölüm içinden ayrıntılı hizmet sayfasına geçiş satırı. */
.solution__more { margin: 20px 0 24px; color: var(--text-muted); line-height: 1.7; }
.solution__more a { color: var(--brand, #3B5BFF); text-decoration: underline; text-underline-offset: 3px; }
.solution-detail--reverse { direction: rtl; }
.solution-detail--reverse > * { direction: ltr; }
.company-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,5vw,72px); align-items: center; }

/* ── Uyarı kutuları ──────────────────────────────────────── */
.alert {
  display: none;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-size: .92rem;
  margin-bottom: 18px;
  border: 1px solid;
}
.alert--success { background: #ECFDF3; color: #05603A; border-color: #A6F4C5; }
.alert--error   { background: #FEF3F2; color: #912018; border-color: #FECDCA; }

/* ── Yukarı çık ──────────────────────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--brand-600);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.9);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
              visibility var(--dur), background-color var(--dur) var(--ease-quart);
  z-index: 999;
}
.scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.scroll-top:hover { background: var(--brand-500); transform: translateY(-3px) scale(1.04); }

/*
 * CANLI DESTEK BALONUNUN ÜSTÜNE ÇIK.
 *
 * Chatwoot balonu da sağ alt köşede duruyor (64px, `bottom/right: 20px`)
 * ve `z-index: 2147483000` ile geliyor. "Yukarı çık" düğmesi 999'da,
 * yani ikisi TAM ÜST ÜSTE biniyordu ve düğmeye hiç dokunulamıyordu -
 * ölçüldü, hem masaüstünde hem telefonda.
 *
 * Z sırasıyla yarışmak anlamsız (balonun değeri int sınırında); doğru
 * çözüm yer değiştirmek. Balonun üst kenarı tabandan 84px; düğme onun
 * üstüne alınıyor ve merkezleri aynı dikey eksene getiriliyor.
 *
 * `:has()` ile koşullu: canlı destek betiği yalnızca çerez onayı
 * verildiğinde yükleniyor, balon yoksa düğme kendi yerinde kalsın.
 * Destekleyemeyen tarayıcıda kural düşer - bugünkü davranış, gerileme
 * değil.
 */
body:has(.woot-widget-bubble) .scroll-top { bottom: 96px; right: 30px; }

/* ============================================================
   HAREKET SİSTEMİ
   Varsayılan görünür; JS varsa gizlenip sahneye girer.
   ============================================================ */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    clip-path .9s var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
  /*
   * `will-change` BILEREK YOK. Sayfada 33 reveal ogesi var ve hepsine
   * kalici `will-change` vermek 33 kalici compositor katmani demekti -
   * bellekte durur, mobilde pahaliya mal olur ve gecis bitince de
   * birakilmaz. Tarayici katmani gecis baslarken zaten kendi olusturuyor.
   *
   * Gecikme 70ms -> 55ms: 33 oge ayni ritimde girince liste "yukleniyor"
   * gibi okunuyordu. Hareketi azaltip birkac ani one cikarmak, hepsini
   * esit sekilde canlandirmaktan daha yonetilmis duruyor.
   */
}
.js [data-reveal="up"]     { transform: translateY(24px); }
.js [data-reveal="left"]   { transform: translateX(-28px); }
.js [data-reveal="right"]  { transform: translateX(28px); }
.js [data-reveal="scale"]  { transform: scale(.96); }
.js [data-reveal="blur"]   { filter: blur(10px); transform: translateY(14px); }
.js [data-reveal="mask"]   {
  opacity: 1;
  clip-path: inset(0 0 105% 0);
  transform: translateY(6px);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 -20% 0);
}

/* Hero'nun kendi anı — sahne bir kez kurulur */
.hero__bg svg [data-draw] {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
}
.js .hero.is-ready .hero__bg svg [data-draw] {
  animation: draw 2.4s var(--ease-out) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.js .hero__visual { opacity: 0; transform: scale(.94) translateY(10px); transition: opacity 1s var(--ease-out) .18s, transform 1.1s var(--ease-out) .18s; }
.js .hero.is-ready .hero__visual { opacity: 1; transform: none; }

.hero__orbit { transform-origin: 240px 240px; }
.js .hero.is-ready .hero__orbit { animation: orbit 46s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }

.hero__pulse { transform-origin: center; }
.js .hero.is-ready .hero__pulse { animation: pulseDot 3.4s var(--ease-inout) infinite; }
@keyframes pulseDot {
  0%, 100% { opacity: .35; r: 4; }
  50%      { opacity: .95; r: 6; }
}

/* ============================================================
   SİNEMATİK KATMAN
   ------------------------------------------------------------
   Buradaki her şey KÜTÜPHANESİZ ve büyük ölçüde JS'siz. Gerekçe
   basit: güvenlik satan bir sitede hız da bir güven sinyali.
   200 KB'lik bir animasyon kütüphanesi bu sayfada kendini ödemez.

   İki kural:
     1. Yalnızca `transform`, `opacity`, `filter` canlandırılır —
        bunlar compositor'da çalışır, layout tetiklemez.
     2. Yeni katman MEVCUT reveal sistemine dokunmaz. `is-in`
        mantığı çalışıyor; onun üstüne yazmak yerine yanına
        eklenir. Bozulacak bir şey varsa yenisi bozulsun.
   ============================================================ */

/* ── Scroll ilerleme çizgisi ───────────────────────────────
   Sayfanın neresinde olduğunu söyleyen ince bir şerit. Uzun
   çözüm sayfalarında yön duygusu veriyor, ayrıca sitenin
   "ölçen, izleyen" karakterine görsel bir karşılık.

   JS YOK: `animation-timeline: scroll()` scroll konumunu doğrudan
   animasyona bağlıyor. Bir scroll dinleyicisi + rAF ile aynı şeyi
   yapmak her karede JS çalıştırmak demekti. */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 1200;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand-500), var(--violet-500));
  pointer-events: none;
  /* Destek yoksa hiç görünmesin: 0 genişlikte donmuş bir çubuk
     bozuk görünürdü. */
  opacity: 0;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      opacity: 1;
      animation: scrollProgress linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes scrollProgress { to { transform: scaleX(1); } }

/* ── Scroll'a BAĞLI hareket ────────────────────────────────
   Mevcut sistem "görünürse bir kez tetikle" biçiminde. Buradaki
   fark: hareket scroll konumuna BAĞLI, yani kullanıcı yukarı
   çıkınca geri sarılıyor. Pahalı hissin asıl kaynağı bu.

   Tamamen ilerici geliştirme: `@supports` desteklemeyen tarayıcı
   hiçbir şey kaybetmez, mevcut davranışta kalır. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /*
     * ADSIZ `view()` KULLANILMIYOR — ve bunun somut bir sebebi var.
     *
     * `view()` ogenin görünürlügünü EN YAKIN kaydirma kabina (scrollport)
     * göre ölçer. `.hero`, `.whyus-card` ve `.showcase__media` üçünde de
     * `overflow: hidden` var; bu onlari birer kaydirma kabi yapiyor.
     * Dolayisiyla içlerindeki ögeye `view()` yazildiginda zaman çizelgesi
     * SAYFAYA degil o kutuya baglaniyordu: kutu hiç kaymadigi için ilerleme
     * hep 0 kaliyor ve animasyon sessizce hiç çalismiyordu.
     *
     * Çözüm: zaman çizelgesini, görünürlügünü gerçekten önemsedigimiz
     * ögenin ÜSTÜNDE adlandirip içeriden referans vermek. Ad verilen öge
     * kendi en yakin kaydirma kabina (kök) göre ölçülüyor.
     */
    .hero { view-timeline: --hero-view block; }
    .whyus-card { view-timeline: --media-view block; }
    .showcase__media { view-timeline: --media-view block; }

    /* Hero geride kalır: sayfa kayarken arka plan yavaşlar ve
       söner. Klasik parallax'tan farkı, JS'siz ve tam senkron
       olması - scroll ile arka plan asla ayrı düşmüyor. */
    .hero__bg {
      animation: heroDrift linear both;
      animation-timeline: --hero-view;
      animation-range: exit 0% exit 100%;
    }

    /* Fotoğraflar ZAMANA değil SCROLL'a bağlı yavaş yakınlaşır.
       Zamana bağlı ken-burns bir süre sonra rahatsız ediyor;
       scroll'a bağlı olan kullanıcının kendi hızında ilerliyor. */
    .whyus-card__media img,
    .showcase__media img {
      animation: mediaDrift linear both;
      animation-timeline: --media-view;
      animation-range: entry 0% exit 100%;
    }
  }
}

/* Yakinlasan görsel kutusunun DISINA tasmasin. `.whyus-card` ve
   `.showcase__media` zaten kirpiyor; ortadaki sarmalayici kirpmiyordu. */
.whyus-card__media { overflow: hidden; }

@keyframes heroDrift {
  to { transform: translate3d(0, 14%, 0) scale(1.06); opacity: .35; }
}
@keyframes mediaDrift {
  from { transform: scale(1.12) translate3d(0, 1.5%, 0); }
  to   { transform: scale(1)    translate3d(0, -1.5%, 0); }
}

/* ── Bölüm ufku ────────────────────────────────────────────
   Koyu hero → beyaz gövde → koyu kapanış arasında sert kesme
   vardı. İnce bir ışık çizgisi iki yüzeyi birbirine bağlıyor;
   sayfa "yapıştırılmış bölümler" değil tek kompozisyon gibi
   okunuyor.

   `::before` kullanılıyor çünkü ek DOM düğümü istemiyoruz -
   33 bölümün her birine boş bir div koymak işaretlemeyi
   şişirirdi. */
/*
 * Ufuk KOYU bolumun ustune konur, acik bolumun altina degil: isik
 * yukaridan sizmis gibi okunuyor. Beyaz zemine parilti koymak kirli
 * bir leke gibi duruyordu.
 *
 * Sinif markup'a degil BILESENE bagli: `.partners` ve `.cta-banner`
 * sitede uc sayfada geciyor ve her birine elle sinif eklemek, dorduncu
 * sayfada unutulacak bir is demekti.
 */
/*
 * `.cta-banner` BILEREK DISARIDA: iki sozde ogesi de dolu (::before
 * gradyan parilti, ::after ag dokusu) ve zaten kendi isigini tasiyor.
 * Ustune ufuk eklemek calisan bir seyi ezerdi.
 */
.partners,
.section--horizon { position: relative; isolation: isolate; }
.partners::before,
.section--horizon::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(107, 132, 255, .55) 28%,
    rgba(155, 107, 255, .65) 50%,
    rgba(107, 132, 255, .55) 72%,
    transparent 100%);
  pointer-events: none;
}
/* Çizginin altında çok yumuşak bir parıltı: çizgi tek başına
   "border" gibi duruyordu, ışık olduğunu göstermiyordu. */
.partners::after,
.section--horizon::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 120px;
  background: radial-gradient(60% 100% at 50% 0%,
    rgba(59, 91, 255, .10) 0%, transparent 70%);
  pointer-events: none;
  /* Icerigin ARKASINDA kalir; `isolation: isolate` sayesinde negatif
     z-index bolumun disina tasmiyor. */
  z-index: -1;
}

/* ── Hero: tarama geçişi ───────────────────────────────────
   Izgara çizgileri çizildikten sonra üzerinden bir kez ışık
   geçiyor. TEK SEFERLİK ve 2.6 sn: sürekli dönen bir tarama
   efekti birkaç saniye sonra dikkat çalmaya başlıyor, oysa
   burada istenen şey açılışta bir kez "sistem ayağa kalktı"
   demek. */
.hero__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg,
    transparent 42%,
    rgba(107, 132, 255, .16) 50%,
    transparent 58%);
  background-size: 260% 100%;
}
.js .hero.is-ready .hero__scan {
  animation: heroScan 2.6s var(--ease-out) .5s 1 both;
}
@keyframes heroScan {
  0%   { opacity: 0;   background-position: 130% 0; }
  18%  { opacity: 1; }
  100% { opacity: 0;   background-position: -30% 0; }
}

/* ── Hero görselinde imleç parallax'ı ──────────────────────
   Kalkan ve yörünge fareye çok hafif tepki verir. Değeri
   JS'ten gelen `--px/--py` (-1..1) taşır; hesap CSS'te yapılır,
   böylece JS yalnızca iki sayı yazar, düzen hesabı yapmaz.

   `@media (hover: hover)`: dokunmatik cihazda imleç yok, orada
   bu kural hiç kurulmaz - mobilde bedeli sıfır. */
@media (hover: hover) and (pointer: fine) {
  .js .hero.is-ready .hero__visual {
    transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0);
    transition: transform .5s var(--ease-out);
  }
  .js .hero.is-ready .hero__visual svg {
    transform: rotateX(calc(var(--py, 0) * -3deg)) rotateY(calc(var(--px, 0) * 4deg));
    transition: transform .6s var(--ease-out);
  }
  .hero__visual svg { transform-style: preserve-3d; }
}

/* ── İş ortağı plakaları ───────────────────────────────────
   Logolar şimdilik yazı; resmi SVG'ler geldiğinde aynı plakanın
   içine girecek (`.partner-logo img`). Plaka yapısı bugünden
   duruyor ki logo eklendiğinde hizalama yeniden çözülmesin.

   Dinlenme hâlinde soluk, üzerine gelince markanın kendi rengi:
   "yetkiliyiz" iddiasının görsel karşılığı sessiz durup
   sorulduğunda cevap vermek. */
.partner-logo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /*
   * PLAKA. Logolar bugun duz yazi; resmi SVG'ler geldiginde ayni kutunun
   * icine girecek (`.partner-logo img`). Kutu bugunden duruyor ki logo
   * eklendiginde hizalama ve boyut yeniden cozulmesin - ayrica yaziyi da
   * "logo duvari" gibi okutuyor, dagilmis basliklar gibi degil.
   */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 52px;
  padding: 10px 20px;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  transition:
    color var(--dur) var(--ease-quart),
    border-color var(--dur) var(--ease-quart),
    background-color var(--dur) var(--ease-quart),
    transform var(--dur) var(--ease-out);
}
.partner-logo:hover,
.partner-logo:focus-visible {
  border-color: rgba(107, 132, 255, .5);
  background: rgba(59, 91, 255, .07);
}
.partner-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(107, 132, 255, .16) 50%,
    transparent 70%);
  background-size: 220% 100%;
  background-position: 130% 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-quart);
}
@media (hover: hover) {
  .partner-logo:hover::after,
  .partner-logo:focus-visible::after {
    opacity: 1;
    animation: partnerSheen .7s var(--ease-out) 1;
  }
}
@keyframes partnerSheen {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
/*
 * BEYAZ SILUET.
 *
 * `grayscale + brightness` denendi ve YETMEDI: indirilen resmi dosyalarin
 * cogunda yazi koyu (Acronis #0D2345, HPE #000, Fortinet lacivert). Koyu
 * lacivert seritte griye cevrilince okunmuyorlardi - ekranda dogrulandi.
 * `brightness(0) invert(1)` rengi ne olursa olsun her pikseli beyaza
 * cekiyor, yani duvar kaynak dosyalarin renk kararlarindan bagimsiz
 * calisiyor.
 *
 * Ters (beyaz) surum, ureticilerin koyu zemin icin zaten yayimladigi
 * standart kullanimdir; logonun kendi renklerine bulasilmiyor, tek renge
 * indiriliyor.
 */
.partner-logo img {
  display: block;
  width: 100%;
  max-width: 120px;
  /* Yukseklik MARKA BASINA ayarli: hepsini tek `max-height` ile
     kisitlayinca Fortinet HPE'nin iki katindan genis cikiyordu (215px'e
     karsi 91px - olculdu). Goz esit agirlik gorsun diye her logo kendi
     optik boyutunu aliyor. */
  height: var(--logo-h, 24px);
  object-fit: contain;
  /*
   * ISTISNA KAPISI: `--logo-ham` tanimliysa filtre uygulanmaz.
   *
   * Filtre her pikseli beyaza cektigi icin OYUK (knockout) isaretleri
   * yok ediyor: Trend Micro'nun dairesindeki beyaz "t" ve ESET'in
   * turkuaz kutusundan kesilmis beyaz yazi kayboluyor, geriye dolu bir
   * leke kaliyor. Ikisi de ekranda gorulup boyle isaretlendi. Bu iki
   * markada ureticinin koyu zemin icin yayimladigi dosya kendi
   * renginde basiliyor.
   */
  filter: var(--logo-ham, brightness(0) invert(1));
  opacity: .72;
  transition: opacity var(--dur) var(--ease-quart);
}
.partner-logo:hover img,
.partner-logo:focus-visible img { opacity: 1; }

/*
 * MARKA BAŞINA SINIF YOK.
 *
 * `--logo-h` ve `--logo-ham` bir dönem burada, marka başına birer kuralda
 * duruyordu. Yeni bir ortak eklemek iki dosyaya birden dokunmayı
 * gerektiriyordu ve biri unutulunca logo varsayılan boyda kalıyordu.
 * Değerler artık `includes/partnerler.php`den satır içi özel özellik
 * olarak basılıyor - ortağın bütün bilgisi tek satırda.
 */

/* Vektorel logosu henuz olmayan marka: ayni plakada yazi olarak. */
.partner-logo--text {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .72);
}
.partner-logo--text:hover,
.partner-logo--text:focus-visible { color: #fff; }

/* ── Yetkinlik satirlarinda sinyal ─────────────────────────
   11 hizmet alani duz bir liste olarak duruyordu. Sol kenara
   konan ince isik, satiri bir "kanal" gibi okutuyor - sitenin
   izleme/altyapi karakterine gorsel bir karsilik, ve fare
   uzerine geldiginde nereye bakildigini da soyluyor.

   Yukseklik `scaleY` ile canlandiriliyor (layout tetiklemez);
   `height` canlandirmak her karede yeniden yerlesim demekti. */
.capability { position: relative; }
.capability::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 60%;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-500), var(--violet-500));
  transition: transform var(--dur) var(--ease-out);
}
.capability:hover::before,
.capability:focus-visible::before { transform: translateY(-50%) scaleY(1); }

/* ── Sayfalar arası geçiş ──────────────────────────────────
   İki satır. Aynı origin'de sayfa değişimini yumuşatıyor;
   sitede 11 çözüm + 5 marka sayfası olduğu için her tıklamada
   yaşanan sert beyaz kesme en çok burada göze batıyordu.

   Süre BİLEREK kısa (.22s): sayfa geçişi bir gösteri değil,
   yalnızca kesmenin yumuşatılması. Uzun geçiş siteyi yavaş
   hissettirir. */
@view-transition { navigation: auto; }

/* Gecis animasyonlari SINEMATIK KATMAN III icinde. */

/* Navigasyon geçişte SABİT kalır - her sayfada aynı yerde duran
   bir öğenin cross-fade ile titremesi geçişi ucuz gösteriyordu. */
.navbar { view-transition-name: parsdx-nav; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}


/* ============================================================
   SİNEMATİK KATMAN — II
   ------------------------------------------------------------
   Birinci katman hareketi kurdu; bu katman GÖRSEL ZENGİNLİK
   ekliyor: derinlik, ışık, doku ve etkileşimli yüzeyler.

   Hepsinin ortak kuralı değişmedi — yalnızca `transform`,
   `opacity` ve `filter` canlandırılır, boyut/konum asla.
   ============================================================ */

/*
 * `@property` OLMADAN gradyan açısı canlandırılamaz.
 *
 * Tarayıcı özel özelliği varsayılan olarak metin sayar; `--aci: 0deg`
 * ile `--aci: 360deg` arasında ara değer üretmez, birinden ötekine
 * zıplar. Türü bildirildiğinde açı gerçek bir sayı olur ve yumuşak
 * döner. Dönen degrade kenarlıkların tamamı buna dayanıyor.
 */
@property --aci {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --parlak {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

/* ── Doku: film grenı ──────────────────────────────────────
   Düz degradeler büyük ekranda bantlanıyor (banding): rengin
   yavaş değiştiği yerde basamaklar görünür hale geliyor. Çok
   ince bir gren bunu kırıyor ve yüzeye "basılı" bir his veriyor.

   SVG gürültüsü veri URI olarak gömülü: ayrı bir istek, üstelik
   birkaç yüz baytlık bir dosya için, kendini ödemez. */
.grain-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .028;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .grain-layer { display: none; } }

/* ── Hero: parçacık ağı ────────────────────────────────────
   Tuval SVG ızgarasının üstünde, içeriğin altında. `hero__bg`
   zaten `z-index:-1` ve `isolation` var, bu yüzden burada
   yığın sırası kutunun içinde kalıyor. */
.hero__net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Aurora: yavaşça yer değiştiren renk kütleleri ─────────
   İki büyük bulanık küre birbirinden bağımsız dolaşıyor. Tek
   bir hareketli degrade "döner arka plan" gibi okunuyordu;
   iki farklı hızda iki kütle organik duruyor.

   `filter: blur()` PAHALI ama burada bedeli sabit: iki öğe,
   sabit boyut, kompozisyon katmanında bir kez hesaplanıyor. */
.aurora {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.aurora span {
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .34;
}
.aurora span:nth-child(1) {
  background: radial-gradient(circle, #3B5BFF, transparent 68%);
  top: -8%; left: -6%;
}
.aurora span:nth-child(2) {
  background: radial-gradient(circle, #7B3FFF, transparent 68%);
  right: -10%; bottom: -12%;
}
@media (prefers-reduced-motion: no-preference) {
  .aurora span:nth-child(1) { animation: auroraA 26s var(--ease-inout) infinite alternate; }
  .aurora span:nth-child(2) { animation: auroraB 34s var(--ease-inout) infinite alternate; }
}
@keyframes auroraA { to { transform: translate3d(18vw, 12vh, 0) scale(1.18); } }
@keyframes auroraB { to { transform: translate3d(-16vw, -10vh, 0) scale(.86); } }

/* ── Kinetik yazı ──────────────────────────────────────────
   Kelimeler alttan yükselerek giriyor. Dış span taşmayı kırpar,
   iç span hareket eder - tek katmanla yapılınca harfler kutunun
   dışına taşıp üstteki satıra giriyordu. */
.kinetik__kelime {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Kırpma harflerin altını kesiyordu (g, y, ş); alt boşluk payı. */
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.kinetik__ic {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}
.js [data-reveal].is-in .kinetik__ic,
.js .is-in > .kinetik__kelime .kinetik__ic {
  transform: none;
  opacity: 1;
  transition:
    transform .85s var(--ease-out),
    opacity .5s linear;
  transition-delay: calc(var(--k, 0) * 55ms);
}
@media (prefers-reduced-motion: reduce) {
  .kinetik__ic { transform: none !important; opacity: 1 !important; }
}

/* ── Işık takibi (spotlight) ───────────────────────────────
   İmleç konumunu JS `--spot-x/y` olarak yazıyor, parıltıyı CSS
   çiziyor. Kartın dışına çıkınca `--spot-o` 0 oluyor. */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: var(--spot-o, 0);
  transition: opacity .3s var(--ease-quart);
  background: radial-gradient(
    260px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(59, 91, 255, .16),
    transparent 62%);
}

/* ── Eğim ──────────────────────────────────────────────────
   Perspektif EBEVEYNDE, dönüş çocukta: perspektif dönen öğenin
   kendisine verilirse her kart kendi kaçış noktasını kurar ve
   ızgaradaki kartlar birbirinden bağımsız eğilmiş görünür. */
.tilt-scene { perspective: 900px; }
/*
 * IKI SECICI, cunku ozgullugu esitlemek zorundayiz.
 *
 * Reveal sistemi sahneye giris bitince `transform: none` yaziyor
 * (`.js [data-reveal].is-in`, ozgulluk 0,3,0). Egim ayni ozelligi
 * kullaniyor ve tek basina `[data-tilt]` 0,1,0 - yani JS acilari
 * yaziyor, CSS kuraliniysa reveal eziyordu: deger vardi, donme yoktu.
 * Ekranda `--tilt-x: 6deg` iken `transform: none` okundugu icin fark
 * edildi.
 *
 * `[data-magnetic]` ayni tuzaga dusmuyor cunku `translate` bagimsiz bir
 * ozellik; `transform`u ezmeden onunla birlikte uygulaniyor.
 */
.js [data-reveal].is-in[data-tilt],
[data-tilt] {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .4s var(--ease-out);
}

/* ── Mıknatıs düğme ────────────────────────────────────────
   `translate` ayrı özellik olarak yazıldı: `transform`u ezmiyor,
   yani düğmenin kendi hover dönüşümüyle çakışmıyor. */
[data-magnetic] {
  translate: var(--mag-x, 0) var(--mag-y, 0);
  transition: translate .35s var(--ease-out);
}

/* ── Degrade kenarlık ──────────────────────────────────────
   Dönen konik degrade. Kenarlığı gerçek `border` ile yapmak
   yerine maske kullanılıyor: `border-image` köşe yarıçapını
   takip etmiyor, yuvarlatılmış kutuda köşeler kırılıyordu.

   `mask-composite: exclude` içi oyuyor, geriye yalnız çerçeve
   kalıyor. */
.glow-frame { position: relative; }
.glow-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--aci),
    transparent 0deg,
    rgba(107, 132, 255, .85) 60deg,
    rgba(155, 107, 255, .85) 120deg,
    transparent 180deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  /*
   * Gorunurluk `:hover` yerine `--spot-o`ya bagli.
   *
   * Ilk surumde `.glow-frame:hover::after { opacity: 1 }` yaziyordu ve
   * cerceve hicbir zaman gorunmedi: kural eslesiyordu (ayni bloktaki
   * `animation` calisiyordu) ama hesaplanan opaklik 0 kaliyordu. Sozde
   * ogenin `:hover`a bagli opakligi bu tarayicida guvenilir cozulmuyor.
   *
   * Isik takibi zaten "imlec bu kartin uzerinde mi" sorusunu JS'te
   * cevapliyor ve `--spot-o` yaziyor. Ayni bilgiyi ikinci kez CSS'e
   * sordurmak yerine tek kaynaktan besleniyor - hem calisiyor hem de
   * cerceve ile isik her zaman ayni anda aciliyor.
   */
  opacity: var(--spot-o, 0);
  transition: opacity .4s var(--ease-quart);
  pointer-events: none;
}
/* Donme yalniz uzerine gelindiginde: gorunmeyen bir cerceveyi surekli
   dondurmek bosa is. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .glow-frame:hover::after,
  .glow-frame:focus-within::after { animation: cerceveDon 4s linear infinite; }
}
/* Klavyeyle gezenler icin: `--spot-o` yalniz fareyle yaziliyor. */
.glow-frame:focus-within::after { opacity: 1; }
@keyframes cerceveDon { to { --aci: 360deg; } }

/* ── Cam yüzey ─────────────────────────────────────────────
   `backdrop-filter` arkasındaki her şeyi yeniden boyar; büyük
   alanlarda pahalı. Bu yüzden yalnızca KÜÇÜK öğelerde
   kullanılıyor (rozet, panel), tam genişlik bölümlerde değil. */
.glass {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .12);
}

/* ── Kayan şerit (marquee) ─────────────────────────────────
   İçerik JS tarafından ikinci kez kopyalanıyor; iki kopya
   yan yana kayınca dikiş görünmüyor. %-50 tam bir kopya
   uzunluğu demek.

   `hover`da duruyor: okumak isteyen kullanıcıyı kovalayan bir
   şerit erişilebilirlik açısından da sorunlu. */
.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(28px, 4vw, 64px);
  padding-right: clamp(28px, 4vw, 64px);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: kay 38s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes kay { to { transform: translate3d(-100%, 0, 0); } }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--on-dark-muted);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.marquee__item::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-400);
  flex: 0 0 auto;
}

/* ── Hero cam rozeti ───────────────────────────────────────
   Başlığın üstünde duran küçük durum satırı. Yanıp sönen nokta
   "izleme sürüyor" diyor - 7/24 iddiasının görsel karşılığı.

   Nokta `box-shadow` ile büyüyor, `width` ile değil: ölçü
   değiştirmek her karede yerleşim hesabı demek, gölge ise
   yalnızca boyama. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 9px 16px 9px 14px;
  border-radius: 999px;
  color: var(--on-dark);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.hero__badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__badge-dot { animation: nabiz 2.4s var(--ease-inout) infinite; }
}
@keyframes nabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}
@media (max-width: 560px) { .hero__badge { font-size: .76rem; } }

/* ── Kayan şerit bölümü ────────────────────────────────────
   Hero ile ilk bölüm arasında ince bir bant. Sayfa aşağı
   inerken önce "neler yapıyoruz" tek satırda geçiyor, sonra
   ayrıntıya giriliyor - sinematik düzende buna "geçiş planı"
   deniyor. */
.ticker {
  padding: 18px 0;
  background: var(--ink-950);
  border-bottom: 1px solid var(--on-dark-line);
  position: relative;
  isolation: isolate;
}
/* Ufuk çizgisi bu bantta da: koyu şeridin üstü hero'ya bağlanıyor. */
.ticker::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107,132,255,.5) 30%, rgba(155,107,255,.6) 50%, rgba(107,132,255,.5) 70%, transparent);
}

/* ── Bento ızgarası ────────────────────────────────────────
   Eşit kutular yerine farklı ağırlıkta hücreler. Gözün önce
   nereye gideceğini düzen söylüyor; on bir eşit kart hiçbir
   şey söylemiyordu. */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.bento__cell {
  position: relative;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-quart);
}
.bento__cell:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.bento__cell--wide { grid-column: span 2; }
.bento__cell--tall { grid-row: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__cell--tall { grid-row: span 1; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell--wide { grid-column: span 1; }
}

/* ── Fotoğraflı bento hücresi ──────────────────────────────
   Geniş hücrede fotoğraf zemin, metin üstünde. Fotoğraf çok
   soluk: kartın işi bilgi vermek, fotoğrafın işi ona ağırlık
   kazandırmak. Okunurluk her zaman önce gelir.

   `services__grid` zaten bir ızgara; `bento` sınıfı onun
   kolon sayısını ve hücre ağırlıklarını devralıyor. */
.services__grid.bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .services__grid.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .services__grid.bento { grid-template-columns: 1fr; }
  .services__grid.bento .bento__cell--wide { grid-column: span 1; }
}

.service-card--photo { position: relative; isolation: isolate; overflow: hidden; }
.service-card__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.service-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .18;
  filter: saturate(.55);
  transition: opacity var(--dur-slow) var(--ease-quart), transform var(--dur-slow) var(--ease-out);
}
.service-card--photo:hover .service-card__photo img {
  opacity: .27;
  transform: scale(1.04);
}
/* Metnin altında beyaza doğru geçiş: fotoğrafın koyu bölgesine
   denk gelen bir satır okunmaz kalıyordu. */
.service-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.86) 55%, var(--surface) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .service-card--photo:hover .service-card__photo img { transform: none; }
}

/* ── Bölüm numarası ────────────────────────────────────────
   Büyük, soluk sıra numarası. Sayfayı "bölümler" hâlinde
   okutuyor - sinematik düzenin en ucuz aracı. */
.section-index {
  position: absolute;
  /* Bolumun ICINDE duruyor: ust kenara yapisik oldugunda ustteki
     bolume tasip iki bolume birden aitmis gibi gorunuyordu. */
  top: clamp(8px, 2vw, 28px);
  right: 4%;
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 11rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: currentColor;
  opacity: .045;
  pointer-events: none;
  user-select: none;
}

/* ── Kaydırmaya bağlı ilerleyen çizgi ──────────────────────
   Bölümün yanında, okundukça dolan dikey çizgi. Scroll'a bağlı,
   JS yok. */
.rail { position: relative; }
.rail::before {
  content: "";
  position: absolute;
  left: -22px; top: 0; bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--border);
}
.rail::after {
  content: "";
  position: absolute;
  left: -22px; top: 0;
  width: 2px;
  height: 100%;
  border-radius: 2px;
  transform-origin: top;
  transform: scaleY(0);
  background: linear-gradient(180deg, var(--brand-500), var(--violet-500));
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rail::after {
      animation: raySur linear both;
      animation-timeline: view();
      animation-range: entry 15% exit 40%;
    }
  }
}
@keyframes raySur { to { transform: scaleY(1); } }
@media (max-width: 900px) { .rail::before, .rail::after { display: none; } }

/* ── Bölüm girişinde perde ─────────────────────────────────
   Bölüm ekrana girerken içerik hafifçe ölçekleniyor ve
   yukarıdan bir perde çekiliyor. Scroll'a bağlı; sayfa
   "sahneler" hâlinde açılıyor. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scene { view-timeline: --scene block; }
    .scene > .container {
      animation: sahne linear both;
      animation-timeline: --scene;
      animation-range: entry 0% entry 85%;
    }
  }
}
@keyframes sahne {
  from { opacity: .3; transform: translate3d(0, 34px, 0) scale(.985); }
  to   { opacity: 1;  transform: none; }
}

/* ── Düğme parlaması ───────────────────────────────────────
   Birincil düğmenin üzerinden geçen ışık. Sürekli değil,
   yalnızca hover'da bir kez - sürekli parlayan düğme "reklam"
   gibi duruyordu. */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::after {
    opacity: 1;
    animation: dugmeParla .75s var(--ease-out) 1;
  }
}
@keyframes dugmeParla {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* ── İkon nabzı ────────────────────────────────────────────
   Yetkinlik ikonlarının arkasında, üzerine gelince açılan
   halka. Odağı ikona çekiyor. */
.capability__icon { position: relative; }
.capability__icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid var(--brand-400);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .4s var(--ease-quart), transform .4s var(--ease-out);
}
.capability:hover .capability__icon::after {
  opacity: .55;
  transform: scale(1);
}


/* ============================================================
   SİNEMATİK KATMAN — III
   Sabitlenmiş bölümler, yatay kaydırma, özel imleç, perde.
   ============================================================ */

/* ── Marka sayfası hero görseli ────────────────────────────
   Fotoğraf hero'nun ARKASINDA, metnin altında. Koyu örtü iki
   iş yapıyor: metnin okunurluğunu garanti ediyor (fotoğrafın
   parlak bölgesinde bile) ve fotoğrafı sitenin lacivert
   paletine çekiyor - altı farklı fotoğraf tek marka dili
   içinde duruyor. */
.partner-hero--photo { position: relative; isolation: isolate; overflow: hidden; }
.partner-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.partner-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Doygunluk düşürülüp maviye çekiliyor: ham fotoğraflar altı ayrı
     renk sıcaklığında geliyordu ve sayfalar birbirinden kopuk
     görünüyordu. */
  filter: saturate(.75) brightness(.62) hue-rotate(-8deg);
}
.partner-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(8, 11, 42, .93) 22%, rgba(8, 11, 42, .55) 62%, rgba(17, 25, 74, .72) 100%),
    radial-gradient(circle at 82% 15%, rgba(91, 118, 255, .28), transparent 42%);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .partner-hero--photo { view-timeline: --phero block; }
    .partner-hero__photo img {
      animation: pheroDrift linear both;
      animation-timeline: --phero;
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes pheroDrift {
  from { transform: scale(1.14) translate3d(0, -1.5%, 0); }
  to   { transform: scale(1)    translate3d(0,  1.5%, 0); }
}

/* Kapsama bölümüne derinlik: koridor fotoğrafı çok soluk bir
   zemin olarak, ölçek hissi için. */
.brand-coverage--photo { position: relative; isolation: isolate; overflow: hidden; }
.brand-coverage--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/images/photos/marka-kapsama.webp") center/cover no-repeat;
  opacity: .05;
  filter: grayscale(.4);
}

/* ── Sabit sahnenin içeriği ────────────────────────────────
   Koyu zemin, arka planda çok soluk bir fotoğraf katmanı,
   önde metin. İki katman scroll'a bağlı ayrışıyor. */
.pin-scene { background: var(--ink-950); color: var(--on-dark); isolation: isolate; }
.pin-layer--back {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
}
.pin-layer--back img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.6) brightness(.7);
}
.pin-layer--fore { position: relative; text-align: center; padding: 60px 0; }
.pin-eyebrow {
  color: var(--brand-300);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  margin-bottom: 20px;
}
.pin-title {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.18;
  letter-spacing: -.03em;
  margin-bottom: 22px;
}
.pin-text {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--on-dark-soft);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.8;
}
.pin-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 34px;
}

/* ── Yatay kaydırma bölümünün zemini ───────────────────────*/
.hscroll { background: var(--ink-900); color: var(--on-dark); }
.hscroll__head {
  margin-bottom: 30px;
  /* SOLA hizali: kartlar soldan basliyor, ortalanmis bir baslik
     onlarla ayni eksende durmuyordu. */
  margin-left: 0;
  text-align: left;
}
.hscroll__head h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.03em; }
.hscroll__card span { display: block; }

/* ── Sabitlenmiş bölüm (pinned) ────────────────────────────
   İçerik ekranda SABİT dururken arka plan ve katmanlar
   kayıyor. Sinematik düzenin en güçlü aracı: bir an için
   sayfanın akışı durup anlatı öne çıkıyor.

   `position: sticky` ile yapılıyor, scroll-jacking YOK.
   Kaydırma hızına dokunulmuyor - kullanıcı istediği an
   geçip gidebiliyor. Scroll'u ele geçiren çözümler
   (fare tekerleğini yakalayıp kendi hızıyla kaydırmak)
   dokunmatik yüzeylerde ve erişilebilirlik araçlarında
   kırılıyor. */
.pin-scene {
  position: relative;
  /*
   * Sahnenin "suresi". 220vh iken tutus 1080px'e cikiyordu: kullanici
   * bir ekrandan fazla kaydiriyor ve metin kipirdamadan duruyordu -
   * "takildi" gibi okunuyor. 175vh'de tutus ~675px, yani yarim ekran
   * biraz fazlasi; sabit kaldigi hissediliyor ama bekletmiyor.
   */
  min-height: 175vh;
}
.pin-scene__sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
@media (max-width: 900px) {
  /* Dar ekranda sabitleme yorucu: içerik zaten ekranı dolduruyor
     ve kullanıcı parmakla kaydırıyor. Normal akışa dönülüyor. */
  .pin-scene { min-height: auto; }
  .pin-scene__sticky { position: static; min-height: auto; }
}

/*
 * KATMANLAR `--p` ILE SURULUYOR, `animation-timeline` ILE DEGIL.
 *
 * Ilk surum scroll'a bagli CSS animasyonu kullaniyordu ve iki sorun
 * uretti:
 *
 *   1. Metin, aralik disinda normal halinde (gorunur), aralik basinda
 *      ise keyframe'in `from`u nedeniyle opaklik 0 oluyordu. Yani
 *      bolume girildigi an yazi bir kez SICRIYORDU. Dolguyu `both`
 *      yapmak da cozum degil: o zaman zaman cizelgesi etkinlesmezse
 *      metin kalici olarak gizli kaliyordu.
 *
 *   2. `animation-timeline` yalniz destekleyen tarayicida calisiyor ve
 *      davranisi test ortaminda dogrulanamiyordu.
 *
 * Simdi ilerleme JS'te tek bir sayiya (`--p`, 0..1) indirgeniyor,
 * donusumu CSS kuruyor. Her tarayicida ayni, olculebilir ve METIN
 * HER ZAMAN GORUNUR - opaklik hic canlandirilmiyor.
 */
.pin-layer--back {
  transform: scale(calc(1 + .16 * (1 - var(--p, 0)))) translate3d(0, calc((.5 - var(--p, 0)) * 5%), 0);
  opacity: calc(.16 + .16 * var(--p, 0));
}
.pin-layer--fore {
  /* Ters yonde ve KUCUK bir kayma: sabit duran metnin arkasindaki
     katmandan ayrildigini gosteriyor. Opaklik yok, metin daima okunur. */
  transform: translate3d(0, calc((.5 - var(--p, 0)) * 46px), 0);
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  /* Dar ekranda ve hareket tercihi kapaliyken katmanlar sabit. */
  .pin-layer--back { transform: none; opacity: .2; }
  .pin-layer--fore { transform: none; }
}

/* ── Yatay kaydırma bölümü ─────────────────────────────────
   Dikey scroll yatay harekete çevriliyor. Bunu da JS'siz
   yapmanın yolu var: uzun bir kap + sticky bir şerit +
   scroll'a bağlı `translateX`.

   Desteklenmeyen tarayıcıda şerit YATAY KAYDIRILABİLİR bir
   liste olarak kalıyor (overflow-x: auto) - yani içerik her
   koşulda erişilebilir, yalnızca hareketi kaybediyor. */
.hscroll { position: relative; }
.hscroll__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.hscroll__track {
  display: flex;
  gap: 18px;
  /* Sol bosluk `.container` ile hizali: serit sayfanin kenarindan degil,
     metnin basladigi yerden basliyor. Sagda ekstra bosluk var ki son
     kart kenara yapismasin. */
  padding: 4px clamp(24px, 6vw, 120px) 18px clamp(20px, calc((100vw - 1280px) / 2 + 20px), 400px);
  width: max-content;
}
.hscroll__card {
  /* Kartlar GENIS: bes kart x 380px + bosluklar ~2000px eder, yani
     serit her masaustu genisliginde belirgin sekilde tasiyor. Dar
     kartlarda tasma cok azdi ve efekt gorunmuyordu. */
  flex: 0 0 clamp(260px, 30vw, 380px);
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--on-dark-line);
  background: rgba(255, 255, 255, .04);
  color: var(--on-dark);
}
.hscroll__card h3 { color: #fff; font-size: 1.05rem; margin-bottom: 10px; }
.hscroll__card p { color: var(--on-dark-muted); font-size: .92rem; line-height: 1.7; }
.hscroll__card span {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--brand-300);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
}

/*
 * Film seridi: dikey scroll yatay harekete cevriliyor.
 *
 * Burada da `--p` kullaniliyor. `--hs-uzunluk` seridin ne kadar
 * kayacagi (JS olcuyor: serit genisligi eksi pencere genisligi).
 * Ikisinin carpimi konumu veriyor.
 *
 * `.js` on eki: JS calismiyorsa bolum sabitlenmez ve serit normal
 * yatay kaydirilabilir liste olarak kalir - icerik her kosulda
 * erisilebilir.
 */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /*
   * YUKSEKLIK SABIT DEGIL, yatay mesafeye bagli.
   *
   * Ilk surumde 260vh sabitti. Sonuc: 1440px dikey kaydirma karsiliginda
   * serit yalnizca 345px kayiyordu - kullanici iki ekran boyu kaydirip
   * neredeyse hicbir sey gormuyordu. Olculdu ve goruldu.
   *
   * `100vh + kayacak mesafe` ile oran 1:1 oluyor: bir piksel dikey
   * kaydirma bir piksel yatay hareket. Serit ne kadar uzunsa bolum o
   * kadar uzun, ne eksik ne fazla.
   */
  .js .hscroll--hazir {
    /*
     * `* 2.2`: SERIT YAVASLATICI.
     *
     * 1:1 oranda serit dikey kaydirmayla ayni hizda kaydigi icin bolum
     * "ne oldugu anlasilmadan" bitiyordu - bes kart bir ekran boyu
     * kaydirmada gecip gidiyor, okumaya vakit kalmiyordu.
     *
     * Carpan bolumu uzatiyor: ayni yatay mesafe icin daha fazla dikey
     * kaydirma gerekiyor, yani serit yavasliyor. 2.2 ile kart basina
     * yaklasik yarim ekran dusuyor - okunacak kadar duruyor ama
     * bekletmiyor.
     */
    min-height: calc(100vh + var(--hs-uzunluk, 0px) * 2.2);
  }
  .js .hscroll--hazir .hscroll__viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    align-content: center;
    /* Kendi yatay kaydirmasi kapali: konumu scroll ilerlemesi suruyor. */
    overflow: hidden;
  }
  .js .hscroll--hazir .hscroll__track {
    transform: translate3d(calc(-1 * var(--hs-uzunluk, 0px) * var(--p, 0)), 0, 0);
  }
}

/* ── Özel imleç ────────────────────────────────────────────
   İki parça: sert bir nokta ve onu geriden takip eden yumuşak
   bir halka. Gecikme JS'te lineer interpolasyonla üretiliyor.

   Sistem imleci GİZLENMİYOR. Gizlemek, JS bir yerde takıldığında
   ya da öğe yüklenmediğinde kullanıcıyı imleçsiz bırakır -
   sayfayı kullanılamaz hale getiren bir risk, birkaç piksel
   estetik için alınmaz. Halka onun üstüne biniyor.

   Yalnızca ince imleçli cihazlarda kuruluyor. */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 1300;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .25s var(--ease-quart), width .25s var(--ease-out), height .25s var(--ease-out);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--brand-400);
}
.cursor-ring {
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid rgba(107, 132, 255, .55);
}
.cursor-ready .cursor-dot,
.cursor-ready .cursor-ring { opacity: 1; }
/* Tıklanabilir bir şeyin üzerinde halka büyüyor: imleç arayüzü
   "okuyor" gibi görünüyor. */
.cursor-hot .cursor-ring {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-color: rgba(155, 107, 255, .75);
  background: rgba(107, 132, 255, .08);
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ── Scroll'a bağlı SVG çizimi ─────────────────────────────
   Yol, kaydırıldıkça çiziliyor. `stroke-dashoffset` scroll'a
   bağlı; JS yok. */
.draw-path {
  stroke-dasharray: var(--uzunluk, 1000);
  stroke-dashoffset: var(--uzunluk, 1000);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .draw-scene { view-timeline: --draw block; }
    .draw-path {
      animation: cizgiCiz linear both;
      animation-timeline: --draw;
      animation-range: entry 20% cover 60%;
    }
  }
}
@keyframes cizgiCiz { to { stroke-dashoffset: 0; } }
/* Desteklenmiyorsa yol TAM görünür kalsın - yarım çizilmiş bir
   şema, hiç çizilmemiş olmasından kötü. */
@supports not (animation-timeline: view()) {
  .draw-path { stroke-dashoffset: 0; }
}

/* ── Sayfa geçişinde perde ─────────────────────────────────
   Eski sayfa yukarı kayarken yeni sayfa altta bekliyor; arada
   ince bir ışık çizgisi geçiyor. Cross-fade'e göre yön
   duygusu veriyor: "ileri gidiliyor".

   Süre kısa (.3 sn): geçiş bir gösteri değil, kesmenin
   yumuşatılması. */
::view-transition-old(root) {
  animation: perdeCik .26s var(--ease-quart) both;
}
::view-transition-new(root) {
  animation: perdeGir .34s var(--ease-out) both;
}
@keyframes perdeCik {
  to { opacity: 0; transform: translate3d(0, -22px, 0) scale(.995); }
}
@keyframes perdeGir {
  from { opacity: 0; transform: translate3d(0, 26px, 0); clip-path: inset(28% 0 0 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}


/* ============================================================
   KARİYER ve İŞ ORTAKLARI SAYFALARI
   ============================================================ */

/* Hero fotoğrafları: mevcut `page-hero--photo` kalıbını izliyor. */
.page-hero--kariyer  { background-image: linear-gradient(105deg, rgba(8,11,42,.92) 25%, rgba(8,11,42,.6) 70%), url("/assets/images/photos/kariyer-kultur.webp"); }
.page-hero--ortaklar { background-image: linear-gradient(105deg, rgba(8,11,42,.92) 25%, rgba(8,11,42,.6) 70%), url("/assets/images/photos/marka-microsoft.webp"); }

/* ── İş ortağı kartları ────────────────────────────────────
   Logo üstte kendi plakasında, altında kapsam ve açıklama.
   Ana sayfadaki şeritten farkı: orada logo duvarı, burada
   her ortağın ne iş yaptığı yazıyor. */
.ortak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.ortak-kart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur) var(--ease-quart), transform var(--dur) var(--ease-out);
}
.ortak-kart:hover { border-color: var(--border-strong); }
.ortak-kart__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 6px;
}
.ortak-kart__logo img {
  max-height: 26px;
  width: auto;
  /* AÇIK zeminde logolar KENDI renginde: koyu şeritteki beyaz siluet
     muamelesi burada gereksiz, hatta yanlış - beyaz logo beyaz kartta
     görünmez. */
  opacity: .9;
}
.ortak-kart__yazi {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.ortak-kart__kapsam {
  color: var(--brand-600);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.ortak-kart__metin { color: var(--muted); font-size: .95rem; line-height: 1.7; }
.ortak-kart__git {
  margin-top: auto;
  padding-top: 12px;
  color: var(--brand-600);
  font-size: .9rem;
  font-weight: 600;
}

/* ── Müşteri referansları ──────────────────────────────────*/
.referans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.referans-kart {
  display: grid;
  gap: 8px;
  padding: 24px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}
.referans-kart__logo {
  display: grid;
  place-items: center;
  min-height: 48px;
}
.referans-kart__logo img { max-height: 38px; width: auto; }
.referans-kart__ad { font-weight: 700; color: var(--text); }
.referans-kart__sektor { color: var(--muted); font-size: .84rem; }

/*
 * MASKELİ DURUM.
 *
 * Kartlar bilerek "yer tutucu" gibi görünüyor: gri bloklar, kesik
 * çizgili çerçeve. Gerçek bir logoymuş izlenimi vermemesi ÖNEMLİ -
 * bulanıklaştırılmış sahte bir logo, olmayan bir referansı ima
 * ederdi. Buradaki mesaj "burası dolacak", "burada gizli bir müşteri
 * var" değil.
 */
.referans-kart--maskeli {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--surface-alt);
}
.maske-blok,
.maske-satir {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--n-200) 0%, var(--n-100) 50%, var(--n-200) 100%);
  background-size: 220% 100%;
}
.maske-blok { width: 100%; max-width: 116px; height: 30px; }
.maske-satir { height: 11px; margin: 0 auto; border-radius: 999px; }
.maske-satir--ad { width: 72%; }
.maske-satir--kisa { width: 46%; }

@media (prefers-reduced-motion: no-preference) {
  /* Yavaş bir parıltı: "yükleniyor / bekliyor" dilinin standart
     karşılığı, kullanıcı bunun bir yer tutucu olduğunu anlıyor. */
  .maske-blok, .maske-satir { animation: maskeParla 2.4s var(--ease-inout) infinite; }
}
@keyframes maskeParla {
  0%   { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

.referans-not {
  margin-top: 26px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
  max-width: 74ch;
}
.referans-not strong { color: var(--text); }

/* ── Kariyer başvuru bloğu ─────────────────────────────────*/
.kariyer-basvuru {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
}
.kariyer-basvuru__text { color: var(--muted); line-height: 1.8; margin-bottom: 20px; }
.kariyer-basvuru__liste { display: grid; gap: 8px; }
.kariyer-basvuru__liste li {
  position: relative;
  padding-left: 20px;
  color: var(--text);
  font-size: .95rem;
}
.kariyer-basvuru__liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
}
.kariyer-basvuru__eylem { display: grid; gap: 12px; justify-items: start; }
.kariyer-basvuru__eylem .btn { width: 100%; justify-content: center; }
.kariyer-basvuru__not { color: var(--muted); font-size: .86rem; line-height: 1.6; }

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

/* ── Duyarlı ─────────────────────────────────────────────── */
@media (min-width: 1360px) { .container { max-width: 1280px; } }

@media (max-width: 1080px) {
  .pillars { grid-template-columns: 1fr; }
  .cta-banner__inner { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  :root { --nav-h: 68px; }
  .hero { min-height: auto; padding: calc(var(--nav-h) + 64px) 0 64px; }
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero__visual { display: none; }
  .hero__text { max-width: none; }
  .hero__proof-note { margin-left: 0; flex-basis: 100%; }
  .about__inner { grid-template-columns: 1fr; gap: 40px; }
  .about__visual { display: none; }
  .contact__inner { grid-template-columns: 1fr; }
  /* Beş sütun ikiye düşünce sonuncusu tek başına kalıyordu. Marka bloğu tam
     genişliğe alınınca geriye kalan dört bağlantı sütunu tam 2×2 oturuyor. */
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__inner > .footer__brand { grid-column: 1 / -1; }
  .solution-detail { grid-template-columns: 1fr; direction: ltr; }
  .solution-detail--reverse { direction: ltr; }
  .solution-detail > [aria-hidden="true"] { display: none; }
  .company-intro { grid-template-columns: 1fr; }
  .company-intro > [aria-hidden="true"] { display: none; }
  .services__grid { grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); }
}

@media (max-width: 768px) { .container { padding: 0 20px; } }

/*
 * NAVIGASYON KIRILIMI 768 DEGIL 1100.
 *
 * Menude sekiz oge var (Musteri Paneli en son eklendi) ve 1010px'de
 * menunun toplam genisligi 789px olculdu; logonun 126px'iyle birlikte
 * 915px ediyor. Kapsayici 1001px'te 953px'e dustugu icin geriye 38px
 * kaliyor - yani satir tasmanin esiginde. Daha once ayni sinir 1000'de
 * cizilmisti ve o zaman yedi oge vardi.
 *
 * Esik oge SAYISINA degil OLCULEN GENISLIGE gore konuyor: menuye yeni
 * bir baslik eklerseniz burayi yeniden olcun. `assets/js/main.js`
 * icindeki `menuKirilimi` sorgusu da AYNI degeri tasimali - ikisi
 * ayrisirsa hamburger gorunurken menu yeniden boyutlandirmada
 * kendiliginden kapaniyor.
 *
 * `.container` padding'i 768'de kaliyor: o kural navigasyonla ilgili
 * degil, dar ekranda ic bosluk icin.
 */
@media (max-width: 1100px) {
  .navbar__toggle { display: flex; }
  .navbar__menu {
    display: none;
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 20px 26px;
    background: rgba(9,11,38,.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--on-dark-line);
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .navbar__menu.open { display: flex; }
  .navbar__menu li { width: 100%; }
  /* display:flex zorunlu: <a> varsayılan olarak inline'dır ve inline öğede
     dikey padding satır kutusunu büyütmez — öğeler üst üste biner. */
  .navbar__link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: .98rem;
    border-radius: var(--r-sm);
  }
  .navbar__link::after { display: none; }
  .navbar__link:hover, .navbar__link.active { background: rgba(198,205,236,.1); }
  .navbar__portal, .navbar__cta {
    display: flex !important;
    justify-content: center;
    margin-left: 0;
    margin-top: 6px;
    padding: 12px 16px !important;
  }

  .hero__proof { gap: 22px 28px; }
  .capabilities__head { flex-direction: column; gap: 8px; }
  .form__row { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 560px) {
  .capability-list { grid-template-columns: 1fr; }
  .services__grid, .whyus__grid, .values__grid { grid-template-columns: 1fr; }
  .hero__actions, .cta-banner__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .cta-banner__actions .btn { width: 100%; }
  .proof { flex-basis: calc(50% - 14px); }
  .scroll-top { bottom: 18px; right: 16px; width: 44px; height: 44px; }
}

@media (max-width: 380px) {
  html { font-size: 15px; }
  .container { padding: 0 16px; }
  .navbar__logo img { height: 34px; }
  .proof { flex-basis: 100%; }
}

/* ── Çerez rızası ────────────────────────────────────────── */
/* Ekran ortasında modal: alt bantta duran şerit görmezden gelinip
   kaydırılabiliyordu. Modal kararı öne alıyor. */
.consent-modal {
  width: min(500px, calc(100vw - 28px));
  max-height: calc(100dvh - 40px);
  /* Sitedeki evrensel `margin:0` sıfırlaması, <dialog>'un modal halinde
     ortalanmasını sağlayan tarayıcı varsayılanını (margin:auto) eziyor ve
     pencere sol üst köşeye yapışıyordu. Açıkça geri veriliyor. */
  margin: auto;
  padding: 0; border: 0; border-radius: 18px;
  box-shadow: 0 34px 90px rgba(11, 13, 46, .38);
  color: var(--text-strong, #0B0D2E);
  overflow: hidden auto;
}
.consent-modal::backdrop { background: rgba(11, 13, 46, .62); backdrop-filter: blur(3px); }
.consent-modal > div { padding: clamp(24px, 4vw, 34px); }

.consent-modal__head { text-align: center; }
.consent-modal__head--compact { text-align: left; padding-bottom: 4px; }
.consent-modal__icon {
  display: inline-grid; place-items: center; width: 54px; height: 54px;
  margin-bottom: 16px; border-radius: 16px;
  background: rgba(59, 91, 255, .1); color: var(--brand, #3B5BFF);
}
.consent-modal__icon svg { width: 27px; height: 27px; }
.consent-modal h2 { margin: 0 0 10px; font-size: 1.28rem; line-height: 1.3; }
.consent-modal__head p { margin: 0; color: var(--text-muted, #5a6478); font-size: .89rem; line-height: 1.65; }

/* Kabul TAM GENİŞLİK ve birincil renkte; reddetme hemen altında, aynı
   ekranda, gerçek düğme olarak. Vurgu farkı serbest, erişim farkı değil. */
.consent-modal__actions { display: grid; gap: 9px; margin-top: 24px; }
.consent-modal__accept { width: 100%; justify-content: center; padding: 14px 22px; font-size: .95rem; }
.consent-modal__secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.consent-modal__secondary .btn { justify-content: center; padding: 11px 14px; font-size: .85rem; }

.consent-modal__note {
  margin: 16px 0 0; text-align: center;
  color: var(--text-muted, #5a6478); font-size: .76rem; line-height: 1.6;
}
.consent-modal__note a { color: var(--brand, #3B5BFF); text-decoration: underline; text-underline-offset: 3px; }

.consent-modal__groups { margin-top: 10px; max-height: min(46vh, 360px); overflow-y: auto; }

.consent-group {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--border, #e1e6f1);
}
.consent-group:last-child { border-bottom: 0; }
.consent-group > div { flex: 1; min-width: 0; }
.consent-group strong { display: block; margin-bottom: 3px; font-size: .93rem; }
.consent-group small { display: block; color: var(--text-muted, #5a6478); font-size: .8rem; line-height: 1.55; }
.consent-always { flex-shrink: 0; color: #178a59; font-size: .75rem; font-weight: 700; }
.consent-group:not(.is-locked) { cursor: pointer; }

/* Anahtar: gerçek checkbox görsel olarak gizlenir ama ODAKLANABİLİR kalır,
   yoksa klavyeyle rıza vermek imkânsız olurdu. */
.consent-group input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.consent-switch {
  position: relative; flex-shrink: 0; width: 44px; height: 25px;
  border-radius: 999px; background: #cbd3e2; transition: background .18s;
}
.consent-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s;
}
.consent-group input:checked ~ .consent-switch { background: var(--brand, #3B5BFF); }
.consent-group input:checked ~ .consent-switch::after { transform: translateX(19px); }
.consent-group input:focus-visible ~ .consent-switch { outline: 2px solid var(--brand, #3B5BFF); outline-offset: 3px; }

@media (max-width: 460px) {
  /* Dar ekranda ikincil düğmeler alt alta: iki sütuna sıkışınca metin
     kırpılıyor ve reddetme seçeneği okunmaz hale geliyordu. */
  .consent-modal__secondary { grid-template-columns: 1fr; }
}

/* ── Metin blokları ──────────────────────────────────────── */
.prose > p {
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 16px;
  max-width: 64ch;
}
.prose > p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text-strong); font-weight: 600; }

/* ── Hukuki metin sayfaları ──────────────────────────────── */
.legal-doc { max-width: 78ch; }
.legal-doc__meta {
  margin: 0 0 28px; padding: 12px 16px;
  border-left: 3px solid var(--brand, #3B5BFF); border-radius: 0 8px 8px 0;
  background: rgba(59, 91, 255, .04);
  color: var(--text-muted, #5a6478); font-size: .84rem; line-height: 1.6;
}
.legal-doc .prose h2 { font-size: 1.2rem; }
.legal-doc .prose h3 { font-size: 1rem; }
.legal-doc .prose > ul { margin: 0 0 16px; padding-left: 22px; color: var(--text-muted, #5a6478); line-height: 1.85; }
.legal-doc .prose > ul li { margin-bottom: 8px; }
.legal-doc .prose > p { max-width: none; }
.legal-doc__nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border, #e1e6f1);
  font-size: .86rem;
}
.legal-doc__nav span { color: var(--text-muted, #5a6478); }
.legal-doc__nav a { color: var(--brand, #3B5BFF); text-decoration: underline; text-underline-offset: 3px; }

/* Dipnot: gövde metninin parçası ama ondan biraz geride durur —
   bilgilendirici bir kenar not, anlatının devamı değil. */
.prose > p.page-note {
  margin-top: 22px;
  padding: 14px 18px;
  border-left: 3px solid var(--border);
  border-radius: 0 8px 8px 0;
  background: rgba(59, 91, 255, .04);
  font-size: .93rem;
  line-height: 1.7;
}

/* ── İç sayfa künye şeridi ───────────────────────────────── */
.stat-row {
  display: flex;
  gap: clamp(22px, 3.5vw, 48px);
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.stat { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.stat__num {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: .875rem; color: var(--text-muted); line-height: 1.4; }

/* ── Üretici iş ortağı kartları ──────────────────────────── */
.partner-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 16px;
}
.partner-card {
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: var(--transition);
}
.partner-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
/*
 * Kartta logo AÇIK zeminde, kendi renginde. Koyu şeritteki beyaz siluet
 * muamelesi burada yanlış olurdu - beyaz logo beyaz kartta görünmez.
 * Sabit yükseklik: logolar arasında optik denge şeritteki kadar kritik
 * değil, kart zaten marka adını yazıyla da tekrarlıyor.
 */
.partner-card__logo {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 16px;
}
.partner-card__logo img {
  max-height: 24px;
  max-width: 100%;
  width: auto;
  opacity: .9;
}
.partner-card__wordmark {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-strong);
  opacity: .9;
}
.partner-card__name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 7px;
}
.partner-card__desc { font-size: .88rem; color: var(--text-muted); line-height: 1.6; }

/* ── Çözüm detay blokları (cozumler.php) ─────────────────── */
.solution-detail { margin-bottom: clamp(56px, 7vw, 96px); }
.solution-detail:last-of-type { margin-bottom: 0; }
.solution__title {
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.2rem);
  margin-bottom: 14px;
}
.solution__lead {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 26px;
  max-width: 58ch;
}
.solution__points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}
.point { display: flex; gap: 14px; align-items: flex-start; }
.point__icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 3px 8px rgba(43,73,245,.2);
}
.point__icon svg { width: 16px; height: 16px; }
.point__title {
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 4px;
}
.point__text { font-size: .89rem; color: var(--text-muted); line-height: 1.7; }

/* Vurgu kutusu — renkli kalın border-left yerine yüzey + ince kenarlık */
.callout {
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.callout + .callout { margin-top: 16px; }
.callout__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 7px;
}
.callout__text { font-size: .9rem; color: var(--text-muted); line-height: 1.7; }

/* ── Yol tarifi bağlantısı ───────────────────────────────── */
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--brand-600);
}
.map-link svg { transition: transform var(--dur) var(--ease-out); }
.map-link:hover svg { transform: translateX(3px); }

/* ── Hızlı iletişim şeridi ───────────────────────────────── */
.quick-contact {
  background: var(--ink-950);
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 1px solid var(--on-dark-line);
}
.quick-contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.quick-contact__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.quick-contact__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(59,91,255,.18);
  color: var(--brand-300);
  margin-bottom: 12px;
}
.quick-contact__icon svg { width: 21px; height: 21px; }
.quick-contact__label { font-size: .82rem; color: var(--on-dark-muted); margin-bottom: 5px; }
.quick-contact__value {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  color: #fff;
}
a.quick-contact__value:hover { color: var(--brand-300); }

/* ── Dokunmatik hedef boyutları ──────────────────────────── */
@media (pointer: coarse) {
  .navbar__logo { min-height: 44px; }
  .footer__links { gap: 2px; }
  .footer__link { min-height: 44px; display: flex; align-items: center; }
  .footer__office { padding: 6px 0; }
  .footer__bottom a { display: inline-block; padding: 10px 6px; }
  .pillar__link,
  .service-card__link { min-height: 44px; }
  .partner-logo { padding: 11px 6px; }
  .scroll-top { width: 50px; height: 50px; }
  .page-hero__breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }

  /*
   * ILETISIM BAGLANTILARI.
   *
   * Telefon, e-posta ve yol tarifi baglantilari 22-26px yuksekligindeydi
   * (olculdu). Bunlar telefonda sayfanin EN COK DOKUNULAN ogeleri:
   * ziyaretci arama yapmak icin geliyor. Satir ici baglanti olduklari
   * icin `min-height` tek basina buyutmuyor - `inline-flex` gerekiyor,
   * yoksa dikey padding satir kutusunu buyutmez ve komsu satirlarla
   * ust uste biner.
   */
  .map-link,
  .contact__direct-item a,
  .quick-contact__value {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBİL DÜZELTMELERİ

   Aşağıdakilerin hepsi 375px'te ölçülüp doğrulandı; tercih
   değil, ekranda görülen davranışın karşılığı.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /*
   * YANDAN GİRİŞ MOBİLDE DİKEY.
   *
   * `left`/`right` reveal'ları 28px yatay ötelemeyle başlıyor. Bu
   * öğeler iki kolonlu bölümlerin yarıları; 1024'ün altında zaten alt
   * alta diziliyorlar, yani "yandan gelme" hareketinin anlattığı şey
   * (iki sütunun birbirine kavuşması) kalmıyor.
   *
   * Asıl sorun görsel değil: tam genişlikteki bir öğe 28px ötelenince
   * SAYFAYI YATAY KAYDIRILABİLİR YAPIYORDU. Ana sayfa, hakkımızda ve
   * iletişim 375px ekranda 388px genişliğindeydi (ölçüldü). Öteleme
   * öğe görünür alana girene kadar sürdüğü için, kullanıcı aşağı
   * kaydırırken sayfa sağa sola oynuyordu.
   */
  .js [data-reveal="left"],
  .js [data-reveal="right"] { transform: translateY(24px); }
}

@media (max-width: 768px) {
  /*
   * FORM ALANLARI 16px ALTINA DÜŞMEMELİ.
   *
   * iOS Safari, odaklanılan alanın yazı boyutu 16px'in altındaysa
   * sayfayı otomatik yakınlaştırıyor ve odak bitince geri
   * uzaklaştırmıyor - kullanıcı formun kalanını yatay kaydırarak
   * dolduruyor. Ölçüldü: `.96rem`, kök 15px'e düştüğünde 14.4px.
   *
   * Yalnızca dar ekranda; masaüstünde `.96rem` tasarımın parçası.
   */
  .form__input,
  .form__select,
  .form__textarea { font-size: 16px; }
}

@media (max-width: 900px) {
  /*
   * SABİTLENEN İKİ BÖLÜMÜN DİKEY BOŞLUĞU.
   *
   * `.pin-scene` ve `.hscroll` sayfadaki TEK padding'siz bölümler
   * (diğerleri 52-72px taşıyor). Masaüstünde bu doğru: ikisi de
   * `sticky` bir kabın içinde ve yükseklik `min-height` ile
   * veriliyor, iç boşluk ortalamayı bozardı.
   *
   * 900'ün altında sabitleme kapanıyor ve bölümler normal akışa
   * dönüyor - ama boşlukları hâlâ sıfır. Sonuç: sabit sahnenin
   * düğmesi ile bir sonraki bölümün başlığı üst üste biniyormuş gibi
   * duruyordu, bölümler birbirinin içine giriyordu (telefonda ölçüldü:
   * aralarında 0px vardı).
   *
   * Boşluk `.pin-scene`e DEĞİL içindeki metin katmanına veriliyor;
   * bölümün kendisine verilseydi arka plan fotoğrafı kenarlardan
   * içeri kaçar, üstünde altında koyu bir bant kalırdı.
   *
   * `padding-block`: yatay padding `.container`dan gelmeye devam
   * ediyor (768'de 20px, 380'de 16px).
   */
  .pin-layer--fore { padding-block: 64px; }
  .hscroll { padding-block: 64px; }

  /*
   * AĞ: yatay taşmaya karşı son savunma.
   *
   * Yukarıdaki reveal kuralı NEDENİ düzeltiyor; bu satır SONUCU
   * kapatıyor. Telefonda yatay kaydırma her zaman hatadır - hiçbir
   * bölüm yana kaydırılarak okunmuyor - ve tek bir geniş öğe bütün
   * sayfayı oynatmaya yetiyor.
   *
   * `clip`, `hidden` DEĞİL: `hidden` kaydırma kabı oluşturur ve
   * içerideki `position: sticky` çalışmaz hale gelir.
   *
   * EŞİK 900, 1024 DEĞİL: sabitlemeli iki bölüm (pin-scene ve film
   * şeridi) 901px'ten itibaren `sticky` kullanıyor. Ağı onların
   * altında tutunca `clip` ile `sticky` hiç yan yana gelmiyor -
   * spesifikasyona göre gelmeleri de sorun değil ama bu ortamda
   * kaydırma davranışı doğrulanamıyor, o yüzden riske girilmedi.
   *
   * Masaüstünde taşma görünür kalıyor ki yeni bir hata testte
   * yakalansın, burada sessizce gizlenmesin.
   */
  html { overflow-x: clip; }

  /*
   * FİLM ŞERİDİ MOBİLDE YAKALAMALI.
   *
   * Sabitleme efekti 901px'ten itibaren çalışıyor; altında şerit sade
   * bir yatay kaydırma listesi. Yakalama olmadan parmak bırakıldığında
   * kartlar yarım kalıyordu. `start` hizası kartı sol boşluğa oturtuyor.
   */
  .hscroll__viewport {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
  }
  .hscroll__card { scroll-snap-align: start; }
}

@media (max-width: 560px) {
  /*
   * TELEFONDA FİLM ŞERİDİ YOK, ALT ALTA LİSTE VAR.
   *
   * Şerit 901px'ten itibaren çalışan bir MASAÜSTÜ efekti. Altında
   * geriye yalnızca yatay kaydırılan bir kart sırası kalıyordu ve
   * telefonda bunun bedeli var: 412px ekranda 260px'lik karttan sonra
   * ikincisi yarım görünüyor, beş adımlık bir SÜRECİ görmek için yana
   * kaydırmak gerekiyor. Yanındaki yarım kart "bozuk" gibi okunuyor.
   *
   * Sitedeki bütün kart ızgaraları (`.services__grid`, `.whyus__grid`,
   * `.values__grid`) bu ölçüde zaten tek sütuna düşüyor; süreç adımları
   * da aynı yere geliyor. 560-900 arasında iki kart rahat sığdığı için
   * orada yatay kaydırma yakalamayla birlikte duruyor.
   */
  .hscroll__viewport { overflow: visible; }
  .hscroll__track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: auto;
    /* Kartlar başlıkla aynı eksende: `.container` ile aynı yatay boşluk. */
    padding: 4px 20px 0;
  }

  /*
   * Maskeli referans kartları tek sütuna düşünce alt alta sekiz tane
   * tam genişlik parıltı bloğu çıkıyordu; sayfa "yükleniyor kalmış"
   * gibi duruyordu. Daha küçük taban ölçüsüyle iki sütun oluyor.
   */
  .referans-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .referans-kart { padding: 18px 12px; }
}

/* ── Hareket azaltma ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .js .hero__visual { opacity: 1 !important; transform: none !important; }
}

/* ── Baskı ───────────────────────────────────────────────── */
@media print {
  .navbar, .scroll-top, .cta-banner, .hero__bg { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}

/* ── Genel taşma güvenlikleri ────────────────────────────── */
main, section, .container, .navbar__inner, .footer__inner,
.contact__inner, .form__row, .form__row > * { min-width: 0; }
.section__title, .page-hero__title, .footer a { overflow-wrap: anywhere; }

/* ============================================================
   MÜŞTERİ PORTALI (/panel giriş) — kapsam dışı, korunuyor
   ============================================================ */
.portal-page { background: var(--ink-900); min-height: 100vh; display: flex; flex-direction: column; }
.portal-page #navbar { background: rgba(11,13,46,.97); backdrop-filter: blur(12px); box-shadow: 0 2px 24px rgba(0,0,0,.3); }
.portal-main { flex: 1; display: grid; grid-template-columns: 1fr 480px; min-height: calc(100vh - var(--nav-h)); margin-top: var(--nav-h); }
.portal-features { background: linear-gradient(160deg, #0D1040 0%, #111550 60%, #0B0D2E 100%); display: flex; flex-direction: column; justify-content: center; padding: 80px 64px; position: relative; }
.portal-features::before { content:''; position:absolute; top:-120px; left:-120px; width:480px; height:480px; background:radial-gradient(circle, rgba(59,91,255,.18) 0%, transparent 70%); pointer-events:none; }
.portal-features::after { content:''; position:absolute; bottom:-80px; right:-80px; width:360px; height:360px; background:radial-gradient(circle, rgba(123,63,255,.14) 0%, transparent 70%); pointer-events:none; }
.portal-features__label { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-faint); margin-bottom:20px; }
.portal-features__title { font-family:var(--font-display); font-size:clamp(1.9rem,3vw,2.8rem); font-weight:800; color:#fff; line-height:1.2; margin-bottom:12px; letter-spacing:-.03em; }
.portal-features__title span { color: var(--brand-300); }
.portal-features__subtitle { font-size:1rem; color:var(--on-dark-muted); margin-bottom:52px; line-height:1.7; max-width:420px; }
.portal-feature-list { display:flex; flex-direction:column; gap:16px; position:relative; z-index:1; }
.portal-feature-item { display:flex; align-items:flex-start; gap:16px; padding:18px 20px; background:rgba(198,205,236,.05); border:1px solid var(--on-dark-line); border-radius:var(--r-md); transition:var(--transition); }
.portal-feature-item:hover { background:rgba(198,205,236,.09); border-color:rgba(59,91,255,.34); }
.portal-feature-icon { flex-shrink:0; width:40px; height:40px; border-radius:var(--r-sm); background:var(--brand-600); display:grid; place-items:center; box-shadow:0 4px 16px rgba(43,73,245,.3); }
.portal-feature-icon svg { color:#fff; }
.portal-feature-text h4 { font-family:var(--font-display); font-size:.94rem; font-weight:700; color:#fff; margin-bottom:3px; }
.portal-feature-text p { font-size:.84rem; color:var(--on-dark-faint); line-height:1.55; }
.portal-login-wrap { background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:60px 48px; }
.portal-login-box { width:100%; max-width:340px; }
.portal-login-logo { display:block; margin:0 auto 32px; width:130px; }
.portal-login-title { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--ink-900); text-align:center; margin-bottom:6px; letter-spacing:-.03em; }
.portal-login-sub { font-size:.9rem; color:var(--text-muted); text-align:center; margin-bottom:32px; line-height:1.6; }
.portal-form-group { margin-bottom:18px; }
.portal-form-label { display:block; font-size:.84rem; font-weight:600; color:var(--ink-900); margin-bottom:7px; }
.portal-form-input { width:100%; padding:12px 14px; border:1px solid var(--border-strong); border-radius:var(--r-sm); font-size:.95rem; color:var(--text); background:var(--surface-alt); transition:var(--transition); outline:none; }
.portal-form-input:focus { border-color:var(--brand-500); background:#fff; box-shadow:0 0 0 3px rgba(59,91,255,.14); }
.portal-input-wrap { position:relative; }
.portal-input-wrap .portal-form-input { padding-left:42px; }
.portal-input-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--n-400); pointer-events:none; }
.portal-error { display:none; align-items:center; gap:8px; background:#FEF3F2; border:1px solid #FECDCA; border-radius:var(--r-sm); padding:11px 14px; font-size:.86rem; color:#912018; margin-bottom:18px; }
.portal-error.visible { display:flex; }
.portal-btn-login { width:100%; padding:13px; background:var(--brand-600); color:#fff; border:none; border-radius:var(--r-sm); font-size:.96rem; font-weight:600; cursor:pointer; transition:var(--transition); box-shadow:var(--shadow-brand); display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; }
.portal-btn-login:hover { background:var(--brand-500); transform:translateY(-1px); }
.portal-btn-login:active { transform:translateY(0); }
.portal-login-footer { margin-top:28px; text-align:center; font-size:.82rem; color:var(--text-muted); line-height:1.7; }
.portal-login-footer a { color:var(--brand-600); font-weight:600; }
.portal-already-customer { margin-top:20px; padding:16px 18px; background:rgba(59,91,255,.06); border:1px solid rgba(59,91,255,.16); border-radius:var(--r-md); text-align:center; }
.portal-already-customer h5 { font-family:var(--font-display); font-size:.87rem; font-weight:700; color:var(--ink-900); margin-bottom:6px; }
.portal-already-customer p { font-size:.8rem; color:var(--text-muted); line-height:1.6; }
.portal-already-customer a { color:var(--brand-600); font-weight:600; }
.portal-login-security { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:24px; font-size:.77rem; color:var(--n-400); }
.portal-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(59,91,255,.07); border:1px solid rgba(59,91,255,.16); border-radius:999px; padding:4px 10px; font-size:.73rem; font-weight:600; color:var(--brand-600); margin-bottom:18px; }
@media (max-width:900px) {
  .portal-main { grid-template-columns:1fr; min-height:auto; }
  .portal-features { padding:60px 32px 48px; }
  .portal-feature-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .portal-login-wrap { padding:56px 40px; }
}
@media (max-width:640px) {
  .portal-features { padding:44px 20px 36px; }
  .portal-feature-list { grid-template-columns:1fr; }
  .portal-login-wrap { padding:44px 20px 56px; }
  .portal-features__title { font-size:1.6rem; }
  .portal-login-box { max-width:100%; }
  .portal-feature-item { padding:16px; }
}

/* ============================================================
   ÇÖZÜM LANDING SAYFALARI (partner-*) — kapsam dışı, korunuyor
   ============================================================ */
.partner-landing { overflow: clip; }
.partner-hero { background: radial-gradient(circle at 82% 15%, rgba(91,118,255,.24), transparent 28%), linear-gradient(135deg,#080b2a 0%,#11194a 100%); color:#fff; padding:calc(var(--nav-h) + 76px) 0 88px; }
.partner-hero__grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:72px; align-items:center; }
.partner-breadcrumb { display:flex; align-items:center; gap:10px; font-size:.84rem; margin-bottom:32px; color:var(--on-dark-faint); flex-wrap:wrap; }
.partner-breadcrumb a { color:var(--on-dark-muted); }
.partner-kicker { color:var(--brand-300); font-size:.8rem; font-weight:700; letter-spacing:.1em; margin-bottom:18px; }
.partner-hero h1 { color:#fff; font-size:clamp(2.35rem,4.5vw,4.2rem); letter-spacing:-.04em; max-width:900px; margin-bottom:24px; }
.partner-hero__lead { color:var(--on-dark-soft); font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.8; max-width:780px; }
.partner-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.partner-hero__note { margin-top:22px; color:var(--on-dark-faint); font-size:.84rem; }
.partner-hero__panel { padding:30px; border:1px solid var(--on-dark-line); border-radius:var(--r-xl); background:rgba(198,205,236,.07); box-shadow:0 28px 70px rgba(0,0,0,.25); backdrop-filter:blur(14px); }
.partner-hero__panel>span { display:block; color:var(--brand-300); font-size:.73rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.partner-hero__panel ul { display:grid; gap:4px; }
.partner-hero__panel li { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--on-dark-line); font-weight:600; }
.partner-hero__panel li i { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(86,215,169,.15); color:#6fe2b7; font-style:normal; }
.partner-hero__panel>div { padding:20px; margin-top:22px; border-radius:var(--r-md); background:rgba(59,91,255,.2); }
.partner-hero__panel strong, .partner-hero__panel small { display:block; color:#fff; }
.partner-hero__panel small { opacity:.65; margin-top:5px; line-height:1.5; }
.partner-trust { border-bottom:1px solid var(--border); background:#fff; }
.partner-trust__grid { display:grid; grid-template-columns:repeat(4,1fr); }
.partner-trust__grid>div { padding:24px 28px; border-right:1px solid var(--border); }
.partner-trust__grid>div:last-child { border:0; }
.partner-trust strong, .partner-trust span { display:block; }
.partner-trust strong { font-family:var(--font-display); font-size:.94rem; color:var(--ink-900); }
.partner-trust span { font-size:.8rem; color:var(--text-muted); margin-top:2px; }
.partner-section__header { max-width:760px; margin:0 auto 48px; text-align:center; }
.partner-section__header h2, .partner-decision h2, .partner-faq-layout h2 { font-size:clamp(1.8rem,3vw,2.7rem); margin-bottom:14px; }
.partner-section__header>p:last-child, .partner-decision header>p:last-child, .partner-faq-layout header>p:last-child { color:var(--text-muted); }
.partner-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.partner-product-grid article { position:relative; min-height:230px; padding:30px; border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; box-shadow:var(--shadow-sm); transition:var(--transition); }
.partner-product-grid article:hover { transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--shadow-md); }
.partner-product-grid article>span { color:var(--brand-600); font-size:.76rem; font-weight:700; letter-spacing:.1em; }
.partner-product-grid h3 { font-size:1.2rem; margin:40px 0 12px; }
.partner-product-grid p { color:var(--text-muted); font-size:.93rem; line-height:1.7; }
.partner-decision { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:80px; align-items:start; }
.partner-decision header { position:sticky; top:calc(var(--nav-h) + 46px); }
.partner-decision__list { display:grid; gap:12px; }
.partner-decision__list article { display:flex; gap:20px; padding:24px; border-radius:var(--r-md); background:#fff; border:1px solid var(--border); }
.partner-decision__list i { flex:0 0 12px; width:12px; height:12px; margin-top:7px; border-radius:50%; background:var(--brand-500); box-shadow:0 0 0 6px rgba(59,91,255,.09); }
.partner-decision__list h3 { font-size:1.06rem; margin-bottom:7px; }
.partner-decision__list p { color:var(--text-muted); font-size:.91rem; }
.partner-process { display:grid; grid-template-columns:repeat(5,1fr); }
.partner-process li { position:relative; padding:0 18px; text-align:center; }
.partner-process li:not(:last-child)::after { content:""; position:absolute; top:22px; left:65%; width:70%; height:1px; background:linear-gradient(90deg,var(--brand-500),rgba(59,91,255,.15)); }
.partner-process span { position:relative; z-index:1; display:grid; place-items:center; width:46px; height:46px; margin:0 auto 16px; border-radius:var(--r-md); background:var(--ink-900); color:#fff; font-family:var(--font-display); font-weight:700; }
.partner-process strong { display:block; font-size:.9rem; }
.partner-faq-layout { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:72px; }
.partner-faq details { background:#fff; border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:10px; overflow:hidden; }
.partner-faq summary { display:flex; justify-content:space-between; gap:20px; padding:21px 24px; cursor:pointer; font-family:var(--font-display); font-weight:700; color:var(--ink-900); list-style:none; }
.partner-faq summary::-webkit-details-marker { display:none; }
.partner-faq summary span { color:var(--brand-600); font-size:1.25rem; transition:transform var(--dur) var(--ease-out); }
.partner-faq details[open] summary span { transform:rotate(45deg); }
.partner-faq details p { padding:0 24px 22px; color:var(--text-muted); line-height:1.75; }
.partner-related { padding:72px 0; background:#fff; }
.partner-related h2 { font-size:1.55rem; margin-bottom:24px; }
.partner-related .container>div { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.partner-related a { display:grid; gap:5px; padding:24px; border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; transition:var(--transition); }
.partner-related a:hover { border-color:var(--brand-500); box-shadow:var(--shadow-sm); }
.partner-related small { font-size:.73rem; letter-spacing:.08em; text-transform:uppercase; }
.partner-related strong { color:var(--ink-900); font-family:var(--font-display); }
.partner-related span { margin-top:12px; font-size:.82rem; }
.partner-cta { background:var(--ink-900); padding:64px 0; color:#fff; position:relative; overflow:hidden; isolation:isolate; }
.partner-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 90% at 12% 0%, rgba(59,91,255,.34), transparent 62%), radial-gradient(ellipse 60% 80% at 90% 100%, rgba(123,63,255,.3), transparent 60%); z-index:-1; }
.partner-cta .container { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.partner-cta p { font-size:.76rem; font-weight:700; letter-spacing:.1em; opacity:.75; }
.partner-cta h2 { color:#fff; font-size:clamp(1.6rem,3vw,2.5rem); margin:8px 0; }
.partner-cta span { color:var(--on-dark-soft); }
.partner-links-section { background:#fff; }
.partner-links-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.partner-links-grid a { display:flex; flex-direction:column; min-height:180px; padding:24px; border:1px solid var(--border); border-radius:var(--r-lg); background:linear-gradient(145deg,#fff,var(--surface-alt)); transition:var(--transition); }
.partner-links-grid a:hover { transform:translateY(-4px); border-color:var(--brand-500); box-shadow:var(--shadow-md); }
.partner-links-grid small { font-size:.7rem; letter-spacing:.08em; }
.partner-links-grid strong { margin-top:32px; color:var(--ink-900); font-family:var(--font-display); font-size:1.06rem; }
.partner-links-grid span { margin-top:auto; font-size:.8rem; }
.partner-standards .partner-section__header,
.partner-messages .partner-section__header,
.partner-architecture .partner-section__header { margin-bottom:36px; }
.partner-standards .partner-kicker,
.partner-messages .partner-kicker,
.partner-architecture .partner-kicker { margin-bottom:10px; }
.partner-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; box-shadow:var(--shadow-sm); }
.partner-table-wrap table { width:100%; min-width:720px; border-collapse:collapse; text-align:left; }
.partner-table-wrap th,
.partner-table-wrap td { padding:20px 22px; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.65; }
.partner-table-wrap thead th { background:var(--ink-900); color:#fff; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; }
.partner-table-wrap tbody th { width:22%; color:var(--ink-900); font-family:var(--font-display); font-size:.95rem; }
.partner-table-wrap tbody td { color:var(--text-muted); font-size:.9rem; }
.partner-table-wrap tbody tr:last-child>* { border-bottom:0; }
.partner-message-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.partner-message-grid article { padding:24px; border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; }
.partner-message-grid strong { display:block; color:var(--brand-600); font-family:var(--font-display); font-size:1rem; margin-bottom:12px; }
.partner-message-grid p { color:var(--text-muted); font-size:.88rem; line-height:1.7; }
.partner-architecture ol { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; counter-reset:edi-stage; }
.partner-architecture li { position:relative; padding:28px 22px; border:1px solid var(--border); border-right:0; background:#fff; counter-increment:edi-stage; }
.partner-architecture li:first-child { border-radius:var(--r-lg) 0 0 var(--r-lg); }
.partner-architecture li:last-child { border-right:1px solid var(--border); border-radius:0 var(--r-lg) var(--r-lg) 0; }
.partner-architecture li::before { content:"0" counter(edi-stage); display:block; margin-bottom:26px; color:var(--brand-600); font-size:.74rem; font-weight:700; letter-spacing:.1em; }
.partner-architecture strong { color:var(--ink-900); font-family:var(--font-display); }
.partner-architecture p { margin-top:9px; color:var(--text-muted); font-size:.86rem; line-height:1.65; }
@media (max-width:1024px) {
  .partner-hero__grid { grid-template-columns:1fr; gap:38px; }
  .partner-hero__panel { max-width:680px; }
  .partner-product-grid { grid-template-columns:repeat(2,1fr); }
  .partner-decision, .partner-faq-layout { grid-template-columns:1fr; gap:38px; }
  .partner-decision header { position:static; }
  .partner-process { grid-template-columns:repeat(3,1fr); gap:28px 0; }
  .partner-process li::after { display:none; }
  .partner-links-grid { grid-template-columns:repeat(3,1fr); }
  .partner-message-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .partner-architecture ol { grid-template-columns:1fr; gap:10px; }
  .partner-architecture li,
  .partner-architecture li:first-child,
  .partner-architecture li:last-child { border:1px solid var(--border); border-radius:var(--r-md); }
}
@media (max-width:768px) {
  .partner-hero { padding:calc(var(--nav-h) + 52px) 0 64px; }
  .partner-hero h1 { font-size:clamp(2rem,10vw,3rem); }
  .partner-trust__grid { grid-template-columns:repeat(2,1fr); }
  .partner-trust__grid>div:nth-child(2) { border-right:0; }
  .partner-product-grid { grid-template-columns:1fr; }
  .partner-product-grid article { min-height:0; }
  .partner-process { grid-template-columns:1fr; text-align:left; }
  .partner-process li { display:flex; align-items:center; gap:14px; text-align:left; padding:0; }
  .partner-process span { margin:0; flex:0 0 42px; }
  .partner-related .container>div, .partner-links-grid { grid-template-columns:1fr; }
  .partner-links-grid a { min-height:150px; }
  .partner-cta .container { align-items:flex-start; flex-direction:column; }
  .partner-message-grid { grid-template-columns:1fr; }
  .partner-table-wrap { margin-inline:-4px; }
  .partner-table-wrap th, .partner-table-wrap td { padding:16px; }
}
@media (max-width:480px) {
  .partner-hero__actions { display:grid; }
  .partner-hero__actions .btn { justify-content:center; }
  .partner-hero__panel { padding:22px; }
  .partner-trust__grid { grid-template-columns:1fr; }
  .partner-trust__grid>div { border-right:0; border-bottom:1px solid var(--border); padding:18px 4px; }
  .partner-product-grid article, .partner-decision__list article { padding:22px; }
  .partner-faq summary { padding:18px; }
  .partner-faq details p { padding:0 18px 18px; }
}

/* ============================================================
   Fotoğraf katmanları
   ------------------------------------------------------------
   Sitenin görsel kimliği çizim (SVG) tabanlı ve öyle kalıyor.
   Fotoğraflar o çizimlerin yerine geçmiyor; koyu bölümlerin
   arkasında DOKU olarak duruyor. Bu yüzden hepsinin üstünde
   lacivert bir karartma gradyanı var: metin kontrastı
   fotoğraftan değil, altındaki --ink-900 zeminden geliyor.
   Fotoğraf yüklenmese de bölüm bugünkü haliyle okunur kalır.

   Her kuralda background-image iki kez yazılı: webp'yi
   anlamayan tarayıcı ilk (jpg) bildirimde kalıyor.

   Fotoğrafçı listesi: assets/images/photos/CREDITS.md
   ============================================================ */

/* ── İç sayfa başlığı: fotoğraflı varyant ────────────────── */
/* ::before (z-index:-1) marka gradyanı; fotoğraf onun altına,
   bölümün kendi arkaplan renginin üstüne giriyor. */
.page-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.page-hero--hakkimizda::after {
  background-image:
    linear-gradient(100deg, var(--ink-900) 4%, rgba(11,13,46,.80) 46%, rgba(11,13,46,.52) 100%),
    url('/assets/images/photos/hero-hakkimizda.jpg');
  background-image:
    linear-gradient(100deg, var(--ink-900) 4%, rgba(11,13,46,.80) 46%, rgba(11,13,46,.52) 100%),
    image-set(url('/assets/images/photos/hero-hakkimizda.webp') type('image/webp'),
              url('/assets/images/photos/hero-hakkimizda.jpg')  type('image/jpeg'));
}

.page-hero--cozumler::after {
  background-image:
    linear-gradient(100deg, var(--ink-900) 4%, rgba(11,13,46,.74) 48%, rgba(11,13,46,.44) 100%),
    url('/assets/images/photos/hero-cozumler.jpg');
  background-image:
    linear-gradient(100deg, var(--ink-900) 4%, rgba(11,13,46,.74) 48%, rgba(11,13,46,.44) 100%),
    image-set(url('/assets/images/photos/hero-cozumler.webp') type('image/webp'),
              url('/assets/images/photos/hero-cozumler.jpg')  type('image/jpeg'));
}

.page-hero--iletisim::after {
  background-image:
    linear-gradient(100deg, var(--ink-900) 4%, rgba(11,13,46,.76) 48%, rgba(11,13,46,.46) 100%),
    url('/assets/images/photos/hero-iletisim.jpg');
  background-image:
    linear-gradient(100deg, var(--ink-900) 4%, rgba(11,13,46,.76) 48%, rgba(11,13,46,.46) 100%),
    image-set(url('/assets/images/photos/hero-iletisim.webp') type('image/webp'),
              url('/assets/images/photos/hero-iletisim.jpg')  type('image/jpeg'));
}

/* ── Ana sayfa hero: fotoğraf dokusu ─────────────────────── */
/* SVG şebeke çizimi görünür kalsın diye opaklık düşük; fotoğraf
   yalnızca derinlik veriyor. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .34;
  background-repeat: no-repeat;
  background-position: 68% 40%;
  background-size: cover;
  background-image:
    linear-gradient(96deg, var(--ink-900) 12%, rgba(11,13,46,.62) 52%, rgba(11,13,46,.22) 100%),
    url('/assets/images/photos/hero-fiber.jpg');
  background-image:
    linear-gradient(96deg, var(--ink-900) 12%, rgba(11,13,46,.62) 52%, rgba(11,13,46,.22) 100%),
    image-set(url('/assets/images/photos/hero-fiber.webp') type('image/webp'),
              url('/assets/images/photos/hero-fiber.jpg')  type('image/jpeg'));
}

/* ── CTA şeridi: ağ dokusu ───────────────────────────────── */
.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  background-repeat: no-repeat;
  background-position: 72% center;
  background-size: cover;
  background-image:
    linear-gradient(92deg, var(--ink-900) 20%, rgba(11,13,46,.72) 58%, rgba(11,13,46,.34) 100%),
    url('/assets/images/photos/cta-network.jpg');
  background-image:
    linear-gradient(92deg, var(--ink-900) 20%, rgba(11,13,46,.72) 58%, rgba(11,13,46,.34) 100%),
    image-set(url('/assets/images/photos/cta-network.webp') type('image/webp'),
              url('/assets/images/photos/cta-network.jpg')  type('image/jpeg'));
}

/* ── Değer kartları: fotoğraflı başlık ───────────────────── */
/* Kart artık kendi padding'ini taşımıyor; görsel kenara kadar
   uzansın diye boşluk __body'ye taşındı. */
.whyus-card { padding: 0; overflow: hidden; }
.whyus-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-850);
}
.whyus-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Üç fotoğraf üç ayrı ışıkta çekilmiş; hafif doygunluk düşüşü
     turuncu iş yeleği gibi palet dışı vurguları sakinleştiriyor. */
  filter: saturate(.82);
  transition: transform var(--dur-slow) var(--ease-out);
}
/* Fotoğraflar farklı ışıkta çekilmiş; ortak bir marka tonu
   olmadan üç kart üç ayrı yerden toplanmış gibi duruyordu. */
.whyus-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,13,46,.10) 0%, rgba(11,13,46,.58) 100%),
    linear-gradient(135deg, rgba(43,73,245,.30) 0%, rgba(123,63,255,.24) 100%);
}
.whyus-card:hover .whyus-card__media img { transform: scale(1.045); }
.whyus-card__body { padding: 26px 30px 30px; }

@media (prefers-reduced-motion: reduce) {
  .whyus-card__media img { transition: none; }
  .whyus-card:hover .whyus-card__media img { transform: none; }
}

/* ── Fotoğraflı anlatım şeridi (Hakkımızda) ──────────────── */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.showcase__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.showcase__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 5;
  object-fit: cover;
}
/* Fotoğrafın üstünde ince bir marka tonu — sayfanın geri
   kalanıyla aynı sıcaklıkta dursun diye. */
.showcase__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(43,73,245,.16) 0%, rgba(123,63,255,.10) 100%);
  pointer-events: none;
}
.showcase__title { font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.4rem); margin-bottom: 18px; }
.showcase__text { font-size: 1.02rem; color: var(--text-muted); line-height: 1.78; margin-bottom: 16px; }
.showcase__list { display: grid; gap: 14px; margin-top: 26px; }
.showcase__item { display: flex; gap: 13px; align-items: flex-start; }
.showcase__item svg {
  flex: none;
  width: 21px; height: 21px;
  margin-top: 2px;
  color: var(--brand-600);
}
.showcase__item p { font-size: .95rem; color: var(--text); line-height: 1.65; }
.showcase__item strong { color: var(--text-strong); font-weight: 650; }

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: 34px; }
}

/* ── "Marka + Türkiye" sayfaları ─────────────────────────────────────
   Görsel dil iş ortağı sayfalarıyla ORTAK (partner-* sınıfları yeniden
   kullanılıyor); ayrışan yalnızca bu sayfalara özgü giriş metni ve
   kapsama bloğu. Kopya riski içerikte olur, CSS'te değil. */
.brand-intro h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  max-width: 22ch;
  margin-bottom: 22px;
}
.brand-intro p {
  max-width: 74ch;
  margin: 0 0 16px;
  font-size: 1.03rem;
  line-height: 1.78;
  color: var(--text-muted);
}
.brand-intro p:last-child { margin-bottom: 0; }

.coverage-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: 22px;
  margin-top: 8px;
}
.coverage-group {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
/* Merkez ofisler görsel olarak öne çıkar: kapsama listesi içinde hangi
   illerin gerçekten ofis olduğu karışmasın. */
.coverage-group--primary {
  border-color: var(--brand-400);
  background: linear-gradient(180deg, rgba(59, 91, 255, .05), transparent);
}
.coverage-group h3 {
  margin: 0 0 14px;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.coverage-group ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.coverage-group li {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface-sunken);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-strong);
}
.coverage-group--primary li {
  background: var(--brand-500);
  color: #fff;
}
.coverage-group p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.coverage-note {
  margin: 18px 0 0;
  font-size: .88rem;
  color: var(--text-muted);
}

.brand-sibling {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
}
.brand-sibling h2 { margin: 6px 0 8px; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
.brand-sibling p { margin: 0; color: var(--text-muted); line-height: 1.65; }

@media (max-width: 900px) {
  .coverage-grid { grid-template-columns: 1fr; }
  .brand-sibling { grid-template-columns: 1fr; }
}

/* ── Sunum / doküman kartı ─────────────────────────────────
   İki sayfada birden var (hakkımızda ve çözümler), o yüzden
   sayfaya özel bir dosyada değil burada. Markup:
   includes/dokuman-karti.php */
.doc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.doc-card__title {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text-strong);
}
.doc-card__text { color: var(--muted); font-size: 1rem; line-height: 1.8; }
.doc-card__list {
  display: grid;
  /* İKİ SÜTUN, `auto-fit` değil: kart gövdesi ~830px ve auto-fit orada üç
     sütun açıyordu; maddeler iki satıra kırılıp liste okunmaz oluyordu. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  margin-top: 22px;
}
.doc-card__list li {
  position: relative;
  padding-left: 18px;
  color: var(--text);
  font-size: .93rem;
  line-height: 1.6;
}
.doc-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
}

.doc-card__side {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  text-align: center;
}
.doc-card__thumb { display: grid; justify-items: center; gap: 8px; color: var(--brand-600); }
.doc-card__thumb svg { width: 46px; height: auto; }
.doc-card__thumb span {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--brand-600);
}
.doc-card__meta { color: var(--muted); font-size: .84rem; }
.doc-card__btn { width: 100%; justify-content: center; }
.doc-card__download {
  color: var(--brand-600);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.doc-card__note { color: var(--muted); font-size: .78rem; }

@media (max-width: 640px) {
  .doc-card__list { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .doc-card { grid-template-columns: 1fr; }
  /* Dar ekranda indirme kutusu metnin ÜSTÜNE değil altına: önce ne
     olduğu okunsun, sonra karar verilsin. `order` ile taşımak yerine
     doğal sıra korunuyor - kaynak sırası zaten doğru. */
}

/* ══════════════════════════════════════════════════════════
   KOŞAN PARS

   Altı karelik koşu döngüsü tek şeritte (`pars-kosu.webp`,
   6 x 400px). Kareler kaynak dosyalarda aynı tuvalde ve aynı
   yerdeydi; hepsi AYNI birleşik kutuya kırpıldı - kare başına
   ayrı kırpma yapılsaydı hayvan her karede zıplardı, koşuyu
   okutan şey tam da bu göreli hareket.

   ÜÇ KATMAN, İKİ ANİMASYON — ve ikisi de `transform`:

     .pars-kosu        ekranı boydan boya kaplayan kutu (sabit)
     .pars-kosu > i    ekranı geçen taşıyıcı
     .pars-kosu span   altı kare genişliğinde şerit, adım adım kayar

   İki ayrı katman şart: `transform` tek bir öğede iki animasyona
   bölünemiyor - biri diğerini eziyor. `left` ile geçmek de olurdu
   ama o her karede yerleşim hesabı demek; `transform` bileşik
   katmanda kalıyor, ana iş parçacığına dokunmuyor.

   Renk: kareler ÜRETİM AŞAMASINDA duotone'a çevrildi (#2a3a86 →
   #b9c6ff). Çalışma anında `filter` ile renk değiştirmek her
   karede filtre maliyeti demekti; dosya zaten temanın renginde.
   ══════════════════════════════════════════════════════════ */
/*
 * Konum çıpası. `.hero__proof` bunu üstlenemiyor: sahneye giriş sistemi
 * her `[data-reveal]` ögesine `clip-path` veriyor ve o, ögenin üstünde
 * duran her şeyi kırpıyor (parsı bir piksellik çizgiye indirmişti).
 */
.hero__proof-wrap { position: relative; }

.pars-kosu {
  position: absolute;
  /* Üst çizginin üstünde: ayakları çizgiye basıyor. */
  bottom: 100%;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: var(--pars-y, 98px);
  pointer-events: none;
  overflow: hidden;
}
.pars-kosu > i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--pars-x, 240px);
  height: var(--pars-y, 98px);
  /* Pencere: şeridin yalnız bir karesi görünüyor. */
  overflow: hidden;
  /* Başlangıçta ekran dışında: animasyon çalışmasa da görünmüyor. */
  transform: translate3d(-320px, 0, 0);
  opacity: 0;
}
.pars-kosu span {
  display: block;
  /* Şeridin TAMAMI; kayan da bu. Öğeyi değil arka planı kaydırmak
     (`background-position`) her adımda yeniden boyama demekti. */
  width: calc(var(--pars-x, 240px) * 6);
  height: var(--pars-y, 98px);
  background-image: url("/assets/images/decor/pars-kosu.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 12px rgba(107, 132, 255, .35));
}

/*
 * 1024 ALTINDA YOK.
 *
 * Dar ekranda hero zaten sıkışık (görsel katman da orada gizleniyor)
 * ve 220px'lik bir hayvanın koşacağı yer kalmıyor.
 */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  /*
   * GEÇİŞ 22 SANİYE ama koşunun kendisi ~3 saniye sürüyor.
   *
   * Sürekli koşan bir hayvan hero'yu okunmaz yapıyordu: göz metne
   * değil ona gidiyor. Şimdi ekranı bir kez geçiyor, sonra uzun süre
   * yok. Beklenen bir şey olmaktan çıkıp fark edilen bir şey oluyor.
   */
  .pars-kosu > i { animation: parsGec 22s linear infinite; }
  /*
   * ADIM SÜRESİ YER HIZIYLA UYUMLU.
   *
   * Bir koşu döngüsünde hayvan yaklaşık iki boy yol alır: 2 x 240px =
   * 480px. Döngü .62s sürüyorsa yerdeki hız 775 px/s olmalı. Geçiş
   * keyframe'i de buna göre ayarlandı (%12 x 22s = 2,6s'de ~1800px,
   * yani ~690 px/s). Aradaki fark %10'un altında; üstünde olduğunda
   * ayaklar yerde kayıyormuş gibi görünüyor.
   */
  .pars-kosu span { animation: parsAdim .62s steps(6) infinite; }
}

@keyframes parsAdim {
  /* Şerit bir tam tur kayıyor; `steps(6)` altı karede tamamlıyor. */
  to { transform: translate3d(calc(var(--pars-x, 240px) * -6), 0, 0); }
}

@keyframes parsGec {
  0%   { transform: translate3d(-320px, 0, 0); opacity: 0; }
  1.5% { opacity: .46; }
  10%  { opacity: .46; }
  12%  { transform: translate3d(calc(100vw + 60px), 0, 0); opacity: 0; }
  100% { transform: translate3d(calc(100vw + 60px), 0, 0); opacity: 0; }
}

@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  .pars-kosu { display: none; }
}

/* ══════════════════════════════════════════════════════════
   OTURAN PARS — footer silueti
   ══════════════════════════════════════════════════════════ */
.footer {
  position: relative;
  /* Siluet sağ kenardan taşabilir; footer kırpıyor. */
  overflow: hidden;
  /*
   * `isolation` ŞART. Olmadan `z-index: 0` verilen siluet, konumsuz
   * ama akış içindeki footer içeriğinin ALTINA değil ÜSTÜNE düşüyor
   * (konumlandırılmış öge her zaman akış içeriğinden sonra boyanır).
   * İçeriğe de z-index verilerek sıra netleştiriliyor.
   */
  isolation: isolate;
}
.footer > .container { position: relative; z-index: 1; }

.footer__pars {
  position: absolute;
  /*
   * KENARA YAPIŞIK DEĞİL. İlk yerleşimde `right: 0` / `bottom: 66px`
   * idi: hayvan sağ kenara dayanıp aşağıda kalıyor, footer'ın dışına
   * itilmiş gibi duruyordu. Şimdi sağdan bir tutam içeride ve daha
   * yukarıda - ızgaranın ortasıyla aynı hizada oturuyor.
   */
  right: clamp(16px, 5vw, 78px);
  bottom: 130px;
  z-index: 0;
  width: auto;
  height: clamp(300px, 31vw, 440px);
  /* Çizgi işi: ince konturlardan oluşuyor, %16'da neredeyse hiç
     görünmüyordu. Dolu bir siluette o değer doğruydu, burada değil. */
  opacity: .26;
  pointer-events: none;
  user-select: none;
}

/*
 * 1200 ALTINDA YOK.
 *
 * Orada footer ızgarası daralıyor ve siluet iletişim sütununun altına
 * giriyor - okunurluğu düşük opaklık bile kurtarmıyor. `display: none`
 * olduğu için dosya da indirilmiyor.
 */
@media (max-width: 1200px) {
  .footer__pars { display: none; }
}

/* ══════════════════════════════════════════════════════════
   SAYFA GEÇİŞİ — yükleniyor göstergesi

   Bağlantıya tıklandığında ekranın ortasında beliren halka.
   Sitede zaten `@view-transition` var (eski sayfa soluyor, yenisi
   giriyor); bu gösterge onun ARASINDAKİ boşluğu dolduruyor - yeni
   sayfa gelene kadar geçen sürede ekranda bir şey olduğu görünsün.

   Görünürlük `visibility` ile de kapatılıyor, yalnız `opacity` ile
   değil: opaklığı sıfır bir tam ekran katmanı hâlâ tıklamaları
   yutuyor. `pointer-events: none` zaten var ama iki kapı bir kapıdan
   iyi - bu katman sayfanın tamamını kaplıyor.
   ══════════════════════════════════════════════════════════ */
.page-loader {
  position: fixed;
  inset: 0;
  /* Navigasyonun (1000) altında: menü şeridi görünür kalsın. */
  z-index: 950;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 31, .55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--ease-out), visibility .2s;
}
.page-loader.is-acik { opacity: 1; visibility: visible; }

.page-loader span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* 2px'lik halka karartılmış zeminde zor seçiliyordu; tek geri
     bildirim bu olduğu için biraz daha belirgin. */
  border: 3px solid rgba(157, 174, 255, .26);
  border-top-color: var(--brand-400, #6B84FF);
  /*
   * Animasyon HER ZAMAN tanımlı, sınıfla değil. Sınıfla verilseydi
   * halka ilk karede duruyor, sonra dönmeye başlıyordu; küçük ama
   * fark ediliyor.
   */
  animation: yukleniyorDon .72s linear infinite;
}
@keyframes yukleniyorDon { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  /* Dönme kalıyor ama yavaş: bu bir süs değil, "bekleyin" bilgisi.
     Tamamen durdurulursa gösterge hiçbir şey söylemiyor. */
  .page-loader span { animation-duration: 2.4s; }
  .page-loader { transition-duration: .01ms; }
}