/* HC Galeri · İndirme Panosu hizalama + mobil dosya bilgisi */

:root {
    --hc-normal-content-max: var(--hc-layout-max-width, 1300px);
    --hc-normal-content-gutter: var(--hc-layout-gutter, clamp(14px, 2vw, 24px));
    --hc-normal-content-width:
        var(
            --hc-layout-width,
            min(
                var(--hc-normal-content-max),
                calc(100% - (var(--hc-normal-content-gutter) * 2))
            )
        );
}

/*
 * İndirme Panosu, html[data-width="full"] .site-shell kuralından etkilenip
 * header/footer çizgisinin dışına çıkmasın.
 */
.site-main .download-board-page > .site-shell {
    width: var(--hc-normal-content-width) !important;
    max-width: var(--hc-normal-content-max) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}

html[data-width="full"] .site-main .download-board-page > .site-shell {
    width: var(--hc-normal-content-width) !important;
    max-width: var(--hc-normal-content-max) !important;
}

/*
 * Mobilde Dosya Bilgileri yatay kaydırma çizgisi üretmesin.
 * Kart korunur; bilgi öğeleri uygun satır sayısına otomatik dağılır.
 */
@media (max-width: 700px) {
    .detail-file-strip {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 8px !important;
        min-width: 0 !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    .detail-file-strip h2,
    .detail-file-strip .detail-file-info-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
    }

    .detail-file-strip dl {
        display: grid !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        grid-template-columns:
            repeat(auto-fit, minmax(min(138px, 100%), 1fr)) !important;
        align-items: stretch !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        overscroll-behavior: auto !important;
        scrollbar-width: none !important;
    }

    .detail-file-strip dl::-webkit-scrollbar {
        display: none !important;
    }

    .detail-file-strip dl > div {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-content: center !important;
        align-items: baseline !important;
        gap: 2px 5px !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 5px 7px !important;
        border: 1px solid
            color-mix(in srgb, var(--border) 88%, transparent) !important;
        border-radius: 8px !important;
        background:
            color-mix(
                in srgb,
                var(--surface-2) 64%,
                var(--surface)
            ) !important;
        white-space: normal !important;
    }

    .detail-file-strip dt,
    .detail-file-strip dd {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.25 !important;
    }

    .detail-file-strip dt {
        font-size: 9px !important;
    }

    .detail-file-strip dd {
        font-size: 10px !important;
    }
}

@media (max-width: 430px) {
    .detail-file-strip {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        gap: 7px !important;
        padding: 8px !important;
    }

    .detail-file-strip h2,
    .detail-file-strip .detail-file-info-icon {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
    }

    .detail-file-strip .detail-file-info-icon .icon {
        width: 15px !important;
        height: 15px !important;
    }

    .detail-file-strip dl {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    .detail-file-strip dl > div {
        min-height: 30px !important;
        padding: 4px 6px !important;
    }
}