:root {
        --h-blue: #2d7df6;
        --h-orange: #ff9f43;
        --h-card-bg: rgba(255, 255, 255, 0.95);
        --h-text: #1a2b4b;
    }

    .oks-hero-module {
        position: relative;
        width: 100%;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .oks-bg-layer {
        position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; border-radius: 20px;
        /*background: radial-gradient(circle at center, #f0f7ff 0%, #ffffff 70%); */
        z-index: 0;
    }
    .oks-bg-ring {
        position: absolute; border-radius: 50%; border: 1px solid rgba(45, 125, 246, 0.08);
        top: 50%; left: 50%; transform: translate(-50%, -50%);
    }
.oks-animation-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.6;
}
    .oks-mascot-center {
        position: relative;
        z-index: 10;
        width: 280px;
        pointer-events: none;
        transform-origin: bottom center;
        animation: 
            floatMascot 4s ease-in-out infinite,
            joyfulWave 5s ease-in-out infinite;
    }

    .oks-mascot-img {
        width: 100%; height: auto; display: block;
        filter: drop-shadow(0 25px 50px rgba(45, 125, 246, 0.2));
    }

    /* Animasyonlar (Değişmedi) */
    @keyframes floatMascot {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }

    @keyframes joyfulWave {
        0%, 100% { rotate: 0deg; }
        25% { rotate: -3deg; }
        75% { rotate: 3deg; } 
    }

    /* =========================================
       DİĞER STİLLER (Kartlar vs.)
       ========================================= */
    .oks-card {
        position: absolute; width: 260px; background: var(--h-card-bg); padding: 12px; border-radius: 16px;
        box-shadow: 0 10px 30px rgba(45, 125, 246, 0.12); border: 1px solid rgba(255,255,255,0.8);
        backdrop-filter: blur(5px); z-index: 20; transition: transform 0.1s linear; will-change: transform;
    }
    .oks-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
    
    .oks-icon { width: 30px; height: 30px; background: rgba(45, 125, 246, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--h-blue); flex-shrink: 0; }
    
    /* İkon boyutunu ayarlamak için */
    .oks-icon i { font-size: 16px; }

    .oks-title { font-size: 0.8rem; font-weight: 700; color: var(--h-text); line-height: 1.1; }
    .oks-desc { font-size: 0.65rem; color: #64748b; }
    .oks-badge { position: absolute; top: -8px; right: -5px; background: var(--h-blue); color: #fff; font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
    .oks-progress { height: 3px; background: #e2e8f0; border-radius: 2px; margin-top: 6px; }
    .oks-progress-bar { height: 100%; width: 75%; background: var(--h-orange); }

    .pos-tl { top: 5%; left: -5%; }
    .pos-tr { top: 8%; right: -8%; }
    .pos-bl { bottom: 12%; left: -2%; }
    .pos-br { bottom: 8%; right: -5%; }

    @media (max-width: 768px) {
        .oks-hero-module { height: auto; flex-direction: column; padding: 50px 0; overflow: visible; }
        .oks-bg-layer { border-radius: 0; }
        .oks-card { position: relative; top: auto!important; left: auto!important; right: auto!important; bottom: auto!important; width: 90%; max-width: 300px; margin-bottom: 15px; transform: none!important; }
        .oks-mascot-center { order: -1; margin-bottom: 30px; animation: floatMascot 4s ease-in-out infinite; }
    }