/* =========================================================================
   BrainFit — Dekoratif SVG katmanı ve animasyonlar
   =========================================================================
   SVG bileşenleri app/views/components/svg/ altındadır ve App\Utils\Svg ile
   render edilir. Bu dosya onların konumlandırmasını, opaklığını ve
   animasyonlarını yönetir.

   Kurallar:
   - Dekoratif katman tıklamayı engellemez (pointer-events: none).
   - Animasyonlar YALNIZCA kök <svg> üzerinde .bf-animated varsa çalışır;
     panelden kapatıldığında sınıf basılmaz ve her şey statik kalır.
   - prefers-reduced-motion altında tüm hareket durur.
   - Mobilde detay azaltılır, ağır bileşenler gizlenebilir.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Dekoratif sarmalayıcı — bölüm içinde konumlandırma
   ---------------------------------------------------------------------- */
.bf-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Dekoratif katmanı olan bölümler içeriği üstte tutar */
.bf-has-decor {
    position: relative;
    isolation: isolate;
}

.bf-has-decor > .tf-container,
.bf-has-decor > .container,
.bf-has-decor > .row,
.bf-decor-above {
    position: relative;
    z-index: 1;
}

/* -------------------------------------------------------------------------
   SVG temel
   ---------------------------------------------------------------------- */
.bf-svg {
    display: block;
    max-width: 100%;
    height: auto;
    pointer-events: none;
    opacity: var(--bf-svg-opacity, 1);
}

/* Boyut çeşitleri */
.bf-svg--sm { width: min(180px, 34vw); }
.bf-svg--md { width: min(320px, 52vw); }
.bf-svg--lg { width: min(520px, 68vw); }
.bf-svg--full { width: 100%; }

/* Konum çeşitleri — .bf-decor içinde mutlak konumlanır */
.bf-decor .bf-svg--left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.bf-decor .bf-svg--right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.bf-decor .bf-svg--top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.bf-decor .bf-svg--bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.bf-decor .bf-svg--center {
    position: absolute;
    inset: 0;
    margin: auto;
}

/* İkonlar akış içinde kalır, mutlak konumlanmaz */
.bf-ico {
    display: inline-block;
    vertical-align: -0.15em;
    flex: 0 0 auto;
    pointer-events: none;
    color: inherit;
}

/* Renk yardımcıları — ikonlar currentColor kullanır */
.bf-ico--blue { color: var(--bf-accent-strong); }
.bf-ico--orange { color: #8A5E12; }
.bf-ico--green { color: #3F7A30; }
.bf-ico--magenta { color: #9E2472; }
.bf-ico--coral { color: #C24A2B; }
.bf-ico--muted { color: var(--bf-ink-3); }

/* -------------------------------------------------------------------------
   Animasyonlar
   ---------------------------------------------------------------------- */

/* Çizilme — path'lerde pathLength="1" olduğu için dasharray birim üzerinden */
@keyframes bf-draw-in {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes bf-node-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.18); opacity: 1; }
}

@keyframes bf-float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes bf-float-y-alt {
    0%, 100% { transform: translateY(-6px); }
    50% { transform: translateY(4px); }
}

@keyframes bf-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bf-travel-path {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
}

@keyframes bf-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Çizim: yalnızca .bf-animated içinde */
.bf-animated .bf-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: bf-draw-in var(--bf-dur-draw) var(--bf-ease-out) forwards;
    animation-delay: var(--bf-svg-delay, 0s);
}

/* Animasyon kapalıysa yollar tam görünür kalır */
.bf-svg:not(.bf-animated) .bf-draw {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
}

.bf-animated .bf-draw-1 { animation-delay: calc(var(--bf-svg-delay, 0s) + 0.10s); }
.bf-animated .bf-draw-2 { animation-delay: calc(var(--bf-svg-delay, 0s) + 0.25s); }
.bf-animated .bf-draw-3 { animation-delay: calc(var(--bf-svg-delay, 0s) + 0.40s); }
.bf-animated .bf-draw-4 { animation-delay: calc(var(--bf-svg-delay, 0s) + 0.55s); }
.bf-animated .bf-draw-5 { animation-delay: calc(var(--bf-svg-delay, 0s) + 0.70s); }
.bf-animated .bf-draw-6 { animation-delay: calc(var(--bf-svg-delay, 0s) + 0.85s); }

/* Düğüm nefesi — çizim bittikten sonra başlar, sonsuz ama çok yumuşak */
.bf-animated .bf-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: bf-node-pulse var(--bf-dur-pulse) var(--bf-ease) infinite;
    animation-delay: calc(var(--bf-svg-delay, 0s) + var(--bf-dur-draw));
}

.bf-animated .bf-pulse-1 { animation-delay: calc(var(--bf-svg-delay, 0s) + var(--bf-dur-draw) + 0.15s); }
.bf-animated .bf-pulse-2 { animation-delay: calc(var(--bf-svg-delay, 0s) + var(--bf-dur-draw) + 0.35s); }
.bf-animated .bf-pulse-3 { animation-delay: calc(var(--bf-svg-delay, 0s) + var(--bf-dur-draw) + 0.55s); }
.bf-animated .bf-pulse-4 { animation-delay: calc(var(--bf-svg-delay, 0s) + var(--bf-dur-draw) + 0.75s); }
.bf-animated .bf-pulse-5 { animation-delay: calc(var(--bf-svg-delay, 0s) + var(--bf-dur-draw) + 0.95s); }
.bf-animated .bf-pulse-6 { animation-delay: calc(var(--bf-svg-delay, 0s) + var(--bf-dur-draw) + 1.15s); }

/* Süzülme — tüm SVG veya bir grup */
.bf-svg.bf-float,
.bf-animated .bf-float {
    animation: bf-float-y var(--bf-dur-float) var(--bf-ease) infinite;
    animation-delay: var(--bf-svg-delay, 0s);
}

.bf-svg.bf-float-alt,
.bf-animated .bf-float-alt {
    animation: bf-float-y-alt calc(var(--bf-dur-float) + 1.5s) var(--bf-ease) infinite;
    animation-delay: var(--bf-svg-delay, 0s);
}

/* Yavaş dönüş */
.bf-svg.bf-spin-slow,
.bf-animated .bf-spin-slow {
    transform-box: fill-box;
    transform-origin: center;
    animation: bf-rotate var(--bf-dur-orbit) linear infinite;
}

/* Yol üzerinde ilerleyen nokta */
.bf-animated .bf-travel {
    animation: bf-travel-path calc(var(--bf-dur-float) - 1s) linear infinite;
    animation-delay: calc(var(--bf-svg-delay, 0s) + var(--bf-dur-draw));
    offset-rotate: 0deg;
}

/* Animasyon desteklenmiyorsa gezici nokta gizlenir (offset-path yoksa yığılır) */
@supports not (offset-path: path('M0 0')) {
    .bf-travel { display: none; }
}

/* -------------------------------------------------------------------------
   Panelden kapatma anahtarları
   ---------------------------------------------------------------------- */

/* Dekoratif katman tamamen kapalı */
.bf-no-svg .bf-decor,
.bf-no-svg [data-bf-decor] {
    display: none !important;
}

/* Tüm animasyonlar kapalı */
.bf-no-anim .bf-svg,
.bf-no-anim .bf-svg * {
    animation: none !important;
    transition: none !important;
}

.bf-no-anim .bf-draw {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
}

/* Bölüm bazlı animasyon kapatma — Visual::bodyClasses() basar */
.bf-no-anim-hero .section-hero .bf-svg,
.bf-no-anim-hero .page-title-homepage-3 .bf-svg,
.bf-no-anim-benefits .section-benefits .bf-svg,
.bf-no-anim-metrics .bf-metrics .bf-svg,
.bf-no-anim-metrics .section-service .bf-svg,
.bf-no-anim-counter .section-counter .bf-svg,
.bf-no-anim-process .section-process .bf-svg,
.bf-no-anim-news .section-news .bf-svg,
.bf-no-anim-contact .section-contact .bf-svg {
    animation: none !important;
}

.bf-no-anim-hero .section-hero .bf-svg *,
.bf-no-anim-hero .page-title-homepage-3 .bf-svg *,
.bf-no-anim-benefits .section-benefits .bf-svg *,
.bf-no-anim-metrics .bf-metrics .bf-svg *,
.bf-no-anim-metrics .section-service .bf-svg *,
.bf-no-anim-counter .section-counter .bf-svg *,
.bf-no-anim-process .section-process .bf-svg *,
.bf-no-anim-news .section-news .bf-svg *,
.bf-no-anim-contact .section-contact .bf-svg * {
    animation: none !important;
}

.bf-no-anim-hero .page-title-homepage-3 .bf-draw,
.bf-no-anim-benefits .section-benefits .bf-draw,
.bf-no-anim-metrics .bf-metrics .bf-draw,
.bf-no-anim-metrics .section-service .bf-draw,
.bf-no-anim-process .section-process .bf-draw {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
}

/* -------------------------------------------------------------------------
   Mobil
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
    .bf-hide-mobile {
        display: none !important;
    }

    /* Mobilde detay azaltma: ikincil çizim katmanları gizlenir */
    .bf-svg .bf-detail {
        display: none;
    }

    .bf-svg--lg { width: min(360px, 88vw); }
    .bf-svg--md { width: min(240px, 72vw); }
}

@media (min-width: 768px) {
    .bf-hide-desktop {
        display: none !important;
    }
}

/* Panelden "mobilde gösterme" kapalıysa */
.bf-no-svg-mobile .bf-decor {
    display: none;
}

@media (min-width: 768px) {
    .bf-no-svg-mobile .bf-decor {
        display: block;
    }
}

/* -------------------------------------------------------------------------
   Bölüm içi yerleşim yardımcıları
   ---------------------------------------------------------------------- */

/* Kart arkası desen — kartın sağ üstünde, düşük opaklık */
.bf-card-decor {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    max-width: 220px;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}

.bf-card-decor + * ,
.bf-card > *:not(.bf-card-decor) {
    position: relative;
    z-index: 1;
}

/* Fotoğraf çerçevesi sarmalayıcısı */
.bf-frame {
    position: relative;
    display: inline-block;
    isolation: isolate;
}

.bf-frame > img {
    position: relative;
    z-index: 1;
    border-radius: var(--bf-radius-lg);
    display: block;
}

.bf-frame .bf-svg {
    position: absolute;
    inset: -8%;
    width: 116%;
    z-index: 0;
    opacity: 0.9;
}

/* Süreç yolu — kart ızgarasının arkasında */
.bf-journey {
    position: relative;
}

.bf-journey__path {
    position: absolute;
    left: 0;
    right: 0;
    top: 2.25rem;
    z-index: 0;
    opacity: 0.85;
    pointer-events: none;
}

.bf-journey__items {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .bf-journey__path {
        display: none;
    }
}

/* Bölüm bağlayıcı */
.bf-connector {
    display: block;
    width: 100%;
    line-height: 0;
    margin-block: calc(var(--bf-section-y) * -0.35) 0;
    pointer-events: none;
}

/* Başlık altı düğüm ayırıcı */
.bf-node-divider {
    display: block;
    width: 200px;
    max-width: 60%;
    margin-top: var(--bf-space-4);
}

.text-center .bf-node-divider,
.bf-center .bf-node-divider {
    margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Hareket duyarlılığı — her şey statik
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bf-svg,
    .bf-svg * {
        animation: none !important;
        transition: none !important;
    }

    .bf-draw {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }

    .bf-travel {
        display: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   Kenar şekilleri — tek büyük pastel form
   =========================================================================
   İlk dekoratif katman ince çizgi ve düğüm kompozisyonlarından oluşuyordu ve
   sayfayı kalabalıklaştırıyordu. Yerine bölüm başına EN FAZLA BİR tane, geniş,
   kontursuz, pastel şekil geliyor. Şekiller kenardan taşar; içeriğin arkasında
   kalır, okunurluğu etkilemez.
   ====================================================================== */

.bf-edge {
    opacity: 1;
}

/* Kenardan taşma — şeklin bir kısmı bölüm sınırının dışında kalır.
   ÖNEMLİ: taşma yalnızca YATAY olmalı. Şekil sabit 34rem (544px) genişlikte
   olduğu için 165-487px yüksekliğindeki bloklarda .bf-decor'un
   overflow:hidden'ı onu üstten ve alttan DÜZ BİR ÇİZGİYLE kesiyordu —
   11 sayfanın 9'unda, en fazla 190px. Yükseklik kabı aşmayacak şekilde
   bağlanıyor; genişlik oranla türetilir, böylece şekil yalnızca sağ/sol
   kenardan taşar ve kesim görünmez. */
.bf-decor .bf-edge.bf-svg--right,
.bf-decor .bf-edge.bf-svg--left {
    top: 50%;
    height: min(100%, 26rem);
    width: auto;
    aspect-ratio: 1;
}

/* Taşma miktarı şeklin KENDİ genişliğine oranlı verilir.
   Önce `right: clamp(-12rem, -10vw, -3rem)` gibi sabit bir ofset vardı; şekil
   boyu bölüm yüksekliğine göre değiştiği için görünen kısım kontrolsüzdü ve
   metin kolonunun içine giriyordu (ölçüm: 544px'lik kare 11 metin kutusuyla
   8099px²'ye kadar çakışıyordu). Yüzde ile şeklin ~%42'si görünür kalır,
   gerisi bölüm sınırının dışına taşar. */
.bf-decor .bf-edge.bf-svg--right {
    right: 0;
    transform: translate(58%, -50%);
}

.bf-decor .bf-edge.bf-svg--left {
    left: 0;
    transform: translate(-58%, -50%);
}

.bf-decor .bf-edge.bf-svg--top {
    top: clamp(-12rem, -10vw, -3rem);
    left: 50%;
    transform: translateX(-50%);
    width: min(46rem, 70vw);
}

.bf-decor .bf-edge.bf-svg--bottom {
    bottom: clamp(-12rem, -10vw, -3rem);
    left: 50%;
    transform: translateX(-50%);
    width: min(46rem, 70vw);
}

/* --- Köşe ve boşluk konumları ---
   Şekiller yalnızca kenardan taşan büyük formlar olarak durmasın: bölümün
   üst/alt dolgu şeridine ve dış oluklara oturan küçük formlar da olsun.
   Bu konumlar bilinçli olarak METİN KOLONUNUN DIŞINA hedeflenir; .bf-decor
   zaten içeriğin altında (z-index 0) ve tıklamayı engellemez. */
.bf-decor .bf-edge.bf-svg--left-top,
.bf-decor .bf-edge.bf-svg--right-top,
.bf-decor .bf-edge.bf-svg--left-bottom,
.bf-decor .bf-edge.bf-svg--right-bottom {
    /* position: absolute ZORUNLU. Temel konum sınıfları (--left, --right,
       --top, --bottom, --center) bunu tek tek veriyor; yeni köşe adları o
       listede olmadığı için ilk sürümde şekiller normal akışta kaldı ve
       hepsi x=0'da alt alta dizilip başlıkların üstüne bindi. */
    position: absolute;
    inset: auto;
    width: auto;
    height: min(11rem, 22vw);
    aspect-ratio: 1;
}

/* Ofsetler şeklin KENDİ boyutuna oranlı. Sabit rem değeriyle (-4.5rem)
   bölüm dolgusu her yerde aynı olmadığı için bazı bölümlerde şekil içeri
   taşıp başlığa değiyordu (ölçüm: /iletisim'de 425px²). Oransal ofsette
   şeklin yalnızca ~%30'u bölüm sınırının içinde kalır; bu bant her bölümde
   dolgu alanına denk gelir, orada metin yoktur.
   Dikey pay %30'dan %62'ye çıkarıldı: ilk ayarda görünen alan 57x31px'e
   düşüyordu ve şekil tasarım öğesi gibi değil, artık gibi duruyordu.
   xs (104px) için 62% = ~64px; bölümlerin dolgusu 75px olduğu için hâlâ
   metnin dışında kalır. */
.bf-decor .bf-edge.bf-svg--left-top {
    top: 0;
    left: 0;
    transform: translate(-42%, -38%);
}

.bf-decor .bf-edge.bf-svg--right-top {
    top: 0;
    right: 0;
    transform: translate(42%, -38%);
}

.bf-decor .bf-edge.bf-svg--left-bottom {
    bottom: 0;
    left: 0;
    transform: translate(-42%, 38%);
}

.bf-decor .bf-edge.bf-svg--right-bottom {
    bottom: 0;
    right: 0;
    transform: translate(42%, 38%);
}

/* Küçük boyut — boşluklara serpilen formlar için */
.bf-decor .bf-edge.bf-svg--xs { height: min(6.5rem, 13vw); }
.bf-decor .bf-edge.bf-svg--sm { height: min(9rem, 18vw); }

/* Şekil sayısı arttığı için tek tek daha silik dursunlar */
.bf-decor .bf-edge.bf-svg--left-top,
.bf-decor .bf-edge.bf-svg--right-top,
.bf-decor .bf-edge.bf-svg--left-bottom,
.bf-decor .bf-edge.bf-svg--right-bottom {
    opacity: 0.75;
}

@media (max-width: 991px) {
    /* Mobilde metin kolonu tüm genişliği kapladığı için küçük formlar
       kaçınılmaz biçimde yazının altına düşerdi — gizlenirler. */
    .bf-decor .bf-edge.bf-svg--left-top,
    .bf-decor .bf-edge.bf-svg--right-top,
    .bf-decor .bf-edge.bf-svg--left-bottom,
    .bf-decor .bf-edge.bf-svg--right-bottom {
        display: none;
    }
}

.bf-decor .bf-edge.bf-svg--center {
    inset: auto;
    right: clamp(-10rem, -8vw, -3rem);
    top: 8%;
    height: 84%;
    width: auto;
    aspect-ratio: 1;
    max-width: min(30rem, 42vw);
}

/* Süzülme çok yavaş ve çok küçük genlikte — tek şekilde bu yeterli */
.bf-edge__art.bf-float {
    animation-duration: calc(var(--bf-dur-float) + 4s);
}

@keyframes bf-edge-drift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -14px, 0); }
}

.bf-animated .bf-edge__art.bf-float {
    animation-name: bf-edge-drift;
}

/* Mobil: şekil daha küçük ve daha da kenarda */
@media (max-width: 767px) {
    .bf-decor .bf-edge.bf-svg--right,
    .bf-decor .bf-edge.bf-svg--left {
        width: min(20rem, 68vw);
    }
}