/*
 * Oyunmarkt site shell — only what the demo's inline styles cannot express: stickiness of the
 * template part, dark-mode icon state before scripts run, breakpoints for the mobile header and
 * menu (the demo overflows at 390px), and the cookie banner in the demo's popover language.
 * Header/footer markup carries the demo's inline styles (views/shell/*); demo.css supplies .hbtn,
 * .nvq, .sres, .mitem, .tip, .hide-sm, .nl/.mb and the keyframes.
 */

/* Header stickiness: the template-part wrapper sticks; the announcement bar (40px + 1px border)
   scrolls away and the dark header stays pinned, as in the demo. */
.vgnw-site-header { position: relative; z-index: 50; }
.wp-block-template-part:has(> .vgnw-site-header),
.vgnw-site-header:not(.wp-block-template-part > *) { position: sticky; top: -41px; z-index: 50; }
html[data-om-announce="closed"] :is(.wp-block-template-part:has(> .vgnw-site-header), .vgnw-site-header:not(.wp-block-template-part > *)) { top: 0; }
html[data-om-announce="closed"] [data-om-announce] { display: none; }
.om-shell-header a:hover, .om-shell-header button:hover { text-decoration: none; }
/* Overlays keep the demo's inline display; the hidden attribute must still win. */
[data-om-auth][hidden], [data-om-dim][hidden], [data-om-mobile-sub][hidden], [data-om-search-results][hidden], [data-om-search-idle][hidden] { display: none !important; }

/* Between 761px and ~930px the demo overflows (its search box will not shrink below 329px) and wraps
   "Giriş yap" onto two lines: let the search shrink and keep the header labels on one line. */
.om-shell-bar > [data-om-search] { min-width: 0; }
.om-shell-header [data-om-account-toggle], .om-shell-header [data-om-cart-open] { white-space: nowrap; }

/* Theme toggle: the saved dark choice shows the sun before shell scripts run (inline styles hold the light state). */
html.theme-dark [data-om-theme-toggle] .om-sun { opacity: 1 !important; transform: rotate(0deg) scale(1) !important; }
html.theme-dark [data-om-theme-toggle] .om-moon { opacity: 0 !important; transform: rotate(90deg) scale(0.5) !important; }

/* Mega menus only exist with the desktop navigation row; the mobile menu only below it. */
@media (max-width: 1000px) { .om-shell-mega { display: none !important; } }
@media (min-width: 1001px) { .om-shell-mobile { display: none !important; } }
@media (min-width: 761px) { .om-shell-mobile-search { display: none; } }
.om-shell-mobile-scroll { max-height: calc(100dvh - 72px); }
html.om-mobile-open { overflow: hidden; }
.om-shell-mobile [data-om-mobile-expand][aria-expanded="true"] { color: #FFFFFF !important; }

/* At 390px the demo's header is 544px wide. Keep the logo, the Sepet button and the menu button;
   the theme toggle, account and staff controls move into the mobile menu. */
@media (max-width: 480px) {
    .om-shell-theme, .om-shell-account, .om-shell-staff { display: none !important; }
}
/* Below the search breakpoint the account popup aligns to the header edge instead of overflowing. */
@media (max-width: 760px) {
    .om-shell-account { position: static !important; }
    .om-shell-account [data-om-account-popup] { right: clamp(16px, 4vw, 40px) !important; top: calc(100% - 4px) !important; max-width: calc(100vw - 32px); }
}

/* Search results: keyboard selection uses the same tint as hover. */
[data-om-search] mark { color: #FFFFFF; }
[data-om-search-option][aria-selected="true"] { background: rgba(255, 255, 255, 0.06); }

/* Footer socials: below 1440px the last tooltip (centred in the demo) would push the page wider
   than the viewport; align it to the icon's right edge instead. */
@media (max-width: 1439px) {
    .ft .tip:last-child::after { left: auto; right: 0; transform: translate(0, 4px); }
    .ft .tip:last-child:is(:hover, :focus-visible)::after { transform: translate(0, 0); }
}

/* Footer: the marketing plugin appends "Çerez tercihleri" to the legal row; match the other links. */
.ft .om-footer-bottom .om-privacy-trigger { padding: 0; border: 0; background: none; color: #A3A3A3; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.ft .om-footer-bottom .om-privacy-trigger::before { content: "|"; margin-right: 12px; color: #3A3A3E; }
.ft .om-footer-bottom .om-privacy-trigger:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

/* Cookie consent (marketing plugin): sharp, minimal, in the demo's dark popover language
   (account popup surface, 46px white primary action, ringed secondary action). */
body .om-consent {
    left: 24px; bottom: 24px; width: min(420px, calc(100vw - 48px)); padding: 20px;
    border: 0; border-radius: 0; background: #151517; color: #F2F2F2;
    box-shadow: inset 0 0 0 1px #26262A, 0 30px 60px -20px rgba(0, 0, 0, .85);
    font-family: inherit; font-size: 13px; line-height: 1.5; letter-spacing: -.005em;
    animation: omIn .3s ease;
}
body .om-consent h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: normal; color: #FFFFFF; }
body .om-consent p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #A1A1A6; }
body .om-consent a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
body .om-consent .om-consent-status { color: #8E8E93; font-size: 12px; }
body .om-consent .om-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body .om-consent .om-consent-actions button {
    min-height: 46px; padding: 0 16px; border: 0; border-radius: 0; background: transparent; color: #F2F2F2;
    box-shadow: inset 0 0 0 1px #2A2A2E; font: inherit; font-size: 15px; font-weight: 600; transition: background .2s ease, transform .15s ease;
}
body .om-consent .om-consent-actions button:hover { background: rgba(255, 255, 255, .08); }
body .om-consent .om-consent-actions [data-om-consent="granted"] { background: #FFFFFF; color: #0B0B0C; box-shadow: none; }
body .om-consent .om-consent-actions [data-om-consent="granted"]:hover { background: #FFFFFF; }
body .om-consent .om-consent-actions button:active { transform: scale(.97); }
body .om-consent .om-consent-actions button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
@media (max-width: 600px) { body .om-consent { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 18px; } }