/* emirbalin/hero — prototip/css/site.css "Hero" bölümü; token eşlemesi §2b.2. Mobil hero yalnızca seçenek 1'dir (§2c.2). */
.hero {
  --wp--custom--renk--odak: #fff; /* fotoğraf üzerinde beyaz odak halkası */
  position: relative; isolation: isolate;
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr);
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background: #1c2a3e;
}
.hero__foto { position: absolute !important; inset: 0; z-index: -2; }
/* Hero görseli LCP öğesidir: bulanık yer tutucu yerine ters zemin (yer tutucu yalnızca tembel görsellerde). */
.hero__foto.gorsel { background-color: #1c2a3e; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-odak, 62% 38%); }
/* Tek fotoğraf; kadraj genişliğe göre kayar. 1024–1599 px (1400 px referans) kompozisyonu korunur. */
.hero { --hero-odak: 73% 30%; }
@media (min-width: 700px) { .hero { --hero-odak: 68% 35%; } }
@media (min-width: 1024px) { .hero { --hero-odak: 62% 38%; } }
@media (min-width: 1600px) { .hero { --hero-odak: 60% 48%; } } /* geniş ekran: fotoğraf yukarı kayar, yüz ve omuzlar görünür */
@media (min-width: 2200px) { .hero { --hero-odak: 58% 56%; } }
.hero__perde {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(12 20 36 / 0.66) 0%, rgb(12 20 36 / 0.3) 12%, rgb(12 20 36 / 0) 24%), var(--wp--preset--gradient--hero-alt), var(--wp--preset--gradient--hero-perde);
}
.hero__icerik {
  align-self: end;
  padding-top: calc(var(--wp--custom--header--yukseklik) + var(--wp--preset--spacing--60));
  padding-bottom: var(--wp--preset--spacing--60);
}
.hero__ust {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.hero__ust > span { min-width: 0; }
.hero__ust span span:not([aria-hidden]) { white-space: nowrap; }
.hero__ust::before { content: ""; flex: none; width: 2.5rem; height: 3px; border-radius: 3px; background: var(--wp--preset--gradient--ana); }
.hero__ad {
  color: #fff;
  font-size: var(--wp--preset--font-size--xxxl);
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.hero__ad { letter-spacing: -0.02em; line-height: 0.95; }
.hero__satir { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__satir > span { display: inline-block; }
.hero__satir:last-child > span::after {
  content: ""; display: inline-block;
  width: 0.14em; height: 0.14em; margin-left: 0.04em; border-radius: 50%;
  background: var(--wp--preset--gradient--vurgu);
}
.hero__baslik {
  max-width: 34ch; margin-top: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--l); line-height: 1.45; font-weight: 400;
  color: rgb(255 255 255 / 0.94);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--wp--preset--spacing--60); }
.hero__alt {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  border-top: 1px solid rgb(255 255 255 / 0.22);
  font-size: var(--wp--preset--font-size--s);
}
.hero__durum { display: flex; align-items: center; gap: 0.6rem; color: rgb(255 255 255 / 0.94); }
.hero__durum-nokta { position: relative; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--wp--custom--renk--su-1); flex: none; }
.hero__durum-nokta::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: nabiz 2.4s var(--wp--custom--ease--standart) infinite;
}
@keyframes nabiz { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(3); opacity: 0; } }
.hero__kaydir {
  display: none; align-items: center; gap: 0.75rem;
  color: #fff; text-decoration: none; font-weight: 600;
}
.hero__kaydir:hover { color: #fff; }
.hero__kaydir-cizgi { position: relative; width: 3rem; height: 1px; background: rgb(255 255 255 / 0.4); overflow: hidden; }
.hero__kaydir-cizgi::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  animation: kaydir 2.2s var(--wp--custom--ease--cikis) infinite;
}
@keyframes kaydir { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (min-width: 768px) { .hero__kaydir { display: inline-flex; } }
/* Tablet (700–1023 px): metin alt yarıda; dikey perde yatay perdeye eklenir (üst satır ≥4.5:1 için) */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .hero__perde {
    background: linear-gradient(180deg, rgb(12 20 36 / 0.66) 0%, rgb(12 20 36 / 0) 16%),
      linear-gradient(0deg, rgb(12 20 36 / 0.9) 0%, rgb(12 20 36 / 0.78) 45%, rgb(12 20 36 / 0.3) 65%, rgb(12 20 36 / 0) 80%),
      var(--wp--preset--gradient--hero-perde);
  }
}
/* Mobil hero seçenek 1: metin altta, arkasında aşağı doğru koyulaşan perde. Fotoğraf ekranın üst ~%74'ünü kaplar
   (yüz metnin üstünde kalır), alt kısım perdeyle aynı lacivertte devam eder. */
@media (max-width: 699.98px) {
  .hero { background: #0c1424; --hero-odak: 78% 30%; }
  .hero__foto { bottom: auto !important; height: 74svh; }
  .hero__perde {
    background: linear-gradient(180deg, rgb(12 20 36 / 0.8) 0%, rgb(12 20 36 / 0.5) 9%, rgb(12 20 36 / 0) 20%),
      linear-gradient(0deg, rgb(12 20 36) 0%, rgb(12 20 36) 26%, rgb(12 20 36 / 0.86) 44%, rgb(12 20 36 / 0.45) 56%, rgb(12 20 36 / 0) 68%);
  }
  .hero__baslik { font-size: var(--wp--preset--font-size--m); }
  .hero__cta { margin-top: var(--wp--preset--spacing--50); }
}
/* Giriş animasyonu hazırlanırken (yalnızca hareket açıkken; emniyet zaman aşımı erken.js'de) */
html.giris-bekliyor .hero [data-giris] { opacity: 0; }

/* Görsel yoksa zemin ters-zemin rengine düşer; perde metin kontrastını korur. */
.hero--gorselsiz { background: var(--wp--preset--color--ters-zemin); }