/* Ana sayfa: tam ekran uçuş + proje indeksi. */

/* ---------- Açılış: gerçek uçuş verisi kapılardan geçer ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; }
.hero .frame { position: absolute; inset: 0; background: var(--bg); }
.hero .hud.tl { top: calc(var(--nav-h) + 10px); left: var(--m); }
.hero .hud.tr { top: calc(var(--nav-h) + 10px); right: var(--m); }
.hero .hud.bl { left: var(--m); bottom: 22px; }
.hero .hud.br { right: var(--m); bottom: 22px; }
.hero-title {
  position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: 13vh;
  pointer-events: none;
}
.hero-title .display { font-size: clamp(48px, 8.6vw, 148px); max-width: 12ch; }

/* ---------- İndeks ---------- */
.index { margin-top: 16vh; }
.index-head { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-bottom: 14px; }
.index-list { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: baseline;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--line);
  transition: color .35s var(--ease);
}
.row .n { grid-column: 1 / 2; }
.row .t {
  grid-column: 2 / 9;
  font-size: clamp(30px, 4.4vw, 68px); font-weight: 500; line-height: 1; letter-spacing: -0.045em;
  transition: transform .7s var(--ease-out);
}
.row .f { grid-column: 9 / 12; }
.row .y { grid-column: 12 / 13; text-align: right; }
.row .label { transition: color .35s var(--ease); }
/* Üzerine gelinen satır öne çıkar, diğerleri geri çekilir */
.index-list:hover .row { color: var(--dim); }
.index-list:hover .row .label { color: var(--dim); }
.index-list .row:hover { color: var(--fg); }
.index-list .row:hover .label { color: var(--muted); }
.index-list .row:hover .n { color: var(--accent); }
.row:hover .t { transform: translateX(.25em); }

.intro { margin-top: 18vh; }
.intro p { grid-column: 6 / 12; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.28; letter-spacing: -0.022em; text-wrap: pretty; }

@media (max-width: 760px) {
  .hero .hud.tr:not(.cam-toggle) { display: none; }
  .hero-title .display { font-size: 10.2vw; }
  .row { row-gap: 10px; padding: 18px 0 20px; }
  .row .n { grid-column: 1 / 3; }
  .row .t { grid-column: 1 / -1; grid-row: 2; }
  .row .f { grid-column: 3 / 11; }
  .row .y { grid-column: 11 / 13; }
  .intro p { grid-column: 1 / -1; }
}