/* ===== Hareket katmani v2 — ECOM UNDERGROUND =====
   21st.dev kayitlarindan uyarlandi (React/Motion yerine duz CSS):
   Slide Up Text, Blur Reveal, Gradual Spacing (tom_ui / magicui),
   How It Works Timeline (olewandowski1), Border Beam (larsen66),
   Stats Bento sayaclari (uilayout), Glowing Shadow (designali-in).

   Baslangic (gizli) durumlari YALNIZ html.hrk altinda tanimli. .hrk'yi
   <head>'deki kucuk betik ekler; hareket.js 3 sn icinde "hazirim" demezse
   ayni betik .hrk'yi geri alir — yani dosya yuklenmese bile metin gorunur.

   Var olan transform'lari ezmemek icin giris hareketleri `translate` /
   `scale` ozellikleriyle ve animation (transition degil) ile yapilir;
   animasyon bitince oge kendi stiline doner, hover efektleri bozulmaz. */

/* ---------- Marka: ECOM (beyaz) + UNDERGROUND (lime) ----------
   Logo kutulari display:flex oldugu icin aradaki bosluk duser; kelime
   araligini logo dosyasindaki oranla (.17em + harf sikistirmasi) veriyoruz. */
.brand .ninja + .roi,.sh-brand-mark .ninja + .roi{margin-left:.24em}
/* "ECOM UNDERGROUND" eski 8 harflik addan iki kat uzun: dar ekranda sigsin */
@media (max-width:480px){.hero-brand .brand{font-size:28px}}

@property --hrk-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- 0. bolunmeyi bekleyen basliklar ilk karede gorunmesin ---------- */
.hrk .hero-h1:not(.hrk-hazir),
.hrk .hero-brand .brand:not(.hrk-hazir){opacity:0}
.hrk .hero-body:not(.hrk-ac),
.hrk .hero-cta:not(.hrk-ac),
.hrk .marquee-section:not(.hrk-ac){opacity:0}

/* ---------- 1. Marka: harfler soldan toplanir (Gradual Spacing) ---------- */
.hrk .hrk-gh{display:inline-block;opacity:0;translate:-.35em 0;filter:blur(4px)}
.hrk .hrk-gs.hrk-ac .hrk-gh{animation:hrkHarfTopla .55s cubic-bezier(.2,.7,.2,1) var(--hd,0s) backwards;
  opacity:1;translate:0 0;filter:none}
@keyframes hrkHarfTopla{from{opacity:0;translate:-.35em 0;filter:blur(4px)}}

/* ---------- 2. Kelimeler alttan kayar (Slide Up Text) ---------- */
.hrk .hero-h1 .line{overflow:hidden;padding-bottom:.04em}
.hrk .hrk-kel{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.1em;margin-bottom:-.1em}
.hrk .hrk-ic{display:inline-block;transform:translateY(105%);
  transition:transform .6s cubic-bezier(.625,.05,0,1)}
.hrk .hrk-ks.hrk-ac .hrk-ic{transform:translateY(0)}

/* ---------- 3. Basliklar: harfler bulaniktan netlesir (Blur Reveal) ---------- */
.hrk .hrk-harf{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(10px);
  transition:opacity .6s ease,filter .6s ease,transform .6s ease}
.hrk .hrk-kelime{display:inline-block;white-space:nowrap}
.hrk .hrk-bb.hrk-ac .hrk-harf{opacity:1;filter:blur(0);transform:translateY(0)}

/* ---------- 4. Genel giris: asagidan yukari belirme ---------- */
.hrk .hrk-o:not(.hrk-ac){opacity:0}
.hrk .hrk-o.hrk-ac{animation:hrkYukari .8s cubic-bezier(.2,.7,.3,1) var(--hd,0s) backwards}
.hrk .hrk-o.hrk-sag.hrk-ac{animation-name:hrkSagdan}
.hrk .hrk-o.hrk-olcek.hrk-ac{animation-name:hrkOlcek}
@keyframes hrkYukari{from{opacity:0;translate:0 26px}}
@keyframes hrkSagdan{from{opacity:0;translate:60px 0;rotate:2deg}}
@keyframes hrkOlcek{from{opacity:0;scale:.94;translate:0 18px;filter:blur(6px)}}

/* ---------- 5. Mufredat: dikey zaman cizelgesi (How It Works Timeline) ----------
   .program-num / .program-name / .program-time sinif adlari AYNEN korunuyor —
   ders listesini sunucu bu secicilerle dolduruyor. */
.program-list{position:relative}
.program-row{position:relative;padding-left:56px;border-bottom:0;
  align-items:flex-start;padding-top:9px;padding-bottom:22px}
.program-row:last-child{padding-bottom:4px}
.program-row .program-icon{display:none}
.program-row .program-num{position:absolute;left:0;top:4px;
  width:38px;height:38px;min-width:38px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:#141414;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--mute);
  transition:border-color .35s ease,color .35s ease,background .35s ease}
.program-row::before{content:"";position:absolute;left:19px;top:46px;bottom:0;
  width:1px;background:rgba(255,255,255,.08)}
.program-row:last-child::before{display:none}
.program-row .program-name{flex:1;min-width:0;padding-top:8px}
.program-row .program-time{padding-top:8px;font-variant-numeric:tabular-nums}
.program-row:first-child .program-num{border-color:rgba(212,255,61,.45);
  color:var(--accent);background:rgba(212,255,61,.08)}
.program-row:hover .program-num{border-color:rgba(212,255,61,.45);color:var(--accent)}
.hrk .program-row{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.hrk .program-list.hrk-ac .program-row{opacity:1;transform:none}
@media (max-width:640px){
  .program-row{padding-left:48px;padding-bottom:18px}
  .program-row .program-num{width:34px;height:34px;min-width:34px;font-size:11px}
  .program-row::before{left:17px;top:42px}
}

/* ---------- 6. Grafikler: cizgi kendini cizer ---------- */
.hrk .hrk-grafik .hrk-cizgi{stroke-dasharray:1;stroke-dashoffset:1}
.hrk .hrk-grafik .hrk-alan,
.hrk .hrk-grafik .hrk-uc{opacity:0}
.hrk .hrk-grafik.hrk-ac .hrk-cizgi{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.8s cubic-bezier(.45,.05,.2,1) .15s}
.hrk .hrk-grafik.hrk-ac .hrk-alan{opacity:1;transition:opacity 1.2s ease .9s}
.hrk .hrk-grafik.hrk-ac .hrk-uc{opacity:1;transition:opacity .4s ease 1.8s}

/* ---------- 7. Isik dolasan kenar (Border Beam) ---------- */
.hrk-isin{position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--hrk-a),transparent 0deg,transparent 250deg,
    rgba(212,255,61,.15) 290deg,#d4ff3d 330deg,rgba(212,255,61,.15) 345deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:hrkDon 5s linear infinite;z-index:2}
.hrk-isin::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:inherit;filter:blur(10px);opacity:.55}
@keyframes hrkDon{to{--hrk-a:360deg}}

/* ---------- 8. Kartlarda fareyi izleyen isik ---------- */
.hrk-isik{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(212,255,61,.10),transparent 70%);
  transition:opacity .3s ease;z-index:-1}
.hrk-isikli{isolation:isolate}
.hrk-isikli:hover > .hrk-isik{opacity:1}

/* ---------- 9. Ana butonlar: nefes alan isik (Glowing Shadow) ---------- */
.hrk .hrk-parla{animation:hrkNefes 3.2s ease-in-out infinite}
.hrk .hrk-parla:hover{animation-play-state:paused;
  box-shadow:0 0 0 1px rgba(212,255,61,.6),0 10px 40px -6px rgba(212,255,61,.55)}
@keyframes hrkNefes{
  0%,100%{box-shadow:0 0 0 0 rgba(212,255,61,0),0 8px 28px -10px rgba(212,255,61,.25)}
  50%{box-shadow:0 0 0 6px rgba(212,255,61,.08),0 10px 40px -6px rgba(212,255,61,.45)}}

/* ---------- 10. Hero arka plani: yavas kayan lime isik ---------- */
.hrk-sis{position:absolute;inset:-20% -10%;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 42% at 30% 35%,rgba(212,255,61,.10),transparent 70%),
    radial-gradient(30% 36% at 72% 60%,rgba(212,255,61,.06),transparent 70%);
  animation:hrkSis 18s ease-in-out infinite alternate}
@keyframes hrkSis{to{translate:6% 4%;scale:1.08}}

/* ---------- 11. SSS: acilan cevap yumusak gelir ---------- */
details[open] > .answer{animation:hrkCevap .4s cubic-bezier(.2,.7,.3,1)}
@keyframes hrkCevap{from{opacity:0;translate:0 -6px}}
details summary .q-i{transition:transform .3s ease,color .3s ease}
details[open] summary .q-i{transform:rotate(45deg);color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .hrk-isin,.hrk-sis,.hrk .hrk-parla{animation:none!important}
  details[open] > .answer{animation:none}
}

/* =====================================================================
   v3 — ek 21st.dev efektleri
   ===================================================================== */
@property --hrk-ty{syntax:'<length>';inherits:false;initial-value:0px}

/* ---------- 12. Butonun disinda akan kesik cizgi (Flow Button + Moving Border) ----------
   Iki katman: akan kesik cizgiler + etrafinda dolasan parlak bir iz. */
.hrk-akis{position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);
  overflow:visible;pointer-events:none;z-index:0}
.hrk-akis rect{fill:none;vector-effect:non-scaling-stroke}
.hrk-akis .hrk-akis-cizgi{stroke:rgba(212,255,61,.55);stroke-width:1.25;stroke-dasharray:1.6 1.1;
  animation:hrkAkis 1.6s linear infinite}
.hrk-akis .hrk-akis-iz{stroke:#d4ff3d;stroke-width:2;stroke-linecap:round;stroke-dasharray:14 86;
  filter:drop-shadow(0 0 4px rgba(212,255,61,.9));animation:hrkIz 3.2s linear infinite}
.hrk-akisli:hover .hrk-akis-cizgi{stroke:rgba(212,255,61,.9);animation-duration:.8s}
.hrk-akisli:hover .hrk-akis-iz{animation-duration:1.6s}
@keyframes hrkAkis{to{stroke-dashoffset:-5.4}}
@keyframes hrkIz{to{stroke-dashoffset:-100}}

/* ---------- 13. Basari galerisi: kenara gidenler 3B doner (Arc Flow Carousel) ---------- */
.hrk .hrk-yay .success-phone{
  transform:perspective(1100px) translateY(var(--hrk-ty)) rotateY(var(--ry,0deg)) scale(var(--sc,1));
  transition:border-color .3s ease,box-shadow .3s ease,--hrk-ty .3s ease;will-change:transform}
.hrk .hrk-yay .success-phone:hover{--hrk-ty:-4px}

/* ---------- 14. Fiyat karti fareyle egilir (3D Card) ---------- */
.hrk-egim{transition:transform .25s ease-out,border-color .3s ease,box-shadow .3s ease;will-change:transform}

/* ---------- 15. Video arkasinda donen isik halesi (Glowing Shadow) ---------- */
.hrk-hale{position:absolute;pointer-events:none;z-index:0;border-radius:24px;
  background:conic-gradient(from var(--hrk-a),rgba(212,255,61,.9),transparent 22%,
    rgba(212,255,61,.35) 45%,transparent 65%,rgba(212,255,61,.9));
  filter:blur(46px);opacity:.28;animation:hrkDon 9s linear infinite;transition:opacity .5s ease}
.hrk-hale-ust{position:relative;z-index:1}
.hrk-hale-kap:hover .hrk-hale{opacity:.5}

/* ---------- 16. Topluluk: noktali donen dunya (Globe) ---------- */
.hrk-kureli{position:relative;overflow:hidden}
.hrk-kureli > .container{position:relative;z-index:1}
.hrk-kure{position:absolute;left:50%;bottom:0;translate:-50% 0;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);
          mask-image:linear-gradient(to bottom,#000 55%,transparent)}

/* ---------- 17. Uye alani: hover'da acilan 3B klasor (3D Folder) ---------- */
.hrk-klasor{position:absolute;right:32px;top:92px;width:230px;height:176px;perspective:900px;
  scale:.8;transform-origin:100% 0;cursor:default;z-index:1}
.hrk-klasor .k-arka{position:absolute;inset:16px 0 0 0;border-radius:10px;background:#151515;
  border:1px solid rgba(212,255,61,.22)}
.hrk-klasor .k-sekme{position:absolute;left:0;top:0;width:92px;height:22px;border-radius:9px 9px 0 0;
  background:#151515;border:1px solid rgba(212,255,61,.22);border-bottom:0}
.hrk-klasor .k-kagit{position:absolute;left:22px;right:22px;height:118px;top:30px;border-radius:7px;
  background:#f4f4f0;box-shadow:0 6px 18px rgba(0,0,0,.4);padding:12px 12px 0;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);transform-origin:50% 100%}
.hrk-klasor .k-kagit b{display:block;font:700 9.5px/1.2 inherit;color:#0a0a0a;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:8px}
.hrk-klasor .k-kagit i{display:block;height:5px;border-radius:3px;background:#d9d9d4;margin-bottom:6px}
.hrk-klasor .k-kagit i:nth-of-type(2){width:80%}.hrk-klasor .k-kagit i:nth-of-type(3){width:62%}
.hrk-klasor .k-k1{transform:translateY(8px) rotate(-3deg)}
.hrk-klasor .k-k2{transform:translateY(4px) rotate(2deg);background:#e9eadf}
.hrk-klasor .k-k3{transform:translateY(0);background:#d4ff3d}
.hrk-klasor .k-on{position:absolute;left:0;right:0;bottom:0;height:118px;border-radius:10px;
  background:linear-gradient(160deg,#1f2410,#121212 60%);border:1px solid rgba(212,255,61,.35);
  transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.8,.2,1);
  display:flex;align-items:flex-end;justify-content:space-between;padding:0 16px 14px;
  box-shadow:0 -8px 24px rgba(0,0,0,.35)}
.hrk-klasor .k-on::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 45%,transparent 60%);
  background-size:250% 100%;background-position:100% 0;transition:background-position .8s ease}
.hrk-klasor .k-on span{font-size:10px;font-weight:700;letter-spacing:.14em;color:#d4ff3d;text-transform:uppercase}
.hrk-klasor .k-on em{font-style:normal;font-size:11px;color:rgba(250,250,250,.55)}
.hrk-klasor:hover .k-on,.hrk-klasor.k-acik .k-on{transform:rotateX(-38deg)}
.hrk-klasor:hover .k-on::after{background-position:0 0}
.hrk-klasor:hover .k-k1,.hrk-klasor.k-acik .k-k1{transform:translateY(-26px) rotate(-7deg)}
.hrk-klasor:hover .k-k2,.hrk-klasor.k-acik .k-k2{transform:translateY(-40px) rotate(4deg)}
.hrk-klasor:hover .k-k3,.hrk-klasor.k-acik .k-k3{transform:translateY(-52px) rotate(-1deg)}

/* ---------- 18. Altbilgi: asagi inen katmanli dev yazi (Layered Text) ---------- */
.hrk-katman{position:relative;margin-top:44px;padding-bottom:.34em;overflow:hidden;perspective:1000px;
  user-select:none;-webkit-user-select:none}
.hrk-katman-sahne{position:relative;transform-style:preserve-3d;transform-origin:50% 0;
  transform:rotateX(-24deg) rotateY(var(--kry,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hrk-katman .hrk-k{display:block;text-align:center;white-space:nowrap;font-weight:800;line-height:.86;
  letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1px rgba(212,255,61,var(--ka,.3));
  transform:translateY(calc(var(--i) * var(--ara,0em)));
  transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .05s)}
.hrk-katman .hrk-k + .hrk-k{position:absolute;left:0;right:0;top:0}
.hrk-katman .hrk-k.k-ust{-webkit-text-stroke:0;
  background:linear-gradient(180deg,#d4ff3d 0%,rgba(212,255,61,.55) 55%,rgba(212,255,61,.08) 100%);
  -webkit-background-clip:text;background-clip:text}
.hrk-katman.hrk-ac{--ara:.075em}
.hrk-katman.hrk-ac:hover{--ara:.12em}