/* ===================================================================== cookie-legal.css — SELF-CONTAINED çerez bar styling for the legal pages (kvkk / gizlilik / cerez / medya-optimizasyon-yasal, TR + EN). Those pages ship their own minimal design system (src/legal.css) and deliberately do NOT load tokens.css / base.css / overlay.css — loading base.css there would restyle //. So this file is fully isolated: every rule is scoped under .cookie and every value is a local custom property, so it cannot touch anything else on the page. Values mirror the brand tokens in src/css/tokens.css + the .cookie/.btn rules in src/css/overlay.css + src/css/base.css — keep in sync if those move. ===================================================================== */ .cookie { /* local mirror of the brand tokens the bar needs (scoped, non-leaking) */ --_ink: #f4f6fb; --_muted: #b7becc; --_line: rgba(183, 190, 204, 0.14); --_action: #6c3cf0; --_action-contrast: #ffffff; --_cyan: #00d4ff; --_glass: rgba(13, 15, 26, 0.62); --_font: "DM Sans", system-ui, sans-serif; --_xs: 0.5rem; --_sm: 0.75rem; --_md: 1.25rem; --_lg: 2rem; --_ease: cubic-bezier(0.22, 1, 0.36, 1); position: fixed; left: var(--_md); right: var(--_md); bottom: var(--_md); z-index: 150; margin-inline: auto; max-width: 60ch; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--_sm) var(--_md); padding: var(--_md) var(--_lg); font-family: var(--_font); font-size: 0.9rem; line-height: 1.6; color: var(--_muted); background: var(--_glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--_line); border-radius: 22px; } .cookie[hidden] { display: none; } .cookie p { margin: 0; } .cookie a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } .cookie a:hover { color: var(--_ink); } .cookie__actions { display: flex; gap: var(--_xs); } .cookie .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--_xs) var(--_md); border-radius: 999px; border: 0; cursor: pointer; font-family: var(--_font); font-weight: 600; font-size: 0.9rem; line-height: 1; transition: transform 0.2s var(--_ease), box-shadow 0.2s, background 0.2s; } .cookie .btn--primary { background: var(--_action); color: var(--_action-contrast); } .cookie .btn--primary:hover { box-shadow: 0 8px 32px -8px rgba(108, 60, 240, 0.65); } .cookie .btn--ghost { background: transparent; border: 1px solid var(--_line); color: var(--_ink); } .cookie .btn--ghost:hover { border-color: #8e97a8; } .cookie .btn:hover { transform: translateY(-2px); } .cookie .btn:focus-visible { outline: 2px solid var(--_cyan); outline-offset: 2px; }