/* Vitrin — Zarif (lüks / butik) theme. Values in :root are overridden by theme settings (ThemeContext.CssVariablesAsync).
   Stone background, near-black ink, square corners, thin uppercase type with wide tracking, generous whitespace. */
:root {
  --ink: #1C1C1C; --bg: #EFEEEA; --surface: #E4E2DC; --line: #D9D6D0; --muted: #5F5C57; --accent: #8E3B2A;
  --font-display: 'Jost', sans-serif; --font-body: 'Jost', sans-serif;
  --ink-2: color-mix(in srgb, var(--ink) 78%, var(--bg)); --paper: color-mix(in srgb, var(--bg) 45%, #fff);
  --field: color-mix(in srgb, var(--ink) 28%, var(--bg));
  --brand: var(--ink); --brand-dark: #000; --accent-soft: var(--surface);
  --ok: #3D6542; --ok-bg: #DFE6DA; --err: #9F2A1D; --err-bg: #F3E1DC;
  --radius: 0; --radius-sm: 0; --track: .18em; --hdr-h: 76px;
  /* Tokens of the shared rules (wwwroot/themes/default/base: var(--token, the other themes' value)). */
  --fw-semibold: 500; --fw-bold: 500; --panel-bg: var(--bg); --focus-ring: 1px solid var(--ink);
}
@media (max-width: 900px) { :root { --hdr-h: 60px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 20px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.6; }
/* Footer stays at the bottom on short pages; content never touches it. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main#main { flex: 1 0 auto; padding-bottom: 96px; }
@media (max-width: 720px) { body > main#main { padding-bottom: 56px; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
h1, h2, h3, .display { font-family: var(--font-display); line-height: 1.2; margin: 0; font-weight: 300; }
h1 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: .14em; text-transform: uppercase; }
h2 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: .16em; text-transform: uppercase; }
h3 { font-size: 15px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
p { margin: 0; }
strong, b { font-weight: 500; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .wrap { padding: 0 18px; } }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.between { justify-content: space-between; }
.section { padding-top: 88px; }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 40px; }
.section-head .link { font-size: 12px; }
.link { color: var(--ink); font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { text-decoration-color: transparent; }
/* Header links follow the header colour (white over the hero image while the header is transparent). */
.site-header .link { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label-caps, .z-eyebrow { font-size: 12px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: inherit; }
.label-caps { color: var(--muted); }

/* Announcement bar */
.announce { background: var(--ink); color: var(--bg); font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; text-align: center; padding: 10px 16px; }
.announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Header: menu | logo | tools */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); color: var(--ink);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.site-header .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 32px; min-height: var(--hdr-h); }
.logo { grid-column: 2; grid-row: 1; justify-self: center; font-family: var(--font-display); font-size: 24px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; padding-left: .32em; white-space: nowrap; }
.logo img { max-height: 44px; width: auto; }
.main-nav { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; letter-spacing: var(--track); text-transform: uppercase; }
.main-nav > a, .nav-more > button { padding: 4px 0; border-bottom: 1px solid transparent; }
.main-nav > a:hover, .main-nav a.active { border-bottom-color: currentColor; }
@media (min-width: 901px) {
  .main-nav { min-width: 0; flex-wrap: nowrap; white-space: nowrap; align-items: center; }
}
.nav-extras { display: none; }
.header-tools { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 2px; }
.header-tools .header-extra { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.nav-more { position: relative; }
.nav-more[hidden] { display: none; }
.nav-more > button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.nav-more > button.active, .nav-more > button[aria-expanded="true"] { border-bottom-color: currentColor; }
.nav-more-list { position: absolute; top: calc(100% + 18px); left: -16px; z-index: 40; min-width: 240px; max-height: 70vh; overflow-y: auto; background: var(--bg); color: var(--ink); border: 1px solid var(--line); padding: 10px 0; display: flex; flex-direction: column; text-transform: none; letter-spacing: .04em; font-size: 14px; }
.nav-more-list[hidden] { display: none; }
.nav-more-list a { padding: 9px 20px; }
.nav-more-list a:hover, .nav-more-list a:focus-visible { background: var(--surface); }
/* Header search: an icon that opens into a field while it has focus. Scoped to the header: the no-results and 404 search
   forms (.empty-search / .error-search, browse.css) are ordinary fields. */
.search { display: flex; align-items: center; min-height: 44px; position: relative; }
.site-header .search .search-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.site-header .search input { width: 0; min-width: 0; padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: inherit; font: 15px var(--font-body); outline: none; transition: width .3s ease, padding .3s ease; }
.site-header .search:focus-within input, .site-header .search input:not(:placeholder-shown) { width: 200px; padding: 6px 2px; border-bottom-color: currentColor; }
.site-header .search input::placeholder { color: inherit; opacity: .6; }
.icon-btn { width: 44px; height: 44px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; position: relative; }
.icon-btn:hover { color: inherit; opacity: .7; }
.cart-count { position: absolute; top: 6px; right: 4px; background: var(--ink); color: var(--bg); font-size: 10px; font-weight: 500; border-radius: 999px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.menu-toggle { display: none; }
@media (max-width: 900px) {
  .site-header .wrap { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 8px; }
  .menu-toggle { display: inline-flex; grid-column: 1; grid-row: 1; margin-left: -10px; }
  .logo { font-size: 18px; letter-spacing: .26em; padding-left: .26em; }
  .logo img { max-height: 36px; }
  .header-tools { grid-column: 3; margin-right: -10px; }
  .header-tools .header-extra { display: none; }
  .site-header .search:focus-within input, .site-header .search input:not(:placeholder-shown) { width: 140px; }
  .main-nav { display: none; grid-column: 1 / -1; grid-row: 2; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 4px 0 16px; font-size: 14px; }
  .main-nav.open { display: flex; }
  .main-nav.open > a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); }
  .main-nav.open .nav-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 14px; text-transform: none; letter-spacing: .04em; }
  .main-nav.open .nav-extras a { border-bottom: 0; min-height: 44px; }
  /* "Kurumsal başvuru" is one more menu row (tracked capitals, hairline), not an underlined sentence. */
  .main-nav.open .nav-extras:has(> a.link) { padding-top: 0; }
  .main-nav.open .nav-extras > a.link { flex: 1 1 100%; display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; }
}
@media (max-width: 420px) { .site-header .search:focus-within input, .site-header .search input:not(:placeholder-shown) { width: 104px; } }

/* Transparent header over a full-bleed first section: zarif.js sets html.z-hero-ready when the first section shown at this
   width is a full-bleed photograph (without the script the header stays solid above it) and .z-scrolled after scrolling. */
.z-hero-ready .site-header { margin-bottom: calc(-1 * var(--hdr-h) - 1px); }
.z-hero-ready:not(.z-scrolled) .site-header:not(:hover):not(:focus-within):not(:has(.main-nav.open)) { background: transparent; color: #fff; border-bottom-color: transparent; }
.z-hero-ready:not(.z-scrolled) .site-header:not(:hover):not(:focus-within):not(:has(.main-nav.open)) .cart-count { background: #fff; color: #1C1C1C; }
/* Logo over the photo: the optional "Koyu zemin için logo" (theme field logo-dark, .logo-on-dark) when uploaded, else the
   store logo / store name unchanged (no filter: recolouring a multi-colour logo distorts it). The store logo is hidden only
   when the header marks a rendered dark logo (.has-dark-logo), so the link never loses its logo or accessible name. */
.logo .logo-on-dark { display: none; }
.z-hero-ready:not(.z-scrolled) .site-header:not(:hover):not(:focus-within):not(:has(.main-nav.open)) .logo.has-dark-logo .logo-main { display: none; }
.z-hero-ready:not(.z-scrolled) .site-header:not(:hover):not(:focus-within):not(:has(.main-nav.open)) .logo .logo-on-dark { display: inline; }
.z-hero-ready:not(.z-scrolled) .site-header:not(:hover):not(:focus-within):not(:has(.main-nav.open)) :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .site-header, .site-header .search input { transition: none; } }

/* Mega menu (Shared/Components/HeaderMenu + megamenu.js): full-width panel under the header on desktop, an accordion in the
   phone menu. */
.nav-item { display: flex; align-items: center; }
.nav-trigger { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid transparent; }
.nav-trigger .chev, .mega-col-toggle .chev { flex-shrink: 0; transition: transform .2s ease; }
.nav-trigger.active, .nav-item.open > .nav-trigger { border-bottom-color: currentColor; }
.nav-item.open > .nav-trigger .chev, .mega-col.open > .mega-col-toggle .chev { transform: rotate(180deg); }
.main-nav .nav-item > .nav-alt { display: none; }
.mega { display: none; white-space: normal; font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 15px; }
.mega-wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.mega-col-toggle, .mega-all .m { display: none; }
.mega-links { list-style: none; margin: 0; padding: 0; }
.nav-more-list .nav-item { display: block; }
.nav-more-list .nav-item > .nav-trigger, .nav-more-list .nav-item > .mega { display: none; }
.nav-more-list .nav-item > .nav-alt { display: block; }
.mega-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(28,24,18,.28); }
.mega-backdrop[hidden] { display: none; }
@media (min-width: 901px) {
  .nav-trigger { min-height: 44px; }
  .nav-item.open > .mega,
  .main-nav:not([data-mega-ready]) .nav-item:hover > .mega,
  .main-nav:not([data-mega-ready]) .nav-item:focus-within > .mega { display: block; }
  .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-height: calc(100vh - 140px); overflow-y: auto; cursor: auto; }
  .mega-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 44px; padding-bottom: 44px; }
  .mega-body.has-promo { grid-template-columns: minmax(0, 1fr) 360px; }
  .mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; align-content: start; }
  .mega-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .mega-col-title { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); min-height: 36px; display: flex; align-items: center; margin-bottom: 6px; }
  .mega-links { display: flex; flex-direction: column; gap: 2px; }
  .mega-links a { display: flex; align-items: center; min-height: 34px; font-size: 15px; color: var(--muted); }
  .mega-links a:hover, .mega-col-title:hover { color: var(--ink); }
  /* Columns without sub-links (title only) go after the full ones and read as links (arrow), not as empty columns. */
  .mega-col:has(> .mega-col-title:not(.has-links)) { order: 1; }
  .mega-col-title:not(.has-links)::after { content: "→"; content: "→" / ""; margin-left: 8px; letter-spacing: 0; }
  .mega-all a { color: var(--ink); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; gap: 6px; }
  .mega-promo { position: relative; color: #fff; overflow: hidden; display: flex; align-self: start; min-height: 280px; background: var(--ink); }
  .mega-promo:hover { color: #fff; }
  .mega-promo-img { position: absolute; inset: 0; }
  .mega-promo-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .mega-promo:hover .mega-promo-img img { transform: scale(1.04); }
  .mega-promo-img::after { content: ""; position: absolute; inset: 0; background: rgba(28,24,18,.25); }
  .mega-promo-text { position: relative; margin-top: auto; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
  .mega-promo-text b { font-size: 20px; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
  .mega-promo-cta { align-self: flex-start; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
  .mega-foot { border-top: 1px solid var(--line); }
  .mega-foot .mega-wrap { display: flex; align-items: center; min-height: 56px; }
  .mega-foot a { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
}
@media (min-width: 901px) and (pointer: coarse) { .mega-links a { min-height: 44px; } }
@media (max-width: 900px) {
  .main-nav.open .nav-item { display: block; border-bottom: 1px solid var(--line); }
  .nav-trigger { width: 100%; min-height: 52px; justify-content: space-between; text-align: left; border-bottom: 0; }
  .nav-trigger.active, .nav-item.open > .nav-trigger { border-bottom: 0; }
  .nav-item.open > .mega { display: block; }
  .mega-wrap { padding: 0; }
  .mega-col { border-top: 1px solid var(--line); }
  .main-nav.open .mega-col-title { display: flex; align-items: center; min-height: 48px; padding-left: 16px; }
  .main-nav.open .mega-col-title.has-links { display: none; }
  .mega-col-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 0 0 16px; border: 0; background: none; font: 400 15px var(--font-body); color: var(--ink); cursor: pointer; text-align: left; }
  .mega-links { display: none; padding-bottom: 8px; }
  .mega-col.open > .mega-links { display: block; }
  .main-nav.open .mega-links a { display: flex; align-items: center; min-height: 44px; padding-left: 32px; color: var(--muted); gap: 6px; }
  .main-nav.open .mega-all a { color: var(--ink); }
  .mega-all .d { display: none; }
  .mega-all .m { display: inline; }
  .main-nav.open .mega-promo { display: none; }
  .main-nav.open .mega-foot a { display: flex; align-items: center; gap: 6px; min-height: 48px; padding-left: 16px; border-top: 1px solid var(--line); }
  .mega-backdrop { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-trigger .chev, .mega-col-toggle .chev, .mega-promo-img img { transition: none; } }

/* Buttons & badges: square, uppercase, tracked. */
.btn { font: 400 12px var(--font-body); letter-spacing: .2em; text-transform: uppercase; min-height: 50px; padding: 0 30px; border-radius: 0; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: transparent; color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.btn-soft { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.btn-soft:hover { border-color: var(--ink); color: var(--ink); }
.btn-light { background: #fff; color: #1C1C1C; border-color: #fff; }
.btn-light:hover { background: transparent; color: #fff; }
.btn-link { background: none; border: 0; padding: 0 0 0 12px; min-height: 44px; color: var(--ink); }
.btn-block { width: 100%; }
.btn-lg { min-height: 54px; font-size: 12px; letter-spacing: .22em; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 11px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-round { width: 44px; height: 44px; min-height: 44px; padding: 0; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.badge { display: inline-block; font-weight: 400; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 3px 0; background: none; color: var(--ink); }
.badge-sale { color: var(--accent); }
.badge-stock { color: var(--ok); }
.badge-stock::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; }
.badge-out { color: var(--muted); }
.badge-soft { color: var(--ink-2); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.field > span .muted, .field .muted { text-transform: none; letter-spacing: .02em; }
.input, .select, .textarea, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea {
  font: 400 15px var(--font-body); letter-spacing: normal; text-transform: none; min-height: 50px; padding: 10px 14px; border: 1px solid var(--field); border-radius: 0; background: var(--paper); color: var(--ink); width: 100%;
}
.field textarea, .textarea { min-height: 96px; }
.input:focus, .select:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: 1px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field-error, .field-validation-error { color: var(--err); font-size: 13px; letter-spacing: normal; text-transform: none; }
.input-validation-error { border-color: var(--err) !important; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: normal; text-transform: none; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); flex-shrink: 0; }
.choice { display: flex; align-items: center; gap: 12px; border: 1px solid var(--field); padding: 14px 16px; font-weight: 400; cursor: pointer; background: var(--paper); }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.choice input { width: 18px; height: 18px; accent-color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--field); background: transparent; font-size: 14px; letter-spacing: .06em; cursor: pointer; }
.pill input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pill input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 3px; }
.pill input:disabled + span { opacity: .45; text-decoration: line-through; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--ink); }
.qty button { width: 46px; height: 50px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink); }
.qty input { width: 48px; border: 0; text-align: center; font: 400 15px var(--font-body); background: none; color: var(--ink); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Alerts */
.alert { padding: 12px 16px; font-weight: 400; font-size: 14px; border-left: 2px solid currentColor; }
.alert-error { background: var(--err-bg); color: var(--err); }
.alert-success { background: var(--ok-bg); color: var(--ok); }
.alert-info { background: var(--surface); color: var(--ink-2); }

/* Placeholder & media */
.ph { background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.square { aspect-ratio: 3 / 4; }
.eyebrow { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }

/* Image tiles with a slow zoom on hover (home, categories, mega promo). */
.z-tile { position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; background: var(--ink); min-height: 280px; }
.z-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.z-tile::after { content: ""; position: absolute; inset: 0; background: rgba(20,17,13,.42); }
a.z-tile:hover { color: #fff; }
a.z-tile:hover > img { transform: scale(1.04); }
.z-tile-title { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; text-align: center; font-size: 20px; font-weight: 300; letter-spacing: .24em; text-transform: uppercase; }
/* Thin white capitals over a bright photograph (yellow cheese, light backdrops): a soft shadow keeps them legible. */
.z-tile:not(.z-tile-plain) .z-tile-title { text-shadow: 0 1px 2px rgba(20,17,13,.55), 0 0 18px rgba(20,17,13,.45); }
.z-tile-sub { font-size: 14px; letter-spacing: .04em; text-transform: none; }
.z-tile-plain { background: var(--surface); color: var(--ink); }
.z-tile-plain::after { display: none; }
a.z-tile-plain:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .z-tile > img { transition: none; } }

/* Category circles (page builder section): Zarif shows them as tall tiles. */
.cat-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.cat-row a { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.cat-row .ph { width: 100%; aspect-ratio: 3 / 4; }
@media (max-width: 900px) { .cat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }

/* Product grid & card: centred, image first, name in tracked capitals, price quiet. */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 28px; }
.product-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; }
@media (max-width: 1024px) { .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; } }
.product-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.product-card .media { position: relative; width: 100%; margin-bottom: 8px; }
.product-card .media .ph { aspect-ratio: 3 / 4; }
.product-grid.cols-3 .product-card .media .ph { aspect-ratio: 4 / 5; }
.product-card .media .ph img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.product-card:hover .media .ph > img:first-child { transform: scale(1.04); }
.product-card .card-badges { position: absolute; left: 0; right: 0; top: 14px; display: flex; justify-content: center; gap: 14px; pointer-events: none; }
.product-card .media .badge { position: static; }
.product-card .meta { font-size: 12px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.product-card .name { font-size: 13px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; }
.product-card .price-row { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; }
/* Without the add / options button (sold out, prices hidden) the row keeps the button's height, so the price stays level
   with the neighbouring cards. */
.product-card .price-row:not(:has(form, .btn))::after { content: ""; height: 40px; }
.product-card .urgency { font-size: 12px; color: var(--accent); }
.product-grid > *, .product-grid .product-card { height: 100%; }
.price { font-family: var(--font-body); font-size: 14px; font-weight: 400; letter-spacing: .06em; color: var(--muted); }
.price .unit { font-size: 12px; color: var(--muted); }
.price-old { color: var(--muted); text-decoration: line-through; font-size: 13px; margin-right: 8px; }
.price:has(.price-old) { color: var(--accent); }
/* Card price: an amount never breaks before "TL"; under pressure the old price moves to its own line. */
.product-card .price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 4px; white-space: nowrap; }
.product-card .price-login { white-space: normal; }
/* Two-column phone grid: the unit stays on the amount's line, smaller, and no card's amount may sit higher than its
   neighbour's. Without discounted cards the unit never wraps (zero basis, grows to its own width at most; a very long one
   ends in an ellipsis). In a grid with an old price ("399,00 TL 349,00 TL") the old price takes the first line of its card
   and every other card leaves that line empty, so all amounts sit on the second line with their unit. */
@media (max-width: 640px) {
  .product-card .price .unit { font-size: 11px; }
  .product-card .price .unit { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .product-grid:has(.price-old) .product-card .price-old { flex-basis: 100%; margin-right: 0; }
  .product-grid:has(.price-old) .product-card .price:not(:has(.price-old))::before { content: ""; flex-basis: 100%; height: 1lh; }
}
.product-card .price-row .btn-round { width: auto; min-height: 40px; height: 40px; padding: 0 16px; border-color: var(--line); background: transparent; color: var(--ink); }
.product-card .price-row .btn-round:hover { border-color: var(--ink); }
.product-card .price-row .btn-round svg { width: 16px; height: 16px; }
.product-card.out .media-link { opacity: .6; }
@media (hover: hover) and (min-width: 901px) {
  .product-card .price-row form, .product-card .price-row > .btn { opacity: 0; transition: opacity .3s ease; }
  .product-card:hover .price-row form, .product-card:focus-within .price-row form,
  .product-card:hover .price-row > .btn, .product-card:focus-within .price-row > .btn { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .product-card .media .ph img, .product-card .price-row form, .product-card .price-row > .btn { transition: none; } }

/* Category / search page */
.breadcrumb { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 20px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.with-aside { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.with-aside > aside { flex: 1 1 220px; max-width: 260px; display: flex; flex-direction: column; gap: 28px; }
.with-aside > .main { flex: 999 1 560px; min-width: 0; }
@media (max-width: 900px) { .with-aside > aside { max-width: none; } }
.filters-box > summary { display: none; }
@media (max-width: 900px) {
  .filters-box > summary { display: inline-flex; list-style: none; }
  .filters-box > summary::-webkit-details-marker { display: none; }
  .filters-box[open] > summary { margin-bottom: 20px; }
  .filters-apply:not([hidden]) { position: sticky; bottom: 0; z-index: 5; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
  .filters-apply .btn { width: 100%; }
}
@media (min-width: 901px) { .filters-apply { display: none; } }
.filter-group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.filter-group legend { font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; }
.filter-group .check { min-height: 36px; align-items: center; }
.filter-group .check input { margin-top: 0; }
.subcats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-bottom: 28px; }
.pager { display: flex; gap: 6px; justify-content: center; margin: 48px 0 32px; font-size: 13px; }
.pager a, .pager span { min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 10px; border-bottom: 1px solid transparent; }
.pager a:hover { border-bottom-color: var(--line); }
.pager .current { border-bottom-color: var(--ink); }
.empty { text-align: center; padding: 72px 16px; display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* Product page (Zarif Product/Detail): editorial image column, sticky info column. */
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; padding-bottom: 72px; }
.pdp-gallery { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pdp-gallery .main-img { aspect-ratio: 4 / 5; position: relative; }
.thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.thumbs button { aspect-ratio: 1 / 1; border: 0; padding: 0; background: var(--surface); cursor: pointer; overflow: hidden; opacity: .55; transition: opacity .2s ease; }
.thumbs button[aria-current=true], .thumbs button:hover { opacity: 1; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp-info { min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 8px 0 0 64px; }
.pdp-info h1 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; letter-spacing: .16em; }
.pdp-info .price { font-size: 18px; color: var(--ink); }
.pdp-info .price:has(.price-old:not([hidden])) { color: var(--accent); }
.pdp-info .breadcrumb { margin: 0; }
.buy-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.buy-row .btn { flex: 1; min-width: 200px; }
.rich { line-height: 1.7; color: var(--ink-2); }
.rich p + p { margin-top: 12px; }
@media (min-width: 901px) {
  .pdp-info { position: sticky; top: calc(var(--hdr-h) + 24px); align-self: start; }
}
@media (max-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .pdp-info { padding: 26px 0 0; }
}

/* Boxes, checkout, account */
.surface-page { background: var(--bg); }
.box { background: var(--paper); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.box.bordered { border: 1px solid var(--line); }
.box h2 { font-size: 15px; font-weight: 400; letter-spacing: .2em; }
.checkout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding-bottom: 80px; }
.checkout > .main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.checkout > aside { flex: 1 1 340px; max-width: 460px; position: sticky; top: calc(var(--hdr-h) + 20px); }
@media (max-width: 900px) { .checkout > aside { max-width: none; position: static; } }
.line-item { display: flex; gap: 16px; align-items: center; }
.line-item .thumb { width: 64px; height: 80px; flex-shrink: 0; }
.line-item .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.summary { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.summary .r { display: flex; justify-content: space-between; gap: 12px; }
.summary .total { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; padding-top: 6px; }
.summary .discount { color: var(--ok); }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 400; padding: 0 8px 14px; border-bottom: 1px solid var(--line); }
.cart-table td { padding: 20px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table-scroll { overflow-x: auto; }
.account { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 40px; padding-bottom: 80px; }
.account > nav { flex: 1 1 200px; max-width: 240px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.account > nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; border-bottom: 1px solid transparent; }
.account > nav a:hover { color: var(--ink); border-bottom-color: var(--line); }
.account > nav a.active { border-bottom-color: var(--ink); }
.account > .main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 900px) {
  .account { row-gap: 18px; padding-top: 24px; }
  .account > nav { flex: 1 1 100%; max-width: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 22px; border-bottom: 1px solid var(--line); }
  .account > nav::-webkit-scrollbar { display: none; }
  /* The right edge fades out: the cut-off entry tells that the row scrolls. */
  .account > nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); padding-right: 40px; }
  /* With zarif.js the fade follows the scroll position: only the edges that hide more entries fade. */
  .account > nav.z-fade { -webkit-mask-image: none; mask-image: none; }
  .account > nav.z-fade.z-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .account > nav.z-fade.z-more-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
  .account > nav.z-fade.z-more-start.z-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  .account > nav a, .account > nav form { flex-shrink: 0; white-space: nowrap; }
  .account > nav form button { width: auto; white-space: nowrap; }
}
.auth-card { max-width: 460px; margin: 56px auto 80px; }
.status { display: inline-block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 3px 10px; border: 1px solid var(--line); }
.status.ok { color: var(--ok); border-color: currentColor; }
.status.warn { color: #8A5A12; border-color: currentColor; }
.status.bad { color: var(--err); border-color: currentColor; }

/* Benefits ("öne çıkan bilgi" banners) as a slowly running band above the footer. */
.benefits.z-marquee { border-top: 1px solid var(--line); overflow: hidden; }
.z-marquee-track { display: flex; width: max-content; }
/* Moves only once zarif.js has shown the pause button (.z-live). */
.z-marquee.z-live .z-marquee-track { animation: z-marquee 48s linear infinite; }
.z-marquee { position: relative; }
.z-marquee:hover .z-marquee-track, .z-marquee.z-paused .z-marquee-track { animation-play-state: paused; }
/* Pause button: a full-height strip at the right edge whose background fades the running titles out, with the icon at its end. */
.z-marquee-toggle { position: absolute; top: 0; bottom: 0; right: 0; z-index: 1; width: 96px; display: flex; align-items: center; justify-content: flex-end; padding: 0 24px 0 0; border: 0; background: linear-gradient(to right, transparent, var(--bg) 55%); color: var(--muted); cursor: pointer; }
.z-marquee-toggle[hidden] { display: none; }
.z-marquee-toggle:hover, .z-marquee-toggle[aria-pressed=true] { color: var(--ink); }
.z-marquee-toggle:focus-visible { outline-offset: -4px; }
.z-marquee-toggle[aria-pressed=true] .z-ico-pause, .z-marquee-toggle:not([aria-pressed=true]) .z-ico-play { display: none; }
@media (max-width: 720px) { .z-marquee-toggle { width: 72px; padding-right: 14px; } }
.z-marquee-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 26px 0; }
.z-marquee-list li { display: inline-flex; align-items: baseline; gap: 18px; padding-right: 54px; white-space: nowrap; }
.z-marquee-list li::after { content: ""; width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--muted); margin-left: 36px; align-self: center; }
.z-marquee-title { font-size: clamp(28px, 3.6vw, 48px); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.z-marquee-sub { font-size: 14px; color: var(--muted); }
@keyframes z-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .z-marquee-track, .z-marquee.z-live .z-marquee-track { animation: none; width: auto; }
  .z-marquee-list { flex-wrap: wrap; justify-content: center; padding: 26px 18px; }
  .z-marquee-list[aria-hidden] { display: none; }
  .z-marquee-list li { white-space: normal; }
  .z-marquee-toggle { display: none; }
}

/* Footer */
.site-footer { background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); font-size: 14px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); gap: 40px; padding-top: 72px; padding-bottom: 48px; }
.site-footer .cols > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.site-footer b { font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.footer-news-text { color: var(--muted); }
.footer-news-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.footer-news-row { display: flex; align-items: center; border-bottom: 1px solid var(--ink); }
.footer-news-row .input { border: 0; background: transparent; padding: 10px 0; min-height: 46px; }
.footer-news-row .input:focus { outline: 0; }
.footer-news-row:focus-within { outline: 1px solid var(--ink); outline-offset: 4px; }
.footer-news-consent { font-size: 13px; color: var(--muted); }
.footer-news-status:empty { display: none; }
.footer-news-status .ok { color: var(--ok); }
.footer-news-status .err { color: var(--err); }
.footer-contact { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; padding-bottom: 28px; color: var(--muted); }
.site-footer .footer-contact .footer-store { margin: 0; }
.site-footer .bottom { border-top: 1px solid var(--line); padding-top: 22px; padding-bottom: 30px; font-size: 12px; letter-spacing: .08em; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
@media (max-width: 1024px) { .site-footer .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-news { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .site-footer .cols { grid-template-columns: 1fr 1fr; padding-top: 52px; gap: 32px 20px; }
  /* Touch: each footer link is a 44px row (the column gap moves into the rows). */
  .site-footer .cols > div:not(.footer-news) { gap: 0; }
  .site-footer .cols > div:not(.footer-news) > a { display: flex; align-items: center; min-height: 44px; }
  .site-footer .cols > div:not(.footer-news) > b { margin-bottom: 6px; }
}

/* Toast for add-to-cart */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--ink); color: var(--bg); padding: 14px 22px; font-size: 14px; letter-spacing: .04em; transition: transform .3s ease, opacity .2s ease, visibility .3s; z-index: 50; display: flex; gap: 16px; align-items: center; max-width: calc(100% - 32px); }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast:not(.show) { visibility: hidden; opacity: 0; }
.toast a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.cookie-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; z-index: 40; font-size: 14px; }
.wa-float { position: fixed; right: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 999px; background: #1F8F4E; color: #fff; display: flex; align-items: center; justify-content: center; z-index: 45; }
.wa-float:hover { color: #fff; background: #17733e; }
body:has([data-cookie-bar]) .wa-float { bottom: 96px; }

/* ============ Zarif home (Themes/Zarif/Views/Home/Index) ============ */
.z-hero { position: relative; overflow: hidden; }
.z-hero.z-bleed { height: clamp(560px, 94vh, 860px); color: #fff; background: #1C1C1C; }
.z-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: z-zoom 2.4s cubic-bezier(.2,.7,.2,1) both; }
.z-bleed::after, .z-banner:not(.z-banner-plain)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,17,13,.62) 0, rgba(20,17,13,.2) 24%, rgba(20,17,13,.2) 42%, rgba(20,17,13,.78) 100%); }
.z-hero-text, .z-banner-text { text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.z-hero-text .btn, .z-banner-text .btn { text-shadow: none; }
.z-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 620px; }
.z-bleed .z-hero-text { position: absolute; left: 48px; bottom: 76px; right: 48px; animation: z-rise 1s cubic-bezier(.2,.7,.2,1) .2s both; }
.z-hero h1 { font-size: clamp(38px, 5vw, 64px); font-weight: 300; line-height: 1.05; letter-spacing: .08em; }
.z-hero p { font-size: 16px; max-width: 460px; }
.z-hero .btn { margin-top: 6px; }
.z-hero-plain { padding: 120px 18px 96px; display: flex; justify-content: center; text-align: center; border-bottom: 1px solid var(--line); }
.z-hero-plain .z-hero-text { align-items: center; }
.z-scroll { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--bg); color: var(--ink); display: grid; place-items: center; z-index: 2; }
.z-scroll:hover { color: var(--ink); }
@keyframes z-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes z-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .z-hero-img, .z-bleed .z-hero-text { animation: none; } }
@media (max-width: 720px) {
  .z-hero.z-bleed { height: min(560px, 82vh); }
  .z-bleed .z-hero-text { left: 22px; right: 22px; bottom: 40px; gap: 12px; }
  .z-hero h1 { font-size: 38px; }
  .z-scroll { display: none; }
}

.z-picks { padding: 96px 0 88px; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.z-picks > .z-eyebrow { margin: 0; font-weight: 400; }
.z-tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; margin-top: -30px; padding: 0 18px; }
.z-tablist[hidden] { display: none; }
.z-tablist button { border: 0; background: none; font: 300 26px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: 0 0 4px; min-height: 44px; cursor: pointer; border-bottom: 1px solid transparent; }
.z-tablist button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--ink); }
.z-tablist button:hover { color: var(--ink); }
.z-panel { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.z-panel[hidden] { display: none; }
.z-panel > .wrap { width: 100%; }
.z-panel-title { font: 300 22px var(--font-display); letter-spacing: .18em; }
.z-tabs-ready .z-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.z-panel + .z-panel { margin-top: 32px; }
.z-tabs-ready .z-panel + .z-panel { margin-top: 0; }
@media (max-width: 720px) {
  .z-picks { padding: 56px 0; gap: 28px; }
  /* One scrollable line of tabs (wrapped, the second tab read as a subtitle); the auto margins centre the row while it fits. */
  .z-tablist { margin-top: -14px; gap: 24px; flex-wrap: nowrap; justify-content: flex-start; width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .z-tablist::-webkit-scrollbar { display: none; }
  .z-tablist > :first-child { margin-left: auto; }
  .z-tablist > :last-child { margin-right: auto; }
  .z-tablist button { font-size: 17px; letter-spacing: .14em; white-space: nowrap; flex-shrink: 0; }
  .z-panel { gap: 32px; }
}

.z-banner { position: relative; overflow: hidden; height: clamp(440px, 60vw, 620px); color: #fff; background: #1C1C1C; }
.z-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.z-banner:hover .z-banner-img { transform: scale(1.03); }
.z-banner-text { position: absolute; z-index: 1; left: 48px; right: 48px; bottom: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 560px; }
.z-banner h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: .14em; }
.z-banner-plain { height: auto; background: var(--surface); color: var(--ink); padding: 96px 18px; display: flex; justify-content: center; text-align: center; }
.z-banner-plain .z-banner-text { position: static; align-items: center; }
@media (max-width: 720px) { .z-banner { height: 460px; } .z-banner-text { left: 22px; right: 22px; bottom: 40px; } }
@media (prefers-reduced-motion: reduce) { .z-banner-img { transition: none; } }

.z-manifesto { padding: 104px 18px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.z-ornament { width: 1px; height: 56px; background: var(--ink); }
.z-manifesto-text { max-width: 680px; font: 300 clamp(22px, 2.6vw, 32px)/1.4 var(--font-display); letter-spacing: .18em; text-transform: uppercase; }
.z-link { font-size: 14px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: 2px; transition: background-size .4s ease; }
.z-link:hover { background-size: 0 1px; background-position: 100% 100%; }
@media (max-width: 720px) { .z-manifesto { padding: 72px 22px; } }
@media (prefers-reduced-motion: reduce) { .z-link { transition: none; } }

.z-cats { padding: 0 40px 104px; display: flex; justify-content: center; }
.z-picks + .z-cats, .z-hero + .z-cats, .z-banner + .z-cats { padding-top: 96px; }
.z-cats-grid { width: 100%; max-width: 1120px; display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 320px; gap: 22px; }
.z-cats-grid > .z-tile:first-child { grid-row: span 2; }
.z-cats-grid > .z-tile:first-child .z-tile-title { font-size: 22px; }
.z-cats-grid:has(> .z-tile:nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.z-cats-grid:has(> .z-tile:nth-child(4)) > .z-tile:first-child { grid-column: span 2; }
.z-cats-1 { grid-template-columns: 1fr; }
.z-cats-1 > .z-tile:first-child { grid-row: auto; }
.z-cats-2 { grid-template-columns: 1fr 1fr; }
.z-cats-2 > .z-tile:first-child { grid-row: auto; }
@media (max-width: 720px) {
  .z-cats { padding: 0 18px 72px; }
  .z-picks + .z-cats, .z-hero + .z-cats, .z-banner + .z-cats { padding-top: 64px; }
  .z-cats-grid, .z-cats-grid:has(> .z-tile:nth-child(4)) { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; gap: 12px; }
  .z-cats-grid > .z-tile:first-child, .z-cats-grid:has(> .z-tile:nth-child(4)) > .z-tile:first-child { grid-column: 1 / -1; grid-row: auto; }
  /* The first tile is full width, the rest go in pairs: with an even count the last one would sit alone beside a gap. */
  .z-cats-grid > .z-tile:nth-child(even):last-child { grid-column: 1 / -1; }
  .z-tile { min-height: 0; }
  .z-tile-title { font-size: 15px; font-weight: 400; letter-spacing: .2em; padding: 12px; }
}

.z-split { padding: 0 40px 104px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; max-width: 1200px; margin: 0 auto; width: 100%; }
.z-split .z-tile { min-height: 480px; }
@media (max-width: 720px) { .z-split { padding: 0 18px 72px; } .z-split .z-tile { min-height: 360px; } }

/* Header extras (quick order / group application link, language & currency) as quiet text controls. */
.header-tools .header-extra.btn { background: none; border: 0; color: inherit; min-height: 44px !important; padding: 0 12px; letter-spacing: .16em; }
.header-tools .header-extra.btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-news-row .btn-link { white-space: nowrap; flex-shrink: 0; }
/* Without zarif.js (no .z-live) the band is a static, wrapping list: every benefit stays readable. */
.z-marquee:not(.z-live) .z-marquee-track { width: auto; }
.z-marquee:not(.z-live) .z-marquee-list { flex-wrap: wrap; justify-content: center; padding: 26px 18px; }
.z-marquee:not(.z-live) .z-marquee-list[aria-hidden] { display: none; }
.z-marquee:not(.z-live) .z-marquee-list li { white-space: normal; }
/* Footer without the sign-up form (task pages, pages with their own newsletter section): three even columns. */
@media (min-width: 641px) { .site-footer .cols:not(:has(.footer-news)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Static band (reduced motion / no script): centred. */
.z-marquee:not(.z-live) .z-marquee-track { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .z-marquee-track { justify-content: center; } }
/* Helper text inside a field label reads as a sentence, not as a tracked caption. */
.field .hint, .field small { font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--muted); line-height: 1.5; }
/* "Çıkış yap" in the account menu looks like the other menu entries. */
.account > nav form { margin: 0; }
.account > nav form button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 10px 0; min-height: 44px; cursor: pointer; text-align: left; display: flex; align-items: center; }
.account > nav form button:hover { color: var(--ink); background: none; border-bottom-color: var(--line); }
/* Phones: the header search field opens only while it has focus, so a searched term never squeezes the logo. */
@media (max-width: 900px) { .site-header .search input:not(:placeholder-shown):not(:focus) { width: 0; padding: 0; border-bottom-color: transparent; } }