/* 
   ANA KARŞILAMA (HERO) BÖLÜMÜ
   NOT: Masaüstünde 1.2fr/0.8fr dengesi en iyi sonucu veriyor.
*/

#hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  position: relative;
  z-index: 10;
}

/* TODO: Fotoğraf ve metin arasındaki grid oranını daha sonra tekrar test et. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr; /* Metin biraz daha geniş olsun */
  gap: 60px;
  align-items: center;
}

.hero-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* NOT: 'Bricolage Grotesque' fontu başlıklar için çok karakteristik duruyor. */
.hero-title {
  font-family: var(--font-heading);
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.hero-title .accent {
  color: var(--purple);
  display: inline-block;
  transition: transform 0.4s var(--ease);
}
.hero-title .accent:hover {
  transform: rotate(-3deg) scale(1.1);
}

/* Açıklama metni: Geniş ekranlarda çok uzamamalı */
.hero-desc {
  font-size: 1.25rem;
  color: var(--muted);
  max-width: 580px;
  margin-bottom: 45px;
  line-height: 1.7;
}

/* 
   NOT: Fotoğrafı 2 derecelik bir açıyla döndürdüm, 'perfectly imperfect' duruşu için. 
*/
.hero-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photo-frame {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1.1; /* Hafif dikey dikdörtgen */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow), 0 20px 80px rgba(0,0,0,0.1);
  transform: rotate(2deg); /* Hafif asimetrik duruş */
  transition: transform 0.6s var(--ease);
}
.photo-frame:hover {
  transform: rotate(0deg) scale(1.02);
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fotoğraf yoksa boş kalmasın diye bir gradyan atadık */
  background: linear-gradient(135deg, var(--bg2), var(--purple)); 
  opacity: 0.95;
}

/* TODO: Buradaki ikonların boyutunu 46px'ten 48px'e çekmeyi düşünebilirim. */
.hero-actions {
  display: flex;
  flex-direction: row; /* Zorunlu kılıyoruz */
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

.hero-social {
  width: 46px; height: 46px;
  display: flex;
  align-items: center; justify-content: center;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.25rem; /* Bootstrap Icons için uygun boyut */
  transition: all var(--transition);
}
.hero-social:hover {
  transform: translateY(-5px);
  color: #fff;
}
.hero-social[title="GitHub"]:hover {
  background: #333;
  border-color: #333;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.hero-social[title="LinkedIn"]:hover {
  background: #0077b5;
  border-color: #0077b5;
  box-shadow: 0 10px 25px rgba(0, 119, 181, 0.2);
}
.hero-social[title="Instagram"]:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border-color: transparent;
  box-shadow: 0 10px 25px rgba(220, 39, 67, 0.2);
}
.hero-social.email-link:hover {
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 10px 25px hsla(255, 100%, 65%, 0.2);
}

/* Mobilde ve Tablette her şeyi toparlayalım */
@media (max-width: 991px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .hero-content { text-align: center; order: 2; }
  .hero-image { order: 1; }
  .hero-title { font-size: 3.2rem; }
  .hero-desc { margin: 0 auto 40px; }
  .hero-actions { justify-content: center; }
  .photo-frame { max-width: 280px; width: 100%; margin: 0 auto; transform: rotate(0deg); }
}
@media (max-width: 576px) {
  .hero-title { font-size: 2.2rem; line-height: 1.1; }
  .hero-desc { font-size: 1rem; padding: 0 10px; }
  #hero { padding-top: 100px; padding-bottom: 60px; }
}