/* =========================================================
   ART ADR - Gorsel efekt katmani
   Tema renkleri: #183d61 (lacivert) + #c1c1c1 (gri)
   Tum efektler .js-fx sinifi ile devreye girer; JS yoksa
   sayfa tamamen normal ve gorunur kalir.
   ========================================================= */

/* ---------------------------------------------------------
   1) Kaydirinca beliren ogeler
   --------------------------------------------------------- */
.js-fx [data-fx] {
    opacity: 0;
    transition: opacity .75s cubic-bezier(.2, .8, .2, 1),
                transform .75s cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, transform;
}

.js-fx [data-fx="up"] { transform: translateY(34px); }
.js-fx [data-fx="left"] { transform: translateX(-40px); }
.js-fx [data-fx="right"] { transform: translateX(40px); }
.js-fx [data-fx="zoom"] { transform: scale(.94); }

.js-fx [data-fx].is-shown {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------
   2) Baslik etiketinin altinda akan cizgi
   --------------------------------------------------------- */
.sec-title__tagline {
    position: relative;
}

.sec-title__tagline h4 {
    position: relative;
    display: inline-block;
}

.sec-title__tagline h4::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
            rgba(24, 61, 97, 0) 0%,
            #183d61 25%,
            #c1c1c1 60%,
            rgba(193, 193, 193, 0) 100%);
    background-size: 220% 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1) .15s;
}

.js-fx .sec-title.is-shown .sec-title__tagline h4::after,
.js-fx .sec-title__tagline.is-shown h4::after {
    transform: scaleX(1);
    animation: artadrLineFlow 5s linear infinite 1s;
}

@keyframes artadrLineFlow {
    from { background-position: 0% 50%; }
    to   { background-position: 220% 50%; }
}

/* ---------------------------------------------------------
   3) Kartlarda 3B egilme + uzerinden gecen isik
   --------------------------------------------------------- */
.js-fx .artadr-tilt {
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.js-fx .artadr-tilt-wrap {
    perspective: 900px;
}

/* isik supurmesi */
.artadr-shine {
    position: relative;
    overflow: hidden;
}

.artadr-shine::before {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -70%;
    width: 45%;
    z-index: 5;
    pointer-events: none;
    transform: skewX(-18deg);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .35) 50%,
            rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity .2s ease;
}

.artadr-shine:hover::before {
    opacity: 1;
    animation: artadrShine .85s cubic-bezier(.3, .7, .3, 1) 1;
}

@keyframes artadrShine {
    from { left: -70%; }
    to   { left: 130%; }
}

/* ---------------------------------------------------------
   4) Manyetik butonlar
   --------------------------------------------------------- */
.js-fx .artadr-magnet {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

/* ---------------------------------------------------------
   5) Sabit ustbar: cam etkisi
   --------------------------------------------------------- */
.stricky-header.stricky-header__one {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 10px 30px rgba(16, 44, 71, .10);
    border-bottom: 1px solid rgba(193, 193, 193, .5);
}

/* ustbarin altinda ilerleme cizgisi */
.artadr-scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(var(--sp, 0));
    transform-origin: left center;
    background: linear-gradient(90deg, #183d61 0%, #2f6ba3 55%, #c1c1c1 100%);
    z-index: 9990;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}

.artadr-scrollbar.is-on {
    opacity: 1;
}

/* ---------------------------------------------------------
   6) Bolum gecislerinde ince ayirici
   --------------------------------------------------------- */
.artadr-process::before,
.artadr-faq::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1140px, 92%);
    height: 1px;
    background: linear-gradient(90deg,
            rgba(193, 193, 193, 0) 0%,
            rgba(193, 193, 193, .9) 50%,
            rgba(193, 193, 193, 0) 100%);
    z-index: 2;
}

/* ---------------------------------------------------------
   7) Hareket azaltma
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .js-fx [data-fx] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .artadr-shine::before,
    .artadr-scrollbar {
        display: none;
    }

    .sec-title__tagline h4::after {
        transform: scaleX(1);
        animation: none;
    }
}