:root {
  --ink: #1b1c1d;
  --ink-soft: #4f5358;
  --paper: #ffffff;
  --wash: #f5f6f6;
  --line: #e4e7e9;
  --accent: #d71942;
  --accent-dark: #b90e33;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 34px;
  --shadow: 0 18px 60px rgba(20, 22, 24, 0.10);
  --max: 1280px;
  --muted: var(--ink-soft);
  --soft: var(--wash);
  --white: #ffffff;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Nav island geometry. --nav-height is DERIVED from the tallest child plus
     padding, so it can never drift out of sync with the rendered header again. */
  --nav-brand-h: 72px;
  --nav-pad-y: 6px;
  --nav-height: calc(var(--nav-brand-h) + var(--nav-pad-y) * 2);
  --nav-gutter: clamp(12px, 2.6vw, 28px);
  /* six links, a 128px logo and the CTA need more room than the old 840 */
  --nav-cap: 1000px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: Manrope, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.menu-open,
body.modal-open { overflow: hidden; }
img, video, iframe { display: block; max-width: 100%; }
/* Inline sprite replaces the lucide CDN: no third-party request, no SRI gap,
   and icons still render with JS disabled or blocked. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
address { font-style: normal; }
::selection { color: #fff; background: var(--accent); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  border-radius: 12px;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 16px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  pointer-events: none;
}
/* width is a function of the viewport and two constants only -- never of the
   island's own content -- so a webfont swap can no longer resize the header.
   min() of two continuous functions is continuous: no breakpoint jump exists. */
.nav-island {
  border-radius: 24px;
  width: min(calc(100% - var(--nav-gutter) * 2), var(--nav-cap));
  min-height: var(--nav-height);
  margin: var(--nav-gutter) auto 0;
  padding: var(--nav-pad-y) 8px var(--nav-pad-y) 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Transparent once it is an island: the page runs underneath it and only the
     backdrop blur marks where the header is. Legibility over dark photography
     is not left to chance -- see body.is-nav-dark below. */
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: auto;
  transition: width .38s var(--ease), margin .38s var(--ease),
              padding .38s var(--ease), background .3s ease, box-shadow .3s ease,
              color .3s ease;
}
/*
 * At the top of every page the header is a full-width strip, not an island. It
 * is part of the layout there -- content begins underneath it, so nothing is
 * ever hidden behind it on arrival. It contracts into the floating island only
 * once the page has actually been scrolled, which is the only time it needs to
 * sit on top of something.
 *
 * The padding centres the strip's contents inside the same --max column the
 * page body uses, so the logo lines up with the copy below it.
 */
body:not(.is-scrolled) .nav-island {
  width: 100%;
  margin-top: 0;
  padding-inline: max(18px, calc((100% - var(--max)) / 2));
  /* square only while it spans the screen -- a rounded corner against the
     viewport edge reads as a mistake. It rounds back into the island on scroll. */
  border-radius: 0;
  /* The same near-black as the dark story panel further down the page ("Neden
     Garage Organics?"). A white bar laid over the hero read as a browser
     chrome; this one reads as the brand. No hairline underneath it -- the
     tone change against the hero is already the edge. */
  background: var(--ink);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-island { transition: none; }
}

/*
 * Two situations put the header on top of something dark: the full-width strip,
 * which paints itself dark, and the transparent island while a dark section is
 * passing underneath it (the hero, the story panel). Both get the same light
 * lockup, so the switch is written once against a single body class.
 *
 * .is-nav-dark is set in app.js by an IntersectionObserver watching
 * [data-nav-dark] regions through a band the height of the header. No scroll
 * listener, same as the strip/island observer it sits next to.
 */
body:not(.is-scrolled) .nav-island,
body.is-nav-dark .nav-island { color: #fff; }

/* The lockup is a single-colour alpha mask (every palette entry is #1b1c1d),
   so inverting it yields clean off-white glyphs on the same transparency --
   no second logo file to keep in sync. */
body:not(.is-scrolled) .nav-brand img,
body.is-nav-dark .nav-brand img { filter: invert(1); }

body:not(.is-scrolled) .nav-links a,
body.is-nav-dark .nav-links a { color: #c8ccd0; }
/* The island straddles things the strip never does -- the organics panel is a
   pale product photograph on the left and near-black on the right, so a single
   flat label colour loses one half or the other. A dark glass under the whole
   island evens the ground out. It stays see-through, which is the point. */
body.is-scrolled.is-nav-dark .nav-island { background: rgba(16, 17, 18, .38); }
body.is-scrolled.is-nav-dark .nav-links a { color: #e6e8ea; }
body:not(.is-scrolled) .nav-links a:hover,
body:not(.is-scrolled) .nav-links a[aria-current=page],
body.is-nav-dark .nav-links a:hover,
body.is-nav-dark .nav-links a[aria-current=page] {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}
body:not(.is-scrolled) .menu-toggle,
body.is-nav-dark .menu-toggle { color: #fff; background: rgba(255, 255, 255, .14); }

/* Only the island needs this: the strip paints an opaque surface, but over a
   photograph the labels are carrying themselves and want a touch of anchoring. */
body.is-scrolled.is-nav-dark .nav-links a,
body.is-scrolled.is-nav-dark .nav-brand img { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
body.is-scrolled.is-nav-dark .nav-brand img { filter: invert(1) drop-shadow(0 1px 10px rgba(0, 0, 0, .45)); }
.nav-brand {
  border-radius: 14px;
  min-width: 128px;
  height: var(--nav-brand-h);
  display: grid;
  place-items: center;
}
.nav-brand img {
  width: 128px;
  height: 72px;
  object-fit: contain;
}
.nav-links {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-inline: auto;
}
.nav-links a {
  border-radius: 14px;
  min-height: 44px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #565a5f;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .25s ease, background .25s ease;
}
.nav-links a:hover,
.nav-links a[aria-current=page] {
  color: var(--ink);
  background: rgba(255,255,255,.74);
}
.nav-contact {
  border-radius: 15px;
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--accent);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .25s ease, transform .25s ease;
}
.nav-contact { margin-left: auto; }
.nav-contact:hover { background: var(--accent-dark); }
.menu-toggle,
.icon-button,
.carousel-control,
.lightbox-close {
  border-radius: 14px;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: rgba(255,255,255,.86);
  cursor: pointer;
}
.menu-toggle svg,
.icon-button svg,
.carousel-control svg,
.lightbox-close svg { width: 20px; height: 20px; }

/*
 * Hamburger panel, Tur 9c. The first version set the links at 29-44px -- a
 * menu that read like a poster and needed the whole screen to say seven words.
 * This is a list now, not a display piece: nav-sized logo, 19px entries on
 * hairlines, a quiet chevron, and the one accent element (Randevu Al) pinned
 * to the bottom. Same markup on all 12 pages -- everything here is CSS-only.
 */
.mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  max-height: 100dvh;
  padding: 12px 22px max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: var(--ink);
  background: #fff;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
  pointer-events: auto;
}
.mobile-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.mobile-panel__top {
  flex: 0 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Same size the closed nav shows it at -- the panel is a menu, not a splash. */
.mobile-panel__top img { width: 128px; height: 72px; object-fit: contain; }
.mobile-panel .icon-button { background: var(--wash); }
.mobile-links {
  display: grid;
  gap: 0;
  margin: 14px 0 auto;
  border-top: 1px solid var(--line);
}
.mobile-links a {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
}
/* The chevron is drawn, not an icon: the panel markup is baked into every
   page, so a sprite reference here would mean touching 12 files. */
.mobile-links a::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-top: 2px solid #c6cacd;
  border-right: 2px solid #c6cacd;
  transform: rotate(45deg);
}
.mobile-links a[aria-current=page] { color: var(--accent); }
.mobile-links a[aria-current=page]::after { border-color: var(--accent); }
.mobile-book {
  border-radius: 16px;
  flex: 0 0 auto;
  min-height: 54px;
  margin-top: 20px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: var(--accent);
  font-size: 16px;
  font-weight: 700;
}
.mobile-book svg { width: 18px; }

.button {
  border-radius: 16px;
  min-height: 50px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.button:hover { transform: translateY(-2px); }
.button svg { width: 18px; height: 18px; }
.button--accent { color: #fff; background: var(--accent); }
.button--accent:hover { background: var(--accent-dark); box-shadow: 0 12px 28px rgba(215,25,66,.23); }
.button--dark { color: #fff; background: var(--ink); }
.button--quiet { border-color: var(--line); background: rgba(255,255,255,.92); }
.button--light { color: var(--ink); background: #fff; }
.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  /* "Tüm Ürünler" was wrapping into two stacked words beside the carousel
     arrows at tablet widths. A section-head link never has room to wrap well. */
  white-space: nowrap;
}
.text-link svg { width: 18px; }

/* Exactly the screen minus the strip above it: the first viewport of the home
   page is one whole composition, with no sliver of the photo hidden under the
   header and nothing needing a scroll to be understood. */
.hero-stage {
  position: relative;
  width: 100%;
  height: calc(100svh - var(--nav-height));
  margin: var(--nav-height) auto 0;
  overflow: hidden;
  background: var(--wash);
}
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(10,11,12,.50));
  pointer-events: none;
}
.hero-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.hero-actions {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-actions .button--quiet { border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.88); }
.hero-meta {
  border-radius: 999px;
  position: absolute;
  z-index: 2;
  left: 18px;
  /* the hero now begins below the header, so this is measured from the hero */
  top: 18px;
  padding: 9px 12px;
  color: #fff;
  background: rgba(22,23,24,.32);
  backdrop-filter: blur(12px);
  font-size: 15px;
  font-weight: 600;
}

.page-section,
.page-intro,
.page-footer {
  width: min(100%, var(--max));
  margin-inline: auto;
  padding-inline: 18px;
}
.page-section { padding-block: 78px; }
.page-section + .page-section { padding-top: 18px; }
/* Measured from the strip alone, not strip + gutter: at the top of the page the
   header sits flush, so the gutter it used to float in no longer exists. */
.page-intro {
  padding-top: calc(var(--nav-height) + 28px);
  padding-bottom: 46px;
}
.page-intro--split { display: grid; gap: 24px; }
.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1 {
  margin-bottom: 16px;
  font-size: clamp(48px, 13.8vw, 92px);
  line-height: .96;
  letter-spacing: -.065em;
}
h2 {
  margin-bottom: 12px;
  font-size: clamp(37px, 9.2vw, 64px);
  line-height: 1;
  letter-spacing: -.055em;
}
h3 {
  margin-bottom: 8px;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.lead {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(20px, 2.65vw, 23px);
  line-height: 1.65;
}
.section-head {
  margin-bottom: 30px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}
/* :not(.eyebrow) -- a bare `.section-head p` is (0,1,1) and would outrank
   `.eyebrow` (0,1,0) on size, colour AND margin, wherever the eyebrow sits
   inside a section head. Same reason on .story-panel__copy p below. */
.section-head p:not(.eyebrow) { max-width: 610px; margin: 0; color: var(--ink-soft); }
.section-actions { display: flex; gap: 8px; }

.editorial-wrap { overflow: hidden; }
.editorial-track,
.products-rail {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.editorial-track::-webkit-scrollbar,
.products-rail::-webkit-scrollbar { display: none; }
/* Fixed rail height, per-card width derived from the card's own ratio: flush top
   and bottom edges with zero cropping. Forcing a shared aspect-ratio instead
   would crop the portraits, which is the defect this rail already fixed once.
   svh (not vh) so the mobile address bar hiding does not resize the track. */
.editorial-track {
  /* 37svh, not 41: the client asked for smaller images on phones, and the cap
     at 300 puts a 4:5 card at 240 CSS px -- which at DPR3 is exactly what the
     720w strip derivative covers, so phones stop pulling the 900w files. */
  --rail-h: clamp(238px, 37svh, 300px);
  margin-inline: -18px;
  padding: 4px 18px 18px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  overflow-anchor: none;
  scroll-behavior: auto;
  scroll-snap-type: x proximity;
  touch-action: pan-x pan-y;
}
.editorial-track[data-auto-scroll] { scroll-snap-type: none; }
.editorial-card {
  border-radius: var(--radius-md);
  position: relative;
  flex: 0 0 auto;
  height: var(--rail-h);
  width: calc(var(--rail-h) * 4 / 5);
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--wash);
  scroll-snap-align: start;
  cursor: zoom-in;
}
.editorial-card--ratio-4-5 { width: calc(var(--rail-h) * 4 / 5); }
.editorial-card--ratio-3-5 { width: calc(var(--rail-h) * 3 / 5); }
.editorial-card--ratio-2-3 { width: calc(var(--rail-h) * 2 / 3); }
.editorial-track.is-user-interacting .editorial-card { cursor: grabbing; }
.editorial-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.editorial-card:hover img { transform: scale(1.025); }
.editorial-card span {
  border-radius: 14px;
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
}
.editorial-card svg { width: 18px; }
.carousel-controls { display: none; gap: 8px; }
.carousel-control { border: 1px solid var(--line); }
.carousel-autoplay-toggle[data-paused="true"] {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
}

.product-section { background: var(--wash); }
.product-section__inner { width: min(100%, var(--max)); margin: auto; padding: 72px 18px; }
.products-rail {
  margin-inline: -18px;
  padding: 4px 18px 22px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(76vw, 318px);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
}
.product-grid {
  display: grid;
  /* Two columns from phone width up. One 324px-wide 2:3 photo per bottle made
     urunlerimiz.html an 8900px scroll of near-fullscreen images -- these are
     plain product shots and read fine at ~165px. Under 360px the ≤359 block
     below still drops to one column. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.product-card {
  border-radius: 22px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: transform .35s ease, box-shadow .35s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 42px rgba(20,22,24,.09); }
.product-card__media {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #f1f2f2;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.025); }
.product-card__sale,
.product-card__badge {
  border-radius: 999px;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 6px 9px;
  color: #fff;
  background: var(--accent);
  font-size: 14px;
  font-weight: 700;
}
.product-card__body {
  min-height: 190px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-card__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.45; }
/* Same trick as .price-link: the one-line title measures 24px, which is under
   the 44px touch guideline, and this link duplicates the card's main link so a
   bigger invisible hit box costs nothing. */
.product-card__title-link { display: inline-block; padding-block: 10px; margin-block: -10px; }
.product-card__price { margin: auto 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.product-card__price strong,
.product-card__current-price { font-size: 18px; font-weight: 700; }
.product-card__price del,
.product-card__old-price { color: #858a8f; font-size: 15px; }
.product-card__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
}
.product-card__media--empty::after { content: "Görsel yüklenemedi"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-soft); font-size: 15px; }
.products-status { min-height: 24px; margin-top: 14px; color: var(--ink-soft); font-size: 16px; }

.story-panel {
  border-radius: var(--radius-lg);
  display: grid;
  gap: 0;
  overflow: hidden;
  color: #fff;
  background: var(--ink);
}
.story-panel__image { min-height: 420px; }
.story-panel__image img { width: 100%; height: 100%; object-fit: cover; }
.story-panel__copy { padding: 34px 24px 40px; align-self: center; }
/* The panel h2 lives in a column, not the full page, so the global 9.2vw slope
   overshoots exactly where the column is narrowest: at 768 the copy column is
   ~212px and a 64px "ihtiyacına" ran flush into the clipped panel edge. 5vw
   lands the same 64px at 1280 and a fitting ~38px at 768. */
.story-panel__copy h2 { font-size: clamp(30px, 5vw, 64px); }
.story-panel__copy p:not(.eyebrow) { max-width: 620px; margin-bottom: 24px; color: #cdd0d3; }
.story-panel__image--products {
  min-height: 420px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  background: #f1f3f3;
}
.story-panel__image--products img {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.fact-list { display: grid; gap: 14px; margin-top: 28px; }
.fact-list div { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); }
.fact-list strong { display: block; margin-bottom: 3px; }
.fact-list span { color: #cdd0d3; font-size: 16px; }

/* No panel at all. A grey card around a portrait and three paragraphs was a
   container drawn for its own sake -- the photograph and the type already sit
   apart from everything else. The section reads as part of the page now. */
.founder {
  display: grid;
  gap: 22px;
  align-items: center;
}
/* His Instagram profile picture, as a circle -- the same thing you would see at
   the top of @ahmetcobain, not a studio portrait. The master is 1254px square,
   so 256px covers this at any device pixel ratio. The full studio photograph
   lives on ahmet-coban.html, which the button underneath links to. */
.founder__media {
  border-radius: 50%;
  margin: 0;
  width: min(34%, 112px);
  aspect-ratio: 1;
  overflow: hidden;
  background: #2b2c2e;
  position: relative;
}
.founder__media img { width: 100%; height: 100%; object-fit: cover; }
/* :not(.eyebrow) -- a bare descendant-p rule is (0,1,1) and would outrank
   .eyebrow (0,1,0) on both colour and size, same trap as .section-head p. */
.founder__copy p:not(.eyebrow):not(.founder__role) { color: var(--ink-soft); }
.founder__copy p:last-of-type { margin-bottom: 0; }
.founder__role {
  margin-bottom: 18px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}
.founder__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* --- Kurucu sayfası --------------------------------------------------------
 * A page you read, not a section you scroll past, so nothing here comes from
 * the display scale the marketing sections use: an h1 at 92px over 400 words
 * is a poster, not a page. One centred column, one type ramp, and a measure
 * that stays near 70 characters at every width.
 */
/* One width for everything on the page. The header rule, the paragraphs and the
   closing rule all end on the same vertical -- 680px, which puts the measure at
   roughly 70 characters at 19px. Two widths meant the rules ran wider than the
   text they were separating. */
.bio-page {
  width: min(680px, calc(100% - 36px));
  margin-inline: auto;
  padding: calc(var(--nav-height) + 26px) 0 88px;
}
.bio-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 600;
  transition: color .2s ease;
}
.bio-back:hover { color: var(--ink); }
.bio-back svg { width: 16px; height: 16px; }

.bio-head {
  display: grid;
  gap: 22px;
  padding: 14px 0 32px;
  border-bottom: 1px solid var(--line);
}
/* 200px, because the source is a 800px web JPEG. Shown any larger it stops
   being a photograph and starts being a compression artefact. */
.bio-head__photo {
  border-radius: var(--radius-md);
  margin: 0;
  width: min(50%, 200px);
  aspect-ratio: 8 / 9;
  overflow: hidden;
  background: #6f6257;
}
.bio-head__photo img { width: 100%; height: 100%; object-fit: cover; }
.bio-head h1 {
  margin-bottom: 10px;
  font-size: clamp(38px, 7.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.bio-head__role { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.55; }

.bio-body { margin-top: 34px; }
.bio-body p { margin-bottom: 20px; color: var(--ink-soft); font-size: 19px; line-height: 1.72; }
.bio-body h2 {
  margin: 46px 0 14px;
  font-size: clamp(24px, 3.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -.03em;
}
.bio-body > *:first-child { margin-top: 0; }
.bio-body a:not(.button) {
  border-bottom: 1px solid var(--line);
  transition: border-color .2s ease;
}
.bio-body a:not(.button):hover { border-bottom-color: var(--ink); }

/* Names and one line each. The full explanation of every one of these already
   lives on sac-tasarimi.html, which is what the headings link to. */
.bio-list { display: grid; margin: 22px 0 0; }
.bio-list > div { padding: 17px 0 18px; border-top: 1px solid var(--line); }
.bio-list h3 { margin-bottom: 4px; font-size: 19px; letter-spacing: -.015em; }
/* Technique names link to sac-tasarimi.html anchors and each sits in its own
   row, so the padded hit box (27px -> 45px) can grow without colliding. */
.bio-list h3 a { display: inline-block; padding-block: 9px; margin-block: -9px; }
.bio-list p { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.6; }

.bio-cta { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--ink); }
.bio-cta p { margin-bottom: 22px; color: var(--ink-soft); font-size: 19px; line-height: 1.72; }
.bio-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 600px) {
  .bio-head { grid-template-columns: 200px minmax(0, 1fr); gap: 30px; align-items: center; }
  .bio-head__photo { width: 100%; }
}

.blog-grid { display: grid; gap: 30px; }
/* A rule across the top instead of a box around the outside -- the same device
   the price list uses, so the two pages speak the same language. */
.blog-card {
  min-height: 220px;
  padding: 18px 0 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
  transition: transform .25s ease;
}
.blog-card:hover { transform: translateY(-3px); }
.blog-card__meta { margin-bottom: auto; color: var(--ink-soft); font-size: 15px; }
.blog-card h3 { margin-top: 42px; font-size: clamp(25px, 4.6vw, 33px); }
.blog-card p { margin-bottom: 20px; color: var(--ink-soft); }
.blog-card .text-link { color: var(--accent); }

.price-page { padding-bottom: 80px; }
/* The price page carries no photography. It used to flank the table with two
   sticky decorative columns plus a mobile strip, all of it re-showing images the
   home rail had already shown -- decoration competing with the one thing the
   page exists to do, which is let someone scan a list. The table now owns the
   page and is capped at a comfortable reading measure instead of stretching to
   the full 1280px. */
.price-layout { display: grid; gap: 28px; width: min(100%, 980px); margin-inline: auto; }
.price-list {
  scroll-margin-top: calc(var(--nav-height) + var(--nav-gutter) + 24px);
  border-top: 1px solid var(--ink);
}
.price-header,
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 17px 2px;
  border-bottom: 1px solid var(--line);
}
.price-header {
  display: none;
  padding-block: 12px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.price-row dt { font-size: 20px; font-weight: 650; line-height: 1.35; }
.price-row dd { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.5; }
/* Footnotes, set as footnotes: a rule and smaller type rather than a grey slab. */
.price-note {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 16px;
}
.price-note p:last-child { margin-bottom: 0; }
/* Price rows that have an explanation behind them. Underlined rather than
   coloured: at 28 rows, 15 accent-red links would read as an error state. */
.price-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  /* These 21 links are the only path from a price row to its explanation, and
     the bare text line is 27px tall. Padding grows the hit box to ~45px and the
     negative margin gives the same space back, so the rows do not move. */
  display: inline-block;
  padding-block: 9px;
  margin-block: -9px;
}
.price-link:hover,
.price-link:focus-visible { text-decoration-color: var(--accent); }

/* --- Uygulama sayfaları (saç tasarımı, makyaj) -------------------------- */
.svc-group + .svc-group { margin-top: 82px; }
/* Four group headings at the full h2 scale would each shout as loudly as the
   page title. This is a directory, so they step down to roughly two-thirds. */
.svc-group .section-head h2 { font-size: clamp(28px, 5.8vw, 38px); }

/*
 * The written entries. This is a list of names, not a set of cards: the
 * pictures above already carry the page, so the words get a single hairline
 * each and nothing else. Rules on the <li> rather than a wrapper, so the two
 * desktop columns line up row by row.
 */
.svc-list {
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  list-style: none;
  border-top: 1px solid var(--line);
}
.svc-item {
  padding: 19px 0 20px;
  border-bottom: 1px solid var(--line);
  /* Clearance for the floating island: fiyat-listesi.html links straight at
     these ids, and the reveal animation still carries translateY(22px) at the
     moment the browser scrolls. */
  scroll-margin-top: calc(var(--nav-height) + var(--nav-gutter) + 44px);
  transition: padding-left .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-item h3 { margin: 0 0 5px; font-size: 19px; line-height: 1.32; }
.svc-item p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.62; }
/* A jumped-to entry is marked down its own edge. Nothing on these pages is a
   box any more, so highlighting one with a border would invent a shape. */
.svc-item:target { padding-left: 15px; box-shadow: inset 3px 0 0 var(--accent); }

.svc-ask {
  min-height: 44px;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 700;
}
.svc-ask:hover { color: var(--accent-dark); }

/* Same dark slab the home page closes its Garage Organics section with. */
.svc-close {
  border-radius: var(--radius-lg);
  margin-top: 86px;
  padding: 38px 24px 42px;
  color: #fff;
  background: var(--ink);
}
.svc-close h2 { margin-bottom: 12px; font-size: clamp(30px, 6.4vw, 42px); }
.svc-close p { max-width: 560px; margin-bottom: 26px; color: #cdd0d3; }
.svc-close__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-close .button--quiet { border-color: rgba(255,255,255,.34); background: transparent; color: #fff; }
.svc-close .button--quiet:hover { border-color: #fff; }

.gallery-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-grid {
  columns: 2;
  column-gap: 10px;
  padding-bottom: 80px;
}
.gallery-item {
  border-radius: 16px;
  position: relative;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  display: block;
  break-inside: avoid;
  overflow: hidden;
  border: 0;
  background: var(--wash);
  cursor: zoom-in;
}
/* The 20px placeholder is painted as the card background, so the card has
   colour from the first frame and the real image cross-fades in over it --
   no white flash, no reflow. width/height on the <img> reserve the box. */
.gallery-item {
  background-size: cover;
  background-position: center;
}
.gallery-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity .4s ease, transform .45s ease;
}
/* The fade is gated on a class JS adds, so with JS off or broken the images are
   simply visible rather than stuck at opacity 0. */
.is-enhanced .gallery-item img { opacity: 0; }
.is-enhanced .gallery-item img[data-loaded] { opacity: 1; }
.gallery-item:hover img { transform: scale(1.025); }
.video-badge {
  border-radius: 50%;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
}
.video-badge svg { width: 17px; fill: currentColor; }

.contact-page {
  min-height: 100svh;
  padding: calc(var(--nav-height) + 28px) 18px 70px;
  display: grid;
  gap: 28px;
}
.contact-copy h1 { margin-bottom: 28px; }
.contact-copy address { margin-bottom: 26px; color: var(--ink-soft); font-size: 21px; }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 9px; }
.contact-details { margin: 34px 0 0; }
.contact-details div { padding: 14px 0; border-top: 1px solid var(--line); }
.contact-details dt { margin-bottom: 3px; color: var(--ink-soft); font-size: 15px; }
.contact-details dd { margin: 0; font-weight: 650; }
/* The number itself is what people tap on a contact page. Padded hit box, rows
   stay put -- same trick as .price-link. */
.contact-details dd a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.map-card {
  border-radius: var(--radius-lg);
  position: relative;
  min-height: 460px;
  overflow: hidden;
  background: var(--wash);
}
.map-card iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.92); }
.map-logo-marker {
  border-radius: 18px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 152px;
  height: 92px;
  padding: 8px 10px;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent);
  background: #fff;
  box-shadow: 0 12px 30px rgba(15,17,18,.22);
  transform: translate(-50%, -50%);
}
.map-logo-marker::after {
  content: "";
  position: absolute;
  bottom: -9px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
.map-logo-marker img { position: relative; z-index: 1; width: 128px; height: 72px; object-fit: contain; }

.page-footer {
  padding-top: 34px;
  padding-bottom: max(34px, env(safe-area-inset-bottom));
  display: grid;
  gap: 24px;
  border-top: 1px solid var(--line);
}
.footer-main { display: grid; gap: 12px; }
.footer-main strong { font-size: 21px; }
.footer-main p { max-width: 520px; margin: 0; color: var(--ink-soft); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 16px; font-weight: 650; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-legal { color: var(--ink-soft); font-size: 15px; }

.lightbox {
  --lb-inset-top: 68px;
  --lb-inset-bottom: 20px;
  position: fixed;
  inset: 0;
  z-index: 150;
  padding: var(--lb-inset-top) 12px var(--lb-inset-bottom);
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  background: rgba(11,12,13,.68);
  backdrop-filter: blur(18px);
  transition: opacity .28s ease, visibility .28s;
}
.lightbox.is-open { visibility: visible; opacity: 1; }
/*
 * The dialog shrink-wraps the media -- it must NOT carry its own width/height.
 * It used to be `display:grid` with a fixed height, which made the media's
 * `max-height:100%` resolve against the grid ROW, and the row was sized by the
 * media itself. The constraint was circular, so it never bound: a 1122x1402
 * photo rendered 900x1125 inside a 738px box and hung 332px off the screen.
 * Sizing the media against the viewport instead removes the containing-block
 * chain entirely, so there is nothing left to be circular.
 */
.lightbox-dialog { position: relative; display: block; max-width: 100%; }
.lightbox-media {
  border-radius: 18px;
  display: block;
  width: auto;
  height: auto;
  max-width: min(100vw - 24px, 1180px);
  max-height: calc(100svh - var(--lb-inset-top) - var(--lb-inset-bottom));
  box-shadow: var(--shadow);
}
/* Videos carry no intrinsic size until metadata loads, and preload="none" means
   that may be never -- openLightbox() copies the poster's ratio onto the element
   so the box is correct on the very first frame. */
.lightbox video.lightbox-media { background: #000; object-fit: contain; }
.lightbox-close {
  position: absolute;
  right: 0;
  top: -54px;
  color: #fff;
  background: rgba(255,255,255,.16);
}

.reveal,
.reveal-media,
.product-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
}
.reveal-media { transform: translateY(28px) scale(.99); }
.is-visible { opacity: 1; transform: none; }
.products-rail .product-card { transform: translateX(28px); }
.products-rail .product-card.is-visible { transform: none; }
.products-rail .product-card:nth-child(2) { transition-delay: 70ms; }
.products-rail .product-card:nth-child(3) { transition-delay: 140ms; }
.products-rail .product-card:nth-child(4) { transition-delay: 210ms; }
.products-rail .product-card:nth-child(n+5) { transition-delay: 280ms; }

@media (max-width: 519px) {
  /* `> *` rather than `> div` -- one section head's second child is a bare <a>,
     not a .section-actions wrapper, and would otherwise behave differently. */
  .section-head { flex-wrap: wrap; align-items: flex-start; gap: 14px; }
  .section-head > *:first-child { flex: 1 1 100%; min-width: 0; }
  .section-head > *:last-child { margin-left: auto; }

  /* Phone type scale (Tur 9). The display clamps below bottom out around 48px,
     which reads as a poster on a 360px screen -- the 2026-08 mobile audit
     measured ~50px h1s on every page. These floors were tuned on device
     screenshots: large enough to keep the site's voice, small enough that a
     title is a title and not the first viewport's main content. Body text
     stays 18px on purpose (final_check asserts it) -- the oversized things
     were the headings, not the copy. */
  h1 { font-size: clamp(36px, 10.6vw, 42px); }
  h2 { font-size: clamp(29px, 8.2vw, 33px); }
  .lead { font-size: 18px; }

  /* The desktop section rhythm (78px) stacks up on a phone where every section
     is one column tall anyway. 56 keeps the grouping legible in one thumb. */
  .page-section { padding-block: 56px; }
  .page-intro { padding-bottom: 34px; }
  .svc-group + .svc-group { margin-top: 60px; }
  .svc-close { margin-top: 62px; }
  .product-section__inner { padding-block: 52px; }
  .product-card__body { min-height: 0; padding: 12px; gap: 8px; }

  /* Product cards at gallery-tile scale (Tur 9b). The home rail was still
     dealing 76vw cards -- a whole viewport of bottle per swipe -- while the
     gallery rail next to it had moved down to ~240px tiles. 54vw lands a
     390px phone on 210px cards. The 3/4 media crop is safe: every product
     photo carries generous built-in white margins, so nothing is clipped. */
  .products-rail { grid-auto-columns: min(54vw, 210px); gap: 12px; }
  .product-card__media { aspect-ratio: 3 / 4; }
  .product-card__title { font-size: 16px; line-height: 1.4; }
  .product-card__price strong,
  .product-card__current-price { font-size: 16px; }
  .product-card__price del,
  .product-card__old-price { font-size: 13px; }
  .product-card__link { font-size: 15px; }
  .product-card__sale,
  .product-card__badge { padding: 5px 8px; font-size: 12px; }
}

@media (min-width: 520px) {
  .product-grid { gap: 18px; }
  .gallery-grid { columns: 3; column-gap: 12px; }
  .gallery-item { margin-bottom: 12px; }
}

@media (min-width: 760px) {
  .nav-links { display: flex; }
  .menu-toggle { display: none; }
  .nav-contact { margin-left: 0; }
  .hero-actions { left: 30px; bottom: max(30px, env(safe-area-inset-bottom)); }
  .hero-meta { left: 30px; top: 26px; }
  .page-section { padding-inline: 28px; padding-block: 104px; }
  .page-intro { padding: calc(var(--nav-height) + 40px) 28px 64px; }
  .product-section__inner { padding: 94px 28px; }
  .section-head { margin-bottom: 38px; }
  .editorial-track { margin-inline: -28px; padding-inline: 28px; gap: 16px; --rail-h: clamp(300px, 44svh, 400px); }
  .carousel-controls { display: flex; }
  .products-rail { margin-inline: -28px; padding-inline: 28px; gap: 18px; grid-auto-columns: 315px; }
  .story-panel { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .story-panel__image { min-height: 620px; }
  .story-panel__copy { padding: 58px; }
  /* start, not center: an avatar belongs beside the name, not floating halfway
     down the bio. The nudge lines its top edge up with the "Kurucu" eyebrow. */
  .founder { grid-template-columns: 112px minmax(0, 1fr); gap: 28px; align-items: start; }
  .founder__media { margin-top: 6px; }
  .founder__media { width: 100%; }
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blog-card { min-height: 300px; padding: 22px 0 0; }
  .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 46px; }
  .svc-item { padding: 21px 0 22px; }
  .svc-close { padding: 50px 44px 52px; }
  .price-header,
  .price-row { grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); gap: 28px; align-items: center; }
  .price-header { display: grid; }
  .price-row { padding: 19px 4px; }
  .price-row dd { text-align: right; }
  .gallery-grid { columns: 4; column-gap: 14px; }
  .gallery-item { margin-bottom: 14px; border-radius: 20px; }
  .contact-page { width: min(100%, var(--max)); margin: auto; padding: calc(var(--nav-height) + 40px) 28px 90px; grid-template-columns: minmax(330px,.75fr) minmax(0,1.25fr); align-items: stretch; }
  .page-footer { padding-inline: 28px; grid-template-columns: 1.2fr 1fr; align-items: end; }
  .footer-links { justify-content: flex-end; }
  .footer-legal { grid-column: 1 / -1; }
}

/* The tight band: below --nav-cap the island's width comes from the viewport,
   so six links plus the logo and the CTA only fit on reduced padding. Measured,
   not guessed. Under 760px the hamburger takes over and none of this applies. */
@media (min-width: 760px) and (max-width: 1059px) {
  /* a narrower gutter buys island width back at exactly the sizes that need it */
  :root { --nav-gutter: 10px; }
  .nav-links { gap: 0; }
  .nav-links a { padding-inline: 6px; font-size: 15px; }
  .nav-contact { padding-inline: 10px; }
  /* Link widths are the one part of this bar that content can change -- if
     Manrope fails to load, Arial sets the labels wider. object-fit keeps the
     lockup undistorted, so trimming the logo box is the safest slack to buy. */
  .nav-brand,
  .nav-brand img { min-width: 112px; width: 112px; }
}

@media (min-width: 1060px) {
  .nav-links a { padding-inline: 13px; }
  .nav-contact { padding-inline: 16px; }
}
@media (min-width: 900px) {
  .editorial-track { --rail-h: clamp(330px, 46svh, 440px); gap: 18px; }
  /* The split intro needs a first column that actually fits a 92px h1. At 768
     it got 368px and "Ürünlerimiz" ran under the lead paragraph, so the split
     starts here instead -- tablets read the stacked one-column intro. */
  .page-intro--split { grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); align-items: end; }
}

@media (min-width: 1020px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 359px) {
  :root { --nav-brand-h: 63px; }
  .nav-brand { min-width: 112px; }
  .nav-brand img { width: 112px; height: 63px; }
  .nav-contact { padding-inline: 12px; font-size: 15px; }
  .hero-actions { gap: 8px; }
  .button { padding-inline: 14px; }
  .editorial-track { --rail-h: clamp(220px, 34svh, 270px); }
  /* Two product columns hold even here: a 340px phone gives ~152px cells and
     the bottle shots read fine. One column meant one huge card per screen,
     which is exactly what Tur 9b was asked to shrink. */
  .product-grid { gap: 10px; }
  .gallery-grid { columns: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-media, .product-card { opacity: 1; transform: none; }
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }