/* Google Fonts'tan "Press Start 2P" fontunu içe aktar */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    background-color: #212121;
    font-family: 'Press Start 2P', cursive;
    color: #e0e0e0;
    overflow: hidden;
    text-shadow: 2px 2px #000000;
}

.container {
    min-height: 100vh;
    border: 5px solid #a0a0a0;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5),
                inset 0 0 10px rgba(0, 255, 0, 0.3);
    background: radial-gradient(circle, #333333 0%, #1a1a1a 100%);
}

.logo {
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.7));
    image-rendering: pixelated;
}

h1 {
    letter-spacing: 8px;
    color: #ffeb3b;
    text-shadow: 4px 4px #d8b600, -2px -2px #000000;
    font-size: 3.5rem;
    min-height: 60px; 
}

.lead {
    color: #b3e5fc;
    text-shadow: 1px 1px #000000;
    margin: 1rem auto;
    white-space: normal;
    max-width: 80%;
    min-height: 70px;
}

/* Yazı sonunda beliren yanıp sönen imleç */
.typing-cursor::after {
    content: '|'; /* DEĞİŞİKLİK BURADA: İmleç karakteri '|' olarak değiştirildi */
    animation: blink 1s step-end infinite;
    font-weight: bold; /* İmlecin daha belirgin olmasını sağlar */
    position: relative; /* Konumlandırmayı iyileştirebilir */
    left: 5px;
}

@keyframes blink {
    from, to { color: transparent; }
    50% { color: #00ff00; } /* İmleç rengi */
}

.spinner-border {
    width: 3.5rem;
    height: 3.5rem;
    margin-top: 2.5rem;
    color: #00ff00 !important;
    border-width: 0.5em;
    animation: spinner-border 1s linear infinite;
}

@media (max-width: 768px) {
    .logo { max-width: 180px; }
    h1 { font-size: 2rem; min-height: 40px; }
    .lead { font-size: 0.9rem; max-width: 95%; min-height: 100px;}
    .spinner-border { width: 2.5rem; height: 2.5rem; }
}