/* EmlakBana Sınav - Frontend CSS */
:root {
    --ebs-primary: #1a3c5e;
    --ebs-secondary: #e67e22;
    --ebs-green: #27ae60;
    --ebs-red: #e74c3c;
    --ebs-light: #f8f9fa;
    --ebs-border: #e0e6ed;
    --ebs-text: #2c3e50;
    --ebs-muted: #7f8c8d;
}

/* Ana Konteyner */
.ebs-sinav-alani {
    max-width: 820px;
    margin: 20px auto;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--ebs-text);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Bantlar */
.ebs-ust-bant {
    background: var(--ebs-primary);
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.ebs-alt-bant {
    background: var(--ebs-primary);
    color: rgba(255,255,255,0.8);
    text-align: center;
    padding: 12px 20px;
    font-size: 13px;
}
.ebs-alt-bant strong { color: var(--ebs-secondary); }

/* Bölümler */
.ebs-bolum { padding: 30px 25px; }
.ebs-gizli { display: none !important; }

/* Hoşgeldin */
.ebs-hosgeldin {
    text-align: center;
    margin-bottom: 30px;
}
.ebs-hosgeldin-ikon { font-size: 56px; margin-bottom: 15px; }
.ebs-hosgeldin h2 {
    font-size: 26px;
    color: var(--ebs-primary);
    margin: 0 0 10px;
}
.ebs-hosgeldin p {
    color: var(--ebs-muted);
    font-size: 15px;
    max-width: 500px;
    margin: 0 auto;
}

/* Misafir Form */
.ebs-misafir-form {
    background: var(--ebs-light);
    border-radius: 12px;
    padding: 20px 25px;
    margin-bottom: 25px;
    border: 1px solid var(--ebs-border);
}
.ebs-misafir-form h3 { margin: 0 0 15px; font-size: 16px; color: var(--ebs-primary); }
.ebs-form-grup { margin-bottom: 14px; }
.ebs-form-grup label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.ebs-form-grup input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--ebs-border);
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border 0.2s;
}
.ebs-form-grup input:focus { border-color: var(--ebs-primary); outline: none; }
.ebs-form-grup small { color: var(--ebs-muted); font-size: 12px; }

/* Giriş Zorunlu */
.ebs-giris-zorunlu {
    text-align: center;
    padding: 50px 25px;
}
.ebs-gz-ikon { font-size: 56px; margin-bottom: 15px; }
.ebs-giris-zorunlu h3 { font-size: 22px; color: var(--ebs-primary); margin-bottom: 10px; }
.ebs-giris-zorunlu p { color: var(--ebs-muted); margin-bottom: 25px; }
.ebs-giris-zorunlu a.ebs-btn { display: inline-block; text-decoration: none; }

/* Uyarı */
.ebs-uyari {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    border-radius: 8px;
    padding: 10px 16px;
    margin: 10px 0;
    text-align: center;
    font-size: 14px;
}

/* Kategori başlık */
.ebs-kategori-secim h3 { font-size: 17px; margin-bottom: 6px; color: var(--ebs-primary); }
.ebs-kategori-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
.ebs-kategori-kart {
    border: 2px solid var(--ebs-border);
    border-radius: 12px;
    padding: 18px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}
.ebs-kategori-kart:hover { border-color: var(--ebs-primary); background: #f0f5fa; }
.ebs-kategori-kart.aktif { border-color: var(--ebs-primary); background: #e8f0fb; }
.ebs-kat-ikon { font-size: 28px; margin-bottom: 8px; }
.ebs-kat-ad { font-weight: 700; font-size: 14px; color: var(--ebs-primary); }
.ebs-kat-acik { font-size: 12px; color: var(--ebs-muted); margin-top: 4px; }

/* Butonlar */
.ebs-btn {
    background: var(--ebs-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}
.ebs-btn:hover { background: #14304d; transform: translateY(-1px); }
.ebs-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }
.ebs-btn-buyuk { padding: 15px 40px; font-size: 17px; }
.ebs-btn-gri { background: #95a5a6; }
.ebs-btn-gri:hover { background: #7f8c8d; }
.ebs-btn-kirmizi { background: var(--ebs-red); }
.ebs-btn-kirmizi:hover { background: #c0392b; }

/* Yükleniyor */
.ebs-yukleniyor-icerik { text-align: center; padding: 60px 20px; }
.ebs-spinner {
    width: 50px; height: 50px;
    border: 4px solid var(--ebs-border);
    border-top: 4px solid var(--ebs-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Sınav Üst Bar */
.ebs-sinav-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}
.ebs-ilerleme-bilgi { font-size: 16px; font-weight: 700; color: var(--ebs-primary); }
.ebs-sure {
    background: var(--ebs-primary);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    font-family: monospace;
}
.ebs-kategori-etiket {
    background: #e8f0fb;
    color: var(--ebs-primary);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* İlerleme Barı */
.ebs-ilerleme-bar {
    background: var(--ebs-border);
    border-radius: 10px;
    height: 8px;
    margin-bottom: 25px;
    overflow: hidden;
}
.ebs-ilerleme-dolu {
    background: linear-gradient(90deg, var(--ebs-primary), var(--ebs-secondary));
    height: 100%;
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* Soru Kutusu */
.ebs-soru-kutu {
    background: var(--ebs-light);
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid var(--ebs-border);
}
.ebs-soru-metni {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 22px;
    color: var(--ebs-text);
}

/* Seçenekler */
.ebs-secenekler { display: flex; flex-direction: column; gap: 10px; }
.ebs-secenek {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 2px solid var(--ebs-border);
    border-radius: 10px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
}
.ebs-secenek:hover { border-color: var(--ebs-primary); background: #f0f5fa; }
.ebs-secenek.secili { border-color: var(--ebs-primary); background: #e8f0fb; }
.ebs-secenek.dogru { border-color: var(--ebs-green); background: #eafaf1; }
.ebs-secenek.yanlis { border-color: var(--ebs-red); background: #fdecea; }
.ebs-sec-etiket {
    background: var(--ebs-primary);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.ebs-secenek.secili .ebs-sec-etiket { background: var(--ebs-secondary); }
.ebs-secenek.dogru .ebs-sec-etiket { background: var(--ebs-green); }
.ebs-secenek.yanlis .ebs-sec-etiket { background: var(--ebs-red); }
.ebs-sec-metin { flex: 1; }

/* Alt butonlar */
.ebs-sinav-alt {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Cevap haritası */
.ebs-cevap-haritasi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 15px;
    background: var(--ebs-light);
    border-radius: 10px;
}
.ebs-harita-nokta {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ebs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}
.ebs-harita-nokta.cevaplanmis { background: var(--ebs-primary); color: #fff; }
.ebs-harita-nokta.aktif-nokta { border-color: var(--ebs-secondary); }

/* Sonuç Ekranı */
.ebs-sonuc-ust {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, #1a3c5e 0%, #2980b9 100%);
    border-radius: 14px;
    color: #fff;
    margin-bottom: 25px;
}
.ebs-motivasyon-emoji { font-size: 56px; margin-bottom: 5px; }
.ebs-sonuc-baslik { font-size: 26px; font-weight: 700; margin-bottom: 20px; }

/* Puan Dairesi */
.ebs-puan-daire {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
}
.ebs-puan-daire svg { width: 100%; height: 100%; }
.ebs-puan-yazi {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}
#ebs-puan-daire-cember { transition: stroke-dashoffset 1.5s ease; }

/* İstatistikler */
.ebs-sonuc-istatistik {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}
.ebs-ist-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ebs-ist-sayi { font-size: 28px; font-weight: 700; }
.ebs-ist-sayi.dogru { color: #2ecc71; }
.ebs-ist-sayi.yanlis { color: #e74c3c; }
.ebs-ist-item span:last-child { font-size: 13px; opacity: 0.8; }

.ebs-motivasyon-mesaj {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 15px;
    line-height: 1.6;
    margin: 15px 0;
}
.ebs-durum-badge {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 700;
    margin-top: 5px;
}
.ebs-durum-badge.basarili { background: #2ecc71; }
.ebs-durum-badge.basarisiz { background: #e74c3c; }

/* Cevaplar Listesi */
.ebs-cevap-kart {
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
    border-left: 4px solid var(--ebs-border);
    background: var(--ebs-light);
}
.ebs-cevap-kart.dogru { border-left-color: var(--ebs-green); background: #f0fff4; }
.ebs-cevap-kart.yanlis { border-left-color: var(--ebs-red); background: #fff5f5; }
.ebs-cevap-kart .ebs-ck-soru { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.ebs-cevap-kart .ebs-ck-detay { display: flex; gap: 15px; flex-wrap: wrap; font-size: 13px; }
.ebs-cevap-kart .ebs-ck-aciklama { 
    margin-top: 10px; 
    padding: 10px 14px; 
    background: rgba(0,0,0,0.05); 
    border-radius: 8px;
    font-size: 13px;
    color: var(--ebs-muted);
}

/* Mobile */
@media (max-width: 600px) {
    .ebs-bolum { padding: 20px 15px; }
    .ebs-hosgeldin h2 { font-size: 20px; }
    .ebs-soru-metni { font-size: 16px; }
    .ebs-kategori-grid { grid-template-columns: repeat(2, 1fr); }
    .ebs-sinav-ust { justify-content: center; }
    .ebs-puan-daire { width: 110px; height: 110px; }
    .ebs-puan-yazi { font-size: 22px; }
    .ebs-motivasyon-emoji { font-size: 42px; }
    .ebs-sonuc-baslik { font-size: 20px; }
    .ebs-ist-sayi { font-size: 22px; }
    .ebs-btn-buyuk { width: 100%; }
}