/* The material of the site header, chosen in the admin panel (Özelleştirme →
   Üst bar) and carried on the root element as data-header-style by
   theme.js. Every storefront page has its own header class and its own
   stylesheet, so the material lives here once and is addressed through the
   one thing the six headers share: each is the first header directly inside
   <body>. The tokens sit on :root so the admin preview draws the same glass.

   "solid" is the default and needs no rule: each page keeps the paper header
   it always had. */
:root {
  --header-frost-bg: rgb(var(--theme-paper-rgb) / .66);
  --header-frost-blur: blur(20px) saturate(1.25);
  --header-frost-line: rgb(34 35 31 / .12);
  /* Frosted glass over a dark photograph composites to about #a4a4a2; the
     page's muted grey (#606353) reads at 2.5:1 there, so the bar's quiet
     text and its focus ring use a darker ink of their own (5.1:1 / 6.2:1). */
  --header-frost-ink: #22231f;
  --header-frost-muted: #2f3229;
  /* .8, not the reference's .4: on the four pages where the bar only ever
     sits on paper, .7 composited to a mid grey (#5b5c57); .8 keeps charcoal
     (#454641) and the glass still shows over a photograph. */
  --header-smoke-bg: rgb(24 26 21 / .8);
  --header-smoke-blur: blur(20px) saturate(1.15);
  --header-smoke-ink: #f3f1ea;
  --header-smoke-muted: #e4e5dc;
  --header-smoke-line: rgb(255 255 255 / .16);
  --header-smoke-hover: rgb(255 255 255 / .12);
}

/* Buzlu cam: the paper made translucent, with the page blurred behind it.
   At the top of a page nothing is behind the bar and it reads as paper; once
   the home or product page scrolls, the photographs pass underneath. */
:root[data-header-style="frosted"] body > header {
  background: var(--header-frost-bg);
  -webkit-backdrop-filter: var(--header-frost-blur);
  backdrop-filter: var(--header-frost-blur);
  border-bottom-color: var(--header-frost-line);
}

:root[data-header-style="frosted"] body > header .v4-search-opener > span {
  color: var(--header-frost-muted);
}

:root[data-header-style="frosted"] body > header :is(a, button):focus-visible {
  outline-color: var(--header-frost-ink);
}

/* Füme cam: the same glass, tinted dark, with light type — the reference
   site's scrolled header. Everything inside the bar inherits the light ink;
   the few controls that paint their own border, hover or underline are
   listed here so none of them keeps a paper-coloured detail. The cart badges
   swap to the light ink with dark digits: olive on the smoked bar is 1.2:1
   and the disc would vanish. */
:root[data-header-style="smoked"] body > header {
  background: var(--header-smoke-bg);
  -webkit-backdrop-filter: var(--header-smoke-blur);
  backdrop-filter: var(--header-smoke-blur);
  border-bottom-color: var(--header-smoke-line);
  color: var(--header-smoke-ink);
}

:root[data-header-style="smoked"] body > header :is(.v4-search-opener, .info-round-arrow) {
  border-color: var(--header-smoke-line);
}

:root[data-header-style="smoked"] body > header .v4-search-opener > span {
  color: var(--header-smoke-muted);
}

:root[data-header-style="smoked"] body > header :is(.v4-search-opener, .customer-link, .pp-icon, .icon-button):hover {
  background: var(--header-smoke-hover);
  border-color: var(--header-smoke-line);
}

:root[data-header-style="smoked"] body > header :is(.desktop-nav a, .collection-menu-trigger)::after {
  background: currentColor;
}

:root[data-header-style="smoked"] body > header :is(nav a, .collection-menu-trigger, .info-wordmark, .customer-link, .info-store-link, .account-back, .rq-back):hover {
  color: inherit;
}

/* The Koleksiyon panel (collection-menu.js) hangs from the header. A sheet
   this large carries quiet text, so it is opaque whatever the bar's glass:
   paper under the plain and frosted bars (collection-menu.css), and under
   the smoked bar the glass's own dark, with the same light type, its quiet
   text and rules lifted to stay legible. (Inside a glass header a nested
   backdrop blur sees nothing of the page below the bar, so a translucent
   panel would only show the page's text unblurred through it.) */
:root[data-header-style="smoked"] body > header .collection-menu-panel {
  /* Between the glass's own dark and the charcoal it composites to over
     paper, so the sheet does not step down hard from the bar. */
  background: #2a2c26;
  color: var(--header-smoke-ink);
  border-bottom-color: var(--header-smoke-line);
}

:root[data-header-style="smoked"] body > header :is(.collection-menu-list a span, .collection-menu-foot, .collection-menu-empty, .collection-menu-explore .collection-menu-title, .collection-menu-column.is-empty .collection-menu-title) {
  color: var(--header-smoke-muted);
}
:root[data-header-style="smoked"] body > header .collection-menu-explore {
  border-color: var(--header-smoke-line);
}

:root[data-header-style="smoked"] body > header :is(.collection-menu-title, .collection-menu-all, .collection-menu-list a:hover) {
  color: var(--header-smoke-ink);
}

:root[data-header-style="smoked"] body > header .collection-menu-foot {
  border-top-color: var(--header-smoke-line);
}

:root[data-header-style="smoked"] body > header .collection-menu-tile-media {
  background: rgb(255 255 255 / .08);
}

:root[data-header-style="smoked"] body > header .collection-menu-trigger[aria-expanded="true"] {
  text-decoration-color: currentColor;
}

:root[data-header-style="smoked"] body > header :is(.cart-count, .pp-header-cart > span, .cmp-cart-link > span) {
  background: var(--header-smoke-ink);
  color: #22231f;
}

:root[data-header-style="smoked"] body > header nav a[aria-current] {
  text-decoration-color: currentColor;
}

:root[data-header-style="smoked"] body > header :is(a, button):focus-visible {
  outline-color: var(--header-smoke-ink);
}

/* bilgi.html and ozel-tasarim.html lay their header out as a centred box
   (1536px / 1600px) with the page paper on either side; a glass bar has to
   run edge to edge, so above those widths the box becomes the padding. The
   percentage is the body width — not 100vw, which would count the scrollbar
   and shift the contents against the sections below. */
@media (min-width: 1536px) {
  :root:is([data-header-style="frosted"], [data-header-style="smoked"]) body > header.info-wrap {
    max-width: none;
    padding-left: calc((100% - 1536px) / 2 + max(var(--info-gutter), env(safe-area-inset-left, 0px)));
    padding-right: calc((100% - 1536px) / 2 + max(var(--info-gutter), env(safe-area-inset-right, 0px)));
  }
}

@media (min-width: 1600px) {
  :root:is([data-header-style="frosted"], [data-header-style="smoked"]) body > header.rq-header {
    max-width: none;
    padding-inline: calc((100% - 1600px) / 2 + 80px);
  }
}

/* The announcement band (Özelleştirme → Üst bar → Duyuru şeridi), placed by
   site-content.js directly after the header, in the flow. Accent-filled with
   light type: the accent rules guarantee that pairing 4.5:1. */
.site-announcement {
  margin: 0;
  padding: 10px max(20px, env(safe-area-inset-right, 0px)) 11px max(20px, env(safe-area-inset-left, 0px));
  background: var(--accent);
  color: #fffef8;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .2px;
  line-height: 1.5;
}

.site-announcement p {
  margin: 0 auto;
  max-width: 72ch;
  overflow-wrap: anywhere;
}

/* Without backdrop blur (older browsers, or a person who asked for reduced
   transparency) the glass would be plain translucency, and text over a busy
   photograph would lose contrast: keep the tint, drop the transparency.
   Safari before 18 knows only the -webkit- name, and honours it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-header-style="frosted"] body > header { background: rgb(var(--theme-paper-rgb) / .96); }
  :root[data-header-style="smoked"] body > header { background: rgb(24 26 21 / .96); }
}

@media (prefers-reduced-transparency: reduce) {
  :root[data-header-style="frosted"] body > header { background: rgb(var(--theme-paper-rgb) / .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root[data-header-style="smoked"] body > header { background: rgb(24 26 21 / .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* The brand mark (Özelleştirme → Marka → Logo yerleşimi), carried on the
   root element as data-brand-mark by theme.js. Every header brand link holds
   the monogram and the spelling as two children:
     <a data-wordmark aria-label><svg class="brand-mark">…</svg><span class="brand-text">AKOAHOME</span></a>
   and site-content.js writes the spelling into the span, so the mark
   survives every rewrite. The footers' links keep the spelling as bare text;
   the placement rules below key on the mark being there, so a footer link
   never changes shape. The rules are keyed on the attribute alone, not on
   <html>, so the admin panel's sample can carry it on the sample itself.

   "text" is the default and draws what every page always drew: the span is
   the link's own type — base.css still carries `.brand span` (9px, 3px
   tracking) from an older two-line wordmark, and index.html's link is a
   .brand — and the mark is not rendered at all. Five page stylesheets reset
   every bare svg to a hollow stroke (two also to 22px); the mark's own rule
   restores the fill, and its size is set only where it is drawn. */
[data-wordmark] > .brand-text {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  display: inline;
}

[data-wordmark] > .brand-mark {
  display: none;
  fill: currentColor;
  stroke: none;
  width: auto;
  height: auto;
  flex: none;
}

/* Logo üstte, yazı altta: the monogram over the brand in small tracked
   capitals, as the owner's own logo sets it. 30px + 3px + 9px is 42px, under
   the 44px the shortest header link already keeps, so no header changes
   height. The mark's width follows its 981:721 box (41px). */
[data-brand-mark="stacked"] [data-wordmark]:has(> .brand-mark) {
  display: inline-grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  line-height: 1;
}

[data-brand-mark="stacked"] [data-wordmark] > .brand-mark {
  display: block;
  height: 30px;
  width: auto;
}

[data-brand-mark="stacked"] [data-wordmark] > .brand-text {
  font-size: 9px;
  letter-spacing: 3px;
  font-weight: 500;
  white-space: nowrap;
  /* the tracking the browser adds after the last letter, matched before the
     first so the ink sits centred under the mark */
  padding-left: 3px;
}

/* Yalnızca logo: the monogram alone, 40px tall (54px wide), centred in a box
   no smaller than a finger's width. The spelling stays in the link, clipped
   to a pixel: the link is named by its aria-label, and the text is there for
   anything that reads the markup rather than the label. */
[data-brand-mark="mark"] [data-wordmark]:has(> .brand-mark) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

[data-brand-mark="mark"] [data-wordmark] > .brand-mark {
  display: block;
  height: 40px;
  width: auto;
}

[data-brand-mark="mark"] [data-wordmark] > .brand-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* On a phone the headers drop to 68–72px and the type to 22–25px; the mark
   follows in the same proportion. */
@media (max-width: 760px) {
  [data-brand-mark="stacked"] [data-wordmark] > .brand-mark { height: 26px; }
  [data-brand-mark="stacked"] [data-wordmark] > .brand-text { font-size: 8px; letter-spacing: 2.6px; padding-left: 2.6px; }
  [data-brand-mark="mark"] [data-wordmark] > .brand-mark { height: 34px; }
}