/**
 * Hero motion — 16 sn'lik canlı döngü: telefonda 4 sahne (öğrenci) + Veli / Öğretmen / AI Koç bildirimleri.
 * Yalnızca transform / opacity / stroke-dashoffset animasyonu; layout tetiklemez.
 * Sayaçlar @property + counter() ile CSS'te döner (JS yok).
 * Duraklatma: hero-motion.js .is-paused sınıfını ekler.
 * prefers-reduced-motion: son sahne statik gösterilir.
 */

@property --hm-q   { syntax: "<integer>"; inherits: true; initial-value: 40; }
@property --hm-net { syntax: "<integer>"; inherits: true; initial-value: 78; }

.od-hero__visual { --hm-cycle: 16s; }

.hm-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 1290 / 2796;
  border-radius: 12% / 5.6%;
  padding: 2.6%;
  background: var(--color-neutral-900);
  box-shadow:
    0 30px 50px -8px color-mix(in srgb, #2e2b25 32%, transparent),
    inset 0 0 0 1.5px color-mix(in srgb, #fff 14%, transparent);
  transform: rotate(-3deg);
  container-type: inline-size;
}
.hm-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10% / 4.6%;
  overflow: hidden;
  background: var(--color-neutral-100);
  font-family: var(--font-body);
  color: var(--color-neutral-900);
}
.hm-phone__island {
  position: absolute;
  z-index: 3;
  top: 2.2%;
  left: 50%;
  width: 29%;
  height: 3.6%;
  border-radius: 999px;
  background: #0b0b0b;
  transform: translateX(-50%);
}
.hm-phone__bar {
  position: absolute;
  z-index: 3;
  bottom: 1.6%;
  left: 50%;
  width: 34%;
  height: 0.7%;
  border-radius: 999px;
  background: var(--color-neutral-900);
  opacity: 0.75;
  transform: translateX(-50%);
}

/* ── sahneler ────────────────────────────────────────────────────────────── */

.hm-scene {
  position: absolute;
  inset: 0;
  padding: 19% 8% 8%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: hm-scene var(--hm-cycle) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.hm-scene--1 { --d: 0s; }
.hm-scene--2 { --d: 4s; }
.hm-scene--3 { --d: 8s; }
.hm-scene--4 { --d: 12s; }

@keyframes hm-scene {
  0%        { opacity: 0; transform: translateY(4cqw); }
  2%, 22%   { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: translateY(-4cqw); }
}

.hm-kicker {
  font-size: 4.2cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-2-600);
  margin: 0 0 2cqw;
}
.hm-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 9.4cqw;
  line-height: 1.08;
  margin: 0 0 6cqw;
}

/* sahne 1 — ders seç */
.hm-chips { display: grid; gap: 3cqw; }
.hm-chip {
  display: flex;
  align-items: center;
  gap: 3.4cqw;
  padding: 4cqw 4.4cqw;
  border-radius: 5cqw;
  background: #fff;
  font-size: 5cqw;
  font-weight: 600;
  box-shadow: 0 0 0 1.4px var(--color-neutral-200);
  opacity: 0;
  animation: hm-chip var(--hm-cycle) cubic-bezier(.2, .9, .3, 1.2) infinite;
  animation-delay: calc(var(--d, 0s) + var(--i) * 0.18s + 0.3s);
}
.hm-chip::before {
  content: "";
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 50%;
  background: var(--dot, var(--color-accent-2-400));
}
.hm-chip:nth-child(2) { --dot: var(--color-accent-400); }
.hm-chip:nth-child(3) { --dot: var(--color-accent-2-600); }
.hm-chip:nth-child(4) { --dot: var(--color-neutral-500); }
.hm-scene--1 .hm-chip { --d: 0s; }
.hm-chip--pick {
  animation-name: hm-chip, hm-pick;
  animation-duration: var(--hm-cycle), var(--hm-cycle);
  animation-delay: calc(0.3s), 1.7s;
}
@keyframes hm-chip {
  0%        { opacity: 0; transform: translateY(5cqw) scale(.96); }
  2.5%, 22% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: none; }
}
@keyframes hm-pick {
  0%, 1.5%  { background: #fff; color: var(--color-neutral-900); box-shadow: 0 0 0 1.4px var(--color-neutral-200); }
  4%, 100%  { background: var(--color-accent-2-700); color: #fff; box-shadow: 0 0 0 1.4px var(--color-accent-2-700); }
}
.hm-cta {
  margin-top: auto;
  padding: 4.4cqw;
  border-radius: 5cqw;
  text-align: center;
  font-size: 5cqw;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent-2-700);
}

/* sahne 2 — kayıt */
.hm-card {
  padding: 5cqw;
  border-radius: 6cqw;
  background: #fff;
  box-shadow: 0 0 0 1.4px var(--color-neutral-200);
}
.hm-card__row { display: flex; align-items: baseline; justify-content: space-between; }
.hm-card__label { font-size: 4.2cqw; font-weight: 600; color: var(--color-neutral-600); }
.hm-q {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15cqw;
  line-height: 1;
  color: var(--color-accent-600);
  animation: hm-count var(--hm-cycle) cubic-bezier(.3, .7, .2, 1) infinite;
  animation-delay: calc(4s + .5s);
  counter-reset: q var(--hm-q);
}
.hm-q::after { content: counter(q); }
@keyframes hm-count {
  0%        { --hm-q: 0; }
  7.5%, 100% { --hm-q: 40; }
}
.hm-dyb { display: grid; gap: 3cqw; margin-top: 5cqw; }
.hm-dyb__row { display: grid; grid-template-columns: 6cqw 1fr 8cqw; align-items: center; gap: 3cqw; font-size: 4.2cqw; font-weight: 700; }
.hm-dyb__track { height: 3.2cqw; border-radius: 999px; background: var(--color-neutral-200); overflow: hidden; }
.hm-dyb__fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--fill);
  transform-origin: left center;
  transform: scaleX(0);
  animation: hm-bar var(--hm-cycle) cubic-bezier(.3, .7, .2, 1) infinite;
  animation-delay: calc(4s + .7s + var(--i) * .15s);
}
@keyframes hm-bar {
  0%        { transform: scaleX(0); }
  7%, 100%  { transform: scaleX(var(--w)); }
}
.hm-saved {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  padding: 4.4cqw;
  border-radius: 5cqw;
  font-size: 5cqw;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent-2-700);
  animation: hm-press var(--hm-cycle) ease-out infinite;
  animation-delay: calc(4s + 2.2s);
}
.hm-saved svg { width: 5.4cqw; height: 5.4cqw; }
@keyframes hm-press {
  0%        { transform: scale(1);   background: var(--color-accent-2-700); }
  1.5%      { transform: scale(.96); }
  3%, 100%  { transform: scale(1);   background: var(--color-accent-600); }
}

/* sahne 3 — ilerleme */
.hm-net {
  display: flex;
  align-items: baseline;
  gap: 1cqw;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  color: var(--color-accent-600);
  line-height: 1;
}
.hm-net__int {
  font-size: 19cqw;
  animation: hm-net var(--hm-cycle) cubic-bezier(.3, .7, .2, 1) infinite;
  animation-delay: calc(8s + .5s);
  counter-reset: n var(--hm-net);
}
.hm-net__int::after { content: counter(n); }
.hm-net__dec { font-size: 11cqw; }
@keyframes hm-net {
  0%        { --hm-net: 62; }
  7.5%, 100% { --hm-net: 78; }
}
.hm-net__delta {
  margin-left: 2cqw;
  font-family: var(--font-body);
  font-size: 4.4cqw;
  font-weight: 700;
  color: var(--color-accent-2-600);
}
.hm-chart { width: 100%; margin: 4cqw 0 5cqw; overflow: visible; }
.hm-chart__area { fill: color-mix(in srgb, var(--color-accent-400) 22%, transparent); opacity: 0; animation: hm-area var(--hm-cycle) ease-out infinite; animation-delay: calc(8s + 1.4s); }
.hm-chart__line {
  fill: none;
  stroke: var(--color-accent-600);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hm-draw var(--hm-cycle) cubic-bezier(.4, .1, .2, 1) infinite;
  animation-delay: calc(8s + .5s);
}
.hm-chart__dot { fill: var(--color-accent-600); opacity: 0; animation: hm-area var(--hm-cycle) ease-out infinite; animation-delay: calc(8s + 1.5s); }
@keyframes hm-draw { 0% { stroke-dashoffset: 1; } 10.5%, 100% { stroke-dashoffset: 0; } }
@keyframes hm-area { 0% { opacity: 0; } 4%, 100% { opacity: 1; } }

.hm-streak { display: flex; gap: 2.4cqw; align-items: center; margin-top: auto; font-size: 4.4cqw; font-weight: 700; }
.hm-streak__dots { display: flex; gap: 1.8cqw; margin-left: auto; }
.hm-streak__dots i {
  width: 4.6cqw; height: 4.6cqw; border-radius: 50%;
  background: var(--color-neutral-200);
  animation: hm-dot var(--hm-cycle) ease-out infinite;
  animation-delay: calc(8s + 1.8s + var(--i) * .12s);
}
@keyframes hm-dot { 0% { background: var(--color-neutral-200); transform: scale(1); } 2.3% { transform: scale(1.35); } 4.5%, 100% { background: var(--color-accent-500); transform: scale(1); } }

/* ── sahne 4 — sınav yolculuğu ── */
.hm-journey { width: 100%; margin-top: 1cqw; overflow: visible; }
.hm-journey__base { fill: none; stroke: var(--color-neutral-400); stroke-width: 1.4; stroke-dasharray: 1.6 2.6; stroke-linecap: round; }
.hm-journey__prog {
  fill: none;
  stroke: var(--color-accent-500);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hm-jprog var(--hm-cycle) cubic-bezier(.4, .1, .2, 1) infinite;
  animation-delay: calc(12s + .4s);
}
@keyframes hm-jprog { 0% { stroke-dashoffset: 1; } 9%, 100% { stroke-dashoffset: .5; } }
.hm-jn { fill: var(--color-neutral-200); stroke: var(--color-neutral-400); stroke-width: 1; }
.hm-jn--done {
  animation: hm-jdone var(--hm-cycle) ease-out infinite;
  animation-delay: calc(12s + .4s + var(--i) * .55s);
}
@keyframes hm-jdone { 0% { fill: var(--color-neutral-200); stroke: var(--color-neutral-400); } 2%, 100% { fill: var(--color-accent-500); stroke: var(--color-accent-600); } }
.hm-jlabel { font-size: 5.4px; font-weight: 700; fill: var(--color-neutral-700); font-family: var(--font-body); }
.hm-jpulse {
  fill: none; stroke: var(--color-accent-500); stroke-width: 1;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: hm-jpulse 1.6s ease-out infinite;
  animation-delay: calc(12s + 1.7s);
}
@keyframes hm-jpulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.hm-jflag { fill: var(--color-accent-2-700); }
.hm-jdays { margin-top: auto; font-size: 4.4cqw; font-weight: 700; color: var(--color-accent-2-700); text-align: center; }

/* ── rol bildirimleri (Veli / Öğretmen / AI Koç) ── aynı anda en fazla bir tane ── */

.hm-note {
  z-index: 4;
  width: 208px;
  padding: 12px 14px 13px;
  border-radius: 18px;
  background: var(--color-neutral-100);
  box-shadow: 0 24px 48px -18px color-mix(in srgb, #2e2b25 34%, transparent), 0 0 0 1px var(--color-neutral-200);
  opacity: 0;
  translate: 0 10px;
  scale: .94;
  animation: hm-note var(--hm-cycle) cubic-bezier(.2, .9, .3, 1.15) infinite;
  animation-delay: var(--at);
}
.hm-note--veli     { --at: 6.4s;  top: 5%;    right: -12%; transform: rotate(3deg); }
.hm-note--ogretmen { --at: 8.4s;  bottom: 9%; left: -14%;  transform: rotate(-3deg); }
.hm-note--koc      { --at: 10.6s; top: 5%;    right: -12%; transform: rotate(2deg); width: 224px; animation-name: hm-note-long; }
@keyframes hm-note      { 0% { opacity: 0; translate: 0 10px; scale: .94; } 3%, 17% { opacity: 1; translate: 0 0; scale: 1; } 20%, 100% { opacity: 0; translate: 0 -6px; scale: .97; } }
@keyframes hm-note-long { 0% { opacity: 0; translate: 0 10px; scale: .94; } 3%, 30% { opacity: 1; translate: 0 0; scale: 1; } 33%, 100% { opacity: 0; translate: 0 -6px; scale: .97; } }

.hm-note__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hm-note__role {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-neutral-900);
  background: var(--color-accent-200);
}
.hm-note--ogretmen .hm-note__role { background: var(--color-accent-2-200); }
.hm-note--koc .hm-note__role { background: var(--color-neutral-900); color: var(--color-neutral-100); }
.hm-note__time { font-size: 10px; font-weight: 600; color: var(--color-neutral-600); }
.hm-note__text { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--color-neutral-800); }
.hm-note__text strong { color: var(--color-neutral-900); }
.hm-note__sub { display: block; margin-top: 3px; font-size: 11px; color: var(--color-neutral-600); }
.hm-note__bar { height: 5px; margin-top: 8px; border-radius: 999px; background: var(--color-neutral-200); overflow: hidden; }
.hm-note__bar i {
  display: block; height: 100%; width: 100%;
  border-radius: inherit; background: var(--color-accent-2-600);
  transform-origin: left center;
  animation: hm-nbar var(--hm-cycle) cubic-bezier(.3, .7, .2, 1) infinite;
  animation-delay: calc(var(--at) + .5s);
}
@keyframes hm-nbar { 0% { transform: scaleX(.72); } 4%, 100% { transform: scaleX(.79); } }

@media (max-width: 640px) {
  .hm-note { width: 172px; padding: 9px 11px 10px; }
  .hm-note--koc { width: 184px; }
  .hm-note--veli, .hm-note--koc { right: -8%; top: 3%; }
  .hm-note--ogretmen { left: -8%; }
  .hm-note__text { font-size: 11.5px; }
}


/* ── parallax (mevcut kural img içindi; telefona taşındı) ── */
@media (prefers-reduced-motion: no-preference) {
  .od-hero__visual .hm-phone { transform: rotate(-3deg) translateY(calc(var(--parallax, 0) * 0.1px)); }
  .hm-note--veli     { transform: rotate(3deg)  translateY(calc(var(--parallax, 0) * -0.6px)); }
  .hm-note--ogretmen { transform: rotate(-3deg) translateY(calc(var(--parallax, 0) * -0.85px)); }
  .hm-note--koc      { transform: rotate(2deg)  translateY(calc(var(--parallax, 0) * -1.1px)); }
}

/* ── duraklatma / azaltılmış hareket ─────────────────────────────────────── */

.od-hero__visual.is-paused *,
.od-hero__visual.is-paused *::before,
.od-hero__visual.is-paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .hm-phone *, .hm-note, .hm-note * { animation: none !important; }
  .hm-note--veli, .hm-note--ogretmen { display: none; }
  .hm-scene { opacity: 0; }
  .hm-scene--3 { opacity: 1; }
  .hm-chart__line { stroke-dashoffset: 0; }
  .hm-chart__area, .hm-chart__dot { opacity: 1; }
  .hm-streak__dots i { background: var(--color-accent-500); }
  .hm-note--koc { opacity: 1; translate: 0 0; scale: 1; }
}


/* ── yerleşim sağlamlığı ─────────────────────────────────────────────────
   Hero metni, sağ kolonun yüksekliğine göre ortalanmak yerine üste hizalanır:
   tarayıcılar telefonun aspect-ratio yüksekliğini farklı hesaplasa bile
   metin üstte kalır. Telefon esnek kapta gerilmez (Safari'de aspect-ratio
   + stretch belirsizliğini önler). */
.od-hero .od-two--hero { align-items: start; }
.od-hero .od-two--hero > :first-child { padding-top: clamp(0px, 4vw, 40px); }
.od-hero__visual .od-figure { align-items: flex-start; }
.hm-phone { align-self: flex-start; flex: none; }
@media (max-width: 900px) {
  .od-hero .od-two--hero > :first-child { padding-top: 0; }
}