/* ==========================================================================
   Hareketli gradyan başlık (su akışı)
   Marka paleti: #1e283c · #263795 · #3F54D1 · #0098d6 · #00b4d6 · #00cbd6
   Tema dosyalarına dokunmaz; style.css ve responsive.css'ten SONRA yüklenir.
   ========================================================================== */

.hero-gradient {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Site header'ı position:absolute ve hero'nun üstünü örtüyor. İçeriğin
       GÖRÜNEN alanda ortalanması için üst dolgu, header yüksekliği kadar fazladır.
       --hero-header-offset değerini _Layout'taki küçük script ölçüp yazar;
       206px, script çalışmazsa geçerli olan masaüstü değeridir. */
    padding-top: calc(var(--hero-header-offset, 206px) + 110px);
    padding-bottom: 110px;
    min-height: calc(var(--hero-header-offset, 206px) + 260px);

    /* .page-name'in arka plan görselini geçersiz kılar (shorthand image'i sıfırlar) */
    background: linear-gradient(135deg, #1e283c 0%, #263795 45%, #0b5fae 75%, #0098d6 100%);
}

/* Akış katmanı: bulanık lekeler yavaşça sürüklenir */
.hero-gradient__flow {
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    filter: blur(70px);
    opacity: .8;
}

.hero-gradient__flow span {
    position: absolute;
    display: block;
    border-radius: 50%;
    mix-blend-mode: screen;
    /* Sadece transform animasyonu -> GPU'da bileşiklenir, layout tetiklemez */
    will-change: transform;
}

.hero-gradient__flow .b1 {
    width: 46%;
    height: 70%;
    top: -8%;
    left: -6%;
    background: radial-gradient(circle at 50% 50%, #00cbd6 0%, rgba(0, 203, 214, 0) 68%);
    animation: hero-drift-1 19s ease-in-out infinite;
}

.hero-gradient__flow .b2 {
    width: 52%;
    height: 78%;
    top: 6%;
    right: -10%;
    background: radial-gradient(circle at 50% 50%, #3F54D1 0%, rgba(63, 84, 209, 0) 70%);
    animation: hero-drift-2 24s ease-in-out infinite;
}

.hero-gradient__flow .b3 {
    width: 40%;
    height: 62%;
    bottom: -14%;
    left: 26%;
    background: radial-gradient(circle at 50% 50%, #0098d6 0%, rgba(0, 152, 214, 0) 68%);
    animation: hero-drift-3 16s ease-in-out infinite;
}

.hero-gradient__flow .b4 {
    width: 34%;
    height: 52%;
    top: 18%;
    left: 40%;
    background: radial-gradient(circle at 50% 50%, #00b4d6 0%, rgba(0, 180, 214, 0) 66%);
    animation: hero-drift-4 28s ease-in-out infinite;
}

/* Üzerinden geçen ışık huzmesi: akış hissini güçlendirir */
.hero-gradient__sheen {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, .10) 46%, rgba(255, 255, 255, 0) 68%);
    background-size: 260% 100%;
    animation: hero-sheen 11s linear infinite;
}

/* Okunabilirlik perdesi: parlak camgöbeği üzerinde beyaz yazı sönükleşmesin */
.hero-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(14, 20, 34, .38) 0%, rgba(14, 20, 34, .12) 48%, rgba(14, 20, 34, .48) 100%);
}

/* İçerik her zaman katmanların üstünde.
   Not: .container'a width verilmez; Bootstrap'in sabit genişliği (1170px vb.)
   korunmalı, aksi hâlde başlık geniş ekranda kenardan kenara yayılır. */
.hero-gradient > .container {
    position: relative;
    z-index: 1;
    flex: 0 1 auto;
}

.hero-gradient .page-title,
.hero-gradient .breadcrumbs,
.hero-gradient .breadcrumbs a {
    text-shadow: 0 2px 14px rgba(10, 16, 30, .45);
}

.hero-gradient .breadcrumbs a:hover {
    color: #7ff0ff;
}

/* --- Hareket eğrileri: farklı süreler organik bir akış üretir --- */
@keyframes hero-drift-1 {
    0%   { transform: translate3d(-8%, -4%, 0) scale(1); }
    30%  { transform: translate3d(14%, 12%, 0) scale(1.18); }
    62%  { transform: translate3d(4%, -10%, 0) scale(.9); }
    100% { transform: translate3d(-8%, -4%, 0) scale(1); }
}

@keyframes hero-drift-2 {
    0%   { transform: translate3d(6%, 6%, 0) scale(1.05); }
    35%  { transform: translate3d(-12%, -8%, 0) scale(.88); }
    70%  { transform: translate3d(-4%, 14%, 0) scale(1.2); }
    100% { transform: translate3d(6%, 6%, 0) scale(1.05); }
}

@keyframes hero-drift-3 {
    0%   { transform: translate3d(0, 4%, 0) scale(.95); }
    40%  { transform: translate3d(16%, -12%, 0) scale(1.22); }
    75%  { transform: translate3d(-14%, 2%, 0) scale(1); }
    100% { transform: translate3d(0, 4%, 0) scale(.95); }
}

@keyframes hero-drift-4 {
    0%   { transform: translate3d(-6%, 8%, 0) scale(1.1); }
    45%  { transform: translate3d(10%, -6%, 0) scale(.85); }
    80%  { transform: translate3d(-16%, -14%, 0) scale(1.15); }
    100% { transform: translate3d(-6%, 8%, 0) scale(1.1); }
}

@keyframes hero-sheen {
    from { background-position: 160% 0; }
    to   { background-position: -60% 0; }
}

/* --- Mobil: blur pahalı bir filtre, yükü düşür --- */
@media (max-width: 767px) {
    .hero-gradient {
        padding-top: calc(var(--hero-header-offset, 120px) + 60px);
        padding-bottom: 60px;
        min-height: calc(var(--hero-header-offset, 120px) + 160px);
    }

    .hero-gradient__flow {
        filter: blur(45px);
    }

    .hero-gradient__flow .b4 {
        display: none;
    }
}

/* --- Hareket hassasiyeti olan kullanıcılar için animasyonu durdur --- */
@media (prefers-reduced-motion: reduce) {

    .hero-gradient__flow span,
    .hero-gradient__sheen {
        animation: none;
    }
}