/* =============================================================
 * hero.css — INTERNSHIP PROGRAMS hero (652:189, 1280×750)
 * Sabit ölçekli sahne: öğeler tasarımın mutlak konumlarında. Motion: get_motion_context (4s loop).
 * ============================================================= */

/* Dış: viewport genişliği. Yükseklik 1280×750 oranında ölçeğe göre otomatik. */
.ihero {
  position: relative; width: 100%; overflow: hidden;
  background: var(--in-orange);
  /* --ih-scale = clientWidth/1280 (JS ile set). Fallback: aspect-ratio ile 1280:750 */
  aspect-ratio: 1280 / 750;
}
/* İç sahne: SABİT 1280×750 tasarım; sol-üstten viewport genişliğine ölçeklenir.
   Tüm iç öğeler (grid/kutu/rozet/yıldız) px konumlarını korur, birlikte ölçeklenir.
   Ölçek JS'te set edilir (transform: scale(var(--ih-scale))) — CSS calc(100vw/1280) güvenilmez. */
.ihero__scene {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 750px;
  transform-origin: top left;
  transform: scale(var(--ih-scale, 1));
}

/* ---- Arka plan: turuncu zemin üzerinde siyah çizgili kare ızgara (652:717) ----
   1280 genişlikte ~64px kareler, siyah 1px çizgi. Kutu (1130×600) üstünü örter. */
.ihero__grid {
  position: absolute; inset: 0; pointer-events: none;
  /* Tasarım ölçümü: 75px kare, ilk çizgi x=0/y=0, koyu siyah çizgi */
  background-image:
    repeating-linear-gradient(to right, var(--in-border) 0 1.5px, transparent 1.5px 75.3px),
    repeating-linear-gradient(to bottom, var(--in-border) 0 1.5px, transparent 1.5px 75px);
  background-position: 0 0;
}
/* Köşe süsleri (652:701 sağ-üst 147×147; 652:712 sol-alt lime yıldız 131×131) */
.ihero__deco { position: absolute; display: block; z-index: 2; }
.ihero__deco--tr { right: 0; top: 0; width: 147px; height: 147px; }
.ihero__deco--bl { left: 11px; bottom: 9px; width: 131px; height: 131px; }

/* ---- İçerik kutusu (652:699): left76 top75 1130×600, FAF7F2, 2px border ---- */
.ihero__card {
  position: absolute; left: 50%; transform: translateX(-50%); top: 75px;
  width: 1130px; height: 600px;
  background: var(--in-bg); border: 2px solid var(--in-border);
}

/* Başlık (652:555): x152 y127 (kart-göreli), Space Grotesk SemiBold 40/48 ls-0.015em */
.ihero__title {
  position: absolute; left: 152px; top: 127px; margin: 0;
  font-family: var(--in-head); font-weight: 600; font-size: 40px; line-height: 48px;
  letter-spacing: -0.6px; color: var(--in-heading);
}
/* Açıklama (652:556): x152 y282 w388, Manrope 18/30 */
.ihero__desc {
  position: absolute; left: 152px; top: 282px; width: 388px; margin: 0;
  font-family: var(--in-text); font-weight: 400; font-size: 18px; line-height: 30px;
  color: var(--in-body);
}
/* Lime vurgu (652:557): x228 y344 w235 h31, lime bg + alt 2px border, Manrope Light 18/30 */
.ihero__hl {
  position: absolute; left: 228px; top: 344px; height: 31px;
  display: inline-flex; align-items: center; padding: 0 4px;
  background: var(--in-lime); border-bottom: 2px solid var(--in-border);
  font-family: var(--in-text); font-weight: 300; font-size: 18px; line-height: 30px;
  color: var(--in-heading); white-space: nowrap;
}

/* ---- Sağ sahne (rozetler/yıldızlar) — kart içi koordinatlar ---- */
.ihero__stage { position: absolute; inset: 0; }
.ihero__star { position: absolute; display: block; }
/* Star1 (796:1886): x791 y68 43px — scale animasyon */
.ihero__star--1 { left: 791px; top: 68px; width: 43px; height: 43px;
  animation: ih-star1-scale 4s linear infinite; }
/* Star2 (796:1887): x857 y105 25px — scale */
.ihero__star--2 { left: 857px; top: 105px; width: 25px; height: 25px;
  animation: ih-star2-scale 4s linear infinite; }
/* Star3 (796:1902): x656 y408 43px — rotate 0→90°→0 */
.ihero__star--3 { left: 656px; top: 408px; width: 43px; height: 43px;
  animation: ih-star3-rot 4s linear infinite; }

/* Rozetler ortak (neobrutalist: 1.5px border + sert gölge + döndürme) */
.ihero__badge {
  position: absolute; display: inline-flex; align-items: center;
  border: 1.5px solid var(--in-border); box-shadow: 4px 4px 0 0 var(--in-black);
  font-family: var(--in-head); font-weight: 500;
  padding: 10px; white-space: nowrap;
}
/* INTERNSHIP (796:1889): left671 top272, w223, rotate 2.82°, 32px turuncu metin, y-anim (0→17→0) */
.ihero__badge--internship {
  left: 671px; top: 272px; width: 223px; justify-content: center;
  background: #fff; color: var(--in-orange); font-size: 32px; line-height: 40px; letter-spacing: -0.32px;
  transform: rotate(2.82deg);
  animation: ih-internship-y 4s linear infinite;
}
/* Workshops (796:1898): left862 top196, lime, rotate 7°, 16px, y (0→-13→0) */
.ihero__badge--workshops {
  left: 864px; top: 198px; background: var(--in-lime); color: var(--in-black);
  font-size: 16px; line-height: 28px; letter-spacing: -0.08px;
  transform: rotate(7deg);
  animation: ih-workshops-y 4s linear infinite;
}
/* Mentorship (796:1900): left839 top426, turuncu, rotate 2.82°, 16px beyaz, y (0→20→-4) */
.ihero__badge--mentorship {
  left: 841px; top: 428px; background: var(--in-orange); color: var(--in-bg);
  font-size: 16px; line-height: 28px; letter-spacing: -0.08px;
  transform: rotate(2.82deg);
  animation: ih-mentorship-y 4s linear infinite;
}
/* Cursor (796:1892): INTERNSHIP rozetine göre sağ-alt, rotate 2.82° */
.ihero__cursor { position: absolute; left: 193px; top: 43px; width: 34px; height: 42px; }

/* Checklist penceresi (796:1903): left618 top150, w93 h48, beyaz + 1.5px border + 2px gölge,
   rotate -11.97°, sarı başlık barı, y (0→-13→0) */
.ihero__win {
  position: absolute; left: 620px; top: 152px; width: 93px; height: 48px;
  background: #fff; border: 1.5px solid var(--in-border); box-shadow: 2px 2px 0 0 var(--in-black);
  transform: rotate(-11.97deg); overflow: hidden;
  animation: ih-win-y 4s linear infinite;
}
.ihero__win-bar { height: 19px; background: var(--in-yellow); border-bottom: 1px solid var(--in-border);
  display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding-right: 6px; }
.ihero__win-bar i { width: 6px; height: 6px; border: 1px solid var(--in-border); display: block; }
/* Pencere gövdesi: 3 tik (✓) */
.ihero__win-body { display: flex; align-items: center; justify-content: center; gap: 5px; height: 29px; }
.ihero__win-body span { font-size: 12px; line-height: 1; color: var(--in-heading); font-weight: 700; }

/* ---- Keyframes (get_motion_context 652:189, 4s loop) ---- */
@keyframes ih-internship-y {
  0% { transform: rotate(2.82deg) translateY(0); }
  50% { transform: rotate(2.82deg) translateY(17px); }
  75.05%,100% { transform: rotate(2.82deg) translateY(0.02px); }
}
@keyframes ih-workshops-y {
  0% { transform: rotate(7deg) translateY(0); }
  50.025% { transform: rotate(7deg) translateY(-13px); }
  75.05%,100% { transform: rotate(7deg) translateY(-1px); }
}
@keyframes ih-mentorship-y {
  0% { transform: rotate(2.82deg) translateY(0); }
  50.025% { transform: rotate(2.82deg) translateY(20px); }
  75.05%,100% { transform: rotate(2.82deg) translateY(-4px); }
}
@keyframes ih-win-y {
  0% { transform: rotate(-11.97deg) translateY(0); }
  50% { transform: rotate(-11.97deg) translateY(-13px); }
  75.025%,100% { transform: rotate(-11.97deg) translateY(0); }
}
@keyframes ih-star1-scale {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  49.975% { transform: scale(1.263); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  100% { transform: scale(1.049); }
}
@keyframes ih-star2-scale {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  49.875% { transform: scale(1.279); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  100% { transform: scale(1); }
}
@keyframes ih-star3-rot {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  58.081% { transform: rotate(90deg); animation-timing-function: cubic-bezier(0.5,0,0.5,1); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ihero__badge, .ihero__win, .ihero__star { animation: none !important; }
}

/* Ölçek tamamen --ih-scale (JS) ile; ayrı bir breakpoint gerekmez.
   JS yüklenmezse aspect-ratio + scene taşması overflow:hidden ile kırpılır (grid görünür). */