/**
 * Portfolyo - Tailwind tamamlayıcı stiller ve özel animasyonlar
 * Tüm geçişler: 0.3s ease (isteğe uygun)
 */

/* Smooth scroll (tarayıcı varsayılanı) */
html {
  scroll-behavior: smooth;
}

/* ========== HERO - Yumuşak renk geçişi (tek katman, çok stop) ========== */
.hero-smooth-gradient {
  background: linear-gradient(
    to right,
    rgba(8, 145, 178, 0.16) 0%,
    rgba(8, 145, 178, 0.10) 15%,
    rgba(34, 211, 238, 0.06) 35%,
    rgba(94, 234, 212, 0.03) 55%,
    rgba(204, 251, 241, 0.01) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}
.dark .hero-smooth-gradient {
  background: linear-gradient(
    to right,
    rgba(8, 145, 178, 0.22) 0%,
    rgba(8, 145, 178, 0.12) 20%,
    rgba(21, 94, 117, 0.06) 45%,
    rgba(15, 23, 42, 0) 100%
  );
}

/* Intersection Observer ile gelen öğeler için görünürlük */
.section-title.opacity-0,
.skill-card.opacity-0,
.project-card.opacity-0,
.animate-visible {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Hakkımda bölümü alt öğe animasyonları */
#hakkimda .max-w-5xl > .flex {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Nav link hover - ek glow/underline */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #0891b2, #0d9488);
  transition: width 0.3s ease;
}
.nav-link:hover::after {
  width: 100%;
}

/* CTA butonları - petrol hover glow */
.cta-primary:hover {
  box-shadow: 0 10px 40px -10px rgba(8, 145, 178, 0.5);
}
.cta-secondary:hover {
  box-shadow: 0 4px 20px -4px rgba(13, 148, 136, 0.45);
}

/* ========== PROJELER - Akıcı hover ve modern UI ========== */
.project-card {
  transition:
    transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1),
    box-shadow 0.45s ease,
    border-color 0.4s ease;
}
.project-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px -15px rgba(8, 145, 178, 0.18),
    0 12px 24px -8px rgba(0, 0, 0, 0.08);
  border-color: rgba(8, 145, 178, 0.25);
}
.dark .project-card:hover {
  box-shadow: 0 20px 40px -10px rgba(8, 145, 178, 0.2);
  border-color: rgba(34, 211, 238, 0.2);
}

/* Proje kartı görsel - yumuşak zoom */
.project-card-image {
  transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.project-card:hover .project-card-image {
  transform: scale(1.04);
}
.project-card .project-card-img {
  transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.project-card:hover .project-card-img {
  transform: scale(1.08);
}

/* Proje detay - opacity ile akıcı açılma */
.project-detail {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition: opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease;
}
.project-card:hover .project-detail {
  opacity: 1;
  max-height: 5rem;
  margin-bottom: 1rem;
}

/* Proje linkleri - smooth underline */
.project-link {
  position: relative;
  transition: color 0.25s ease;
}
.project-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 0.3s ease;
}
.project-link:hover::after {
  width: 100%;
}

/* Line clamp (2 satır) - Tailwind ile birlikte */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Opsiyonel: sayfa yüklenirken kısa loading (body'ye class eklenebilir) - petrol */
body.loading::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 40%, #fff 100%);
  z-index: 9999;
  animation: fadeOut 0.5s ease 0.3s forwards;
}
.dark body.loading::before {
  background: linear-gradient(135deg, #083344 0%, #134e4a 40%, #0f172a 100%);
}
@keyframes fadeOut {
  to {
    opacity: 0;
    pointer-events: none;
  }
}

/* Ekstra: scroll progress için yumuşak geçiş (JS ile width değişince) */
#scroll-progress {
  will-change: width;
}

/* Dil değişimi - dark mode gibi yumuşak geçiş */
main.lang-switching {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
main {
  transition: opacity 0.25s ease;
}