html, body {
    margin: 0;
    padding: 0;
}


:root {
    --bg-main: #0d181d;
    --panel-bg: rgba(18, 22, 35, 0.88);
    --card-grad-start: #141e2c;
    --card-grad-end: #0c4e55;
    --color-text: #f2f5f7;
    --accent-primary: #08c0bf;
    --accent-secondary: #d03a59;
    --radius-big: 2rem;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    background: var(--bg-main);
    color: var(--color-text);
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

/* Progressive enhancement ile ekstra davranışlar */
@supports (overscroll-behavior-y: contain) {
    body {
        overscroll-behavior-y: contain;
    }
}

@supports (text-size-adjust: 100%) {
    body {
        text-size-adjust: 100%;
    }
}

@supports (-webkit-text-size-adjust: 100%) {
    body {
        -webkit-text-size-adjust: 100%;
    }
}

/* Seçim engelleme */
.ai-logo, .glitch {
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    user-drag: none;
}

.container {
    max-width: 62.5rem;
    margin: 3.75rem auto 0 auto;
    background: var(--panel-bg);
    border-radius: var(--radius-big);
    box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, .55), 0 0 0 0.0625rem rgba(255, 255, 255, 0.03);
    padding: 3.5rem 2.5rem 4.5rem;
    position: relative;
    z-index: 2;
    margin-bottom: 7.5rem;
    -webkit-backdrop-filter: blur(0.5rem) saturate(110%);
    backdrop-filter: blur(0.5rem) saturate(110%);
}

.ai-logo {
    display: block;
    margin: 0 auto 2.25rem;
    width: 9.375rem;
    object-fit: contain;
    filter: drop-shadow(0 0 0.875rem var(--accent-primary));
    animation: logoPulse 3.2s ease-in-out infinite alternate;
}

@keyframes logoPulse {
    0% {
        filter: drop-shadow(0 0 0.625rem var(--accent-primary));
    }

    100% {
        filter: drop-shadow(0 0 1.75rem var(--accent-secondary));
    }
}

h1 {
    font-family: 'Orbitron', 'Roboto', Arial, sans-serif;
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0.1875rem;
    color: var(--accent-secondary);
    margin-bottom: 1.125rem;
    text-align: center;
    text-shadow: 0 0.125rem 0.75rem rgba(8, 192, 191, .35), 0 0 1.125rem rgba(44, 83, 100, .45);
    animation: fadeInDown 1.1s both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subtitle {
    font-size: 1.5rem;
    color: #f5f6fa;
    margin-bottom: 2.25rem;
    text-align: center;
    opacity: 0.92;
    letter-spacing: 0.125rem;
}

.alert {
    background: linear-gradient(90deg, #a02242 0%, #03918f 100%);
    color: #fff;
    padding: 1.125rem 2rem;
    border-radius: 0.875rem;
    font-weight: 700;
    margin-bottom: 2.25rem;
    box-shadow: 0 0.125rem 1.25rem rgba(255, 46, 99, 0.28);
    text-align: center;
    font-size: 1.18rem;
}

/* CANLI İSTATİSTİK BLOĞU */
.live-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem clamp(1.75rem, 5vw, 3rem);
    justify-content: center;
    align-items: stretch;
    margin: 0.625rem 0 2.125rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(12, 78, 85, .55), rgba(20, 30, 44, .55));
    border: 0.0625rem solid rgba(8, 192, 191, .25);
    border-radius: 1.125rem;
    box-shadow: 0 0.25rem 1.125rem rgba(0, 0, 0, .55), inset 0 0 0 0.0625rem rgba(255, 255, 255, .04);
    position: relative;
    isolation: isolate;
}

.live-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 35% 65%, rgba(8, 192, 191, .18), transparent 70%);
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: .65;
}

.live-stats .stat {
    display: flex;
    flex-direction: column;
    min-width: 8.75rem;
    padding: 0.5rem 0.25rem;
    text-align: center;
    position: relative;
}

.live-stats .stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -0.875rem;
    top: 16%;
    bottom: 16%;
    width: 0.0625rem;
    background: linear-gradient(to bottom, rgba(8, 192, 191, .1), rgba(208, 58, 89, .55), rgba(8, 192, 191, .1));
    opacity: .6;
}

.s-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: rgba(226, 247, 248, .78);
    margin-bottom: 0.375rem;
}

.s-val {
    font-family: 'Orbitron', 'Roboto', monospace;
    font-size: 1.18rem;
    letter-spacing: 0.0625rem;
    color: var(--accent-primary);
    text-shadow: 0 0 0.5rem rgba(8, 192, 191, .55);
    font-weight: 700;
    min-width: 4.375rem;
}

.s-val.pulse {
    color: var(--accent-secondary);
    text-shadow: 0 0 8px rgba(208, 58, 89, .55), 0 0 18px rgba(8, 192, 191, .35);
    animation: statPulse 2.2s ease-in-out infinite;
}

@keyframes statPulse {
    0%, 100% {
        filter: drop-shadow(0 0 4px var(--accent-secondary));
        opacity: .9;
    }

    50% {
        filter: drop-shadow(0 0 12px var(--accent-primary));
        opacity: 1;
    }
}

@media (max-width:40rem) {

    .live-stats {
        gap: 0.75rem 1.75rem;
        padding: 0.875rem 1rem;
    }

    .live-stats .stat {
        min-width: 7.5rem;
    }

    .s-val {
        font-size: 1.05rem;
    }
}

.section {
    margin-bottom: 3.25rem;
}

h2 {
    color: #08d9d6;
    margin-top: 2.75rem;
    font-size: 2.4rem;
    font-family: 'Orbitron', 'Roboto', Arial, sans-serif;
    letter-spacing: 0.125rem;
    text-shadow: 0 0.125rem 1rem #ff2e63;
}

.holo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin-top: 1.75rem;
    justify-content: center;
    align-items: center;
}

.holo {
    background: linear-gradient(135deg, var(--card-grad-start) 0%, var(--card-grad-end) 100%);
    color: #e5ebef;
    border-radius: 1.25rem;
    box-shadow: 0 0.25rem 1.125rem rgba(0, 0, 0, .55), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.04);
    padding: 1.75rem 1.5rem;
    width: 14rem;
    max-width: min(14rem, 100%);
    max-height: fit-content;
    flex: 1 1 14rem;
    font-size: 1.05rem;
    font-family: 'Roboto', Arial, sans-serif;
    position: relative;
    transition: transform .3s ease, box-shadow .35s ease, background .4s ease;
    cursor: pointer;
    border: 0.0625rem solid rgba(208, 58, 89, .4);
    animation: holoPop .9s both;
    -webkit-backdrop-filter: blur(0.125rem) saturate(120%);
    backdrop-filter: blur(0.125rem) saturate(120%);
    will-change: auto;
}

@media (max-width: 40rem) {
    .holo {
        max-width: 100%;
        margin-inline: 5%;
    }
}

.holo:hover {
    transform: translateY(-0.375rem) scale(1.05);
    box-shadow: 0 0.625rem 1.625rem rgba(0, 0, 0, .6), 0 0 0 0.0625rem rgba(255, 255, 255, 0.05), 0 0 1.25rem rgba(8, 192, 191, .35);
    z-index: 3;
}

@keyframes holoPop {
    from {
        opacity: 0;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


.footer {
    text-align: center;
    margin-top: 4.5rem;
    color: #08d9d6;
    font-size: 1.16rem;
    opacity: 0.7;
}

@media (max-width: 62.5rem) {
    .container {
        padding: 1.125rem 0.375rem;
    }

    h1 {
        font-size: 2.4rem;
    }

}

/* Scroll görünürlük animasyonu */
.fade-in {
    opacity: 0;
    transform: translateY(2.5rem);
    /* 40px */
    transition: opacity .6s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.fade-in.in {
    opacity: 1;
    transform: translateY(0);
}

/* Glitch başlık efekti */
.glitch {
    position: relative;
}

.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }

    h1 {
        animation: none !important;
    }
}


/* iOS safe-area alt boşluğu */
@supports(padding: max(0px)) {
    .container {
        padding-bottom: max(64px, env(safe-area-inset-bottom));
    }
}

/* Glitch before */
.glitch::before {
    left: 0.125rem;
    text-shadow: -0.125rem 0 rgba(8, 217, 214, .65);
    animation: glitch1 2.6s infinite linear alternate-reverse;
}

/* Glitch after */
.glitch::after {
    left: -0.125rem;
    text-shadow: 0.125rem 0 rgba(255, 46, 99, .55);
    animation: glitch2 3.3s infinite linear alternate-reverse;
}

@keyframes glitch1 {
    0% {
        clip-path: inset(0 0 90% 0);
    }

    10% {
        clip-path: inset(10% 0 70% 0);
    }

    20% {
        clip-path: inset(40% 0 30% 0);
    }

    30% {
        clip-path: inset(20% 0 50% 0);
    }

    40% {
        clip-path: inset(70% 0 10% 0);
    }

    50% {
        clip-path: inset(0 0 90% 0);
    }

    60% {
        clip-path: inset(60% 0 20% 0);
    }

    70% {
        clip-path: inset(30% 0 40% 0);
    }

    80% {
        clip-path: inset(10% 0 60% 0);
    }

    90% {
        clip-path: inset(50% 0 20% 0);
    }

    100% {
        clip-path: inset(0 0 90% 0);
    }
}

@keyframes glitch2 {
    0% {
        clip-path: inset(80% 0 5% 0);
    }

    10% {
        clip-path: inset(60% 0 25% 0);
    }

    20% {
        clip-path: inset(30% 0 50% 0);
    }

    30% {
        clip-path: inset(10% 0 70% 0);
    }

    40% {
        clip-path: inset(50% 0 30% 0);
    }

    50% {
        clip-path: inset(0 0 90% 0);
    }

    60% {
        clip-path: inset(40% 0 35% 0);
    }

    70% {
        clip-path: inset(20% 0 55% 0);
    }

    80% {
        clip-path: inset(65% 0 15% 0);
    }

    90% {
        clip-path: inset(25% 0 45% 0);
    }

    100% {
        clip-path: inset(80% 0 5% 0);
    }
}

/* NoScript uyarısı */
.noscript-warning {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ff2e63;
    color: #fff;
    padding: 0.875rem 1.5rem;
    /* 14 24 */
    font-weight: 600;
    text-align: center;
    z-index: 10000;
    font-family: 'Roboto', sans-serif;
}

/* Küçük responsive iyileştirmeler */
@media (max-width:600px) {
    .sim-title {
        font-size: 1.8rem;
    }

    h1.glitch {
        font-size: 2.8rem;
    }
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: #0c4e55;
    color: #e2f7f8;
    padding: 0.625rem 1rem;
    /* 10 16 */
    z-index: 20000;
    border-radius: 0 0 0.5rem 0;
    /* 8px */
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 0 0.125rem #0d181d, 0 0 0 0.25rem #0c4e55;
    /* 2px 4px */
}

.skip-link:focus {
    left: 0.75rem;
    outline: none;
}


/* Genel focus görünürlüğü */
:focus-visible {
    outline: 2px solid #08d9d6;
    outline-offset: 3px;
}