/* Stil Paketi: RETRO-ARCADE
   Kapsam: piksel/retro/klasik arcade siteler (pixel-quest, 8bit-adventures,
   classic-arcade, platformer-world, retro-shooter, brick-breaker, vb.) */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 4px) !important;
    background-attachment: fixed;
    position: relative;
}
body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320" viewBox="0 0 320 320"><g fill="white" opacity="0.05"><rect x="40" y="40" width="16" height="16"/><rect x="56" y="40" width="16" height="16"/><rect x="40" y="56" width="16" height="16"/><rect x="24" y="56" width="16" height="16"/><rect x="72" y="56" width="16" height="16"/><rect x="240" y="220" width="14" height="14"/><rect x="256" y="220" width="14" height="14"/><rect x="240" y="236" width="14" height="14"/></g></svg>');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 320px 320px;
}

.heading-section h4 { font-family: 'Press Start 2P', monospace; font-size: 15px; letter-spacing: 1px; }
.heading-section h4 em {
    font-style: normal;
    color: var(--site-btn, #39ff14) !important;
    border-left: 5px solid var(--site-btn, #39ff14);
    padding-left: 10px;
    margin-right: 6px;
}

.main-button a, .btn, .btn-primary, button[type="submit"], input[type="submit"] {
    border-radius: 0 !important;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px !important;
    box-shadow: 3px 3px 0 0 #000 !important;
    transition: box-shadow .1s ease, transform .1s ease !important;
}
.main-button a:hover, .btn:hover, .btn-primary:hover {
    box-shadow: 3px 3px 0 0 #000, 0 0 12px 2px var(--site-btn, #39ff14) !important;
    transform: translate(-2px, -2px);
}

.main-nav ul.nav li a { transition: all .1s ease; }
.main-nav ul.nav li a:hover { text-shadow: 2px 2px 0 var(--site-btn, #39ff14); }

/* Piksel cerceveli (8-bit border) oyun kartlari */
.most-popular .item, .gaming-library .item {
    position: relative;
    border-radius: 0;
    border: 3px solid #fff;
    box-shadow: 4px 4px 0 0 rgba(0,0,0,.5);
    transition: transform .15s ease;
    image-rendering: pixelated;
}
.most-popular .item:hover { transform: translate(-2px, -2px); border-color: var(--site-btn, #39ff14); }
.most-popular .item h4 { background: #0d0d1a; margin: 0; padding: 8px 10px; font-family: 'Press Start 2P', monospace; font-size: 10px; }

.gaming-library .item .btn {
    border-radius: 0 !important;
    position: relative;
    padding-left: 32px !important;
}
.gaming-library .item .btn i { display: none; }
.gaming-library .item .btn::before {
    content: "";
    position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
    background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="white"><rect x="10" y="4" width="4" height="4"/><rect x="6" y="8" width="4" height="4"/><rect x="14" y="8" width="4" height="4"/><rect x="4" y="12" width="16" height="4"/><rect x="6" y="16" width="4" height="4"/><rect x="14" y="16" width="4" height="4"/></g></svg>');
}

.gaming-news .item {
    background: #0d0d1a;
    border-radius: 0;
    padding: 16px;
    border: 2px solid var(--site-btn, #39ff14);
}
.gaming-news .item h4 { font-family: 'Press Start 2P', monospace; font-size: 12px; }
.gaming-news .item img { border-radius: 0 !important; image-rendering: pixelated; }

.main-banner .header-text { border-radius: 0 !important; border: 3px solid #fff; box-shadow: 4px 4px 0 0 rgba(0,0,0,.5); }

.sidebar-categories {
    background: #0d0d1a;
    border-radius: 0;
    padding: 18px;
    border: 3px solid #fff;
    box-shadow: 4px 4px 0 0 rgba(0,0,0,.5);
}
.sidebar-categories h4 {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: var(--site-btn, #39ff14);
    border-left: none !important;
    padding-left: 0 !important;
}
.sidebar-categories ul { list-style: none; padding: 0; margin: 0; }
.sidebar-categories li { padding: 9px 0 9px 24px; font-size: 12px; border-bottom: 1px dashed rgba(255,255,255,.15); position: relative; }
.sidebar-categories li a { color: #ddd !important; text-decoration: none; }
.sidebar-categories li a:hover { color: var(--site-btn, #39ff14) !important; }
.sidebar-categories li::before {
    content: "";
    position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin-top: -6px;
    background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="%2339ff14"><rect x="10" y="4" width="4" height="4"/><rect x="6" y="8" width="4" height="4"/><rect x="14" y="8" width="4" height="4"/><rect x="4" y="12" width="16" height="4"/><rect x="6" y="16" width="4" height="4"/><rect x="14" y="16" width="4" height="4"/></g></svg>');
}