/*
 * Q-83: reserved space for the three chrome elements that used to move after first paint
 * (loaded only with Seo:LayoutReserve, media="screen"). Rule: nothing here animates a layout property.
 * Every state keeps one geometry; movement is done with transform / opacity only (not counted as layout shift).
 * Selectors start with "html body" so they win over the inline <style> blocks of the header / cookie components,
 * which are emitted later in the document than this stylesheet.
 */

/* ---- Font fallback (contact strip, cookie banner) ------------------------------------------------------------
 * The web font (Poppins, display=swap) replaces the fallback after first paint and the text changed width / line box.
 * The fallback face below is the same metric-matched Arial face LocalPoppins defines behind Seo:LeanAssets
 * (size-adjust = mean advance Poppins 400 / Arial 400; overrides = metric / size-adjust), applied only to these two
 * short single-line chrome elements. The header menu is NOT given the adjusted face (measured: its items wrapped to a
 * second row in the fallback state and jumped back, a larger shift); it reserves item widths instead, see below.
 * Icon fonts keep their own font-family rules. */
@font-face {
    font-family: "Poppins Fallback";
    src: local("Arial"), local("Helvetica"), local("Liberation Sans");
    size-adjust: 111.5%;
    ascent-override: 94.2%;
    descent-override: 31.4%;
    line-gap-override: 9%;
}

html body .top-bar,
html body .cookie-banner {
    font-family: "Poppins", "Poppins Fallback", sans-serif;
}

/* Header: vertical metrics only (size-adjust stays 100%, so the item widths are the plain Arial widths the menu
 * reservation below was measured against). Ascent / descent / line-gap are Poppins' own (1050 / 350 / 100 per 1000),
 * which makes the text box the same height and position in the fallback and the web-font state. */
@font-face {
    font-family: "Poppins Metrics";
    src: local("Arial"), local("Helvetica"), local("Liberation Sans");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

html body header.site-header,
html body header.site-header .main-menu a,
html body header.site-header .button {
    font-family: "Poppins", "Poppins Metrics", sans-serif;
}

/* ---- Sticky header (#header.site-header) ---------------------------------------------------------------------
 * Before: top 60px/44px -> 0 and padding 25/18 -> 5/5 (+ .inner padding 12px) on scroll, "transition: all".
 * Now: top is always 0, the resting offset is a transform, padding is the same in both states. The scrolled bar is
 * therefore 112 px tall instead of 103 px (reserved height); only background / shadow / transform change. */
html body header.site-header {
    --lr-top: 60px;
    top: 0;
    padding-top: 25px;
    padding-bottom: 18px;
    transform: translate3d(0, var(--lr-top), 0);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
}

html body header.site-header.scrolled {
    top: 0;
    padding-top: 25px;
    padding-bottom: 18px;
    transform: translate3d(0, 0, 0);
}

html body header.site-header.scrolled .inner {
    padding: 0;
}

html body header.site-header .inner {
    transition: none;
}

@media (max-width: 768px) {
    html body header.site-header {
        --lr-top: 44px;
    }

    html body header.site-header.scrolled {
        --lr-top: 0px;
    }

    /* the log-in button changes width when the web font replaces the fallback: reserve the final width */
    html body .site-header .header-right .buttons .button {
        min-width: 6.8em;
        text-align: left;
        justify-content: flex-start;
    }
}

/* Desktop menu (>= 1100px; below that the row is allowed to wrap as before, and <= 992px it is the drawer): the web-font swap changed item widths (and the line box of the inline-block row), which moved
 * the whole centred row. The row becomes a one-line flex row (no strut, no wrapping, 4px gap = the old inline-block
 * space) and each item keeps at least the width of the larger of the two font states (measured at 16 px: text width of
 * Anasayfa, Ilanlar, Hazir Website, Ozellikler+arrow, Fiyatlar, S.S.S, Blog+arrow, Iletisim). Text is left-aligned in
 * the reserved box and the arrow sits at its right end, so the swap moves nothing. Lower bounds only: a longer label
 * still grows its item. */
@media (min-width: 1100px) {
    html body header.site-header .main-menu > ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        column-gap: 4px;
    }

    html body header.site-header .main-menu > ul > li > a {
        box-sizing: content-box;
        text-align: left;
    }

    html body header.site-header .main-menu > ul > li.has-sub-menu > a {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    html body header.site-header .main-menu > ul > li:nth-child(1) > a { min-width: 4.9em; }
    html body header.site-header .main-menu > ul > li:nth-child(2) > a { min-width: 3.2em; }
    html body header.site-header .main-menu > ul > li:nth-child(3) > a { min-width: 6.9em; }
    html body header.site-header .main-menu > ul > li:nth-child(4) > a { min-width: 5.8em; }
    html body header.site-header .main-menu > ul > li:nth-child(5) > a { min-width: 3.8em; }
    html body header.site-header .main-menu > ul > li:nth-child(6) > a { min-width: 2.6em; }
    html body header.site-header .main-menu > ul > li:nth-child(7) > a { min-width: 3.5em; }
    html body header.site-header .main-menu > ul > li:nth-child(8) > a { min-width: 3.7em; }
}

/* Register / log-in buttons on desktop: final widths of the web-font state (74.3 px and 70.3 px measured). */
@media (min-width: 769px) {
    html body .site-header .header-right .customer .button {
        min-width: 75px;
        text-align: left;
        justify-content: flex-start;
    }

    html body .site-header .header-right .buttons .button {
        min-width: 71px;
        text-align: left;
        justify-content: flex-start;
    }
}

/* ---- Contact strip (.top-bar) --------------------------------------------------------------------------------
 * Fixed + hidden with transform/opacity already; what moved was the second item when the web font swapped in.
 * Reserve the widths of the phone and the e-mail item in em (scales with the strip's font size). */
html body .top-bar .top-bar-left > .top-bar-phone:first-child {
    min-width: 9.6em;
}

html body .top-bar .top-bar-left > .top-bar-phone:last-child {
    min-width: 11.8em;
}

/* ---- Cookie banner (.cookie-banner) --------------------------------------------------------------------------
 * Already fixed and shown with transform. The component's <style> sits after the footer, so the same box model is
 * stated here (the head stylesheet applies before the body is parsed) and the banner is isolated from the flow. */
html body .cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    contain: layout style;
}

/* ---- Sticky price table head (/fiyatlar) ---------------------------------------------------------------------
 * Before: stuck state collapsed the "Hemen Baslayin" button (max-height, padding, margin) so the table body slid up
 * under the cursor on every scroll. Now the button keeps its box and only fades; the head keeps the unstuck height. */
html body .ozellik-inline-table.thead-stuck thead .price-buy {
    max-height: 60px;
    opacity: 0;
    pointer-events: none;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    padding: 10px 51px !important;
}

html body .ozellik-inline-table.thead-stuck thead .price-info {
    padding-top: 5px !important;
    padding-bottom: 15px !important;
}

html body .ozellik-inline-table.thead-stuck thead .compare-heading {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
}

html body .ozellik-inline-table.thead-stuck thead .price-now {
    margin: 0 !important;
}

@media (max-width: 639px) {
    html body .ozellik-inline-table.thead-stuck thead .price-buy {
        margin-top: 10px !important;
        padding: 5px 10px !important;
    }

    html body .ozellik-inline-table.thead-stuck thead .compare-heading {
        padding-bottom: 10px !important;
    }
}