/* Genel Sayfa Ayarları */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #121214;
    color: #e1e1e6;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Ana Konteyner */
.game-container {
    background-color: #1e1e24;
    border-radius: 12px;
    padding: 30px;
    width: 100%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

h1 { margin-top: 0; color: #ffffff; font-size: 2rem; }
.subtitle { color: #a8a8b3; font-size: 0.95rem; margin-bottom: 30px; }
h3 { color: #04d361; margin-bottom: 20px; }
.screen { width: 100%; display: block; }
.hidden { display: none !important; }

/* Kategori Butonları */
.category-buttons { display: flex; flex-direction: column; gap: 15px; }

button {
    background-color: #29292e;
    color: #ffffff;
    border: 2px solid #323238;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
button:hover {
    background-color: #04d361;
    border-color: #04d361;
    color: #121214;
    transform: translateY(-2px);
}

.game-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 1.1rem;
}
.btn-restart { padding: 6px 12px; font-size: 0.85rem; background-color: #323238; }

/* İpucu Kartları Düzeni (2x2 Izgara) */
/* İpucu Kartları Düzeni (5 Kart İçin Güncellendi) */
.clue-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

/* 5. kartın (Durum kartı) en altta tek başına tam genişlik kaplaması için */
.clue-cards .card:last-child {
    grid-column: span 2;
}

/* Kartların Varsayılan (Kilitli) Hali */
.card {
    background-color: #29292e;
    border: 2px solid #323238;
    padding: 20px 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s ease;
}

.card-title {
    font-size: 0.85rem;
    color: #a8a8b3;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #7c7c8a;
}

/* Kart Doğru Tahmin Edilip Açıldığında */
.card.unlocked {
    background-color: #1b4d22;
    border-color: #04d361;
}
.card.unlocked .card-value {
    color: #ffffff;
}

/* Giriş Alanı */
.search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}
.search-box input {
    flex: 1;
    background-color: #121214;
    border: 2px solid #323238;
    color: #ffffff;
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
}
.search-box input:focus { border-color: #04d361; }
#guess-btn { background-color: #04d361; color: #121214; border: none; }

/* Yanlış Tahminler Alanı */
.wrong-guesses-container {
    text-align: left;
    background-color: #121214;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.wrong-guesses-container h4 { margin: 0 0 10px 0; color: #a8a8b3; font-size: 0.9rem; }
#wrong-guesses-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wrong-badge {
    background-color: #661a1a;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
}

/* Kazanma Ekranı */
#win-message {
    background-color: rgba(4, 211, 97, 0.1);
    border: 1px solid #04d361;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

/* Arka Planı Karartan Modal Katmanı */
.modal {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

/* Küçük Pencere Kutusu */
.modal-content {
    background-color: #1e1e24;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 380px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    border: 1px solid #323238;
    animation: popupScale 0.3s ease-out;
}

/* Küçük Ekran Açılış Animasyonu */
@keyframes popupScale {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Çarpı Kapatma Butonu */
.close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    color: #a8a8b3;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}
.close-btn:hover {
    color: #ffffff;
}

/* Gizli Kişinin Gösterileceği Şık Kutu */
.winner-box {
    background-color: #121214;
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    border: 1px dashed #04d361;
}

/* --- 3D KART DÖNME (FLIP) EFEKTİ --- */

/* Kartların sığacağı ana ızgara kutusu */
.clue-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

/* Durum kartını en altta tam genişlik yapmak için */
#card-durum {
    grid-column: span 2;
}

/* Kartın dış çerçevesi ve 3D derinlik hissi */
.clue-card {
    background: transparent;
    height: 110px;
    perspective: 1000px; /* 3 boyut derinliği */
    cursor: default;
}

/* Kartın dönen iç gövdesi */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d; /* Önlü arkalı yapıyı koru */
}

/* EĞER KART AÇILDIYSA (unlocked sınıfı geldiyse) 180 derece döndür */
.clue-card.unlocked .card-inner {
    transform: rotateY(180deg);
}

/* Ön ve Arka yüzlerin ortak özellikleri */
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Arkası dönükken görünmez yap */
    backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #323238;
}

/* KİLİTLİ ÖN YÜZ (Koyu Gri Hali) */
.card-front {
    background-color: #202024;
    color: #a8a8b3;
}

.card-front h4 {
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.card-front .lock-icon {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* AÇILMIŞ ARKA YÜZ (Yeşil / Parlak Hali) */
.card-back {
    background-color: #122a1e; /* Hafif koyu yeşil arka plan */
    border-color: #04d361; /* Parlak yeşil çerçeve */
    color: #ffffff;
    transform: rotateY(180deg); /* Başlangıçta ters duruyor */
}

.card-back h4 {
    margin: 0 0 5px 0;
    font-size: 0.75rem;
    color: #04d361;
    letter-spacing: 1px;
}

.card-back .card-value {
    font-size: 1.1rem;
    font-weight: bold;
}