/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Lora:wght@400;700&display=swap');

/* --- Genel Sayfa Stilleri --- */
body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f4f4f4 0%, #e8ecef 100%), url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Ccircle cx="50" cy="50" r="10" fill="%23006241" fill-opacity="0.05"/%3E%3C/svg%3E');
    background-size: cover, 100px;
    font-family: 'Montserrat', 'Poppins', Arial, sans-serif;
    color: #333;
    padding: 15px 0;
    animation: fadeIn 1s ease;
}

/* Animasyonlar */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes bounceIn {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes popIn {
    0% { transform: scale(0.7) translateY(50px); opacity: 0; }
    70% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1) translateY(0); }
}
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
@keyframes steam {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-20px) scale(1.2); opacity: 0.4; }
    100% { transform: translateY(-40px) scale(1.5); opacity: 0; }
}
@keyframes wave {
    0% { transform: translateX(0); }
    50% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 98, 65, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(0, 98, 65, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 98, 65, 0); }
}

/* --- Giriş Ekranı --- */
#startScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(5px);
    text-align: center;
    max-width: 600px;
    width: 90%;
    margin: 20px 0;
    border: 2px solid rgba(0, 98, 65, 0.2);
    position: relative;
    overflow: hidden;
    animation: bounceIn 0.8s ease;
}
#startScreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"%3E%3Cpath d="M10 25c0-8 6-14 14-14s14 6 14 14-6 14-14 14-14-6-14-14zm2 0c0 6.6 5.4 12 12 12s12-5.4 12-12-5.4-12-12-12-12 5.4-12 12z" fill="%23006241" fill-opacity="0.05"/%3E%3Cpath d="M5 25c0-10 8-18 18-18s18 8 18 18-8 18-18 18-18-8-18-18zm2 0c0 8.8 7.2 16 16 16s16-7.2 16-16-7.2-16-16-16-16 7.2-16 16z" fill="none" stroke="%23006241" stroke-opacity="0.1" stroke-width="2"/%3E%3C/svg%3E');
    opacity: 0.1;
    animation: wave 5s ease-in-out infinite;
    z-index: -1;
}

/* Kahve Fincanı İkonu (Sağa Kaydırıldı) */
.coffee-icon {
    position: absolute;
    bottom: 20px;
    right: 40px; /* Logonun arkasından çıkması için sağa kaydırıldı */
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="%23006241" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M17 8h1a4 4 0 1 1 0 8h-1"/%3E%3Cpath d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V8z"/%3E%3Cpath d="M6 2l1.5 6h9L18 2"/%3E%3C/svg%3E') no-repeat;
    opacity: 0.5;
    animation: float 3s ease-in-out infinite;
    display: block; /* Oyunda gizlemek için CSS ile kontrol */
}

/* Kahve Buharı Efekti */
.steam {
    position: absolute;
    top: -20px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23006241" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 22c2 0 4-4 4-6s2 0 2 2-2 4-2 6m4-10c2 0 4-4 4-6s2 0 2 2-2 4-2 6"/%3E%3C/svg%3E') no-repeat;
    opacity: 0.6;
    animation: steam 2s ease-in-out infinite;
    display: block; /* Oyunda gizlemek için CSS ile kontrol */
}

/* Logolar */
.logo-container {
    margin-bottom: 25px;
    position: relative;
}
.logo {
    max-height: 60px;
    margin: 0 15px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}
.logo:hover {
    transform: scale(1.1);
}

/* Başlık ve Slogan */
#gameTitle {
    color: #006241;
    margin-bottom: 12px;
    font-size: 2.2em;
    font-weight: 700;
    font-family: 'Lora', serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
}
#gameSlogan {
    color: #555;
    margin-bottom: 30px;
    font-size: 1.1em;
    max-width: 90%;
    line-height: 1.6;
    font-style: italic;
}

/* Ayarlar (Dil ve Bölge) */
.settings {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    gap: 15px;
    flex-wrap: wrap;
}
.language-select button {
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    border: none;
    background-color: #f9f9f9;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 600;
    color: #333;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.language-select button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 98, 65, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}
.language-select button:hover::after {
    width: 200px;
    height: 200px;
}
.language-select button:hover {
    background-color: #006241;
    color: white;
    transform: scale(1.1);
}
.language-select button.active {
    background-color: #006241;
    color: white;
    animation: pulse 1.5s infinite ease-in-out;
}
.region-select label {
    margin-right: 10px;
    color: #444;
    font-size: 1em;
    font-weight: 600;
}
.region-select select {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 0.95em;
    background-color: white;
    transition: border-color 0.3s ease;
}
.region-select select:focus {
    border-color: #006241;
    outline: none;
}

/* Ödül Bilgisi Alanı */
.rewards-info {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f0f9f4;
    border-radius: 12px;
    width: 90%;
    max-width: 480px;
    border: 1px solid #d4e9d9;
    position: relative;
}
.rewards-info::before {
    content: '★';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.5em;
    color: #006241;
    opacity: 0.2;
}
.rewards-info h3 {
    margin-top: 0;
    color: #006241;
    margin-bottom: 15px;
    font-size: 1.2em;
    font-weight: 700;
    border-bottom: 2px solid #c1dac9;
    padding-bottom: 10px;
    font-family: 'Lora', serif;
}
#rewardList {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.95em;
    color: #333;
    text-align: left;
}
#rewardList li {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
#rewardList li::before {
    content: '★';
    position: absolute;
    left: -20px;
    color: #006241;
    font-size: 0.8em;
    opacity: 0.5;
}
#rewardList strong {
    color: #005034;
    font-weight: 600;
    flex-basis: 80px;
    text-align: right;
    margin-right: 15px;
}
#rewardList span {
    font-weight: 600;
    color: #111;
    flex-grow: 1;
    text-align: left;
}
#rewardList .prize-type {
    font-size: 0.9em;
    color: #555;
    margin-left: 10px;
    font-weight: 400;
    white-space: nowrap;
}

/* GSM Giriş Alanı */
.gsm-input {
    margin-bottom: 25px;
    width: 90%;
    max-width: 400px;
}
.gsm-input label[for="gsmInput"] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1em;
    color: #333;
}
#gsmInput {
    width: calc(100% - 24px);
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    margin-bottom: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#gsmInput:focus {
    border-color: #006241;
    box-shadow: 0 0 8px rgba(0, 98, 65, 0.2);
    outline: none;
}
.kvkk-consent {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
#kvkkCheck {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #006241;
}
.kvkk-consent label {
    font-size: 0.9em;
    color: #555;
    cursor: pointer;
    line-height: 1.5;
}
.error-message {
    color: #dc3545;
    font-size: 0.9em;
    margin-top: 8px;
    min-height: 1em;
    font-weight: 600;
    animation: shake 0.3s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Başlat Butonu */
#startButton {
    padding: 15px 50px;
    font-size: 1.3em;
    font-weight: 700;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    background-color: #00754a;
    color: white;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
#startButton::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}
#startButton:hover:not(:disabled)::after {
    width: 300px;
    height: 300px;
}
#startButton:hover:not(:disabled) {
    background-color: #006241;
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 98, 65, 0.3);
}
#startButton:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    transform: none;
}

/* Oyun Alanı (Başlangıçta Gizli) */
#gameCanvas {
    border: 2px solid #006241;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    display: none;
    max-width: 100%;
    height: auto;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"%3E%3Cpath d="M25 10c5 0 9 4 9 9s-4 9-9 9-9-4-9-9 4-9 9-9zm0 2c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z" fill="%23006241" fill-opacity="0.03"/%3E%3C/svg%3E');
    background-size: 50px;
}

/* Mesaj Kutusu (Overlay) */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 15px;
    animation: fadeIn 0.5s ease;
}
.message-box {
    background: white;
    padding: 35px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    width: 480px;
    position: relative;
    overflow: hidden;
    animation: popIn 0.6s ease;
}
.message-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"%3E%3Cpath d="M25 10c5 0 9 4 9 9s-4 9-9 9-9-4-9-9 4-9 9-9zm0 2c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z" fill="%23006241" fill-opacity="0.05"/%3E%3C/svg%3E');
    opacity: 0.1;
    z-index: -1;
}
.message-box h2 {
    margin-top: 0;
    color: #006241;
    font-weight: 700;
    font-family: 'Lora', serif;
}
.message-box #messageBody {
    margin-bottom: 30px;
    line-height: 1.7;
    color: #444;
    font-size: 1.1em;
}
.message-box #messageBody a {
    color: #006241;
    text-decoration: underline;
    font-weight: 600;
}
.message-box #messageBody a:hover {
    color: #004d34;
}
.message-box button {
    padding: 12px 35px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    background-color: #00754a;
    color: white;
    transition: all 0.3s ease;
}
.message-box button:hover {
    background-color: #006241;
    transform: rotate(2deg);
}

/* Oyun içi animasyonları devre dışı bırak */
#gameCanvas .coffee-icon,
#gameCanvas .steam {
    display: none;
}

/* --- Mobil Uyumluluk (Responsive Tasarım) --- */
@media (max-width: 600px) {
    body {
        padding: 10px 0;
    }
    #startScreen {
        padding: 20px;
        width: 95%;
        max-width: 95%;
        border-radius: 15px;
    }
    .coffee-icon {
        width: 30px;
        height: 30px;
        background-size: 30px;
        bottom: 15px;
        right: 30px; /* Mobilde de sağa kaydır */
    }
    .steam {
        width: 15px;
        height: 15px;
        background-size: 15px;
        top: -15px;
        right: 5px;
    }
    .logo {
        max-height: 50px;
    }
    #gameTitle {
        font-size: 1.8em;
    }
    #gameSlogan {
        font-size: 0.9em;
        margin-bottom: 20px;
    }
    .settings {
        gap: 10px;
        margin-bottom: 20px;
    }
    .language-select button {
        padding: 8px 15px;
        font-size: 0.85em;
    }
    .region-select select {
        padding: 8px 10px;
        font-size: 0.85em;
    }
    .rewards-info {
        width: 95%;
        padding: 15px;
        margin-bottom: 20px;
    }
    .rewards-info h3 {
        font-size: 1.1em;
        margin-bottom: 10px;
    }
    #rewardList {
        font-size: 0.85em;
    }
    #rewardList strong {
        flex-basis: 70px;
    }
    #rewardList li::before {
        left: -15px;
        font-size: 0.7em;
    }
    .gsm-input {
        width: 95%;
        margin-bottom: 15px;
    }
    #gsmInput {
        padding: 10px;
        font-size: 0.95em;
    }
    .kvkk-consent label {
        font-size: 0.8em;
    }
    #startButton {
        padding: 12px 35px;
        font-size: 1.1em;
    }
    .message-box {
        width: 85%;
        padding: 25px;
    }
    .message-box h2 {
        font-size: 1.4em;
    }
    .message-box #messageBody {
        font-size: 1em;
    }
    .message-box button {
        padding: 10px 30px;
        font-size: 1em;
    }
}