/* Uzay Özel - CV Sitesi
   Tailwind CDN kullanılıyor; burada yalnızca utility class'larla
   pratik olmayan küçük parçalar tanımlanır. */

html {
  scroll-behavior: smooth;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #16A34A;
  color: #052e13;
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* Hero video: object-cover taban, scroll ile hafif zoom/parallax */
.hero-video {
  display: block;
  transform-origin: center;
  will-change: transform;
}

/* Native CSS scroll-driven animation (JS scroll listener yok, performanslı).
   Desteklenmeyen tarayıcılarda video sabit kalır (bozulma yok). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-video {
      animation: hero-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }
  }
}

@keyframes hero-parallax {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.15) translateY(4%); }
}

/* Mobilde: fotoğraf metnin altında normal akışta, %65 ölçeğinde ve ortalanmış. */
@media (max-width: 767px) {
  .hero-photo-wrap {
    display: flex;
  }
  .hero-photo-badge {
    transform: scale(0.65);
    transform-origin: top center;
  }
}

/* Masaüstünde: metnin sağ altına taşan, bir sonraki bölümle hafif örtüşen rozet. */
@media (min-width: 768px) {
  .hero-photo-badge {
    transform: translateY(25%);
  }
}

/* Timeline noktası */
.timeline-dot {
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #16A34A;
  border: 3px solid #F8FAFC;
  box-shadow: 0 0 0 2px #16A34A;
}
@media (prefers-color-scheme: dark) {
  .timeline-dot {
    border-color: #0f172a;
  }
}

/* Scroll-triggered reveal */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Odak durumları (a11y) */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}