/* ============================================================
   SUQUIZ — BÜYÜK EKRAN LAYOUT FIX
   Sadece layout / genişlik / grid düzenlemesi yapar.
   Font, padding, boyut BÜYÜTMEZ — mevcut değerler korunur.
   ============================================================ */


/* ============================================================
   A — INDEX SAYFASI
   ============================================================ */

/* ── Container genişliği ── */
@media (min-width: 1280px) {
    .container { max-width: 1200px; }
}
@media (min-width: 1440px) {
    .container { max-width: 1320px; }
}
@media (min-width: 1920px) {
    .container { max-width: 1600px; }
}

/* ── Layout wrapper: progress sidebar + içerik yan yana ── */
@media (min-width: 1024px) {
    /* Progress sidebar dikey konuma geç */
    .progress-container {
        width: 200px;
        min-width: 200px;
        flex-shrink: 0;
        margin-right: 32px;
        padding: 100px 16px 40px;
        position: sticky;
        top: 100px;
        height: fit-content;
    }
    /* Dikey çizgi */
    .progress-steps {
        display: flex;
        flex-direction: column;
        gap: 32px;
        overflow: visible;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    .progress-steps::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 16px;
        bottom: auto;
        right: auto;
        height: calc(100% - 32px);
        width: 2px;
        border-radius: 2px;
        z-index: 0;
        max-width: none;
        transform: none;
    }
    /* Adım satır düzeni */
    .step {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        position: relative;
        z-index: 2;
        min-width: auto;
        max-width: none;
    }
    .step-label {
        font-size: 14px;
        white-space: nowrap;
        text-align: left;
        text-transform: none;
        max-width: none;
        color: var(--text-lighter);
        font-weight: 500;
    }
    .step.active .step-label {
        color: var(--text);
        font-weight: 600;
        font-size: 14px;
    }
    .step.completed .step-label {
        color: var(--text-medium);
    }
}

/* ── Kategori grid: her ekranda 2 sütun (2x2) ── */
@media (min-width: 1280px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (min-width: 1920px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 720px;
    }
}

/* ── Başarı sayfası QR/PDF kutucukları ortalansın ── */
@media (min-width: 1280px) {
    .success-container-new { max-width: 860px; }
}
@media (min-width: 1440px) {
    .success-container-new { max-width: 960px; }
}
@media (min-width: 1920px) {
    .success-container-new { max-width: 1100px; }
}

/* ── Ön izleme (step 5) max-width ── */
@media (min-width: 1280px) {
    .preview-container { max-width: 860px; }
}
@media (min-width: 1440px) {
    .preview-container { max-width: 960px; }
}

/* ── Sosyal medya paylaşım butonları — büyük ekranda 5 sütun ── */
@media (min-width: 1280px) {
    .share-grid { grid-template-columns: repeat(2, 1fr);
        max-width: 720px; }
}


/* ============================================================
   B — TEST ÇÖZME SAYFASI
   Tek sütun, yatayda ortalı — tüm ekran boyutlarında.
   Sıra: Timer → Mini Dots → Progress Bar → Soru Kartı
   ============================================================ */

/* ── Test ekranı container: her zaman tek sütun, ortalı ── */
#testEkrani .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ── İçerik öğeleri tam genişlik, ortalı ── */
#testEkrani #timerDiv {
    order: 1;
    align-self: flex-start;
}

#testEkrani #miniCardsGrid,
#testEkrani .mini-dots-grid {
    order: 2;
    width: 100%;
    justify-content: center;
}

#testEkrani .progress-wrapper {
    order: 3;
    width: 100%;
}

#testEkrani .soru-card {
    order: 4;
    width: 100%;
}

/* ── Büyük ekranlarda soru kartı max genişliği artırılabilir ── */
@media (min-width: 1024px) {
    #testEkrani .container {
        max-width: 720px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1280px) {
    #testEkrani .container {
        max-width: 760px;
    }
}

@media (min-width: 1440px) {
    #testEkrani .container {
        max-width: 800px;
    }
}

@media (min-width: 1920px) {
    #testEkrani .container {
        max-width: 860px;
    }
}


/* ── Ön izleme ekranı (test sayfası) ── */
@media (min-width: 1280px) {
    #onizlemeEkrani .onizleme-sorular {
        column-count: 2;
        column-gap: 16px;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (min-width: 1920px) {
    #onizlemeEkrani .onizleme-sorular { column-count: 3; max-width: 1400px; }
}

/* ── Detaylı sonuçlar ── */
@media (min-width: 1280px) {
    #detayEkrani .detayli-sonuclar-container { max-width: 960px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1440px) {
    #detayEkrani .detayli-sonuclar-container { max-width: 1100px; }
}
@media (min-width: 1920px) {
    #detayEkrani .detayli-sonuclar-container { max-width: 1300px; }
}