/* HC Galeri · Header / Content / Footer ortak hizalama */

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

/*
 * Normal sayfa akışındaki bütün ana kabuklar aynı genişlik ve kenar
 * boşluğunu kullanır. Tam ekran görsel katmanları bu seçicilere dahil değildir.
 */
.site-header > .site-shell,
.site-header .header-inner,
.site-footer > .site-shell,
.site-footer .footer-inner,
.site-main > .site-shell,
.site-main .site-shell,
.static-content-page,
.auth-unified-container,
body[data-admin-ui="1"] .admin-ui-page {
    width: var(--hc-layout-width) !important;
    max-width: var(--hc-layout-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Önceden calc(100% - 28px), calc(100% - 32px) gibi farklı değerler
 * kullanan özel sayfa kabuklarını ortak çizgiye sabitle.
 */
.static-content-page,
.auth-unified-container,
body[data-admin-ui="1"] .admin-ui-page {
    box-sizing: border-box;
}

/*
 * İçerik içinde ikinci kez kullanılan site-shell sınıfı, ana kabuğun içinde
 * tekrar daralmamalı.
 */
.site-main .site-shell .site-shell,
.site-main .page-section .site-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/*
 * Tam ekran görüntüleyici, modal, popup ve sabit overlay alanları ortak
 * içerik genişliğine zorlanmaz.
 */
:where(
    .fullscreen-viewer,
    .image-fullscreen,
    .fullscreen-overlay,
    .lightbox,
    .modal,
    .dialog-backdrop,
    .hc-auth-security-modal,
    [data-fullscreen-viewer],
    [data-image-fullscreen],
    [role="dialog"]
) {
    max-width: none;
}

/* Header ve footer iç elemanları aynı başlangıç/bitiş çizgisinde kalır. */
.header-inner,
.footer-inner {
    box-sizing: border-box;
}

/* Çok dar ekranlarda minimum kullanılabilir kenar boşluğu. */
@media (max-width: 560px) {
    :root {
        --hc-layout-gutter: 8px;
    }
}