/* ==========================================================================
   Eyber İnşaat — tema
   Tüm ortak değerler burada. Sayfa değer yazmaz, bu değişkenleri kullanır.
   Kurallar: CLAUDE.md
   ========================================================================== */
:root {
  /* Renk — antrasit İnci Prime cephesinden, turuncu ve altın logodan */
  --c-antrasit: #242b2f;
  --c-antrasit-2: #2e373c;
  --c-beton: #f4f5f5;
  --c-beton-2: #e8eaea;
  --c-beyaz: #ffffff;
  --c-metin: #16191b;
  --c-metin-2: #5f666b;
  --c-ters: #ffffff;
  --c-ters-2: rgba(255, 255, 255, 0.74);
  --c-ters-3: rgba(255, 255, 255, 0.56);
  --c-gece: #111416; /* koyu bölümler ve footer */
  --c-turuncu: #e35a24;
  --c-turuncu-koyu: #c24816; /* beyaz üstünde metin ve buton zemini */
  --c-altin: #d1a615;
  --c-cizgi: rgba(22, 25, 27, 0.1);
  --c-cizgi-guclu: rgba(22, 25, 27, 0.18);
  --c-cizgi-ters: rgba(255, 255, 255, 0.16);

  /* Yazı — Geist her yerde; Archivo yalnızca hero başlığında (dar, ince) */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo", "Geist", system-ui, sans-serif;

  /* Boşluk — 4 px taban */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Izgara (görünmez; çizgileri yalnızca hero'da) */
  --page-max: 90rem;
  --gutter: 3rem;
  --col-pad: var(--s-6);

  /* Ekran: her bölüm tek ekrana sığar */
  --screen-top: calc(var(--h-header) + var(--s-6));
  --screen-bottom: var(--s-7);

  /* Köşe — hiyerarşiye göre */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;

  /* Yükseklik (derinlik) — hafif, katmanlı gölgeler */
  --e-1: 0 1px 2px rgba(36, 43, 47, 0.06), 0 2px 6px -2px rgba(36, 43, 47, 0.08);
  --e-2: 0 1px 2px rgba(36, 43, 47, 0.06), 0 10px 24px -8px rgba(36, 43, 47, 0.2);
  --e-3: 0 2px 4px rgba(36, 43, 47, 0.05), 0 18px 40px -14px rgba(36, 43, 47, 0.3), 0 40px 80px -28px rgba(36, 43, 47, 0.2);

  /* Ölçüler */
  --h-header: 5rem;
  --h-bar: 3.75rem; /* yüzen kapsülün kendisi; --h-header onun ayırdığı alan */
  --bar-gap: var(--s-3);
  --glass-rgb: 22, 25, 28;
  --h-control: 3rem;
  --h-control-s: 2.5rem;
  --card-overlap: 4rem;

  /* Hareket */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (max-width: 47.99rem) {
  :root {
    --gutter: 1rem;
    --col-pad: var(--s-4);
    --h-header: 4rem;
    --h-bar: 3.25rem;
    --bar-gap: var(--s-2);
    --screen-top: calc(var(--h-header) + var(--s-4));
    --screen-bottom: var(--s-5);
    --card-overlap: 2rem;
  }
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--c-metin);
  background: var(--c-beyaz);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

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

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

button {
  -webkit-tap-highlight-color: transparent;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--c-turuncu);
  outline-offset: 3px;
}

/* ==========================================================================
   Yazı rolleri — boyut, ağırlık, genişlik, satır ve harf aralığı birlikte
   ========================================================================== */
.display {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.75rem);
  font-weight: 300;
  font-stretch: 78%;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.display .line {
  display: block;
}

.h2 {
  margin: 0;
  font-size: clamp(2rem, 1.45rem + 1.9vw, 3.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.h3 {
  margin: 0;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.lead {
  font-size: 1.125rem;
  line-height: 1.55;
  letter-spacing: 0;
  max-width: 34em;
}

.small {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.muted {
  color: var(--c-metin-2);
}

/* ==========================================================================
   Yerleşim
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Tek ekran bölüm: içerik dikeyde ortalanır, esneyen alan görseldir */
.screen {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--screen-top) var(--screen-bottom);
}

.section--beton {
  background: var(--c-beton);
}

.section--white {
  background: var(--c-beyaz);
}

.section-head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  margin-bottom: var(--s-7);
}

.section-head .h2 {
  grid-column: 1 / span 2;
}

.section-head .lead {
  grid-column: 3 / span 2;
  padding-left: var(--col-pad);
}

/* ==========================================================================
   Butonlar — hafif gölge, üst kenarda ışık, basınca içeri iner
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--h-control);
  padding: 0 1.375rem;
  border: 0;
  border-radius: var(--r-m);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}

.btn svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.btn-s {
  height: var(--h-control-s);
  padding: 0 1.125rem;
  font-size: 0.9375rem;
  border-radius: 9px;
}

.btn-primary {
  color: var(--c-ters);
  background: linear-gradient(180deg, #cd501b 0%, #bd4413 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(110, 38, 10, 0.28),
    0 4px 12px -4px rgba(194, 72, 22, 0.45);
}

.btn-quiet,
.icon-btn {
  color: var(--c-metin);
  background: linear-gradient(180deg, #ffffff 0%, #f8f9f8 100%);
  box-shadow:
    0 0 0 1px rgba(36, 43, 47, 0.1),
    0 1px 2px rgba(36, 43, 47, 0.08),
    0 3px 8px -4px rgba(36, 43, 47, 0.14),
    inset 0 -1px 0 rgba(36, 43, 47, 0.04);
}

.btn-glass,
.icon-glass {
  color: var(--c-ters);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2px 8px -2px rgba(0, 0, 0, 0.28);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--h-control-s);
  height: var(--h-control-s);
  padding: 0;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}

.icon-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

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

.btn-primary:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 1px rgba(110, 38, 10, 0.3);
}

.btn-quiet:active,
.icon-btn:not(.icon-glass):active {
  box-shadow: 0 0 0 1px rgba(36, 43, 47, 0.12), 0 1px 1px rgba(36, 43, 47, 0.08), inset 0 1px 2px rgba(36, 43, 47, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .icon-btn:hover {
    transform: translateY(-1px);
  }

  .btn:active,
  .icon-btn:active {
    transform: translateY(0) scale(0.97);
  }

  .btn-primary:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 2px 4px rgba(110, 38, 10, 0.24),
      0 8px 20px -6px rgba(194, 72, 22, 0.5);
  }

  .btn-quiet:hover,
  .icon-btn:not(.icon-glass):hover {
    box-shadow:
      0 0 0 1px rgba(36, 43, 47, 0.12),
      0 2px 4px rgba(36, 43, 47, 0.08),
      0 8px 16px -8px rgba(36, 43, 47, 0.22),
      inset 0 -1px 0 rgba(36, 43, 47, 0.04);
  }

  .btn-glass:hover,
  .icon-glass:hover {
    background: rgba(255, 255, 255, 0.16);
  }
}

/* Uzun ince ok */
.arrow {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--c-turuncu);
}

.arrow-line {
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}

.arrow-head {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: -0.5rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ==========================================================================
   Logo
   ========================================================================== */
/* Logo: sembol ve yazı ayrı; arada ince dikey çizgi, yazı sembolün ortasında */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--c-turuncu);
}

.brand-mark {
  flex: none;
  width: auto;
  height: 2.75rem;
  aspect-ratio: 400 / 497;
}

.brand-word {
  position: relative;
  margin-left: var(--s-4);
  padding-left: var(--s-4);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 450;
  font-stretch: 125%;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  /* Büyük harfin optik ortası satır kutusunun biraz altında: hafifçe yukarı */
  transform: translateY(-0.06em);
}

.brand-word::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1.5rem;
  margin-top: -0.75rem;
  background: rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   Cam malzeme — Apple Liquid Glass'ın web yaklaşığı (resmi bir CSS değil):
   koyu ton + bulanıklık + doygunluk, üst kenarda ışık, ince kenar, yumuşak gölge.
   Header kapsülü ve footer'daki iletişim kapsülü aynı malzemeyi kullanır.
   ========================================================================== */
.glass {
  position: relative;
  isolation: isolate;
  background: rgba(var(--glass-rgb), var(--glass-a, 0.62));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.16),
    0 14px 36px -16px rgba(0, 0, 0, 0.6);
  transition: background-color 300ms ease;
}

/* Yüzeyde ışığın kırıldığı parlak bölge: sol üstten hafif */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}

/* Kapsül içi öğe: hover'da hafif cam yüzey, basınca içeri iner */
.glass-item {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 2.5rem;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--c-ters-2);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms var(--ease-out);
}

/* Arkadaki kutucuk: kapalıyken biraz küçük ve görünmez, hover'da yerinde açılır */
.glass-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 160ms ease, transform 240ms var(--ease-out), background-color 160ms ease;
}

.glass-item svg {
  flex: none;
  width: 1.0625rem;
  height: 1.0625rem;
}

.glass-item:active {
  transform: scale(0.97);
}

.glass-item[aria-current="page"],
.glass-item--strong {
  color: var(--c-ters);
}

.glass-item[aria-current="page"]::before,
.glass-item--strong::before {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Header — her sayfada koyu cam kapsül; kenarlardan içeri çekilmiş, yüzer.
   Koyuluk altındaki içeriğe göre: hero (en saydam), koyu bölüm, açık bölüm.
   ========================================================================== */
.site-header {
  /* Açık sayfada: footer tonunda okunacak kadar koyu, ama altı sezilsin */
  --glass-a: 0.8;
  position: fixed;
  top: var(--bar-gap);
  left: max(var(--bar-gap), calc((100% - var(--page-max)) / 2 + var(--gutter) - var(--s-4)));
  right: max(var(--bar-gap), calc((100% - var(--page-max)) / 2 + var(--gutter) - var(--s-4)));
  z-index: 40;
  height: var(--h-bar);
  border-radius: 999px;
  color: var(--c-ters);
}

/* Açık zeminde koyu gölge kalıp gibi gösterir: daha kısa ve yumuşak */
.site-header[data-tone="light"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(22, 25, 28, 0.1),
    0 8px 24px -14px rgba(22, 25, 28, 0.35);
}

.site-header[data-tone="dark"] {
  --glass-a: 0.3;
}

.site-header[data-tone="dark"][data-glass] {
  --glass-a: 0.62;
}

/* Kapsülün içi sayfa ızgarasıyla hizalı: kapsül ızgaradan s-4 taşar, içi s-4 boşluk */
/* Üç bölge: marka solda, menü kapsülün tam ortasında, eylemler sağda */
.header-row.wrap {
  max-width: none;
  height: 100%;
  padding-inline: var(--s-4) var(--s-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.main-nav {
  grid-column: 2;
  display: flex;
  gap: 2px;
}

.main-nav .glass-item {
  height: 2.25rem;
  padding: 0 var(--s-4);
  font-size: 0.9375rem;
}

.header-actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  font-size: 0.9375rem;
  font-weight: 450;
}

.phone-link {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.site-header .brand-mark {
  height: 2.25rem;
}

.header-actions .phone-link {
  color: var(--c-ters-2);
  transition: color 160ms ease;
}

/* Header'daki eylem: kapsülün içinde parlak, küçük kapsül */
.site-header .btn-adapt,
.site-header .icon-adapt {
  color: var(--c-ters);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.site-header .btn-adapt {
  height: 2.75rem;
  padding: 0 var(--s-5);
  border-radius: 999px;
}

.site-header .icon-adapt {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
}

.site-header .menu-button,
.site-header .call-button {
  display: none;
}

.menu-button .icon-close,
.menu-button[aria-expanded="true"] .icon-open {
  display: none;
}

.menu-button[aria-expanded="true"] .icon-close {
  display: block;
}

.skip-link {
  position: fixed;
  left: var(--gutter);
  top: var(--s-3);
  z-index: 80;
  padding: var(--s-2) var(--s-4);
  background: var(--c-beyaz);
  color: var(--c-metin);
  border-radius: var(--r-s);
  transform: translateY(-200%);
}

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

/* Mobil menü — header'ın altından iner */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 39;
  display: flex;
  padding-top: var(--h-header);
  background: rgba(17, 20, 22, 0.86);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  color: var(--c-ters);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 250ms ease, transform 300ms var(--ease-out);
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-block: var(--s-7) var(--s-6);
}

.mobile-menu-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}

/* ==========================================================================
   Hero — sayfadaki tek ızgara burada
   ========================================================================== */
.hero {
  --line: var(--c-cizgi-ters);
  position: relative;
  min-height: max(38rem, 100svh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--c-ters);
  background: var(--c-antrasit);
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

html:not(.js) .hero-slide:not(:first-child) {
  display: none;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(36, 43, 47, 0.6) 0%, rgba(36, 43, 47, 0) 24%),
    linear-gradient(0deg, rgba(36, 43, 47, 0.75) 0%, rgba(36, 43, 47, 0) 42%),
    linear-gradient(90deg, rgba(36, 43, 47, 0.84) 0%, rgba(36, 43, 47, 0.45) 46%, rgba(36, 43, 47, 0.05) 82%);
}

/* Izgara çizgileri: header'ın altından başlar, header'a girmez */
.lines {
  position: absolute;
  top: var(--h-header);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.lines > .wrap {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lines i {
  position: relative;
  border-left: 1px solid var(--line);
}

.lines i:first-child {
  border-left: 0;
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  padding-top: var(--h-header);
}

.hero-title {
  grid-column: 1 / span 2;
  grid-row: 1;
  padding-block: var(--s-8);
}

.hero-meta {
  grid-column: 4;
  grid-row: 1;
  align-self: end;
  padding: 0 0 var(--s-5) var(--col-pad);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.hero-caption {
  color: var(--c-ters-2);
}

.hero-controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.hero-progress {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

.hero-progress span {
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
}

.hero-progress span i {
  display: block;
  height: 100%;
  background: var(--c-ters);
  transform-origin: left center;
  transform: scaleX(0);
}

.hero-toggle .icon-play,
.hero-toggle.is-paused .icon-pause {
  display: none;
}

.hero-toggle.is-paused .icon-play {
  display: block;
}

/* Üç yol: hero'nun altında cam şerit */
.hero-paths {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(36, 43, 47, 0.12) 0%, rgba(36, 43, 47, 0.42) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.paths-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.paths-question {
  padding: var(--s-6) var(--s-6) var(--s-7) 0;
}

.path {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 11.5rem;
  padding: var(--s-6) var(--col-pad) var(--s-6);
  border-left: 1px solid var(--line);
  transition: background-color 200ms ease;
}

.path-text {
  color: var(--c-ters-2);
  max-width: 22em;
}

.path .arrow {
  margin-top: auto;
  padding-top: var(--s-4);
}

.scroll-cue {
  position: absolute;
  z-index: 2;
  left: calc(var(--gutter) / 2);
  bottom: 13.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  transform: translateX(-50%);
  color: var(--c-ters-2);
}

.scroll-cue span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.scroll-cue i {
  width: 1px;
  height: 3rem;
  background: currentColor;
}

/* ==========================================================================
   Ana sayfa bölümleri — sinematik dil (2026-11-07, üçüncü tur)
   Referans: Arsa bölümü. Görsel bölümü kaplar ya da kenara taşar,
   metin görselin üstünde beyaz, okunurluk için alttan koyulaşma.
   Kart, kutu, segment widget yok. Zemin tek koyu ton: --c-gece.
   ========================================================================== */

/* ==========================================================================
   Projeler — tam ekran vitrin
   üstte: "Projeler" + proje adları + araçlar
   altta: solda ad, durum, açıklama, butonlar; sağda künye, galeri kontrolü
   Sahne (.stage) bölüme göre konumlanır; aradaki sarmalayıcılar konumsuzdur.
   ========================================================================== */
.projects--cinema {
  isolation: isolate;
  justify-content: flex-start;
  background: var(--c-gece);
  color: var(--c-ters);
}

.projects-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-7);
}

.projects-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
}

.projects-label {
  margin: 0;
  padding-right: var(--s-6);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-ters-2);
  box-shadow: inset -1px 0 0 var(--c-cizgi-ters);
}

/* Proje adları: metin sekmeler, seçilinin altında kayan ince çizgi */
.switcher,
.jump {
  position: relative;
  display: flex;
  gap: var(--s-5);
}

.switch,
.jump a {
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ters-3);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease;
}

.switch[aria-selected="true"],
.jump a[aria-current] {
  color: var(--c-ters);
}

.jump a[aria-current] {
  box-shadow: inset 0 -1.5px 0 var(--c-ters);
}

.switcher-thumb {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--c-ters);
  transition: transform 280ms var(--ease-in-out), width 280ms var(--ease-in-out);
}

.projects-tools {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-left: auto;
}

.projects-sub {
  font-size: 0.8125rem;
  color: var(--c-ters-3);
}

/* Görseller / 3D: görsel üstünde küçük cam anahtar */
.view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: opacity 200ms ease;
}

.view-toggle.is-off {
  opacity: 0;
  visibility: hidden;
}

.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 2.125rem;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--c-ters-2);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}

.view-btn svg {
  width: 1rem;
  height: 1rem;
}

.view-btn[aria-pressed="true"] {
  color: var(--c-metin);
  background: var(--c-ters);
}

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

.projects-body {
  display: grid;
}

.project {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-6);
  align-items: end;
}

.js .project {
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}

.js .project:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.js .project.is-active {
  transition: opacity 350ms ease;
}

/* Sahne: sağdaki hücre; fotoğraf hücreye kendi oranıyla sığar (bkz. Projeler, dördüncü tur) */
.stage {
  min-height: 0;
}

.stage-tilt,
.stage-frame {
  height: 100%;
}

.stage-frame {
  position: relative;
  overflow: hidden;
  background: var(--c-gece);
  cursor: zoom-in;
  touch-action: pan-y;
}

/* Fotoğrafın üstünde metin yok; yalnızca ince ışık kenarı */
.stage-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.stage-img.is-active {
  opacity: 1;
}

.stage-glare {
  display: none;
}

/* Sol: proje */
.project-card {
  grid-column: 1 / span 6;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  transition: opacity 200ms ease;
}

.project-name {
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.project-desc {
  max-width: 30em;
  color: var(--c-ters-2);
}

.project-actions {
  margin-top: var(--s-3);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-altin);
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status--quiet {
  color: var(--c-ters-2);
}

/* Sağ: künye ve galeri */
.project-side {
  grid-column: 8 / span 5;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  transition: opacity 200ms ease;
}

.spec {
  margin: 0;
}

.spec div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.spec dt {
  font-size: 0.9375rem;
  color: var(--c-ters-2);
}

.spec dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
}

.stage-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.stage-nav {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.stage-btn {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-ters);
  cursor: pointer;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}

.stage-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.stage-btn:active {
  transform: scale(0.94);
}

.stage-count {
  min-width: 3.75rem;
  text-align: center;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-ters-2);
}

.stage-caption {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  color: var(--c-ters-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-expand {
  flex: none;
}

/* Galeri konumu: her görsel için ince bir çizgi; tıklanınca o görsele gider */
.filmstrip {
  display: flex;
  gap: 6px;
  margin-top: var(--s-3);
}

.film {
  position: relative;
  flex: 1;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.film::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.24);
  transition: background-color 200ms ease;
}

.film[aria-current="true"]::before {
  background: var(--c-ters);
}

/* 3D model: koyu sahnenin içinde açık bir pano; metin katmanı çekilir */
.stage-3d {
  position: absolute;
  z-index: 3;
  /* Başlık satırının hemen altından alta kadar: model alanı olabildiğince büyük */
  top: calc(var(--screen-top) + 3.25rem);
  bottom: var(--s-4);
  left: max(var(--s-4), calc((100% - var(--page-max)) / 2 + var(--gutter) / 2));
  right: max(var(--s-4), calc((100% - var(--page-max)) / 2 + var(--gutter) / 2));
  display: none;
  overflow: hidden;
  border-radius: var(--r-l);
  background: #e5eaed;
  box-shadow: var(--e-3);
}

.stage-3d iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.stage-frame.is-3d {
  cursor: default;
}

.stage-frame.is-3d .stage-3d {
  display: block;
}

.stage-frame.is-3d::after {
  display: none;
}

.project.is-3d .project-card,
.project.is-3d .project-side {
  opacity: 0;
  visibility: hidden;
}

/* Projeler sayfası: iki vitrin arka arkaya */
.projects--page + .projects--page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 1px;
  background: var(--c-cizgi-ters);
}

/* ==========================================================================
   Süreç
   koyu zemin; sağ yarıda kenara taşan görsel (hero videosundan aşama
   kareleri), solda başlık ve dört aşama. Seçili aşamada turuncu çubuk.
   ========================================================================== */
.process-screen {
  isolation: isolate;
  background: var(--c-gece);
  color: var(--c-ters);
}

.process-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  margin: 0;
}

.process-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--c-antrasit);
  cursor: zoom-in;
}

/* Header'ın altında okunurluk için üstten hafif koyulaşma */
.process-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 20, 22, 0.55) 0%, rgba(17, 20, 22, 0) 22%);
}

.process-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms ease;
}

.process-frame img.is-active {
  opacity: 1;
}

.process-frame .media-zoom {
  position: absolute;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 2;
}

.process {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: var(--s-6);
  /* Katman sağdaki görselin üstünden de geçer; tıklamalar görsele gitsin */
  pointer-events: none;
}

.process-head,
.process-tabs {
  pointer-events: auto;
}

.process-head {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.process-head .lead {
  color: var(--c-ters-2);
}

.process-tabs {
  grid-column: 1 / span 5;
  grid-row: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: var(--s-8);
  padding-left: var(--s-5);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18);
}

/* Seçili aşamanın çubuğu: 1px yükseklikten ölçeklenir, yalnızca transform */
.tab-marker {
  position: absolute;
  top: 0;
  left: -0.5px;
  width: 2px;
  height: 1px;
  background: var(--c-turuncu);
  transform-origin: top;
  transition: transform 280ms var(--ease-in-out);
}

.tab {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  row-gap: var(--s-1);
  padding: var(--s-4) 0;
  border: 0;
  background: none;
  color: var(--c-ters);
  text-align: left;
  cursor: pointer;
}

.tab-num {
  padding-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-ters-3);
  transition: color 200ms ease;
}

.tab[aria-selected="true"] .tab-num {
  color: var(--c-altin);
}

.tab-label {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--c-ters-3);
  transition: color 200ms ease;
}

.tab[aria-selected="true"] .tab-label {
  color: var(--c-ters);
}

.tab-text {
  grid-column: 2;
  max-width: 30em;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ters-3);
  transition: color 200ms ease;
}

.tab[aria-selected="true"] .tab-text {
  color: var(--c-ters-2);
}

/* ==========================================================================
   Arsa sahipleri (kullanıcı onaylı, değiştirilmedi)
   görsel bölümün tamamını kaplar; metin altta, koyu geçiş üstünde beyaz
   ========================================================================== */
.land {
  isolation: isolate;
  justify-content: flex-end;
  background: var(--c-antrasit);
  color: var(--c-ters);
}

.land-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}

.land-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Okunurluk için alttan koyulaşma; dekor değil */
.land::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(16, 19, 21, 0.9) 0%, rgba(16, 19, 21, 0.72) 38%, rgba(16, 19, 21, 0.1) 72%, rgba(16, 19, 21, 0.3) 100%);
}

.land-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-6);
  row-gap: var(--s-7);
  align-items: end;
}

.land-copy {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.land-copy .lead {
  color: var(--c-ters-2);
}

.land-copy .button-row {
  margin-top: var(--s-3);
}

.land-steps {
  grid-column: 8 / span 5;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.land-steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  row-gap: var(--s-1);
  padding-block: var(--s-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.land-num {
  padding-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-altin);
}

.land-step-title {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
}

.land-step-text {
  grid-column: 2;
  font-size: 0.9375rem;
  color: var(--c-ters-2);
}

.land::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: var(--s-9);
  background: linear-gradient(180deg, rgba(17, 20, 22, 0) 0%, var(--c-gece) 100%);
  pointer-events: none;
}

/* ==========================================================================
   Sinematik bölüm (alt sayfalar) — Arsa bölümünün dili, tekrar kullanılabilir
   .cine            görsel/video bölümü kaplar, metin altta, alttan koyulaşma
   .cine--split     görsel yarıyı kaplar ve kenara taşar (--media-right / --media-left)
   .cine--plain     görselsiz koyu zemin (ör. sık sorulanlar)
   ========================================================================== */
.cine {
  isolation: isolate;
  justify-content: flex-end;
  background: var(--c-gece);
  color: var(--c-ters);
}

.cine-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  overflow: hidden;
  background: var(--c-antrasit);
}

.cine-media img,
.cine-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Okunurluk: altta metin, üstte header için koyulaşma; dekor değil */
.cine::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(17, 20, 22, 0.94) 0%, rgba(17, 20, 22, 0.76) 34%, rgba(17, 20, 22, 0.14) 66%, rgba(17, 20, 22, 0.4) 100%);
}

.cine-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-6);
  row-gap: var(--s-7);
  align-items: end;
}

.cine-copy {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

.cine-copy .lead {
  max-width: 34em;
  color: var(--c-ters-2);
}

.cine-copy .button-row,
.cine-copy .next-link {
  margin-top: var(--s-2);
}

.cine-side .next-link {
  margin-top: var(--s-5);
}

.cine-side {
  grid-column: 8 / span 5;
}

.cine-num {
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-altin);
}

.cine-num--lg {
  font-size: 0.9375rem;
}

.cine-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cine-list > li {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cine-list-title {
  margin: 0 0 var(--s-2);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-ters-2);
}

/* Bağlantı satırları: numara, başlık, kısa açıklama, ok */
.cine-list--links a {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  row-gap: var(--s-1);
  padding-block: var(--s-4);
}

.cine-item-title {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
}

.cine-item-text {
  grid-column: 2;
  font-size: 0.9375rem;
  color: var(--c-ters-2);
}

.cine-list--links .arrow {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--c-ters-3);
  transition: color 160ms ease;
}

/* Onay listesi */
.cine-checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-block: var(--s-3);
}

.cine-checks svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  color: var(--c-altin);
}

.cine .next-link {
  color: var(--c-ters);
}

.cine .next-link .next-label {
  font-weight: 400;
  color: var(--c-ters-2);
}

.cine .next-link .arrow {
  color: var(--c-turuncu);
}

/* Bölünmüş: görsel bir yarıyı kaplar, kenara taşar; metin diğer yarıda düz koyu zeminde */
.cine--split {
  justify-content: center;
}

.cine--split::before {
  display: none;
}

.cine--split .cine-media {
  z-index: 0;
}

.cine--media-right .cine-media {
  inset: 0 0 0 50%;
}

.cine--media-left .cine-media {
  inset: 0 50% 0 0;
}

/* Header'ın altında okunurluk için görselin üstünde hafif koyulaşma */
.cine--split .cine-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 20, 22, 0.55) 0%, rgba(17, 20, 22, 0) 22%);
}

.cine--split .media-zoom {
  top: auto;
  bottom: var(--s-5);
  right: var(--s-5);
}

.cine-media[data-zoom] {
  cursor: zoom-in;
}

/* Metin katmanı görselin üstünden de geçer; tıklamalar görsele gitsin */
.cine--split .cine-inner {
  position: relative;
  z-index: 1;
  align-items: center;
  pointer-events: none;
}

.cine--split .cine-copy {
  grid-column: 1 / span 5;
  pointer-events: auto;
}

.cine--media-left .cine-copy {
  grid-column: 8 / span 5;
}

.cine--split .cine-list-title {
  margin-top: var(--s-4);
}

.cine--split .cine-checks {
  align-self: stretch;
}

/* Görselsiz koyu zemin */
.cine--plain {
  justify-content: center;
}

.cine--plain::before {
  display: none;
}

.cine-inner--center {
  align-items: center;
}

/* .faq-list'in eski 4 sütunlu yerleşimi sonra tanımlı; burada ızgaraya göre konumlanır */
.cine-inner > .cine-copy--narrow {
  grid-column: 1 / span 5;
}

.cine-inner > .cine-side--wide {
  grid-column: 7 / span 6;
}

/* Sık sorulanlar koyu zeminde */
.cine .faq-list details,
.cine .faq-list details:last-child {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.cine .faq-list details:last-child {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.16);
}

.cine .faq-list summary {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-ters);
}

.cine .faq-list summary svg {
  color: var(--c-ters-3);
}

.cine .faq-list details p {
  color: var(--c-ters-2);
}

.cine .faq-list summary::before {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .cine-list--links a:hover .arrow {
    color: var(--c-turuncu);
  }

  .cine-media[data-zoom]:hover .media-zoom {
    opacity: 1;
  }
}

@media (min-width: 64rem) and (max-height: 52rem) {
  .cine-inner {
    row-gap: var(--s-5);
  }

  .cine-list--links a {
    padding-block: var(--s-3);
  }

  .cine-checks li {
    padding-block: var(--s-2);
  }
}

@media (max-width: 63.99rem) {
  .cine-copy,
  .cine-side,
  .cine-inner > .cine-copy--narrow,
  .cine-inner > .cine-side--wide,
  .cine--split .cine-copy,
  .cine--media-left .cine-copy {
    grid-column: 1 / -1;
  }

  .cine-inner {
    row-gap: var(--s-6);
  }

  /* Bölünmüş: görsel üstte kenardan kenara esner, metin altta */
  .cine--split {
    justify-content: flex-start;
    padding-top: var(--h-header);
  }

  /* flex-basis 0px: yükseklik sabit değilken %0 görselin kendi boyuna çözülür */
  .cine--split .cine-media,
  .cine--media-left .cine-media {
    position: relative;
    inset: auto;
    flex: 1 1 0px;
    min-height: 13rem;
  }

  .cine--split .cine-media::after {
    background: linear-gradient(180deg, rgba(17, 20, 22, 0) 60%, rgba(17, 20, 22, 0.9) 100%);
  }

  .cine--split .cine-inner {
    padding-top: var(--s-6);
  }

  .cine--split .media-zoom {
    display: none;
  }
}

@media (max-width: 47.99rem) {
  /* 12 sütun ve 32px aralık 375px'te içerikten geniş (11 × 32 = 352px): tek sütun */
  .cine-inner,
  .land-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cine-inner {
    row-gap: var(--s-5);
  }

  .cine-copy {
    gap: var(--s-3);
  }

  .cine-copy .lead {
    font-size: 1rem;
  }

  .cine-list--links a {
    padding-block: var(--s-3);
  }

  .cine-checks li {
    padding-block: var(--s-2);
    font-size: 0.9375rem;
  }

  .cine--split .cine-inner {
    padding-top: var(--s-5);
  }

  .cine--split .cine-list-title {
    margin-top: var(--s-2);
  }

  .cine .button-row .btn {
    flex: 1;
  }

  /* Açık sorunun vurgu katmanı 16px kenar boşluğundan taşmasın */
  .cine .faq-list summary::before {
    inset: 2px calc(-1 * var(--s-2));
  }
}

/* ==========================================================================
   Footer — Arsa'nın koyu alt tonundan kesintisiz devam eder.
   Kapanış cümlesi + navbar'la aynı cam malzemeden iletişim kapsülü;
   altında marka ve bağlantılar, en altta telif.
   ========================================================================== */
.site-footer {
  background: var(--c-gece);
  color: var(--c-ters);
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-9) var(--s-8);
}

.footer-title {
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.footer-note {
  margin-top: var(--s-3);
  color: var(--c-ters-2);
}

/* Düz koyu zeminde camın kabarık okunması için ton zeminden biraz açık */
.footer-actions {
  --glass-rgb: 44, 49, 53;
  --glass-a: 0.55;
  display: flex;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
}

.footer-actions .glass-item {
  height: 3rem;
  padding: 0 var(--s-5);
  font-size: 1rem;
}

.footer-phone {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5) var(--s-7);
  padding-block: var(--s-6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
}

.footer-nav a {
  font-size: 0.9375rem;
  color: var(--c-ters-2);
  transition: color 160ms ease;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-5) var(--s-6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.875rem;
  color: var(--c-ters-3);
}

/* ---------- Hover (yalnızca fare) ---------- */
@media (hover: hover) and (pointer: fine) {
  .switch:not([aria-selected="true"]):hover,
  .jump a:not([aria-current]):hover,
  .view-btn:not([aria-pressed="true"]):hover,
  .tab:not([aria-selected="true"]):hover .tab-label,
  .footer-nav a:hover {
    color: var(--c-ters);
  }

  .stage-btn:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  .film:not([aria-current="true"]):hover::before {
    background: rgba(255, 255, 255, 0.55);
  }
}

/* Klavyeyle geçişte hareket yok */
.no-anim .tab-marker,
.no-anim .process-frame img,
.no-anim .switcher-thumb,
.no-anim .stage-img,
.no-anim.project,
.no-anim .project {
  transition: none !important;
}

/* ---------- Kısa masaüstü ---------- */
@media (min-width: 64rem) and (max-height: 52rem) {
  .projects-inner {
    gap: var(--s-5);
  }

  .project-name {
    font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  }

  .spec div {
    padding-block: var(--s-2);
  }

  .stage-bar {
    padding-top: var(--s-3);
  }

  .process-tabs {
    margin-top: var(--s-6);
  }

  .tab {
    padding-block: var(--s-3);
  }

  .tab-label {
    font-size: 1.25rem;
  }

  .land-inner {
    row-gap: var(--s-5);
  }

  .land-steps li {
    padding-block: var(--s-3);
  }
}

@media (min-width: 64rem) and (max-height: 47.5rem) {
  .project-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .tab-text {
    font-size: 0.875rem;
  }
}

/* ---------- Tablet ve telefon (64rem altı) ---------- */
@media (max-width: 63.99rem) {
  .projects-inner {
    gap: var(--s-6);
  }

  .projects-label {
    display: none;
  }

  /* Telefonda sıra: ad, açıklama, künye, galeri, butonlar */
  .project {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-4);
  }

  .project-card,
  .project-side {
    display: contents;
  }

  .status { order: 1; }
  .project-name { order: 2; }
  .project-desc { order: 3; }
  .spec { order: 4; }
  .stage-bar { order: 5; }
  .filmstrip { order: 6; }
  .project-actions { order: 7; }

  .status,
  .project-name,
  .project-desc,
  .spec,
  .stage-bar,
  .filmstrip,
  .project-actions {
    position: relative;
    z-index: 1;
  }

  .project.is-3d .status,
  .project.is-3d .project-name,
  .project.is-3d .project-desc,
  .project.is-3d .spec,
  .project.is-3d .stage-bar,
  .project.is-3d .filmstrip,
  .project.is-3d .project-actions {
    visibility: hidden;
  }

  .project-actions {
    margin-top: 0;
  }

  .spec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-5);
  }

  .spec div {
    flex-direction: column;
    gap: 0;
  }

  .spec dd {
    text-align: left;
  }

  .filmstrip {
    margin-top: calc(-1 * var(--s-2));
  }

  /* Süreç: görsel üstte kenardan kenara, metin altta */
  .process-screen {
    justify-content: flex-start;
    padding-top: var(--h-header);
  }

  .process-media {
    position: relative;
    inset: auto;
    flex: 1;
    min-height: 13rem;
  }

  .process-frame::after {
    background: linear-gradient(180deg, rgba(17, 20, 22, 0) 60%, rgba(17, 20, 22, 0.9) 100%);
  }

  .process {
    flex: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding-top: var(--s-6);
  }

  .process-head,
  .process-tabs {
    grid-column: 1;
  }

  .process-tabs {
    margin-top: var(--s-5);
  }

  .land-copy,
  .land-steps {
    grid-column: 1 / -1;
  }
}

/* ---------- Telefon (48rem altı) ---------- */
@media (max-width: 47.99rem) {
  .projects-head {
    flex-wrap: nowrap;
    gap: var(--s-5);
  }

  .projects-sub {
    display: none;
  }

  /* Beş proje adı sığsın diye etiket telefonda yalnızca ekran okuyucuya kalır */
  .projects-head > .projects-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .projects-head > .switcher,
  .projects-head > .jump {
    flex: 1;
    min-width: 0;
  }

  /* 3D düğmesi gizliyken boş yer tutmasın */
  .projects-tools:has(.view-toggle.is-off) {
    display: none;
  }

  .switcher,
  .jump {
    gap: var(--s-5);
  }

  /* Beş proje telefona sığmaz: satır yatay kayar */
  .switcher,
  .jump {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .switcher::-webkit-scrollbar,
  .jump::-webkit-scrollbar {
    display: none;
  }

  .switch,
  .jump a {
    font-size: 0.9375rem;
  }

  .view-btn {
    height: 2rem;
    padding: 0 var(--s-2);
    font-size: 0.8125rem;
  }

  .view-btn svg {
    display: none;
  }

  .projects-inner {
    gap: var(--s-5);
  }

  .project {
    row-gap: var(--s-3);
  }

  .project-name {
    font-size: 2.25rem;
  }

  .project-desc {
    font-size: 1rem;
  }

  .spec div {
    padding-block: var(--s-2);
  }

  .spec dt {
    font-size: 0.8125rem;
  }

  .stage-bar {
    padding-top: var(--s-3);
  }

  .stage-expand {
    display: none;
  }

  .project-actions .btn {
    flex: 1;
  }

  /* Süreç telefonda: yalnızca seçili aşamanın açıklaması görünür */
  .process {
    padding-top: var(--s-5);
  }

  .process-tabs {
    margin-top: var(--s-4);
  }

  .tab {
    padding-block: var(--s-2);
  }

  .tab-label {
    font-size: 1.125rem;
  }

  .tab-num {
    padding-top: 0.2rem;
  }

  .tab:not([aria-selected="true"]) .tab-text {
    display: none;
  }

  .land-inner {
    row-gap: var(--s-4);
  }

  .land-steps li {
    padding-block: var(--s-2);
  }

  .land-step-text {
    display: none;
  }

  .land-copy .button-row .btn {
    flex: 1;
  }

  .footer-cta {
    padding-block: var(--s-8) var(--s-7);
  }

  /* Telefonda kapsül iki satırlı: numara üstte, iki eylem altta */
  .footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: 26px;
  }

  .footer-actions .glass-item {
    height: 2.75rem;
    padding: 0 var(--s-3);
  }

  .footer-phone {
    grid-column: 1 / -1;
  }

  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s-5);
    width: 100%;
  }

  .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .footer-legal {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-item::before {
    transform: none;
  }

  .view-btn,
  .stage-btn {
    transform: none !important;
  }

  .switcher-thumb,
  .tab-marker {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header[data-tone="dark"][data-glass] {
    background: var(--c-gece);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .view-toggle,
  .stage-nav {
    background: rgba(17, 20, 22, 0.86);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Numara rozeti ve buton satırı (alt sayfalar da kullanır) */
.step-num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--c-beyaz);
  box-shadow: var(--e-1), 0 0 0 1px rgba(36, 43, 47, 0.06);
  color: var(--c-turuncu-koyu);
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

/* ==========================================================================
   İletişim paneli
   ========================================================================== */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(36, 43, 47, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}

.scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  width: min(32rem, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-7) var(--s-7);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-beyaz);
  color: var(--c-metin);
  box-shadow: -24px 0 60px -12px rgba(36, 43, 47, 0.3);
  touch-action: pan-y;
  transform: translateX(100%);
  visibility: hidden;
  /* kapanış: aynı yoldan, açılıştan hızlı */
  transition: transform 250ms var(--ease-drawer), visibility 0s linear 250ms;
}

.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 400ms var(--ease-drawer);
}

.drawer.is-dragging {
  transition: none;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--h-control);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field label {
  font-size: 0.9375rem;
  font-weight: 500;
}

.input {
  width: 100%;
  height: var(--h-control);
  padding: 0 var(--s-4);
  border: 1px solid var(--c-cizgi-guclu);
  border-radius: var(--r-m);
  background: var(--c-beyaz);
  box-shadow: inset 0 1px 2px rgba(36, 43, 47, 0.06);
  font-size: 1rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.input:focus-visible {
  outline: none;
  border-color: var(--c-turuncu);
  box-shadow: inset 0 1px 2px rgba(36, 43, 47, 0.06), 0 0 0 3px rgba(227, 90, 36, 0.18);
}

textarea.input {
  height: auto;
  min-height: 7.5rem;
  padding: var(--s-3) var(--s-4);
  resize: vertical;
}

.field-error {
  color: var(--c-turuncu-koyu);
  font-size: 0.875rem;
}

.input[aria-invalid="true"] {
  border-color: var(--c-turuncu-koyu);
}

.form-status:empty {
  display: none;
}

.drawer-alt {
  margin-top: auto;
  padding-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  box-shadow: inset 0 1px 0 var(--c-cizgi);
}

/* ==========================================================================
   Görsel büyütme (lightbox)
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--c-ters);
  visibility: hidden;
}

.lightbox.is-open {
  visibility: visible;
}

.lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(24, 28, 31, 0.94);
  opacity: 0;
  transition: opacity 250ms ease;
}

.lightbox.is-open .lightbox-bg {
  opacity: 1;
  transition-duration: 300ms;
}

.lightbox-ui {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--gutter);
  opacity: 0;
  transition: opacity 150ms ease;
}

.lightbox.is-open .lightbox-ui {
  opacity: 1;
  transition: opacity 200ms ease 150ms;
}

.lightbox-nav {
  display: flex;
  gap: var(--s-2);
}

.lightbox-count,
.lightbox-caption {
  color: var(--c-ters-2);
  font-variant-numeric: tabular-nums;
}

.lightbox-stage {
  position: relative;
  min-height: 0;
  padding: 0 var(--gutter);
  touch-action: pan-y;
}

.lightbox-img {
  position: absolute;
  max-width: none;
  border-radius: var(--r-m);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  user-select: none;
  -webkit-user-drag: none;
}

/* ==========================================================================
   Hareket
   ========================================================================== */
.arrow-line,
.arrow-head {
  transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .path:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  .path:hover .arrow-line {
    transform: scaleX(1.5);
  }

  .path:hover .arrow-head {
    transform: translateX(1.25rem) rotate(45deg);
  }

  .glass-item:hover {
    color: var(--c-ters);
  }

  .glass-item:hover::before {
    opacity: 1;
    transform: none;
  }

  .glass-item[aria-current="page"]:hover::before,
  .glass-item--strong:hover::before {
    background: rgba(255, 255, 255, 0.15);
  }

  .header-actions .phone-link:hover {
    color: var(--c-ters);
  }

  .site-header .btn-adapt:hover,
  .site-header .icon-adapt:hover {
    background: rgba(255, 255, 255, 0.18);
  }

}

/* Hero görsel geçişi */
.js .hero-slide {
  opacity: 0;
  transition: opacity 1200ms ease;
}

.js .hero-slide.is-active {
  opacity: 1;
}

.js .hero:not(.is-in) .hero-slide.is-active {
  opacity: 0;
}

/* Açılış: ızgara çizgileri logodaki çubuklar gibi alttan yükselir */
.hero .lines i::after {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 7rem;
  background: linear-gradient(180deg, var(--c-altin), rgba(209, 166, 21, 0));
  opacity: 0;
}

.hero .lines i:first-child::after {
  display: none;
}

.js .hero .lines i {
  transform: translateY(101%);
}

.hero.is-in .lines i {
  transform: none;
  transition: transform var(--rise, 1200ms) var(--ease-out) var(--rise-delay, 0ms);
}

.hero.is-in .lines i::after {
  animation: tip calc(var(--rise, 1200ms) + 700ms) ease var(--rise-delay, 0ms) both;
}

.hero .lines i:nth-child(2) { --rise: 1250ms; --rise-delay: 0ms; }
.hero .lines i:nth-child(3) { --rise: 1500ms; --rise-delay: 90ms; }
.hero .lines i:nth-child(4) { --rise: 1100ms; --rise-delay: 180ms; }

@keyframes tip {
  0%, 55% { opacity: 1; }
  100% { opacity: 0; }
}

/* Açılış: başlık ve üç yol, 70 ms arayla */
.js .hero:not(.is-in) [data-reveal] {
  opacity: 0;
  transform: translateY(0.5rem);
}

.hero.is-in [data-reveal] {
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out), background-color 200ms ease;
  transition-delay: calc(350ms + var(--i, 0) * 70ms), calc(350ms + var(--i, 0) * 70ms), 0ms;
}

.hero.is-ready [data-reveal] {
  transition-delay: 0ms;
}

/* Klavyeyle geçişte hareket yok */

/* ==========================================================================
   Duyarlı
   ========================================================================== */

/* Kısa masaüstü ekranları: kart sıkışır, şerit gizlenir, sahne büyür */
@media (min-width: 64rem) and (max-height: 52rem) {

  .section-head {
    margin-bottom: var(--s-6);
  }

}

@media (max-width: 63.99rem) {
  .lines > .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lines i:nth-child(n + 3) {
    display: none;
  }

  .main-nav {
    display: none;
  }

  .header-actions {
    grid-column: 3;
  }

  .hero-title {
    grid-column: 1 / -1;
  }

  .hero-meta {
    grid-column: 3 / span 2;
    grid-row: 2;
  }

  .paths-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .paths-question {
    grid-column: 1 / -1;
    padding-bottom: 0;
  }

  .path:nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }

  .path:last-child {
    grid-column: 1 / -1;
    min-height: 0;
    padding-left: 0;
    border-left: 0;
    box-shadow: inset 0 1px 0 var(--line);
  }

  .section-head .h2,
  .section-head .lead {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .section-head .lead {
    margin-top: var(--s-3);
  }

  /* Projeler: sahne üstte, kart sahnenin altına biner */

  /* Dar ekranda şerit yerine sahnede kaydırma */

  /* Süreç tablette: aşamalar 2×2 */

  /* Arsa tablette ve telefonda: görsel üstte esner, kart altına biner */

}

@media (max-width: 47.99rem) {
  .header-row.wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: var(--s-4) 6px;
  }

  .header-actions {
    grid-column: 2;
    gap: var(--s-2);
  }

  .header-actions .phone-link,
  .header-actions .btn {
    display: none;
  }

  .site-header .menu-button,
  .site-header .call-button {
    display: inline-grid;
  }

  .brand-mark,
  .site-header .brand-mark {
    height: 2rem;
  }

  .brand-word {
    font-size: 0.9375rem;
  }

  .hero {
    min-height: max(36rem, 100svh);
  }

  .hero-title {
    padding-block: var(--s-7) var(--s-6);
  }

  .hero-meta {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .paths-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .paths-question {
    padding: var(--s-5) 0 var(--s-2);
  }

  .path,
  .path:nth-child(2),
  .path:last-child {
    grid-column: 1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--s-4);
    min-height: 0;
    padding: var(--s-4) 0;
    border-left: 0;
    box-shadow: inset 0 1px 0 var(--line);
  }

  .path-text {
    display: none;
  }

  .path .arrow {
    margin: 0 0 0 auto;
    padding-top: 0;
  }

  .scroll-cue {
    display: none;
  }

  .step-detail {
    display: none;
  }

  .button-row .btn {
    flex: 1;
  }

  .drawer {
    padding: var(--s-5) var(--s-4) var(--s-6);
  }
}

/* ==========================================================================
   Hareketi azalt / saydamlığı azalt
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .hero .lines i {
    transform: none;
  }

  .hero .lines i::after {
    display: none;
  }

  .js .hero:not(.is-in) [data-reveal] {
    transform: none;
  }

  .hero.is-in [data-reveal] {
    transition: opacity 200ms ease;
    transition-delay: 0ms;
  }

  .js .hero-slide {
    transition-duration: 300ms;
  }

  .drawer,
  .drawer.is-open,
  .mobile-menu,
  .mobile-menu.is-open {
    transform: none;
  }

  .drawer {
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }

  .drawer.is-open {
    opacity: 1;
    transition: opacity 200ms ease;
  }

  .btn,
.icon-btn {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(var(--glass-rgb));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mobile-menu {
    background: var(--c-gece);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hero-paths {
    background: rgba(36, 43, 47, 0.86);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .btn-glass,
.icon-glass {
    background: rgba(36, 43, 47, 0.86);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   Alt sayfalar — Biz kimiz, Projeler, Nasıl çalışıyoruz, İletişim
   Aynı kurallar: her bölüm tek ekran, esneyen alan görsel ([data-flex]).
   ========================================================================== */
.page-title {
  margin: 0;
  font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}

/* Yüksekliği ekrana sabit bölüm: içerik sığar, görsel kalan yeri alır */
.screen--fit {
  height: 100svh;
  justify-content: flex-start;
}

.screen--fit > .wrap {
  flex: 1;
  min-height: 0;
}

.section--dark {
  background: var(--c-antrasit);
  color: var(--c-ters);
}

.section--dark .muted {
  color: var(--c-ters-2);
}

/* Görsel: kutuyu doldurur.
   Dış katman gölgeyi taşır, iç katman (media-clip) kırpar.
   Yükselince gölge, opaklığı değişen ikinci bir katmandan gelir. */
.media-fill {
  position: relative;
  z-index: 0;
  min-height: 0;
  margin: 0;
  border-radius: var(--r-l);
  box-shadow: var(--e-2);
  /* eğim transform'u JS yazar; yükselme ve basma ayrı özelliklerde */
  transition: translate 300ms var(--ease-out), scale 160ms var(--ease-out);
}

.media-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--e-3);
  opacity: 0.7;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.media-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: inherit;
  background: var(--c-antrasit);
}

/* Üst kenarda ince ışık, iç kenarda hafif çizgi: yüzeye kalınlık verir */
.media-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(36, 43, 47, 0.08);
  pointer-events: none;
}

.media-fill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform 700ms var(--ease-out);
}

.media-fill .media-chip {
  z-index: 2;
}

/* Büyütülebilir görsel: tıklanınca lightbox'ta yerinden büyür */
.media-fill[data-zoom] {
  cursor: zoom-in;
}

.media-zoom {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 2;
}

.js .media-zoom {
  opacity: 0;
  transition: opacity 200ms ease, transform 160ms var(--ease-out);
}

[data-zoom]:focus-within .media-zoom {
  opacity: 1;
}

@media (hover: none) {
  .js .media-zoom {
    opacity: 1;
  }
}

.lightbox.is-single .lightbox-nav,
.lightbox.is-single .lightbox-count {
  visibility: hidden;
}

/* Görsel üstünde cam etiket */
.media-chip {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-m);
  color: var(--c-ters);
  font-size: 0.875rem;
  line-height: 1.2;
  background: rgba(36, 43, 47, 0.34);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Bölünmüş ekran: iki sütun metin, iki sütun görsel */
.split {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.split-copy {
  grid-column: 1 / span 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-right: calc(var(--col-pad) + var(--s-4));
}

.split-media {
  grid-column: 3 / span 2;
  grid-row: 1;
}

.split--flip .split-copy {
  grid-column: 3 / span 2;
  padding-right: 0;
  padding-left: calc(var(--col-pad) + var(--s-4));
}

.split--flip .split-media {
  grid-column: 1 / span 2;
}

.split-copy .button-row {
  margin-top: 0;
}

/* Satır listesi: ince ayraçlı, kart değil */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rows li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: var(--s-4);
  box-shadow: inset 0 1px 0 var(--c-cizgi);
}

.rows li:last-child {
  box-shadow: inset 0 1px 0 var(--c-cizgi), inset 0 -1px 0 var(--c-cizgi);
}

.rows-title {
  font-size: 1.125rem;
  font-weight: 450;
  font-stretch: 88%;
  line-height: 1.3;
}

.rows-text {
  color: var(--c-metin-2);
}

/* İki sütunlu satırlar: proje öne çıkanları */
.rows--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-6);
}

.rows--two li:nth-last-child(2):nth-child(odd) {
  box-shadow: inset 0 1px 0 var(--c-cizgi), inset 0 -1px 0 var(--c-cizgi);
}

/* --------------------------------------------------------------------------
   Biz kimiz: işlerimiz (koyu ekran)
   -------------------------------------------------------------------------- */
.work {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.work-copy {
  grid-column: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  padding-right: var(--col-pad);
}

.work-item {
  grid-row: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.work-item--main {
  grid-column: 2 / span 2;
}

.work-item--side {
  grid-column: 4;
  align-self: end;
  height: 72%;
  padding-left: var(--col-pad);
}

.work-item .media-fill {
  flex: 1;
}

.work-item img {
  transition: transform 600ms var(--ease-out);
}

.work-cap {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.work-cap-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
}

.work-cap .small {
  color: var(--c-ters-2);
}

/* Yüklenicisi olduğumuz projeler: ince çizgili bağlantı satırları */
.work-more {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.work-more-title {
  margin: 0;
  color: var(--c-ters-3);
  font-size: 0.875rem;
  font-weight: 500;
}

.work-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 2.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--c-ters);
  font-weight: 500;
  transition: color 160ms ease;
}

.work-list li:last-child a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.work-list-type {
  color: var(--c-ters-3);
  font-size: 0.875rem;
  font-weight: 400;
}

@media (hover: hover) and (pointer: fine) {
  .work-list a:hover {
    color: var(--c-ters-2);
  }
}

/* --------------------------------------------------------------------------
   Nasıl çalışıyoruz
   -------------------------------------------------------------------------- */
.steps-intro {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.steps-intro .section-head {
  margin-bottom: 0;
}

.steps-intro .media-fill {
  flex: 1;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: var(--s-3);
  row-gap: 2px;
  align-items: center;
  padding-right: var(--col-pad);
}

.timeline .rows-title {
  grid-column: 2;
}

.timeline .small {
  grid-column: 2;
  color: var(--c-metin-2);
}

.timeline .arrow {
  display: none;
}

/* Aşama ekranı başlığı: numara + başlık */
.step-title {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.step-title .step-num {
  flex: none;
}

.checks-title {
  margin: 0 0 var(--s-1);
  font-size: 1rem;
  font-weight: 500;
}

.checks {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--c-metin-2);
}

.checks li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--s-2);
}

.checks svg {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  color: var(--c-turuncu);
}

.next-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  align-self: flex-start;
  font-weight: 450;
}

.next-link .muted {
  font-weight: 400;
}

/* Sık sorulanlar */
.faq {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}

.faq-copy {
  grid-column: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-right: calc(var(--col-pad) + var(--s-4));
}

.faq-list {
  grid-column: 3 / span 2;
}

.faq-list details {
  box-shadow: inset 0 1px 0 var(--c-cizgi);
}

.faq-list details:last-child {
  box-shadow: inset 0 1px 0 var(--c-cizgi), inset 0 -1px 0 var(--c-cizgi);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  font-size: 1.125rem;
  font-weight: 450;
  font-stretch: 92%;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--c-metin-2);
  transition: transform 200ms var(--ease-out);
}

.faq-list details[open] summary svg {
  transform: rotate(45deg);
}

.faq-list details p {
  padding-bottom: var(--s-4);
  color: var(--c-metin-2);
  max-width: 34em;
}

/* --------------------------------------------------------------------------
   İletişim
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.contact-copy {
  grid-column: 1 / span 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-right: calc(var(--col-pad) + var(--s-4));
}

.contact-copy .media-fill {
  flex: 1;
  margin-top: var(--s-2);
}

.contact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  margin: 0;
}

.contact-list div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--s-4);
  box-shadow: inset 0 1px 0 var(--c-cizgi-guclu);
}

.contact-list dt {
  font-size: 0.875rem;
  color: var(--c-metin-2);
}

.contact-list dd {
  margin: 0;
}

.contact-list a {
  font-size: 1.5rem;
  font-weight: 400;
  font-stretch: 88%;
  line-height: 1.25;
}

.contact-card {
  grid-column: 3 / span 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-left: var(--col-pad);
  padding: var(--s-6);
  border-radius: var(--r-l);
  background: var(--c-beyaz);
  box-shadow: var(--e-3), 0 0 0 1px rgba(36, 43, 47, 0.04);
}

.contact-card-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.contact-card .form {
  gap: var(--s-4);
}

.contact-card textarea.input {
  min-height: 6.5rem;
}

.contact-card .btn-primary {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Alt sayfalar: derinlik ve etkileşim
   Hover yalnızca tıklanabilen öğelerde. Canlanan: transform ve opacity.
   -------------------------------------------------------------------------- */

/* Numara rozetleri: beyaz, kabarık, üst kenarda ışık */
.step-num,
.timeline .step-num,
.step-title .step-num {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9f8 100%);
  box-shadow: var(--e-1), 0 0 0 1px rgba(36, 43, 47, 0.06), inset 0 -1px 0 rgba(36, 43, 47, 0.04);
  transition: transform 300ms var(--ease-out);
}

.step-title .step-num {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-m);
  font-size: 1rem;
}

/* Zaman çizelgesi: üstüne gelince arkasında kabarık bir yüzey belirir */
.timeline a {
  position: relative;
  z-index: 0;
  padding-block: var(--s-3);
}

.timeline a::before {
  content: "";
  position: absolute;
  inset: 0 var(--s-3) 0 calc(-1 * var(--s-3));
  z-index: -1;
  border-radius: var(--r-m);
  background: var(--c-beyaz);
  box-shadow: var(--e-2), 0 0 0 1px rgba(36, 43, 47, 0.04);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 200ms ease, transform 300ms var(--ease-out);
}

.timeline .rows-title {
  transition: color 200ms ease;
}

.timeline a:active::before {
  transform: scale(0.95);
}

/* Sık sorulanlar: satırın arkasında çukur yüzey */
.faq-list summary {
  position: relative;
  z-index: 0;
}

.faq-list summary::before {
  content: "";
  position: absolute;
  inset: 2px calc(-1 * var(--s-3));
  z-index: -1;
  border-radius: var(--r-m);
  background: var(--c-beton);
  box-shadow: inset 0 1px 2px rgba(36, 43, 47, 0.06);
  opacity: 0;
  transition: opacity 200ms ease;
}

.faq-list details[open] summary::before {
  opacity: 0.6;
}

/* İletişim bağlantıları: alt çizgi soldan uzar */
.contact-list a {
  position: relative;
  display: inline-block;
}

.contact-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}

/* İşlerimiz: görsel sayfadan kalkar */
.work-item .media-fill::before {
  opacity: 0;
}

.work-item:active .media-fill,
.media-fill[data-zoom]:active {
  scale: 0.99;
}

@media (hover: hover) and (pointer: fine) {
  .media-fill[data-zoom]:hover,
  .work-item:hover .media-fill {
    translate: 0 -4px;
  }

  .media-fill[data-zoom]:hover::before,
  .work-item:hover .media-fill::before {
    opacity: 1;
  }

  .media-fill[data-zoom]:hover img,
  .work-item:hover img {
    transform: scale(1.035);
  }

  [data-zoom]:hover .media-zoom {
    opacity: 1;
  }

  .media-fill[data-zoom]:active,
  .work-item:active .media-fill {
    translate: 0 -1px;
    scale: 0.99;
  }

  .work-item:hover .arrow-line,
  .next-link:hover .arrow-line {
    transform: scaleX(1.5);
  }

  .work-item:hover .arrow-head,
  .next-link:hover .arrow-head {
    transform: translateX(1.25rem) rotate(45deg);
  }

  .timeline a:hover::before {
    opacity: 1;
    transform: none;
  }

  .timeline a:hover .step-num,
  .step-title:hover .step-num {
    transform: translateY(-2px);
  }

  .timeline a:hover .rows-title,
  .faq-list summary:hover {
    color: var(--c-turuncu-koyu);
  }

  .faq-list summary:hover::before {
    opacity: 1;
  }

  .faq-list summary:hover svg {
    color: var(--c-turuncu-koyu);
  }

  .contact-list a:hover::after {
    transform: scaleX(1);
  }

  .input:not(:focus):hover {
    border-color: rgba(36, 43, 47, 0.32);
  }
}

/* --------------------------------------------------------------------------
   Alt sayfalar: kısa masaüstü ekranı
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) and (max-height: 52rem) {
  .split-copy,
  .faq-copy,
  .contact-copy {
    gap: var(--s-4);
  }

  .rows li {
    padding-block: var(--s-3);
  }

  .steps-intro {
    gap: var(--s-5);
  }

  .contact-card {
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
  }

  .contact-card textarea.input {
    min-height: 5rem;
  }

  .faq-list summary {
    padding-block: var(--s-3);
  }
}

/* --------------------------------------------------------------------------
   Alt sayfalar: tablet ve telefon — metin üstte, görsel kalan yeri alır
   -------------------------------------------------------------------------- */
@media (max-width: 63.99rem) {
  .split,
  .work,
  .contact {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
  }

  .split-copy,
  .split--flip .split-copy,
  .contact-copy,
  .work-copy {
    padding: 0;
  }

  .split-copy {
    align-self: stretch;
  }

  .split-media {
    flex: 1;
  }

  .work {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--s-6) var(--s-4);
  }

  .work-copy {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .work-item--main,
  .work-item--side {
    grid-column: auto;
    grid-row: 2;
    height: auto;
    align-self: stretch;
    padding: 0;
  }

  .faq {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }

  .faq-copy,
  .faq-list {
    grid-column: 1;
    padding: 0;
  }

  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4) 0;
  }

  .contact-copy {
    flex: none;
  }

  .contact-card {
    margin: 0;
  }

  .contact-copy .media-fill {
    display: none;
  }
}

@media (max-width: 47.99rem) {
  .page-title {
    font-size: 2.5rem;
  }

  .split,
  .contact {
    gap: var(--s-5);
  }

  .split-copy {
    gap: var(--s-4);
  }

  .split-copy .lead,
  .faq-copy .lead,
  .contact-copy .lead,
  .steps-intro .lead {
    font-size: 1.0625rem;
  }

  .rows li {
    padding-block: var(--s-3);
  }

  .rows-title {
    font-size: 1.0625rem;
  }

  /* Telefonda ikincil açıklamalar gizlenir; başlıklar kalır */
  .rows--two {
    column-gap: var(--s-4);
  }

  .rows--two .rows-text,
  .timeline .small {
    display: none;
  }

  .rows--two li {
    padding-block: var(--s-2);
  }

  .steps-intro {
    gap: var(--s-5);
  }

  .steps-intro .section-head .lead {
    margin-top: var(--s-2);
  }

  .timeline {
    gap: var(--s-3) var(--s-2);
  }

  .step-title {
    gap: var(--s-3);
  }

  .checks {
    gap: var(--s-1);
  }

  .work {
    gap: var(--s-5) var(--s-3);
  }

  .work-cap .arrow {
    display: none;
  }

  .work-cap .title {
    font-size: 1.125rem;
  }

  .faq {
    gap: var(--s-5);
  }

  .faq-copy {
    gap: var(--s-4);
  }

  .faq-list summary {
    padding-block: var(--s-3);
    font-size: 1rem;
  }

  .contact-copy {
    gap: var(--s-3);
  }

  /* Telefonda kart açıklaması gizlenir; gönder düğmesi zaten WhatsApp diyor */
  .contact-card-head .small {
    display: none;
  }

  .contact-list {
    gap: var(--s-4);
  }

  .contact-list a {
    font-size: 1.125rem;
  }

  .contact-card {
    gap: var(--s-4);
    padding: var(--s-5) var(--s-4) var(--s-4);
  }

  .contact-card .form {
    gap: var(--s-3);
  }

  .contact-card .form-row {
    gap: var(--s-3);
  }

  .contact-card textarea.input {
    min-height: 4rem;
  }

  .contact-card .btn-primary {
    align-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-fill {
    translate: none !important;
    scale: none !important;
  }

  .work-item img,
.media-fill img,
.step-num,
.timeline a::before {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .media-chip {
    background: rgba(36, 43, 47, 0.86);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   3D model, telefonda: site içinde tam ekran katman (yeni sekme yerine)
   ========================================================================== */
.model-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #e5eaed;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5rem);
  transition: opacity 250ms ease, transform 250ms var(--ease-drawer), visibility 0s linear 250ms;
}

.model-sheet.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 300ms ease, transform 400ms var(--ease-drawer);
}

.model-sheet iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sol üstte, modelin kamera düğmeleriyle aynı hizada; 44px dokunma alanı */
.model-close {
  position: absolute;
  z-index: 1;
  top: calc(0.625rem + env(safe-area-inset-top, 0px));
  left: 0.625rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--c-ters);
  background: rgba(36, 43, 47, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px -4px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .model-sheet,
  .model-sheet.is-open {
    transform: none;
  }
}

/* ==========================================================================
   Alt sayfalarda koyu bölüm (2026-11-11): sitenin tamamı tek koyu dil konuşur.
   Açık zeminli bölümlerin (Biz kimiz, İletişim, proje "hakkında") koyu karşılığı.
   ========================================================================== */
.section--gece {
  background: var(--c-gece);
  color: var(--c-ters);
}

.section--gece .muted,
.section--gece .lead.muted,
.section--gece .rows-text,
.section--gece .field label .muted {
  color: var(--c-ters-2);
}

.section--gece .rows li {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.section--gece .rows li:last-child,
.section--gece .rows--two li:nth-last-child(2):nth-child(odd) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.section--gece .contact-list div {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.section--gece .contact-list dt {
  color: var(--c-ters-3);
}

/* İkincil buton koyu zeminde cam olur */
.section--gece .btn-quiet {
  color: var(--c-ters);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2px 8px -2px rgba(0, 0, 0, 0.28);
}

@media (hover: hover) and (pointer: fine) {
  .section--gece .btn-quiet:hover {
    background: rgba(255, 255, 255, 0.16);
  }
}

/* Form koyu zeminde: kart yerine ince çerçeveli alan, alanlar koyu */
.section--gece .contact-card {
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-ters);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.section--gece .input {
  color: var(--c-ters);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.section--gece select.input option {
  color: var(--c-metin);
}

.section--gece .field-error {
  color: #ff9a6b;
}

/* Geç yüklenen görsel: küçük kopyası bulanık ön izleme olarak hemen görünür.
   --lqip içindeki url() bu stil dosyasına göre çözülür: sayfada `url(../img/…)` yazılır. */
.media-clip[style*="--lqip"]::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  background: var(--lqip) center / cover no-repeat;
  filter: blur(14px);
}

.media-fill img {
  z-index: 0;
}

/* Proje anahtarında satıştaki ile tamamlananları ayıran ince işaret */
.switch-sep {
  align-self: center;
  flex: none;
  color: var(--c-ters-3);
  font-size: 0.8125rem;
  white-space: nowrap;
  padding-left: var(--s-4);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18);
}

/* Hero: başlığın altında satıştaki proje ve tek ana eylem */
.hero-lead {
  max-width: 30em;
  margin-top: var(--s-5);
  color: var(--c-ters-2);
}

.hero-actions {
  margin-top: var(--s-5);
}

@media (max-width: 47.99rem) {
  .hero-lead {
    margin-top: var(--s-4);
    font-size: 1rem;
  }

  .hero-actions {
    margin-top: var(--s-4);
  }
}

/* Dar masaüstünde (1360px altı) beş proje adı ve ayıraç başlık satırına sığsın diye
   "Görseller temsilidir." notu başlıktan çekilir; not footer'da her sayfada durur. */
@media (min-width: 64rem) and (max-width: 84.99rem) {
  .projects-head .projects-sub {
    display: none;
  }
}

/* ==========================================================================
   Tanıtım filmi (2026-11-12): İnci Prime reklam filmi, dikey 9:16, sesli.
   Bölümde sessiz önizleme ekrandayken döner; tıklanınca tam ekran oynatıcı açılır.
   Masaüstünde dikey çerçeve sağda, metin solda; 64rem altında film bölümü kaplar.
   ========================================================================== */
.reel {
  isolation: isolate;
  overflow: hidden;
  background: var(--c-gece);
  color: var(--c-ters);
}

/* Filmin kendi ışığı: kapak karesinin bulanık hali, kenarlarda zemine erir */
.reel-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(../video/film-isik.webp) center / cover no-repeat;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(60% 70% at 68% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(60% 70% at 68% 50%, #000 0%, transparent 100%);
  pointer-events: none;
}

.reel-inner {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--s-6);
  align-items: center;
}

.reel-copy {
  grid-column: 1 / span 6;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.reel-copy .lead {
  max-width: 28em;
  color: var(--c-ters-2);
}

.reel-copy .button-row {
  margin-top: var(--s-3);
}

/* Bölümler: süre ve ad. Önizlemede o an dönen bölüm altınla işaretlenir */
.reel-chapters {
  display: flex;
  flex-direction: column;
  max-width: 26rem;
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.reel-chapters button {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: baseline;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s-2) 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--c-ters-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: color 200ms ease;
}

.reel-time {
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-ters-3);
  transition: color 200ms ease;
}

.reel-chapters [aria-current="true"] {
  color: var(--c-ters);
}

.reel-chapters [aria-current="true"] .reel-time {
  color: var(--c-altin);
}

.reel-chapters button:focus-visible {
  outline: 2px solid var(--c-ters);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

/* Çerçeve: dikey ekran. Gölge ayrı katmanda, yalnızca opaklığı değişir */
.reel-frame {
  position: relative;
  grid-column: 8 / span 5;
  grid-row: 1;
  justify-self: center;
  height: 100%;
  max-height: 46rem;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: var(--r-l);
  background: #000;
  color: var(--c-ters);
  cursor: pointer;
  transition: transform 300ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.reel-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--e-3);
  opacity: 0.6;
  transition: opacity 300ms ease;
  pointer-events: none;
}

/* İnce ışık kenarı + alt okunurluk */
.reel-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(0deg, rgba(10, 12, 13, 0.62) 0%, rgba(10, 12, 13, 0) 30%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.reel-preview {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  pointer-events: none;
}

.reel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%;
  color: var(--c-ters);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 24px -8px rgba(0, 0, 0, 0.45);
  transition: transform 300ms var(--ease-out);
}

.reel-play svg {
  width: 1.625rem;
  height: 1.625rem;
  margin-left: 0.2rem;
}

.reel-badge {
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-5);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.9375rem;
  font-weight: 500;
}

.reel-badge svg {
  width: 1.125rem;
  height: 1.125rem;
}

.reel-badge-time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--c-ters-2);
}

/* Önizlemenin konumu: altta ince çizgi */
.reel-progress {
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-3);
  z-index: 1;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.reel-progress i {
  display: block;
  height: 100%;
  background: var(--c-ters);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform 260ms linear;
}

.reel-progress.no-anim i {
  transition: none;
}

.reel-frame:focus-visible {
  outline: 2px solid var(--c-ters);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .reel-frame:hover {
    transform: translateY(-4px);
  }

  .reel-frame:hover::before {
    opacity: 1;
  }

  .reel-frame:hover .reel-play {
    transform: scale(1.06);
  }

  .reel-chapters button:hover {
    color: var(--c-ters);
  }

  .reel-chapters button:hover .reel-time {
    color: var(--c-turuncu);
  }
}

/* Masaüstü: tek ekran, yükseklik sabit; esneyen alan film çerçevesi */
@media (min-width: 64rem) {
  .reel {
    height: 100svh;
  }
}

@media (min-width: 64rem) and (max-height: 47.5rem) {
  .reel-copy {
    gap: var(--s-3);
  }

  .reel-chapters button {
    min-height: 2.5rem;
    padding-block: var(--s-1);
  }
}

/* 64rem altı: film bölümü kaplar (dikey ekranda dikey film), metin altta */
@media (max-width: 63.99rem) {
  .reel {
    justify-content: flex-end;
  }

  .reel-glow {
    display: none;
  }

  .reel-inner {
    flex: none;
    display: block;
  }

  .reel .reel-frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .reel .reel-frame::before,
  .reel .reel-badge,
  .reel .reel-progress {
    display: none;
  }

  .reel .reel-frame::after {
    box-shadow: none;
    background: linear-gradient(0deg, rgba(16, 19, 21, 0.92) 0%, rgba(16, 19, 21, 0.74) 40%, rgba(16, 19, 21, 0.08) 70%, rgba(16, 19, 21, 0.32) 100%);
  }

  .reel .reel-play {
    top: 32%;
  }

  .reel-copy {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }

  .reel-copy > * {
    pointer-events: auto;
  }

  .reel-frame:focus-visible {
    outline-offset: -4px;
  }
}

@media (max-width: 47.99rem) {
  .reel-chapters {
    display: none;
  }

  .reel .reel-play {
    top: 30%;
    width: 4rem;
    height: 4rem;
    margin: -2rem 0 0 -2rem;
  }

  .reel-copy .button-row .btn {
    flex: 1;
  }
}

/* Projeler sayfası, "İnci Prime hakkında": görselin yerinde dikey film */
.split-reel {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.split-reel .reel-frame {
  height: 100%;
  max-height: none;
}

@media (max-width: 63.99rem) {
  .split-reel {
    min-height: 16rem;
  }

  .split-reel .reel-frame {
    width: 100%;
    aspect-ratio: auto;
  }

  .split-reel .reel-badge {
    left: var(--s-4);
    right: auto;
    gap: var(--s-2);
  }

  .split-reel .reel-badge-time {
    margin-left: var(--s-2);
  }
}

/* --------------------------------------------------------------------------
   Oynatıcı: tam ekran katman. Masaüstünde film ortada, sağda bölümler ve eylem;
   64rem altında film ekranı kaplar, eylem filmin sonunda gelir.
   -------------------------------------------------------------------------- */
.reel-player {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  place-items: center;
  color: var(--c-ters);
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}

.reel-player.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 250ms ease;
}

.reel-player-bg {
  position: absolute;
  inset: 0;
  background: var(--c-gece);
}

.reel-player-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-7);
  height: calc(100svh - 2 * var(--s-6));
  max-height: 60rem;
}

.reel-stage {
  position: relative;
  height: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-l);
  overflow: hidden;
  background: #000;
  box-shadow: var(--e-3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.reel-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.reel-tap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.reel-player.is-idle .reel-tap {
  cursor: none;
}

.reel-bigplay {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 24px -8px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
  pointer-events: none;
}

.reel-bigplay svg {
  width: 1.625rem;
  height: 1.625rem;
  margin-left: 0.2rem;
}

.reel-player.is-paused:not(.is-ended) .reel-bigplay {
  opacity: 1;
  transform: none;
}

/* Kontroller: alttan koyulaşan şerit üstünde; oynarken 2.5 sn hareketsizlikte söner */
.reel-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(10, 12, 13, 0.78) 0%, rgba(10, 12, 13, 0) 100%);
  transition: opacity 250ms ease;
}

.reel-player.is-idle .reel-hud,
.reel-player.is-ended .reel-hud {
  opacity: 0;
}

.reel-player.is-idle .reel-hud:focus-within {
  opacity: 1;
}

.reel-hud .icon-btn {
  flex: none;
}

.reel-hud .icon-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.reel-toggle .i-play,
.reel-player.is-paused .reel-toggle .i-pause,
.reel-mute .i-off,
.reel-player.is-muted .reel-mute .i-on {
  display: none;
}

.reel-player.is-paused .reel-toggle .i-play,
.reel-player.is-muted .reel-mute .i-off {
  display: block;
}

/* Konum çubuğu: geniş dokunma alanı, ince iz; dolgu ve tutamak yalnızca transform ile */
.reel-scrub {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  cursor: pointer;
  touch-action: none;
}

.reel-scrub:focus-visible {
  outline: 2px solid var(--c-ters);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

.reel-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.26);
  overflow: hidden;
}

.reel-fill {
  position: absolute;
  inset: 0;
  background: var(--c-ters);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* Bölüm sınırları: izde küçük boşluk */
.reel-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(10, 12, 13, 0.9);
}

.reel-rail {
  position: absolute;
  inset: 0;
  transform: translateX(calc(var(--p, 0) * 100%));
  pointer-events: none;
}

.reel-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin: -0.4375rem 0 0 -0.4375rem;
  border-radius: 50%;
  background: var(--c-ters);
  box-shadow: var(--e-1);
  transform: scale(0.72);
  transition: transform 160ms var(--ease-out);
}

.reel-scrub:hover .reel-knob,
.reel-scrub:focus-visible .reel-knob,
.reel-scrub.is-dragging .reel-knob {
  transform: none;
}

.reel-clock {
  flex: none;
  min-width: 5.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--c-ters-2);
}

/* Film bitince: tekrar ve (64rem altında) bilgi alın */
.reel-end {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-5) calc(var(--s-7) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(10, 12, 13, 0.86) 0%, rgba(10, 12, 13, 0) 100%);
  opacity: 0;
  transform: translateY(0.5rem);
  visibility: hidden;
  transition: opacity 250ms ease, transform 250ms var(--ease-out), visibility 0s linear 250ms;
}

.reel-player.is-ended .reel-end {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 300ms ease, transform 300ms var(--ease-out);
}

.reel-end .button-row {
  justify-content: center;
  margin: 0;
}

.reel-end-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Yan: proje, bölümler, eylem */
.reel-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: 18rem;
}

.reel-side .reel-chapters {
  margin: 0;
}

.reel-side-text {
  margin: 0;
  color: var(--c-ters-2);
}

.reel-side .btn {
  align-self: flex-start;
  margin-top: var(--s-3);
}

.reel-close {
  position: absolute;
  top: calc(var(--s-5) + env(safe-area-inset-top, 0px));
  right: var(--s-5);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
}

@media (min-width: 64rem) {
  .reel-end-cta {
    display: none;
  }
}

@media (max-width: 63.99rem) {
  .reel-player-body {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .reel-stage {
    width: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }

  .reel-side {
    display: none;
  }

  .reel-close {
    top: calc(var(--s-3) + env(safe-area-inset-top, 0px));
    right: var(--s-3);
  }

  .reel-player.is-idle .reel-close {
    opacity: 0;
  }

  .reel-close {
    transition: opacity 250ms ease, transform 160ms var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel-frame,
  .reel-play,
  .reel-bigplay,
  .reel-end {
    transform: none !important;
  }

  .reel-progress i {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .reel-play,
  .reel-bigplay {
    background: rgba(17, 20, 22, 0.86);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   Projeler, dördüncü tur (2026-11-12, kullanıcı isteği: "proje adları zor
   görünüyor, detaylar fotoğrafın önüne geçiyor").
   - Proje anahtarı koyu cam kapsül; seçili proje kabarık beyaz yüzey, kayar.
   - Fotoğraf artık bölümü kaplamaz: sağdaki hücreye kendi oranıyla, tamamı
     görünür biçimde sığar. Metin solda, fotoğrafın üstüne binmez.
   - Fotoğrafın arkasında kendi bulanık ışığı; kenarlara doğru siyaha erir.
   ========================================================================== */
.projects--cinema {
  height: max(100svh, 36rem);
  overflow: hidden;
}

.projects--cinema .projects-inner {
  min-height: 0;
  justify-content: flex-start;
  gap: var(--s-5);
}

.projects--cinema .projects-body {
  flex: 1;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

/* ---------- Anahtar: koyu cam kapsül ---------- */
.switcher,
.jump {
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(var(--glass-rgb), 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.1), var(--e-1);
}

.switch,
.jump a {
  position: relative;
  z-index: 1;
  flex: none;
  height: 2.5rem;
  padding: 0 var(--s-4);
  border-radius: var(--r-m);
  color: var(--c-ters-2);
  font-size: 0.9375rem;
  transition: color 200ms ease, background-color 200ms ease;
}

.switch[aria-selected="true"],
.jump a[aria-current] {
  color: var(--c-metin);
}

.jump a[aria-current] {
  background: var(--c-ters);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 12px -4px rgba(0, 0, 0, 0.35);
}

.switcher-thumb {
  top: 4px;
  bottom: 4px;
  height: auto;
  border-radius: var(--r-m);
  background: var(--c-ters);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 12px -4px rgba(0, 0, 0, 0.35);
}

.switch:focus-visible,
.jump a:focus-visible {
  outline: 2px solid var(--c-ters);
  outline-offset: 1px;
}

.switcher .switch-sep,
.jump .switch-sep {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  margin-left: var(--s-2);
  padding: 0 var(--s-3);
  font-size: 0.8125rem;
  color: var(--c-ters-3);
}

@media (hover: hover) and (pointer: fine) {
  .switch:not([aria-selected="true"]):hover,
  .jump a:not([aria-current]):hover {
    color: var(--c-ters);
    background: rgba(255, 255, 255, 0.08);
  }
}

/* ---------- Hücreler ---------- */
.projects--cinema .project {
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: var(--s-4);
  align-items: stretch;
}

.projects--cinema .stage {
  grid-column: 5 / -1;
  grid-row: 1;
}

/* Hücre bir kap sorgusu kabıdır: çerçeve hem genişliğe hem yüksekliğe sığar */
.projects--cinema .stage-tilt {
  container-type: size;
  display: grid;
  place-items: center;
}

.projects--cinema .stage-frame {
  width: min(100cqw, 100cqh * var(--ar, 1.5));
  height: min(100cqh, 100cqw / var(--ar, 1.5));
  border-radius: var(--r-l);
  transition: transform 300ms var(--ease-out);
}

.projects--cinema .stage-frame.is-3d {
  width: 100%;
  height: 100%;
}

.projects--cinema .stage-img {
  border-radius: inherit;
}

/* Fotoğrafın kendi ışığı: aynı görselin bulanık hali, bölümün tamamında */
.stage-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-gece) center / cover no-repeat;
  filter: blur(56px) saturate(130%);
  opacity: 0.7;
  transform: scale(1.15);
  pointer-events: none;
  transition: background-image 600ms ease;
}

/* Işık kenarlara ve metnin bulunduğu sola doğru siyaha erir */
.projects--cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 68% at 66% 50%, rgba(17, 20, 22, 0) 0%, rgba(17, 20, 22, 0.5) 55%, var(--c-gece) 100%),
    linear-gradient(90deg, var(--c-gece) 0%, rgba(17, 20, 22, 0.78) 26%, rgba(17, 20, 22, 0) 52%);
}

/* Sol: proje; künye kartın içinde, iki sütun */
.projects--cinema .project-card {
  grid-column: 1 / span 4;
  grid-row: 1 / -1;
  align-self: end;
  min-width: 0;
}

.projects--cinema .project-name {
  font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.75rem);
  text-wrap: balance;
}

.projects--cinema .project-desc {
  font-size: 1.0625rem;
}

.project-card .spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--s-5);
  width: 100%;
  margin-top: var(--s-2);
}

.project-card .spec div {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  padding-block: var(--s-3);
}

.project-card .spec dt {
  font-size: 0.8125rem;
}

.project-card .spec dd {
  text-align: left;
}

/* Sağ alt: galeri kontrolü, hücrenin tam genişliğinde; fotoğrafın boyutuna bağlı değil */
.projects--cinema .project-side {
  grid-column: 5 / -1;
  grid-row: 2;
}

.projects--cinema .stage-bar {
  padding-top: 0;
  box-shadow: none;
}

/* 3D model: sahne bölümün içerik alanını kaplar */
.projects--cinema .project.is-3d .stage {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.projects--cinema .stage-3d {
  inset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .projects--cinema .stage-frame:not(.is-3d):hover {
    transform: translateY(-4px);
  }
}

@media (min-width: 64rem) {
  .projects--cinema .stage-frame {
    box-shadow: var(--e-3);
  }
}

/* Kısa masaüstü */
@media (min-width: 64rem) and (max-height: 52rem) {
  .projects--cinema .project-card {
    gap: var(--s-3);
  }

  .project-card .spec div {
    padding-block: var(--s-2);
  }
}

/* Dar masaüstü: beş ad ve ayıraç kapsüle sığsın */
@media (min-width: 64rem) and (max-width: 84.99rem) {
  .projects--cinema .projects-head {
    gap: var(--s-3) var(--s-4);
  }

  /* Kapsül ve 3D anahtarı tek satıra sığsın: etiket ekran okuyucuya kalır */
  .projects--cinema .projects-head > .projects-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .switch,
  .jump a {
    padding: 0 var(--s-3);
  }
}

/* ---------- 64rem altı: fotoğraf üstte ve esner, metin altta ---------- */
@media (max-width: 63.99rem) {
  .projects--cinema {
    height: max(100svh, 40rem);
  }

  .projects--cinema .projects-inner {
    gap: var(--s-4);
  }

  .projects--cinema .project {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: auto;
    row-gap: var(--s-3);
  }

  .projects--cinema .stage {
    grid-column: 1;
    grid-row: 1;
    min-height: 9rem;
  }

  .projects--cinema .project-side {
    width: auto;
  }

  .projects--cinema .project-name {
    font-size: 2.25rem;
  }

  .projects--cinema .project-desc {
    font-size: 1rem;
  }

  .project-card .spec {
    margin-top: 0;
  }

  .projects--cinema::after {
    background:
      radial-gradient(ellipse 85% 40% at 50% 30%, rgba(17, 20, 22, 0) 0%, rgba(17, 20, 22, 0.55) 60%, var(--c-gece) 100%),
      linear-gradient(0deg, var(--c-gece) 0%, var(--c-gece) 45%, rgba(17, 20, 22, 0) 70%);
  }

  /* Kapsül ekranın tamamını alır, kayar */
  .projects--cinema .switcher,
  .projects--cinema .jump {
    flex: 1 1 auto;
  }

  .switch,
  .jump a {
    height: 2.25rem;
    padding: 0 var(--s-3);
  }
}

@media (max-width: 47.99rem) {
  .projects--cinema .project {
    row-gap: var(--s-3);
  }

  .project-card .spec div {
    padding-block: var(--s-2);
  }

  .project-card .spec dd {
    font-size: 0.9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projects--cinema .stage-frame {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .switcher,
  .jump {
    background: var(--c-gece);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* 64rem altı sıra: fotoğraf, hemen altında galeri; sonra ad, açıklama, künye, butonlar */
@media (max-width: 63.99rem) {
  .projects--cinema .stage-bar { order: 1; }
  .projects--cinema .filmstrip { order: 2; margin-top: 0; }
  .projects--cinema .status { order: 3; margin-top: var(--s-2); }
  .projects--cinema .project-name { order: 4; }
  .projects--cinema .project-desc { order: 5; }
  .projects--cinema .spec { order: 6; }
  .projects--cinema .project-actions { order: 7; }
}

/* Telefonda fotoğrafa yer: oklar ve açıklama çekilir; kaydırma ve konum çizgileri kalır */
@media (max-width: 47.99rem) {
  .projects--cinema .stage-bar {
    display: none;
  }

  .projects--cinema .filmstrip {
    margin-top: calc(-1 * var(--s-2));
  }
}

/* Kayan kapsül: devamı olan kenar yumuşakça söner */
.switcher.more-right,
.jump.more-right {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
}

.switcher.more-left,
.jump.more-left {
  -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(270deg, #000 calc(100% - 3rem), transparent);
}

.switcher.more-left.more-right,
.jump.more-left.more-right {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

/* Galeri tuşları fotoğraftan bağımsız (2026-11-12, kullanıcı isteği): satır hücrenin tam
   genişliğinde ve sabit yerde; oklar ve sayaç ortada, açıklama solda, büyütme sağda.
   Fotoğraf değişip boyutu değişse de tuşlar yerinden oynamaz. */
@media (min-width: 48rem) {
  .projects--cinema .stage-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "cap nav exp";
  }
}

.projects--cinema .stage-nav {
  grid-area: nav;
}

.projects--cinema .stage-caption {
  grid-area: cap;
}

.projects--cinema .stage-expand {
  grid-area: exp;
  justify-self: end;
}

/* ==========================================================================
   Projeler, telefonda (ana sayfa, 2026-11-12, kullanıcı isteği: "yukarıdaki
   projeler çok zor görünüyor; liste olsun, resimler tam ekrana sığsın, detaylar
   altta kalsın, isteyen kaydırır"). Bölüm burada tek ekranı aşar (bilerek).
   - Kayan kapsül yerine tek satırlık seçici (.project-pick); dokununca alttan
     liste (.picker) açılır.
   - Fotoğraf kenardan kenara, ilk ekranın kalanını doldurur (cover); dokununca
     lightbox'ta tamamı görünür. Altında konum çizgileri, sonra detaylar.
   - Detayların sonunda "Sonraki proje".
   ========================================================================== */
.project-pick,
.project-next,
.picker,
.picker-scrim {
  display: none;
}

@media (max-width: 47.99rem) {
  .projects--picker {
    --pick-h: 3.5rem;
    /* ilk ekran: seçici + fotoğraf + konum çizgileri + durumun ucu */
    --stage-h: calc(100svh - var(--screen-top) - var(--pick-h) - var(--s-3) - 4.75rem);
    height: auto;
    min-height: 100svh;
    padding-bottom: var(--s-7);
  }

  .projects--picker .projects-inner {
    gap: var(--s-3);
  }

  .projects--picker .projects-head {
    gap: var(--s-2);
  }

  .projects--picker .projects-head > .switcher {
    display: none;
  }

  /* Seçici: koyu cam satır; küçük resim, ad, durum, sıra, ok */
  .project-pick {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    height: var(--pick-h);
    padding: 0 var(--s-3) 0 6px;
    border: 0;
    border-radius: 14px;
    color: var(--c-ters);
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: rgba(var(--glass-rgb), 0.62);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.1), var(--e-1);
    transition: transform 160ms var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }

  .project-pick:active {
    transform: scale(0.98);
  }

  .project-pick:focus-visible {
    outline: 2px solid var(--c-ters);
    outline-offset: 2px;
  }

  .project-pick-thumb {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-s);
    object-fit: cover;
    background: var(--c-antrasit);
  }

  .project-pick-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }

  .project-pick-name {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .project-pick-sub {
    font-size: 0.8125rem;
    color: var(--c-ters-3);
  }

  .project-pick-count {
    flex: none;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-ters-3);
  }

  .project-pick-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
  }

  .project-pick-icon svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  /* 3D: seçicinin yanında aynı yükseklikte tek düğme */
  .projects--picker .view-toggle {
    padding: 4px;
    border-radius: 14px;
  }

  .projects--picker .view-btn[data-view="photos"] {
    display: none;
  }

  .projects--picker .view-btn {
    height: calc(var(--pick-h) - 8px);
    padding: 0 var(--s-3);
    font-size: 0.875rem;
  }

  .projects--picker .view-btn svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
  }

  /* Fotoğraf çerçeveli ve tamamı görünür (2026-11-12, kullanıcı isteği: "yanlardan
     kaymış, yanları tam sığsın, çerçeveli olsun"). Kenar boşluğu sayfanınki;
     çerçeve kendi oranıyla hücreye sığar (--ar). Hücrenin yüksekliği projenin en
     dik fotoğrafına göre sabittir (--ar-min, JS): proje içinde fotoğraf değişince
     konum çizgileri ve detaylar yerinden oynamaz. */
  .projects--picker .project {
    grid-template-rows: auto;
    align-content: start;
  }

  .projects--picker .stage {
    height: min(var(--stage-h), calc((100vw - 2 * var(--gutter)) / var(--ar-min, 1.5)));
  }

  .projects--picker .stage-frame {
    box-shadow: var(--e-2);
  }

  .projects--picker .filmstrip {
    margin-top: calc(-1 * var(--s-2));
  }

  .projects--picker .film {
    height: 1.75rem;
  }

  .projects--picker .status {
    margin-top: var(--s-1);
  }

  /* Işık fotoğrafın arkasında kalır; detaylar düz koyu zeminde okunur */
  .projects--picker::after {
    background: linear-gradient(180deg, rgba(17, 20, 22, 0.2) 0, rgba(17, 20, 22, 0.6) 40%, var(--c-gece) 62%);
  }

  /* Sonraki proje: detayların sonunda tek satır */
  .project-next {
    order: 8;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    margin-top: var(--s-4);
    padding: var(--s-4) 0 0;
    border: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    background: none;
    color: var(--c-ters);
    text-align: left;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .project-next img {
    flex: none;
    width: 4.5rem;
    height: 3.375rem;
    border-radius: var(--r-s);
    object-fit: cover;
    background: var(--c-antrasit);
  }

  .project-next-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }

  .project-next-label {
    font-size: 0.8125rem;
    color: var(--c-ters-3);
  }

  .project-next-name {
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  .project-next svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--c-ters-2);
  }

  .project-next:active img {
    transform: scale(0.97);
  }

  .project-next:focus-visible {
    outline: 2px solid var(--c-ters);
    outline-offset: 4px;
  }

  /* ---------- Liste: alttan açılan panel ---------- */
  .picker-scrim {
    display: block;
    z-index: 60;
    background: rgba(0, 0, 0, 0.5);
  }

  .picker {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    display: flex;
    flex-direction: column;
    max-height: 88svh;
    border-radius: var(--r-l) var(--r-l) 0 0;
    background: var(--c-antrasit);
    color: var(--c-ters);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--e-3);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 250ms var(--ease-drawer), visibility 0s linear 250ms;
  }

  .picker.is-open {
    visibility: visible;
    transform: none;
    transition: transform 400ms var(--ease-drawer);
  }

  .picker.is-dragging {
    transition: none;
  }

  .picker-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-5) var(--s-4) var(--s-3);
    touch-action: none;
    cursor: grab;
  }

  .picker-grip {
    position: absolute;
    top: var(--s-2);
    left: 50%;
    width: 2.25rem;
    height: 4px;
    margin-left: -1.125rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.28);
  }

  .picker-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  .picker-close svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .picker-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--s-2) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  }

  .picker-group {
    margin: var(--s-3) var(--s-2) var(--s-1);
    font-size: 0.8125rem;
    color: var(--c-ters-3);
  }

  .picker-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .picker-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 4.5rem;
    padding: var(--s-2);
    border: 0;
    border-radius: var(--r-m);
    background: none;
    color: var(--c-ters);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background-color 160ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .picker-row:active {
    background: rgba(255, 255, 255, 0.06);
  }

  .picker-row[aria-current="true"] {
    background: rgba(255, 255, 255, 0.1);
  }

  .picker-row:focus-visible {
    outline: 2px solid var(--c-ters);
    outline-offset: -2px;
  }

  .picker-row img {
    flex: none;
    width: 4.5rem;
    height: 3.375rem;
    border-radius: var(--r-s);
    object-fit: cover;
    background: var(--c-gece);
  }

  .picker-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }

  .picker-name {
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  .picker-sub {
    font-size: 0.8125rem;
    color: var(--c-ters-3);
  }

  .picker-check {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--c-turuncu);
    opacity: 0;
  }

  .picker-row[aria-current="true"] .picker-check {
    opacity: 1;
  }

  .picker-note {
    margin: var(--s-4) var(--s-2) 0;
    font-size: 0.8125rem;
    color: var(--c-ters-3);
  }
}

@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
  .picker,
  .picker.is-open {
    transform: none;
  }

  .picker {
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }

  .picker.is-open {
    opacity: 1;
    transition: opacity 200ms ease;
  }
}

@media (max-width: 47.99rem) and (prefers-reduced-transparency: reduce) {
  .project-pick {
    background: var(--c-antrasit);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 47.99rem) {
  .projects--picker .view-btn-more {
    display: none;
  }
}

/* Telefonda bölüm seçili projenin boyu kadardır: kısa projelerin altında boşluk kalmaz */
@media (max-width: 47.99rem) {
  .js .projects--picker .project:not(.is-active) {
    display: none;
  }
}

/* ==========================================================================
   3D uyarısı (2026-11-12, kullanıcı isteği): 3D düğmesinin altında
   "3D görünüme geçmek için tıklayın" ve yukarıyı gösteren parlayan turuncu ok;
   düğmenin çevresinde yumuşak bir ışık nabzı. 3D bir kez açılınca ikisi de kalkar.
   Yalnızca transform ve opacity canlanır; hareketi azalt açıksa durur.
   ========================================================================== */
.view-toggle {
  position: relative;
}

.hint-3d {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--c-ters);
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: opacity 200ms ease;
}

.hint-3d svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.5rem;
  color: var(--c-turuncu);
  filter: drop-shadow(0 0 3px rgba(227, 90, 36, 0.95)) drop-shadow(0 0 8px rgba(227, 90, 36, 0.7));
  animation: hint-3d-nudge 1.4s var(--ease-in-out) infinite;
}

@keyframes hint-3d-nudge {
  0%, 100% { transform: translate(0, 0); opacity: 1; }
  50% { transform: translate(2px, -3px); opacity: 0.55; }
}

/* Düğmenin çevresinde ışık nabzı */
.view-btn[data-view="3d"] {
  position: relative;
}

.view-btn[data-view="3d"]::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 11px;
  box-shadow: 0 0 0 1.5px var(--c-turuncu), 0 0 14px 2px rgba(227, 90, 36, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: hint-3d-pulse 1.8s ease-in-out infinite;
}

@keyframes hint-3d-pulse {
  0%, 100% { opacity: 0; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1); }
}

.view-toggle.hint-done .hint-3d,
.view-toggle:has([data-view="3d"][aria-pressed="true"]) .hint-3d {
  opacity: 0;
}

.view-toggle.hint-done .view-btn[data-view="3d"]::after,
.view-toggle:has([data-view="3d"][aria-pressed="true"]) .view-btn[data-view="3d"]::after,
.view-toggle.is-off .view-btn[data-view="3d"]::after {
  animation: none;
  opacity: 0;
}

/* Dar ekranda başlıkla fotoğraf arası uyarıya yetmez: başlık altında yer açılır */
@media (max-width: 63.99rem) {
  .projects-head:has(.view-toggle:not(.is-off):not(.hint-done)) {
    margin-bottom: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hint-3d svg {
    animation: none;
  }

  .view-btn[data-view="3d"]::after {
    animation: none;
    opacity: 0.8;
  }
}

/* ==========================================================================
   Hero çizgileri yalnızca alttaki yol şeridinde (2026-11-12, kullanıcı isteği:
   "herodaki çizgileri silelim, sadece alttaki butonlarda kalsın").
   Masaüstünde şeridin dikey ayraçları bu çizgilerdir ve açılışta alttan yükselir;
   64rem altında şeridin kendi ayraçları kalır, çizgiler gizlenir.
   ========================================================================== */
.hero-paths .lines {
  top: 0;
  z-index: 0;
}

.hero-paths .paths-row {
  position: relative;
  z-index: 1;
}

@media (min-width: 64rem) {
  .hero-paths .path {
    border-left: 0;
  }
}

@media (max-width: 63.99rem) {
  .hero-paths .lines {
    display: none;
  }
}

/* Ana sayfada üç vitrin alt alta (2026-11-12): telefonda proje kapsülü gizlenir
   (vitrinler kaydırarak gelir); detayların sonunda sonraki vitrine giden satır */
@media (max-width: 47.99rem) {
  .projects--picker .projects-head > .jump {
    display: none;
  }

  a.project-next {
    text-decoration: none;
  }
}

@media (max-width: 47.99rem) {
  /* Kapsül gizliyken 3D'si olmayan vitrinin başlık satırı boş kalır: yer tutmasın */
  .projects--picker .projects-head:not(:has(.view-toggle)) {
    display: none;
  }
}