/**
 * assets/farm.css
 * Quiz Bankası — Layout + Tarla stilleri
 * Inline style'lar primary, buradakiler fallback + animasyon
 */

/* ============================================================
   LAYOUT — inline style'ları destekler
   ============================================================ */
.qb-layout {
    display: flex !important;
    gap: 28px;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.qb-layout-farm {
    flex: 0 0 78% !important;
    min-width: 0;
    max-width: 78%;
    box-sizing: border-box;
}

/* Farm grid — SVG konteyner genişliğini tam doldursun */
#qb-farm-grid {
    width: 100% !important;
    min-height: 420px;
    display: block !important;
    overflow-x: auto;          /* SVG taşarsa yatay scroll */
    overflow-y: visible;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/* SVG: JS explicit piksel atar; CSS max-width kısıtlamasını kaldırır */
#qb-farm-grid svg {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
}

.qb-layout-quiz {
    flex: 1 1 0% !important;
    min-width: 280px;
    box-sizing: border-box;
}

/* ============================================================
   HÜCRE ANİMASYONU
   ============================================================ */
@keyframes qbf-pulse {
    0%   { filter: brightness(1.7) drop-shadow(0 0 6px #FFD700); }
    50%  { filter: brightness(2.4) drop-shadow(0 0 14px #FFD700); }
    100% { filter: brightness(1); }
}

.qbf-cell-pulse {
    animation: qbf-pulse 0.65s ease-out forwards;
}

/* ============================================================
   BİLDİRİM
   ============================================================ */
.qb-farm-notice {
    margin-top: 10px;
    padding: 9px 14px;
    background: rgba(232,245,233,.95);
    border-left: 3px solid #2E7D32;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    color: #1b5e20;
    transition: opacity 0.5s ease;
}

/* ============================================================
   TAMAMLANDI
   ============================================================ */
.qb-farm-complete {
    margin-top: 12px;
    padding: 14px;
    background: #fffde7;
    border-left: 3px solid #f9a825;
    border-radius: 0 6px 6px 0;
    font-size: 15px;
    font-weight: 900;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

/* ============================================================
   MOBİL
   ============================================================ */
@media (max-width: 720px) {
    .qb-layout,
    .qb-layout[style] {
        flex-direction: column !important;
    }
    .qb-layout-farm,
    .qb-layout-farm[style] {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .qb-layout-quiz,
    .qb-layout-quiz[style] {
        min-width: 0 !important;
        width: 100% !important;
    }
}