/* Telefon/tablet: görünür tarayıcı alanına göre tek ekran yerleşimi. */
@media (max-width: 1180px), (max-width: 1400px) and (pointer: coarse) {
    html, body { width: 100%; height: 100%; margin: 0; }
    body {
        height: var(--ekran-yukseklik, 100dvh);
        min-height: 0; display: flex; flex-direction: column;
        overflow: hidden; --q-font: 16px;
    }
    .header { position: relative; flex: 0 0 auto; flex-direction: row; padding: 7px 12px; gap: 8px; min-height: 44px; }
    .header h1 { font-size: clamp(14px, 2.3vw, 20px); gap: 5px; }
    .header h1 .logo { font-size: 23px; }
    .user-info { gap: 6px; min-width: 0; font-size: 12px; }
    .user-info .avatar { width: 27px; height: 27px; flex-shrink: 0; font-size: 14px; }
    .user-name { overflow-wrap: anywhere; max-width: 22vw; }
    .stats-bar { flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; padding: 5px 8px; }
    .stat-badge { font-size: clamp(10px, 1.6vw, 12px); padding: 4px 7px; gap: 3px; white-space: nowrap; }
    .container { flex: 1 1 0; min-height: 0; width: 100%; max-width: 1100px; margin: 0 auto; padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
    .ekran-icerik { width: 100%; height: 100%; transform-origin: top left; display: flex; flex-direction: column; gap: 7px; }
    .ekran-icerik > * { flex-shrink: 0; }
    .tab-group { margin: 0; min-height: 34px; }
    .tab-btn { padding: 7px 8px; font-size: 12px; }
    .yayin-bilgisi { margin: 0; font-size: 11px; line-height: 1.35; }
    body[data-ekran="dersler"] .ders-grid { flex: 1 1 0; min-height: 0; margin: 0; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
    body[data-ekran="dersler"] .ders-card { min-width: 0; min-height: 0; padding: 8px; border-radius: 12px; display: grid; grid-template-columns: 23px minmax(0, 1fr); align-content: center; align-items: center; gap: 2px 5px; overflow: visible; }
    body[data-ekran="dersler"] .ders-icon { font-size: 23px; margin: 0; grid-row: 1; }
    body[data-ekran="dersler"] .ders-card h3 { font-size: clamp(14px, 2vw, 17px); margin: 0; grid-column: 2; }
    body[data-ekran="dersler"] .ders-info { font-size: 12px; line-height: 1.2; grid-column: 1 / -1; }
    body[data-ekran="dersler"] .progress-bar { height: 4px; grid-column: 1 / -1; margin: 3px 0 0; }
    body[data-ekran="dersler"] .ders-skor { grid-column: 1 / -1; font-size: 11px; margin: 0; line-height: 1.2; }
    .ders-card:hover { transform: none; }
    .ders-card, .secenek-btn, .btn { transition: none; }
    .ders-card::before { display: none; }
    .btn { min-height: 36px; padding: 7px 10px; font-size: 12px; border-radius: 10px; justify-content: center; }
    .btn-group { flex-direction: row; flex-wrap: nowrap; margin: 0; gap: 6px; }
    .btn-group .btn { flex: 1 1 0; }
    body[data-ekran="dersler"] .ekran-icerik > div:last-child:not(.ders-grid):not(.yayin-bilgisi):not(.tab-group) { margin: 0 !important; display: flex; gap: 6px; }
    body[data-ekran="dersler"] .ekran-icerik > div:last-child > .btn { flex: 1; margin: 0 !important; }
    .soru-container { width: 100%; max-width: 100%; margin: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 6px; animation: none; }
    .soru-header { margin: 0; gap: 4px; flex-wrap: nowrap; }
    .ders-badge, .konu-badge { padding: 4px 8px; font-size: 11px; }
    .konu-badge { text-align: right; }
    .soru-sayac { margin: 0; font-size: 11px; }
    .soru-progress { height: 4px; margin: 0; flex-shrink: 0; }
    .soru-karti { flex: 1 1 auto; min-height: 0; margin: 0; padding: 10px; display: flex; flex-direction: column; justify-content: flex-start; gap: 7px; }
    .soru-text { font-size: var(--q-font); line-height: 1.3; margin: 0; }
    .soru-govde { min-height: min-content; flex-shrink: 0; }
    .soru-emoji { display: none; }
    .soru-gorsel { margin: 6px 0; }
    .soru-gorsel svg { width: 100%; height: clamp(68px, 20dvh, 155px); object-fit: contain; }
    .soru-gorsel figcaption { font-size: 10px; margin-top: 2px; }
    .secenekler { gap: 6px; flex-shrink: 0; }
    .secenek-btn { min-height: 40px; padding: 7px 9px; gap: 8px; border-radius: 10px; font-size: var(--q-font); line-height: 1.25; overflow-wrap: anywhere; }
    .secenek-btn .harf { width: 25px; height: 25px; font-size: 12px; flex-shrink: 0; }
    .secenek-btn:hover:not(:disabled) { transform: none; }
    .sonuc-mesaj { font-size: var(--q-font); padding: 6px 8px; margin: 0; }
    .aciklama-kutusu { margin: 0; padding: 7px 9px; animation: none; }
    .aciklama-baslik { font-size: 11px; margin: 0 0 3px; }
    .aciklama-metin { font-size: max(11px, calc(var(--q-font) - 2px)); line-height: 1.3; white-space: pre-line; }
    .alt-soru { margin: 5px 0; padding: 6px 8px; font-size: max(11px, calc(var(--q-font) - 1px)); line-height: 1.3; }
    .alt-soru strong { font-size: 10px; color: var(--accent); }
    .alt-soru strong::after { content: ': '; }
    .alt-soru strong, .alt-soru p { display: inline; }
    .alt-soru .soru-gorsel svg { height: clamp(60px, 13dvh, 100px); }
    .soru-gorsel svg text { font-size: 24px; }
    .alt-soru .soru-gorsel figcaption { display: none; }
    .giris-ekrani { height: 100%; min-height: 0; animation: none; gap: 10px; }
    .giris-ekrani .maskot { font-size: clamp(35px, 10dvh, 72px); margin: 0; animation: none; }
    .giris-ekrani h1 { font-size: clamp(20px, 4vw, 30px); margin: 0; }
    .giris-ekrani p { font-size: 13px; line-height: 1.5; margin: 0; }
    .isim-formu { width: min(100%, 430px); flex-wrap: nowrap; gap: 7px; margin-top: 8px; }
    .isim-formu input { flex: 1; min-width: 0; width: 0; font-size: 16px; padding: 9px; }
    .isim-formu .btn { font-size: 14px !important; padding: 9px 12px !important; }
    body[data-ekran="tur"] .soru-container { justify-content: center; align-items: center; gap: 7px; }
    body[data-ekran="tur"] .soru-container > div:first-child { font-size: 36px !important; margin: 0 !important; }
    body[data-ekran="tur"] h2 { font-size: 21px; margin: 0 !important; }
    body[data-ekran="tur"] p { margin: 0 !important; font-size: 13px; }
    body[data-ekran="tur"] .ders-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
    body[data-ekran="tur"] .ders-card { padding: 12px !important; }
    body[data-ekran="tur"] .soru-container > div:last-child { margin: 0 !important; }
    .bitti-mesaj { padding: 10px; }
    .bitti-mesaj .emoji { font-size: 35px; margin: 0; }
    .bitti-mesaj h2 { font-size: 20px; }
    .bitti-mesaj .yildizlar { font-size: 24px; margin: 5px; }
    .skor-panel { padding: 10px; margin: 0; }
    .skor-panel h3 { font-size: 13px; margin: 0 0 8px; }
    .skor-item { padding: 9px; }
    .skor-item .skor-sayi { font-size: 25px; }
    body[data-ekran="sonuc"] .soru-container { justify-content: center; }
    body[data-ekran="sonuc"] .btn-group { display: grid; grid-template-columns: 1fr 1fr; }
    .lider-tablo { margin: 0; padding: 10px; }
    .lider-satir { gap: 5px; padding: 7px 0; font-size: 11px; }
    .lider-satir[hidden] { display: none; }
    .lider-ders, .lider-tarih { font-size: 9px; }
    .lider-isim { overflow-wrap: anywhere; min-width: 0; }
    .skor-sayfalama { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 12px; margin-top: 6px; }
    body[data-sikisik="evet"] .soru-karti { padding: 6px; gap: 4px; }
    body[data-sikisik="evet"] .secenekler { gap: 4px; }
    body[data-sikisik="evet"] .secenek-btn { padding: 5px 7px; min-height: 34px; }
    body[data-sikisik="evet"] .soru-gorsel svg { height: 78px; }
    body[data-sikisik="evet"] .alt-soru .soru-gorsel svg { height: 60px; }
}
@media (min-width: 600px) and (max-width: 1180px), (min-width: 600px) and (max-width: 1400px) and (pointer: coarse) {
    body[data-ekran="dersler"] .ders-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
    body[data-ekran="dersler"] .ders-card { padding: 12px; }
    body[data-ekran="dersler"] .ders-info, body[data-ekran="dersler"] .ders-skor { font-size: 12px; }
    body[data-ekran="soru"] .soru-karti { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto; align-items: center; column-gap: 14px; }
    .soru-govde { grid-column: 1; }
    .secenekler { grid-column: 2; }
    .sonuc-mesaj, .aciklama-kutusu { grid-column: 1 / -1; }
}
@media (max-height: 450px) and (max-width: 1180px) {
    .header { min-height: 32px; padding: 3px 10px; }
    .stats-bar { padding: 3px 8px; }
    .container { padding-top: 5px; padding-bottom: 5px; }
    .ekran-icerik { gap: 4px; }
    .btn { min-height: 30px; padding: 5px 8px; }
    .tab-group { min-height: 28px; }
    .tab-btn { padding: 4px; }
    .yayin-bilgisi { font-size: 10px; }
    body[data-ekran="tur"] .soru-container { gap: 4px; }
    body[data-ekran="tur"] .soru-container > div:first-child { font-size: 22px !important; }
    body[data-ekran="tur"] .ders-card { padding: 5px !important; }
}