/* ============================================================
   North Steel — brand.css (v4)
   Çift tema (lacivert dark / beyaz light), semantik CSS değişkenleri.
   Tasarım kaynağı: design-system/MASTER.md v4
   ============================================================ */

/* ---------- Semantik renk değişkenleri (DARK — varsayılan) ---------- */
:root {
  --c-bg: #020E1C;
  --c-surface: #081A2E;
  --c-surface-raised: #0E2440;
  --c-border: #1E3852;
  --c-line: #2E4A64;
  --c-text: #F5F5F7;
  --c-text-secondary: #A6B6C6;
  --c-text-muted: #62788F;
  --c-accent: #FF6600;
  --c-accent-text: #FF7A26;
  --c-accent-hover: #FF8A40;
  --c-on-accent: #020E1C;
  --c-grid: rgba(79, 116, 146, .14);
  --c-success: #3E9D6B;
  --c-error: #E5533A;
  --c-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  --c-shadow-soft: 0 6px 20px rgba(0, 0, 0, .25);
  --radius: 8px;
  --radius-card: 14px;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

:root.theme-light {
  --c-bg: #F5F5F7;
  --c-surface: #E9EAEE;
  --c-surface-raised: #FFFFFF;
  --c-border: #D6DAE1;
  --c-line: #C4CAD3;
  --c-text: #020E1C;
  --c-text-secondary: #1F3A52;
  --c-text-muted: #4F7492;
  --c-accent: #FF6600;
  --c-accent-text: #C24E00;
  --c-accent-hover: #D95800;
  --c-on-accent: #020E1C;
  --c-grid: rgba(2, 14, 28, .06);
  --c-shadow: 0 12px 32px rgba(2, 14, 28, .10);
  --c-shadow-soft: 0 6px 20px rgba(2, 14, 28, .08);
}

/* ---------- Temel ----------
   Not: scroll-behavior burada AYARLANMAZ — Lenis JS smooth scroll yönetir.
   Native smooth ile JS smooth çakışır, scroll tutukluk yapar. ---------- */
html { scroll-behavior: auto; }

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

::selection { background: var(--c-accent); color: var(--c-on-accent); }

h1, h2, h3, h4, h5, .font-display { font-family: 'Poppins', sans-serif; }

a, button, input, textarea, select { transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease); }

/* Görünür klavye odak halkası */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Eyebrow / kicker ---------- */
.eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent-text);
  display: inline-flex;
  align-items: center;
  gap: .625rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--c-accent);
  display: inline-block;
}

/* ---------- Sıcak placeholder (ev ikonlu) ---------- */
.image-slot {
  background-color: var(--c-surface-raised);
  background-image:
    radial-gradient(var(--c-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted);
  position: relative;
  overflow: hidden;
}
.image-slot::after {
  content: attr(data-label);
  position: absolute;
  bottom: .65rem;
  right: .8rem;
  font-family: 'Poppins', sans-serif;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  opacity: .7;
}

/* ---------- Görsel zoom (kart hover'da) ---------- */
.media-zoom { overflow: hidden; }
.media-zoom > img, .media-zoom > .image-slot, .media-zoom > .bg-cover {
  transition: transform .6s var(--ease);
  will-change: transform;
}
.group:hover .media-zoom > img,
.group:hover .media-zoom > .image-slot,
.group:hover .media-zoom > .bg-cover { transform: scale(1.05); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.reveal.reveal-left  { transform: translateX(-24px); }
.reveal.reveal-right { transform: translateX(24px); }
.reveal.reveal-scale { transform: scale(.97); }
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; position: relative; }
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--c-bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--c-bg), transparent); }
.marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Referanslar — editorial frame + caption ---------- */
/* Görsel/video çerçeve: relative + overflow-hidden, çocuk media tam doldurur.
   image-orientation: from-image — EXIF rotation otomatik uygulanır (modern tarayıcılar default'ta
   böyle yapsa da kuralı açıkça yazarak portrait telefon çekimlerini düz görünür kılıyoruz). */
.ref-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-soft);
  background: var(--c-surface-raised);
}
.ref-frame > img,
.ref-frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-orientation: from-image;
  transition: transform .6s var(--ease);
  will-change: transform;
}
.ref-frame:hover > img,
.ref-frame:hover > video { transform: scale(1.04); }

.ref-caption {
  margin-top: .65rem;
  font-family: 'Poppins', sans-serif;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
/* Tıklanabilir frame: cursor + a11y odak halkası */
.ref-frame[data-lightbox] { cursor: zoom-in; }
.ref-frame[data-lightbox]:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ---------- Referanslar — lightbox (slayt) ---------- */
.ref-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  background: rgba(2, 14, 28, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.ref-lightbox.is-open {
  display: flex;
  opacity: 1;
  align-items: center;
  justify-content: center;
}
.ref-lightbox__stage {
  position: relative;
  width: min(92vw, 1400px);
  height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.ref-lightbox__media-wrap {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.ref-lightbox__media-wrap img,
.ref-lightbox__media-wrap video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  image-orientation: from-image;
}
.ref-lightbox__caption {
  font-family: 'Poppins', sans-serif;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
  text-align: center;
}
.ref-lightbox__counter {
  margin-left: .85rem;
  color: var(--c-text-muted);
  letter-spacing: .1em;
}

/* Lightbox kontrolleri (X, ←, →) */
.ref-lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: color-mix(in srgb, var(--c-surface) 70%, transparent);
  color: var(--c-text);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.ref-lightbox__btn:hover {
  background: var(--c-surface-raised);
  border-color: var(--c-accent);
  color: var(--c-accent-text);
}
.ref-lightbox__btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
.ref-lightbox__btn--close { top: -16px; right: -16px; }
.ref-lightbox__btn--prev  { left: -64px; top: 50%; transform: translateY(-50%); }
.ref-lightbox__btn--next  { right: -64px; top: 50%; transform: translateY(-50%); }

/* Mobilde butonlar kenara dayanır */
@media (max-width: 900px) {
  .ref-lightbox__btn--prev { left: 8px; }
  .ref-lightbox__btn--next { right: 8px; }
  .ref-lightbox__btn--close { top: 8px; right: 8px; }
}

/* Açıkken arka plan scroll'unu engelle */
body.lightbox-open { overflow: hidden; }

/* ---------- Foto/gradient zemin üstündeki metinler için okunabilirlik shadow'u ----------
   Dark modda koyu shadow (açık metni koyu hâleyle ayırır),
   light modda açık shadow (koyu metni açık hâleyle ayırır). Tema-duyarlı. */
.text-on-image {
  text-shadow:
    0 2px 12px rgba(0, 0, 0, .55),
    0 1px 3px rgba(0, 0, 0, .4);
}
:root.theme-light .text-on-image {
  text-shadow: 0 1px 4px rgba(255, 255, 255, .45);
}

/* ---------- Logo (amblem + yazı, PNG → CSS mask, tema-duyarlı renk) ---------- */
/* Tight-cropped PNG'ler — Amblem: 2633×1839 (~1.43:1) · Yazı: 3197×558 (~5.73:1).
   Her ikisi 42px yüksekliğinde sabit. */
.ns-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 0;
}
.ns-logo__mark,
.ns-logo__word {
  display: inline-block;
  height: 42px;
  vertical-align: middle;
  background-color: var(--c-text);
  transition: background-color .25s var(--ease);
}
.ns-logo__mark {
  width: 60px;   /* 42 × 1.43 */
  -webkit-mask: url('/images/NorthSteel-Amblem.png') no-repeat center / contain;
          mask: url('/images/NorthSteel-Amblem.png') no-repeat center / contain;
}
.ns-logo__word {
  display: inline-block;
  width: 241px;  /* 42 × 5.73 */
  -webkit-mask: url('/images/NorthSteel-Yazi-Tek.png') no-repeat center / contain;
          mask: url('/images/NorthSteel-Yazi-Tek.png') no-repeat center / contain;
}
/* Mobil (< 640px): logo + yazı, hamburger ile çakışmaması için küçültülmüş ölçüler */
@media (max-width: 639.98px) {
  .ns-logo { gap: 10px; }
  .ns-logo__mark, .ns-logo__word { height: 34px; }
  .ns-logo__mark { width: 49px; }   /* 34 × 1.43 */
  .ns-logo__word { width: 195px; }  /* 34 × 5.73 */
}
/* Drawer header'ında kompakt — sadece amblem (yer aç, butonlardan ayrı dursun) */
.ns-logo-compact .ns-logo__word { display: none; }

/* CMS logo: cross-origin mask uygulanamadığı için <img> + tema filtresi.
   Beyaz logo dark temada olduğu gibi kalır; light temada koyu (brand laciverti ~siyah) olur. */
.ns-logo__img { display: inline-block; height: 42px; vertical-align: middle; object-fit: contain; }
.ns-logo__img--mark { width: 60px; }
.ns-logo__img--word { width: 241px; }
:root.theme-light .ns-logo__img { filter: brightness(0); }
@media (max-width: 639.98px) {
  .ns-logo__img { height: 34px; }
  .ns-logo__img--mark { width: 49px; }
  .ns-logo__img--word { width: 195px; }
}
.ns-logo-compact .ns-logo__img--word { display: none; }

/* ---------- Navbar ---------- */
/* Default: her zaman blur + bg (hero görselleri üzerinde de okunaklı kalsın diye) */
.nav-shell {
  background-color: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-shell.is-scrolled {
  background-color: color-mix(in srgb, var(--c-surface) 95%, transparent);
  box-shadow: var(--c-shadow-soft);
}

/* ---------- Navbar dropdown (alt menü) ---------- */
.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
  pointer-events: none;
  z-index: 50;
}
.nav-has-children:hover > .nav-dropdown,
.nav-has-children:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-chevron {
  transition: transform .2s var(--ease);
  opacity: .7;
}
.nav-has-children:hover .nav-chevron,
.nav-has-children:focus-within .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---------- Mobil drawer submenu accordion ---------- */
.drawer-submenu[hidden] { display: none; }
[data-drawer-accordion][aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- Mobil drawer ---------- */
.drawer {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.drawer[hidden] { display: none; }
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel { transform: translateY(-8px); transition: transform .35s var(--ease); }
.drawer.is-open .drawer__panel { transform: translateY(0); }

/* ---------- Kart yumuşak gölge ---------- */
.card-shadow { box-shadow: var(--c-shadow-soft); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.card-shadow:hover { box-shadow: var(--c-shadow); }

/* ---------- Count-up sayısal ---------- */
.stat-value { font-variant-numeric: tabular-nums; }

/* ---------- Tema toggle ikon swap ---------- */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root.theme-light .theme-toggle .icon-sun { display: block; }
:root.theme-light .theme-toggle .icon-moon { display: none; }

/* ============================================================
   ANIMATIONS (Pass A/B/C) — GSAP + Lenis ile etkileşimli
   ============================================================ */

/* ---------- Scroll progress bar (üst kenar) ---------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  pointer-events: none; background: transparent;
}
.scroll-progress__bar {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover));
  transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 12px color-mix(in srgb, var(--c-accent) 60%, transparent);
}

/* ---------- Kinetic text (hero word reveal) ---------- */
.kinetic-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.kinetic-word__inner { display: inline-block; will-change: transform, opacity; }

/* ---------- Sticky categories pin ---------- */
[data-sticky-card] { will-change: opacity, transform; }

/* ---------- Process timeline scroll-driven progress ---------- */
.process-timeline__progress {
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--c-accent);
  transform-origin: top center;
  transform: scaleY(0);
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 640px) {
  .process-timeline__progress { left: 23px; }
}

/* ---------- Magnetic button (smooth transition geri dönüş) ---------- */
[data-magnetic] { transition: transform .35s var(--ease); will-change: transform; }

/* ---------- 3D tilt ---------- */
[data-tilt] { transition: transform .25s var(--ease); will-change: transform; }

/* ---------- Image compare slider ---------- */
.image-compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-soft);
  user-select: none;
  touch-action: pan-y;
  --handle-size: 44px;
}
.image-compare .ic-bottom,
.image-compare .ic-top {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.image-compare .ic-top {
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.image-compare .ic-handle {
  position: absolute; top: 50%; left: 50%;
  width: var(--handle-size); height: var(--handle-size);
  margin-top: calc(var(--handle-size) / -2);
  margin-left: calc(var(--handle-size) / -2);
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  z-index: 3;
  transition: transform .2s var(--ease);
}
.image-compare .ic-handle::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 2px; height: 200vh;
  background: var(--c-accent);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  opacity: .9;
}
.image-compare.ic-active .ic-handle,
.image-compare:hover .ic-handle { transform: scale(1.08); }
.image-compare .ic-label {
  position: absolute; top: 1rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-bg) 80%, transparent);
  backdrop-filter: blur(6px);
  font: 600 .7rem/1 'Poppins', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text);
  z-index: 2;
}
.image-compare .ic-label--left { left: 1rem; }
.image-compare .ic-label--right { right: 1rem; color: var(--c-accent-on); background: var(--c-accent); }

/* ---------- Marquee photo strip ---------- */
.photo-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.photo-marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: photoMarquee 40s linear infinite;
}
.photo-marquee:hover .photo-marquee__track { animation-play-state: paused; }
.photo-marquee__item {
  flex: 0 0 auto;
  width: 280px; height: 200px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.photo-marquee__item img {
  width: 100%; height: 100%; object-fit: cover;
  image-orientation: from-image;
}
@keyframes photoMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Bento hover (Hizmetler service kartları) ---------- */
[data-bento] { transition: opacity .35s var(--ease), transform .35s var(--ease); }
[data-bento-group]:hover [data-bento]:not(:hover) { opacity: .5; transform: scale(.985); }

/* ---------- Floating CTA (sticky bottom-right) ---------- */
.floating-cta {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1.15rem;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font: 600 .875rem/1 'Poppins', sans-serif;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}
.floating-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.floating-cta:hover {
  background: var(--c-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .3);
}
.floating-cta__label { white-space: nowrap; }
@media (max-width: 480px) {
  .floating-cta { padding: .85rem; }
  .floating-cta__label { display: none; }
}

/* ---------- View Transitions (page swap) ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-fade-out .25s ease-out forwards;
  }
  ::view-transition-new(root) {
    animation: vt-fade-in .35s ease-out forwards;
  }
}
@keyframes vt-fade-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee__track, .photo-marquee__track { animation: none !important; }
  .media-zoom > *, .card-shadow { transition: none !important; }
  .scroll-progress { display: none; }
  .floating-cta { transition: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Print: reveal'ları görünür kıl (PDF / yazıcı) ---------- */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .nav-shell { position: static !important; }
}