/*
 * Global site shell: header (service bar, search, account, cart, category navigation), mobile drawer,
 * footer. Markup lives in Views/Shared/_SiteHeader.cshtml / _SiteFooter.cshtml.
 * The header always wears the light store theme (.lc-theme-store), also above the dark configurator pages.
 */

/* Real height of the sticky header per breakpoint; sticky page parts sit below it. */
:root { --lc-header-h: 7.25rem; }
@media (min-width: 1024px) { :root { --lc-header-h: 8.5rem; } }

/* ---------- Brand ---------- */
.lc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--lc-text);
  text-decoration: none;
  font-weight: var(--lc-weight-semibold);
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.lc-brand:hover { color: var(--lc-text); text-decoration: none; }

.lc-brand__mark {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.lc-brand__mark rect { fill: currentColor; }
.lc-brand__mark .lc-brand__pixel--signal { fill: var(--lc-signal-500); }

/* ---------- Header ---------- */
.lc-header {
  position: sticky;
  top: 0;
  z-index: var(--lc-z-header);
  background: var(--lc-surface);
  color: var(--lc-text);
  border-bottom: 1px solid var(--lc-store-line, var(--lc-border));
  transition:
    box-shadow var(--lc-dur) var(--lc-ease),
    transform var(--lc-dur-slow) var(--lc-ease-out);
}

/* Tucks away while the visitor scrolls down to read; returns on the first upward scroll. */
.lc-header.is-tucked { transform: translate3d(0, -100%, 0); }
.lc-header.is-scrolled { box-shadow: 0 6px 24px -18px rgba(14, 16, 19, 0.35); }

/* Service bar: three facts the business stands behind, plus the secondary links. Desktop only. */
.lc-topbar {
  display: none;
  background: var(--lc-graphite-950);
  color: var(--lc-text-muted);
  font-size: var(--lc-text-xs);
}

@media (min-width: 1024px) { .lc-topbar { display: block; } }

.lc-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-space-6);
  height: 2rem;
}

.lc-topbar ul { display: flex; align-items: center; gap: var(--lc-space-6); margin: 0; padding: 0; list-style: none; }
.lc-topbar__facts li { display: inline-flex; align-items: center; gap: var(--lc-space-2); white-space: nowrap; }
.lc-topbar__facts .lc-icon { color: var(--lc-signal-400); width: 0.9rem; height: 0.9rem; }
.lc-topbar a { color: var(--lc-text-muted); text-decoration: none; white-space: nowrap; }
.lc-topbar a:hover,
.lc-topbar a[aria-current="page"] { color: var(--lc-text); text-decoration: none; }
.lc-topbar__links { gap: var(--lc-space-5) !important; }
.lc-topbar__lang { font-weight: var(--lc-weight-medium); }

@media (max-width: 1199px) {
  .lc-topbar__facts li:nth-child(3) { display: none; }
}

/* Main row: menu (phones) · brand · search · account · cart */
.lc-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "menu brand actions"
    "search search search";
  align-items: center;
  column-gap: var(--lc-space-2);
  padding-block: var(--lc-space-2) var(--lc-space-3);
}

.lc-menu-toggle { grid-area: menu; margin-left: -0.5rem; }
.lc-header__inner > .lc-brand { grid-area: brand; }
.lc-header__actions { grid-area: actions; }
.lc-header__search { grid-area: search; margin-top: var(--lc-space-2); }

@media (min-width: 1024px) {
  .lc-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand search actions";
    column-gap: clamp(1.5rem, 3vw, 3rem);
    height: 4rem;
    padding-block: 0;
  }

  .lc-header__inner .lc-menu-toggle { display: none; }
  .lc-header__search { margin-top: 0; max-width: 40rem; width: 100%; justify-self: center; }
}

.lc-header__icon-btn,
.lc-header__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-space-2);
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: var(--lc-space-2);
  border: 0;
  border-radius: var(--lc-radius-sm);
  background: transparent;
  color: var(--lc-text);
  font-size: var(--lc-text-sm);
  font-weight: var(--lc-weight-semibold);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--lc-dur-fast) var(--lc-ease), background-color var(--lc-dur-fast) var(--lc-ease), border-color var(--lc-dur-fast) var(--lc-ease);
}

.lc-header__icon-btn:hover,
.lc-header__icon-btn[aria-expanded="true"],
.lc-header__action:hover {
  color: var(--lc-text);
  background: var(--lc-surface-hover);
  text-decoration: none;
}

.lc-header__actions {
  display: flex;
  align-items: center;
  gap: var(--lc-space-1);
  justify-self: end;
}

.lc-header__action-label { display: none; }

/* The cart is the main commerce action of the header: an outlined button with its label from tablets up. */
.lc-cart-link { border: 1px solid transparent; }

@media (min-width: 640px) {
  .lc-cart-link {
    padding-inline: var(--lc-space-4);
    background: var(--lc-btn-solid-bg);
    border-color: var(--lc-btn-solid-bg);
    color: var(--lc-btn-solid-fg);
  }
  .lc-cart-link .lc-header__action-label { display: inline; }
  .lc-cart-link:hover,
  .lc-cart-link[aria-current="page"] { background: var(--lc-graphite-700); border-color: var(--lc-graphite-700); color: var(--lc-btn-solid-fg); }
}

@media (min-width: 1200px) {
  .lc-header__account .lc-header__action-label { display: inline; }
  .lc-header__account { padding-inline: var(--lc-space-3); }
}

/* Header search */
.lc-header__search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.lc-header__search-input {
  width: 100%;
  min-width: 0;
  height: 2.75rem;
  padding: 0 3rem 0 var(--lc-space-4);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background: var(--lc-store-media, var(--lc-surface-sunken));
  color: var(--lc-text);
  font-size: var(--lc-text-base);
  transition: border-color var(--lc-dur-fast) var(--lc-ease), background-color var(--lc-dur-fast) var(--lc-ease), box-shadow var(--lc-dur-fast) var(--lc-ease);
}

.lc-header__search-input::placeholder { color: var(--lc-text-subtle); }
.lc-header__search-input:hover { border-color: var(--lc-border-strong); }
.lc-header__search-input:focus-visible {
  outline: none;
  border-color: var(--lc-text);
  background: var(--lc-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc-signal-500) 22%, transparent);
}

.lc-header__search-input::-webkit-search-cancel-button { cursor: pointer; }

.lc-header__search-btn {
  position: absolute;
  right: 0.25rem;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--lc-radius-sm);
  background: var(--lc-btn-solid-bg);
  color: var(--lc-btn-solid-fg);
  cursor: pointer;
}

.lc-header__search-btn:hover { opacity: 0.88; }
.lc-header__search-btn .lc-icon { width: 1.1rem; height: 1.1rem; }

/* Category navigation (desktop) */
.lc-nav { display: none; border-top: 1px solid var(--lc-store-line, var(--lc-border)); }

@media (min-width: 1024px) {
  .lc-nav { display: block; }
}

.lc-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-space-4);
  height: 2.5rem;
}

.lc-nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 0 calc(-1 * var(--lc-space-3));
  padding: 0;
  list-style: none;
  min-width: 0;
}

.lc-nav__divider {
  width: 1px;
  height: 1rem;
  margin-inline: var(--lc-space-2);
  background: var(--lc-border-strong);
}

.lc-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 var(--lc-space-3);
  color: var(--lc-text-muted);
  font-size: var(--lc-text-sm);
  font-weight: var(--lc-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--lc-dur-fast) var(--lc-ease);
}

.lc-nav__link:hover { color: var(--lc-text); text-decoration: none; }
.lc-nav__link[aria-current="page"] { color: var(--lc-text); font-weight: var(--lc-weight-semibold); }

.lc-nav__link::after {
  content: "";
  position: absolute;
  left: var(--lc-space-3);
  right: var(--lc-space-3);
  bottom: -1px;
  height: 2px;
  background: var(--lc-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--lc-dur) var(--lc-ease-out);
}

.lc-nav__link:hover::after { transform: scaleX(0.4); }
.lc-nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--lc-accent); }

.lc-header__cta { flex: none; }
.lc-header__cta .lc-icon { width: 1rem; height: 1rem; }

/* Narrow desktops: the less frequent families wait in "Tüm ürünler". */
@media (min-width: 1024px) and (max-width: 1279px) {
  .lc-nav__list [data-nav="oynaticilar"],
  .lc-nav__list [data-nav="alici-kartlar"] { display: none; }
  .lc-nav__link { padding-inline: 0.6rem; }
  .lc-nav__link::after { left: 0.6rem; right: 0.6rem; }
}

.lc-menu-toggle .lc-icon--close { display: none; }
.lc-menu-toggle[aria-expanded="true"] .lc-icon--menu { display: none; }
.lc-menu-toggle[aria-expanded="true"] .lc-icon--close { display: block; }

@media (max-width: 359px) {
  .lc-brand { font-size: 1rem; gap: 0.45rem; }
  .lc-header__account { display: none; }
}

/* ---------- Mobile drawer ---------- */
.lc-drawer {
  border-top: 1px solid var(--lc-border);
  max-height: calc(100dvh - var(--lc-header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--lc-surface);
}

.js .lc-drawer[hidden] { display: none; }

.lc-drawer:not([hidden]) .lc-drawer__inner > * {
  animation: lc-rise var(--lc-dur-slow) var(--lc-ease-out) both;
}

.lc-drawer:not([hidden]) .lc-drawer__inner > :nth-child(2) { animation-delay: 60ms; }
.lc-drawer:not([hidden]) .lc-drawer__inner > :nth-child(3) { animation-delay: 120ms; }

/* Without JS the drawer renders as a static menu below the header */
html:not(.js) .lc-drawer[hidden] { display: block !important; } /* wins over base.css [hidden] */
html:not(.js) .lc-menu-toggle { display: none; }

@media (min-width: 1024px) {
  .lc-drawer { display: none; }
  html:not(.js) .lc-drawer[hidden] { display: none !important; }
}

.lc-drawer__inner {
  display: grid;
  gap: var(--lc-space-5);
  padding-block: var(--lc-space-5) var(--lc-space-8);
}

.lc-drawer__heading {
  margin: var(--lc-space-3) 0 var(--lc-space-1);
  font-size: var(--lc-text-xs);
  font-weight: var(--lc-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lc-text-subtle);
}

.lc-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.lc-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  border-bottom: 1px solid var(--lc-border);
  color: var(--lc-text);
  font-size: var(--lc-text-md);
  font-weight: var(--lc-weight-medium);
  text-decoration: none;
}

.lc-drawer__link:hover { color: var(--lc-text); text-decoration: none; }
.lc-drawer__link .lc-icon { color: var(--lc-text-subtle); }
.lc-drawer__link[aria-current="page"] { color: var(--lc-accent-text); }

.lc-drawer__secondary {
  display: grid;
  gap: var(--lc-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-drawer__secondary a {
  display: flex;
  align-items: center;
  gap: var(--lc-space-3);
  min-height: 2.75rem;
  color: var(--lc-text-muted);
  text-decoration: none;
}

.lc-drawer__secondary a:hover { color: var(--lc-text); text-decoration: none; }

body.lc-no-scroll { overflow: hidden; }

/* ---------- Footer ---------- */
.lc-footer {
  margin-top: auto;
  background: var(--lc-graphite-990);
  border-top: 1px solid var(--lc-border);
  color: var(--lc-text-muted);
  font-size: var(--lc-text-sm);
}

/* Service facts above the footer columns: the same claims as the header bar, with their detail. */
.lc-footer__service {
  display: grid;
  gap: var(--lc-space-5);
  padding-block: var(--lc-space-8);
  border-bottom: 1px solid var(--lc-border);
  margin: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.lc-footer__service li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--lc-space-1) var(--lc-space-3); align-items: start; }
.lc-footer__service .lc-icon { grid-row: span 2; color: var(--lc-signal-400); margin-top: 0.1rem; }
.lc-footer__service strong { color: var(--lc-text); font-weight: var(--lc-weight-semibold); }
.lc-footer__service span { color: var(--lc-text-muted); line-height: 1.5; }

.lc-footer__top {
  display: grid;
  gap: var(--lc-space-10);
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--lc-space-10);
}

@media (min-width: 1024px) {
  .lc-footer__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr); gap: var(--lc-space-16); }
}

.lc-footer__intro {
  display: grid;
  gap: var(--lc-space-4);
  align-content: start;
  max-width: 22rem;
}

.lc-footer__intro p { margin: 0; line-height: 1.6; }

.lc-footer__cols {
  display: grid;
  gap: var(--lc-space-8) var(--lc-space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .lc-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .lc-footer__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.lc-footer__heading {
  margin: 0 0 var(--lc-space-4);
  font-size: var(--lc-text-xs);
  font-weight: var(--lc-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lc-text);
}

.lc-footer__list {
  display: grid;
  gap: var(--lc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-footer__list a {
  display: inline-block;
  padding-block: 0.2rem;
  color: var(--lc-text-muted);
  text-decoration: none;
}

.lc-footer__list a:hover { color: var(--lc-text); text-decoration: underline; text-underline-offset: 0.2em; }

.lc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-3) var(--lc-space-6);
  justify-content: space-between;
  padding-block: var(--lc-space-6);
  border-top: 1px solid var(--lc-border);
  font-size: var(--lc-text-xs);
  color: var(--lc-text-subtle);
}

.lc-footer__bottom p { margin: 0; }

/* Sticky sub-bars follow the header when it tucks away. */
:is(.lc-catalog-tabs, .lc-subnav) { transition: top var(--lc-dur-slow) var(--lc-ease-out); }
body:has(.lc-header.is-tucked) :is(.lc-catalog-tabs, .lc-subnav) { top: 0; }

/* ---------- Header cart count ---------- */
.lc-cart-link__count {
  position: absolute;
  top: 0.2rem;
  left: 1.55rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.25rem;
  border-radius: 999px;
  background: var(--lc-accent);
  color: var(--lc-on-accent);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .lc-cart-link__count { position: static; margin-left: -0.15rem; }
}