/* ═══════════════════════════════════════════
   KENTDEKS — AÇILIŞ DENEYİMİ
   1) Preloader: sayaç + kavisli perde kalkışı
   2) Tam ekran video hero + dev tipografi
   3) Video üstünde şeffaf navbar
   Referans dil: loftthirtyone.com açılışı × cuberto.com tipografi/etkileşim
═══════════════════════════════════════════ */

/* ── SCROLL KİLİDİ (preloader açıkken) ── */
body.kd-lock { overflow: hidden; }

/* ═══ 1. PRELOADER ═══ */
#kd-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
#kd-loader.kdl-exit { transform: translateY(-100%); }
#kd-loader.kdl-gone { display: none; }

/* Perde alt kenar kavisi — perde kalkarken yumuşak yay çizer */
#kd-loader::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10%;
  width: 120%;
  height: 110px;
  background: #F8FAFC;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
}
#kd-loader.kdl-exit::after { transform: scaleY(1); }

.kdl-center { text-align: center; }

/* Açılış logosu */
.kdl-logo {
  width: clamp(200px, 34vw, 360px);
  height: auto;
  /* opacity animasyona bağlı DEĞİL — ağır sayfalarda bile logo hep görünür kalır */
  animation: kdlLogo 1s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes kdlLogo {
  from { transform: translateY(18px) scale(.97); }
  to   { transform: none; }
}

.kdl-word {
  display: flex;
  overflow: hidden;
  justify-content: center;
}
.kdl-letter {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 8vw, 100px);
  line-height: 1.05;
  letter-spacing: .03em;
  color: #F5F5F5;
  transform: translateY(115%);
  animation: kdlUp .85s cubic-bezier(.22, 1, .36, 1) forwards;
}
.kdl-letter:nth-child(1) { animation-delay: .05s; }
.kdl-letter:nth-child(2) { animation-delay: .10s; }
.kdl-letter:nth-child(3) { animation-delay: .15s; }
.kdl-letter:nth-child(4) { animation-delay: .20s; }
.kdl-letter:nth-child(5) { animation-delay: .25s; }
.kdl-letter:nth-child(6) { animation-delay: .30s; }
.kdl-letter:nth-child(7) { animation-delay: .35s; }
.kdl-letter:nth-child(8) { animation-delay: .40s; }
@keyframes kdlUp { to { transform: translateY(0); } }

/* "DEKS" — kontur harfler (Cuberto marquee imzası) */
.kdl-stroke {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245, 245, 245, .75);
}

.kdl-tag {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, .45);
  opacity: 0;
  animation: kdlFade .8s ease .55s forwards;
}
@keyframes kdlFade { to { opacity: 1; } }

/* Sayaç — sağ alt, dev serif (Loft 31 usulü yüzde) */
.kdl-count {
  position: absolute;
  right: 6vw;
  bottom: 5vh;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(72px, 11vw, 150px);
  line-height: 1;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.kdl-count::after {
  content: '%';
  font-size: .35em;
  vertical-align: super;
  color: var(--blue-600);
  margin-left: 4px;
}

/* ═══ 2. TAM EKRAN VİDEO HERO ═══ */
.lt-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 580px;
  overflow: hidden;
  background: var(--navy-950);
}

.lt-media,
.lt-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lt-media video {
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* Yavaş zoom-out — perde kalkınca video nefes alır */
.lt-media {
  transform: scale(1.14);
  transition: transform 5.5s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.lt-revealed .lt-media { transform: scale(1); }

/* Karartma degradesi — üst nav + alt tipografi okunurluğu
   (aydınlık plan videosu için güçlendirildi: dikey degrade +
    başlığın oturduğu sol taraf için yatay vinyet) */
.lt-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(6, 13, 31, .62) 0%,
      rgba(6, 13, 31, .30) 45%,
      rgba(6, 13, 31, .10) 75%,
      rgba(6, 13, 31, .05) 100%),
    linear-gradient(180deg,
      rgba(6, 13, 31, .70) 0%,
      rgba(6, 13, 31, .34) 38%,
      rgba(6, 13, 31, .44) 68%,
      rgba(6, 13, 31, .78) 100%);
  pointer-events: none;
}

/* ── Üst meta satırı ── */
.lt-topmeta {
  position: absolute;
  top: 92px;
  left: 6vw;
  right: 6vw;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, .55);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .9s ease .9s, transform .9s cubic-bezier(.22, 1, .36, 1) .9s;
  pointer-events: none;
}
.lt-revealed .lt-topmeta { opacity: 1; transform: none; }

/* ── Dev başlık — satır satır maske reveal ── */
.lt-title-wrap {
  position: absolute;
  left: 6vw;
  right: 6vw;
  bottom: 21vh;
  z-index: 2;
}
.lt-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 9vw, 148px);
  line-height: .94;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: #F5F5F5;
  margin: 0;
}
.lt-line {
  display: block;
  overflow: hidden;
  padding-bottom: .04em; /* alt çıkıntılı harfler maskede kırpılmasın */
  margin-bottom: -.04em;
}
.lt-line-in {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1.15s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.lt-line:nth-child(1) .lt-line-in { transition-delay: .45s; }
.lt-line:nth-child(2) .lt-line-in { transition-delay: .58s; }
.lt-line:nth-child(3) .lt-line-in { transition-delay: .71s; }
.lt-revealed .lt-line-in { transform: translateY(0); }

/* İtalik serif kontur satır — Cuberto karışık tipografi imzası */
.lt-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: -.01em;
  font-size: 1.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245, 245, 245, .9);
  padding-right: .06em;
}
.lt-dot { color: var(--teal-400); }

.lt-sub {
  margin-top: 26px;
  max-width: 430px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(245, 245, 245, .68);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease 1.05s, transform .9s cubic-bezier(.22, 1, .36, 1) 1.05s;
}
.lt-revealed .lt-sub { opacity: 1; transform: none; }

/* ── Alt bar: scroll işareti + dönen rozet ── */
.lt-bottom {
  position: absolute;
  left: 6vw;
  right: 6vw;
  bottom: 4.5vh;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 1s ease 1.3s;
}
.lt-revealed .lt-bottom { opacity: 1; }

.lt-scrollcue {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(245, 245, 245, .6);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.lt-scroll-line {
  display: block;
  width: 1.5px;
  height: 44px;
  background: rgba(245, 245, 245, .25);
  position: relative;
  overflow: hidden;
}
.lt-scroll-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: -50%;
  width: 100%;
  height: 50%;
  background: var(--teal-400);
  animation: ltScroll 1.8s cubic-bezier(.76, 0, .24, 1) infinite;
}
@keyframes ltScroll {
  0%   { top: -50%; }
  100% { top: 110%; }
}

/* Dönen dairesel rozet — Cuberto "showreel" butonu */
.lt-badge {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  color: #F5F5F5;
  flex-shrink: 0;
}
.lt-badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: ltSpin 14s linear infinite;
}
.lt-badge:hover .lt-badge-ring { animation-duration: 6s; }
@keyframes ltSpin { to { transform: rotate(360deg); } }
.lt-badge-ring text {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  fill: rgba(245, 245, 245, .75);
}
.lt-badge-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(245, 245, 245, .1);
  border: 1px solid rgba(245, 245, 245, .25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background .35s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.lt-badge:hover .lt-badge-core {
  background: var(--teal-500);
  border-color: transparent;
  transform: translate(-50%, -50%) scale(1.12);
}

/* ═══ 3. VİDEO ÜSTÜNDE ŞEFFAF NAVBAR (yalnızca ana sayfa hero'sunda) ═══ */
body.nav-clear .navbar {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Logo çipi her yerde aynı (bkz. vars.css .nav-logo-img) — video üzerinde
   yalnızca gölgeyi biraz güçlendiriyoruz, hareketli görsele karşı kontrast için. */
body.nav-clear .nav-logo-img {
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}
body.nav-clear .nav-link { color: rgba(245, 245, 245, .82); }
body.nav-clear .nav-link:hover,
body.nav-clear .nav-link.on { color: #fff; background: rgba(255, 255, 255, .1); }
body.nav-clear .nav-link.on::after { background: var(--teal-400); }
body.nav-clear .nav-divider { background: rgba(255, 255, 255, .2); }
body.nav-clear .nav-lang-btn,
body.nav-clear .nav-btn-login {
  background: transparent;
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
}
body.nav-clear .nav-lang-btn:hover,
body.nav-clear .nav-btn-login:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .55);
}
body.nav-clear .nav-btn-reg { background: #F5F5F5; color: var(--navy-800); }
body.nav-clear .nav-btn-reg:hover { background: #fff; }
body.nav-clear .nav-hamburger { color: #fff; }

/* ═══ MOBİL ═══ */
@media (max-width: 768px) {
  .lt-topmeta { top: 84px; }
  .lt-meta-mid { display: none; }
  .lt-title-wrap { bottom: 24vh; }
  .lt-title { font-size: clamp(40px, 11.5vw, 64px); }
  .lt-sub { font-size: 14px; margin-top: 18px; }
  .lt-badge { width: 92px; height: 92px; }
  .lt-badge-core { width: 44px; height: 44px; font-size: 15px; }
  .kdl-count { right: 8vw; bottom: 4vh; }
}
@media (max-width: 480px) {
  .lt-topmeta { font-size: 9.5px; letter-spacing: .12em; }
  .lt-scroll-text { display: none; }
  .lt-bottom { align-items: center; }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  #kd-loader { display: none; }
  .lt-media { transform: none; transition: none; }
  .lt-line-in, .lt-topmeta, .lt-sub, .lt-bottom {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .lt-line-in { transform: translateY(0); }
  .lt-scroll-line::after, .lt-badge-ring { animation: none; }
}