/* Genel Ayarlar ve Kaydırma Engelleme */
* {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; 
    background-color: #000;
}
body {
    font-family: 'Press Start 2P', cursive;
    color: #0052ff;
    position: relative;
}
video, img {
    max-width: 100%;
    height: auto;
    display: block;
}

#music-toggle { position: absolute; top: 35px; right: 35px; z-index: 101; background: none; border: none; cursor: pointer; padding: 0; width: 50px; height: 50px; opacity: 0.7; transition: opacity 0.2s; }
#music-toggle:hover { opacity: 1; }
#music-toggle.muted { opacity: 0.3; }

.border { position: absolute; z-index: 10; }
.border-top { top: 0; left: 0; width: 100%; }
.border-bottom { bottom: 0; left: 0; width: 100%; }
.border-left { top: 0; left: 0; height: 100%; }
.border-right { top: 0; right: 0; height: 100%; }
.border video { width: 100%; height: 100%; object-fit: cover; }

.widget { position: absolute; z-index: 5; width: 15vw; max-width: 220px; }
.widget-tl { top: 14vh; left: 4vw; }
.widget-tr { top: 14vh; right: 4vw; }
.widget-br { bottom: 12vh; right: 4vw; }
.widget-bl { bottom: 12vh; left: 4vw; }

.main-content { position: relative; z-index: 20; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 1rem; }
.main-video-container { width: 40vw; max-width: 500px; }
.main-button { background: none; border: none; cursor: pointer; padding: 0; width: 45vw; max-width: 650px; }
.main-button .btn-hover { display: none; }
.main-button:hover .btn-normal { display: none; }
.main-button:hover .btn-hover { display: block; }

.wtf-prompt {
    color: #0052ff;
    font-size: 1rem;
    cursor: pointer;
    letter-spacing: 2px;
    transition: color 0.2s, text-shadow 0.2s;
}
.wtf-prompt:hover {
    color: #0052ff;
    text-shadow: 0 0 8px #0052ff;
}
.blinking-cursor {
    animation: blink-animation 1s steps(2, start) infinite;
}
@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}


.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal.active { display: flex; }

.modal-card {
    position: relative;
    background-color: transparent;
    border: none;
    background-image: url('modal-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 90vw;
    max-width: 800px;
    aspect-ratio: 1200 / 675;
}
.modal-close-btn { position: absolute; top: 3.5%; left: 2%; width: 6%; height: 9%; background: transparent; border: none; cursor: pointer; z-index: 3; }
.modal-buttons {
    position: absolute;
    bottom: 22%;
    left: 0;
    width: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.modal-btn { background: none; border: none; padding: 0; cursor: pointer; transition: transform 0.2s; }
.modal-btn:hover { transform: scale(1.05); }
.modal-btn img { 
    width: 250px; 
}

.info-modal-card { background-color: #000; border: 3px solid #0052ff; width: 90vw; max-width: 650px; max-height: 80vh; padding: 2rem; display: flex; flex-direction: column; }
.info-modal-content { overflow-y: auto; flex-grow: 1; }
.info-modal-content h3 { font-size: 0.9rem; color: #0052ff; }
.info-modal-content p { font-size: 0.7rem; line-height: 1.6; margin-bottom: 1.2rem; }
.info-modal-content .signature { text-align: right; font-style: italic; }
.info-modal-content .legal-text { font-size: 0.6rem; font-style: italic; opacity: 0.7; margin-top: 2rem; }
.info-close-btn { background: none; border: 2px solid #0052ff; color: #0052ff; padding: 0.8rem 1.5rem; font-family: 'Press Start 2P', cursive; cursor: pointer; margin-top: 1.5rem; align-self: center; }
.info-close-btn:hover { background-color: #0052ff; color: #000; }

@media (max-width: 768px) {
    .widget, .border-left, .border-right {
        display: none;
    }
    .border-top, .border-bottom {
        display: block;
    }

    .main-content { gap: 1.5rem; }
    .main-video-container, .main-button { width: 90vw; }
    #music-toggle { top: 20px; right: 20px; width: 40px; height: 40px; }
    
    .modal-card { padding: 0; }
    
    /* GÜNCELLENDİ: Mobil butonlar biraz daha yukarı alındı */
    .modal-buttons { 
        flex-direction: row; 
        gap: 1rem; 
        align-items: center; 
        bottom: 20%; 
    }
    
    .modal-btn img { 
        width: 35vw; 
        max-width: 150px;
    }
    
    .info-modal-card { padding: 1.5rem; }
    .info-modal-content h3 { font-size: 0.8rem; }
    .info-modal-content p { font-size: 0.65rem; }
    .info-modal-content .legal-text { font-size: 0.55rem; }
}