/* styles-hero.css — karşılama: büyük tipografi, cam künye ve hakkımda panelleri */

.karsilama { position: relative; padding-block: clamp(48px, 9vh, 110px) clamp(44px, 7vh, 88px); }

/* İstatistik kompozisyonu: section'ın ilk çocuğu, mutlak konumda altta yatar;
   içerik DOM'da sonra geldiği için üstünde kalır. Soluk tek ton: süs değil,
   cam yüzeylerin arkasındaki anlam. */
.hero-mat {
  position: absolute;
  inset: auto 0 0 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-mat svg { display: block; width: 100%; height: auto; }
.hero-mat .mat-cizgi {
  stroke: var(--mat-cizgi);
  stroke-width: 1.5;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.hero-mat .mat-band { fill: var(--mat-dolgu); }

.hero-izgara { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1024px) {
  .hero-izgara { grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr); align-items: end; }
}

/* mask/hero-yuksel: anim.js açılış koreografisinin hedefleri; başlangıç durumu JS'te set edilir */
.mask { display: block; overflow: hidden; }

.hero-ad { margin-bottom: clamp(14px, 2.5vh, 26px); }
.hero-ad {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 10vw, 168px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--metin);
}

.hero-manzet {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 36ch;
  margin-top: clamp(14px, 2vh, 22px);
  color: var(--metin);
}

/* Sağ künye: cam panel, mono satırlar */
.hero-kunye {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: var(--radius-kart);
  padding: clamp(18px, 2.4vw, 26px);
}
.kunye-satir { font-family: var(--mono); font-size: 13px; line-height: 1.65; }
.kunye-etiket { display: block; color: var(--pasif); margin-bottom: 2px; }
.kunye-etiket::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pasif);
  margin-right: 8px;
}

/* Hakkımda paneli: kullanıcı kendi paragrafını yazacak; yer tutucu nötr dursun */
.sicil-ozeti {
  margin-top: clamp(36px, 6vh, 64px);
  max-width: 72ch;
  border-radius: var(--radius-kart);
  padding: clamp(22px, 3vw, 34px);
}
.bolum-etiket {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--pasif);
  margin-bottom: 10px;
}
.ozet-metin { font-size: 17px; line-height: 1.7; }

@media (max-width: 1023px) {
  .hero-kunye { margin-top: 8px; }
}