/**
 * Uygulama kabuğu: sidebar + ana içerik düzeni.
 * Sayfa gövdesi kaymaz; yalnızca ana içerik (.main) ve sidebar menüsü kayar.
 */
html:has(body.app-shell) {
    background-color: var(--gf-color-surface);
}

body.app-shell {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    max-width: 100vw;
    overflow: hidden;
    /* Gövde varsayılanı gri (--gf-color-bg); safe-area dolgusu bu renkte kalınca iPad’de alt şerit çizgisi gibi görünür. */
    background-color: var(--gf-color-surface);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px)
        env(safe-area-inset-left, 0px);
}

/* Ana içerik: tek dikey kaydırma alanı */
.main {
    position: relative;
    z-index: 0;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--gf-color-surface);
}

.main__inner {
    width: min(100%, var(--gf-container-max));
    margin-inline: auto;
    padding: var(--gf-gutter);
    min-width: 0;
}

@media (max-width: 768px) {
    body.app-shell {
        flex-direction: column;
        /* Sabit yükseklik: içerik .main içinde kayar */
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
    }

    .main {
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        overflow-y: auto;
    }
}