:root {
    --zemin: #f7f8fb;
    --isik-1: rgba(27, 111, 130, 0.20);
    --isik-2: rgba(99, 102, 241, 0.16);
    --isik-3: rgba(251, 191, 36, 0.13);
    --nokta: rgba(31, 35, 40, 0.07);
    --cam: rgba(255, 255, 255, 0.72);
    --cam-cizgi: rgba(31, 35, 40, 0.08);
    --k: 0;
}

:root[data-theme="dark"] {
    --zemin: #0b0b11;
    --isik-1: rgba(124, 58, 237, 0.30);
    --isik-2: rgba(59, 130, 246, 0.22);
    --isik-3: rgba(192, 38, 211, 0.16);
    --nokta: rgba(255, 255, 255, 0.045);
    --cam: rgba(22, 24, 34, 0.62);
    --cam-cizgi: rgba(255, 255, 255, 0.08);
}

body {
    background: var(--zemin) !important;
}

.arkaplan {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--zemin);
    transition: background-color 0.3s ease;
}

.arkaplan::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--nokta) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
}

.isik {
    position: absolute;
    width: 75vmax;
    height: 75vmax;
    border-radius: 50%;
    will-change: transform;
}

.isik.bir {
    top: -38vmax;
    left: -30vmax;
    background: radial-gradient(circle, var(--isik-1) 0%, transparent 62%);
    transform: translate3d(calc(var(--k) * 46vw), calc(var(--k) * 38vh), 0) scale(calc(1 - var(--k) * 0.15));
}

.isik.iki {
    bottom: -40vmax;
    right: -32vmax;
    background: radial-gradient(circle, var(--isik-2) 0%, transparent 62%);
    transform: translate3d(calc(var(--k) * -52vw), calc(var(--k) * -30vh), 0) scale(calc(0.9 + var(--k) * 0.25));
}

.isik.uc {
    top: 18vh;
    right: -45vmax;
    background: radial-gradient(circle, var(--isik-3) 0%, transparent 62%);
    transform: translate3d(calc(var(--k) * -30vw), calc(var(--k) * 34vh), 0) scale(calc(0.8 + var(--k) * 0.35));
}

.cam {
    background: var(--cam) !important;
    border-color: var(--cam-cizgi) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
}

@media (prefers-reduced-motion: reduce) {
    .isik { transform: none !important; }
}

:root { --nav-scrolled-bg: rgba(247, 248, 251, 0.72) !important; }
:root[data-theme="dark"] { --nav-scrolled-bg: rgba(11, 11, 17, 0.68) !important; }