/* ============================================================================
   USCA 2026 — main stylesheet
   Mobile-first. Flexbox + Grid. No floats. No JS dependencies for layout.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* =========================================================================
     🎛️  DESIGN KNOBS — EDIT THESE NUMBERS TO TUNE THE HOME PAGE.
     Save the file, hard-refresh (Ctrl+Shift+R) in the browser.
     Every value below drives a real visible dimension — try 1–2 at a time.
     ======================================================================== */

  /* — Home content horizontal positioning — */
  --home-pad-left:           6rem;     /* how far content sits from the viewport's left side */
  --home-pad-right:          2rem;     /* padding on the right edge */

  /* — The Urla'da Butik split section (heading + body paragraph) — */
  --home-split-gap:          2.5rem;   /* space between the heading column and the body paragraph */
  --home-heading-size:       1.95rem;  /* max font-size of "URLA'DA BUTİK BİR ŞARAPHANE" */
  --home-heading-kern:      -.12em;    /* horizontal nudge for heading (compensates Cinzel side-bearing) */
  --home-body-size:          .98rem;   /* body paragraph font-size */
  --home-body-width:         720px;    /* body paragraph max line length */
  --home-body-line-height:   1.7;      /* body paragraph line height */

  /* — USCA paragraph (below the timeline) — */
  --usca-paragraph-size:     .98rem;
  --usca-paragraph-width:    720px;
  --usca-paragraph-line-height: 1.75;

  /* — Vertical spacing between home sections — */
  --home-section-gap:        2.5rem;   /* space between split → timeline → usca */

  /* =========================================================================
     END design knobs. Below are the base palette + scale tokens.
     ======================================================================== */

  /* Palette */
  --wine:        #5b1a26;
  --wine-dark:   #3d0f1a;
  --cream:       #f5ede3;
  --cream-soft:  #faf6f1;
  --gold:        #b98f4e;
  --gold-light:  #d4ad6e;
  --ink:         #2d1810;
  --ink-soft:    #5a4438;
  --gray:        #8a8583;          /* menu text — warmer than Vino's #939598 */
  --gray-soft:   #c9c9cc;
  --border:      #e6dfd3;

  /* Page canvas — warm off-white, not pure #fff.
     Sits between the old cream and plain white, so the page feels softer
     without reading as "beige card". Tweak from here in one place. */
  --bg:          #fbf7f0;

  /* Type scale */
  --ff-display:  'Cinzel', 'Times New Roman', serif;
  --ff-body:     'Catamaran', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --container:   1240px;
  --narrow:      720px;
  --header-h:    82px;
  --header-h-mobile: 58px;

  /* Scale */
  --space-1:     .5rem;
  --space-2:     1rem;
  --space-3:     1.5rem;
  --space-4:     2.5rem;
  --space-5:     4rem;
  --space-6:     6rem;
}

/* =========================================================================
   📱 MOBILE DESIGN KNOBS — overrides for narrow viewports.
   Tweak these to tune the phone experience without touching desktop.
   ======================================================================== */
@media (max-width: 720px) {
  :root {
    --home-pad-left:           1.25rem;   /* desktop 6rem → readable on 375px */
    --home-pad-right:          1.25rem;
    --home-split-gap:          1.25rem;
    --home-heading-size:       1.5rem;    /* slightly smaller on phone */
    --home-body-size:          1rem;      /* 16px — iOS won't auto-zoom */
    --home-body-line-height:   1.65;
    --usca-paragraph-size:     1rem;
    --usca-paragraph-line-height: 1.7;
    --home-section-gap:        1.75rem;
  }
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Block horizontal scroll caused by full-bleed page-heroes
     (width: 100vw + scrollbar = a 1-17px overhang). `clip` is preferred
     over `hidden` — doesn't create a new containing block, so position:
     sticky inside the page still works. */
  overflow-x: clip;
}
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Mobile bumps body to 16px so iOS Safari does not auto-zoom on form focus,
   and so general copy reads comfortably without pinch-zoom. */
@media (max-width: 720px) {
  body { font-size: 16px; line-height: 1.65; }
}

/* ============================================================================
   DESIGN RULE — NO WIDOW WORDS (EVER).
   A dangling last line with 1 OR 2 words is a widow and looks cheap.
   Two-layer defence:
     1. `text-wrap: pretty / balance` — browser-native rebalancing (Chrome 117+,
        Safari 17.4+, Firefox 128+). Helps but doesn't guarantee > 2 words.
     2. JS helper in nav.js (`applyNoWidow`) — walks every paragraph/heading
        on load and rewrites the last 2–3 spaces as non-breaking spaces, so the
        trailing N words behave as one unbreakable atom.
   Any new text component should (a) go through the JS helper's selectors or
   (b) add `text-wrap: pretty` / `balance` here explicitly.
   ========================================================================== */
p, li, blockquote, .section-paragraph, .home-intro, .lead {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6,
.section-title, .home-title {
  text-wrap: balance;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--wine); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold); }

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--wine-dark);
  letter-spacing: .05em;
  line-height: 1.3;
  margin: 0 0 .5em;
}

h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}

h2 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  margin-top: 1.6em;
  margin-bottom: .7em;
}

h3 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: .04em; }

p  { margin: 0 0 1.1em; font-weight: 300; }
p em, p i { color: var(--ink-soft); }
strong    { color: var(--ink); font-weight: 600; }

/* Quote */
blockquote, .wp-block-quote {
  margin: var(--space-5) auto;
  padding: var(--space-3) var(--space-2);
  max-width: 580px;
  text-align: center;
  font-style: italic;
  font-size: 1.1em;
  color: var(--wine-dark);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  border-left: 0;
  background: transparent;
}

/* Lists */
ul, ol { margin: 0 0 1.4em; padding-left: 1.4em; line-height: 1.9; }
li { margin: .25em 0; }

/* Gold accent rule under headings — used by h1.entry-title */
hr {
  border: 0;
  height: 1px;
  background: var(--gold);
  margin: 2em auto;
  max-width: 80px;
}

/* ============================================================================
   HEADER  —  [ 4 menu ]  [ LOGO ]  [ 4 menu ]
   ========================================================================== */
/* Header renders as an SVG shape — flat bar with a trapezoid pendant cut
   into its bottom edge. Single continuous cream fill, not a separate drop.
   The SVG's `currentColor` picks up `.site-header { color: var(--bg) }`.
   Pendant region extends 60px below the menu row (120px flat + 60px pendant
   = 180px total header height). */
.site-header {
  position: relative;
  width: 100%;
  background: transparent;
  color: var(--bg);
  z-index: 100;
  padding-bottom: 25px;      /* V depth — back to original */
}
.site-header__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 720px) {
  .site-header {
    padding-bottom: 18px;       /* mobile — original */
  }
}

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 2rem;
  position: relative;
  z-index: 1;
}

/* ---- Logo + decorative curve ------------------------------------------- */
.site-header__logo {
  position: relative;
  text-align: center;
  line-height: 0;
}
.site-header__logo a {
  display: inline-block;
  line-height: 0;
}
.site-header__logo img {
  max-height: 84px;
  width: auto;
  display: block;
}
/* curve under logo removed — cleaner landing */
.site-header__logo-curve { display: none; }

/* ---- Menu halves ------------------------------------------------------- */
.site-header__menu-left  { justify-self: end;   }
.site-header__menu-right { justify-self: start; }

.usca-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
  align-items: center;
}

.usca-menu li { margin: 0; }

.usca-menu a {
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
  padding: 1.5rem 0;
  position: relative;
  transition: color .25s ease;
}

/* Subtle gold underline on hover/active */
.usca-menu a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: .9rem;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .3s ease, left .3s ease;
}
.usca-menu a:hover,
.usca-menu .current-menu-item > a,
.usca-menu .current_page_item > a {
  color: var(--gold);
}
.usca-menu a:hover::after,
.usca-menu .current-menu-item > a::after,
.usca-menu .current_page_item > a::after {
  width: 24px;
  left: calc(50% - 12px);
}

/* ---- Mobile header ----------------------------------------------------- */
.site-header__mobile-trigger {
  display: none;
  border: 0;
  background: transparent;
  padding: .5em;
  cursor: pointer;
  color: var(--wine-dark);
}
.site-header__mobile-trigger svg { width: 28px; height: 28px; }

.site-header__mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  z-index: 1;
}
.site-header__mobile-menu.is-open { display: block; }
.site-header__mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 1em 0;
  display: flex;
  flex-direction: column;
}
.site-header__mobile-menu li { margin: 0; }
.site-header__mobile-menu a {
  display: block;
  padding: .95em 2rem;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.site-header__mobile-menu a:hover { background: var(--cream-soft); color: var(--gold); }

@media (max-width: 920px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    padding: 0 1rem;
    height: var(--header-h-mobile);
  }
  .site-header__menu-left,
  .site-header__menu-right { display: none; }
  .site-header__logo { justify-self: center; }
  .site-header__logo img { max-height: 52px; }
  .site-header__logo-curve { display: none; }
  .site-header__mobile-trigger { display: inline-flex; justify-self: end; align-items: center; }
}

/* ============================================================================
   CONTENT
   ========================================================================== */
.site-main { min-height: 60vh; background: var(--bg); }

.content-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Inner-page article wrapper */
.site-main article {
  padding: var(--space-5) 0 var(--space-6);
}

/* ---- Entry title — centered with gold accent underneath ---------------- */
.entry-header {
  text-align: center;
  padding: var(--space-3) 0 var(--space-4);
  position: relative;
}
.entry-title {
  margin: 0 auto .7em;
  max-width: 900px;
  text-align: center;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Gold accent line under the entry title */
.entry-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 1.2em auto 0;
}

/* ---- Entry content ----------------------------------------------------- */
.entry-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink);
}

/* Text blocks constrained to readable width; images/covers stay wide */
.entry-content > p,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > .wp-block-paragraph,
.entry-content > .wp-block-heading,
.entry-content > .wp-block-list,
.entry-content > .wp-block-quote {
  max-width: var(--narrow);
  margin-left: auto;
  margin-right: auto;
}

/* Center-aligned paragraphs have extra breathing room */
.entry-content > p.has-text-align-center {
  max-width: 640px;
  margin-top: 2em;
  margin-bottom: 2em;
}

/* Full-width blocks */
.entry-content > .wp-block-cover,
.entry-content > .wp-block-image.alignfull,
.entry-content > .wp-block-gallery,
.entry-content > .alignfull {
  max-width: none;
}

/* Inline headings within entry content — smaller top margin than top-level h2 */
.entry-content h2 { margin-top: 2.2em; }
.entry-content h3 { margin-top: 1.8em; }
.entry-content h2 + p,
.entry-content h3 + p { margin-top: .4em; }

/* ============================================================================
   HOME PAGE — multi-section flow (hero → intro → timeline → wines → urla → team)
   ========================================================================== */
.is-home .site-main article { padding-top: 0; }
.is-home .entry-content > .wp-block-cover:first-child {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* !important needed — the Cover block saves an inline min-height from the editor */
  min-height: 280px !important;
  height: 36vh !important;
  max-height: 36vh !important;
  margin-top: 0;
  margin-bottom: 0;
}
/* Phones in portrait want a taller hero — 36vh of a tall narrow screen
   reads as a thin band. 58vh feels like a hero, not a strip. */
@media (max-width: 720px) {
  .is-home .entry-content > .wp-block-cover:first-child {
    min-height: 320px !important;
    height: 58vh !important;
    max-height: 58vh !important;
  }
}
.is-home .entry-content > .wp-block-cover:first-child img,
.is-home .entry-content > .wp-block-cover:first-child video {
  object-position: center 40%;
}

/* ---- Buttons ----------------------------------------------------------- */
.wp-block-button__link,
.usca-button,
button.usca,
input[type="submit"] {
  display: inline-block;
  padding: .95em 2.4em;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--wine);
  border: 1px solid var(--wine);
  border-radius: 0;
  cursor: pointer;
  transition: all .25s ease;
}
.wp-block-button__link:hover,
.usca-button:hover,
button.usca:hover,
input[type="submit"]:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cream);
}

/* ---- Figures ----------------------------------------------------------- */
figure { margin: 2rem 0; }
figcaption { text-align: center; color: var(--ink-soft); font-size: .9rem; margin-top: .5em; }

/* ============================================================================
   FOOTER — 4-column layout, cream palette (matches reference, cleaner)
   ========================================================================== */
.site-footer {
  background: var(--cream);
  color: var(--wine-dark);
  font-family: var(--ff-body);
  font-weight: 300;
  letter-spacing: .02em;
  font-size: .88rem;
  line-height: 1.45;
  position: relative;
  margin-top: var(--space-3);        /* was space-6 — was creating 14rem+ gap above */
}
/* (Removed: thin gold accent line at the very top of the footer —
   felt like stray dash floating between the nav grid and footer.) */

.site-footer__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);   /* even tighter top/bottom */
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  column-gap: var(--space-5);
  row-gap: var(--space-3);
  align-items: start;
}

/* ---- shared column heading ---- */
.site-footer__heading {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--wine-dark);
  margin: 0 0 .55rem;        /* tighter heading-to-content gap */
  padding-bottom: .3rem;
  text-transform: uppercase;
  position: relative;
}
.site-footer__heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 1px;
  background: var(--gold);
}

/* ---- column 1 — brand + social (centered stack, icons hug the logo) ---- */
.site-footer__brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-footer__logo {
  display: inline-block;
  margin-bottom: .35rem;  /* pull icons right up under the logo */
}
.site-footer__logo img {
  max-width: 120px;
  height: auto;
  display: block;
}
.site-footer__wordmark {
  font-family: var(--ff-display);
  font-size: 26px;
  letter-spacing: .22em;
  color: var(--wine-dark);
}

.site-footer__social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: .45rem;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--wine);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.site-footer__social svg {
  width: 12px;
  height: 12px;
}
.site-footer__social a:hover {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--cream);
  transform: translateY(-1px);
}

/* ---- column 2 — contact (left-aligned under the heading's gold line) ---- */
.site-footer__contact { text-align: left; }
.site-footer__contact .site-footer__heading { display: inline-block; }
/* Underline anchors to the left edge of the heading text (default behaviour
   of .site-footer__heading::after) — nothing overridden here. */
.site-footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;           /* rows left-aligned under the heading */
  gap: .35rem;
}
.site-footer__contact-list li {
  display: grid;
  grid-template-columns: 16px auto;
  gap: .6rem;
  align-items: start;
  line-height: 1.4;
  font-size: .85rem;
  text-align: left;
}
.site-footer__icon {
  width: 14px;
  height: 14px;
  color: var(--gold);
  margin-top: 3px;
  flex-shrink: 0;
}
.site-footer__contact-list a {
  color: var(--wine-dark);
  font-weight: 300;
  letter-spacing: .01em;
}
.site-footer__contact-list a:hover { color: var(--gold); }

/* ---- column 3 — menu: 3×3 grid, heading is clickable, left-aligned ---- */
.site-footer__quick { text-align: left; }
.site-footer__quick .site-footer__heading { display: inline-block; }
/* underline defaults to left (no override needed) */
.site-footer__heading-link {
  color: inherit;
  transition: color .2s ease;
}
.site-footer__heading-link:hover { color: var(--gold); }

.site-footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;                         /* left-aligned with heading above */
  display: grid;
  width: fit-content;
  grid-template-columns: repeat(3, max-content);
  column-gap: 1rem;
  row-gap: .15rem;
  justify-items: start;
}
.site-footer__menu li { line-height: 1.3; text-align: left; }
.site-footer__menu a {
  display: inline-block;
  color: var(--wine-dark);
  font-weight: 300;
  font-size: .85rem;
  letter-spacing: .02em;
  transition: color .2s ease;
  white-space: nowrap;
}
.site-footer__menu a:hover { color: var(--gold); }

/* KVKK column removed — link now lives in the bottom bar */

/* ---- bottom copyright bar — seamless, whisper-quiet ---- */
.site-footer__bar {
  background: var(--cream);
  color: var(--wine-dark);
  text-align: center;
  font-size: .68rem;
  font-weight: 300;
  letter-spacing: .08em;
  opacity: .55;
  border-top: 1px solid rgba(185, 143, 78, .18);
}
.site-footer__bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .5rem var(--space-3);
}
.site-footer__bar a { color: var(--wine-dark); font-weight: 400; }
.site-footer__bar a:hover { color: var(--gold); }
.site-footer__bar strong { color: var(--wine-dark); font-weight: 500; letter-spacing: .1em; }
.site-footer__bar-sep { margin: 0 .4em; opacity: .5; }
.site-footer__bar-kvkk {
  color: var(--wine-dark);
  font-weight: 300;
}
.site-footer__bar-kvkk:hover { color: var(--gold); }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-4);
  }
  .site-footer__brand { grid-column: 1 / -1; text-align: center; }
  .site-footer__brand .site-footer__social { justify-content: center; }
}
@media (max-width: 600px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-4) var(--space-2);
  }
  .site-footer__heading { display: inline-block; }
  .site-footer__heading::after { left: 50%; transform: translateX(-50%); }
  .site-footer__contact-list li { grid-template-columns: 20px auto; justify-content: center; text-align: left; }
  .site-footer__menu { max-width: 260px; margin: 0 auto; }
  .site-footer__qr, .site-footer__qr-placeholder { margin-left: auto; margin-right: auto; }
  .site-footer__qr-placeholder { margin-top: var(--space-2); }
}

/* ============================================================================
   WP admin-bar offset
   ========================================================================== */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* ============================================================================
   COMPONENTS — sections, timeline, cards
   ========================================================================== */

/* Section dividers */
.usca-rule,
hr.usca-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
  margin: var(--space-3) auto;
  max-width: var(--container);
}

/* Section titles — refined, restrained */
.section-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 500;
  color: var(--wine-dark);
  margin: var(--space-4) auto var(--space-2);
  position: relative;
}
.section-title::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin: .9em auto 0;
}

/* Section paragraphs — centered, comfortable measure */
.section-paragraph {
  max-width: 720px;
  margin: 0 auto var(--space-3) !important;
  font-size: .88rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.75;
}
.section-paragraph--italic {
  font-style: italic;
  color: var(--ink);
}

.lead {
  font-size: .95rem;
  font-weight: 300;
  max-width: 720px;
  margin: var(--space-3) auto !important;
  color: var(--ink-soft);
  line-height: 1.75;
  text-align: center;
}

/* Entire home page has its own content padding because of full-width blocks */
.is-home .entry-content {
  padding: 0 0 var(--space-2);       /* was space-5 — closes the gap before footer */
}

/* Home hero heading — restrained, not monumental */
.is-home .entry-content > .home-title {
  text-align: center;
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wine-dark);
  max-width: 720px;
  margin: var(--space-4) auto var(--space-2);
  padding: 0 1rem;
  line-height: 1.25;
}
.is-home .entry-content > .home-title::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin: .9em auto 0;
}
.is-home .entry-content > .home-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-3);
  padding: 0 1.5rem;
  font-size: .88rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.75;
}

/* ---- Designed-page top-spacing — UNIFIED (Bağlar + Üretim identical) ---
   Both wrappers use the same padding-top so the title sits at the exact
   same vertical position on every page that wraps content this way. */
.baglar-page,
.uretim-page,
.saraplar-page {
  padding-top: 0;
}
.baglar-page > .section-title:first-child,
.uretim-page  > .section-title:first-child,
.saraplar-page > .section-title:first-child {
  margin-top: 0;                            /* pulled as high as possible */
}

.baglar-page .lead {
  margin: .5em auto 1.2em !important;       /* override .lead's space-3 */
}

.vineyard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  max-width: var(--container);
  margin: 1em auto var(--space-4);
  padding: 0 var(--space-3);
}
/* Vineyard card — vertical, tall, parallax-friendly, beveled corners.
   Whole card is the link; image is the section background; title + desc
   sit in a cream band at the bottom. Hover: lift + gold shadow + label flip
   (consistent with the home nav grid). */
/* New structure: <a class="vineyard-card">
                    <div class="vineyard-card__media usca-parallax"></div>
                    <div class="vineyard-card__caption">…</div>
                  </a>
   The media is the visual area (parallax background-image); the caption sits
   below it as a sibling, not an absolute overlay. */
.vineyard-card {
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  background: var(--cream-soft);
  transition: transform .35s ease, box-shadow .35s ease;
}
.vineyard-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform .35s ease, box-shadow .35s ease;
}
.vineyard-card__caption {
  /* Caption is BELOW the image (block flow), not overlay */
  padding: 1em 1.1em 1.2em;
  text-align: center;
  background: var(--cream-soft);
  color: var(--wine-dark);
  transition: background .3s ease, color .3s ease;
}
.vineyard-card__title {
  /* Match Bağlar's H1 (.section-title) sizing for consistency */
  font-family: var(--ff-display);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wine-dark);
  margin: 0 0 .55em;
  transition: color .3s ease;
}
.vineyard-card__desc {
  font-size: .85rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  transition: color .3s ease;
}
.vineyard-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(185, 143, 78, .25);
}
.vineyard-card:hover .vineyard-card__caption {
  background: var(--gold);
}
.vineyard-card:hover .vineyard-card__title { color: var(--cream); letter-spacing: .16em; }
.vineyard-card:hover .vineyard-card__desc  { color: var(--cream); opacity: .9; }

@media (max-width: 780px) {
  .vineyard-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .vineyard-card__media { aspect-ratio: 16 / 10; }
}

/* ---- 2-column split: heading (left) + body (right) on the home intro ---
   Per PDF feedback: the heading stays compact on one side, while the body
   text next to it is slightly larger. Collapses to stacked on narrow screens. */
.home-hero-split {
  display: grid;
  grid-template-columns: auto 1fr;    /* heading | body (default 2-col) */
  gap: var(--home-split-gap);
  max-width: var(--container);
  margin: var(--space-4) auto var(--home-section-gap);
  padding: 0 var(--home-pad-right) 0 var(--home-pad-left);
  align-items: center;
}
/* Variant with image on the right — heading | body (narrower) | image */
.home-hero-split--has-image {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.home-hero-split__image {
  margin: 0;
  width: 320px;
  max-width: 100%;
}
.home-hero-split__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 960px) {
  .home-hero-split--has-image {
    grid-template-columns: auto 1fr;
  }
  .home-hero-split__image { grid-column: 1 / -1; width: 100%; max-width: 720px; justify-self: center; }
}
.home-hero-split__title {
  font-family: var(--ff-display);
  font-size: clamp(1.35rem, 2.1vw, var(--home-heading-size));
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wine-dark);
  margin: 0 0 0 var(--home-heading-kern);
  line-height: 1.35;
  text-align: left;
  width: min-content;                 /* each word on its own line → 4 rows */
}
/* USCA variant sits below the timeline — add vertical air above it */
.home-hero-split--usca {
  margin-top: var(--space-4);
}

/* Plain USCA paragraph below the timeline — left edge aligns with the
   "URLA'DA BUTİK" heading above for a clean editorial flow. Paragraph has
   its own max-width for comfortable reading. */
.home-usca-block {
  max-width: var(--container);
  margin: var(--home-section-gap) auto var(--space-3);
  padding: 0 var(--home-pad-right) 0 var(--home-pad-left);
}
.home-usca-block p {
  margin: 0;
  max-width: var(--usca-paragraph-width);
  font-size: var(--usca-paragraph-size);
  font-weight: 300;
  color: var(--ink-soft);
  line-height: var(--usca-paragraph-line-height);
  text-wrap: pretty;
}
/* Variant with image on the right — paragraph (left) | image (right) */
.home-usca-block--has-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--home-split-gap);
  align-items: center;
}
.home-usca-block__image {
  margin: 0;
  width: 320px;
  max-width: 100%;
}
.home-usca-block__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 960px) {
  .home-usca-block--has-image {
    grid-template-columns: 1fr;
  }
  .home-usca-block__image { width: 100%; max-width: 720px; justify-self: center; }
}
.home-hero-split__body p {
  font-size: var(--home-body-size);
  font-weight: 300;
  max-width: var(--home-body-width);
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .home-hero-split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-2);
  }
}

/* ---- TIMELINE component ------------------------------------------------- */
.usca-timeline {
  max-width: var(--container);
  margin: var(--space-3) auto var(--space-2);
  padding: 0 var(--home-pad-right) 0 var(--home-pad-left);
  overflow-x: auto;
}
.usca-timeline__track {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  position: relative;
  padding: 2rem 0;
}
.usca-timeline__track::before {
  content: '';
  position: absolute;
  top: calc(50% + 10px);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.usca-timeline__step {
  position: relative;
  text-align: center;
  padding: 0 .5rem;
  z-index: 1;
}
.usca-timeline__step::after {
  content: '';
  position: absolute;
  top: calc(50% + 7px);
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.usca-timeline__label {
  font-family: var(--ff-body);
  font-size: .75rem;
  font-weight: 500;
  display: flex;                    /* push 1-line labels to the bottom so all */
  align-items: flex-end;            /* labels end on the same baseline */
  justify-content: center;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: italic;
  margin-bottom: .4em;
  min-height: 3.2em;                /* fits 2-line labels like "BAĞLARIN KURULUMU" */
}
.usca-timeline__year {
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--wine-dark);
  letter-spacing: .04em;
  padding-bottom: 1.5em;
}
.usca-timeline__desc {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-top: 1.2em;
  min-height: 3em;
}

@media (max-width: 900px) {
  .usca-timeline__track {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .usca-timeline__track::before {
    top: 0; left: 50%; right: auto;
    width: 1px; height: 100%;
  }
  .usca-timeline__step { padding: 1rem 0; }
  .usca-timeline__step::after {
    top: 10px; left: 50%;
  }
  .usca-timeline__year { font-size: 1.6rem; padding-bottom: .6em; }
}

/* ---- 8-tile nav grid (between USCA paragraph and footer on home) -------
   4 tall tiles top row (production: Bağlar/Üretim/Şaraplar/Tadım),
   4 shorter tiles bottom row (info: Biz/Satış Noktaları/Galeri/İletişim).
   Each tile is a background-image link with a label band at the bottom.
   Adds .usca-parallax so nav.js applies background-position parallax. */
.usca-nav-grid {
  max-width: var(--container);
  margin: var(--space-4) auto var(--space-3);
  padding: 0 var(--space-3);
  display: grid;
  gap: .9rem;
}
.usca-nav-grid__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.usca-nav-card {
  position: relative;
  display: block;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
  aspect-ratio: 3 / 4;
  border-radius: 14px;        /* beveled corners — softer than sharp rectangles */
}
.usca-nav-card--short {
  aspect-ratio: 4 / 3;
}

/* ---- Centralized nav-card images — single source of truth ---------------
   Cards use a per-slug modifier class instead of inline style. Change one
   image here → updates every menu it appears in (home + page-bottom navs).
   To override per-page, add an inline style="background-image:url(...)" on
   the specific <a>; inline always wins over the class. */
.usca-nav-card--baglar   { background-image: url('/wp-content/uploads/2026/04/baglar.webp'); }
.usca-nav-card--uretim   { background-image: url('/wp-content/uploads/2026/04/barrels_00000.jpg'); }
.usca-nav-card--saraplar { background-image: url('/wp-content/uploads/2026/04/bottles.jpg'); }
.usca-nav-card--tadim    { background-image: url('/wp-content/uploads/2026/04/mahzen3.jpg'); }
.usca-nav-card--biz      { background-image: url('/wp-content/uploads/2026/04/mahzen_0.jpeg'); }
.usca-nav-card--satis    { background-image: url('/wp-content/uploads/2026/04/int_1.jpg'); }
.usca-nav-card--galeri   { background-image: url('/wp-content/uploads/2026/04/int_2.jpg'); }
.usca-nav-card--iletisim { background-image: url('/wp-content/uploads/2026/04/tomurcuk_00000.jpg'); }
.usca-nav-card__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: .85em 1em;
  background: var(--bg);
  color: var(--wine-dark);
  font-family: var(--ff-display);
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  transition: background .3s ease, color .3s ease, letter-spacing .3s ease;
}
.usca-nav-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(185, 143, 78, .25);   /* gold-tinted shadow, not wine */
}
.usca-nav-card:hover .usca-nav-card__label {
  background: var(--gold);     /* matches the logo's gold leaf, not wine red */
  color: var(--cream);
  letter-spacing: .2em;
}
@media (max-width: 720px) {
  .usca-nav-grid__row { grid-template-columns: repeat(2, 1fr); }
  .usca-nav-card__label { font-size: .85rem; padding: .7em .8em; letter-spacing: .12em; }
}

/* (Removed: dead .wine-categories / legacy .wine-card block from an earlier
   home-page wine showcase. The current Şaraplar page uses a new .wine-card
   layout defined further down. Removing this dead block was important —
   its `.wine-card__media { height: 260px }` was overriding the new rules.) */

/* ---- Team grid --------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: var(--container);
  margin: var(--space-4) auto;
  padding: 0 2rem;
}
.team-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 2rem 1.8rem;
  text-align: left;
}
.team-card__name {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  letter-spacing: .08em;
  color: var(--wine-dark);
  margin: 0 0 .3em;
  text-transform: uppercase;
}
.team-card__role {
  font-family: var(--ff-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1em;
}
.team-card__bio {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}

/* ---- Tadım tier cards -------------------------------------------------- */
.tadim-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: var(--container);
  margin: var(--space-4) auto;
  padding: 0 2rem;
}
.tadim-card {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  padding: 2.5rem 1.8rem;
  text-align: center;
  transition: all .3s ease;
}
.tadim-card:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 24px rgba(61,15,26,.08);
  transform: translateY(-2px);
}
.tadim-card--featured {
  background: var(--wine-dark);
  color: var(--cream);
  border-color: var(--wine-dark);
}
.tadim-card--featured .tadim-card__name { color: var(--cream); }
.tadim-card--featured .tadim-card__desc { color: var(--cream); opacity: .85; }
.tadim-card--featured .tadim-card__cta  { color: var(--gold-light); }

.tadim-card__name {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wine-dark);
  margin: 0 0 1rem;
}
.tadim-card__desc {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1.5em;
}
.tadim-card__cta {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wine);
  text-decoration: none;
  padding-top: .8em;
  border-top: 1px solid var(--border);
}

/* ---- Contact grid ------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: var(--container);
  margin: var(--space-4) auto;
  padding: 0 2rem;
  text-align: center;
}
.contact-card__label {
  font-family: var(--ff-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6em;
}
.contact-card__value {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  color: var(--wine-dark);
  font-style: normal;
  line-height: 1.5;
}
.contact-card a.contact-card__value:hover { color: var(--gold); }

.contact-map {
  max-width: var(--container);
  margin: var(--space-5) auto 0;
  padding: 0 2rem;
}
.contact-map iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
}

/* ============================================================================
   Üretim page — title (.section-title) centered + 2-col rows (text | image)
   Title is small/centered to match Bağlar; everything pulled up so text sits
   right under it. Images are background-image divs so .usca-parallax JS picks
   them up for a subtle scroll-coupled drift.
   ========================================================================== */
.uretim-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) var(--space-4);
  text-align: left;
}
/* Title bottom margin tightened so first row sits close under the gold line.
   Top margin is zeroed by the unified .uretim-page > .section-title rule above. */
.uretim-page .section-title { margin-bottom: .4em; }

.uretim-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;                       /* text starts at top of row, not centered against tall image */
  margin: 1.4em 0;
}
.uretim-row:first-of-type { margin-top: .2em; }     /* hug the title */

.uretim-row__text { text-align: left; }
.uretim-row__text p {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--wine-dark);
  margin: 0 0 1em;
  text-align: left;
}
.uretim-row__text p:last-child { margin-bottom: 0; }
.uretim-row__text strong { color: var(--gold); font-weight: 600; }

/* Image as background-image div → parallax JS animates background-position */
.uretim-row__media {
  display: block;
  width: 100%;
  max-width: 360px;
  margin-left: auto;                        /* push to right of its column */
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  box-shadow: 0 18px 36px rgba(61, 15, 26, .12);
}

/* Coda variant — italic gold-bordered block on the left side. */
.uretim-row--coda .uretim-row__text {
  padding: 1.4em 1.6em;
  border-left: 3px solid var(--gold);
  background: var(--cream-soft);
}
.uretim-row--coda .uretim-row__text p {
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 .45em;
}
.uretim-row--coda .uretim-row__text p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .uretim-row { grid-template-columns: 1fr; gap: 1.2rem; }
  .uretim-row__media { margin-left: 0; max-width: 100%; }
}

/* ============================================================================
   Şaraplar page — Stevenson quote + intro + 3 wine sections (B/P/K)
   ========================================================================== */
.saraplar-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) var(--space-4);
}

/* --- Top quote block (Stevenson) — small, restrained, italic-only weights --- */
.saraplar-quote {
  text-align: center;
  margin: .8em auto clamp(1.4rem, 2.5vw, 2rem);
  max-width: 640px;
}
.saraplar-quote__primary {
  font-family: var(--ff-display);
  font-size: clamp(.95rem, 1.3vw, 1.1rem);    /* much smaller */
  color: var(--gold);
  letter-spacing: .04em;
  margin: 0 0 .25em;
  font-weight: 400;
  font-style: italic;
}
.saraplar-quote__secondary {
  font-family: var(--ff-display);
  font-size: clamp(.85rem, 1vw, .95rem);
  color: var(--wine-dark);
  letter-spacing: .04em;
  margin: 0 0 .5em;
  font-weight: 400;
  font-style: italic;
  opacity: .7;
}
.saraplar-quote__attribution {
  font-family: var(--ff-body);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wine-dark);
  font-weight: 400;
  font-style: normal;
  opacity: .55;
  margin: 0;
}

/* --- Intro paragraph (William Shakespeare copy) --- */
.saraplar-intro {
  max-width: 680px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--wine-dark);
}
.saraplar-intro p { margin: 0 0 .5em; }
.saraplar-intro p:last-child { margin-bottom: 0; }
.saraplar-intro strong { color: var(--wine-dark); font-weight: 600; font-style: normal; }
.saraplar-intro em     { color: var(--gold); font-style: italic; font-weight: 400; }

/* --- Section per color --- */
.saraplar-section { margin: clamp(2rem, 4vw, 3rem) 0; }
/* Section title uses the standard .section-title styling (added separately
   in markup as <h2 class="section-title"> for cross-page consistency).
   Kırmızılar section is left-aligned per PDF feedback. */
.saraplar-section--red .section-title { text-align: left; }
.saraplar-section--red .section-title::after { margin-left: 0; margin-right: auto; }

/* --- Wine grid — image-left + text-right horizontal cards --- */
.saraplar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.2rem;
  max-width: 980px;
  margin: 0 auto;
}
/* Pembeler — only 2 wines, cap so it doesn't sprawl */
.saraplar-section--rose .saraplar-grid { max-width: 660px; }
/* Kırmızılar — single Opia X for now, left-aligned, capped */
.saraplar-section--red .saraplar-grid {
  max-width: 100%;
  margin: 0;            /* left-anchored, not centered */
  justify-content: start;
}

/* Wine card — same family as vineyard-card (rounded, cream-soft, hover-lift),
   but laid out horizontally: image (placeholder) on the left, text on the right.
   Real bottle images will drop into .wine-card__media via background-image. */
.wine-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  background: var(--cream-soft);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .35s ease, box-shadow .35s ease;
}
.wine-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(61, 15, 26, .15);
}
.wine-card__media {
  /* Square placeholder block (120×120) until real bottle photos arrive —
     slightly darker cream with a faint diagonal sheen so the image area
     reads as intentional. aspect-ratio sets the row height for the card. */
  aspect-ratio: 1;
  background-color: #ece1cd;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.wine-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.35) 0%, transparent 45%, rgba(185,143,78,.08) 100%);
  pointer-events: none;
}
.wine-card__body {
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.wine-card__name {
  font-family: var(--ff-display);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wine-dark);
  margin: 0 0 .3em;
}
.wine-card__sub {
  font-size: .82rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: .04em;
  margin: 0;
  opacity: .7;
}

@media (max-width: 600px) {
  .wine-card { grid-template-columns: 95px minmax(0, 1fr); }
  .wine-card__body { padding: .8rem 1rem; }
}

/* ============================================================================
   Şaraplar v2 — editorial wines design (Cormorant Garamond + Inter)
   All rules scoped under .saraplar-v2 so the design can't bleed into the
   rest of the site. The wrapper itself owns the page-level padding/width.
   ========================================================================== */
.saraplar-v2 {
  --sv2-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sv2-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sv2-placeholder: #ece1cd;

  /* Image used by the hero banner. Change here to swap the hero photo. */
  --sv2-hero-image: url('/wp-content/uploads/2026/04/baglar.webp');

  max-width: 1120px;
  margin: 0 auto;
  padding: 0 64px 140px;             /* zero top — hero banner hugs the header */
  font-family: var(--sv2-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Force zero top spacing on ancestors for Şaraplar specifically — same
   treatment as the home page's cover-block setup so the hero hugs the header. */
body.page-id-8 .site-main article,
body.page-id-8 .entry-content {
  padding-top: 0;
  margin-top: 0;
}

/* ─── Hero banner — full-bleed landscape image w/ Stevenson quote overlay ─── */
.saraplar-v2 .hero {
  /* Full viewport width via negative margin trick (same pattern as home cover) */
  width: 100vw;
  margin: 0 calc(50% - 50vw) 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;                /* matches .page-hero (with V depth added) */
  margin-top: -25px;                /* slide under header V pendant */
  z-index: 1;
  padding: 49px 24px 18px;          /* top clears V; bottom slimmer */
  background: var(--wine-dark);     /* fallback while image loads */
}
/* Pseudo-element holds the blurred + darkened image so the quote stays sharp */
.saraplar-v2 .hero::before {
  content: '';
  position: absolute;
  inset: -120px;                     /* big overscan for parallax headroom */
  background-image: var(--sv2-hero-image);
  background-size: cover;
  background-position: center 45%;
  filter: blur(3px) brightness(0.7);
  z-index: 0;
  transform: scale(1.18) translate3d(0, var(--hero-scroll, 0px), 0);
  will-change: transform;
}
/* Subtle vignette gradient on top of image for extra text legibility */
.saraplar-v2 .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.18) 100%),
    linear-gradient(180deg, rgba(61,15,26,0.04) 0%, rgba(61,15,26,0.16) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Quote elements sit above both pseudo-layers */
.saraplar-v2 .hero > * {
  position: relative;
  z-index: 2;
  text-align: center;
}
.saraplar-v2 .hero .headline {
  font-family: var(--sv2-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.25;
  color: #f5ede3;                   /* cream */
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  text-wrap: balance;
  max-width: 880px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.saraplar-v2 .hero .headline .en {
  display: block;
  font-size: 0.6em;
  color: #d4ad6e;                   /* gold-light */
  margin-top: 8px;
  font-style: italic;
}
.saraplar-v2 .hero .attr {
  font-family: var(--sv2-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245,237,227,0.75);
  font-weight: 500;
  margin: 0;
}

/* ─── Intro block (William Shakespeare lede) — sits below the hero ─── */
.saraplar-v2 .intro {
  text-align: center;
  margin: 0 auto 80px;
  max-width: 640px;
}
/* Gold separator dash between hero and lede removed per user — keeps the
   quote-to-lede transition feel tighter and more continuous. */
.saraplar-v2 .intro .rule {
  display: none;
}
.saraplar-v2 .intro p.lede {
  font-family: var(--sv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 auto;
  max-width: 560px;
  text-align: center;
  text-wrap: pretty;
}
.saraplar-v2 .intro p.lede strong {
  font-style: normal;
  font-weight: 600;
  color: var(--wine-dark);
}
.saraplar-v2 .intro p.lede em {
  color: var(--gold);
  font-weight: 500;
}

/* ─── Wine row ─── */
.saraplar-v2 .wine {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 72px;
  align-items: start;
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
.saraplar-v2 .wine:first-of-type {
  border-top: none;
  padding-top: 40px;
}
.saraplar-v2 .wine-img {
  position: relative;
  aspect-ratio: 3 / 4.3;
  background: var(--sv2-placeholder);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .6s ease, transform .6s ease;
}
.saraplar-v2 .wine-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(91,26,38,0.00) 60%, rgba(61,15,26,0.08));
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 2;
}
.saraplar-v2 .wine-img .parallax {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
  transition: transform .25s linear;
  z-index: 0;
}
.saraplar-v2 .wine-img .parallax::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 18px,
    rgba(185,143,78,0.09) 18px, rgba(185,143,78,0.09) 19px
  );
}
.saraplar-v2 .wine-img:hover {
  box-shadow: 0 24px 48px -24px rgba(61,15,26,0.28);
}
.saraplar-v2 .wine-img:hover::after { opacity: 1; }
.saraplar-v2 .wine-img:hover .parallax { transform: scale(1.04); }
.saraplar-v2 .wine-img:hover .placeholder-label { color: rgba(61,15,26,0.55); }
.saraplar-v2 .wine-img .bottle-mark {
  position: absolute;
  left: 50%; top: 10%;
  transform: translateX(-50%);
  width: 36%; height: 80%;
  border: 1px dashed rgba(91,26,38,0.18);
  border-radius: 40% 40% 10% 10% / 14% 14% 4% 4%;
  z-index: 1;
  transition: border-color .6s ease;
}
.saraplar-v2 .wine-img:hover .bottle-mark { border-color: rgba(91,26,38,0.38); }
.saraplar-v2 .wine-img .placeholder-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(61,15,26,0.38);
  white-space: nowrap;
  z-index: 1;
  transition: color .6s ease;
}

/* When a real bottle photo is set on the .parallax, suppress every
   placeholder element (diagonal pattern, dashed bottle silhouette, label)
   so the photo reads cleanly. `contain` keeps the whole bottle in frame. */
.saraplar-v2 .wine-img.has-photo .parallax::before { display: none; }
.saraplar-v2 .wine-img.has-photo .bottle-mark      { display: none; }
.saraplar-v2 .wine-img.has-photo .placeholder-label { display: none; }
.saraplar-v2 .wine-img.has-photo .parallax {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Per-wine bottle photos — single source of truth.
   To swap any bottle: change the URL on its line below. */
.saraplar-v2 .wine--sonnet-5   .wine-img .parallax { background-image: url('/wp-content/uploads/2026/04/sonnet-5.jpg'); }
.saraplar-v2 .wine--sonnet-99  .wine-img .parallax { background-image: url('/wp-content/uploads/2026/04/sonnet-99.jpg'); }
.saraplar-v2 .wine--sonnet-116 .wine-img .parallax { background-image: url('/wp-content/uploads/2026/04/sonnet-116.jpg'); }
.saraplar-v2 .wine--sonnet-8   .wine-img .parallax { background-image: url('/wp-content/uploads/2026/04/sonnet-8.jpg'); }
.saraplar-v2 .wine--sonnet-73  .wine-img .parallax { background-image: url('/wp-content/uploads/2026/04/sonnet-73.jpg'); }
.saraplar-v2 .wine--sonnet-58  .wine-img .parallax { background-image: url('/wp-content/uploads/2026/04/sonnet-58.jpg'); }
.saraplar-v2 .wine--sonnet-66  .wine-img .parallax { background-image: url('/wp-content/uploads/2026/04/sonnet-66.jpg'); }
.saraplar-v2 .wine--sonnet-23  .wine-img .parallax { background-image: url('/wp-content/uploads/2026/04/sonnet-23.jpg'); }
.saraplar-v2 .wine--sonnet-76  .wine-img .parallax { background-image: url('/wp-content/uploads/2026/04/sonnet-76.jpg'); }
.saraplar-v2 .wine--sonnet-35  .wine-img .parallax { background-image: url('/wp-content/uploads/2026/04/sonnet-35.jpg'); }
.saraplar-v2 .wine--opia-x     .wine-img .parallax { background-image: url('/wp-content/uploads/2026/04/opia-x.jpg'); }

.saraplar-v2 .wine-body {
  padding-top: 8px;
  max-width: 540px;
}
.saraplar-v2 .wine-name {
  font-family: var(--sv2-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--wine-dark);
  margin: 0;
}
.saraplar-v2 .wine-name .varietal {
  display: block;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  margin-top: 4px;
}
.saraplar-v2 .wine-gold-rule {
  width: 32px; height: 1px;
  background: var(--gold);
  margin: 20px 0 22px;
}
.saraplar-v2 .wine-epigraph {
  font-family: var(--sv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--wine);
  margin: 0 0 24px;
  text-wrap: pretty;
}
.saraplar-v2 .wine-notes {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.saraplar-v2 .wine-notes p { margin: 0 0 10px; }
.saraplar-v2 .wine-notes p:last-child { margin: 0; }
.saraplar-v2 .wine-notes strong { color: var(--wine-dark); font-weight: 600; }
.saraplar-v2 .wine-notes em { font-style: italic; color: var(--ink); }

/* Featured Opia X — same row anatomy, subtly heavier */
.saraplar-v2 .wine.featured {
  background: var(--cream);
  padding: 80px 48px;
  margin: 40px -48px 0;
  border-top: none;
}
.saraplar-v2 .wine.featured .wine-name { font-size: 40px; }
.saraplar-v2 .wine.featured .wine-img { background: #e5d6b8; }
.saraplar-v2 .wine.featured .wine-img .parallax::before {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 22px,
    rgba(91,26,38,0.06) 22px, rgba(91,26,38,0.06) 23px
  );
}
.saraplar-v2 .wine.featured .reserve-tag {
  font-family: var(--sv2-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 14px;
}

@media (max-width: 820px) {
  .saraplar-v2 { padding: 0 28px 96px; }
  .saraplar-v2 .hero { min-height: 170px; padding: 20px 20px; margin-bottom: 24px; }
  .saraplar-v2 .intro { margin-bottom: 56px; }
  .saraplar-v2 .intro p.lede { font-size: 17px; }
  .saraplar-v2 .wine {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 0;
  }
  .saraplar-v2 .wine-img { max-width: 320px; aspect-ratio: 3 / 4.3; }
  .saraplar-v2 .wine.featured { padding: 48px 24px; margin: 24px -24px 0; }
  .saraplar-v2 .wine-name { font-size: 28px; }
}

/* ============================================================================
   Şaraplar — color bundles (Beyaz / Pembe / Kırmızı / Tatlı)
   New v6 layout: each color = 1 bundle with a sticky glass photo on the left
   and a vertical list of wine listings on the right. All wines in a color
   are visible at a glance per bundle.
   ========================================================================== */
.saraplar-v2 .color-bundle {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}
.saraplar-v2 .color-bundle:first-of-type { border-top: 1px solid var(--border); }
.saraplar-v2 .color-bundle:last-of-type  { border-bottom: 0; }

/* Sticky glass photo (left) — follows the user as they scroll the wine list */
.saraplar-v2 .bundle-photo {
  position: sticky;
  top: 32px;
  margin: 0;
}
.saraplar-v2 .bundle-photo__img {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: var(--cream);
  isolation: isolate;
}
.saraplar-v2 .bundle-photo__img::after {
  /* Color tint overlay keyed per bundle (variables set below) */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--cb-tint-a, transparent) 0%, var(--cb-tint-b, transparent) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Per-color glass photo + tint. Each bundle now has its OWN photo (previously
   all four shared DSC_0907.webp with different crops). The tint overlay on
   ::after still keys to the color family. */
.saraplar-v2 .color-bundle--beyaz .bundle-photo__img {
  /* Hand raising a white wine glass in the cellar — warm bokeh background. */
  background-image: url('/wp-content/uploads/2026/04/saraplar-beyaz.jpg');
  background-position: center 40%;
  --cb-tint-a: rgba(225, 200, 130, 0.18);
  --cb-tint-b: rgba(180, 150, 80, 0.10);
}
.saraplar-v2 .color-bundle--pembe .bundle-photo__img {
  /* Pouring blush wine into a glass — reused from the gallery's Şaraphane
     tile (usca-182.jpg). The user confirmed this is the pembe shot they
     want; no separate source-file copy needed since uploads/ already has it. */
  background-image: url('/wp-content/uploads/2026/04/usca-182.jpg');
  background-position: 35% 40%;
  --cb-tint-a: rgba(220, 140, 130, 0.22);
  --cb-tint-b: rgba(180, 90, 100, 0.14);
}
.saraplar-v2 .color-bundle--kirmizi .bundle-photo__img {
  /* Decanter pouring red wine into a glass — atmospheric, warm. */
  background-image: url('/wp-content/uploads/2026/04/saraplar-kirmizi.jpg');
  background-position: center 30%;
  --cb-tint-a: rgba(120, 30, 50, 0.30);
  --cb-tint-b: rgba(70, 15, 30, 0.20);
}
.saraplar-v2 .color-bundle--tatli .bundle-photo__img {
  /* Hand holding a deep ruby wine glass in front of a wall of dusty,
     diagonally-stacked aged bottles — captures the dessert-wine / cellar
     aging atmosphere. */
  background-image: url('/wp-content/uploads/2026/04/saraplar-tatli.jpg');
  background-position: center 45%;
  --cb-tint-a: rgba(90, 30, 60, 0.36);
  --cb-tint-b: rgba(40, 10, 30, 0.24);
}

/* Content column — header + list of wine listings */
.saraplar-v2 .bundle-content { min-width: 0; }
.saraplar-v2 .bundle-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.saraplar-v2 .bundle-title {
  font-family: var(--sv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 52px);
  color: var(--wine-dark);
  margin: 0;
  letter-spacing: 0.005em;
  text-transform: none;
  line-height: 1;
}
/* count pill removed per design feedback */
.saraplar-v2 .bundle-count { display: none; }

/* Wine list inside a bundle — each item is a compact, 2-column listing:
   left = name + varietal + gold rule (label-style)
   right = epigraph + tasting notes
   "Bundled" feel — tight vertical rhythm, scannable at a glance. */
.saraplar-v2 .bundle-wines {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.saraplar-v2 .wine-listing {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  align-items: start;
}
.saraplar-v2 .wine-listing:first-child { padding-top: 4px; }
.saraplar-v2 .wine-listing:last-child  { padding-bottom: 4px; border-bottom: 0; }

/* Left column — wine identity */
.saraplar-v2 .wl-head {
  position: sticky;
  top: 32px;
}
.saraplar-v2 .wl-head .wine-name {
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 4px;
}
.saraplar-v2 .wl-head .wine-name .varietal {
  font-size: 13px;
  margin-top: 4px;
  display: block;
}
.saraplar-v2 .wl-head .wine-gold-rule {
  width: 24px;
  margin: 8px 0 0;
}

/* Right column — epigraph + notes (compact rhythm) */
.saraplar-v2 .wl-body .wine-epigraph {
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 12px;
}
.saraplar-v2 .wl-body .wine-notes p {
  font-size: 14px;
  line-height: 1.55;       /* tighter (was 1.7) */
  margin: 0 0 6px;          /* tighter (was 8px) */
}
.saraplar-v2 .wl-body .wine-notes p:last-child { margin-bottom: 0; }

/* ──────────────────────────────────────────────────────────────────────
   Opia X flagship band — full-width section injected BETWEEN the Kırmızı
   and Tatlı bundles (not inside the kırmızı bundle). Because it lives
   outside the bundle, the bundle's sticky decanter photo releases at the
   end of the regular red wines and never scrolls down onto this band.

   Layout: photo (left, ~bundle-photo column width) | text (right, wide).
   The 48px left padding gives the photo space on its left; the wide right
   column keeps the "Koleksiyon Seri" eyebrow on a single line.
   ────────────────────────────────────────────────────────────────────── */
.saraplar-v2 .opia-feature {
  display: grid;
  /* Mirror the page's bundle + wine-listing columns exactly so every element
     lines up vertically with its counterpart elsewhere:
       col 1 = 240px  → bundle-photo column      (Opia photo)
       col 2 = 56px   → bundle gap
       col 3 = 180px  → wine-name column         (Opia head)
       col 4 = 28px   → wine-listing gap
       col 5 = 1fr    → wine-notes column        (Opia notes)
     No horizontal padding so col 1 sits flush-left at X=0 like the other
     vertical photos; the gaps are explicit empty tracks. */
  grid-template-columns: minmax(0, 240px) 56px minmax(0, 180px) 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: 14px;
  /* Extend the gold box 48px to the LEFT (into saraplar-v2's 64px side
     padding) while adding a matching 48px left padding. Net effect: the
     photo stays put at the same X (aligned with the other vertical photos)
     but the box gains 48px of gold breathing room on the photo's left.
     margin-left + padding-left cancel out for the content, so the photo's
     alignment is unchanged. */
  margin: 56px 0 56px -48px;
  padding: 40px 0 40px 48px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: color-mix(in srgb, var(--gold) 5%, transparent);
  align-items: start;              /* top-align like the other wine listings */
}
.saraplar-v2 .opia-feature__photo {
  grid-column: 1;
  grid-row: 1 / span 2;            /* left column, aligns with bundle photos */
  aspect-ratio: 3 / 4;
  background-image: url('/wp-content/uploads/2026/04/opia-x-angled.jpg');
  background-size: cover;
  background-position: center;
  background-color: color-mix(in srgb, var(--gold) 8%, var(--cream));
  background-repeat: no-repeat;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.saraplar-v2 .opia-feature__head {
  grid-column: 3;                  /* aligns with the other wine-name column */
  grid-row: 2;
}
.saraplar-v2 .opia-feature__body {
  grid-column: 5;                  /* aligns with the other wine-notes column */
  grid-row: 2;
}
.saraplar-v2 .opia-feature__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(120, 30, 50, 0.08) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.saraplar-v2 .opia-feature .reserve-tag {
  grid-column: 3 / 6;              /* top row, spans head + gap + body width */
  grid-row: 1;
  font-family: var(--sv2-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  white-space: nowrap;             /* "Koleksiyon Seri · Sınırlı Üretim" on one line */
}
/* Name + varietal sized to match the regular wines (base .wine-name is 34px;
   the listings drop it to 22 — we mirror that here). */
.saraplar-v2 .opia-feature .wine-name {
  font-size: 22px;
  margin: 0 0 4px;
}
.saraplar-v2 .opia-feature .wine-name .varietal {
  font-size: 13px;
  margin-top: 4px;
}
.saraplar-v2 .opia-feature .wine-gold-rule {
  width: 24px;
  height: 1px;
  background: var(--gold);
  margin: 12px 0 18px;             /* gap below the rule pushes the notes lower */
}
.saraplar-v2 .opia-feature .wine-notes p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 6px;
}
.saraplar-v2 .opia-feature .wine-notes p:last-child { margin-bottom: 0; }

/* Mobile — stack photo on top, wines below */
@media (max-width: 820px) {
  .saraplar-v2 .color-bundle {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px 0;
  }
  .saraplar-v2 .bundle-photo {
    position: static;
    max-width: 280px;
    margin: 0 auto;
  }
  .saraplar-v2 .bundle-photo__img { aspect-ratio: 4 / 3; }
  .saraplar-v2 .bundle-head { margin-bottom: 20px; }
  /* mobile: stack the 2-col wine listing into single column */
  .saraplar-v2 .wine-listing {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0;
  }
  .saraplar-v2 .wl-head { position: static; }
  .saraplar-v2 .wl-head .wine-name { font-size: 20px; }
  /* Featured (Opia X) on mobile — collapse the side photo above the content.
     Reset the desktop's negative margin-left so the box sits flush inside
     the single-column bundle-content. */
  /* Opia X flagship band on mobile — collapse to a single column: photo,
     eyebrow, name, notes stacked. Reset the desktop 5-col placements. */
  .saraplar-v2 .opia-feature {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 0;
    row-gap: 14px;
    margin: 40px 0;
    padding: 28px 24px;
  }
  .saraplar-v2 .opia-feature__photo {
    grid-column: 1;
    grid-row: 1;
    max-width: 280px;
    aspect-ratio: 4 / 3;
  }
  .saraplar-v2 .opia-feature .reserve-tag { grid-column: 1; grid-row: 2; }
  .saraplar-v2 .opia-feature__head        { grid-column: 1; grid-row: 3; }
  .saraplar-v2 .opia-feature__body        { grid-column: 1; grid-row: 4; }
}

/* ============================================================================
   Tadım v2 — editorial design (Cormorant Garamond + Inter)
   Same design family as Şaraplar v2; scoped under .tadim-v2 to avoid bleed.
   ========================================================================== */
.tadim-v2 {
  --tv2-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --tv2-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tv2-placeholder: #ece1cd;

  max-width: 1120px;
  margin: 0 auto;
  padding: 0 64px 56px;           /* zero top + tighter bottom — collapse dead space */
  font-family: var(--tv2-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Editorial opening ─── */
.tadim-v2 .opening {
  /* Earlier this had a -8px top margin to hug the banner aggressively. User
     fed back that the lede sat too close to the hero image, so we let it
     breathe with 24px of upper room plus the hero's own bottom margin below. */
  margin: 0 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Page-hero → article gap on Tadım. Was 8px (over-tight after the gold rule
   was removed); opened to 28px so the lede has breathing room without
   re-introducing the dead band the dash used to fill. */
body.page-id-9 .page-hero { margin-bottom: 28px; }
.tadim-v2 .opening .headline {
  font-family: var(--tv2-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 32px;                /* smaller — pull experiences up */
  line-height: 1.1;
  color: var(--wine-dark);
  letter-spacing: 0.005em;
  margin: 0 0 8px;
  text-wrap: balance;
  text-transform: none;           /* override global h1 uppercase rule */
}
/* Gold rule hidden — used to render a small dash above the lede; now
   removed so the paragraph sits directly under the banner. */
.tadim-v2 .opening .rule { display: none; }
.tadim-v2 .opening p.lede {
  font-family: var(--tv2-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 auto 10px;
  width: 620px;
  max-width: 100%;
  text-align: center;
  text-wrap: pretty;
}
.tadim-v2 .opening p.lede em {
  font-family: var(--tv2-serif);
  font-style: italic;
  font-size: 1.2em;
  line-height: 1;
  vertical-align: baseline;
  color: var(--gold);
  font-weight: 500;
}
.tadim-v2 .opening p.lede strong {
  font-weight: 600;
  color: var(--wine-dark);
}

/* ─── Info stripe (hours + reservation) ─── */
.tadim-v2 .info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  margin: 0 auto 18px;            /* tighter — pull experiences up */
  padding: 14px 28px;             /* slimmer stripe */
  max-width: 860px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.tadim-v2 .info .hours {
  font-family: var(--tv2-sans);
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  text-align: left;
  text-wrap: pretty;
  flex: 1 1 380px;
}
.tadim-v2 .info .hours strong {
  font-style: normal;
  font-weight: 600;
  color: var(--wine-dark);
}
.tadim-v2 .info .divider {
  width: 1px;
  height: 54px;
  background: var(--border);
  flex: 0 0 auto;
}
.tadim-v2 .info .reservation {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  color: var(--wine-dark);
  padding: 8px 4px;
  transition: color .3s ease;
  flex: 0 0 auto;
}
.tadim-v2 .info .reservation:hover { color: var(--gold); }
.tadim-v2 .info .reservation .label {
  font-family: var(--tv2-sans);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.tadim-v2 .info .reservation .phone {
  font-family: var(--tv2-sans);
  font-style: normal;
  font-size: 18px;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--wine-dark);
}
.tadim-v2 .info .reservation:hover .phone { color: var(--gold); }

/* ─── 3-up experience grid ─── */
.tadim-v2 .experiences {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Column gap only — there's only ONE row of cards on desktop, so a
     row-gap is wasted (and was actively harmful when paired with subgrid). */
  column-gap: 32px;
  margin-top: 6px;
  align-items: start;             /* cards top-align cleanly, no row stretching */
}
/* Each card is a flex column. Cross-column alignment of name → gold rule →
   seans is *natural*: all three landmarks are single-line elements with the
   same font metrics across Klasik · Premium · Mahzen, so they line up at
   the same Y by themselves. The .exp-name min-height anchors the row even
   if a name ever wraps. (Earlier we used subgrid here, but the parent's
   row-gap leaked into every internal row of the subgrid — producing the
   huge dead bands the user reported.) */
.tadim-v2 .exp {
  display: flex;
  flex-direction: column;
}
.tadim-v2 .exp-img {
  position: relative;
  aspect-ratio: 3 / 4;            /* portrait per user spec — was 4 / 3.4 */
  background: var(--tv2-placeholder);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .6s ease;
  margin-bottom: 18px;
}
/* Per-card image hooks. Each card's .parallax fills with its photo (object-
   fit equivalent via background-size: cover). When .has-photo is present
   on .exp-img, the placeholder pattern + glass mark + label are hidden so
   the photo reads cleanly. */
.tadim-v2 .exp-img--klasik .parallax  { background-image: url('/wp-content/uploads/2026/04/tadim-klasik.jpg');  background-position: center 60%; }
.tadim-v2 .exp-img--premium .parallax { background-image: url('/wp-content/uploads/2026/04/usca-167.jpg'); background-position: center 42%; }
.tadim-v2 .exp-img--mahzen .parallax  { background-image: url('/wp-content/uploads/2026/04/tadim-mahzen.jpg');  background-position: center 40%; }
.tadim-v2 .exp-img.has-photo .parallax {
  background-size: cover;
  background-repeat: no-repeat;
}
.tadim-v2 .exp-img.has-photo .parallax::before,
.tadim-v2 .exp-img.has-photo .glass-mark,
.tadim-v2 .exp-img.has-photo .placeholder-label {
  display: none;
}
.tadim-v2 .exp-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(91,26,38,0.00) 60%, rgba(61,15,26,0.08));
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 2;
}
.tadim-v2 .exp-img .parallax {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
  transition: transform .25s linear;
  z-index: 0;
}
.tadim-v2 .exp-img .parallax::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 18px,
    rgba(185,143,78,0.09) 18px, rgba(185,143,78,0.09) 19px
  );
}
.tadim-v2 .exp-img:hover {
  box-shadow: 0 24px 48px -24px rgba(61,15,26,0.28);
}
.tadim-v2 .exp-img:hover::after { opacity: 1; }
.tadim-v2 .exp-img:hover .parallax { transform: scale(1.04); }
.tadim-v2 .exp-img:hover .glass-mark { border-color: rgba(91,26,38,0.38); }
.tadim-v2 .exp-img:hover .placeholder-label { color: rgba(61,15,26,0.55); }

/* abstract wine-glass silhouette mark */
.tadim-v2 .exp-img .glass-mark {
  position: absolute;
  left: 50%; top: 14%;
  transform: translateX(-50%);
  width: 30%; height: 72%;
  border: 1px dashed rgba(91,26,38,0.18);
  border-radius: 50% 50% 12% 12% / 38% 38% 6% 6%;
  z-index: 1;
  transition: border-color .6s ease;
}
.tadim-v2 .exp-img .placeholder-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;          /* less tracked since not all-caps anymore */
  /* text-transform: uppercase removed per user — labels stay lowercase */
  color: rgba(61,15,26,0.38);
  white-space: nowrap;
  z-index: 1;
  transition: color .6s ease;
}

.tadim-v2 .exp-name {
  font-family: var(--tv2-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--wine-dark);
  margin: 0;
  /* Lock a single-line height so the gold rule below sits on the SAME
     horizontal line across Klasik · Premium · Mahzen columns, even on
     narrow viewports where a name might otherwise wrap. */
  min-height: 1.1em;
}
.tadim-v2 .exp-tier {
  display: block;
  font-family: var(--tv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.tadim-v2 .exp-gold-rule {
  width: 32px; height: 1px;
  background: var(--gold);
  /* Pulled tight to the name above (3px) so the rule reads as a typographic
     underscore, then opened up below (14px) to give Seans its own line of
     breathing room. Cross-column alignment is guaranteed by .exp-name's
     min-height anchor + parent subgrid row tracks. */
  margin: 3px 0 14px;
}
/* Per-experience time line — small caps eyebrow + tabular numbers */
.tadim-v2 .exp-time {
  font-family: var(--tv2-sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--wine-dark);
  font-weight: 500;
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums lining-nums;
}
.tadim-v2 .exp-time .lbl {
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-right: 10px;
}
.tadim-v2 .exp-desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
  font-variant-numeric: lining-nums;
}
.tadim-v2 .exp-desc em {
  font-family: var(--tv2-serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1.2em;
  line-height: 1;
  vertical-align: baseline;
  font-weight: 500;
}
.tadim-v2 .exp-desc strong {
  color: var(--wine-dark);
  font-weight: 600;
}

@media (max-width: 820px) {
  .tadim-v2 { padding: 24px 28px 96px; }    /* mobile: pulled up too */
  .tadim-v2 .opening .headline { font-size: 30px; }
  .tadim-v2 .opening p.lede { width: auto; font-size: 16.5px; }
  .tadim-v2 .info { flex-direction: column; gap: 20px; padding: 24px; }
  .tadim-v2 .info .divider { width: 40px; height: 1px; }
  .tadim-v2 .info .hours { text-align: center; }
  .tadim-v2 .info .reservation { align-items: center; }
  .tadim-v2 .experiences { grid-template-columns: 1fr; gap: 48px; max-width: 360px; margin: 0 auto; }
}

/* ============================================================================
   Shared editorial hero banner — used by Bağlar / Üretim / Tadım
   Full-bleed (100vw) landscape image, blurred + darkened, title overlay.
   Same treatment as the home-page cover + Şaraplar hero.
   ========================================================================== */
/* Home page Elementor HERO — pan the drone shot down so we see more of the
   foreground (vineyard rows / building) instead of sky. Element ID is stable
   in Elementor — generated once + persisted in _elementor_data. */
.elementor-263 .elementor-element.elementor-element-c2c9d20:not(.elementor-motion-effects-element-type-background),
.elementor-263 .elementor-element.elementor-element-c2c9d20 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-position: center 42% !important;
}
/* Pull the home Elementor hero up under the header's V pendant — same
   treatment as .page-hero. Value matches .site-header padding-bottom. */
.elementor-263 .elementor-element.elementor-element-c2c9d20 {
  margin-top: -25px !important;
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .elementor-263 .elementor-element.elementor-element-c2c9d20 {
    margin-top: -18px !important;
  }
}

.page-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Pull image up under the header's V pendant — cream V "cuts into" the
     image from the top center. Value = .site-header padding-bottom (V depth). */
  margin-top: -25px;
  margin-bottom: 32px;
  /* Stay BELOW the header so the V renders on top (header z-index: 100) */
  z-index: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Thinner from bottom — visible ~215 + V depth 25 = 240 total */
  min-height: 240px;
  padding: 49px 24px 18px;          /* top clears V; bottom slimmer */
  background: var(--wine-dark);     /* fallback while image loads */
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: -120px;                     /* big overscan — gives ~120px parallax headroom each side */
  background-image: var(--page-hero-image, none);
  background-size: cover;
  background-position: center 45%;
  filter: blur(3px) brightness(0.7); /* less blur so movement reads better, slightly lighter */
  z-index: 0;
  /* --hero-scroll is updated by JS on scroll for the parallax effect */
  transform: scale(1.18) translate3d(0, var(--hero-scroll, 0px), 0);
  will-change: transform;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Lighter overlay since the image itself is now brighter */
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.18) 100%),
    linear-gradient(180deg, rgba(61,15,26,0.04) 0%, rgba(61,15,26,0.16) 100%);
  z-index: 1;
  pointer-events: none;
}
.page-hero > * {
  position: relative;
  z-index: 2;
  text-align: center;
}
/* Unified title style — Bağlar, Üretim, Tadım all render identically */
.page-hero__title {
  font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(42px, 5vw, 60px);
  line-height: 1.1;
  color: #f5ede3;                    /* cream */
  letter-spacing: 0.005em;
  margin: 0;
  text-transform: none;              /* override global h1 uppercase */
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);  /* slightly heavier shadow for legibility on lighter image */
  max-width: 880px;
}

/* Per-page hero image modifier classes — single source of truth.
   Swap images by editing the URL once; markup doesn't change. */
.page-hero--menu     { --page-hero-image: url('/wp-content/uploads/2026/04/interior5.jpg'); }
.page-hero--menu::before { background-position: center 55%; }
.page-hero--baglar   { --page-hero-image: url('/wp-content/uploads/2026/04/baglar-hero.jpg'); }
/* Pan the Bağlar hero down so the lower portion of the image is in frame
   (default global is `center 45%` — higher % = more of the bottom shown). */
.page-hero--baglar::before { background-position: center 75%; }
.page-hero--uretim   { --page-hero-image: url('/wp-content/uploads/2026/04/barrels_00000.jpg'); }
.page-hero--tadim    { --page-hero-image: url('/wp-content/uploads/2026/04/tadim-hero.jpg'); }
.page-hero--tadim::before { background-position: center 62%; }   /* pan down — show lower portion */
.page-hero--biz      { --page-hero-image: url('/wp-content/uploads/2026/04/usca-26.jpg'); }
.page-hero--biz::before { background-position: center 50%; }
.page-hero--iletisim { --page-hero-image: url('/wp-content/uploads/2026/04/exterior3.jpg'); }
.page-hero--satis    { --page-hero-image: url('/wp-content/uploads/2026/04/satis-hero-rack.jpg'); }
.page-hero--satis::before {
  background-position: center 35%;   /* slight upward pan — favors the upper bottle rows of the rack */
  /* Per-page zoom-out override: global ::before uses scale(1.18); on Satış
     we drop to scale(1.0) so more of the diamond rack pattern reads. The
     translate3d portion is preserved so the JS parallax keeps working. */
  transform: scale(1.0) translate3d(0, var(--hero-scroll, 0px), 0);
}

@media (max-width: 820px) {
  .page-hero { min-height: 178px; padding: 36px 20px 16px; margin-top: -18px; margin-bottom: 24px; }
  .page-hero__title { font-size: clamp(32px, 7vw, 44px); }
}

/* Force zero top spacing on pages with a .page-hero at the top so the banner
   hugs the header pendant (matches the home-cover-block treatment). */
body.page-id-6 .site-main article,   /* Bağlar */
body.page-id-7 .site-main article,   /* Üretim */
body.page-id-8 .site-main article,   /* Şaraplar */
body.page-id-9 .site-main article,   /* Tadım */
body.page-id-11 .site-main article,  /* Biz / Ekip */
body.page-id-12 .site-main article,  /* Satış Noktaları */
body.page-id-13 .site-main article,  /* Galeri */
body.page-id-14 .site-main article,  /* İletişim */
body.page-id-377 .site-main article, /* Menü */
body.page-id-6 .entry-content,
body.page-id-7 .entry-content,
body.page-id-8 .entry-content,
body.page-id-9 .entry-content,
body.page-id-11 .entry-content,
body.page-id-12 .entry-content,
body.page-id-13 .entry-content,
body.page-id-14 .entry-content,
body.page-id-377 .entry-content {
  padding-top: 0;
  margin-top: 0;
}

/* ============================================================================
   Bağlar v2 — editorial design (Cormorant Garamond + Inter)
   Hero banner (shared) → 3-up vineyard cards → info prose section.
   ========================================================================== */
.baglar-v2 {
  --bv2-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --bv2-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bv2-placeholder: #ece1cd;

  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px 100px;
  font-family: var(--bv2-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Vineyard trio ─── */
.baglar-v2 .trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;            /* tighter (was 80) */
}
.baglar-v2 .vyd {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.baglar-v2 .vyd .img {
  position: relative;
  background: var(--bv2-placeholder);
  overflow: hidden;
  aspect-ratio: 3 / 3.6;          /* shorter — was 3 / 4.4 (very tall portrait) */
  transition: box-shadow .6s ease;
}
.baglar-v2 .vyd .img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(91,26,38,0.00) 55%, rgba(61,15,26,0.18));
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 2;
}
.baglar-v2 .vyd .parallax {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.baglar-v2 .vyd .parallax::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 18px,
    rgba(185,143,78,0.09) 18px, rgba(185,143,78,0.09) 19px
  );
}
/* Suppress placeholder pattern + label when a real photo is set on .parallax */
.baglar-v2 .vyd.vyd--has-photo .parallax::before { display: none; }
.baglar-v2 .vyd.vyd--has-photo .placeholder-label { display: none; }

/* Per-vineyard photos. Same convention as wines + team — change URL here once
   and the .vyd--has-photo modifier kicks in via the script. */
.baglar-v2 .vyd--kocadag .parallax {
  background-image: url('/wp-content/uploads/2026/04/1.webp');
  background-position: center 50%;
}
.baglar-v2 .vyd--kuscular .parallax {
  background-image: url('/wp-content/uploads/2026/04/saraphane-baglar.jpg');
  background-position: center 50%;
}
.baglar-v2 .vyd--golcuk .parallax {
  background-image: url('/wp-content/uploads/2026/04/urla-kocadag.webp');
  background-position: center 55%;
}

.baglar-v2 .vyd:hover .img { box-shadow: 0 24px 48px -24px rgba(61,15,26,0.32); }
.baglar-v2 .vyd:hover .img::after { opacity: 1; }
.baglar-v2 .vyd:hover .parallax { transform: scale(1.06); }
.baglar-v2 .vyd:hover .placeholder-label { color: rgba(61,15,26,0.55); }
.baglar-v2 .vyd:hover .vyd-name { color: var(--wine); }

.baglar-v2 .vyd .placeholder-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(61,15,26,0.38);
  white-space: nowrap;
  z-index: 1;
  transition: color .6s ease;
}

.baglar-v2 .vyd-caption {
  padding: 18px 16px 0;
  text-align: center;
}
.baglar-v2 .vyd-name {
  font-family: var(--bv2-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--wine-dark);
  margin: 0 0 6px;
  position: relative;
  padding-bottom: 14px;
  transition: color .4s ease;
}
/* Gold underline dash under vyd-name removed — name sits directly above year. */
.baglar-v2 .vyd-year {
  font-family: var(--bv2-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--gold);
  margin: 0 0 6px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.baglar-v2 .vyd-note {
  font-family: var(--bv2-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 260px;
  text-wrap: pretty;
}

/* ─── General info ─── */
.baglar-v2 .info {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 32px;              /* tighter (was 56) */
  /* Separator line removed per user — visual gap alone carries the break. */
}
.baglar-v2 .info-prose p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.baglar-v2 .info-prose p:last-child { margin: 0; }
.baglar-v2 .info-prose p em { font-style: italic; }

@media (max-width: 900px) {
  .baglar-v2 { padding: 0 28px 96px; }
  .baglar-v2 .trio { grid-template-columns: 1fr; gap: 48px; margin-bottom: 72px; }
  .baglar-v2 .vyd .img { aspect-ratio: 4 / 4.2; }
  .baglar-v2 .info { padding-top: 56px; }
  .baglar-v2 .info-prose p { font-size: 15px; }
}

/* ============================================================================
   Ekip v2 — team page (Cormorant Garamond + Inter)
   Opening lede + 2-col team grid of portraits with name/role/bio.
   Scoped under .ekip-v2. Used on the Biz page.
   ========================================================================== */
.ekip-v2 {
  --ev2-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --ev2-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ev2-placeholder: #ece1cd;

  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px 100px;
  font-family: var(--ev2-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Opening (H1 now lives in .page-hero; just the lede paragraphs) ─── */
.ekip-v2 .opening {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 88px;
}
.ekip-v2 .opening p.lede {
  font-family: var(--ev2-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 auto 12px;
  text-wrap: pretty;
}
.ekip-v2 .opening p.lede:last-child { margin-bottom: 0; }
.ekip-v2 .opening p.lede strong {
  color: var(--wine-dark);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ekip-v2 .opening p.lede em {
  font-family: var(--ev2-serif);
  font-style: italic;
  font-size: 1.2em;
  line-height: 1;
  vertical-align: baseline;
  color: var(--gold);
  font-weight: 500;
}

/* ─── Team list (vertical: portrait left + content right per row) ─── */
.ekip-v2 .team {
  display: flex;
  flex-direction: column;
}
.ekip-v2 .member {
  display: grid;
  /* Portrait column: 440 → 374 (-15%) per user request. */
  grid-template-columns: 374px 1fr;
  column-gap: 72px;
  align-items: start;
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
.ekip-v2 .member:last-child { border-bottom: 1px solid var(--border); }

/* Portrait — vertical 4:5 placeholder. Slight overscan (-8% 0) on .parallax
   so the existing scroll-parallax JS can translate it without revealing
   placeholder edges (the design's own inset:0 would clip awkwardly). */
.ekip-v2 .portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ev2-placeholder);
  overflow: hidden;
  cursor: pointer;
  border-radius: 0;
  transition: box-shadow .6s ease;
  margin: 0;
}
.ekip-v2 .portrait::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(91,26,38,0.00) 60%, rgba(61,15,26,0.16));
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 2;
}
.ekip-v2 .portrait .parallax {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.ekip-v2 .portrait .parallax::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 14px,
    rgba(185,143,78,0.09) 14px, rgba(185,143,78,0.09) 15px
  );
}
/* When a real photo is set, suppress the diagonal pattern + label */
.ekip-v2 .portrait.has-photo .parallax::before { display: none; }
.ekip-v2 .portrait.has-photo .placeholder-label { display: none; }

/* Per-member portrait images — single source of truth.
   To swap a member's photo: change the URL on its line below. To add a new
   member: add a `member--<slug>` line + matching class on the .portrait. */
.ekip-v2 .member--serpil .parallax {
  background-image: url('/wp-content/uploads/2026/04/ekip-serpil.jpg');
  background-position: center 22%;     /* nudge so the face sits in upper third */
}
.ekip-v2 .member--iklima .parallax {
  /* Swapped to DSC05395 (edited-ekip26) — İklima pruning vines in the
     vineyard, sunglasses, hair in a bun. Face sits upper-right of frame. */
  background-image: url('/wp-content/uploads/2026/04/ekip-iklima-v2.jpg');
  background-position: 60% 24%;
}
.ekip-v2 .member--antoine .parallax {
  /* Swapped to the gallery's Üretim shot (usca-125): Antoine in profile by
     the stainless tanks. It's a landscape frame — face sits right-of-center,
     so we shift the focal point to ~65% horizontal / ~38% vertical to keep
     his face in the portrait tile's upper third. */
  background-image: url('/wp-content/uploads/2026/04/usca-125.jpg');
  background-position: 65% 38%;
}
.ekip-v2 .member--isil .parallax {
  /* Işıl Vardar — white tee + gold necklace, indoor venue. Face upper third. */
  background-image: url('/wp-content/uploads/2026/04/ekip-isil.jpg');
  background-position: center 18%;
}
.ekip-v2 .member--erdem .parallax {
  background-image: url('/wp-content/uploads/2026/04/DSC_0079.webp');
  background-position: center 28%;
}
.ekip-v2 .portrait:hover { box-shadow: 0 16px 32px -18px rgba(61,15,26,0.32); }
.ekip-v2 .portrait:hover::after { opacity: 1; }
.ekip-v2 .portrait:hover .parallax { transform: scale(1.06); }
.ekip-v2 .portrait .placeholder-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(61,15,26,0.38);
  white-space: nowrap;
  z-index: 1;
  text-align: center;
  width: 86%;
  line-height: 1.4;
}

/* ─── Closing — Serpil Erdurak's signed statement (bottom of the team) ─── */
.ekip-v2 .ekip-closing {
  margin-top: 100px;
  padding-top: 64px;
  border-top: 1px solid var(--border);
}
.ekip-v2 .ekip-closing__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.ekip-v2 .ekip-closing__inner p {
  font-family: var(--ev2-serif);
  font-size: 20px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 auto 22px;
  text-wrap: pretty;            /* no widow words in the founder's letter */
}
.ekip-v2 .ekip-closing__wish {
  font-style: italic;
  color: var(--wine-dark);
  margin-top: 32px !important;
}
.ekip-v2 .ekip-closing__sign {
  font-style: italic;
  font-size: 26px;
  color: var(--gold);
  margin: 10px 0 0 !important;
}

/* Content column */
.ekip-v2 .m-content { padding-top: 24px; }

/* Name + role grouped together. Aggressive reset to force a common left
   edge for m-head, m-bio, and their children — rules out any inherited
   shift (browser UA h2 margins, text-indent, etc). */
.ekip-v2 .m-content,
.ekip-v2 .m-head,
.ekip-v2 .m-bio {
  margin-left: 0;
  padding-left: 0;
  text-align: left;
  text-indent: 0;
}
.ekip-v2 .m-head { margin-bottom: 32px; }
.ekip-v2 .m-name,
.ekip-v2 .m-role,
.ekip-v2 .m-bio p {
  margin-left: 0;
  padding-left: 0;
  text-indent: 0;
  text-align: left;
}
.ekip-v2 .m-name {
  font-family: var(--ev2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.05;
  color: var(--wine-dark);
  margin: 0 0 20px;
  letter-spacing: 0.003em;
  text-wrap: balance;
  text-transform: none;
}
.ekip-v2 .m-name .surname {
  font-style: italic;
  font-family: var(--ev2-serif);
  font-weight: 400;
  letter-spacing: 0.003em;
  text-transform: none;
  font-size: 1em;
  vertical-align: baseline;
  color: var(--wine-dark);
  margin-left: 0.28em;
}
.ekip-v2 .m-role {
  font-family: var(--ev2-serif);
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--gold);
  font-weight: 500;
  margin: 0;
  display: inline-block;
}

/* Bio */
.ekip-v2 .m-bio { max-width: 520px; }
.ekip-v2 .m-bio p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.ekip-v2 .m-bio p:last-child { margin: 0; }
.ekip-v2 .m-bio p strong {
  color: var(--wine-dark);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ekip-v2 .m-bio p em {
  font-family: var(--ev2-serif);
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}

@media (max-width: 900px) {
  .ekip-v2 { padding: 0 24px 72px; }
  .ekip-v2 .opening { margin: 0 auto 56px; }
  .ekip-v2 .team { row-gap: 0; }
  .ekip-v2 .member {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 32px;
    padding: 48px 0;
  }
  .ekip-v2 .portrait { aspect-ratio: 3 / 4; max-width: 340px; }
  .ekip-v2 .m-content { padding-top: 0; }
  .ekip-v2 .m-name { font-size: 32px; margin-bottom: 16px; }
  .ekip-v2 .m-head { margin-bottom: 24px; }
  .ekip-v2 .portrait .placeholder-label { font-size: 8px; }
}

/* ============================================================================
   İletişim v2 — contact page (Cormorant Garamond + Inter)
   Opening lede + 3-up details strip + form/map split + hours strip.
   Form wires to /wp-json/usca/v1/contact (handler in functions.php).
   ========================================================================== */
.iletisim-v2 {
  --iv2-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --iv2-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --iv2-field: #f6efe4;

  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px 100px;
  font-family: var(--iv2-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Opening (H1 lives in .page-hero — just lede here) ─── */
.iletisim-v2 .opening {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;          /* was 64 — tighten gap to details strip */
}
.iletisim-v2 .opening p.lede {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.iletisim-v2 .opening p.lede em {
  font-family: var(--iv2-serif);
  font-style: italic;
  font-size: 1.2em;
  line-height: 1;
  vertical-align: baseline;
  color: var(--gold);
  font-weight: 500;
}

/* ─── Contact details strip (3-up) ─── */
.iletisim-v2 .details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding: 22px 0 26px;          /* was 40 0 56 — tighter strip */
  margin-bottom: 36px;           /* was 64 — tighter gap to form/map split */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.iletisim-v2 .detail { text-align: center; }
.iletisim-v2 .detail .eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 10px;              /* was 14 — tighter */
}
.iletisim-v2 .detail .value {
  font-family: var(--iv2-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0;
}
.iletisim-v2 .detail a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease, color .4s ease;
}
.iletisim-v2 .detail a:hover {
  color: var(--wine);
  border-bottom-color: var(--gold);
}

/* ─── Split: form + map ─── */
.iletisim-v2 .split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* ─── Form ─── */
.iletisim-v2 .form-block h2 {
  font-family: var(--iv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  color: var(--wine-dark);
  margin: 0 0 8px;
  letter-spacing: 0.005em;
  text-wrap: balance;
  text-transform: none;
}
.iletisim-v2 .form-block .sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.iletisim-v2 .form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.iletisim-v2 .field { position: relative; }
.iletisim-v2 .field label {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--gray);
  pointer-events: none;
  transition: all .2s ease;
  background: var(--iv2-field);
  padding: 0 4px;
}
.iletisim-v2 .field.textarea label {
  top: 20px;
  transform: none;
}
.iletisim-v2 .field input,
.iletisim-v2 .field textarea {
  width: 100%;
  background: var(--iv2-field);
  border: 1px solid var(--border);
  padding: 18px 18px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.55;
  outline: none;
  transition: border-color .3s ease, background .3s ease;
  border-radius: 0;
}
.iletisim-v2 .field textarea {
  resize: vertical;
  min-height: 140px;
}
.iletisim-v2 .field input:focus,
.iletisim-v2 .field textarea:focus {
  border-color: var(--gold);
  background: #faf6ef;
}
.iletisim-v2 .field input:focus + label,
.iletisim-v2 .field textarea:focus + label,
.iletisim-v2 .field input:not(:placeholder-shown) + label,
.iletisim-v2 .field textarea:not(:placeholder-shown) + label {
  top: 0;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
/* Honeypot — hidden from humans, visible to bots that auto-fill all fields */
.iletisim-v2 .field--honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* hCaptcha widget container — gives the iframe-injected widget breathing
   room inside the form. The widget itself is styled by hCaptcha; we just
   place it on its own line with a small top gap. */
/* Invisible hCaptcha — no visible widget, just a small disclosure line
   (required by hCaptcha TOS when running in invisible mode). */
.iletisim-v2 .form-captcha {
  margin: 8px 0 0;
  font-family: var(--iv2-sans);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.iletisim-v2 .form-captcha a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0,0,0,0.25);
  transition: color .3s ease, text-decoration-color .3s ease;
}
.iletisim-v2 .form-captcha a:hover {
  color: var(--wine);
  text-decoration-color: var(--gold);
}
/* Hide the rendered hCaptcha challenge container — invisible mode shows
   only the popup challenge when triggered. */
.iletisim-v2 .h-captcha[data-size="invisible"] { display: none; }

/* Submit — solid wine-dark pill with gold accent + arrow.
   Editorial feel preserved (italic Cormorant label) but with proper button
   weight, real touch target, and a clean loading state for the
   invisible-captcha → Formspree round trip. */
.iletisim-v2 .submit {
  margin-top: 28px;
  align-self: flex-start;
  background: var(--wine-dark);
  color: var(--cream);
  border: 1px solid var(--wine-dark);
  padding: 16px 30px 16px 32px;
  font-family: var(--iv2-serif);
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.015em;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  isolation: isolate;
  transition: background .45s ease, color .45s ease, border-color .45s ease,
              gap .4s ease, transform .35s cubic-bezier(.2,.6,.2,1),
              box-shadow .45s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
/* Gold sheen that wipes left → right on hover */
.iletisim-v2 .submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--gold) 0%,
    color-mix(in srgb, var(--gold) 80%, white 20%) 50%,
    var(--gold) 100%);
  transform: translateX(-101%);
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
  z-index: -1;
}
.iletisim-v2 .submit .arrow {
  display: inline-block;
  color: var(--gold);
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  transform: translateX(0);
  transition: transform .45s cubic-bezier(.2,.6,.2,1), color .45s ease;
}
.iletisim-v2 .submit:hover {
  color: var(--wine-dark);
  border-color: var(--gold);
  gap: 22px;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(95,30,40,0.35);
}
.iletisim-v2 .submit:hover::before { transform: translateX(0); }
.iletisim-v2 .submit:hover .arrow {
  transform: translateX(6px);
  color: var(--wine-dark);
}
.iletisim-v2 .submit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.iletisim-v2 .submit:active { transform: translateY(0); }
.iletisim-v2 .submit:disabled,
.iletisim-v2 .submit.is-loading {
  opacity: 0.75;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
.iletisim-v2 .submit:disabled::before,
.iletisim-v2 .submit.is-loading::before { transform: translateX(-101%); }

/* Loading spinner — replaces the arrow while the request is in-flight */
.iletisim-v2 .submit.is-loading .arrow { display: none; }
.iletisim-v2 .submit.is-loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid color-mix(in srgb, var(--cream) 50%, transparent 50%);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: usca-spin .7s linear infinite;
}
@keyframes usca-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .iletisim-v2 .submit,
  .iletisim-v2 .submit::before,
  .iletisim-v2 .submit .arrow { transition: none !important; }
  .iletisim-v2 .submit.is-loading::after { animation: none; }
}

/* Form success / error messages (replace form on submit) */
.iletisim-v2 .form-status {
  padding: 24px 28px;
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  font-family: var(--iv2-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--wine-dark);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}
.iletisim-v2 .form-status.is-error {
  border-left-color: var(--wine);
  color: var(--wine-dark);
}

/* ─── Map ─── */
.iletisim-v2 .map {
  position: relative;
  aspect-ratio: 4 / 4.4;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--cream);
}
.iletisim-v2 .map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.85) contrast(0.98);
}
.iletisim-v2 .map .overlay {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 18px 22px;
  max-width: 260px;
  box-shadow: 0 16px 32px -20px rgba(61,15,26,0.22);
}
.iletisim-v2 .map .overlay .name {
  font-family: var(--iv2-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--wine-dark);
  margin: 0 0 4px;
  letter-spacing: 0.005em;
}
.iletisim-v2 .map .overlay .addr {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ─── Hours strip ─── */
.iletisim-v2 .hours {
  margin-top: 48px;              /* was 72 — tighten gap from form/map split */
  padding: 28px 40px;            /* was 36 — slightly trimmer */
  background: var(--cream-soft);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
}
.iletisim-v2 .hours .tag {
  font-size: 10.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.iletisim-v2 .hours .txt {
  font-family: var(--iv2-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--wine-dark);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}
.iletisim-v2 .hours .txt strong {
  font-style: normal;
  font-family: var(--iv2-sans);
  font-weight: 600;
  color: var(--wine-dark);
  letter-spacing: 0.02em;
  font-size: 0.85em;
}
.iletisim-v2 .hours .cta {
  font-family: var(--iv2-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color .3s ease;
  white-space: nowrap;
}
.iletisim-v2 .hours .cta:hover { color: var(--wine-dark); }

@media (max-width: 900px) {
  .iletisim-v2 { padding: 0 24px 72px; }
  .iletisim-v2 .opening { margin: 0 auto 24px; }
  .iletisim-v2 .details {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 0;
    margin-bottom: 32px;
  }
  .iletisim-v2 .split { grid-template-columns: 1fr; gap: 40px; }
  .iletisim-v2 .map { aspect-ratio: 4 / 4; order: -1; }
  .iletisim-v2 .hours {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px;
    text-align: center;
    margin-top: 32px;
  }
}

/* ============================================================================
   Satış Noktaları v2 — points-of-sale page. Embeds the Google My Map from
   the legacy USCA site (same pin data, just wrapped in our editorial chrome).
   Scoped under .satis-v2.
   ========================================================================== */
.satis-v2 {
  --sv3-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sv3-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px 100px;
  font-family: var(--sv3-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.satis-v2 .opening {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}
.satis-v2 .opening p.lede {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.satis-v2 .opening p.lede em {
  font-family: var(--sv3-serif);
  font-style: italic;
  font-size: 1.2em;
  line-height: 1;
  vertical-align: baseline;
  color: var(--gold);
  font-weight: 500;
}

/* 2-col split: dealer list (narrower) + map (wider) */
.satis-v2 .split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 48px;
  align-items: start;
}

/* Dealer list — tighter spacing, smaller text, narrower column */
.satis-v2 .dealer-list {
  position: sticky;
  top: 24px;
  padding: 0;
}
.satis-v2 .city-group { margin-bottom: 22px; }
.satis-v2 .city-group:last-child { margin-bottom: 0; }
.satis-v2 .city-name {
  font-family: var(--sv3-sans);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.satis-v2 .dealer-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.satis-v2 .dealer-items li {
  margin: 0 0 8px;          /* small gap between dealers when address shown */
  padding: 0;
}
.satis-v2 .dealer-items li:last-child { margin-bottom: 0; }
.satis-v2 .dealer-items a {
  display: block;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .3s ease;
}
.satis-v2 .dealer-items a:hover {
  border-bottom-color: var(--gold);
}
.satis-v2 .dealer-items .dealer-name {
  display: block;
  font-family: var(--sv3-serif);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.25;
  color: var(--wine-dark);
  transition: color .3s ease;
}
.satis-v2 .dealer-items a:hover .dealer-name { color: var(--gold); }
.satis-v2 .dealer-items .dealer-addr {
  display: block;
  font-family: var(--sv3-sans);
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.satis-v2 .dealer-items a:hover .dealer-addr {
  color: color-mix(in srgb, var(--ink) 70%, var(--gold) 30%);
}

/* Map — taller aspect since it now fills half the page instead of full */
.satis-v2 .map {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--cream);
}
.satis-v2 .map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.88) contrast(0.98);
}
/* Small footnote under the map */
.satis-v2 .map-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.satis-v2 .map-note a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color .3s ease;
}
.satis-v2 .map-note a:hover { color: var(--wine-dark); }

@media (max-width: 900px) {
  .satis-v2 { padding: 0 24px 72px; }
  .satis-v2 .opening { margin: 0 auto 32px; }
  .satis-v2 .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .satis-v2 .dealer-list { position: static; }
  .satis-v2 .map { aspect-ratio: 4 / 4.5; order: -1; }
  .satis-v2 .dealer-items a { font-size: 17px; }
}

/* ============================================================================
   Galeri v2 — gallery page (Cormorant Garamond + Inter)
   Hero carousel (auto-advance + drag) + filter bar + masonry tiles + lightbox.
   Scoped under .galeri-v2.
   ========================================================================== */
.galeri-v2 {
  --gv2-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --gv2-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gv2-placeholder: #ece1cd;

  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px 100px;             /* was 32px top — pull hero carousel up to page edge */
  font-family: var(--gv2-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Opening (just title) */
.galeri-v2 .opening {
  /* legacy — emptied in script; rule kept so the empty <section> (if it
     ever rendered) doesn't add space. */
  display: none;
}
.galeri-v2 .opening .headline {
  font-family: var(--gv2-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 56px;
  line-height: 1.28;
  color: var(--wine-dark);
}

/* hero-overlay-title was used briefly — removed; carousel has no title now */
.galeri-v2 .hero-overlay-title { display: none; }

/* ─── Hero carousel — full-bleed + pulled up under header's V scallop.
   Matches .page-hero behavior on other pages. Safe from side-scroll
   because html+body have `overflow-x: clip` globally. ─── */
.galeri-v2 .hero-carousel {
  position: relative;
  width: 100vw;
  /* Break out of .galeri-v2's max-width:1280 + padding:0 64px container so
     the carousel reaches the viewport edges, just like .page-hero does. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Pull up so the header's V pendant scallops down into the image.
     Value = .site-header padding-bottom (V depth). */
  margin-top: -25px;
  margin-bottom: 32px;            /* was 72 — tightened gap before filter row */
  z-index: 1;
  aspect-ratio: 16 / 5.5;          /* thinner — was 16 / 7 */
  overflow: hidden;
  background: var(--gv2-placeholder);
  user-select: none;
  touch-action: pan-y;
}
.galeri-v2 .hero-track { position: absolute; inset: 0; cursor: grab; }
.galeri-v2 .hero-track.is-dragging { cursor: grabbing; }
.galeri-v2 .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  background: var(--gv2-placeholder);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.galeri-v2 .hero-track.is-dragging .hero-slide,
.galeri-v2 .hero-slide.is-dragging { transition: none; }
.galeri-v2 .hero-slide.is-active { opacity: 1; pointer-events: auto; }
.galeri-v2 .hero-slide::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 22px,
    rgba(185,143,78,0.09) 22px, rgba(185,143,78,0.09) 23px
  );
}
.galeri-v2 .hero-slide.has-photo::before { display: none; }
.galeri-v2 .hero-slide.has-photo .ph-label { display: none; }
.galeri-v2 .hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(61,15,26,0) 40%, rgba(61,15,26,0.42));
  pointer-events: none;
}
.galeri-v2 .hero-slide .ph-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(61,15,26,0.38);
  white-space: nowrap;
}
.galeri-v2 .hero-zone {
  position: absolute;
  top: 0; bottom: 0;
  width: 33%;
  z-index: 4;
  background: transparent;
  border: none;
  cursor: w-resize;
  opacity: 0;
}
.galeri-v2 .hero-zone.next { right: 0; cursor: e-resize; }
.galeri-v2 .hero-zone.prev { left: 0; }
.galeri-v2 .hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-family: var(--gv2-serif);
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
  transition: opacity .4s ease, color .3s ease, transform .3s ease;
  pointer-events: none;
}
.galeri-v2 .hero-carousel:hover .hero-arrow { opacity: 1; pointer-events: auto; }
.galeri-v2 .hero-arrow.prev { left: 20px; }
.galeri-v2 .hero-arrow.next { right: 20px; }
.galeri-v2 .hero-arrow.prev:hover { transform: translateY(-50%) translateX(-2px); color: var(--gold); }
.galeri-v2 .hero-arrow.next:hover { transform: translateY(-50%) translateX(2px); color: var(--gold); }
.galeri-v2 .hero-caption {
  position: absolute;
  left: 40px;
  bottom: 32px;
  color: #fff;
  z-index: 3;
  max-width: 520px;
}
.galeri-v2 .hero-caption .tag {
  display: block;
  font-family: var(--gv2-sans);
  font-size: 10.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 10px;
}
.galeri-v2 .hero-caption .txt {
  font-family: var(--gv2-serif);
  font-style: italic;
  font-size: 30px;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 1px 16px rgba(0,0,0,0.4);
  text-wrap: balance;
}
.galeri-v2 .hero-dots {
  position: absolute;
  right: 32px;
  bottom: 40px;
  display: flex;
  gap: 10px;
  z-index: 3;
}
.galeri-v2 .hero-dots button {
  width: 24px; height: 2px;
  background: rgba(255,255,255,0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .4s ease, width .4s ease;
}
.galeri-v2 .hero-dots button.is-active {
  background: var(--gold);
  width: 40px;
}

/* ─── Filter bar ─── */
.galeri-v2 .filters {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 8px 0 32px;            /* was 24/0/48 — tighter top, less bottom */
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;            /* was 56 */
  flex-wrap: wrap;
}
.galeri-v2 .filters button {
  background: transparent;
  border: none;
  padding: 4px 0;
  font-family: var(--gv2-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
  transition: color .3s ease;
  letter-spacing: 0.01em;
}
.galeri-v2 .filters button::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  width: 0; height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width .4s cubic-bezier(.2,.6,.2,1);
}
.galeri-v2 .filters button:hover,
.galeri-v2 .filters button.is-active { color: var(--wine-dark); }
.galeri-v2 .filters button.is-active::after { width: 24px; }

/* ─── Masonry gallery (CSS columns) ─── */
.galeri-v2 .gallery {
  column-count: 3;
  column-gap: 24px;
}
@media (max-width: 1000px) { .galeri-v2 .gallery { column-count: 2; } }
@media (max-width: 640px)  { .galeri-v2 .gallery { column-count: 1; } }

.galeri-v2 .tile {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 0 24px;
  overflow: hidden;
  background: var(--gv2-placeholder);
  cursor: pointer;
  break-inside: avoid;
  transition: opacity .5s ease, filter .5s ease, transform .5s ease;
}
.galeri-v2 .tile .parallax {
  position: relative;
  display: block;
  width: 100%;
  background: var(--gv2-placeholder);
  background-size: cover;
  background-position: center;
  transition: transform .9s cubic-bezier(.2,.6,.2,1);
}
.galeri-v2 .tile .parallax::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 18px,
    rgba(185,143,78,0.09) 18px, rgba(185,143,78,0.09) 19px
  );
}
.galeri-v2 .tile.has-photo .parallax::before { display: none; }
.galeri-v2 .tile.has-photo .ph-label { display: none; }
.galeri-v2 .tile.has-photo .parallax {
  background-size: cover;
  background-position: center;
}

/* ─── Per-tile photos (single source of truth) ─────────────────────────
   Convention: each tile in 76_galeri_editorial.php carries a `tile--<slug>`
   class; the rule below maps slug → uploaded file. Slug dots are normalized
   to dashes in the script (e.g. interior3.1.png → tile--interior3-1).
   Same pattern for .hero-slide--<slug> carousel slides below. */

/* ── Bağlar — UscaImages_From_Before batch (14) ─────────────────────── */
.galeri-v2 .tile--usca-5 .parallax    { background-image: url('/wp-content/uploads/2026/04/usca-5.jpg'); }
.galeri-v2 .tile--usca-8 .parallax    { background-image: url('/wp-content/uploads/2026/04/baglar-serpil.jpg'); background-position: center 38%; }
.galeri-v2 .tile--usca-22 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-22.jpg'); }
.galeri-v2 .tile--usca-26 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-26.jpg'); }
.galeri-v2 .tile--usca-35 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-35.jpg'); }
.galeri-v2 .tile--usca-45 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-45.jpg'); }
.galeri-v2 .tile--usca-46 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-46.jpg'); }
.galeri-v2 .tile--usca-48 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-48.jpg'); }
.galeri-v2 .tile--usca-56 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-56.jpg'); }
.galeri-v2 .tile--usca-59 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-59.jpg'); }
/* usca-65 removed from gallery (bandana lady picking grapes). File kept in uploads. */
.galeri-v2 .tile--usca-67 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-67.jpg'); }
.galeri-v2 .tile--usca-104 .parallax  { background-image: url('/wp-content/uploads/2026/04/usca-104.jpg'); }
.galeri-v2 .tile--usca-109 .parallax  { background-image: url('/wp-content/uploads/2026/04/usca-109.jpg'); }

/* ── Üretim — UscaImages_From_Before batch (6, ek-4 reuses uretim-saraphane.jpg) ── */
.galeri-v2 .tile--usca-95 .parallax    { background-image: url('/wp-content/uploads/2026/04/usca-95.jpg'); }
.galeri-v2 .tile--usca-114 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-114.jpg'); }
.galeri-v2 .tile--usca-125 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-125.jpg'); }
.galeri-v2 .tile--usca-130 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-130.jpg'); }
.galeri-v2 .tile--usca-ek-1 .parallax  { background-image: url('/wp-content/uploads/2026/04/usca-ek-1.jpg'); }
.galeri-v2 .tile--usca-ek-4 .parallax  { background-image: url('/wp-content/uploads/2026/04/uretim-saraphane.jpg'); }

/* ── Şaraphane — UscaImages_From_Before batch (17, 188 reuses tadim-hero.jpg) ── */
.galeri-v2 .tile--usca-101 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-101.jpg'); }
.galeri-v2 .tile--usca-146 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-146.jpg'); }
.galeri-v2 .tile--usca-154 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-154.jpg'); }
.galeri-v2 .tile--usca-164 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-164.jpg'); }
.galeri-v2 .tile--usca-166 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-166.jpg'); }
.galeri-v2 .tile--usca-167 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-167.jpg'); }
.galeri-v2 .tile--usca-170 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-170.jpg'); }
.galeri-v2 .tile--usca-171 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-171.jpg'); }
.galeri-v2 .tile--usca-173 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-173.jpg'); }
.galeri-v2 .tile--usca-176 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-176.jpg'); }
.galeri-v2 .tile--usca-178 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-178.jpg'); }
.galeri-v2 .tile--usca-179 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-179.jpg'); }
.galeri-v2 .tile--usca-182 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-182.jpg'); }
.galeri-v2 .tile--usca-188 .parallax     { background-image: url('/wp-content/uploads/2026/04/tadim-hero.jpg'); }
.galeri-v2 .tile--usca-188-alt .parallax { background-image: url('/wp-content/uploads/2026/04/usca-188-alt.jpg'); }
.galeri-v2 .tile--usca-189 .parallax     { background-image: url('/wp-content/uploads/2026/04/usca-189.jpg'); }
.galeri-v2 .tile--usca-ek-12 .parallax   { background-image: url('/wp-content/uploads/2026/04/usca-ek-12.jpg'); }

/* ── Bağlar (original 8) ──────────────────────────────────────────────── */
.galeri-v2 .tile--123-1 .parallax                  { background-image: url('/wp-content/uploads/2026/04/123-1.webp'); }
.galeri-v2 .tile--1 .parallax                      { background-image: url('/wp-content/uploads/2026/04/1.webp'); }
.galeri-v2 .tile--cabernet-sauvignon .parallax     { background-image: url('/wp-content/uploads/2026/04/cabernet-sauvignon.webp'); }
.galeri-v2 .tile--cografi-konum .parallax          { background-image: url('/wp-content/uploads/2026/04/cografi-konum.webp'); }
.galeri-v2 .tile--syrah-uzum .parallax             { background-image: url('/wp-content/uploads/2026/04/syrah-uzum.webp'); }
.galeri-v2 .tile--jeolojik-degerlendirme .parallax { background-image: url('/wp-content/uploads/2026/04/jeolojik-degerlendirme.webp'); }
.galeri-v2 .tile--DSC_0218 .parallax               { background-image: url('/wp-content/uploads/2026/04/DSC_0218.webp'); }
.galeri-v2 .tile--urla-kocadag .parallax           { background-image: url('/wp-content/uploads/2026/04/urla-kocadag.webp'); }

/* ── Üretim — 14 (barrels_00000-00004 + mahzen2-8 + uretim_1/2) ────── */
.galeri-v2 .tile--barrels_00000 .parallax { background-image: url('/wp-content/uploads/2026/04/barrels_00000.jpg'); }
.galeri-v2 .tile--barrels_00001 .parallax { background-image: url('/wp-content/uploads/2026/04/barrels_00001.jpg'); }
.galeri-v2 .tile--barrels_00002 .parallax { background-image: url('/wp-content/uploads/2026/04/barrels_00002.jpg'); }
.galeri-v2 .tile--barrels_00003 .parallax { background-image: url('/wp-content/uploads/2026/04/barrels_00003.jpg'); }
.galeri-v2 .tile--barrels_00004 .parallax { background-image: url('/wp-content/uploads/2026/04/barrels_00004.jpg'); }
.galeri-v2 .tile--mahzen2 .parallax       { background-image: url('/wp-content/uploads/2026/04/mahzen2.jpg'); }
.galeri-v2 .tile--mahzen3 .parallax       { background-image: url('/wp-content/uploads/2026/04/mahzen3.jpg'); }
.galeri-v2 .tile--mahzen4 .parallax       { background-image: url('/wp-content/uploads/2026/04/mahzen4.jpg'); }
.galeri-v2 .tile--mahzen5 .parallax       { background-image: url('/wp-content/uploads/2026/04/mahzen5.jpg'); }
.galeri-v2 .tile--mahzen6 .parallax       { background-image: url('/wp-content/uploads/2026/04/mahzen6.jpg'); }
.galeri-v2 .tile--mahzen7 .parallax       { background-image: url('/wp-content/uploads/2026/04/mahzen7.jpg'); }
.galeri-v2 .tile--mahzen8 .parallax       { background-image: url('/wp-content/uploads/2026/04/mahzen8.jpg'); }
/* uretim_1 / uretim_2 swapped to the new tank photos (same as Üretim page).
   Old wooden-vat detail shots retired per user. Lightbox reads these via
   getComputedStyle(.parallax).backgroundImage, so this updates both views. */
.galeri-v2 .tile--uretim_1 .parallax      { background-image: url('/wp-content/uploads/2026/04/uretim-forweb.jpg'); }
.galeri-v2 .tile--uretim_2 .parallax      { background-image: url('/wp-content/uploads/2026/04/uretim-forweb2.jpg'); }
.galeri-v2 .tile--uretim-mahzen2 .parallax { background-image: url('/wp-content/uploads/2026/04/uretim-mahzen2.jpg'); }

/* ── Şaraphane — 14 (exterior + interior + int_ + tomurcuk) ─────────── */
.galeri-v2 .tile--exterior .parallax        { background-image: url('/wp-content/uploads/2026/04/exterior.jpg'); }
.galeri-v2 .tile--exterior3 .parallax       { background-image: url('/wp-content/uploads/2026/04/exterior3.jpg'); }
.galeri-v2 .tile--exterior4 .parallax       { background-image: url('/wp-content/uploads/2026/04/exterior4.jpg'); }
.galeri-v2 .tile--exterior6 .parallax       { background-image: url('/wp-content/uploads/2026/04/exterior6.jpg'); }
.galeri-v2 .tile--interior3 .parallax       { background-image: url('/wp-content/uploads/2026/04/interior3.jpg'); }
.galeri-v2 .tile--interior3-1 .parallax     { background-image: url('/wp-content/uploads/2026/04/interior3.1.jpg'); }
.galeri-v2 .tile--interior4 .parallax       { background-image: url('/wp-content/uploads/2026/04/interior4.jpg'); }
.galeri-v2 .tile--interior5 .parallax       { background-image: url('/wp-content/uploads/2026/04/interior5.jpg'); }
.galeri-v2 .tile--interior7 .parallax       { background-image: url('/wp-content/uploads/2026/04/interior7.jpg'); }
.galeri-v2 .tile--int_1 .parallax           { background-image: url('/wp-content/uploads/2026/04/int_1.jpg'); }
.galeri-v2 .tile--int_2 .parallax           { background-image: url('/wp-content/uploads/2026/04/int_2.jpg'); }
.galeri-v2 .tile--tomurcuk_00000 .parallax  { background-image: url('/wp-content/uploads/2026/04/tomurcuk_00000.jpg'); }
.galeri-v2 .tile--tomurcuk_00001 .parallax  { background-image: url('/wp-content/uploads/2026/04/tomurcuk_00001.jpg'); }
.galeri-v2 .tile--tomurcuk_00002 .parallax  { background-image: url('/wp-content/uploads/2026/04/tomurcuk_00002.jpg'); }

/* ── Şaraphane batch #2 — 5 ────────────────────────────────────────── */
.galeri-v2 .tile--canbolo-01 .parallax       { background-image: url('/wp-content/uploads/2026/04/canbolo-01.jpg'); }
.galeri-v2 .tile--canbolo-02 .parallax       { background-image: url('/wp-content/uploads/2026/04/canbolo-02.jpg'); }
.galeri-v2 .tile--canbolo-03 .parallax       { background-image: url('/wp-content/uploads/2026/04/canbolo-03.jpg'); }
.galeri-v2 .tile--sean-cut-01 .parallax      { background-image: url('/wp-content/uploads/2026/04/sean-cut-01.jpg'); }
.galeri-v2 .tile--saraphane-baglar .parallax { background-image: url('/wp-content/uploads/2026/04/saraphane-baglar.jpg'); }

/* ── Sonnelerimiz — NEW 9 bottle shots ─────────────────────────────────── */
.galeri-v2 .tile--sonne-5 .parallax        { background-image: url('/wp-content/uploads/2026/04/sonne-5.jpg'); }
.galeri-v2 .tile--sonne-8 .parallax        { background-image: url('/wp-content/uploads/2026/04/sonne-8.jpg'); }
.galeri-v2 .tile--sonne-23 .parallax       { background-image: url('/wp-content/uploads/2026/04/sonne-23.jpg'); }
.galeri-v2 .tile--sonne-58 .parallax       { background-image: url('/wp-content/uploads/2026/04/sonne-58.jpg'); }
.galeri-v2 .tile--sonne-66 .parallax       { background-image: url('/wp-content/uploads/2026/04/sonne-66.jpg'); }
.galeri-v2 .tile--sonne-76 .parallax       { background-image: url('/wp-content/uploads/2026/04/sonne-76.jpg'); }
.galeri-v2 .tile--sonne-99 .parallax       { background-image: url('/wp-content/uploads/2026/04/sonne-99.jpg'); }
.galeri-v2 .tile--sonne-studio-1 .parallax { background-image: url('/wp-content/uploads/2026/04/sonne-studio-1.jpg'); }
.galeri-v2 .tile--sonne-studio-2 .parallax { background-image: url('/wp-content/uploads/2026/04/sonne-studio-2.jpg'); }

/* ── Sonnelerimiz — 11 (shared with /saraplar/ page) ──────────────────── */
.galeri-v2 .tile--sonnet-5 .parallax   { background-image: url('/wp-content/uploads/2026/04/sonnet-5.jpg'); }
.galeri-v2 .tile--sonnet-8 .parallax   { background-image: url('/wp-content/uploads/2026/04/sonnet-8.jpg'); }
.galeri-v2 .tile--sonnet-23 .parallax  { background-image: url('/wp-content/uploads/2026/04/sonnet-23.jpg'); }
.galeri-v2 .tile--sonnet-35 .parallax  { background-image: url('/wp-content/uploads/2026/04/sonnet-35.jpg'); }
.galeri-v2 .tile--sonnet-58 .parallax  { background-image: url('/wp-content/uploads/2026/04/sonnet-58.jpg'); }
.galeri-v2 .tile--sonnet-66 .parallax  { background-image: url('/wp-content/uploads/2026/04/sonnet-66.jpg'); }
.galeri-v2 .tile--sonnet-73 .parallax  { background-image: url('/wp-content/uploads/2026/04/sonnet-73.jpg'); }
.galeri-v2 .tile--sonnet-76 .parallax  { background-image: url('/wp-content/uploads/2026/04/sonnet-76.jpg'); }
.galeri-v2 .tile--sonnet-99 .parallax  { background-image: url('/wp-content/uploads/2026/04/sonnet-99.jpg'); }
.galeri-v2 .tile--sonnet-116 .parallax { background-image: url('/wp-content/uploads/2026/04/sonnet-116.jpg'); }
.galeri-v2 .tile--opia-x .parallax     { background-image: url('/wp-content/uploads/2026/04/opia-x.jpg'); }
/* Bottles are shot against a white/cream backdrop — use contain so the full
   bottle stays visible, and a subtle cream background behind in case the
   tile's aspect ratio doesn't match the photo exactly. */
.galeri-v2 .tile[class*="tile--sonnet-"] .parallax,
.galeri-v2 .tile--opia-x .parallax {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--cream, #f6efe4);
}

/* ─── Per-slide hero carousel photos ──────────────────────────────────── */
.galeri-v2 .hero-slide--urla-kocadag       { background-image: url('/wp-content/uploads/2026/04/urla-kocadag.webp'); }
.galeri-v2 .hero-slide--exterior           { background-image: url('/wp-content/uploads/2026/04/exterior.jpg'); }
.galeri-v2 .hero-slide--barrels_00000      { background-image: url('/wp-content/uploads/2026/04/barrels_00000.jpg'); background-position: center 40%; }
.galeri-v2 .hero-slide--cabernet-sauvignon { background-image: url('/wp-content/uploads/2026/04/cabernet-sauvignon.webp'); }
.galeri-v2 .hero-slide--interior3          { background-image: url('/wp-content/uploads/2026/04/interior3.jpg'); }
.galeri-v2 .hero-slide--mahzen3            { background-image: url('/wp-content/uploads/2026/04/mahzen3.jpg'); }
.galeri-v2 .hero-slide--DSC_0218           { background-image: url('/wp-content/uploads/2026/04/DSC_0218.webp'); }
.galeri-v2 .hero-slide--tomurcuk_00000     { background-image: url('/wp-content/uploads/2026/04/tomurcuk_00000.jpg'); }
.galeri-v2 .hero-slide--barrels_00003      { background-image: url('/wp-content/uploads/2026/04/barrels_00003.jpg'); }
.galeri-v2 .hero-slide--interior5          { background-image: url('/wp-content/uploads/2026/04/interior5.jpg'); }

/* Aspect variants */
.galeri-v2 .tile.r-34 .parallax { aspect-ratio: 3 / 4; }
.galeri-v2 .tile.r-43 .parallax { aspect-ratio: 4 / 3; }
.galeri-v2 .tile.r-11 .parallax { aspect-ratio: 1 / 1; }
.galeri-v2 .tile.r-23 .parallax { aspect-ratio: 2 / 3; }
.galeri-v2 .tile.r-32 .parallax { aspect-ratio: 3 / 2; }
.galeri-v2 .tile.r-54 .parallax { aspect-ratio: 5 / 4; }

.galeri-v2 .tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(61,15,26,0) 55%, rgba(61,15,26,0.35));
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 2;
}
.galeri-v2 .tile:hover::after { opacity: 1; }
.galeri-v2 .tile:hover .parallax { transform: scale(1.04); }

.galeri-v2 .tile .caption {
  position: absolute;
  left: 18px; bottom: 14px;
  color: #fff;
  font-family: var(--gv2-serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
  z-index: 3;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.galeri-v2 .tile .caption .tag {
  display: block;
  font-family: var(--gv2-sans);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
}
.galeri-v2 .tile:hover .caption {
  opacity: 1;
  transform: translateY(0);
}
.galeri-v2 .tile .ph-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(61,15,26,0.38);
  white-space: nowrap;
  z-index: 1;
}
.galeri-v2 .tile.is-hidden { display: none; }

/* ─── Lightbox ─── */
.galeri-lb {
  position: fixed;
  inset: 0;
  background: rgba(30,12,18,0.94);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px;
  backdrop-filter: blur(6px);
}
.galeri-lb.is-open { display: flex; }
/* Frame now sizes to the image's natural aspect ratio — we use an actual
   <img> element (injected by JS) with object-fit: contain. The frame itself
   collapses to the image's rendered dimensions via fit-content sizing. */
.galeri-lb .lb-frame {
  position: relative;
  max-width: min(1100px, 90vw);
  max-height: calc(100vh - 140px);   /* leaves room for caption below */
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Soft fade-in for the image when it swaps */
  transition: opacity .3s ease;
}
.galeri-lb .lb-frame .lb-image {
  display: block;
  max-width: min(1100px, 90vw);
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  /* fade-in when the new src loads */
  opacity: 0;
  transition: opacity .35s ease;
}
.galeri-lb .lb-frame .lb-image.is-loaded { opacity: 1; }
/* Placeholder frame (when a tile has no photo yet — rare now) */
.galeri-lb .lb-frame .parallax {
  display: none;
  position: relative;
  width: min(900px, 80vw);
  aspect-ratio: 3 / 2;
  background: var(--gv2-placeholder);
  background-size: cover;
  background-position: center;
}
.galeri-lb .lb-frame:not(.has-photo) .parallax { display: block; }
.galeri-lb .lb-frame:not(.has-photo) .lb-image { display: none; }
.galeri-lb .lb-frame .parallax::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 22px,
    rgba(185,143,78,0.1) 22px, rgba(185,143,78,0.1) 23px
  );
}
.galeri-lb .lb-frame .ph-label {
  color: rgba(255,255,255,0.55);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.galeri-lb .lb-frame.has-photo .ph-label { display: none; }

/* Caption sits under the frame, centered. Absolute-positioning relative to
   the lightbox (not the frame) keeps placement stable when frame size
   changes with image aspect ratio. */
.galeri-lb .lb-caption {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  font-family: var(--gv2-serif);
  font-style: italic;
  font-size: 17px;
  text-align: center;
  max-width: 80vw;
  pointer-events: none;
}
.galeri-lb .lb-caption .tag {
  display: inline-block;
  font-family: var(--gv2-sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-right: 14px;
}
.galeri-lb .lb-close,
.galeri-lb .lb-prev,
.galeri-lb .lb-next {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
  font-family: var(--gv2-serif);
  font-style: italic;
  font-size: 20px;
  width: 48px; height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}
.galeri-lb .lb-close:hover,
.galeri-lb .lb-prev:hover,
.galeri-lb .lb-next:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.galeri-lb .lb-close { top: 24px; right: 24px; }
.galeri-lb .lb-prev  { top: 50%; left: 24px;  transform: translateY(-50%); }
.galeri-lb .lb-next  { top: 50%; right: 24px; transform: translateY(-50%); }
.galeri-lb .lb-counter {
  position: absolute;
  top: 32px; left: 32px;
  color: rgba(255,255,255,0.55);
  font-family: var(--gv2-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
}
.galeri-lb .lb-counter .cur { color: var(--gold); }

@media (max-width: 900px) {
  .galeri-v2 { padding: 24px 24px 72px; }
  .galeri-v2 .hero-carousel {
    aspect-ratio: 4 / 4.2;        /* thinner on mobile too */
    margin-top: -18px;            /* mobile V depth */
    margin-bottom: 48px;
  }
  .galeri-v2 .hero-caption { left: 24px; bottom: 24px; max-width: 80%; }
  .galeri-v2 .hero-caption .txt { font-size: 22px; }
  .galeri-v2 .hero-dots { right: 16px; bottom: 20px; }
  .galeri-v2 .opening { margin: 0 auto 40px; padding-top: 6px; }
  .galeri-v2 .opening .headline { font-size: 40px; line-height: 1.3; }
  .galeri-v2 .filters { gap: 20px; padding: 16px 0 32px; margin-bottom: 40px; }
  .galeri-v2 .filters button { font-size: 16px; }
  .galeri-lb { padding: 24px; }
  .galeri-lb .lb-close,
  .galeri-lb .lb-prev,
  .galeri-lb .lb-next { width: 40px; height: 40px; }
  .galeri-lb .lb-prev { left: 8px; } .galeri-lb .lb-next { right: 8px; }
}

/* ============================================================================
   Üretim v2 — editorial design (Cormorant Garamond + Inter)
   Sticky 2-col narrative: 3 stacked image blocks on the left, flowing prose
   on the right. Optional bottom duo. Scoped under .uretim-v2.
   ========================================================================== */
.uretim-v2 {
  --uv2-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --uv2-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --uv2-placeholder: #ece1cd;

  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px 140px;         /* zero top — hero's margin-bottom carries the gap */
  font-family: var(--uv2-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Opening (legacy — H1 now lives in .page-hero; kept for compatibility) ─── */
.uretim-v2 .opening {
  margin: 0 0 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.uretim-v2 .opening .headline {
  font-family: var(--uv2-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.1;
  color: var(--wine-dark);
  letter-spacing: 0.005em;
  margin: 0 0 18px;
  text-wrap: balance;
  text-transform: none;           /* override global h1 uppercase rule */
}
.uretim-v2 .opening .rule {
  width: 40px; height: 1px;
  background: var(--gold);
  margin: 0;
}

/* ─── Narrative: images (left) + sticky text (right) ─── */
.uretim-v2 .narrative {
  display: grid;
  /* tilt the ratio toward the text column — photos shrink, prose breathes */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: 64px;
  row-gap: 48px;
  margin-bottom: 80px;
  align-items: start;
}
.uretim-v2 .col-images {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 360px;                 /* cap image column width — shrinks photos */
}
.uretim-v2 .col-text {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-top: 12px;
  position: sticky;
  top: 72px;
}
.uretim-v2 .block { position: relative; }

/* Image placeholder — same hover + parallax grammar as Şaraplar/Tadım */
.uretim-v2 .img {
  position: relative;
  background: var(--uv2-placeholder);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .6s ease;
}
.uretim-v2 .img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(91,26,38,0.00) 55%, rgba(61,15,26,0.08));
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 2;
}
.uretim-v2 .img .parallax {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
  transition: transform .25s linear;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.uretim-v2 .img .parallax::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 18px,
    rgba(185,143,78,0.09) 18px, rgba(185,143,78,0.09) 19px
  );
}
/* When a real image is set on .parallax, suppress the placeholder pattern +
   label so the photo reads cleanly. */
.uretim-v2 .img--has-photo .parallax::before { display: none; }
.uretim-v2 .img--has-photo .placeholder-label { display: none; }

.uretim-v2 .img:hover { box-shadow: 0 24px 48px -24px rgba(61,15,26,0.28); }
.uretim-v2 .img:hover::after { opacity: 1; }
.uretim-v2 .img:hover .parallax { transform: scale(1.04); }
.uretim-v2 .img:hover .placeholder-label { color: rgba(61,15,26,0.55); }
.uretim-v2 .img .placeholder-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(61,15,26,0.38);
  white-space: nowrap;
  z-index: 1;
  transition: color .6s ease;
}

.uretim-v2 .block .img.ratio-landscape { aspect-ratio: 4 / 3; }
.uretim-v2 .block .img.ratio-portrait  { aspect-ratio: 3 / 4; }
.uretim-v2 .block .img.ratio-wide      { aspect-ratio: 16 / 10; }

/* Prose column */
.uretim-v2 .prose { max-width: 440px; }
.uretim-v2 .prose p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.uretim-v2 .prose p:last-child { margin: 0; }
.uretim-v2 .prose p strong {
  color: var(--wine-dark);
  font-weight: 600;
}
.uretim-v2 .prose p em {
  font-family: var(--uv2-serif);
  font-style: italic;
  font-size: 1.2em;
  line-height: 1;
  vertical-align: baseline;
  color: var(--gold);
  font-weight: 500;
}
.uretim-v2 .prose .inline-num {
  font-family: var(--uv2-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3em;
  color: var(--wine-dark);
  letter-spacing: -0.005em;
}
.uretim-v2 .prose-rule {
  width: 32px; height: 1px;
  background: var(--gold);
  margin: 8px 0 28px;
}
.uretim-v2 .prose-close {
  font-family: var(--uv2-serif);
  font-style: italic;
  font-size: 20px !important;
  line-height: 1.55 !important;
  color: var(--wine-dark) !important;
  text-wrap: balance;
}

/* Bottom image pair — narrower, centered, less dominant */
.uretim-v2 .duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 72px auto 0;
  max-width: 720px;                 /* shrink duo from full-width to a tighter cluster */
}
/* Trio variant — 3 across, LEFT-ALIGNED with the narrative photos above
   (col-images sit at content X=0). margin-left:0 kills the old auto-centering;
   max-width:none lets the row use the full content width; the tighter 14px
   gap nudges each image slightly larger. */
.uretim-v2 .duo--trio {
  grid-template-columns: 1fr 1fr 1fr;
  max-width: none;
  margin: 72px 0 0;
  gap: 14px;
}
.uretim-v2 .duo .img { aspect-ratio: 4 / 3; }

/* Responsive */
@media (max-width: 900px) {
  .uretim-v2 { padding: 24px 28px 96px; }
  .uretim-v2 .opening { margin: 0 0 48px; }
  .uretim-v2 .opening .headline { font-size: 36px; }
  .uretim-v2 .narrative {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
    margin-bottom: 72px;
  }
  .uretim-v2 .col-text { position: static; gap: 36px; padding-top: 0; }
  .uretim-v2 .prose { max-width: none; }
  .uretim-v2 .duo { grid-template-columns: 1fr; gap: 16px; margin-top: 64px; }
}

/* ============================================================================
   Welcome v2 — home-page editorial layout (sits between the existing
   Elementor HERO and NAV GRID sections). Cormorant Garamond + Inter,
   scoped under .welcome-v2 so nothing bleeds.
   ========================================================================== */
.welcome-v2 {
  --wv2-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --wv2-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wv2-placeholder: #ece1cd;
  --wv2-hero-image: url('/wp-content/uploads/2026/04/welcome-hero-saraphane.jpg');

  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 64px 100px;
  font-family: var(--wv2-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Hero: 2-col split — copy + philosophy on left, image on right ─── */
.welcome-v2 .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  margin-bottom: 72px;
}
.welcome-v2 .hero-left {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 8px;
}
.welcome-v2 .hero-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 80px;             /* push image down — gap from top hero */
}
.welcome-v2 .hero-copy { max-width: 520px; }
.welcome-v2 .hero-eyebrow {
  font-family: var(--wv2-sans);
  font-size: 10.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 22px;
}
.welcome-v2 .hero-title {
  font-family: var(--wv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(54px, 6.2vw, 86px);
  line-height: 0.98;
  color: var(--wine-dark);
  margin: 0 0 28px;
  letter-spacing: -0.005em;
  text-wrap: balance;
  text-transform: none;        /* override global h1 uppercase rule */
}
.welcome-v2 .hero-rule {
  width: 40px; height: 1px;
  background: var(--gold);
  margin: 0 0 28px;
}
.welcome-v2 .hero-lede {
  font-family: var(--wv2-sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.welcome-v2 .hero-lede em {
  font-family: var(--wv2-serif);
  font-style: italic;
  font-size: 1.2em;
  line-height: 1;
  vertical-align: baseline;
  color: var(--gold);
  font-weight: 500;
}

/* Hero side image — vertical placeholder w/ parallax */
.welcome-v2 .hero-image {
  position: relative;
  aspect-ratio: 4 / 5.2;
  background: var(--wv2-placeholder);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .6s ease;
}
.welcome-v2 .hero-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(91,26,38,0.00) 55%, rgba(61,15,26,0.14));
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 2;
}
.welcome-v2 .hero-image .parallax {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
  z-index: 0;
  background-image: var(--wv2-hero-image);
  background-size: cover;
  background-position: center;
}
.welcome-v2 .hero-image .parallax::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 18px,
    rgba(185,143,78,0.09) 18px, rgba(185,143,78,0.09) 19px
  );
}
/* If the inline bg image is set on .parallax, suppress the diagonal pattern */
.welcome-v2 .hero-image.has-photo .parallax::before { display: none; }
.welcome-v2 .hero-image.has-photo .placeholder-label { display: none; }
.welcome-v2 .hero-image:hover { box-shadow: 0 24px 48px -24px rgba(61,15,26,0.32); }
.welcome-v2 .hero-image:hover::after { opacity: 1; }
.welcome-v2 .hero-image:hover .parallax { transform: scale(1.05); }
.welcome-v2 .hero-image .placeholder-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(61,15,26,0.38);
  white-space: nowrap;
  z-index: 1;
}

/* ─── Philosophy moment (in hero-left below hero-copy) ─── */
.welcome-v2 .philosophy {
  text-align: left;
  max-width: 520px;
  margin: 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--border);
}
.welcome-v2 .philosophy p {
  font-family: var(--wv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--wine-dark);
  margin: 0 0 6px;
  text-wrap: pretty;
}
.welcome-v2 .philosophy p:last-of-type { margin: 0; }
.welcome-v2 .philosophy p strong {
  font-style: normal;
  font-family: var(--wv2-sans);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72em;
  vertical-align: 0.1em;
  color: var(--wine-dark);
}
.welcome-v2 .philosophy p .quo {
  color: var(--gold);
  font-weight: 500;
}

/* ─── Timeline header (centered across page) ─── */
.welcome-v2 .timeline-header {
  text-align: center;
  margin: 8px 0 56px;
}
.welcome-v2 .timeline-eyebrow {
  font-family: var(--wv2-sans);
  font-size: 10.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 18px;
}
.welcome-v2 .timeline-title {
  font-family: var(--wv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  color: var(--wine-dark);
  margin: 0;
  text-wrap: balance;
  text-transform: none;
}

/* Timeline — vertical with center spine, alternating sides */
.welcome-v2 .timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto 120px;
  padding: 8px 0;
}
.welcome-v2 .timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--border) 8%, var(--border) 92%, transparent 100%);
  transform: translateX(-0.5px);
}
.welcome-v2 .tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 36px 0;
}
.welcome-v2 .tl-item::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--bg);
  z-index: 1;
}
.welcome-v2 .tl-item > .tl-year {
  font-family: var(--wv2-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  color: var(--wine-dark);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
  margin: 0;
}
.welcome-v2 .tl-item > .tl-body { padding-top: 8px; }
.welcome-v2 .tl-eyebrow {
  font-family: var(--wv2-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 10px;
}
.welcome-v2 .tl-note {
  font-family: var(--wv2-sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  max-width: 320px;
  text-wrap: pretty;
}
/* Alternating sides */
.welcome-v2 .tl-item:nth-child(even) > .tl-year {
  order: 2;
  text-align: left;
}
.welcome-v2 .tl-item:nth-child(even) > .tl-body {
  order: 1;
  text-align: right;
  justify-self: end;
}
.welcome-v2 .tl-item:nth-child(even) .tl-note { margin-left: auto; }
.welcome-v2 .tl-item:nth-child(odd) > .tl-year {
  text-align: right;
  justify-self: end;
}
.welcome-v2 .tl-item:nth-child(odd) > .tl-body { text-align: left; }

/* ─── Closing signature ─── */
.welcome-v2 .closing {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 24px 0;
  border-top: 1px solid var(--border);
}
.welcome-v2 .closing p {
  font-family: var(--wv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.55;
  color: var(--wine-dark);
  margin: 0;
  text-wrap: balance;
}
.welcome-v2 .closing p em {
  color: var(--gold);
  font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
  .welcome-v2 { padding: 32px 24px 72px; }
  .welcome-v2 .hero { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .welcome-v2 .hero-left { gap: 28px; order: 2; padding-top: 0; }
  .welcome-v2 .hero-right { gap: 24px; order: 1; }
  .welcome-v2 .philosophy { max-width: none; padding-top: 24px; }
  /* hero-image aspect-ratio override moved to phone-only block at file tail
     (was: aspect-ratio: 4 / 4.2 — user found it still too tall on phone).
     Tablet sizing intentionally inherits the desktop 4 / 5.2 — we only
     wanted to slim it on actual phones. */
  .welcome-v2 .timeline-header { margin: 0 0 40px; padding: 0; }
  .welcome-v2 .timeline { margin-bottom: 72px; }
  .welcome-v2 .timeline::before { left: 18px; }
  .welcome-v2 .tl-item {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 20px 0 20px 48px;
  }
  .welcome-v2 .tl-item::before { left: 18px; }
  .welcome-v2 .tl-item > .tl-year,
  .welcome-v2 .tl-item:nth-child(even) > .tl-year,
  .welcome-v2 .tl-item:nth-child(odd) > .tl-year {
    order: 1;
    text-align: left;
    justify-self: start;
    font-size: 44px;
  }
  .welcome-v2 .tl-item > .tl-body,
  .welcome-v2 .tl-item:nth-child(even) > .tl-body,
  .welcome-v2 .tl-item:nth-child(odd) > .tl-body {
    order: 2;
    text-align: left;
    justify-self: start;
    padding-top: 4px;
  }
  .welcome-v2 .tl-item:nth-child(even) .tl-note { margin-left: 0; }
  .welcome-v2 .tl-note { max-width: none; }
  .welcome-v2 .closing { padding-top: 56px; }
}

/* ============================================================================
   Reveal-on-scroll — elegant appear effects used by editorial pages + nav
   grids. JS toggles `.is-revealed` via IntersectionObserver. The `--blur`
   variant adds a blur-clear on top of the fade+rise (for hero quotes).
   Stagger via the --reveal-delay custom property set per element in JS.
   ========================================================================== */
/* Pre-hide reveal targets via CSS the moment the page paints — eliminates
   the "visible flash → snap invisible → fade in" on refresh. Gated on
   `html.js` (set synchronously by an inline script in <head>) so users
   without JS still see all content. Wrapped in :where() so .is-revealed
   (added later by JS) wins on specificity and the transition kicks in.
   The selector list mirrors the one in nav.js — keep them in sync. */
html.js :where(
  .saraplar-v2 .hero > *,
  .page-hero > *,
  .saraplar-v2 .intro,
  .saraplar-v2 .color-bundle,
  .saraplar-v2 .wine-listing,
  .baglar-v2 .trio .vyd,
  .baglar-v2 .info,
  .uretim-v2 .col-images .block,
  .uretim-v2 .col-text,
  .uretim-v2 .duo .block,
  .tadim-v2 .opening,
  .tadim-v2 .info,
  .tadim-v2 .experiences .exp,
  .welcome-v2 .hero-copy,
  .welcome-v2 .hero-image,
  .welcome-v2 .philosophy,
  .welcome-v2 .timeline-header,
  .welcome-v2 .tl-item,
  .welcome-v2 .closing,
  .ekip-v2 .opening,
  .ekip-v2 .member,
  .iletisim-v2 .opening,
  .iletisim-v2 .detail,
  .iletisim-v2 .form-block,
  .iletisim-v2 .map,
  .iletisim-v2 .hours,
  .satis-v2 .opening,
  .satis-v2 .city-group,
  .satis-v2 .map,
  .galeri-v2 .opening,
  .galeri-v2 .hero-carousel,
  .galeri-v2 .filters,
  .galeri-v2 .tile,
  .site-header__logo,
  .site-header__menu-left .usca-menu li,
  .site-header__menu-right .usca-menu li,
  .usca-nav-grid__row .usca-nav-card
):not(.is-revealed) {
  opacity: 0;
  transform: translateY(20px);
}

/* Initial hidden state for elements that JS adds .usca-reveal to. The CSS
   rule above already handles the pre-paint hiding via selectors; this rule
   exists in case JS adds the class to other elements ad-hoc. */
.usca-reveal {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
.usca-reveal--blur { filter: blur(6px); }

/* Galeri tiles get a slightly more pronounced slide + subtle zoom-in —
   reinforces the "photos drifting into view" feel of a masonry grid.
   MUST keep :not(.is-revealed) on BOTH selectors — without it this rule
   wins specificity over .usca-reveal.is-revealed and tiles stay hidden. */
html.js :where(.galeri-v2 .tile):not(.is-revealed) {
  transform: translateY(32px) scale(0.985);
}

/* Transition lives ONLY on the revealed state so the animation plays only
   in the reveal direction. Duration is overridable via --reveal-duration
   so header items can be snappier (~800ms) while content reveals stay
   editorial (~1200ms). */
.usca-reveal.is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity var(--reveal-duration, 1200ms) cubic-bezier(.22, .6, .22, 1),
    transform var(--reveal-duration, 1200ms) cubic-bezier(.22, .6, .22, 1),
    filter var(--reveal-duration, 1200ms) cubic-bezier(.22, .6, .22, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: auto;
}

/* Hero banner background image fades in on page load — pure CSS animation
   on the ::before pseudo, runs alongside the parallax transform. */
@keyframes uscaHeroBgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.page-hero::before,
.saraplar-v2 .hero::before {
  animation: uscaHeroBgIn 1400ms cubic-bezier(.22, .6, .22, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::before,
  .saraplar-v2 .hero::before {
    animation: none;
  }
}
/* Accessibility: users who prefer less motion get instant reveals. */
@media (prefers-reduced-motion: reduce) {
  .usca-reveal,
  .usca-reveal.is-revealed,
  .usca-reveal--blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   Menü v2 — QR-scan menu page at usca.com.tr/menu/
   Bilingual: shows TR by default, JS adds .lang-en to <html> to swap.
   Mobile-first: sticky tab bar, scrollspy, snap-to sections.
   ========================================================================== */
.menu-v2 {
  --mv2-serif: "Cormorant Garamond", Garamond, serif;
  --mv2-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px 96px;
  font-family: var(--mv2-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

/* Bilingual primitives — TR visible by default, .lang-en swaps it.
   .t-tr and .t-en spans coexist in markup; one is hidden via CSS. */
.menu-v2 .t-en,
.page-hero--menu .t-en,
.menu-lang-toggle .t-en { display: none; }
html.lang-en .menu-v2 .t-tr,
html.lang-en .page-hero--menu .t-tr,
html.lang-en .menu-lang-toggle .t-tr { display: none; }
html.lang-en .menu-v2 .t-en,
html.lang-en .page-hero--menu .t-en,
html.lang-en .menu-lang-toggle .t-en { display: inline; }

/* Language toggle button — sits in the page hero, top-right */
.page-hero--menu { position: relative; }
.menu-lang-toggle {
  position: absolute;
  top: 42px;                       /* below the V dip — was 20 */
  right: 24px;
  z-index: 10;
  background: rgba(0,0,0,0.35);
  color: var(--cream);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 99px;
  padding: 6px 14px;
  font-family: var(--mv2-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all .3s ease;
}
.menu-lang-toggle:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--wine-dark);
}

/* Sticky tab bar — sits below the page-hero, scrolls with the page */
.menu-v2 .menu-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 24px;
  margin: 0 -24px 32px;
  background: color-mix(in srgb, var(--cream) 96%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.menu-v2 .menu-tabs::-webkit-scrollbar { display: none; }
.menu-v2 .menu-tabs a {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 99px;
  border: 1px solid transparent;
  transition: color .3s, border-color .3s, background .3s;
  white-space: nowrap;
}
.menu-v2 .menu-tabs a:hover {
  color: var(--wine-dark);
  border-color: var(--border);
}
.menu-v2 .menu-tabs a.is-active {
  color: var(--gold);
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}

/* Section structure */
.menu-v2 .menu-section {
  margin: 0 0 64px;
  scroll-margin-top: 80px;        /* tab bar height + breathing room */
}
.menu-v2 .menu-section:last-of-type { margin-bottom: 32px; }
.menu-v2 .section-title {
  font-family: var(--mv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.15;
  color: var(--wine-dark);
  margin: 0 0 8px;
  letter-spacing: 0.005em;
  text-transform: none;
}
.menu-v2 .subsection-title {
  font-family: var(--mv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--wine);
  margin: 40px 0 16px;
  letter-spacing: 0.005em;
  text-transform: none;
}
.menu-v2 .section-note {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 28px;
  font-family: var(--mv2-sans);
  font-style: italic;
  line-height: 1.6;
  max-width: 640px;
}
.menu-v2 .section-note em {
  font-family: var(--mv2-serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1.1em;
}

/* ── Tadım Deneyimleri (experience cards) ── */
.menu-v2 .exp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.menu-v2 .exp {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 24px;
  background: color-mix(in srgb, var(--cream) 85%, white 15%);
  transition: border-color .3s, transform .3s;
}
.menu-v2 .exp:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.menu-v2 .exp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.menu-v2 .exp-name {
  font-family: var(--mv2-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  color: var(--wine-dark);
  margin: 0;
  letter-spacing: 0.01em;
  text-transform: none;
}
.menu-v2 .exp-price {
  font-family: var(--mv2-sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-v2 .exp-wines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-v2 .exp-wines li {
  padding: 4px 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
}

/* ── Şarap Menüsü — color groups + wine cards ───────────────────────── */
.menu-v2 .color-group { margin: 32px 0 40px; }
.menu-v2 .color-group:first-of-type { margin-top: 24px; }
.menu-v2 .color-group:last-child { margin-bottom: 0; }

/* Group header — color band with a wine glass photo + title overlay */
.menu-v2 .cg-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  margin-bottom: 18px;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  min-height: 88px;
}
.menu-v2 .cg-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  /* Per-color photo set below */
}
.menu-v2 .cg-head::before {
  /* Color tint overlay — keyed per color group */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--cg-tint-a, transparent), var(--cg-tint-b, transparent));
  mix-blend-mode: multiply;
}
.menu-v2 .cg-head::after {
  /* Subtle dark gradient bottom-right so title stays readable */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,0.18), rgba(0,0,0,0.42));
}
.menu-v2 .cg-title {
  font-family: var(--mv2-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4.5vw, 38px);
  color: var(--cream);
  margin: 0;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
/* .cg-count removed — count pills hidden per design feedback */
.menu-v2 .cg-count { display: none; }

/* Per-color photo + tint */
.menu-v2 .color-group--beyaz .cg-photo {
  background-image: url('/wp-content/uploads/2026/04/DSC_0907.webp');
  background-position: center 30%;
}
.menu-v2 .color-group--beyaz .cg-head {
  --cg-tint-a: rgba(225, 200, 130, 0.5);
  --cg-tint-b: rgba(180, 150, 90, 0.35);
}
.menu-v2 .color-group--pembe .cg-photo {
  background-image: url('/wp-content/uploads/2026/04/DSC_0907.webp');
  background-position: center 50%;
}
.menu-v2 .color-group--pembe .cg-head {
  --cg-tint-a: rgba(220, 140, 130, 0.45);
  --cg-tint-b: rgba(180, 90, 100, 0.4);
}
.menu-v2 .color-group--kirmizi .cg-photo {
  background-image: url('/wp-content/uploads/2026/04/DSC_0907.webp');
  background-position: center 70%;
}
.menu-v2 .color-group--kirmizi .cg-head {
  --cg-tint-a: rgba(120, 30, 50, 0.55);
  --cg-tint-b: rgba(70, 15, 30, 0.45);
}
.menu-v2 .color-group--tatli .cg-photo {
  background-image: url('/wp-content/uploads/2026/04/DSC_0907.webp');
  background-position: center 80%;
}
.menu-v2 .color-group--tatli .cg-head {
  --cg-tint-a: rgba(90, 30, 60, 0.55);
  --cg-tint-b: rgba(40, 10, 30, 0.4);
}

/* Wine card grid — 2 per row desktop, 1 mobile */
.menu-v2 .wine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.menu-v2 .wine-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--cream) 92%, white 8%);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.menu-v2 .wine-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -16px rgba(95,30,40,0.3);
}
.menu-v2 .wc-head {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  padding-bottom: 12px;
}
.menu-v2 .wc-name {
  font-family: var(--mv2-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--wine-dark);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.2;
}
.menu-v2 .wc-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.menu-v2 .wc-varietal {
  flex: 1 1 auto;
  font-family: var(--mv2-sans);
  letter-spacing: 0.005em;
}
.menu-v2 .wc-year {
  flex-shrink: 0;
  font-family: var(--mv2-sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.menu-v2 .wc-prices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.menu-v2 .wc-prices li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--cream) 70%, transparent);
}
.menu-v2 .wc-prices .size {
  font-family: var(--mv2-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 4px;
}
.menu-v2 .wc-prices .price {
  font-family: var(--mv2-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--wine-dark);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Aperatif + Retail — compact card grid, same family as wine cards ── */
.menu-v2 .snack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.menu-v2 .snack-grid--drinks { grid-template-columns: repeat(3, 1fr); }
.menu-v2 .snack-grid--retail { grid-template-columns: repeat(2, 1fr); }
.menu-v2 .snack-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--cream) 92%, white 8%);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.menu-v2 .snack-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -14px rgba(95,30,40,0.3);
}
.menu-v2 .snack-card__name {
  font-family: var(--mv2-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--wine-dark);
  line-height: 1.3;
}
.menu-v2 .snack-card__price {
  font-family: var(--mv2-sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--gold);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-v2 .snack-card--drink {
  padding: 12px 14px;
}
.menu-v2 .snack-card--drink .snack-card__name { font-size: 14.5px; }
.menu-v2 .snack-card--drink .snack-card__price { font-size: 13px; }
.menu-v2 .snack-card--retail .snack-card__name { font-size: 15px; }

/* ── Bottom footer ── */
.menu-v2 .menu-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: var(--mv2-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}
.menu-v2 .menu-footer a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  font-family: var(--mv2-sans);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-bottom: 1px;
  transition: color .3s, border-color .3s;
}
.menu-v2 .menu-footer a:hover {
  color: var(--wine-dark);
  border-bottom-color: var(--wine-dark);
}

/* Mobile refinements (≤ 600px) */
@media (max-width: 600px) {
  .menu-v2 { padding: 0 18px 80px; font-size: 14px; }
  .menu-v2 .menu-tabs { padding: 10px 18px; margin: 0 -18px 24px; }
  .menu-v2 .menu-tabs a { font-size: 11px; padding: 7px 11px; letter-spacing: 0.12em; }
  .menu-v2 .menu-section { margin-bottom: 48px; }
  .menu-v2 .exp { padding: 18px 18px; }
  .menu-v2 .exp-head { flex-direction: column; gap: 6px; }
  .menu-v2 .exp-name { font-size: 22px; }
  .menu-v2 .exp-price { font-size: 16px; }
  .menu-v2 .exp-wines li { font-size: 13.5px; }
  .menu-v2 .wine-grid { grid-template-columns: 1fr; gap: 10px; }
  .menu-v2 .wine-card { padding: 16px 16px; gap: 12px; }
  .menu-v2 .wc-name { font-size: 19px; }
  .menu-v2 .wc-meta { font-size: 12.5px; }
  .menu-v2 .wc-year { font-size: 10.5px; letter-spacing: 0.14em; }
  .menu-v2 .wc-prices .price { font-size: 13px; }
  .menu-v2 .cg-head { padding: 14px 18px; min-height: 70px; }
  .menu-v2 .snack-grid,
  .menu-v2 .snack-grid--drinks,
  .menu-v2 .snack-grid--retail { grid-template-columns: 1fr; gap: 8px; }
  .menu-v2 .snack-card { padding: 12px 14px; gap: 6px; }
  .menu-v2 .snack-card__name { font-size: 14.5px; }
  .menu-v2 .snack-card__price { font-size: 12.5px; }
  .menu-lang-toggle { top: 32px; right: 16px; padding: 5px 12px; font-size: 11px; }
}

/* ============================================================================
   Utility
   ========================================================================== */
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px;
  overflow: hidden;
}
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; width: 100%; }
.has-text-align-center { text-align: center; }
.has-text-align-right  { text-align: right; }


/* ============================================================================
   AGE-GATE MODAL OVERRIDES — May 2026
   ----------------------------------------------------------------------------
   The Age Gate plugin renders:
     <h1 class="age-gate__heading-title">USCA Wines</h1>
     <h2 class="age-gate__headline">18+</h2>
     <p  class="age-gate__subheadline">USCA Wines</p>
     [buttons]
     [legal disclaimer]
   The "USCA Wines" appeared twice (heading + subheadline). User asked for
   the logo image to replace the top heading, centered, with no duplicate
   wordmark below. CSS-only swap (no plugin template hack).
   ========================================================================== */
.age-gate__heading-title {
    /* Hide the "USCA Wines" text without breaking screen-reader access. */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px;
    overflow: hidden;
    /* Show the logo in its place. 672:486 aspect ratio preserved.
       Width 204px = 240px × 0.85 (user asked for 15% smaller). */
    background-image: url('/wp-content/uploads/2026/04/usca-logo.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: block;
    width: 204px;
    aspect-ratio: 672 / 486;
    margin: 0 auto 14px;
    height: auto;
    padding: 0;
}
/* Modal box: soften the square corners with a subtle bevel.
   Both the .age-gate dialog and its inner form pick up the radius so it
   reads consistently regardless of which one the plugin paints. */
.age-gate,
.age-gate__form {
    border-radius: 14px !important;
}

/* The plugin sets text_color = #f5ede3 (cream) in its appearance options.
   That works on the dark page overlay, but the modal's INNER box is cream
   too — so cream text on a cream box was reading as blank space. Force
   wine-dark on every text node inside the modal so it's actually readable.
   Buttons keep their own dark bg / cream text from the plugin's own CSS. */
.age-gate,
.age-gate__form,
.age-gate__heading,
.age-gate__headline,
.age-gate__subheadline,
.age-gate__challenge,
.age-gate__additional-information,
.age-gate__additional-information p {
    color: var(--wine-dark, #3d0f1a) !important;
}

/* Subheadline now carries the legal sub-line ("Bu siteye giriş için 18 yaşından
   büyük olmalısınız.") — keep it visible, but soften the weight so the "18+"
   headline still owns the visual hierarchy. */
.age-gate__subheadline {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    margin: 6px auto 0;
    max-width: 360px;
    text-align: center;
    opacity: .82;
}

/* ─── Custom "Nihai tüketici değilim" checkbox + tooltip (injected by JS) ─── */
.usca-pro-check {
    margin: 18px auto 0;
    text-align: center;
    /* Cream box → dark text. The plugin's foreground_color (#f5ede3) was
       making the label invisible against the cream modal background. */
    color: var(--wine-dark, #3d0f1a);
    font-size: 13px;
    line-height: 1.4;
}
.usca-pro-check__row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.usca-pro-check__row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold, #b98f4e);
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.usca-pro-check__label {
    color: inherit;
}
.usca-pro-check__info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 11px;
    line-height: 1;
    cursor: help;
    opacity: .7;
    transition: opacity .2s;
}
.usca-pro-check__info:hover,
.usca-pro-check__info:focus {
    opacity: 1;
    outline: none;
}
.usca-pro-check__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 8, 12, 0.96);
    color: #f5ede3;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid rgba(185, 143, 78, 0.35);
    width: 260px;
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.usca-pro-check__tooltip::after {
    /* small caret pointing down to the (i) icon */
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(20, 8, 12, 0.96);
}
.usca-pro-check__info:hover .usca-pro-check__tooltip,
.usca-pro-check__info:focus .usca-pro-check__tooltip,
.usca-pro-check__info.is-open .usca-pro-check__tooltip {
    visibility: visible;
    opacity: 1;
}
/* Error state — applied when user unchecks then tries to enter */
.usca-pro-check.is-error .usca-pro-check__row input[type="checkbox"] {
    outline: 2px solid #ff5252;
    outline-offset: 2px;
    border-radius: 2px;
}
.usca-pro-check.is-error .usca-pro-check__label {
    color: #ff8a8a;
}
.usca-pro-check__error {
    color: #ff8a8a;
    font-size: 12px;
    margin: 6px 0 0;
    opacity: 0;
    transition: opacity .2s;
}
.usca-pro-check.is-error .usca-pro-check__error {
    opacity: 1;
}


/* ============================================================================
   MOBILE FIXES (phone-only) — May 2026
   ----------------------------------------------------------------------------
   Single block at the file's tail so all phone-only tweaks live in one
   reviewable place. ALL changes here are scoped to ≤720px and must not
   affect tablet/desktop. If a fix has to touch desktop, it goes elsewhere.
   ========================================================================== */

/* — Header SVG path swap: desktop = narrow V, mobile = wider V to frame logo
     The header.php renders both paths; CSS toggles which one fills. ----- */
.site-header__bg-m { display: none; }
@media (max-width: 720px) {
  .site-header__bg-d { display: none; }
  .site-header__bg-m { display: inline; }
}

@media (max-width: 720px) {

  /* — Header: center logo in the V, hamburger to the right ---------------- */
  .site-header__inner {
    grid-template-columns: 1fr auto 1fr;   /* logo cell in the middle */
  }
  .site-header__logo         { grid-column: 2; justify-self: center; }
  .site-header__mobile-trigger { grid-column: 3; justify-self: end; }
  /* slight bump in logo size so it actually fills the wider V */
  .site-header__logo img     { max-height: 56px; }

  /* — Hamburger drawer font: Catamaran was reading as 'plain'; switch to
       Cinzel to match the editorial logo voice, soften letter-spacing ---- */
  .site-header__mobile-menu a {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .14em;
  }

  /* — Home page TOP Elementor hero (drone shot). User wanted it 15–20px
       thinner than the 32vh first pass + crop from the bottom (i.e. lose
       the lower vineyard portion, keep the sky/horizon). */
  .elementor-263 .elementor-element.elementor-element-c2c9d20 > .elementor-container,
  .elementor.elementor-263 .elementor-section-stretched > .elementor-container {
    min-height: 29vh !important;   /* ~245px on 844 viewport — ~25px shorter */
  }
  .elementor-263 .elementor-element.elementor-element-c2c9d20 {
    background-size: cover !important;
    background-position: center 30% !important;   /* shifted up → bottom cropped */
    /* Small bottom margin so the banner doesn't sit flush against the
       "URLA · İZMİR" eyebrow text — gave a cramped/dense feel before. */
    margin-bottom: 12px !important;
  }
  /* Same idea applied to the welcome-v2 article that follows: a touch of
     top padding so the eyebrow/title can breathe under the banner. */
  .welcome-v2 .hero-left {
    padding-top: 8px !important;
  }

  /* — welcome-v2 .hero-image (the cypress/USCA-wall photo). User wants:
       1) pan DOWN (background-position favors lower portion of image)
       2) move below the philosophy text on mobile, just above the timeline
          header — done by flipping the hero column order (text first now). */
  .welcome-v2 .hero-image {
    aspect-ratio: 4 / 2.4 !important;
  }
  .welcome-v2 .hero-image .parallax {
    /* was `center` → 50% vertical. 75% = pans down, more of bottom shows. */
    background-position: center 75% !important;
  }
  /* Reorder on phones: text/philosophy first, image second.
     Was `.hero-left { order: 2 }` and `.hero-right { order: 1 }` from the
     @media 900 block. Override here so reading order matches user spec. */
  .welcome-v2 .hero-left  { order: 1 !important; }
  .welcome-v2 .hero-right { order: 2 !important; }
  /* Slight vertical breathing room above the photo now that it sits below
     a wall of text, and below it before the timeline header. */
  .welcome-v2 .hero-right { margin-top: 8px; margin-bottom: 24px; }

  /* — Text gutters: body text was hugging the edges. Adds a ~18px breathing
       margin to common editorial wrappers. Full-bleed banners (.page-hero,
       .welcome-v2 .hero-image) keep zero padding by design.
       !important because the @media (max-width: 900px) rule already sets
       `padding: 32px 24px 72px` on .welcome-v2 with the same specificity. */
  .welcome-v2,
  .baglar-v2,
  .uretim-v2,
  .saraplar-v2,
  .tadim-v2,
  .menu-v2,
  .biz-v2,
  .ekip-v2,
  .galeri-v2,
  .iletisim-v2,
  .satis-v2 {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* But explicitly KILL gutters on full-bleed hero tiles inside those
     sections, otherwise the parent's new padding shrinks them. */
  .welcome-v2 .hero-image { margin-left: -18px !important; margin-right: -18px !important; }

  /* — Tadım: collapse the info stripe (dead space between "+18 yaş sınırı"
       hours block and "rezervasyon için" CTA). Stack vertically with
       breathing room of 8px and ditch the tall divider. ------------------ */
  .tadim-v2 .info {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    margin-bottom: 12px;
  }
  .tadim-v2 .info .hours       { flex: 0 0 auto; text-align: center; margin: 0; }
  .tadim-v2 .info .divider     { width: 40px; height: 1px; }
  .tadim-v2 .info .reservation { align-items: center; padding: 4px; }

  /* — Tadım experience photos: user asked for ~25% shorter.
       Was 3/4 portrait. 3/3 = square (-25% height). ---------------------- */
  .tadim-v2 .exp-img {
    aspect-ratio: 3 / 3;
    margin-bottom: 14px;
  }

  /* — Footer: tighten the stacked layout. At <600px the existing rule
       already collapses to 1 column; here we put Contact + Quick links
       side-by-side so the page doesn't have to scroll forever, and make
       the menu list 1-col so each link gets its own line. ---------------- */
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1.2rem;
    padding: 1.4rem 1rem;
    text-align: left;
  }
  .site-footer__brand   {
    grid-column: 1 / -1;
    /* 3-col layout so the logo stays in the GEOMETRIC CENTER of the row
       regardless of how wide the social block is on the left. The empty
       column on the right is the counterweight that keeps the middle cell
       centered relative to the viewport. */
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center !important;     /* shared horizontal mid-line */
  }
  .site-footer__brand .site-footer__social {
    grid-column: 1;
    justify-self: start;          /* hard-left */
    align-self: center;           /* match logo's vertical mid */
    display: flex;
    flex-direction: row;          /* horizontal IG | FB */
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    line-height: 0;               /* kill UL line-height leak */
  }
  .site-footer__brand .site-footer__social li {
    display: flex;
    align-items: center;
    line-height: 0;
    margin: 0;
  }
  .site-footer__brand .site-footer__logo {
    grid-column: 2;
    justify-self: center;
    align-self: center;
    margin: 0;
    line-height: 0;
  }
  .site-footer__brand .site-footer__logo img {
    max-width: 110px;
    display: block;
  }

  .site-footer__contact { grid-column: 1; text-align: left; }
  .site-footer__quick   { grid-column: 2; text-align: left; }

  /* Heading underline anchored left again in 2-col layout (the <600px
     rule was centering it for single-column). */
  .site-footer__contact .site-footer__heading::after,
  .site-footer__quick   .site-footer__heading::after { left: 0; transform: none; }

  /* Menu: 2-col grid on mobile per user feedback
       (Anasayfa | Bağlar  /  Üretim | Şaraplar  /  …)
       Tightened rows again — first pass at .3rem still read as too airy. */
  .site-footer__menu {
    grid-template-columns: 1fr 1fr;
    column-gap: .9rem;
    row-gap: 0;
    max-width: none;
    margin: 0;
  }
  .site-footer__menu li { line-height: 1.2; }
  .site-footer__menu a  { font-size: .82rem; padding: 1px 0; }

  /* Compact contact rows */
  .site-footer__contact-list      { gap: .3rem; }
  .site-footer__contact-list li   { grid-template-columns: 16px auto; font-size: .8rem; }

  /* Bottom bar: tighter padding so the copyright doesn't take up much
     vertical room (it's whisper-quiet, doesn't need to breathe).
     Also wrap KVKK link to its own line so "Aydınlatma Metni" doesn't
     overhang awkwardly on the previous row. */
  .site-footer__bar-inner { padding: .4rem 1rem; line-height: 1.5; }
  .site-footer__bar-sep   { display: none; }
  .site-footer__bar-kvkk  {
    display: block;
    white-space: nowrap;
    margin-top: 2px;
  }
}