/* ============================================================
   kapi.css — kapı sayfası: yerleşim + odak (vizör) mekaniği
   Sol (creative) koyu lacivert → sağ (fotoğraf) açık soft;
   iki panel arasında terrakota üzerinden yumuşak geçiş.
   ============================================================ */

.kapi-govde {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--renk-kagit);
}

/* Işık sıcaklığı katmanı — odaklanılan tarafa göre kayar */
.kapi-govde::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
  transition: background var(--gecis-hiz-yavas) var(--gecis-egri);
  z-index: 1;
}

.kapi-govde[data-odak='creative']::after {
  background: linear-gradient(to right, var(--isik-soguk), transparent);
}

.kapi-govde[data-odak='foto']::after {
  background: linear-gradient(to left, var(--isik-sicak), transparent);
}

/* ---- Üst şerit ---- */

.kapi-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--bosluk-3) var(--bosluk-6);
  background: var(--renk-kagit);
  position: relative;
  z-index: 2;
}

.kapi-ust .logo {
  height: var(--logo-yukseklik);
  width: auto;
}

.kapi-ust .konum {
  font-family: var(--font-mono);
  font-size: var(--punto-hud);
  letter-spacing: var(--harf-aralik-hud);
  color: var(--renk-etiket-acik-zemin);
}

/* ---- Panolar ---- */

.kapi {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* koyu creative tarafından soft fotoğraf tarafına,
     logodaki terrakota üzerinden geçiş */
  background: linear-gradient(
    100deg,
    var(--renk-navy-derin) 0%,
    var(--renk-navy-derin) 44%,
    var(--renk-gecis-govde) 51%,
    var(--renk-gecis-sicak) 56%,
    var(--renk-soft) 64%,
    var(--renk-soft) 100%
  );
}

.pano {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-8) var(--bosluk-7);
  text-decoration: none;
  position: relative;
  opacity: var(--odak-duragan);
  transition:
    filter var(--gecis-hiz) var(--gecis-egri),
    opacity var(--gecis-hiz) var(--gecis-egri),
    box-shadow var(--gecis-hiz) var(--gecis-egri);
}

.pano-etiket {
  font-family: var(--font-mono);
  font-size: var(--punto-hud);
  letter-spacing: var(--harf-aralik-etiket);
  transition: color var(--gecis-hiz) var(--gecis-egri);
}

.pano h2 {
  font-size: var(--punto-kapi-baslik);
  font-weight: 600;
  transition: color var(--gecis-hiz) var(--gecis-egri);
}

.pano p {
  font-size: var(--punto-kucuk);
  max-width: var(--metin-genislik);
  line-height: var(--satir-genis);
}

/* sol — creative (koyu) */
.pano--creative .pano-etiket { color: var(--renk-etiket-koyu-zemin); }
.pano--creative h2 { color: var(--renk-metin-acik); }
.pano--creative p { color: var(--renk-metin-acik-soluk); }

/* sağ — fotoğraf (açık, soft) */
.pano--foto .pano-etiket { color: var(--renk-etiket-acik-zemin); }
.pano--foto h2 { color: var(--renk-metin-koyu); }
.pano--foto p { color: var(--renk-metin-koyu-soluk); }

/* AF karesi — mobil dokun-odakla göstergesi */
.af-karesi {
  position: absolute;
  inset: var(--bosluk-4);
  border: var(--cizgi-ince) solid currentColor;
  border-radius: var(--yaricap-kucuk);
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity var(--gecis-hiz) var(--gecis-egri),
    transform var(--gecis-hiz) var(--gecis-egri);
  pointer-events: none;
}

/* ---- Odak durumları ---- */

/* bir tarafa odaklanınca diğeri alan derinliği dışına çıkar */
.kapi-govde[data-odak='creative'] .pano--foto,
.kapi-govde[data-odak='foto'] .pano--creative {
  filter: blur(var(--odak-bulanik));
  opacity: var(--odak-sonuk);
}

.kapi-govde[data-odak='creative'] .pano--creative,
.kapi-govde[data-odak='foto'] .pano--foto {
  opacity: 1;
}

.kapi-govde[data-odak='creative'] .pano--creative .pano-etiket,
.kapi-govde[data-odak='creative'] .pano--creative h2 {
  color: var(--renk-buz);
}

.kapi-govde[data-odak='foto'] .pano--foto .pano-etiket,
.kapi-govde[data-odak='foto'] .pano--foto h2 {
  color: var(--renk-terrakota-koyu);
}

.kapi-govde[data-odak='creative'] .pano--creative {
  box-shadow: inset 0 calc(var(--cizgi-kalin) * -1) 0 var(--renk-altin);
}

.kapi-govde[data-odak='foto'] .pano--foto {
  box-shadow: inset 0 calc(var(--cizgi-kalin) * -1) 0 var(--renk-terrakota);
}

/* AF karesi yalnız dokunmatik odak durumunda görünür */
.kapi-govde.dokunmatik[data-odak='creative'] .pano--creative .af-karesi,
.kapi-govde.dokunmatik[data-odak='foto'] .pano--foto .af-karesi {
  opacity: 1;
  transform: none;
}

.kapi-govde[data-odak='creative'] .pano--creative .af-karesi {
  color: var(--renk-buz);
}

.kapi-govde[data-odak='foto'] .pano--foto .af-karesi {
  color: var(--renk-terrakota-koyu);
}

/* ---- HUD şeridi ---- */

.hud {
  display: flex;
  justify-content: space-between;
  gap: var(--bosluk-4);
  padding: var(--bosluk-3) var(--bosluk-6);
  background: var(--renk-navy-hud);
  color: var(--renk-etiket-koyu-zemin);
  font-family: var(--font-mono);
  font-size: var(--punto-hud);
  letter-spacing: var(--harf-aralik-hud);
  position: relative;
  z-index: 2;
}

.hud .hud-diyafram {
  color: var(--renk-altin);
}

.kapi-govde[data-odak='creative'] .hud .hud-odak {
  color: var(--renk-buz);
}

.kapi-govde[data-odak='foto'] .hud .hud-odak {
  color: var(--renk-gecis-sicak);
}

/* ---- Mobil: dikey yığılma ---- */
/* breakpoint sabiti: tokens.css'teki istisna notuna bakın */
@media (max-width: 44em) {
  .kapi {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    background: linear-gradient(
      175deg,
      var(--renk-navy-derin) 0%,
      var(--renk-navy-derin) 44%,
      var(--renk-gecis-govde) 51%,
      var(--renk-gecis-sicak) 56%,
      var(--renk-soft) 64%,
      var(--renk-soft) 100%
    );
  }

  .pano {
    padding: var(--bosluk-6) var(--bosluk-5);
    justify-content: flex-end;
  }

  .kapi-ust {
    padding: var(--bosluk-3) var(--bosluk-5);
  }

  .kapi-ust .logo {
    height: var(--logo-yukseklik-mobil);
  }

  .hud {
    padding: var(--bosluk-3) var(--bosluk-5);
  }

  .hud .hud-eylem {
    text-align: center;
  }

  .kapi-govde[data-odak='creative']::after {
    background: linear-gradient(to bottom, var(--isik-soguk), transparent);
  }

  .kapi-govde[data-odak='foto']::after {
    background: linear-gradient(to top, var(--isik-sicak), transparent);
  }
}

/* ---- Hareket azaltma: bulanıklık yok, geçiş yok ---- */
@media (prefers-reduced-motion: reduce) {
  .kapi-govde::after,
  .pano,
  .pano-etiket,
  .pano h2,
  .af-karesi {
    transition-duration: 0.01ms;
  }

  .kapi-govde[data-odak='creative'] .pano--foto,
  .kapi-govde[data-odak='foto'] .pano--creative {
    filter: none;
    opacity: 0.55;
  }
}