/* ══ LAYOUT — Animasyonlar, Reveal, Mobil Nav ══ */

/* ══ REVEAL ANİMASYONLARI (Scroll Etkisi) ══ */
.reveal {
  opacity: 0; 
  transform: translateY(36px);
  transition: opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1);
}

.reveal.revealed { 
  opacity: 1; 
  transform: translateY(0); 
}

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .32s; }

.reveal.reveal-left  { transform: translateX(-64px); transition-duration: 1s; }
.reveal.reveal-right { transform: translateX(64px);  transition-duration: 1s; }
.reveal.reveal-left.revealed,
.reveal.reveal-right.revealed { transform: translateX(0); }

.grad-em {
  background: linear-gradient(135deg, var(--teal), var(--coral));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-reveal { 
  overflow: hidden; 
}

.title-reveal span {
  display: block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.19,1,.22,1);
}

.title-reveal.revealed span { 
  transform: translateY(0); 
}

/* ══ SECTION LABEL ══ */
.sec-label {
  font-family: 'Space Mono', monospace;
  font-size: .48rem; 
  letter-spacing: .52em;
  color: var(--teal); 
  display: block;
  margin-bottom: 16px; 
  text-transform: uppercase;
}

/* ══════════════════════════════════════════
   MOBİL HAMBURGER MENÜ
══════════════════════════════════════════ */
.burger-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  cursor: none;
  z-index: 1100;
  background: none;
  border: none;
  padding: 0;
  position: relative;
}

.burger-menu span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  transform-origin: center;
}

nav.stuck .burger-menu span {
  background: var(--text);
}

.burger-menu span:nth-child(1) { margin-bottom: 6px; }
.burger-menu span:nth-child(3) { margin-top: 6px; }

.burger-menu.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.burger-menu.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.burger-menu.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* MOBİL MENÜ PANELİ */
/* Masaüstünde tamamen gizli; mobilde visibility+opacity ile smooth transition */
.mobile-nav-panel {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(247,245,240,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1050;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  pointer-events: none;
}

/* Mobilde flex olarak hazır tut (display değişmez → transition çalışır) */
@media (max-width: 768px) {
  .mobile-nav-panel {
    display: flex;
  }
}

.mobile-nav-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}

.mobile-nav-panel .mob-nav-item {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  width: 80%;
  text-align: center;
  transition: color 0.25s;
}

.mobile-nav-panel .mob-nav-item:last-child {
  border-bottom: none;
}

.mobile-nav-panel .mob-nav-item:hover {
  color: var(--teal);
}

.mobile-nav-panel .mob-lang-row {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

.mobile-nav-panel .mob-lang-btn {
  font-family: 'Space Mono', monospace;
  font-size: .7rem;
  letter-spacing: .18em;
  padding: 8px 18px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  color: var(--text-2);
  cursor: none;
  transition: all 0.25s;
  background: none;
}

.mobile-nav-panel .mob-lang-btn.active,
.mobile-nav-panel .mob-lang-btn:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

/* NAV'DA BURGER GÖSTERİMİ */
@media (max-width: 768px) {
  .burger-menu { display: flex; }
  .nav-links { display: none !important; }
  nav {
    justify-content: space-between;
    align-items: center;
    padding: 8px 4vw;
    /* .mobile-nav-panel (z-index:1050) nav'ın DIŞINDA bir eleman; nav kendi
       stacking context'ini oluşturduğu için .burger-menu'nün z-index:1100'ü
       sadece nav içinde geçerli oluyordu ve panel açıkken buton tıklanamıyordu.
       Mobilde nav'ı panelin üstüne çıkarıyoruz ki kapatma butonu erişilebilir kalsın. */
    z-index: 1101;
  }
  /* Panel açıkken X çizgileri her koşulda (stuck olmasa da) görünür/kontrastlı kalsın */
  .burger-menu.open span {
    background: var(--text);
  }
}

/* TABLET (768px – 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-links { gap: 18px; }
  .nav-item { font-size: .6rem; }
  .nav-btn { padding: 8px 16px; font-size: .6rem; }
  .logo img { height: 80px; }
}

/* ══ VİDEO LAZY LOAD PERFORMANS ══ */
video[data-src] {
  background: #111;
}

/* ══ iOS INPUT ZOOM FİX (16px altı fontlarda Safari zoom yapıyor) ══ */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ══ SAFE AREA (iPhone X+ notch desteği) ══ */
nav {
  padding-top: max(8px, env(safe-area-inset-top));
  padding-left: max(4vw, env(safe-area-inset-left));
  padding-right: max(4vw, env(safe-area-inset-right));
}

footer {
  /* safe-area-inset-bottom her zaman eklenir — mobil media query override'ını engeller */
  padding-bottom: max(60px, calc(40px + env(safe-area-inset-bottom, 0px)));
}

/* ══ GENEL TOUCH HEDEF BOYUTU ══ */
@media (hover: none) {
  .nav-item, .ft-link, .social-icon-link, a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}