:root {
  /* Bina videosunun gece tonları: kömür siyahı cephe + sıcak amber ışıklar */
  --bg: #0c0d10;
  --text: #f5f2ed;
  --text-secondary: rgba(245, 242, 237, 0.72);
  --accent: #f2aa52;
  --accent-rgb: 242, 170, 82;
  --glass: rgba(18, 19, 23, 0.55);
  --glass-border: rgba(255, 255, 255, 0.1);
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Sayfanın açık zemini: kabin videosunun mavi-gri tonlarından türetildi */
  --page: #eef1f5;
  --ink: #1b1f27;
  --ink-soft: #4a5161;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; }

/* Büyük ekranlar (2K, 4K): tüm ölçüler rem cinsinden olduğu için, 1920px'te görünen
   düzen ekran genişliğiyle orantılı büyür. 1920px ve altında hiçbir şey değişmez. */
@media (min-width: 1921px) {
  html { font-size: calc(100vw / 120); } /* 1920px'te 16px, 2560px'te ~21px */
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--page);
  /* Çok hafif ışık lekeleri: sağ üstte bina ışıklarının amberi, sol altta videonun mavisi */
  background-image:
    radial-gradient(68.75rem 43.75rem at 85% 10%, rgba(var(--accent-rgb), 0.10), transparent 70%),
    radial-gradient(62.5rem 50rem at 5% 90%, rgba(120, 140, 185, 0.16), transparent 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Scroll animasyonu: ortak yapı (bina + kabin) ---------- */

.seq { position: relative; }

.seq-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* mobilde adres çubuğu açılıp kapanırken zıplamasın */
  overflow: hidden;
}

.seq-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* JS scroll'a göre açar; ilk boyamada yanıp sönmesin */
.seq-fade,
.seq-slide { opacity: 0; will-change: opacity, transform; }

/* ---------- Açılış ekranı (loader) ----------
   Koyu, sinematik zemin (arkasından koyu giriş animasyonu açılır). Ortada hafifçe
   "nefes alan" logo + kırmızı ışıltı, marka yazısı, slogan (İşin “fark”ı burada.), ince yükleme çizgisi ve
   yüzde. Kapanırken logo hafifçe büyüyüp kaybolur. js/main.js #loader'a .is-hidden
   ekler ve #loaderBar genişliğini ayarlar; yüzdeyi js/content.js §5 günceller. */

#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(225, 27, 46, 0.16), rgba(225, 27, 46, 0) 70%),
    radial-gradient(ellipse at 50% 40%, #1d2028 0%, #111318 55%, #0b0c10 100%);
  color: #fff;
  transition: opacity 0.6s ease;
}
/* İnce doku: koyu geçişlerde bazı tarayıcı/ekranlarda (ör. Edge) oluşan halka halka
   bantlanmayı kırar → her yerde aynı yumuşak görünüm */
#loader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
}

#loader.is-hidden { opacity: 0; pointer-events: none; }

.loader-content {
  position: relative;   /* doku (::before) yalnızca zeminde kalsın */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
#loader.is-hidden .loader-content { transform: scale(1.06); opacity: 0; }

.loader-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 8.5rem;
  height: 8.5rem;
  margin-bottom: 1.4rem;
  animation: loader-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.loader-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  /* blur filtresi yerine kademeli geçiş: tüm tarayıcılarda aynı yumuşaklık */
  background: radial-gradient(circle,
    rgba(225, 27, 46, 0.42) 0%, rgba(225, 27, 46, 0.3) 22%, rgba(225, 27, 46, 0.14) 42%,
    rgba(225, 27, 46, 0.04) 58%, rgba(225, 27, 46, 0) 70%);
  animation: loader-glow 2.4s ease-in-out infinite;
}
.loader-mark {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(225, 27, 46, 0.35));
  animation: loader-breathe 2.4s ease-in-out infinite;
}

.loader-wordmark {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  animation: loader-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}
.loader-wordmark strong { font-weight: 700; }

.loader-tagline {
  margin: 0.45rem 0 1.6rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  animation: loader-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.loader-fark { color: #ff6b78; font-weight: 600; }

.loader-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: loader-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
}
.loader-bar-track {
  width: 11rem;
  height: 0.1875rem;
  border-radius: 0.1875rem;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.loader-bar-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e11b2e, #ff6b78);
  box-shadow: 0 0 12px rgba(225, 27, 46, 0.7);
  /* geçiş yok: js/main.js her karede düzgünce günceller */
}
.loader-percent {
  min-width: 2.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
}

@keyframes loader-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes loader-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes loader-glow { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
  .loader-emblem, .loader-wordmark, .loader-tagline, .loader-progress,
  .loader-glow, .loader-mark { animation: none; }
}

/* ---------- Scroll ilerleme çubuğu ---------- */

#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0.1875rem;
  z-index: 10000;
  background: linear-gradient(90deg, var(--accent), #ffd59a);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- Ortak logo ---------- */

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6875rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.brand-name strong { font-weight: 700; }

/* ---------- Butonlar ---------- */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-primary {
  background: var(--accent);
  color: #1a1206;
  box-shadow: 0 0 1.5rem rgba(var(--accent-rgb), 0.35);
}

.btn-primary:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0 2.125rem rgba(var(--accent-rgb), 0.55);
}

.btn-secondary {
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
}

.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.1875rem;
}

/* ---------- Sonraki içerik (yer tutucu) ---------- */

.after-hero {
  min-height: 60vh;
  padding: 20vh 1.5rem;
  text-align: center;
  color: var(--ink-soft);
}