/* ============================================================================
 * Moxa Panel — Site Chrome (Header / Footer wrapper)
 *
 * Builder içindeki "Header tasarımı" / "Footer tasarımı" panelinden gelen
 * ayarları DOM'a uygular. PHP tarafı:
 *
 *   <header class="site-header site-header--custom site-chrome
 *                  site-chrome--header is-sticky has-solid-on-scroll …"
 *           data-chrome-threshold="40"
 *           style="--chrome-bg:#fff;--chrome-bg-scrolled:#fff;…">
 *
 * JS (site-chrome.js) scroll konumuna göre .is-scrolled ve .is-hidden ekler.
 * ========================================================================== */

.site-chrome {
    background: var(--chrome-bg, #ffffff);
    color: var(--chrome-text, inherit);
    transition: background-color var(--chrome-motion-duration, 350ms) var(--chrome-motion-easing, ease-out),
                color var(--chrome-motion-duration, 350ms) var(--chrome-motion-easing, ease-out),
                box-shadow var(--chrome-motion-duration, 350ms) var(--chrome-motion-easing, ease-out),
                transform var(--chrome-motion-duration, 350ms) cubic-bezier(.22,.61,.36,1),
                padding .25s ease,
                backdrop-filter var(--chrome-motion-duration, 350ms) ease,
                min-height var(--chrome-motion-duration, 350ms) var(--chrome-motion-easing, ease-out);
    will-change: transform, background-color;
    position: relative;
    z-index: var(--chrome-z, 50);
}

.site-chrome--header { width: 100%; }
.site-chrome--footer { width: 100%; }

/* Positioning behaviors */
.site-chrome.is-sticky {
    position: sticky;
    top: 0;
}
.site-chrome.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.site-chrome.is-absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.site-chrome--footer.is-sticky-bottom {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Sayfa scroll ilerleme çubuğu (header üstü) */
.site-chrome__scroll-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--chrome-progress-h, 3px);
    width: 0;
    max-width: 100%;
    background: var(--chrome-progress-color, var(--color-secondary, #c9a227));
    z-index: calc(var(--chrome-z, 50) + 1);
    pointer-events: none;
    transition: width 0.12s linear;
}
.site-chrome.has-scroll-progress .site-chrome__inner {
    position: relative;
}

/* Inner wrapper — max width + padding + (optional) height anchor */
.site-chrome__inner {
    width: 100%;
    max-width: var(--chrome-max-w, 1400px);
    margin-inline: auto;
    padding-inline: var(--chrome-pad-x, 24px);
    transition: min-height .25s ease, padding .25s ease;
}
.site-chrome--header .site-chrome__inner {
    min-height: 0;
}
/* Tek satırlı klasik header — chrome tasarım panelindeki yükseklik önerisi */
.site-chrome--header.site-chrome--single-row .site-chrome__inner {
    min-height: var(--chrome-h, 80px);
}
/* Chrome içindeki layout satırları — gereksiz py-16 / beyaz boşlukları önle */
.site-chrome .layout-row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.site-chrome--header .pb-canvas-zone {
    overflow: hidden;
}
.site-chrome .pb-canvas-placeholder {
    display: none !important;
}
/* Header / footer içindeki modüllerin geniş .module padding'i (py-16 vb.)
   chrome wrapper'a uymaz; chrome modülleri için varsayılan padding'i sıfırlıyoruz.
   Kullanıcı tek tek modülde tasarım panelinden ayarlayabilir. */
.site-chrome .module {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.site-chrome--header .module {
    padding-block: 8px !important;
}
.site-chrome--footer .module {
    padding-block: 12px !important;
}

/* Borders */
.site-chrome.has-border-bottom {
    border-bottom: 1px solid var(--chrome-border, rgba(15,23,42,0.08));
}
.site-chrome.has-border-top {
    border-top: 1px solid var(--chrome-border, rgba(15,23,42,0.08));
}

/* Shadow scale */
.site-chrome.has-shadow-soft { box-shadow: 0 4px 14px -8px rgba(15,23,42,.18); }
.site-chrome.has-shadow-medium { box-shadow: 0 10px 24px -12px rgba(15,23,42,.25); }
.site-chrome.has-shadow-strong { box-shadow: 0 18px 38px -14px rgba(15,23,42,.35); }

/* Transparent at top of the page */
.site-chrome--header.has-transparent-top:not(.is-scrolled) {
    background: transparent !important;
    box-shadow: none;
    border-color: transparent;
}

/* Scrolled state — swap colors / shadow */
.site-chrome--header.has-solid-on-scroll.is-scrolled,
.site-chrome--footer.has-solid-on-scroll.is-scrolled {
    background: var(--chrome-bg-scrolled, var(--chrome-bg, #ffffff));
    color: var(--chrome-text-scrolled, var(--chrome-text, inherit));
}

.site-chrome.is-scrolled[data-shadow-scrolled="soft"]   { box-shadow: 0 4px 14px -8px rgba(15,23,42,.18); }
.site-chrome.is-scrolled[data-shadow-scrolled="medium"] { box-shadow: 0 10px 24px -12px rgba(15,23,42,.25); }
.site-chrome.is-scrolled[data-shadow-scrolled="strong"] { box-shadow: 0 18px 38px -14px rgba(15,23,42,.35); }
.site-chrome.is-scrolled[data-shadow-scrolled="none"]   { box-shadow: none; }

/* Shrink-on-scroll: reduce inner min-height */
.site-chrome--header.has-shrink-on-scroll.is-scrolled .site-chrome__inner {
    min-height: var(--chrome-h-scrolled, 64px);
}

/* Hide on scroll down */
.site-chrome--header.has-hide-on-down.is-hidden {
    transform: translateY(-100%);
}

/* Glass effect (overlay backwards compat with pb-chrome-glass.css) */
.site-chrome.is-glass {
    -webkit-backdrop-filter: blur(var(--chrome-blur, 14px)) saturate(var(--chrome-saturate, 150%));
    backdrop-filter: blur(var(--chrome-blur, 14px)) saturate(var(--chrome-saturate, 150%));
    background: color-mix(in oklab, var(--chrome-bg, #ffffff) calc(var(--chrome-backdrop-opacity, 1) * 60%), transparent);
}
.site-chrome.is-glass.is-scrolled {
    background: color-mix(in oklab, var(--chrome-bg-scrolled, var(--chrome-bg, #ffffff)) calc(var(--chrome-backdrop-opacity, 1) * 85%), transparent);
}

/* Giriş animasyonları (Wix / Webflow) */
.site-chrome.has-entrance-fade.is-chrome-entering {
    opacity: 0;
}
.site-chrome.has-entrance-fade.is-chrome-entered {
    opacity: 1;
    transition: opacity var(--chrome-motion-duration, 500ms) var(--chrome-motion-easing, ease-out);
}
.site-chrome.has-entrance-slide-down.is-chrome-entering {
    opacity: 0;
    transform: translateY(-16px);
}
.site-chrome.has-entrance-slide-down.is-chrome-entered {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--chrome-motion-duration, 500ms) var(--chrome-motion-easing, ease-out),
                transform var(--chrome-motion-duration, 500ms) var(--chrome-motion-easing, ease-out);
}

/* Logo scroll küçültme */
.site-chrome.has-logo-shrink-on-scroll.is-scrolled .module-site_logo img,
.site-chrome.has-logo-shrink-on-scroll.is-scrolled .pb-canvas-module-embed .module-site_logo img {
    transform: scale(var(--chrome-logo-scale, 0.82));
    transform-origin: left center;
    transition: transform var(--chrome-motion-duration, 280ms) var(--chrome-motion-easing, ease-out);
}

/* When using fixed/sticky position, content below should not jump.
   We rely on natural sticky reservation when behavior=sticky. For 'fixed',
   we leave a CSS-only spacer via padding on body. JS adds .has-fixed-chrome
   to <body> with computed height variable. */
body.has-fixed-chrome { padding-top: var(--chrome-spacer, 0px); }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .site-chrome { transition: background-color .15s linear, color .15s linear; }
    .site-chrome--header.has-hide-on-down.is-hidden { transform: none; opacity: 0; pointer-events: none; }
}

/* Builder içinde — sticky / fixed devre dışı, görsel parça olarak göster */
body.pb-body .site-chrome.is-sticky,
body.pb-body .site-chrome.is-fixed,
body.pb-body .site-chrome.is-absolute {
    position: relative;
}
body.pb-body .site-chrome.has-hide-on-down.is-hidden { transform: none; }

/* Chrome modül stilleri */
.site-menu-mod .site-nav-link,
.site-menu-mod .nav-dropdown-btn {
    color: var(--site-menu-color, var(--chrome-text, inherit));
}
.site-menu-mod .site-nav-link:hover,
.site-menu-mod .nav-dropdown-btn:hover {
    color: var(--site-menu-hover, var(--color-secondary, currentColor));
}
.site-menu-mod .site-nav-link.is-current,
.site-menu-mod .nav-dropdown-btn.is-current {
    color: var(--site-menu-active, var(--site-menu-hover, var(--color-secondary, currentColor)));
}
.site-logo-mod--stacked .site-logo-text-stack__name {
    letter-spacing: 0.04em;
}
.site-logo-mod--stacked .site-logo-text-stack__tagline {
    margin-top: 2px;
}
.site-chrome-mobile-menu a {
    color: inherit;
}
.site-chrome-mobile-menu a:hover {
    opacity: 0.85;
}
[data-lang-switcher="dropdown"] .lang-menu:not(.hidden) {
    display: block;
}
[data-lang-switcher="dropdown"] .lang-current {
    color: inherit;
}
.site-logo-mod,
.site-menu-mod,
.search-mod,
.contact-strip,
.copyright-line {
    color: inherit;
}
.site-chrome .module-site_logo,
.site-chrome .module-site_menu,
.site-chrome .module-language_switcher,
.site-chrome .module-contact_strip,
.site-chrome .module-social_icons,
.site-chrome .module-search_box,
.site-chrome .module-mobile_menu_toggle,
.site-chrome .module-copyright_line {
    background-color: transparent !important;
}

/* Duyuru şeridi kapanış animasyonu */
.pb-announce--closing {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

/* Builder: chrome responsive breakpoint önizleme genişliği */
.pb-canvas-device.pb-chrome-preview--mobile {
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
}
.pb-canvas-device.pb-chrome-preview--tablet {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

/* Builder: chrome scrolled / progress önizleme */
.pb-canvas-device.site-chrome .site-chrome__scroll-progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.pb-chrome-preview-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}