/* Mevcut @font-face kısmını bununla değiştirin */
@font-face {
    font-family: 'arakom';
    /* Dosya yolu hatasını önlemek için göreceli yol kullanın */
    src: url('../arakom.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal;
}

        :root {
            --bg-gradient: linear-gradient(135deg, #f3f0ff 0%, #e5dbff 100%);
            --primary: #5c7cfa;
            --accent: #ff922b;
            --p1: #4dabf7;
            --p2: #ff8787;
            --shadow: 0 12px 25px rgba(0,0,0,0.1);
        }

        body {
            font-family: 'arakom', sans-serif;
            background: var(--bg-gradient);
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        .header {
            padding: 10px;
            text-align: center;
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(12px);
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            position: sticky; top: 0; z-index: 1000;
        }

        h1 { margin: 0 0 5px 0; color: #4b2cc5; font-size: 1.5rem; font-weight: normal; }
        .controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

        .btn {
            border: none; padding: 8px 14px; border-radius: 10px; cursor: pointer;
            font-family: 'arakom'; background: white; box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            transition: 0.3s; font-size: 0.9rem;
        }
        .btn.active { background: var(--primary); color: white; }
        .btn:disabled { opacity: 0.3; cursor: not-allowed; }

        .game-area { flex-grow: 1; padding: 15px; display: flex; justify-content: center; align-items: stretch; }

        .score-board {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Kutuların boyunu uzatır */
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 100%; /* 4K'da tam yayılma için */
    height: 85vh; /* Header dışında kalan alanın çoğu */
    margin: 0 auto;
}

.player-box {
    flex: 0 0 80px; /* Kutuların genişliğini sabitledik */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    box-shadow: var(--shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 5px solid transparent;
    margin: 10px 0; /* Animasyon ve nefes alma payı */
}

/* Aktif oyuncu animasyonu */
.active-p { 
    background: #fff; 
    border-color: currentColor; 
    transform: scale(1.05); /* Hafif büyüme animasyonu */
    box-shadow: 0 0 40px rgba(0,0,0,0.15);
}

        .p-label { font-size: 1.1rem; font-weight: bold; opacity: 0.6; }
        .p-score { font-size: 2.5rem; font-weight: 900; margin-top: 5px; }

        
.grid { 
    display: grid; 
    gap: 15px; 
    flex-grow: 1; /* Sağ ve sol kutu arasındaki tüm boşluğu doldurur */
    width: 100%;
    height: 100%;
} .grid { display: grid; gap: 10px; flex-grow: 1; width: 100%; }

        .grid:not(.memory-mode) {
    grid-template-columns: repeat(5, 1fr) !important;
    /* Sabit 180px yerine, ekran yüksekliğinin %80'ini 4 satıra bölüyoruz */
    grid-auto-rows: 1fr;
    gap: 15px;
    width: 100%;
}

.grid.memory-mode {
    display: grid;
    gap: 10px;
    flex-grow: 1;
    height: 100%; /* Kutu yüksekliğini sona kadar zorlar */
    /* Satırları içeriğe göre değil, mevcut boşluğa göre eşit paylaştırır */
    grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); 
    align-content: stretch;
}
        .grid.memory-mode[data-total="12"] { grid-template-columns: repeat(4, 1fr); }
        .grid.memory-mode[data-total="18"] { grid-template-columns: repeat(6, 1fr); }
        .grid.memory-mode[data-total="20"] { grid-template-columns: repeat(5, 1fr); }
        .grid.memory-mode[data-total="24"] { grid-template-columns: repeat(6, 1fr); }

        .card { perspective: 1000px; cursor: pointer; width: 100%; height: 100%; }
        .card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
        .card.flipped .card-inner { transform: rotateY(180deg); }
 /* GENEL KART YÜZÜ */
.card-face {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    border-radius: 15px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: var(--shadow); 
    border: 4px solid white; 
    box-sizing: border-box; 
    text-align: center; 
    padding: 10px;
    word-break: break-word;
}

/* ARAPÇA BOYUT AYARI */
.lang-ar {
    font-family: 'arakom', sans-serif !important;
    font-size: clamp(1.4rem, 5vw, 3rem) !important;
    line-height: 1.2;
}

/* TÜRKÇE BOYUT AYARI */
.lang-tr {
    font-family: 'arakom', sans-serif !important;
    font-size: clamp(0.85rem, 3vw, 2rem) !important;
    font-weight: normal !important;
    line-height: 1.1;
}

/* KARTLAR (STUDY) MODU ÖZEL RENK AYARLARI */
/* Ön Yüz (Açık Hali): Yazı her zaman BEYAZ */
.grid:not(.memory-mode) .card-front span {
    color: white !important;
}

/* Arka Yüz (Dönünce): Yazı her zaman SİYAH */
.grid:not(.memory-mode) .card-back span {
    color: #000 !important;
}

/* HAFIZA OYUNU MODU (Mevcut halini korur) */
.grid.memory-mode .card-back {
    color: #333 !important;
}
        .card-front { color: white; }
        .card-back { transform: rotateY(180deg); background: #ffffff; color: #333; }
        .memory-mode .card-front::after { content: "؟"; font-size: 2rem; opacity: 0.3; }
        .matched { opacity: 0; pointer-events: none; transition: 0.6s; transform: scale(0.8); }

        /* Switch Tasarımı */
        .slider:before {
            position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
            background-color: white; transition: .4s; border-radius: 50%;
        }
        input:checked + .slider { background-color: var(--p2) !important; }
        input:checked + .slider:before { transform: translateX(22px); }

        @media (max-width: 768px) {
            .score-board { flex-direction: column; align-items: center; }
            .player-box { flex-direction: row; flex: none; width: 90%; height: 45px; gap: 5px; margin: 5px 0; }
            .p-score { font-size: 1.4rem; margin-top: 0; }
            .p-label { font-size: 0.8rem; }
            .grid:not(.memory-mode) { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 90px; }

            @media (orientation: portrait) {
                #pair-selection-area { display: none !important; }
                .grid.memory-mode { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: minmax(75px, 1fr) !important; gap: 5px !important; }
                .card-face { font-size: 0.9rem !important; border-width: 2px !important; padding: 4px !important; }
                .memory-mode .card-front::after { font-size: 1.2rem; }
            }
        }

 
/* --- MOBİL ÖZEL AYARLARI --- */
@media (max-width: 768px) {
    
    /* 1. ÇALIŞMA MODU KART BOYUTLARI */
    /* Sütun sayısını 3 yerine 2 yaparsan kelimeler çok daha geniş bir alana yayılır ve taşma yapmaz */
    .grid:not(.memory-mode) {
        grid-template-columns: repeat(3, 1fr) !important; 
        grid-auto-rows: 120px !important; /* Yazı büyüyeceği için yüksekliği biraz artırdık */
        gap: 10px !important;
    }

    /* 2. HAFIZA OYUNU KART BOYUTLARI */
    @media (orientation: portrait) {
        .grid.memory-mode {
            grid-template-columns: repeat(3, 1fr) !important;
            grid-auto-rows: minmax(90px, 1fr) !important;
            gap: 6px !important;
        }
    }

    /* 3. ARAPÇA KELİME BOYUTLARI (Tüm Modlar) */
    .lang-ar {
        font-family: 'arakom', sans-serif !important;
        /* Arapça karakterlerin detayları (harekeler) için 2.2rem oldukça büyük ve okunaklıdır */
        font-size: 1.8rem !important; 
        color: #000 !important;
        line-height: 1.1 !important;
        /* Uzun kelimelerin sığması için harf arası daraltma (isteğe bağlı) */
        letter-spacing: -0.5px;
    }

    /* 4. TÜRKÇE KELİME BOYUTLARI (Tüm Modlar) */
    .lang-tr {
        font-family: 'arakom', sans-serif !important;
        font-size: 1.2rem !important; /* Türkçe kelimeler Arapçaya göre daha küçük kalarak hiyerarşi sağlar */
        font-weight: normal !important;
        color: #333 !important;
        line-height: 1.2;
    }

    /* 5. KART İÇİ DOLGU VE HİZALAMA */
    .card-face {
        padding: 5px !important;
        /* Kelime çok uzunsa kelimeyi bölerek kutudan taşmasını engeller */
        word-break: break-word !important;
        overflow: hidden;
    }
}

/* Anasayfa Buton Stili */
.home-btn {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: #4b2cc5;
    color: white !important;
    text-decoration: none;
    border-radius: 12px;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(75, 44, 197, 0.2);
}

.home-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(75, 44, 197, 0.3);
    background: #5c3ce0;
}

.home-btn svg {
    fill: white;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .home-btn {
        left: 10px;
        top: 10px;
        padding: 8px;
    }
    
    /* Mobilde sadece ikon kalsın, yazı gizlensin */
    .home-text {
        display: none;
    }
}

/* Menü ekranının en üst kısmını sabitleyen konteyner */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1001;
    background: var(--bg-gradient); /* Sayfa arka planıyla uyumlu olması için */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 10px;
    /* Hafif bir gölge ile içerikten ayrılması sağlanabilir */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
}

/* Anasayfa butonunun sabit konumunu sticky konteynerine göre ayarla */
.home-btn {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1002;
    /* ... diğer mevcut stilleriniz ... */
}

/* Başlık ayarı */
.menu-title {
    margin: 0;
    color: #4b2cc5;
    font-size: 3rem;
}

@media (max-width: 768px) {
    .home-btn {
        left: 10px;
    }
    .menu-title {
        font-size: 2rem;
    }
}

/* ============================================================
   ZARİF YENİLEME (02.10.2026)
   Öğretmen: "yeniden tasarla; 7. sınıf ünite oyunlarındaki hafıza
   kartları tasarımı güzeldi, oraya bakabilirsin."
   Aynı dil: krem kâğıt · gül kurusu / lila pastel · antika altın.
   Eski kurallar yerinde; bu blok üstlerine yazıyor, geri almak için
   bu bloğu silmek yeter.
   ============================================================ */
:root {
  --zarif-kagit: #FBF7F4; --zarif-kagit2: #F3EBE6;
  --zarif-mur: #43303A;   --zarif-mur2: #6B5560;
  --zarif-gul: #D98CA0;   --zarif-gul-ac: #F3DCE2;
  --zarif-lila: #B9A7D8;  --zarif-lila-ac: #EDE6F6;
  --zarif-altin: #BF9B4E; --zarif-altin-ac: #E3C87E;
  --zarif-cizgi: rgba(191, 155, 78, .30);

  --bg-gradient:
    radial-gradient(60% 45% at 18% 8%, rgba(217, 140, 160, .13), transparent 70%),
    radial-gradient(55% 45% at 86% 92%, rgba(185, 167, 216, .14), transparent 70%),
    linear-gradient(180deg, #FDFAF8, #F1E7E2);
  --primary: #B07E8E;
  --accent: var(--zarif-altin);
  --p1: #D98CA0;
  --p2: #B9A7D8;
  --shadow: 0 10px 26px rgba(67, 48, 58, .09);
}
body { color: var(--zarif-mur) }

/* ---------- üst şerit, başlık, düğmeler ---------- */
.header { background: rgba(255, 253, 251, .92); box-shadow: 0 1px 0 var(--zarif-cizgi) }
h1, .menu-title { color: var(--zarif-mur); letter-spacing: .3px }
.menu-title::after {
  content: ''; display: block; width: min(220px, 44vw); height: 1px; margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--zarif-altin-ac) 18%,
    var(--zarif-altin) 50%, var(--zarif-altin-ac) 82%, transparent);
}
.btn {
  background: #fff; color: var(--zarif-mur);
  border: 1px solid var(--zarif-cizgi); border-radius: 13px;
  box-shadow: 0 1px 2px rgba(67, 48, 58, .05), 0 6px 16px rgba(67, 48, 58, .05);
}
.btn:hover { border-color: var(--zarif-altin-ac); background: #FFFBF8 }
.btn.active { background: linear-gradient(180deg, #CBA86A, #B08A42); color: #fff; border-color: #A8812F }
#lang-btn-main { background: linear-gradient(180deg, #CBA86A, #B08A42) !important; color: #fff !important }
.home-btn { background: #fff !important; color: var(--zarif-mur) !important; border: 1px solid var(--zarif-cizgi) }
.home-btn:hover { background: #FFF8F2 !important; box-shadow: 0 6px 16px rgba(191, 155, 78, .18) }
.home-btn svg { fill: none; stroke: var(--zarif-mur2) }

/* ---------- konu kartları ---------- */
.konu-kart {
  background: linear-gradient(180deg, #FFFFFF, #FFFBF8);
  border: 1px solid var(--zarif-cizgi); border-radius: 20px;
  padding: 24px 20px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(67, 48, 58, .05), 0 12px 26px rgba(67, 48, 58, .06);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.konu-kart:hover {
  transform: translateY(-4px); border-color: var(--zarif-altin-ac);
  box-shadow: 0 18px 34px rgba(191, 155, 78, .18);
}
.konu-ikon { font-size: 2.7rem; line-height: 1.1 }
.konu-kart h3 { margin: 10px 0 4px; color: var(--zarif-mur); font-size: 1.15rem }
.konu-adet {
  display: inline-block; padding: 3px 12px; border-radius: 99px;
  background: rgba(191, 155, 78, .12); color: #8A6B2E; font-size: .82rem;
}

/* ---------- kartlar ---------- */
.card-face {
  border: 1px solid var(--zarif-cizgi) !important;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(67, 48, 58, .05), 0 8px 20px rgba(67, 48, 58, .07);
}
/* çalışma kartlarında yazı beyaz değil mürekkep (pastel zemin) */
.grid:not(.memory-mode) .card-front span { color: var(--zarif-mur) !important }
.grid:not(.memory-mode) .card-back  span { color: var(--zarif-mur) !important }
.card-front { color: var(--zarif-mur) }
.card-back  { background: linear-gradient(180deg, #FFFFFF, #FDF8F5); color: var(--zarif-mur) }
.grid.memory-mode .card-back { color: var(--zarif-mur) !important }

/* hafıza kipinde kapalı yüz: krem kâğıt, ince altın kafes, altın elmas */
.card-front.kapali {
  background:
    repeating-linear-gradient(45deg, rgba(191, 155, 78, .10) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(191, 155, 78, .10) 0 1px, transparent 1px 13px),
    linear-gradient(160deg, #FFFDFB, var(--zarif-kagit2));
  overflow: hidden;
}
.card-front.kapali::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--zarif-altin); border-radius: 3px; opacity: .5;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7),
              inset 0 0 0 4px rgba(191, 155, 78, .28);
}
.card:hover .card-face { border-color: var(--zarif-altin-ac) !important }
.card.matched .card-face {
  background: linear-gradient(180deg, #FFFCF4, #FBF1DC) !important;
  border-color: var(--zarif-altin) !important; color: #5B4420 !important;
  box-shadow: 0 0 0 2px rgba(191, 155, 78, .25), 0 10px 26px rgba(191, 155, 78, .20);
}

/* ---------- oyuncu kutuları ---------- */
.player-box {
  background: #fff !important; border: 1px solid var(--zarif-cizgi);
  border-radius: 18px; box-shadow: 0 8px 22px rgba(67, 48, 58, .07);
}
.p-label { opacity: .75 }