/**
 * Altıgen arka plan — belirgin grid + parlak turkuaz fare parıltısı
 */

.containers .hex-grid {
    --hex-x: 50vw;
    --hex-y: 50vh;
    --hex-glow-r: 180px;
}

.hex-grid .grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: url("grid.39b1c572b480.svg") repeat;
    background-size: 500px;
    background-position: center;
    background-attachment: fixed;
    pointer-events: none;
    filter: contrast(1.1) brightness(1.05) saturate(0.75);
    opacity: 1;
}

/* Turkuaz çizgi katmanı — grid çizgileri parlar */
.hex-grid .grid-glow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: url("grid-glow.56e70e944790.svg") repeat;
    background-size: 500px;
    background-position: center;
    background-attachment: fixed;
    mix-blend-mode: screen;
    opacity: 1;
    filter: brightness(1.45) saturate(1.35)
        drop-shadow(0 0 6px rgba(0, 236, 233, 0.55))
        drop-shadow(0 0 18px rgba(1, 177, 175, 0.35));
    -webkit-mask-image: radial-gradient(
        circle var(--hex-glow-r) at var(--hex-x) var(--hex-y),
        #000 0%,
        #000 32%,
        rgba(0, 0, 0, 0.65) 52%,
        transparent 70%
    );
    mask-image: radial-gradient(
        circle var(--hex-glow-r) at var(--hex-x) var(--hex-y),
        #000 0%,
        #000 32%,
        rgba(0, 0, 0, 0.65) 52%,
        transparent 70%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.hex-grid .light {
    display: none !important;
}

/* Aydınlık mod — fare ile turkuaz kenar parıltısı (karanlık mod ile aynı mantık) */
body.light-mode .hex-grid .grid {
    background: url("grid.39b1c572b480.svg") repeat;
    background-size: 500px;
    background-position: center;
    opacity: 0.16;
    filter: contrast(1.05) brightness(0.94) saturate(0.55);
}

body.light-mode .hex-grid .grid-glow {
    display: block;
    opacity: 1;
    mix-blend-mode: screen;
    filter: brightness(1.4) saturate(1.45)
        drop-shadow(0 0 7px rgba(0, 236, 233, 0.7))
        drop-shadow(0 0 20px rgba(1, 177, 175, 0.5));
    -webkit-mask-image: radial-gradient(
        circle var(--hex-glow-r) at var(--hex-x) var(--hex-y),
        #000 0%,
        #000 32%,
        rgba(0, 0, 0, 0.65) 52%,
        transparent 70%
    );
    mask-image: radial-gradient(
        circle var(--hex-glow-r) at var(--hex-x) var(--hex-y),
        #000 0%,
        #000 32%,
        rgba(0, 0, 0, 0.65) 52%,
        transparent 70%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@media (max-width: 768px) {
    .containers .hex-grid {
        --hex-glow-r: 150px;
    }

    .hex-grid .grid,
    .hex-grid .grid-glow {
        background-size: 250px;
    }
}

@media (max-width: 480px) {
    .containers .hex-grid {
        --hex-glow-r: 120px;
    }

    .hex-grid .grid,
    .hex-grid .grid-glow {
        background-size: 150px;
    }
}