/* ============================================================
   HAREKET KATMANI
   Kaydirma ile beliren bolumler, sayac animasyonlari ve
   uzerine gelme mikro etkilesimleri.

   Calisma mantigi:
   - Sunucu, animasyonlu bolumlere data-hrk isaretini basar.
   - Baslangic durumu (gizli) BU DOSYADA tanimlidir; yani JS gec
     yuklense bile icerik once gorunup sonra kaybolmaz.
   - hareket.js bolum ekrana girince .hrk-in sinifini ekler.
   - JS yoksa (noscript) veya IntersectionObserver desteklenmiyorsa
     her sey aninda gorunur; icerik asla kaybolmaz.
   - prefers-reduced-motion: reduce ise tum hareket kapanir.
   ============================================================ */

/* ---------- 1. Bolum icerigi: kaydirinca belirme ---------- */

[data-hrk] .hrk-el,
[data-hrk] .section-head,
[data-hrk] > .container > .row > [class*="col-"],
[data-hrk] > .container > .rounded-4 {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
                transform .6s cubic-bezier(.22, 1, .36, 1);
}

[data-hrk].hrk-in .hrk-el,
[data-hrk].hrk-in .section-head,
[data-hrk].hrk-in > .container > .row > [class*="col-"],
[data-hrk].hrk-in > .container > .rounded-4 {
    opacity: 1;
    transform: none;
}

/* Kartlar sirayla girsin — sutun sirasina gore gecikme. */
[data-hrk] > .container > .row > [class*="col-"]:nth-child(1) { transition-delay: .00s; }
[data-hrk] > .container > .row > [class*="col-"]:nth-child(2) { transition-delay: .07s; }
[data-hrk] > .container > .row > [class*="col-"]:nth-child(3) { transition-delay: .14s; }
[data-hrk] > .container > .row > [class*="col-"]:nth-child(4) { transition-delay: .21s; }
[data-hrk] > .container > .row > [class*="col-"]:nth-child(5) { transition-delay: .28s; }
[data-hrk] > .container > .row > [class*="col-"]:nth-child(6) { transition-delay: .35s; }
[data-hrk] > .container > .row > [class*="col-"]:nth-child(n+7) { transition-delay: .42s; }

/* Bolum basligi kartlardan once girer. */
[data-hrk] .section-head { transition-delay: 0s; }

/* JS ile isaretlenen ic ogeler (kart listeleri, madde siralari). */
.hrk-el { --hrk-gecikme: 0s; transition-delay: var(--hrk-gecikme); }

/* Ic sayfa basligindaki kirilmayolu da satirla birlikte gelsin,
   yoksa baslik solarken uzeri hazir duruyor gibi gorunuyor. */
.inner-hero[data-hrk] > .container > nav {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.inner-hero[data-hrk].hrk-in > .container > nav {
    opacity: 1;
    transform: none;
}

/* ---------- 2. Kaydirma yonleri ---------- */

[data-hrk-yon="sol"] .hrk-el  { transform: translateX(-28px); }
[data-hrk-yon="sag"] .hrk-el  { transform: translateX(28px); }
[data-hrk-yon="olcek"] .hrk-el { transform: scale(.94); }
[data-hrk-yon="solma"] .hrk-el { transform: none; }

[data-hrk-yon].hrk-in .hrk-el { transform: none; }

/* ---------- 3. Hero girisi (sayfa acilisinda) ---------- */

.hrk-hero .info > * {
    opacity: 0;
    transform: translateY(22px);
    animation: hrk-gir .75s cubic-bezier(.22, 1, .36, 1) forwards;
}

.hrk-hero .info > *:nth-child(1) { animation-delay: .05s; }
.hrk-hero .info > *:nth-child(2) { animation-delay: .14s; }
.hrk-hero .info > *:nth-child(3) { animation-delay: .23s; }
.hrk-hero .info > *:nth-child(4) { animation-delay: .32s; }
.hrk-hero .info > *:nth-child(5) { animation-delay: .41s; }
.hrk-hero .info > *:nth-child(6) { animation-delay: .48s; }

/* Giris animasyonu KAPSAYICIYA uygulanir, panelin kendisine degil.
   Sebep: animation-fill-mode:forwards, bittikten sonra da transform'u
   sabitler ve fare parallax'inin yazdigi inline transform'u ezerdi.
   Kapsayiciya tasiyinca panel parallax icin serbest kalir. */
.hrk-hero .hero-panel,
.hrk-hero .hero-gorsel {
    opacity: 0;
    transform: translateY(30px) scale(.97);
    animation: hrk-gir-panel .9s cubic-bezier(.22, 1, .36, 1) .25s forwards;
}

@keyframes hrk-gir {
    to { opacity: 1; transform: none; }
}

@keyframes hrk-gir-panel {
    to { opacity: 1; transform: none; }
}

/* Hero'daki yuzen kartlar panelden sonra gelsin.
   ONEMLI: giris animasyonu YUVAYA ve yalnizca opaklik uzerine uygulanir.
   Kartin kendi surekli suzulme animasyonu (hp-float) transform kullaniyor;
   ayni ozelligi iki animasyon birden yazarsa suzulme olurdu. */
.hrk-hero .hp-float-yuva {
    opacity: 0;
    animation: hrk-solgun-gir .6s ease-out forwards;
}

.hrk-hero .hp-float-yuva-1 { animation-delay: .85s; }
.hrk-hero .hp-float-yuva-2 { animation-delay: 1s; }

@keyframes hrk-solgun-gir {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- 4. Uzerine gelme mikro etkilesimleri ---------- */

/* Yuvarlak ikon rozetleri: hafifce buyur ve renklen. */
.hrk-ikon {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.hrk-kart:hover .hrk-ikon,
.hrk-satir:hover .hrk-ikon {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 12px 24px -12px rgba(74, 58, 255, .55);
}

/* Kart yukselmesi — tema kartlari ve bizim kartlarimiz. */
.hrk-kart {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                box-shadow .35s ease,
                border-color .35s ease;
}

.hrk-kart:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 52px -28px rgba(23, 32, 74, .42);
    border-color: #cfd6f5 !important;
}

/* Metin satirlari (ikon + yazi) — daha sakin bir kayma. */
.hrk-satir {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.hrk-satir:hover {
    transform: translateX(4px);
}

/* "Devamini oku" tipi baglantilardaki ok isareti kaysin. */
.hrk-ok i,
a:hover > .bi-arrow-right,
.btn:hover .bi-arrow-right {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.hrk-ok:hover i,
a:hover > .bi-arrow-right,
.btn:hover .bi-arrow-right {
    transform: translateX(5px);
}

/* Butonlar. */
.btn.rounded-pill {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, filter .25s ease;
}

.btn.rounded-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -18px rgba(74, 58, 255, .7);
}

.btn.rounded-pill:active {
    transform: translateY(0);
}

/* Gorsel cerceveleri: ic iceriden yaklas, tasma kesilsin. */
.hrk-zoom {
    overflow: hidden;
}

.hrk-zoom img {
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
    display: block;
    width: 100%;
}

.hrk-zoom:hover img {
    transform: scale(1.045);
}

/* Menu baglantilarinda alt cizgi buyusun. */
.navbar.style-4 .navbar-nav .nav-link {
    position: relative;
}

.navbar.style-4 .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: #a855f7;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.navbar.style-4 .navbar-nav .nav-item:hover > .nav-link::after {
    transform: scaleX(1);
}

/* ---------- 5. Ust menu kaydirinca ---------- */

.navbar.style-4 {
    transition: box-shadow .3s ease, background-color .3s ease;
}

.navbar.style-4.hrk-yapisik {
    box-shadow: 0 10px 30px -18px rgba(23, 32, 74, .45);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(160%) blur(8px);
}

/* Yukari cik dugmesi. */
.to_top {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}

.to_top:hover {
    transform: translateY(-4px);
}

/* ---------- 6. Sayaclar ---------- */

/* Sayac calisirken sayilar zipla-yerlesme yapmasin. */
.hrk-sayac {
    font-variant-numeric: tabular-nums;
}

/* ---------- 7. Yumusak sicrama (ic baglanti) ---------- */

html {
    scroll-behavior: smooth;
}

/* Yapiskan menunun basligi ortmemesi icin. */
[id] {
    scroll-margin-top: 110px;
}

/* ---------- 8. Erisilebilirlik ---------- */

/* JavaScript kapaliysa hicbir sey gizli kalmasin. */
.hrk-kapali [data-hrk] .hrk-el,
.hrk-kapali [data-hrk] .section-head,
.hrk-kapali [data-hrk] > .container > .row > [class*="col-"],
.hrk-kapali [data-hrk] > .container > .rounded-4 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Kullanici hareketi azaltmak istiyorsa her sey durur. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    [data-hrk] .hrk-el,
    [data-hrk] .section-head,
    [data-hrk] > .container > .row > [class*="col-"],
    [data-hrk] > .container > .rounded-4,
    .inner-hero[data-hrk] > .container > nav,
    .hrk-hero .info > *,
    .hrk-hero .hero-panel,
    .hrk-hero .hero-gorsel,
    .hrk-hero .hp-float-yuva,
    .hp-bar-item {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .hrk-kart:hover,
    .hrk-satir:hover,
    .btn.rounded-pill:hover,
    .to_top:hover {
        transform: none;
    }

    .hrk-zoom:hover img {
        transform: none;
    }

    .hp-pulse,
    .hp-float {
        animation: none !important;
    }
}

/* ============================================================
   9. MINI PANEL GORSELLERI
   Kart icindeki sahte arayuzler bolum ekrana girince kurulur:
   satirlar sirayla dizilir, cubuklar yukselir, isi lekeleri buyur.
   ============================================================ */

/* --- ortak: satir/kutu tipindeki ogeler sirayla belirir --- */
[data-hrk] .fv-row,
[data-hrk] .fv-kpi,
[data-hrk] .fv-queue,
[data-hrk] .fv-chip,
[data-hrk] .fv-person,
[data-hrk] .fv-shift,
[data-hrk] .fv-alert {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

[data-hrk].hrk-in .fv-row,
[data-hrk].hrk-in .fv-kpi,
[data-hrk].hrk-in .fv-queue,
[data-hrk].hrk-in .fv-chip,
[data-hrk].hrk-in .fv-person,
[data-hrk].hrk-in .fv-shift,
[data-hrk].hrk-in .fv-alert {
    opacity: 1;
    transform: none;
}

/* kardesler arasi kademeli gecikme */
[data-hrk] .fv-row:nth-child(1),  [data-hrk] .fv-kpi:nth-child(1),
[data-hrk] .fv-queue:nth-child(1),[data-hrk] .fv-chip:nth-child(1),
[data-hrk] .fv-shift:nth-child(1) { transition-delay: .18s; }

[data-hrk] .fv-row:nth-child(2),  [data-hrk] .fv-kpi:nth-child(2),
[data-hrk] .fv-queue:nth-child(2),[data-hrk] .fv-chip:nth-child(2),
[data-hrk] .fv-shift:nth-child(2) { transition-delay: .26s; }

[data-hrk] .fv-row:nth-child(3),  [data-hrk] .fv-kpi:nth-child(3),
[data-hrk] .fv-queue:nth-child(3),[data-hrk] .fv-chip:nth-child(3),
[data-hrk] .fv-shift:nth-child(3) { transition-delay: .34s; }

[data-hrk] .fv-row:nth-child(n+4),  [data-hrk] .fv-kpi:nth-child(n+4),
[data-hrk] .fv-queue:nth-child(n+4),[data-hrk] .fv-chip:nth-child(n+4),
[data-hrk] .fv-shift:nth-child(n+4) { transition-delay: .42s; }

/* --- cubuk grafikler: tabandan yukselir --- */
[data-hrk] .fv-bar,
[data-hrk] .hp-bar-item {
    transform: scaleY(.05);
    transform-origin: bottom;
    transition: transform .75s cubic-bezier(.22, 1, .36, 1);
    animation: none;
}

[data-hrk].hrk-in .fv-bar,
[data-hrk].hrk-in .hp-bar-item {
    transform: scaleY(1);
}

[data-hrk] .fv-bar:nth-child(1) { transition-delay: .20s; }
[data-hrk] .fv-bar:nth-child(2) { transition-delay: .26s; }
[data-hrk] .fv-bar:nth-child(3) { transition-delay: .32s; }
[data-hrk] .fv-bar:nth-child(4) { transition-delay: .38s; }
[data-hrk] .fv-bar:nth-child(5) { transition-delay: .44s; }
[data-hrk] .fv-bar:nth-child(6) { transition-delay: .50s; }
[data-hrk] .fv-bar:nth-child(n+7) { transition-delay: .56s; }

/* --- ilerleme cubuklari: soldan dolar --- */
[data-hrk] .fv-fill {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1) .3s;
}

[data-hrk].hrk-in .fv-fill {
    transform: scaleX(1);
}

/* --- isi haritasi lekeleri: merkezden buyur --- */
[data-hrk] .fv-blob {
    opacity: 0;
    transform: scale(.3);
    transition: opacity .8s ease, transform .8s cubic-bezier(.34, 1.3, .64, 1);
}

[data-hrk].hrk-in .fv-blob {
    opacity: 1;
    transform: none;
}

[data-hrk] .fv-blob:nth-of-type(1) { transition-delay: .22s; }
[data-hrk] .fv-blob:nth-of-type(2) { transition-delay: .34s; }
[data-hrk] .fv-blob:nth-of-type(3) { transition-delay: .46s; }
[data-hrk] .fv-blob:nth-of-type(4) { transition-delay: .58s; }

/* --- kat plani cizgileri: cizilerek gelir --- */
[data-hrk] .fv-plan rect {
    opacity: 0;
    transition: opacity .6s ease .15s;
}

[data-hrk].hrk-in .fv-plan rect {
    opacity: 1;
}

/* --- canli gostergeler: yalnizca anlamli olanlar nefes alir --- */
.fv-live .fv-dot {
    animation: hrk-nabiz 2.2s ease-in-out infinite;
}

/* Bekleme uyarisi (amber) dikkat cekmeli; mavi/yesil sabit kalir. */
.fv-status.fv-amber {
    animation: hrk-nabiz 1.5s ease-in-out infinite;
}

@keyframes hrk-nabiz {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.85); }
}

/* --- kart uzerine gelince gorsel hafifce yaklassin --- */
.feat-card .fv-stack,
.feat-card .fv-heat {
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.feat-card:hover .fv-stack,
.feat-card:hover .fv-heat {
    transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
    [data-hrk] .fv-row, [data-hrk] .fv-kpi, [data-hrk] .fv-queue,
    [data-hrk] .fv-chip, [data-hrk] .fv-person, [data-hrk] .fv-shift,
    [data-hrk] .fv-alert, [data-hrk] .fv-bar, [data-hrk] .hp-bar-item,
    [data-hrk] .fv-fill, [data-hrk] .fv-blob, [data-hrk] .fv-plan rect {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .fv-live .fv-dot, .fv-status.fv-amber { animation: none !important; }
    .feat-card:hover .fv-stack, .feat-card:hover .fv-heat { transform: none; }
}