/* ============================================================
   PARALLAX ve DEKORATIF KATMANLAR

   Temanin kendi dili taklit edildi: cok yavas donen, nefes alan
   ve suzulen yumusak sekiller. Buradaki katmanlar tamamen
   dekoratiftir; ekran okuyuculardan gizlenir ve tiklamayi engellemez.
   ============================================================ */

/* ---------- dekoratif isik lekeleri ---------- */

.plx-dekor {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;          /* altindaki metin secilebilsin */
    z-index: 0;
    filter: blur(46px);
    opacity: .55;
    will-change: transform;
}

/* Bolum icerigi lekelerin USTUNDE kalmali. */
section { position: relative; }
section > .container { position: relative; z-index: 1; }

.plx-mor   { background: radial-gradient(circle, rgba(168, 85, 247, .42) 0%, rgba(168, 85, 247, 0) 70%); }
.plx-mavi  { background: radial-gradient(circle, rgba(124, 58, 237, .34) 0%, rgba(124, 58, 237, 0) 70%); }
.plx-pembe { background: radial-gradient(circle, rgba(224, 86, 253, .30) 0%, rgba(224, 86, 253, 0) 70%); }
.plx-yesil { background: radial-gradient(circle, rgba(244, 114, 182, .24) 0%, rgba(244, 114, 182, 0) 70%); }

/* Boyutlar */
.plx-sm { width: 220px; height: 220px; }
.plx-md { width: 340px; height: 340px; }
.plx-lg { width: 460px; height: 460px; }

/* Konumlar */
.plx-sol-ust  { top: -60px;  left: -80px; }
.plx-sag-ust  { top: -90px;  right: -100px; }
.plx-sol-alt  { bottom: -80px; left: -60px; }
.plx-sag-alt  { bottom: -70px; right: -90px; }

/* Sureklilik: temadaki scale_up_down / slide_up_down diliyle ayni. */
.plx-nefes  { animation: plx-nefes 9s ease-in-out infinite alternate; }
.plx-suzul  { animation: plx-suzul 11s ease-in-out infinite alternate; }

@keyframes plx-nefes {
    from { transform: scale(.92); }
    to   { transform: scale(1.08); }
}

@keyframes plx-suzul {
    from { transform: translateY(0); }
    to   { transform: translateY(-26px); }
}

/*
   NOT: data-plx verilen lekelerde surekli animasyon KULLANILMAZ.
   Parallax motoru inline transform yazar; CSS animasyonu ayni ozelligi
   ezerdi ve parallax hic gorunmezdi. Bu yuzden dekorlar ya "nefes alan"
   ya da "parallax'li" olur; ikisi ayni anda degil.
*/
[data-plx].plx-nefes,
[data-plx].plx-suzul {
    animation: none;
}

/* ---------- hero derinlik katmanlari ---------- */

.hero-panel {
    position: relative;
    perspective: 1200px;
}

.hero-panel .hp-window,
.hero-panel .hp-float-yuva {
    will-change: transform;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* Fare hareket ederken gecis kapanir, yoksa takip gecikmeli olur.
   Motor imlec kapsayicidan cikinca sinifi kaldirir. */
.hero-panel.plx-izliyor .hp-window,
.hero-panel.plx-izliyor .hp-float-yuva {
    transition: none;
}

/* ---------- gorsel derinligi ---------- */

/* Cerceve icindeki gorsel kaydirmayla hafifce kayar: klasik
   "pencereden bakma" etkisi. Gorsel cerceveden buyuk olmali.

   DIKKAT: scale(1.14) gorselin kenarlarindan ~%7 kirpar. Yalnizca
   kenarlarinda ONEMLI ICERIK OLMAYAN gorsellerde kullanin (dogal
   fotograf, doku vb.). Logo, metin veya grafik iceren gorsellerde
   kullanmayin — vitrin gorselinde tam da bu yuzden kullanilmadi. */
.plx-cerceve {
    overflow: hidden;
    position: relative;
}

.plx-cerceve img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.14);        /* kayarken kenar bosluk vermesin */
    will-change: transform;
}

/* ---------- erisilebilirlik ve dusuk guc ---------- */

@media (prefers-reduced-motion: reduce) {
    .plx-dekor,
    .plx-nefes,
    .plx-suzul {
        animation: none !important;
        transform: none !important;
    }

    .hero-panel .hp-window,
    .hero-panel .hp-float-yuva,
    .plx-cerceve img {
        transform: none !important;
        transition: none !important;
    }

    .plx-cerceve img { transform: scale(1) !important; }
}

/* Dokunmatik cihazlarda parallax motoru calismaz; lekeler yine de
   nefes alsin ama daha az sayida ve daha hafif olsun. */
@media (hover: none) {
    .plx-dekor { opacity: .38; filter: blur(38px); }
    .plx-lg { width: 300px; height: 300px; }
    .plx-md { width: 240px; height: 240px; }
}

/* Cok dar ekranlarda dekor gereksiz yer kaplamasin. */
@media (max-width: 575px) {
    .plx-dekor { display: none; }
}