/* =============================================================
   Mira Vita Spa & Wellness — Global Stylesheet
   Soft-luxury, light theme. Sage + bronze accents.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --ivory: #FAF7F2;
  --ivory-2: #F4EFE6;
  --champagne: #ECE3D2;
  --sand: #E5DCC9;
  --warm-white: #FFFDF8;

  --charcoal: #2A2823;
  --charcoal-2: #3D3A33;
  --muted: #7A7268;
  --muted-2: #A39B8E;

  --bronze: #B79268;
  --bronze-deep: #6E4628;

  /* Primary — espresso family */
  --primary: #3A2313;
  --primary-hover: #54341E;
  --primary-soft: #6E4628;

  /* Sage tokens kept as aliases for legacy usage; remapped onto the
     espresso/bronze family so nothing on the page renders green. */
  --sage: var(--bronze);
  --sage-deep: var(--bronze-deep);

  --line: #E4DCCB;
  --line-soft: #EFE8D8;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(60, 50, 35, 0.04), 0 1px 1px rgba(60, 50, 35, 0.03);
  --shadow-md: 0 8px 24px -12px rgba(60, 50, 35, 0.10), 0 2px 6px rgba(60, 50, 35, 0.04);
  --shadow-lg: 0 30px 60px -30px rgba(60, 50, 35, 0.18), 0 8px 20px -8px rgba(60, 50, 35, 0.06);

  /* Radius */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Type */
  --font-serif: "Playfair Display", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --container: 1360px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 600ms;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--sage);
  color: var(--warm-white);
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.eyebrow.center {
  justify-content: center;
}

/* Eyebrow → sonraki başlık arasında tutarlı boşluk (tüm sayfalar) */
.eyebrow+h1,
.eyebrow+h2,
.eyebrow+h3,
.eyebrow+h4 {
  margin-top: clamp(14px, 1.6vw, 22px);
}

.eyebrow.center::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--charcoal);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: clamp(34px, 5vw, 64px);
}

h2 {
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.14;
}

h3 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
}

h4 {
  font-size: 17px;
  line-height: 1.3;
}

.lede {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

.italic-accent {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bronze-deep);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: clamp(64px, 7.5vw, 100px);
  padding-bottom: clamp(64px, 7.5vw, 100px);
}

.section.tight {
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
}

.section.bg-ivory-2 {
  background: var(--ivory-2);
}

.section.bg-champagne {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--champagne) 60%, var(--champagne) 100%);
}

.section.bg-warm {
  background: var(--warm-white);
}

.section.bg-white {
  background: #FFFFFF;
}

#form {
  border-bottom: 1px solid var(--line);
}

.cta-section {
  border-top: 1px solid var(--line);
}

.section.bg-cta-gradient {
  background: linear-gradient(135deg, var(--champagne) 0%, var(--sand) 100%);
}

.divider {
  width: 56px;
  height: 1px;
  background: var(--bronze);
  opacity: .5;
  margin: 28px 0;
}

/* HTML `hidden` attribute must beat any element's display rule */
[hidden] {
  display: none !important;
}

/* ---------- Buttons — premium minimal (yumuşak köşeli rectangle) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 24px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--t-med) var(--ease),
    background-color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

/* Arrow: narin, hover'da sağa kayar (uzamaz). */
.btn .arrow {
  display: inline-block;
  width: 16px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: transform var(--t-med) var(--ease);
}

.btn .arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.btn:hover .arrow {
  transform: translateX(5px);
}

/* Primary + Bronze — aynı bronze CTA dili (sitenin her yerinde tutarlı) */
.btn-primary,
.btn-bronze {
  background: var(--bronze);
  color: var(--warm-white);
  border-color: var(--bronze);
}

.btn-primary:hover,
.btn-bronze:hover {
  background: transparent;
  color: var(--bronze-deep);
  border-color: var(--bronze-deep);
}

/* Ghost: transparent + ince charcoal border → hover'da fill */
.btn-ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}

.btn-ghost:hover {
  background: var(--charcoal);
  color: var(--warm-white);
  border-color: var(--charcoal);
}

/* Outline minimal — transparent + ince border + normal case (header CTA) */
.btn-outline {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
  font-weight: 500;
}

.btn-outline:hover {
  background: var(--charcoal);
  color: var(--warm-white);
  border-color: var(--charcoal);
}

/* Trail variant — sade SVG ikon label'dan SONRA (sağda, chip yok) */
.btn-trail .btn-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.btn-trail .btn-icon svg {
  width: 14px;
  height: 14px;
}

.btn-small {
  padding: 16px 22px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  gap: 8px;
}

.btn-small .arrow {
  width: 14px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  font-weight: 500;
  transition: color var(--t-med) var(--ease), gap var(--t-med) var(--ease);
}

.link-arrow::after {
  content: "→";
  font-size: 14px;
  color: var(--bronze-deep);
  transition: transform var(--t-med) var(--ease);
}

.link-arrow:hover {
  color: var(--bronze-deep);
  gap: 14px;
}

.link-arrow:hover::after {
  transform: translateX(2px);
}

/* ---------- Top bar (full-width sticky strip above the floating header pill) ---------- */
:root {
  --topbar-h: 38px;
}

.header-topbar {
  position: relative;
  z-index: 60;
  width: 100%;
  height: var(--topbar-h);
  background: var(--champagne);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  border-bottom: 1px solid var(--line);
}

.header-topbar>.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  transition: color var(--t-med) var(--ease);
}

.topbar-item--link:hover {
  color: var(--warm-white);
}

.topbar-icon {
  font-size: 15px;
  line-height: 1;
  opacity: .85;
}

.topbar-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: currentColor;
  opacity: .22;
}

.topbar-socials {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.topbar-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: inherit;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

.topbar-social:hover {
  background: rgba(58, 35, 19, .08);
  color: var(--bronze-deep);
}

.topbar-social i {
  font-size: 17px;
  line-height: 1;
}

/* Language switcher (topbar) */
.topbar-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.topbar-lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}

.topbar-lang-link:hover {
  opacity: 1;
  background: rgba(58, 35, 19, .08);
  color: var(--bronze-deep);
}

.topbar-lang-link.is-active {
  opacity: 1;
  color: var(--bronze-deep);
  background: rgba(58, 35, 19, .08);
}

.page-home .topbar-lang-link:hover,
.page-home .topbar-lang-link.is-active {
  background: rgba(255, 253, 248, .12);
  color: var(--bronze);
}

/* Home page: topbar is fixed overlay over dark hero — light text + adjusted hover */
.page-home .header-topbar {
  color: rgba(255, 253, 248, .85);
}

.page-home .topbar-social:hover {
  background: rgba(255, 253, 248, .1);
  color: var(--bronze);
}

@media (max-width: 980px) {
  .topbar-email {
    display: none;
  }
}

@media (max-width: 760px) {

  .topbar-hours,
  .topbar-sep--right {
    display: none;
  }

  .header-topbar {
    font-size: 12px;
  }

  .header-topbar .container {
    gap: 12px;
  }

  .topbar-left,
  .topbar-right {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .topbar-social {
    width: 24px;
    height: 24px;
  }
}

/* ---------- Header — full-width düz strip ---------- */
/* Non-home pages: topbar in flow at top of body, header sticky just below it.
   When user scrolls past the topbar, header sticks to viewport top: 0 naturally. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(250, 247, 242, 0.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease),
    background var(--t-med) var(--ease);
}

.site-header.scrolled {
  background: rgba(250, 247, 242, 0.95);
  border-bottom-color: var(--line-soft);
}

.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding-top: 20px;
  padding-bottom: 20px;
}

.nav-side {
  justify-self: center;
}

.nav-end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 12px;
  font-family: var(--font-serif);
  color: var(--charcoal);
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--warm-white), var(--champagne) 70%, var(--bronze) 130%);
  border: 1px solid var(--line);
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid var(--bronze);
  opacity: .5;
}

.brand-logo {
  display: block;
  height: clamp(36px, 3.4vw, 48px);
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.brand-logo--footer {
  height: clamp(40px, 3.8vw, 56px);
  max-width: 220px;
}

.brand-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1;
}

.brand-name strong {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 26px);
  letter-spacing: 0.01em;
  line-height: 1;
}

.brand-name span {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

.menu {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu a {
  display: inline-block;
  padding: 10px 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--charcoal-2);
  position: relative;
  transition: color var(--t-med) var(--ease);
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}

.menu a:hover {
  color: var(--charcoal);
}

.menu a:hover::after,
.menu a.active::after {
  transform: scaleX(1);
}

.menu a.active {
  color: var(--charcoal);
}

.menu-toggle {
  display: none;
}

/* Mobile */
@media (max-width: 1024px) {
  .nav-side {
    display: none;
  }

  .nav-end>.btn {
    display: none;
  }

  .nav-end {
    margin-right: calc(var(--gutter) * -1 + 4px);
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--warm-white);
    z-index: 60;
  }

  .menu-toggle .bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .menu-toggle .bars span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--charcoal);
    transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
  }

  body.menu-open .menu-toggle .bars span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }

  body.menu-open .menu-toggle .bars span:nth-child(2) {
    opacity: 0;
  }

  body.menu-open .menu-toggle .bars span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  .mobile-nav {
    position: fixed;
    inset: 0;
    background: var(--ivory);
    z-index: 1200;
    padding: 100px 32px 60px;
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    transition: opacity 240ms cubic-bezier(.4, 0, .2, 1),
      transform 280ms cubic-bezier(.4, 0, .2, 1),
      visibility 0s linear 280ms;
    overflow-y: auto;
  }

  body.menu-open .mobile-nav {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: opacity 240ms cubic-bezier(.4, 0, .2, 1),
      transform 280ms cubic-bezier(.4, 0, .2, 1),
      visibility 0s linear 0s;
  }

  /* Top bar inside the menu — brand on left, close on right.
     Replaces the bare floating X with a proper "menu header" row. */
  .mobile-nav-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .mobile-nav-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
  }

  .mobile-nav-brand img {
    height: 40px;
    width: auto;
    display: block;
  }

  .mobile-nav-close {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--warm-white);
    color: var(--charcoal);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-med) var(--ease),
      color var(--t-med) var(--ease),
      transform var(--t-med) var(--ease);
  }

  .mobile-nav-close i {
    font-size: 18px;
  }

  .mobile-nav-close:hover {
    background: var(--bronze);
    color: var(--warm-white);
    border-color: var(--bronze);
    transform: rotate(90deg);
  }

  .mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--line-soft);
  }

  .mobile-nav ul:not(.mobile-meta) li {
    border-bottom: 1px solid var(--line-soft);
  }

  .mobile-nav ul:not(.mobile-meta) a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 22px 4px;
    font-family: var(--font-serif);
    font-size: 28px;
    color: var(--charcoal);
  }

  .mobile-nav ul:not(.mobile-meta) a .idx {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--muted-2);
  }

  .mobile-nav ul:not(.mobile-meta) a.active {
    color: var(--bronze-deep);
  }

  .mobile-nav .mobile-cta {
    margin-top: 36px;
    display: flex;
    gap: 12px;
  }

  .mobile-nav .mobile-meta {
    list-style: none;
    margin: 36px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .mobile-nav .mobile-meta li {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--charcoal-2);
    line-height: 1.4;
  }

  .mobile-nav .mobile-meta li>i {
    font-size: 16px;
    color: var(--bronze);
    flex-shrink: 0;
  }

  .mobile-nav .mobile-meta a {
    color: inherit;
    transition: color var(--t-med) var(--ease);
    font-variant-numeric: tabular-nums;
  }

  .mobile-nav .mobile-meta a:hover {
    color: var(--bronze);
  }

  .mobile-nav .mobile-socials {
    display: inline-flex;
    gap: 8px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
  }

  .mobile-nav .mobile-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--charcoal-2);
    transition: background var(--t-med) var(--ease),
      color var(--t-med) var(--ease),
      border-color var(--t-med) var(--ease);
  }

  .mobile-nav .mobile-socials a:hover {
    background: var(--bronze);
    color: var(--warm-white);
    border-color: var(--bronze);
  }

  .mobile-nav .mobile-socials i {
    font-size: 17px;
  }

  /* Hide topbar bleeding through when menu is open */
  body.menu-open .header-topbar {
    visibility: hidden;
  }

  /* When the menu is open the header must NOT create a containing block.
     Both backdrop-filter and `position: fixed` (on home) create one, so the
     fixed .mobile-nav inside gets sized to the header (~85px) instead of the
     viewport. Force these off so mobile-nav's inset:0 covers the screen. */
  body.menu-open .site-header,
  body.menu-open .site-header.scrolled,
  body.page-home.menu-open .site-header,
  body.page-home.menu-open .site-header.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Menu open: the X close button must contrast the menu's ivory background.
     Reset any page-specific dark/glass styling. */
  body.menu-open .site-header .menu-toggle,
  body.page-home.menu-open .site-header .menu-toggle {
    background: var(--warm-white);
    border-color: var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.menu-open .site-header .menu-toggle .bars span,
  body.page-home.menu-open .site-header .menu-toggle .bars span {
    background: var(--charcoal);
  }

  /* Legacy .meta rule kept for any leftover callers */
  .mobile-nav .meta {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
  }
}

@media (min-width: 1025px) {
  .mobile-nav {
    display: none;
  }
}

/* ---------- Hero — full-bg cinematic + centered text + features ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  /* Content sol-üst zone: header altından kısa boşluk sonra başlar,
     alt geniş hava ile dengelenir. Topbar + flat header için. */
  padding: clamp(140px, 14vh, 180px) 0 clamp(48px, 6vh, 80px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  isolation: isolate;
}

@media (min-width: 901px) {
  .hero {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 0;
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  display: block;
}

/* Directional darkening — strongest at bottom-left (where text sits),
   fades to almost clear at top-right (keeps subjects' faces unmuddied). */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg,
      rgba(15, 10, 5, 0.58) 0%,
      rgba(15, 10, 5, 0.42) 30%,
      rgba(15, 10, 5, 0.18) 65%,
      rgba(15, 10, 5, 0.05) 100%),
    linear-gradient(180deg,
      rgba(15, 10, 5, 0.20) 0%,
      transparent 35%,
      transparent 65%,
      rgba(15, 10, 5, 0.30) 100%);
}

.hero-text {
  max-width: 720px;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-text h1 {
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.06;
  margin-bottom: clamp(18px, 2vw, 24px);
  text-wrap: balance;
}

.hero-text h1 .accent {
  display: block;
  font-style: italic;
  color: var(--bronze-deep);
}

.hero-text .lede {
  font-size: clamp(15px, 1.2vw, 17.5px);
  margin: 0 0 clamp(28px, 3vw, 40px);
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Mini features — glassmorphism premium cards, horizontal pills */
.hero-features {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 18px);
  justify-content: flex-start;
}

.hero-feature {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 14px;
  background: rgba(255, 253, 248, 0.55);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 28px -16px rgba(58, 35, 19, .22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease),
    background var(--t-med) var(--ease);
}

.hero-feature:hover {
  transform: translateY(-2px);
  background: rgba(255, 253, 248, 0.78);
  box-shadow: 0 18px 40px -18px rgba(58, 35, 19, .30), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.hero-feature .icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ivory-2) 0%, var(--warm-white) 100%);
  border: 1px solid rgba(58, 35, 19, .10);
  color: var(--bronze-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -1px 2px rgba(58, 35, 19, .08);
}

.hero-feature .icon svg {
  width: 20px;
  height: 20px;
}

.hero-feature .meta {
  line-height: 1.3;
  text-align: left;
}

.hero-feature .meta strong {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--charcoal);
  letter-spacing: 0;
}

.hero-feature .meta small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* Inline-icon buttons (calendar + sparkle prefix) */
.btn-with-icon .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 253, 248, .14);
}

.btn-ghost.btn-with-icon .btn-icon {
  background: rgba(58, 35, 19, .06);
}

.btn-with-icon .btn-icon svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 720px) {
  .hero-features {
    grid-template-columns: 1fr;
    gap: 14px;
    justify-content: stretch;
  }

  .hero-feature {
    justify-content: center;
  }
}

/* Hero — container biraz daha geniş ama sayfa kenarına yapışmasın. */
.hero>.container {
  max-width: 1560px;
}

/* ---------- Dark cinematic variant ---------- */
.hero--dark .hero-text,
.hero--dark .hero-text h1,
.hero--dark .hero-text .lede {
  color: var(--warm-white);
}

.hero--dark .hero-text h1 .accent {
  color: var(--bronze);
}

.hero--dark .eyebrow {
  color: rgba(255, 253, 248, .85);
}

.hero--dark .eyebrow::before,
.hero--dark .eyebrow.center::after {
  background: currentColor;
  opacity: .55;
}

.hero--dark .hero-text .lede {
  color: rgba(255, 253, 248, .78);
}

/* Buttons adapt to dark hero */
.hero--dark .btn-ghost {
  color: var(--warm-white);
  border-color: rgba(255, 253, 248, .55);
}

.hero--dark .btn-ghost:hover {
  background: var(--warm-white);
  color: var(--primary);
  border-color: var(--warm-white);
}

.hero--dark .btn-primary:hover {
  background: transparent;
  color: var(--warm-white);
  border-color: var(--warm-white);
}

.hero--dark .btn-primary .btn-icon {
  background: rgba(255, 253, 248, .14);
}

.hero--dark .btn-ghost .btn-icon {
  background: rgba(255, 253, 248, .14);
}

/* Bronze button on dark hero: solid kalmalı, transparent invert görünmez oluyor */
.hero--dark .btn-bronze:hover,
.hero--dark .btn-primary:hover {
  background: var(--bronze-deep);
  color: var(--warm-white);
  border-color: var(--bronze-deep);
}

/* Feature pills — dark bg üzerinde okunabilirlik */
.hero--dark .hero-feature {
  background: rgba(20, 16, 12, .35);
  border-color: rgba(255, 253, 248, .20);
  box-shadow: 0 10px 28px -16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 253, 248, .10);
}

.hero--dark .hero-feature:hover {
  background: rgba(20, 16, 12, .55);
  border-color: rgba(255, 253, 248, .32);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 253, 248, .14);
}

.hero--dark .hero-feature .icon {
  background: linear-gradient(135deg, rgba(255, 253, 248, .15) 0%, rgba(255, 253, 248, .05) 100%);
  border-color: rgba(255, 253, 248, .25);
  color: var(--bronze);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .15);
}

.hero--dark .hero-feature .meta strong {
  color: var(--warm-white);
}

.hero--dark .hero-feature .meta small {
  color: rgba(255, 253, 248, .65);
}

/* ---------- Home sayfasında header: hero üstünde light text ---------- */
.page-home .site-header {
  /* Fixed → DOM'da yer kaplamaz, hero görsel viewport top'a kadar uzanır.
     Initial: topbar'ın altında. Scroll'da topbar gidince üste yapışır. */
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  transform: none;
  margin: 0;
  width: 100%;
  max-width: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: top var(--t-med) var(--ease),
    background var(--t-med) var(--ease),
    border-bottom-color var(--t-med) var(--ease),
    backdrop-filter var(--t-med) var(--ease);
}

.page-home .site-header.scrolled {
  top: 0;
}

/* Home: topbar absolute over hero, scrolls away with body.
   Header altta fixed kalır — scroll edilince sadece header görünür. */
.page-home .header-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 0;
}

.page-home .site-header .brand,
.page-home .site-header .menu a,
.page-home .site-header .menu-toggle,
.page-home .site-header .menu-toggle .bars span {
  color: var(--warm-white);
}

.page-home .site-header .brand-logo {
  filter: brightness(0) invert(1);
}

/* Dark-hero variant — transparent glassy button so bars stay visible */
.page-home .site-header .menu-toggle {
  background: rgba(255, 253, 248, .08);
  border-color: rgba(255, 253, 248, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.page-home .site-header .menu-toggle .bars span {
  background: var(--warm-white);
}

/* Once header has scrolled past the hero, revert to default light pill */
.page-home .site-header.scrolled .menu-toggle {
  background: var(--warm-white);
  border-color: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.page-home .site-header.scrolled .menu-toggle .bars span {
  background: var(--charcoal);
}

.page-home .site-header .menu a.active {
  color: var(--bronze);
}

.page-home .site-header .brand-mark {
  background: rgba(255, 253, 248, 0.18);
  border-color: rgba(255, 253, 248, 0.4);
}

.page-home .site-header .brand-name span {
  color: rgba(255, 253, 248, .7);
}

/* Header bronz button hover override — koyu zeminde transparent invert görünmesin,
   solid bronze-deep'e dönsün. */
.page-home .site-header .btn-bronze:hover {
  background: var(--bronze-deep);
  color: var(--warm-white);
  border-color: var(--bronze-deep);
}

/* Scroll edildiğinde (üstten kaymış) header solid ivory pill'e döner. */
.page-home .site-header.scrolled {
  background: rgba(250, 247, 242, 0.94);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-color: var(--line);
  box-shadow: 0 18px 48px -22px rgba(58, 35, 19, .24),
    0 4px 10px rgba(58, 35, 19, .06);
}

.page-home .site-header.scrolled .brand,
.page-home .site-header.scrolled .menu a,
.page-home .site-header.scrolled .menu-toggle,
.page-home .site-header.scrolled .menu-toggle .bars span {
  color: var(--charcoal);
}

.page-home .site-header.scrolled .menu-toggle .bars span {
  background: var(--charcoal);
}

.page-home .site-header.scrolled .menu a.active {
  color: var(--bronze-deep);
}

.page-home .site-header.scrolled .brand-logo {
  filter: none;
}

.page-home .site-header.scrolled .brand-name span {
  color: var(--muted);
}

.page-home .site-header.scrolled .brand-mark {
  background: radial-gradient(circle at 35% 30%, var(--warm-white), var(--champagne) 70%, var(--bronze) 130%);
  border-color: var(--line);
}

.page-home .site-header.scrolled .nav-cta .btn-outline:hover {
  background: var(--charcoal);
  color: var(--warm-white);
}

/* Page hero (sub-pages) — centered + kompakt editorial layout */
.page-hero {
  padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 64px);
  background: var(--ivory-2);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.page-hero .breadcrumbs {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(22px, 2.4vw, 32px);
}

.page-hero .eyebrow {
  display: none;
}

/* Breadcrumbs — kompakt, global (her sayfada aynı) */
.breadcrumbs {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.breadcrumbs-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs-item {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs a {
  color: var(--muted);
  transition: color var(--t-med) var(--ease);
}

.breadcrumbs a:hover {
  color: var(--bronze-deep);
}

.breadcrumbs span[aria-current] {
  color: var(--charcoal);
}

.breadcrumbs-sep {
  display: inline-flex;
  align-items: center;
  color: var(--muted-2);
  opacity: .5;
}

.breadcrumbs-sep i {
  font-size: 11px;
  line-height: 1;
}

.page-hero h1 {
  font-size: clamp(34px, 4.8vw, 56px);
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}

.page-hero .lede,
.page-hero-lede {
  margin: clamp(20px, 2.4vw, 28px) auto 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Centered layout — grid yapısı tek sütuna düşer, içerik dikey stack olur */
.page-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.5vw, 48px);
}

/* ---------- Image placeholder ---------- */
.ph {
  position: relative;
  background: linear-gradient(135deg, var(--champagne) 0%, var(--sand) 100%);
  overflow: hidden;
}

.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(151, 116, 78, 0.06) 0 1px, transparent 1px 14px);
}

.ph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--bronze-deep);
  text-transform: uppercase;
  opacity: .7;
  text-align: center;
  padding: 20px;
}

.ph img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

.ph.zoom:hover img {
  transform: scale(1.06);
}

/* When a real image is present, hide the CSS placeholder texture + label. */
.ph:has(img)::before,
.ph:has(img)::after {
  display: none;
}

/* Tones for variety */
.ph.tone-sage {
  background: linear-gradient(135deg, #E2D2B5 0%, #9C7142 100%);
}

.ph.tone-bronze {
  background: linear-gradient(135deg, #E8D6BE 0%, #C9A47E 100%);
}

.ph.tone-stone {
  background: linear-gradient(135deg, #E5DCC9 0%, #BCAE96 100%);
}

.ph.tone-mist {
  background: linear-gradient(135deg, #ECE6DC 0%, #C8C0B0 100%);
}

.ph.tone-warm {
  background: linear-gradient(135deg, #F2E5D2 0%, #D9B98F 100%);
}

.ph.tone-blush {
  background: linear-gradient(135deg, #ECDCD0 0%, #D2A893 100%);
}

/* ---------- Section heads ---------- */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.section-head h2 {
  max-width: 16ch;
  text-wrap: balance;
}

.section-head .right {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

.section-head.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.section-head.center .eyebrow {
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.section-head.center h2 {
  max-width: 22ch;
  margin: 0 0 clamp(18px, 2vw, 26px);
}

.section-head.center .right {
  max-width: 60ch;
  margin: 0 auto;
}

/* .eyebrow + h2 globalde margin-top ekliyor; centered section-head'de override */
.section-head.center .eyebrow+h1,
.section-head.center .eyebrow+h2,
.section-head.center .eyebrow+h3,
.section-head.center .eyebrow+h4 {
  margin-top: 0;
}

@media (max-width: 800px) {
  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* ---------- Services section — editorial 2-col header + 4-col cards ---------- */
.services-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.services-head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 56ch;
}

.services-head-text h2 {
  max-width: 16ch;
  text-wrap: balance;
}

.services-head-text .lede {
  margin-top: clamp(20px, 2.2vw, 28px);
  max-width: 52ch;
}

.services-head-cta {
  margin-top: clamp(28px, 3vw, 40px);
}

.services-head-image {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.services-head-image>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .services-head {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .services-head-image {
    aspect-ratio: 16/10;
    order: -1;
  }
}

/* Card grid — 3 cols desktop, responsive */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

@media (max-width: 820px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* Phones — horizontal scroll (snap) only for HOME teaser section.
   Browseable pages (e.g. /hizmetler with filter) keep the vertical 2-col grid. */
@media (max-width: 640px) {
  .services-section .services-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    padding: 4px var(--gutter) 14px;
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .services-section .services-grid::-webkit-scrollbar {
    display: none;
  }

  .services-section .services-grid>.service-card {
    flex: 0 0 78%;
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* Browse pages: keep grid, drop the 520px 1-col override so 2-col holds */
  [data-services-grid].services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ---- Services toolbar: search + category chips ---- */
.services-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px 22px;
  margin-bottom: clamp(28px, 3vw, 40px);
}

/* Inside reservation wizard — tighter spacing, sits flush after header */
.services-toolbar--wizard {
  margin-top: clamp(20px, 2.5vw, 32px);
  margin-bottom: clamp(20px, 2.5vw, 28px);
}

/* Filters take the flexible left column (chips wrap internally),
   search sits in the fixed right column — both stay on the same row. */
.services-toolbar .services-filters {
  grid-column: 1;
  grid-row: 1;
}

.services-toolbar .services-search {
  grid-column: 2;
  grid-row: 1;
}

.services-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 320px;
  max-width: 100%;
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0 14px;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.services-search:focus-within {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(168, 121, 70, .12);
}

.services-search>i {
  font-size: 16px;
  color: var(--muted);
  flex-shrink: 0;
  margin-right: 4px;
}

.services-search:focus-within>i {
  color: var(--bronze);
}

.services-search input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 12px 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--charcoal);
  min-width: 0;
}

.services-search input::placeholder {
  color: var(--muted-2, var(--muted));
}

.services-search input::-webkit-search-decoration,
.services-search input::-webkit-search-cancel-button,
.services-search input::-webkit-search-results-button,
.services-search input::-webkit-search-results-decoration {
  appearance: none;
}

.services-search-clear {
  appearance: none;
  border: 0;
  background: var(--ivory-2);
  color: var(--charcoal-2, var(--charcoal));
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

.services-search-clear i {
  font-size: 14px;
}

.services-search-clear:hover {
  background: var(--bronze);
  color: var(--warm-white);
}

.services-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.services-filter {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--charcoal-2, var(--charcoal));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

.services-filter:hover {
  border-color: var(--bronze);
  color: var(--bronze);
}

.services-filter.is-active {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--warm-white);
}

.services-filter-count {
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
  background: var(--ivory-2);
  padding: 2px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

.services-filter.is-active .services-filter-count {
  background: rgba(255, 253, 248, .2);
  color: var(--warm-white);
}

/* ---- Empty state when filter/search has no matches ---- */
.services-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(48px, 6vw, 72px) 24px;
  text-align: center;
  color: var(--muted);
}

.services-empty i {
  font-size: 36px;
  color: var(--bronze);
  opacity: .6;
}

.services-empty p {
  font-size: 15px;
  margin: 0;
}

@media (max-width: 640px) {
  .services-toolbar {
    grid-template-columns: 1fr;
  }

  .services-toolbar .services-filters {
    grid-column: 1;
    grid-row: 1;
  }

  .services-toolbar .services-search {
    grid-column: 1;
    grid-row: 2;
  }

  .services-search {
    width: 100%;
    max-width: none;
  }

  .services-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin: 0 -16px;
    padding: 4px 16px;
    scrollbar-width: none;
  }

  .services-filters::-webkit-scrollbar {
    display: none;
  }

  .services-filter {
    flex-shrink: 0;
  }
}

/* Card — overlay style: görsel kartı kaplar, içerik altta gradient üzerinde */
.service-card {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--champagne);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.service-card-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.service-card-media>img,
.service-card-media-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}

.service-card:hover .service-card-media>img,
.service-card:hover .service-card-media-ph {
  transform: scale(1.05);
}

/* Dark gradient overlay for text readability */
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(20, 18, 14, 0) 30%,
      rgba(20, 18, 14, .35) 55%,
      rgba(20, 18, 14, .85) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Icon — top-left badge (frosted glass) */
.service-card .icon-wrap {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 253, 248, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 253, 248, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--warm-white);
  pointer-events: none;
  transition: background var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    color var(--t-med) var(--ease);
}

.service-card:hover .icon-wrap {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--warm-white);
}

.service-card .icon-wrap svg {
  width: 18px;
  height: 18px;
}

/* Body — overlaid at bottom of card, on dark gradient */
.service-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--warm-white);
}

.service-card-cat {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, .75);
  margin-bottom: 4px;
  font-weight: 500;
}

.service-card h3 {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.25;
  color: var(--warm-white);
}

.service-card-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-med) var(--ease);
}

.service-card-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 4;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-radius: inherit;
}

.service-card-overlay-link:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: -2px;
}

.service-card:hover .service-card-link {
  color: var(--bronze);
}

.service-card p {
  color: rgba(255, 253, 248, .82);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .service-card p {
    display: none;
  }
}

.service-card .meta {
  margin-top: 6px;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 253, 248, .2);
}

.service-card .meta .duration-badges {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.service-card .meta .duration-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: rgba(255, 253, 248, .14);
  color: var(--warm-white);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 999px;
  border: 1px solid rgba(255, 253, 248, .26);
  white-space: nowrap;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}

.service-card:hover .meta .duration-badge {
  background: rgba(255, 253, 248, .22);
  border-color: rgba(255, 253, 248, .4);
}

.service-card .arrow-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 248, .4);
  color: var(--warm-white);
  background: transparent;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}

.service-card:hover .arrow-pill {
  background: var(--warm-white);
  color: var(--charcoal);
  border-color: var(--warm-white);
}

/* Trust signals — bottom row */
.trust-signals {
  margin-top: clamp(40px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-right: 1px solid var(--line-soft);
}

.trust-item:last-child {
  border-right: 0;
}

.trust-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ivory-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bronze-deep);
  border: 1px solid var(--line-soft);
}

.trust-icon svg {
  width: 18px;
  height: 18px;
}

.trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.trust-text strong {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--charcoal);
}

.trust-text small {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 1000px) {
  .trust-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-item:nth-child(2) {
    border-right: 0;
  }

  .trust-item:nth-child(1),
  .trust-item:nth-child(2) {
    border-bottom: 1px solid var(--line-soft);
  }
}

@media (max-width: 520px) {
  .trust-signals {
    grid-template-columns: 1fr;
  }

  .trust-item {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .trust-item:last-child {
    border-bottom: 0;
  }
}

/* Featured service horizontal card */
.feature-service {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  background: var(--warm-white);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
}

.feature-service .image {
  aspect-ratio: 4/3;
  min-height: 340px;
}

.feature-service .body {
  padding: clamp(36px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

.feature-service h3 {
  font-size: clamp(28px, 3vw, 40px);
}

.feature-service ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-service ul li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
  color: var(--charcoal-2);
}

.feature-service ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bronze);
  flex-shrink: 0;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .feature-service {
    grid-template-columns: 1fr;
  }

  .feature-service .image {
    min-height: 240px;
  }
}

/* ---------- Ritual / Signature ---------- */
.ritual-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.ritual-feature .divider {
  margin-left: auto;
  margin-right: auto;
}

.ritual-feature p {
  margin-left: auto;
  margin-right: auto;
}

.ritual-feature .feature-cards {
  grid-template-columns: repeat(4, 1fr);
  text-align: left;
}

@media (max-width: 900px) {
  .ritual-feature .feature-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .ritual-feature .feature-cards {
    grid-template-columns: 1fr;
  }
}

.ritual-feature .image-stack {
  position: relative;
  aspect-ratio: 1;
}

/* Feature cards — 2x2 grid, ikon + başlık + açıklama, gap-based cross divider */
.feature-cards {
  list-style: none;
  padding: 0;
  margin: clamp(32px, 3.5vw, 48px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: clamp(28px, 3vw, 40px) clamp(18px, 2vw, 24px);
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: border-color var(--t-med) var(--ease),
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}

.feature-card:hover {
  border-color: var(--bronze);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -18px rgba(40, 28, 14, .25);
}

.feature-card-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(168, 121, 70, .14), rgba(168, 121, 70, .04));
  border: 1px solid rgba(110, 70, 40, .18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bronze-deep);
  transition: background var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    transform var(--t-med) var(--ease);
}

.feature-card-icon i {
  font-size: 24px;
  line-height: 1;
}

.feature-card:hover .feature-card-icon {
  background: linear-gradient(135deg, rgba(168, 121, 70, .26), rgba(168, 121, 70, .1));
  border-color: var(--bronze);
  transform: scale(1.05);
}

.feature-card-text {
  line-height: 1.45;
}

.feature-card-text h4 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 500;
  color: var(--charcoal);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-wrap: balance;
}

.feature-card-text p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .feature-cards {
    grid-template-columns: 1fr;
  }
}


.ritual-feature .image-stack .ph.main {
  position: absolute;
  inset: 0 28% 28% 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  z-index: 1;
}

.ritual-feature .image-stack .ph.sub {
  position: absolute;
  inset: 28% 0 0 28%;
  border-radius: var(--r-lg);
  border: 8px solid var(--warm-white);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

@media (max-width: 900px) {
  .ritual-feature {
    grid-template-columns: 1fr;
  }

  .ritual-feature .image-stack {
    aspect-ratio: 4/3;
  }
}

/* Steps list — icon circle + büyük watermark numara + editorial hover */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  counter-reset: step-counter;
}

.step {
  position: relative;
  background: var(--warm-white);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  counter-increment: step-counter;
  transition: background var(--t-med) var(--ease);
}

.step:hover {
  background: var(--ivory);
}

/* Big watermark number — sole step indicator, prominent editorial accent */
.step::after {
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  right: -14px;
  top: -26px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 150px;
  line-height: 1;
  color: var(--bronze);
  opacity: .09;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.step:hover::after {
  opacity: .16;
  transform: translateY(2px);
}

.step>* {
  position: relative;
  z-index: 1;
}

/* Icon circle (feature-card style) */
.step .step-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(110, 70, 40, .07);
  border: 1px solid rgba(110, 70, 40, .14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bronze-deep);
  margin-bottom: 4px;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}

.step:hover .step-icon-wrap {
  background: rgba(110, 70, 40, .14);
  border-color: rgba(110, 70, 40, .24);
}

.step .step-icon-wrap i {
  font-size: 20px;
  line-height: 1;
}

.step h4 {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
}

.step p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

/* Mobile: dikey stack + sol kenarda kesikli connector */
@media (max-width: 720px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 0;
    background: transparent;
    border: 0;
  }

  .step {
    padding: 28px 24px 28px 24px;
  }

  .step::before {
    content: "";
    position: absolute;
    left: 46px;
    top: 0;
    bottom: 0;
    width: 1px;
    border-left: 1px dashed rgba(110, 70, 40, .22);
    z-index: 0;
  }

  .step:first-child::before {
    top: 50%;
  }

  .step:last-child::before {
    bottom: 50%;
  }

  .step::after {
    font-size: 120px;
  }
}

/* ---------- Experience strip ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  counter-reset: value-counter;
}

.value-card {
  position: relative;
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  transition: transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

.value-card::before {
  /* Counter-based big watermark number */
  counter-increment: value-counter;
  content: counter(value-counter, decimal-leading-zero);
  position: absolute;
  top: -18px;
  right: -8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 110px;
  line-height: 1;
  color: var(--bronze);
  opacity: .08;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.value-card>* {
  position: relative;
  z-index: 1;
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}

.value-card:hover::before {
  opacity: .14;
  transform: translateY(4px);
}

.value-card .num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bronze-deep);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.value-card h3 {
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.value-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(14px * 1.7 * 3);
}



/* ---------- CTA ---------- */
.cta-block {
  position: relative;
  background: linear-gradient(135deg, var(--ivory) 0%, var(--champagne) 100%);
  border-radius: var(--r-xl);
  padding: clamp(56px, 7vw, 100px) clamp(40px, 6vw, 96px);
  text-align: center;
  overflow: hidden;
}

.cta-block .inner {
  position: relative;
  z-index: 2;
}

.cta-block h2 {
  max-width: 24ch;
  margin: 14px auto 18px;
  text-wrap: balance;
}

.cta-block .lede {
  margin: 0 auto 32px;
}

.cta-block .actions {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* Decorative monogram + botanical sprig overlays */
.cta-decor {
  position: absolute;
  color: var(--bronze-deep);
  opacity: .4;
  pointer-events: none;
  z-index: 1;
}

.cta-decor svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cta-decor--mark {
  top: clamp(24px, 3vw, 40px);
  left: clamp(24px, 3vw, 40px);
  width: clamp(64px, 7vw, 96px);
  height: clamp(64px, 7vw, 96px);
}

.cta-decor--sprig {
  top: 50%;
  right: clamp(16px, 2.5vw, 40px);
  transform: translateY(-50%);
  width: clamp(70px, 9vw, 130px);
  height: clamp(140px, 22vw, 260px);
  opacity: .3;
}

@media (max-width: 700px) {

  /* Mobile CTA card is compact and symmetric — decor doesn't fit gracefully */
  .cta-decor--mark,
  .cta-decor--sprig {
    display: none;
  }
}

/* Outline-dark button variant — dark text on light bg, used as secondary CTA */
.btn-outline--dark {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 14px;
  font-weight: 500;
}

.btn-outline--dark:hover {
  background: var(--charcoal);
  color: var(--warm-white);
  border-color: var(--charcoal);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--warm-white);
  color: var(--charcoal-2);
  padding: clamp(64px, 7.5vw, 100px) 0 32px;
  border-top: 1px solid var(--line);
}

.site-footer .brand-name strong {
  color: var(--charcoal);
}

.site-footer .brand-name span {
  color: var(--muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 22px;
  font-weight: 500;
}

.footer-col p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--charcoal-2);
  margin: 0 0 20px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col ul a {
  font-size: 14px;
  color: var(--charcoal-2);
  transition: color var(--t-med) var(--ease);
}

.footer-col ul a:hover {
  color: var(--bronze);
}

.footer-col.brand-col .brand {
  color: var(--charcoal);
  align-items: flex-start;
}

.footer-col.brand-col .brand-name strong {
  color: var(--charcoal);
}

.footer-col.brand-col .brand-desc {
  margin-top: 22px;
  max-width: 36ch;
  font-size: 14px;
  line-height: 1.8;
  color: var(--charcoal-2);
}

.footer-col.brand-col .brand-mark {
  background: radial-gradient(circle at 35% 30%, var(--champagne), var(--sand) 70%, var(--bronze) 130%);
  border-color: var(--line);
}

/* Contact column with icon-prefixed items */
.footer-contact {
  gap: 16px !important;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--charcoal-2);
}

.footer-contact .contact-icon {
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1;
  margin-top: 4px;
  color: var(--bronze);
}

.footer-contact .contact-text {
  color: inherit;
}

.footer-contact a.contact-text {
  transition: color var(--t-med) var(--ease);
}

.footer-contact a.contact-text:hover {
  color: var(--bronze);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.footer-legal a {
  color: var(--muted);
  transition: color var(--t-med) var(--ease);
}

.footer-legal a:hover {
  color: var(--bronze);
}

.footer-legal .legal-sep {
  color: var(--muted);
  opacity: .55;
}

/* Footer credit — "Design & Development by [LOGO]" — hover sadece logoya */
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}

.footer-credit-text {
  font-size: 12px;
  line-height: 1;
}

.footer-credit img {
  display: block;
  width: auto;
  height: 19px;
  max-width: 100px;
  object-fit: contain;
  transition: opacity var(--t-med) var(--ease);
}

.footer-credit-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.footer-credit-link:hover img {
  opacity: .8;
}

.socials {
  display: flex;
  gap: 10px;
}

.socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal-2);
  transition: all var(--t-med) var(--ease);
}

.socials a:hover {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--warm-white);
}

.socials a i {
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-col.brand-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-top: 22px;
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
  }

  .footer-credit {
    justify-content: center;
  }
}

/* ---------- Forms ---------- */
.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.form .full {
  grid-column: 1 / -1;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--charcoal);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  font-family: var(--font-sans);
}

.field textarea {
  resize: vertical;
  min-height: 130px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--bronze-deep);
  box-shadow: 0 0 0 4px rgba(110, 70, 40, 0.15);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237A7268' fill='none' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.form .submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.form .submit-row .note {
  font-size: 12px;
  color: var(--muted);
}

.form-success {
  background: rgba(110, 70, 40, 0.08);
  border: 1px solid var(--bronze);
  color: var(--bronze-deep);
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-size: 14px;
  grid-column: 1 / -1;
  display: none;
}

.form-success.show {
  display: block;
}

@media (max-width: 700px) {
  .form {
    grid-template-columns: 1fr;
  }
}

/* ---------- Contact ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
}

.info-card {
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-card h3 {
  font-size: 24px;
}

.info-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.info-row .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ivory-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bronze-deep);
  flex-shrink: 0;
}

.info-row .icon svg {
  width: 16px;
  height: 16px;
}

.info-row .label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  display: block;
}

.info-row .value,
.info-row .hours {
  color: var(--charcoal);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 400;
}

.info-row .value a,
.info-row .hours a {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
  transition: color var(--t-med) var(--ease);
}

.info-row .value a:hover,
.info-row .hours a:hover {
  color: var(--bronze);
}

.form-card {
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 44px);
}

/* ---- Contact info column: info-card on top, 3 branch mini-cards filling rest ---- */
.contact-info-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 28px);
  height: 100%;
}

.contact-info-stack .info-card {
  flex-shrink: 0;
}

/* ---- Branch carousel (stacked crossfade with staggered reveal) ---- */
.branch-carousel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.branch-carousel-track {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  min-height: 320px;
  isolation: isolate;
  touch-action: pan-y;
}

/* Base tile — shared visual design; reusable in carousel (contact) or selectable card (reservation) */
.branch-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 28px 28px 32px;
  border-radius: var(--r-lg);
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  isolation: isolate;
  overflow: hidden;
}

/* Carousel-only: absolute stacking + crossfade between siblings */
.branch-carousel-track>.branch-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .55s var(--ease),
    visibility 0s linear .55s;
}

.branch-carousel-track>.branch-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  z-index: 2;
  transition: opacity .65s var(--ease),
    visibility 0s linear 0s;
}

.branch-slide.has-img {
  border-color: transparent;
  background: #1a120a;
}

.branch-slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}

.branch-slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.6s cubic-bezier(.2, .65, .3, 1);
}

.branch-slide:hover .branch-slide-bg img {
  transform: scale(1.06);
}

/* Carousel-only: start zoomed-out, snap to scale on activation */
.branch-carousel-track>.branch-slide .branch-slide-bg img {
  transform: scale(1.1);
}

.branch-carousel-track>.branch-slide.is-active .branch-slide-bg img {
  transform: scale(1.02);
}

.branch-carousel-track>.branch-slide.is-active:hover .branch-slide-bg img {
  transform: scale(1.06);
}

.branch-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(20, 14, 6, .3) 0%, rgba(20, 14, 6, .55) 50%, rgba(20, 14, 6, .85) 100%),
    linear-gradient(90deg, rgba(20, 14, 6, .35) 0%, transparent 60%);
}

.branch-slide-top,
.branch-slide-body,
.branch-slide-meta {
  position: relative;
  z-index: 2;
}

/* Carousel-only: staggered reveal animation tied to is-active */
.branch-carousel-track>.branch-slide .branch-slide-top,
.branch-carousel-track>.branch-slide .branch-slide-body,
.branch-carousel-track>.branch-slide .branch-slide-meta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .7s cubic-bezier(.2, .65, .3, 1);
}

.branch-carousel-track>.branch-slide.is-active .branch-slide-top {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .12s;
}

.branch-carousel-track>.branch-slide.is-active .branch-slide-body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .22s;
}

.branch-carousel-track>.branch-slide.is-active .branch-slide-meta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .32s;
}

/* Top: counter + external arrow */
.branch-slide-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.branch-slide-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--bronze);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.branch-slide-num .sep {
  opacity: .55;
  margin: 0 2px;
}

.branch-slide.has-img .branch-slide-num {
  color: rgba(255, 253, 248, .82);
}

.branch-slide-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bronze);
  text-decoration: none;
  transition: background var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

.branch-slide-arrow i {
  font-size: 16px;
  transition: transform var(--t-med) var(--ease);
}

.branch-slide-arrow:hover {
  background: var(--bronze);
  color: var(--warm-white);
  border-color: var(--bronze);
}

.branch-slide-arrow:hover i {
  transform: translate(2px, -2px);
}

.branch-slide.has-img .branch-slide-arrow {
  border-color: rgba(255, 253, 248, .35);
  color: var(--warm-white);
  background: rgba(255, 253, 248, .08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.branch-slide.has-img .branch-slide-arrow:hover {
  background: var(--bronze);
  border-color: var(--bronze);
}

/* Body */
.branch-slide-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.branch-slide-city {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(38px, 4.5vw, 52px);
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--charcoal);
}

.branch-slide.has-img .branch-slide-city {
  color: var(--warm-white);
  text-shadow: 0 2px 24px rgba(20, 14, 6, .5);
}

.branch-slide-hotel {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 600;
  margin-top: 4px;
}

.branch-slide.has-img .branch-slide-hotel {
  color: var(--bronze-light, #D6A878);
}

/* Meta (address + tel) */
.branch-slide-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
}

.branch-slide.has-img .branch-slide-meta {
  border-top-color: rgba(255, 253, 248, .2);
}

.branch-slide-row {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--charcoal-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--t-med) var(--ease);
}

.branch-slide-row i {
  font-size: 14px;
  color: var(--bronze);
  flex-shrink: 0;
  margin-top: 2px;
}

.branch-slide.has-img .branch-slide-row {
  color: rgba(255, 253, 248, .9);
}

.branch-slide.has-img .branch-slide-row i {
  color: var(--bronze-light, #D6A878);
}

a.branch-slide-row:hover {
  color: var(--bronze);
}

.branch-slide.has-img a.branch-slide-row:hover {
  color: var(--bronze-light, #D6A878);
}

/* ---- Nav: prev/next + dots ---- */
.branch-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

.branch-carousel-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bronze);
  cursor: pointer;
  transition: background var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    opacity var(--t-med) var(--ease);
  flex-shrink: 0;
}

.branch-carousel-btn i {
  font-size: 16px;
}

.branch-carousel-btn:hover:not(:disabled) {
  background: var(--bronze);
  color: var(--warm-white);
  border-color: var(--bronze);
}

.branch-carousel-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.branch-carousel-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  justify-content: center;
}

.branch-carousel-dot {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  position: relative;
  transition: color var(--t-med) var(--ease);
}

.branch-carousel-dot::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-med) var(--ease);
}

.branch-carousel-dot:hover {
  color: var(--charcoal-2);
}

.branch-carousel-dot.is-active {
  color: var(--bronze);
}

.branch-carousel-dot.is-active::after {
  transform: scaleX(1);
}

@media (max-width: 600px) {
  .branch-carousel-dot .dot-label {
    display: none;
  }

  .branch-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
  }

  .branch-carousel-dot::after {
    display: none;
  }

  .branch-carousel-dot.is-active {
    background: var(--bronze);
    border-color: var(--bronze);
  }
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.map-fullwidth {
  position: relative;
  width: 100%;
  height: calc(100vh - 110px);
  min-height: 500px;
  overflow: hidden;
  background: var(--champagne);
}

#contact-map {
  width: 100%;
  height: 100%;
}

/* Subtle warm tint over Voyager — keeps land/water distinction, just whispers bronze */
#contact-map .leaflet-tile-pane {
  filter: saturate(0.85) contrast(1.02) brightness(1.02);
}

/* Smooth out tile seams during pan */
#contact-map .leaflet-tile-loaded {
  opacity: 1;
}

/* Custom bronze pin marker — teardrop with white center + ground shadow */
.mira-map-marker {
  color: var(--bronze);
  position: relative;
  width: 28px;
  height: 38px;
  transition: transform .3s var(--ease);
}

.mira-map-marker .pin-svg {
  width: 28px;
  height: 38px;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(40, 28, 14, .3));
  transform-origin: 50% 100%;
  transition: transform .3s var(--ease);
}

.mira-map-marker .pin-shadow {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 4px;
  background: rgba(40, 28, 14, .3);
  border-radius: 50%;
  filter: blur(2.5px);
  pointer-events: none;
  transition: width .3s var(--ease), opacity .3s var(--ease);
}

.mira-map-marker:hover .pin-svg {
  transform: scale(1.1) translateY(-2px);
}

.mira-map-marker:hover .pin-shadow {
  width: 20px;
  opacity: .5;
}

/* Editorial popup card */
.leaflet-popup.mira-popup .leaflet-popup-content-wrapper {
  background: var(--warm-white);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(40, 28, 14, .22), 0 4px 14px rgba(40, 28, 14, .08);
  border: 1px solid var(--line);
  padding: 0;
}

.mira-popup .leaflet-popup-content {
  margin: 0 !important;
  padding: 24px 26px;
  font-family: var(--font-sans);
  width: 280px !important;
}

.mira-popup .popup-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 600;
  margin-bottom: 10px;
}

.mira-popup .popup-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  line-height: 1.2;
  margin-bottom: 12px;
}

.mira-popup .popup-address {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.65;
  color: var(--charcoal-2);
}

.mira-popup .popup-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--bronze);
  text-decoration: none;
  transition: gap var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

.mira-popup .popup-link:hover {
  gap: 12px;
  color: var(--bronze-deep);
}

.mira-popup .popup-link .arrow {
  display: inline-flex;
  transition: transform var(--t-med) var(--ease);
}

.mira-popup .popup-link:hover .arrow {
  transform: translateX(2px);
}

.mira-popup .leaflet-popup-tip {
  background: var(--warm-white);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 16px rgba(40, 28, 14, .08);
}

/* Minimal tooltip (always visible) — paired with the bronze pin */
.leaflet-tooltip.mira-tooltip {
  background: var(--bronze);
  border: 0;
  border-radius: 4px;
  padding: 5px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-white);
  box-shadow: 0 4px 12px rgba(40, 28, 14, .25);
  white-space: nowrap;
  opacity: 1;
}

.leaflet-tooltip.mira-tooltip::before {
  border-top-color: var(--bronze);
}

/* Zoom control theme */
.leaflet-control-zoom {
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(40, 28, 14, .08) !important;
}

.leaflet-control-zoom a {
  background: var(--warm-white) !important;
  color: var(--charcoal) !important;
  border: 0 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

.leaflet-control-zoom a:hover {
  background: var(--champagne) !important;
  color: var(--bronze) !important;
}

.leaflet-control-zoom-in {
  border-bottom: 1px solid var(--line) !important;
}

/* Attribution — minimal */
.leaflet-control-attribution {
  background: rgba(255, 253, 248, .85) !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  padding: 3px 8px !important;
  border-radius: 4px 0 0 0 !important;
}

.leaflet-control-attribution a {
  color: var(--bronze) !important;
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 4vw, 72px);
  align-items: start;
}

.faq-col {
  display: flex;
  flex-direction: column;
}

@media (max-width: 820px) {
  .faq-list {
    grid-template-columns: 1fr;
  }
}

.faq-item {
  border-bottom: 1px solid var(--line-soft);
  padding: 22px 0;
  cursor: pointer;
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--font-serif);
  font-size: 22px;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 22px;
  color: var(--bronze-deep);
  transition: transform var(--t-med) var(--ease);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item .answer {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
  margin-top: 14px;
  max-width: 80ch;
}

/* Smooth open/close animation for FAQ items */
.faq-item>.answer,
.faq-item>div:not(summary) {
  overflow: hidden;
  transition: height 350ms cubic-bezier(.3, .7, .2, 1),
    opacity 280ms ease;
}

.faq-item:not([open])>.answer,
.faq-item:not([open])>div:not(summary) {
  height: 0;
  opacity: 0;
  margin-top: 0;
}

.faq-item[open]>.answer,
.faq-item[open]>div:not(summary) {
  opacity: 1;
}

.hours {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hours .row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}

.hours .row:last-child {
  border-bottom: 0;
}

.hours .day {
  color: var(--charcoal);
}

.hours .time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- About ---------- */
.story-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: stretch;
}

/* Experience features — 4-icon strip between paragraphs and signature quote */
.experience-features {
  margin: clamp(32px, 4vw, 44px) 0 clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(20px, 2.2vw, 28px) 0;
}

.experience-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: center;
  padding: 0 8px;
  position: relative;
}

.experience-feature+.experience-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--line-soft);
}

.experience-feature .icon {
  color: var(--bronze-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.experience-feature .icon svg {
  width: 30px;
  height: 30px;
}

.experience-feature .label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  line-height: 1.5;
}

@media (max-width: 540px) {
  .experience-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 0;
  }

  .experience-feature:nth-child(3)::before {
    display: none;
  }

  .experience-feature .label {
    font-size: 10px;
    letter-spacing: 0.16em;
  }
}

/* Experience closing banner — quiet atmospheric finish for the section */
.experience-banner {
  margin-top: clamp(20px, 2.4vw, 32px);
  display: flex;
  align-items: stretch;
  border: 1px dashed rgba(110, 70, 40, .35);
  border-radius: var(--r-md);
  background: rgba(255, 253, 248, .6);
  overflow: hidden;
}

.experience-banner-icon {
  flex: 0 0 auto;
  width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px dashed rgba(110, 70, 40, .35);
  color: var(--bronze-deep);
}

.experience-banner-icon svg {
  width: 30px;
  height: 30px;
}

.experience-banner-text {
  padding: 18px 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--charcoal);
  flex: 1 1 auto;
}

@media (max-width: 540px) {
  .experience-banner-icon {
    width: 56px;
  }

  .experience-banner-icon svg {
    width: 26px;
    height: 26px;
  }

  .experience-banner-text {
    padding: 16px 18px;
    font-size: 13.5px;
  }
}

.story-block .image {
  position: relative;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  min-height: 520px;
  overflow: hidden;
}

.story-block .image>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.story-block .text p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 18px;
  max-width: 56ch;
}

/* Brand-story CTA — closes the narrative with an invitation + actions */
.story-cta {
  margin-top: clamp(28px, 3vw, 36px);
  padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid var(--line-soft);
  max-width: 56ch;
}

.story-cta-line {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.35;
  color: var(--charcoal);
  margin: 0 0 clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.story-cta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
}

.story-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-med) var(--ease), gap var(--t-med) var(--ease);
}

.story-cta-link i {
  font-size: 16px;
  transition: transform var(--t-med) var(--ease);
}

.story-cta-link:hover {
  color: var(--bronze);
  gap: 10px;
}

.story-cta-link:hover i {
  transform: translateX(2px);
}

.story-block .signature {
  margin-top: 28px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--charcoal);
}

.story-block .signature small {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .story-block {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .story-block .image {
    aspect-ratio: 4/5;
    min-height: 0;
  }
}


/* ---------- Reveal animation ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease), transform 580ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Utilities ---------- */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center;
}

.mt-0 {
  margin-top: 0 !important;
}

/* ---------- Field-level error (inline below input) ---------- */
.field .err {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #B9433F;
  letter-spacing: 0.01em;
}

.field .err::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}

/* ---------- Toast notifications (brand-themed) ---------- */
.toast-stack {
  position: fixed;
  bottom: calc(clamp(20px, 3vw, 32px) + 72px);
  right: clamp(20px, 3vw, 32px);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(420px, calc(100vw - 40px));
  pointer-events: none;
}

@media (max-width: 640px) {
  .toast-stack {
    bottom: 16px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

.toast {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 44px 16px 18px;
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 50px rgba(40, 28, 14, .18),
    0 4px 14px rgba(40, 28, 14, .08);
  overflow: hidden;
  font-family: var(--font-sans);
  animation: toast-in .42s cubic-bezier(.2, .8, .2, 1);
}

.toast.is-leaving {
  animation: toast-out .35s cubic-bezier(.4, 0, .7, .2) forwards;
}

.toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--toast-accent, var(--bronze));
}

.toast--success {
  --toast-accent: #5A7B5C;
}

.toast--error {
  --toast-accent: #B9433F;
}

.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--toast-accent) 14%, transparent);
  color: var(--toast-accent);
  margin-top: 1px;
}

.toast-icon i {
  font-size: 18px;
}

.toast-message {
  flex: 1;
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--charcoal-2);
  letter-spacing: 0.005em;
}

.toast-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--t-med) var(--ease),
    color var(--t-med) var(--ease);
}

.toast-close:hover {
  background: var(--champagne);
  color: var(--charcoal);
}

.toast-close i {
  font-size: 15px;
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--toast-accent);
  opacity: .55;
  animation: toast-progress 6s linear forwards;
  transform-origin: left;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(.97);
  }
}

@keyframes toast-progress {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

/* ---------- WhatsApp floating button ---------- */
.wa-float {
  position: fixed;
  right: clamp(18px, 2.5vw, 28px);
  bottom: clamp(18px, 2.5vw, 28px);
  z-index: 1000;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 28px -8px rgba(37, 211, 102, .55),
    0 4px 12px rgba(0, 0, 0, .12);
  transition: background var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}

.wa-float:hover {
  background: #128C7E;
  box-shadow: 0 14px 34px -10px rgba(37, 211, 102, .65),
    0 6px 16px rgba(0, 0, 0, .14);
}

.wa-float-icon {
  font-size: 30px;
  line-height: 1;
  position: relative;
  z-index: 2;
}

.wa-float-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: .55;
  z-index: 1;
  animation: wa-pulse 2s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}

@keyframes wa-pulse {
  0% {
    transform: scale(1);
    opacity: .55;
  }

  70% {
    transform: scale(1.4);
    opacity: 0;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* App-bar shows ≤640px and reserves bottom space — hide WhatsApp float there
   to prevent it from sitting on top of the bar's center reservation CTA. */
@media (max-width: 640px) {
  .wa-float {
    display: none;
  }
}

/* =============================================================
   Editorial Hero — magazine spread variant
   ============================================================= */

/* Section vertical layout: keep flex column but center the main text
   block so the dateline (top) and foot (bottom) breathe symmetrically. */
.hero--editorial {
  justify-content: center;
}

.hero--editorial>.container {
  flex: 0 0 auto;
}

/* Cinematic vignette — deepens corners, focuses eye on copy */
.hero--editorial .hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 22% 50%, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 65%),
    linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .45) 100%);
}

/* H1 — editorial display sizing, mixed roman + italic */
.hero--editorial .hero-text {
  max-width: 820px;
}

.hero--editorial .hero-text h1 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  font-weight: 400;
  margin-bottom: clamp(18px, 2vw, 24px);
  text-wrap: balance;
}

.hero--editorial .hero-text h1 .accent {
  display: inline;
  font-style: italic;
  color: var(--bronze);
}

.hero--editorial .hero-text .lede {
  font-size: clamp(15px, 1.15vw, 17.5px);
  max-width: 44ch;
  line-height: 1.7;
  margin-bottom: clamp(32px, 3.4vw, 44px);
  color: rgba(255, 253, 248, .82);
}

/* Actions row — primary button + video play CTA */
.hero--editorial .hero-actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 14px);
  flex-wrap: wrap;
}

.link-arrow--light {
  color: var(--warm-white);
}

.link-arrow--light::after {
  color: var(--bronze);
}

.link-arrow--light:hover {
  color: var(--bronze);
}

.link-arrow--light:hover::after {
  color: var(--warm-white);
}

/* Video play CTA — circular play icon + uppercase label */
.play-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--warm-white);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-med) var(--ease);
}

.play-cta .play-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 253, 248, .12);
  border: 1px solid rgba(255, 253, 248, .4);
  color: var(--bronze);
  flex: 0 0 auto;
  transition: background var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    transform var(--t-med) var(--ease);
}

.play-cta .play-icon::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 248, .18);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease), inset var(--t-med) var(--ease);
}

.play-cta .play-icon svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
}

.play-cta:hover {
  color: var(--bronze);
}

.play-cta:hover .play-icon {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--warm-white);
  transform: scale(1.04);
}

.play-cta:hover .play-icon::before {
  opacity: 1;
  inset: -10px;
}

@media (max-width: 540px) {
  .play-cta {
    font-size: 11px;
    letter-spacing: 0.18em;
    gap: 12px;
  }

  .play-cta .play-icon {
    width: 40px;
    height: 40px;
  }
}

/* Bottom foot strip — numbered index + scroll cue */
.hero--editorial .hero-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(28px, 4vh, 56px);
  z-index: 2;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}

/* Numbered index — replaces glass pills */
.hero--editorial .hero-index {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: min(720px, 60vw);
  border-top: 1px solid rgba(255, 253, 248, .22);
  flex: 1 1 auto;
}

.hero--editorial .hero-index li {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding-right: clamp(18px, 2.2vw, 28px);
  margin-right: clamp(18px, 2.2vw, 28px);
  border-right: 1px solid rgba(255, 253, 248, .16);
  color: rgba(255, 253, 248, .92);
}

.hero--editorial .hero-index li:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}

.hero--editorial .hero-index .num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--bronze);
  letter-spacing: 0;
  line-height: 1;
}

.hero--editorial .hero-index .lab {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Scroll cue — hero'nun dikey ortasında, sağ kenarda sabit */
.hero--editorial .hero-scroll {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: rgba(255, 253, 248, .78);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  transition: color var(--t-med) var(--ease);
}

.hero--editorial .hero-scroll:hover {
  color: var(--warm-white);
}

.hero--editorial .hero-scroll-line {
  display: block;
  width: 2px;
  height: 80px;
  background: rgba(255, 253, 248, .22);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.hero--editorial .hero-scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  background: linear-gradient(to bottom,
      rgba(255, 253, 248, 0) 0%,
      rgba(255, 253, 248, .35) 40%,
      var(--bronze) 90%,
      var(--bronze) 100%);
  animation: hero-scroll-cue 2s cubic-bezier(.55, .05, .35, 1) infinite;
  will-change: transform, opacity;
}

@keyframes hero-scroll-cue {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    transform: translateY(250%);
    opacity: 0;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .hero--editorial .hero-text h1 {
    font-size: clamp(30px, 6vw, 44px);
  }

  .hero--editorial .hero-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .hero--editorial .hero-scroll {
    align-self: flex-end;
  }

  .hero--editorial .hero-index {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .hero--editorial .hero-index {
    padding-top: 16px;
  }

  .hero--editorial .hero-index li {
    padding-right: 12px;
    margin-right: 12px;
  }

  .hero--editorial .hero-index .num {
    font-size: 17px;
  }

  .hero--editorial .hero-index .lab {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .hero--editorial .hero-scroll-line {
    height: 56px;
  }
}

/* Phones — drop the scroll cue entirely; touch users naturally scroll */
@media (max-width: 600px) {
  .hero--editorial .hero-scroll {
    display: none;
  }
}

/* Phones — stack the index vertically so each label is one tidy row */
@media (max-width: 480px) {
  .hero--editorial .hero-index {
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
  }

  .hero--editorial .hero-index li {
    padding: 0;
    margin: 0;
    border-right: 0;
    width: 100%;
  }

  .hero--editorial .hero-index .num {
    font-size: 15px;
  }

  .hero--editorial .hero-index .lab {
    font-size: 10.5px;
    letter-spacing: 0.16em;
  }
}

/* =============================================================
   Service Detail — editorial magazine feature
   ============================================================= */

/* ---------- 01 · Editorial Hero ---------- */
.service-hero {
  padding: 28px 0 clamp(60px, 8vw, 110px);
  background: var(--ivory);
  position: relative;
  overflow: hidden;
}

.service-hero .breadcrumbs {
  margin-bottom: clamp(32px, 4vw, 56px);
}

.service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: stretch;
}

.service-hero-figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--champagne);
}

.service-hero-figure>img,
.service-hero-figure .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(8px, 2vw, 24px) 0;
}

.service-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  margin: 14px 0 0;
  text-wrap: balance;
}

.service-hero-lede {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--muted);
  max-width: 54ch;
  margin: clamp(22px, 2.5vw, 32px) 0 clamp(24px, 3vw, 32px);
}

.service-hero-lede p {
  margin: 0 0 1em;
}

.service-hero-lede p:last-child {
  margin-bottom: 0;
}

.service-hero-duration {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0 0 clamp(28px, 3.5vw, 36px);
  align-self: flex-start;
}

.service-hero-duration legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.service-hero-duration label {
  cursor: pointer;
  display: inline-flex;
}

.service-hero-duration input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.service-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: 0.04em;
  transition: background var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    transform var(--t-med) var(--ease);
}

.service-hero-pill i {
  font-size: 14px;
  color: var(--bronze);
  transition: color var(--t-med) var(--ease);
}

.service-hero-duration label:hover .service-hero-pill {
  border-color: var(--bronze);
  background: var(--champagne);
  transform: translateY(-1px);
}

.service-hero-duration input[type="radio"]:checked+.service-hero-pill {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--warm-white);
}

.service-hero-duration input[type="radio"]:checked+.service-hero-pill i {
  color: var(--warm-white);
}

.service-hero-duration input[type="radio"]:focus-visible+.service-hero-pill {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

.service-hero-cta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
}

/* Bronze outline CTA — premium editorial; hover sweeps bronze fill left → right */
.btn-outline-bronze {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 8px;
  border: 1.5px solid var(--bronze);
  background: transparent;
  color: var(--bronze);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.btn-outline-bronze::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bronze);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}

.btn-outline-bronze:hover {
  color: var(--warm-white);
  transform: translateY(-1px);
}

.btn-outline-bronze:hover::before {
  transform: scaleX(1);
}

.btn-outline-bronze .arrow {
  display: inline-flex;
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--t-med) var(--ease);
}

.btn-outline-bronze .arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.btn-outline-bronze:hover .arrow {
  width: 26px;
}

.btn-outline-bronze-label {
  position: relative;
}

.service-hero-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-med) var(--ease), gap var(--t-med) var(--ease);
}

.service-hero-cta-link i {
  font-size: 16px;
  transition: transform var(--t-med) var(--ease);
}

.service-hero-cta-link:hover {
  color: var(--bronze);
  gap: 10px;
}

.service-hero-cta-link:hover i {
  transform: translateX(2px);
}

/* Hızlı iletişim — CTA'nın altında, ince ayraçla ayrılmış */
.service-hero-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(24px, 3vw, 30px);
  border-top: 1px solid var(--line);
}

.service-hero-contact-label {
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.service-hero-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--charcoal);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-med) var(--ease);
}

.service-hero-contact-item i {
  font-size: 17px;
  color: var(--bronze);
}

a.service-hero-contact-item:hover {
  color: var(--bronze);
}

/* ---------- 02 · Benefits Grid (4 icon cards) ---------- */
.service-benefits .section-head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);
}

.benefit-card {
  background: var(--warm-white);
  padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background var(--t-med) var(--ease);
}

.benefit-card:hover {
  background: var(--champagne);
}

.benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--bronze);
  border: 1px solid var(--line);
  margin-bottom: 6px;
  transition: background var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

.benefit-card:hover .benefit-icon {
  background: var(--bronze);
  color: var(--warm-white);
  border-color: var(--bronze);
}

.benefit-icon i {
  font-size: 22px;
}

.benefit-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.25;
  color: var(--charcoal);
  margin: 0;
  letter-spacing: -0.01em;
}

.benefit-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

/* ---------- 03 · Overview (description + stacked spec cards) ---------- */
.service-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: flex-start;
}

.service-overview-body h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  margin: 0 0 clamp(24px, 3vw, 36px);
}

.service-overview-body-text {
  font-size: clamp(16px, 1.15vw, 17px);
  line-height: 1.95;
  color: var(--charcoal-2);
}

.service-overview-body-text p {
  margin: 0 0 1.3em;
}

.service-overview-body-text p:last-child {
  margin-bottom: 0;
}

.service-overview-cards {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spec-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 30px);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-med) var(--ease),
    background var(--t-med) var(--ease);
}

.spec-card:hover {
  border-color: var(--bronze);
  background: var(--warm-white);
}

.spec-card>i {
  font-size: 22px;
  color: var(--bronze);
  flex-shrink: 0;
  margin-top: 1px;
}

.spec-card>div {
  flex: 1;
  min-width: 0;
}

.spec-card-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
}

.spec-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  margin: 0;
  font-weight: 500;
}

/* ---------- 05 · FAQ (split layout) ---------- */
.service-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: flex-start;
}

.service-faq-head {
  position: sticky;
  top: 110px;
}

.service-faq-head h2 {
  margin-top: 14px;
}

.service-faq-head p {
  margin-top: 18px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 38ch;
}

.service-faq-link {
  display: flex;
  width: fit-content;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  margin-right: auto;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--bronze);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--t-med) var(--ease);
}

.service-faq-link:hover {
  opacity: .7;
}

.service-faq-contact {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}

.service-faq-contact .contact-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.service-faq-contact .contact-phone,
.service-faq-contact .contact-email,
.service-faq-contact .contact-hours {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal-2);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.service-faq-contact .contact-phone,
.service-faq-contact .contact-email {
  text-decoration: none;
  transition: color var(--t-med) var(--ease);
}

.service-faq-contact .contact-phone:hover,
.service-faq-contact .contact-email:hover {
  color: var(--bronze);
}

.service-faq-contact .contact-phone i,
.service-faq-contact .contact-email i,
.service-faq-contact .contact-hours i {
  font-size: 16px;
  color: var(--bronze);
}

.service-faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.service-faq-list .faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
}

.service-faq-list .faq-item summary {
  list-style: none;
  padding: clamp(20px, 2.4vw, 28px) 44px clamp(20px, 2.4vw, 28px) 0;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.35;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  position: relative;
  transition: color var(--t-med) var(--ease);
}

.service-faq-list .faq-item summary::-webkit-details-marker {
  display: none;
}

.service-faq-list .faq-item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 8px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 8px no-repeat;
  transform: translateY(-50%);
  color: var(--bronze);
  transition: transform var(--t-med) var(--ease),
    background-size var(--t-med) var(--ease);
}

.service-faq-list .faq-item[open] summary {
  color: var(--bronze);
}

.service-faq-list .faq-item[open] summary::after {
  background-size: 8px 1px, 0 0;
}

.service-faq-list .faq-item .answer {
  padding: 0 44px clamp(22px, 2.5vw, 28px) 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 64ch;
}

/* ---------- Service Detail — responsive ---------- */
@media (max-width: 980px) {
  .service-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .service-hero-figure {
    aspect-ratio: 16/11;
    max-height: 520px;
  }

  .service-hero-text {
    padding: 0;
  }

  .service-overview-grid,
  .service-faq-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .service-overview-cards,
  .service-faq-head {
    position: static;
  }

  .benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .benefit-grid {
    grid-template-columns: 1fr;
    gap: 1px;
  }
}

@media (max-width: 560px) {
  .service-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .service-hero-cta-link {
    justify-content: center;
  }
}

/* =============================================================
   Reservation Wizard
   ============================================================= */
.wizard {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------- Progress indicator ---------- */
.wizard-progress {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(36px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.wizard-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px clamp(16px, 2.2vw, 28px);
  position: relative;
  color: var(--muted);
  transition: color var(--t-med) var(--ease);
  border-left: 1px solid var(--line);
}

.wizard-step:first-child {
  border-left: 0;
}

.wizard-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  background: var(--bronze);
  width: 0;
  transition: width .4s var(--ease);
}

.wizard-step.is-active::before,
.wizard-step.is-done::before {
  width: 100%;
}

.wizard-step.is-active {
  color: var(--charcoal);
}

.wizard-step.is-done {
  color: var(--bronze);
}

.wizard-step-num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--bronze);
}

.wizard-step-label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Mobile: collapse the 4-col strip to a compact number-only progress bar.
   Wizard panel header below ("Adım 01") already names the current step. */
@media (max-width: 600px) {
  .wizard-step {
    padding: 14px 4px;
    align-items: center;
    text-align: center;
    gap: 0;
  }

  .wizard-step-num {
    font-size: 15px;
  }

  .wizard-step-label {
    display: none;
  }
}

/* ---------- Panels ---------- */
.wizard-panel {
  display: none;
  animation: wizard-fade .4s var(--ease);
}

.wizard-panel.is-active {
  display: block;
}

@keyframes wizard-fade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wizard-panel-head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.wizard-panel-head .eyebrow {
  display: inline-flex;
}

.wizard-panel-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  margin: 14px 0 12px;
  text-wrap: balance;
}

.wizard-panel-head p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto;
}

/* ---------- Choice cards (Step 1: services) ---------- */
.choice-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.choice-grid--services {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1180px) {
  .choice-grid--services {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .choice-grid--services {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Keep 2-column even on phones — single-column would make Step 1 too tall (17 services). */

.choice-card {
  position: relative;
  display: block;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--warm-white);
  transition: border-color var(--t-med) var(--ease),
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}

.choice-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-card:hover {
  border-color: var(--bronze);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(40, 28, 14, .25);
}

.choice-card:has(input:checked),
.choice-card.is-checked {
  border-color: var(--bronze);
  box-shadow: 0 0 0 2px var(--bronze) inset, 0 16px 36px -18px rgba(40, 28, 14, .3);
}

.choice-card-media {
  position: relative;
  aspect-ratio: 5/4;
  overflow: hidden;
}

.choice-card-media>img,
.choice-card-media>.ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.choice-card-body {
  padding: 16px 18px 18px;
}

.choice-card-cat {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
}

.choice-card-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--charcoal);
}

.choice-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.choice-card-meta i {
  font-size: 14px;
  color: var(--bronze);
}

.choice-card-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bronze);
  color: var(--warm-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

/* Info button — top-left corner of card, opens preview modal */
.choice-card-info {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  appearance: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 248, .92);
  color: var(--charcoal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(40, 28, 14, .18);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-med) var(--ease),
    transform var(--t-med) var(--ease),
    background var(--t-med) var(--ease),
    color var(--t-med) var(--ease);
}

.choice-card-info i {
  font-size: 16px;
}

.choice-card:hover .choice-card-info,
.choice-card:focus-within .choice-card-info,
.choice-card-info:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.choice-card-info:hover,
.choice-card-info:focus-visible {
  background: var(--bronze);
  color: var(--warm-white);
  outline: none;
}

@media (hover: none) {

  /* Touch devices — always show, no hover state */
  .choice-card-info {
    opacity: 1;
    transform: translateY(0);
  }
}

.choice-card:has(input:checked) .choice-card-check,
.choice-card.is-checked .choice-card-check {
  opacity: 1;
  transform: scale(1);
}

.choice-card-check i {
  font-size: 16px;
}

/* ---------- Step 2: Branch + DateTime ---------- */
.step2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
}

.step2-branches {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 900px) {
  .step2-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
  }

  .step2-branches {
    min-height: auto;
  }
}

.step-section-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--bronze);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.step-section-title--mt {
  margin-top: clamp(24px, 3vw, 32px);
}

.branch-list {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
  min-height: 0;
}

/* Mobile: drop equal-row stretch, let each card use a fixed reasonable height
   so the branch list doesn't dominate the wizard step. */
@media (max-width: 900px) {
  .branch-list {
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 12px;
  }

  .branch-list>.branch-card.branch-slide {
    height: 150px;
    min-height: 0;
    padding: 16px 20px;
    gap: 0;
  }

  .branch-list>.branch-card.branch-slide .branch-slide-bg img {
    transform: scale(1);
  }

  /* Compact mobile tile: num top, city+hotel middle, single phone row bottom.
     Drop address (too long, wraps awkwardly) — phone is the actionable info. */
  .branch-list>.branch-card.branch-slide .branch-slide-top {
    flex: 0 0 auto;
  }

  .branch-list>.branch-card.branch-slide .branch-slide-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }

  .branch-list>.branch-card.branch-slide .branch-slide-num {
    font-size: 12px;
  }

  .branch-list>.branch-card.branch-slide .branch-slide-city {
    font-size: 22px;
    line-height: 1.1;
  }

  .branch-list>.branch-card.branch-slide .branch-slide-hotel {
    font-size: 9.5px;
    letter-spacing: 0.14em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
  }

  .branch-list>.branch-card.branch-slide .branch-slide-meta {
    flex: 0 0 auto;
    gap: 0;
    padding-top: 8px;
  }

  .branch-list>.branch-card.branch-slide .branch-slide-row--addr {
    display: none;
  }

  .branch-list>.branch-card.branch-slide .branch-slide-row--tel {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
  }
}

/* Outer label-only — interactivity + state. Visual chrome (display, padding,
   background, image, overlay, typography) comes from .branch-slide. */
.branch-card {
  cursor: pointer;
  border-radius: var(--r-lg);
  transition: transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}

/* --- Image variant: full-bleed bg + gradient overlay + light text --- */
/* Hide the wrapped radio — selection state read via :has(input:checked) */
.branch-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Lift + bronze ring on hover/selection (works on top of .branch-slide chrome) */
.branch-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -18px rgba(20, 14, 6, .45);
}

.branch-card:has(input:checked),
.branch-card.is-checked {
  box-shadow: 0 0 0 2px var(--bronze) inset,
    0 14px 32px -18px rgba(20, 14, 6, .45);
}

/* Selection check badge — anchored top-right over the tile */
.branch-card-check {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bronze);
  color: var(--warm-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.branch-card-check i {
  font-size: 14px;
}

.branch-card:has(input:checked) .branch-card-check,
.branch-card.is-checked .branch-card-check {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Mini calendar ---------- */
.mini-calendar {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  background: var(--warm-white);
}

.mini-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mc-title {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  text-transform: capitalize;
}

.mc-nav {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ivory);
  color: var(--charcoal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}

.mc-nav:hover {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--warm-white);
}

.mc-nav i {
  font-size: 16px;
}

.mc-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.mc-weekdays span {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0;
}

.mc-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mc-day {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal);
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}

.mc-day.is-blank {
  visibility: hidden;
  pointer-events: none;
}

.mc-day.is-past {
  color: var(--line);
  cursor: not-allowed;
  pointer-events: none;
}

.mc-day:not(.is-blank):not(.is-past):hover {
  background: var(--champagne);
  border-color: var(--bronze);
}

.mc-day.is-today {
  border-color: var(--bronze);
  font-weight: 600;
}

.mc-day.is-selected {
  background: var(--bronze);
  color: var(--warm-white);
  border-color: var(--bronze);
}

/* ---------- Time slot chips ---------- */
.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}

.time-chip {
  position: relative;
  display: block;
  cursor: pointer;
}

.time-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.time-chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--warm-white);
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

.time-chip:hover span {
  border-color: var(--bronze);
  background: var(--champagne);
}

.time-chip input:checked+span {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--warm-white);
}

/* Slot within the 2-hour lead time on the selected day — not selectable */
.time-chip.is-disabled {
  cursor: not-allowed;
}

.time-chip.is-disabled span,
.time-chip.is-disabled:hover span {
  opacity: 0.4;
  background: var(--warm-white);
  border-color: var(--line);
  color: var(--charcoal);
  text-decoration: line-through;
}

/* Demand/availability disclaimer under the time slots */
.slot-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 36px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.slot-note i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 15px;
  color: var(--bronze);
}

/* ---------- Step 3: Contact form grid ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  max-width: 720px;
  margin: 0 auto;
}

.contact-grid .field {
  display: flex;
  flex-direction: column;
}

.contact-grid .field.full {
  grid-column: 1 / -1;
}

.contact-grid .field label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
}

.contact-grid .field input,
.contact-grid .field textarea {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--warm-white);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--charcoal);
  transition: border-color var(--t-med) var(--ease);
}

.contact-grid .field input:focus,
.contact-grid .field textarea:focus {
  outline: none;
  border-color: var(--bronze);
}

.contact-grid .field textarea {
  min-height: 110px;
  resize: vertical;
  font-family: inherit;
}

@media (max-width: 640px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Step 4: Summary ---------- */
.summary-card {
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--warm-white);
  padding: clamp(24px, 3vw, 36px);
}

.summary-list {
  margin: 0;
  padding: 0;
}

.summary-row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.summary-row:last-child {
  border-bottom: 0;
}

.summary-row dt {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.summary-row dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--charcoal);
  word-break: break-word;
}

.summary-row--note dd {
  font-weight: 400;
  line-height: 1.6;
  color: var(--charcoal-2);
}

/* ---------- Bottom action bar ---------- */
.wizard-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}

.wizard-actions-status {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: #B9433F;
  min-height: 20px;
}

.wizard-actions [data-wizard-prev] {
  justify-self: flex-start;
}

.wizard-actions [data-wizard-prev][disabled] {
  opacity: .35;
  pointer-events: none;
}

.wizard-actions [data-wizard-next],
.wizard-actions [data-wizard-submit] {
  justify-self: flex-end;
  gap: 8px;
}

@media (max-width: 560px) {
  .wizard-actions {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .wizard-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .wizard-actions-status {
    order: -1;
  }
}

/* =============================================================
   Branches — Cinematic Full-Screen Experience
   ============================================================= */
.branches-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

body.page-branches {
  overflow: hidden;
}

html.page-branches-html,
html.page-branches-html body {
  overflow: hidden;
  height: 100vh;
}

.page-branches .header-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(20, 14, 6, 0);
  border-bottom: 0;
  z-index: 51;
}

.page-branches .site-header {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  background: rgba(20, 14, 6, 0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  z-index: 50;
  transition: background var(--t-med) var(--ease), backdrop-filter var(--t-med) var(--ease);
}

.page-branches .site-header.scrolled {
  background: rgba(20, 14, 6, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.page-branches .site-header .brand,
.page-branches .site-header .menu a,
.page-branches .site-header .menu-toggle .bars span,
.page-branches .header-topbar {
  color: var(--warm-white);
}

.page-branches .site-header .menu-toggle .bars span {
  background: var(--warm-white);
}

/* Dark-page variant — transparent glassy button so warm-white bars stay visible */
.page-branches .site-header .menu-toggle {
  background: rgba(255, 253, 248, .08);
  border-color: rgba(255, 253, 248, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.page-branches .site-header .brand-logo {
  filter: brightness(0) invert(1);
}

/* ---------- Sticky chrome (counter + rail) ---------- */
.branches-chrome {
  position: fixed;
  top: 50%;
  right: clamp(20px, 3vw, 40px);
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(28px, 4vw, 48px);
  color: var(--warm-white);
  pointer-events: none;
}

.branches-counter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  letter-spacing: -0.01em;
  pointer-events: auto;
}

.branches-counter-current {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  color: var(--warm-white);
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

.branches-counter-bar {
  position: relative;
  width: 80px;
  height: 1px;
  background: rgba(255, 253, 248, .25);
  overflow: hidden;
}

.branches-counter-fill {
  position: absolute;
  inset: 0;
  background: var(--warm-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

.branches-counter-total {
  font-size: clamp(13px, 1.1vw, 15px);
  color: rgba(255, 253, 248, .55);
  line-height: 1;
}

.branches-rail {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: auto;
}

.branches-rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  opacity: .45;
  transition: opacity .4s ease;
}

.branches-rail-item.is-active {
  opacity: 1;
}

.rail-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--warm-white);
  transition: transform .4s ease;
}

.branches-rail-item.is-active .rail-dot {
  transform: scale(1.6);
  background: var(--bronze);
}

.rail-text {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, .85);
}

/* ---------- Scroll hint ---------- */
.branches-scroll-hint {
  position: fixed;
  bottom: clamp(32px, 5vw, 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--warm-white);
  opacity: 0;
  transition: opacity .8s var(--ease);
  pointer-events: none;
}

.branches-scroll-hint.is-visible {
  opacity: 1;
}

.branches-scroll-hint .hint-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.branches-scroll-hint .hint-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--warm-white) 0%, transparent 100%);
  animation: branches-hint-line 2s infinite;
}

@keyframes branches-hint-line {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ---------- Per-branch stage (full-page slide transition) ---------- */
.branch-stage {
  position: absolute;
  inset: 0;
  height: 100vh;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 1.1s cubic-bezier(.85, 0, .15, 1);
  isolation: isolate;
}

.branch-stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(1.08);
  transition: transform 1.6s cubic-bezier(.2, .65, .3, 1),
    filter 1.4s ease;
  filter: blur(8px) brightness(.65);
}

.branch-stage-bg>img,
.branch-stage-bg>.ph,
.branch-stage-bg>svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.branch-stage.is-visible .branch-stage-bg {
  transform: scale(1);
  filter: blur(0) brightness(.78);
}

.branch-stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(20, 14, 6, .72) 0%, rgba(20, 14, 6, .55) 35%, rgba(20, 14, 6, .25) 65%, rgba(20, 14, 6, .1) 100%),
    linear-gradient(180deg, rgba(20, 14, 6, .45) 0%, transparent 25%, transparent 55%, rgba(20, 14, 6, .7) 100%);
}

/* Massive italic watermark number */
.branch-stage-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(220px, 32vw, 540px);
  line-height: .82;
  color: rgba(255, 253, 248, .07);
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.2s .2s var(--ease),
    transform 1.5s .2s cubic-bezier(.2, .65, .3, 1);
}

.branch-stage.is-visible .branch-stage-num {
  opacity: 1;
}

/* Vertical edge label */
.branch-stage-vlabel {
  position: absolute;
  left: clamp(18px, 2.2vw, 32px);
  top: 50%;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: left center;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, .65);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1s .5s ease;
}

.branch-stage.is-visible .branch-stage-vlabel {
  opacity: 1;
}

.vlabel-divider {
  display: inline-block;
  font-size: 16px;
  color: var(--bronze);
}

/* ---------- Centered content ---------- */
.branch-stage-inner {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: clamp(80px, 10vh, 140px);
  padding-bottom: clamp(80px, 10vh, 140px);
}

.branch-stage-content {
  max-width: 720px;
  color: var(--warm-white);
}

.branch-stage-content--center {
  margin: 0 auto;
  text-align: center;
}

.branch-stage-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

.branch-stage-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 14px;
  opacity: .7;
}

.branch-stage-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(56px, 9vw, 132px);
  line-height: .94;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  color: var(--warm-white, #FFFDF8);
  text-shadow: 0 2px 30px rgba(20, 14, 6, .55), 0 1px 2px rgba(20, 14, 6, .35);
}

.branch-stage-title--center {
  max-width: 14ch;
  margin: 0 auto;
  font-size: clamp(44px, 6.5vw, 96px);
}

.branch-stage-title .italic-accent {
  display: inline-block;
  position: relative;
  color: var(--bronze);
  margin-left: 6px;
}

.branch-stage-rule {
  width: 80px;
  height: 1px;
  background: rgba(255, 253, 248, .5);
  margin: clamp(28px, 3.5vw, 44px) 0 clamp(24px, 3vw, 32px);
  transform-origin: left;
}

.branch-stage-address {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  color: rgba(255, 253, 248, .9);
  max-width: 38ch;
  margin: 0 0 clamp(32px, 4vw, 48px);
}

.branch-stage-address--center {
  margin-left: auto;
  margin-right: auto;
}

.branch-stage-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  margin-bottom: clamp(36px, 4vw, 48px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid rgba(255, 253, 248, .15);
}

.branch-stage-meta dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, .55);
  margin-bottom: 8px;
  font-weight: 500;
}

.branch-stage-meta dt i {
  font-size: 14px;
  color: var(--bronze);
}

.branch-stage-meta dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--warm-white);
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.branch-stage-meta dd a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-med) var(--ease);
}

.branch-stage-meta dd a:hover {
  color: var(--bronze);
}

.branch-stage-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.branch-stage-actions .btn {
  gap: 8px;
}

/* Light outline — matches .btn-bronze typography (uppercase, tight letter-spacing) for hero pairing */
.btn-outline--light {
  background: transparent;
  border: 1px solid rgba(255, 253, 248, .55);
  color: var(--warm-white);
}

.btn-outline--light:hover {
  background: rgba(255, 253, 248, .12);
  border-color: var(--warm-white);
  color: var(--warm-white);
}

/* ---------- Staggered entrance animations ---------- */
[data-stage-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s cubic-bezier(.2, .7, .2, 1),
    transform 1s cubic-bezier(.2, .7, .2, 1);
}

.branch-stage.is-visible [data-stage-anim="1"] {
  transition-delay: .25s;
  opacity: 1;
  transform: translateY(0);
}

.branch-stage.is-visible [data-stage-anim="2"] {
  transition-delay: .42s;
  opacity: 1;
  transform: translateY(0);
}

.branch-stage.is-visible [data-stage-anim="3"] {
  transition-delay: .58s;
  opacity: 1;
  transform: scaleX(1) translateY(0);
  transform-origin: left;
}

.branch-stage.is-visible [data-stage-anim="4"] {
  transition-delay: .68s;
  opacity: 1;
  transform: translateY(0);
}

.branch-stage.is-visible [data-stage-anim="5"] {
  transition-delay: .82s;
  opacity: 1;
  transform: translateY(0);
}

.branch-stage.is-visible [data-stage-anim="6"] {
  transition-delay: .96s;
  opacity: 1;
  transform: translateY(0);
}

[data-stage-anim="3"] {
  transform: scaleX(.2) translateY(20px);
}

/* ---------- Map stage (final) — full-bleed Leaflet ---------- */
.branch-stage--map {
  background: var(--ivory);
}

.branch-stage--map #contact-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.branch-stage--map .branch-stage-vlabel {
  color: rgba(40, 28, 14, .55);
  z-index: 30;
}

.branch-stage--map .branch-stage-vlabel .vlabel-divider {
  color: var(--bronze);
}

/* Map-stage chrome adjustments — hide header/topbar, show footer */
body.page-branches .site-footer {
  display: none;
}

body.is-map-stage .header-topbar,
body.is-map-stage .site-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s var(--ease), visibility 0s .4s;
}

html.page-branches-html.is-map-stage {
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  scroll-behavior: smooth;
}

html.page-branches-html.is-map-stage body {
  overflow: visible;
  height: auto;
}

html.page-branches-html.is-map-stage .branches-stage {
  height: 100vh;
  overflow: visible;
}

body.is-map-stage .site-footer {
  display: block;
  position: relative;
  z-index: 5;
}

body.is-map-stage .branches-chrome {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s var(--ease), visibility 0s .4s;
}

@keyframes footer-rise {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .branches-chrome {
    right: clamp(14px, 3vw, 20px);
    gap: 24px;
  }

  .branches-counter-bar {
    width: 48px;
  }

  .branches-rail {
    gap: 10px;
  }

  .rail-text {
    display: none;
  }

  .branch-stage-vlabel {
    left: 14px;
    font-size: 9.5px;
    letter-spacing: 0.32em;
  }

  .branch-stage-title {
    font-size: clamp(48px, 12vw, 84px);
  }

  .branch-stage-num {
    font-size: clamp(180px, 50vw, 320px);
  }

  .branches-scroll-hint {
    bottom: 24px;
  }

  .branches-scroll-hint .hint-line {
    height: 30px;
  }
}

@media (max-width: 560px) {
  .branch-stage-meta {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .branch-stage-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .branch-stage-actions .btn {
    justify-content: center;
  }

  /* Tame the giant side watermark on phones; hide the "Kaydır" hint since
     touch users will swipe naturally between stages. */
  .branch-stage-num {
    font-size: clamp(120px, 35vw, 160px);
    opacity: .55;
  }

  .branches-scroll-hint {
    display: none;
  }

  .branch-stage-title {
    font-size: clamp(40px, 11vw, 56px);
  }

  /* Drop the right-side counter + rail on phones — they overlap content and
     touch users navigate stages via vertical swipe naturally. */
  .branches-chrome {
    display: none;
  }

  /* Tighten the vertical breathing room inside each stage on phones */
  .branch-stage-inner {
    padding-top: clamp(90px, 14vh, 130px);
    padding-bottom: clamp(60px, 10vh, 90px);
  }
}

/* ---------- Duration picker (Step 1) — appears for multi-duration services ---------- */
.svc-duration-zone {
  margin-top: clamp(28px, 3vw, 36px);
  padding: clamp(24px, 3vw, 32px);
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 100px;
  /* leave room under sticky header on scrollIntoView */
}

.svc-duration-zone::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--bronze);
}

/* Attention burst — restarts each time a multi-duration service is picked.
   Combines a slide-up reveal with a brief glowing pulse around the panel. */
.svc-duration-zone.is-attention {
  animation: svcDurationReveal .5s cubic-bezier(.2, .65, .3, 1),
    svcDurationPulse 1.6s ease-out .15s;
}

@keyframes svcDurationReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes svcDurationPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(168, 121, 70, .42);
  }

  60% {
    box-shadow: 0 0 0 18px rgba(168, 121, 70, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(168, 121, 70, 0);
  }
}

.svc-duration-zone-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  margin: 8px 0 6px;
  color: var(--charcoal);
}

.svc-duration-zone-head p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  letter-spacing: 0.02em;
}

.svc-duration-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.svc-duration-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.svc-duration-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.svc-duration-chip span {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--charcoal-2, var(--charcoal));
  background: transparent;
  transition: background var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
  font-variant-numeric: tabular-nums;
}

.svc-duration-chip:hover span {
  border-color: var(--bronze);
  color: var(--bronze);
}

.svc-duration-chip:has(input:checked) span,
.svc-duration-chip.is-checked span {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--warm-white);
}

/* ---------- Service preview modal (reservation Step 1 info-card) ---------- */
.svc-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.svc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 6, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: svcModalFade .3s ease forwards;
  cursor: pointer;
}

.svc-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--warm-white);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 80px rgba(20, 14, 6, .3),
    0 0 0 1px rgba(168, 121, 70, .1);
  opacity: 0;
  transform: translateY(20px) scale(.96);
  animation: svcModalPop .4s cubic-bezier(.2, .65, .3, 1) .05s forwards;
}

.svc-modal-body {
  padding: clamp(28px, 4vw, 36px);
}

@media (max-width: 480px) {
  .svc-modal-body {
    padding: 22px 18px 20px;
  }
}

/* Media at top of modal — full-bleed image with subtle bottom fade */
.svc-modal-media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ivory-2);
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
}

.svc-modal-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  animation: svcModalImg .9s cubic-bezier(.2, .65, .3, 1) .15s forwards;
  z-index: 2;
}

@keyframes svcModalImg {
  to {
    transform: scale(1);
  }
}

.svc-modal-media-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 25%;
  background: linear-gradient(180deg, transparent, rgba(255, 253, 248, .45));
  pointer-events: none;
  z-index: 3;
}

/* Only show the fade when the branded placeholder is active (to soften the
   transition from gradient to body). For real photos, drop it entirely so the
   image is presented at full fidelity. */
.svc-modal-media:not(.is-placeholder) .svc-modal-media-fade {
  display: none;
}

/* Branded placeholder when service has no image — bronze gradient + icon */
.svc-modal-media-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 253, 248, .35), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(110, 70, 40, .25), transparent 60%),
    linear-gradient(135deg, var(--champagne, #F2E2C2) 0%, var(--bronze) 100%);
  color: var(--warm-white);
  z-index: 1;
  opacity: 0;
  transform: scale(.96);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.svc-modal-media-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 253, 248, .14) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 0 0;
  mix-blend-mode: overlay;
  opacity: .6;
}

.svc-modal-media-ph i {
  position: relative;
  font-size: 48px;
  filter: drop-shadow(0 4px 14px rgba(20, 14, 6, .35));
  animation: svcModalPhPulse 2.6s ease-in-out infinite;
}

@keyframes svcModalPhPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .92;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.svc-modal-media.is-placeholder .svc-modal-media-ph {
  opacity: 1;
  transform: scale(1);
}

/* (Adaptive close-button rules removed — base rule now always-visible) */

@keyframes svcModalFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes svcModalPop {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.svc-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--warm-white);
  color: var(--charcoal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(20, 14, 6, .25),
    0 0 0 1px rgba(20, 14, 6, .06);
  transition: background var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
  z-index: 5;
}

.svc-modal-close:hover {
  background: var(--bronze);
  color: var(--warm-white);
  border-color: var(--bronze);
  transform: rotate(90deg);
}

.svc-modal-close i {
  font-size: 16px;
}

.svc-modal-cat {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 600;
  margin-bottom: 14px;
}

.svc-modal-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: var(--charcoal);
  text-wrap: balance;
  padding-right: 40px;
}

.svc-modal-duration {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
  padding: 5px 12px;
  background: var(--ivory-2);
  border-radius: 999px;
}

.svc-modal-duration i {
  font-size: 14px;
  color: var(--bronze);
}

.svc-modal-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--charcoal-2, var(--charcoal));
  margin: 0 0 28px;
}

.svc-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.svc-modal-actions .btn {
  flex: 1 1 auto;
}

@media (max-width: 480px) {
  .svc-modal-card {
    padding: 28px 22px;
  }

  .svc-modal-title {
    padding-right: 38px;
  }

  .svc-modal-actions .btn {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ============================================================
   Mobile App Bar — fixed bottom nav (5 tabs, center is rezervasyon)
   ============================================================ */
.app-bar {
  display: none;
}

@media (max-width: 640px) {
  .app-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--warm-white);
    border-top: 1px solid var(--line);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 28px -10px rgba(20, 14, 6, .12);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
  }

  /* Push page content above the bar (68px ≈ bar height + safe area) */
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }
}

.app-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 4px;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-align: center;
  transition: color var(--t-med) var(--ease);
  min-width: 0;
}

.app-bar-item i {
  font-size: 22px;
  line-height: 1;
  transition: transform var(--t-med) var(--ease);
}

.app-bar-item:hover,
.app-bar-item.is-active {
  color: var(--bronze);
}

.app-bar-item:hover i,
.app-bar-item.is-active i {
  transform: translateY(-2px);
}

/* Center "Rezervasyon" — bronze disc that floats slightly above the bar */
.app-bar-item--primary {
  position: relative;
  color: var(--charcoal);
}

.app-bar-primary-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--bronze);
  color: var(--warm-white);
  box-shadow: 0 6px 16px -4px rgba(110, 70, 40, .42),
    0 0 0 4px var(--warm-white);
  transition: background var(--t-med) var(--ease),
    transform var(--t-med) var(--ease);
}

.app-bar-primary-disc i {
  font-size: 22px;
  line-height: 1;
}

.app-bar-item--primary:hover .app-bar-primary-disc,
.app-bar-item--primary.is-active .app-bar-primary-disc {
  background: var(--bronze-deep);
  transform: translateY(-2px);
}

.app-bar-item--primary:hover,
.app-bar-item--primary.is-active {
  color: var(--bronze);
}

/* Hide the bar when mobile-nav menu is open (it would peek above) */
body.menu-open .app-bar {
  visibility: hidden;
}

/* ---------- Skip-to-content link (a11y) ---------- */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}

.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 12px 18px;
  background: var(--bronze);
  color: #fff;
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 600;
}

/* ---------- Cookie / KVKK consent banner ---------- */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}

.cookie-consent[hidden] {
  display: none !important;
}

.cookie-consent-inner {
  pointer-events: auto;
  max-width: 920px;
  margin: 0 auto;
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 20px 60px rgba(20, 14, 6, .18);
  animation: cookie-consent-in .35s ease both;
}

@keyframes cookie-consent-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cookie-consent-body h3 {
  margin: 0 0 4px;
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--charcoal);
}

.cookie-consent-body p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.cookie-consent-body a {
  color: var(--bronze-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .cookie-consent-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 18px;
  }

  .cookie-consent-actions {
    width: 100%;
  }

  .cookie-consent-actions .btn {
    flex: 1;
  }
}

/* ---------- Reservation Thank-You page ---------- */
.thanks-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}

.thanks-check {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bronze), var(--bronze-deep));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 12px 30px rgba(168, 121, 70, .35);
  margin-bottom: 8px;
  animation: thanks-pop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes thanks-pop {
  from {
    transform: scale(.4);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.thanks-card {
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 44px);
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 18px 50px rgba(20, 14, 6, .08);
}

.thanks-card-head {
  margin-bottom: 24px;
}

.thanks-card-head h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.4vw, 30px);
}

.thanks-card-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.thanks-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 28px;
  border-top: 1px solid var(--line-soft);
}

.thanks-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.thanks-row dt {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.thanks-row dd {
  margin: 0;
  font-weight: 500;
  color: var(--charcoal);
  text-align: right;
}

.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.thanks-foot {
  margin: 28px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  max-width: 580px;
}

.thanks-foot a {
  color: var(--bronze-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 600px) {
  .thanks-actions {
    justify-content: stretch;
  }

  .thanks-actions .btn {
    flex: 1;
  }

  .thanks-row {
    flex-direction: column;
    gap: 4px;
  }

  .thanks-row dd {
    text-align: left;
  }
}

/* ---------- Error pages (404 + 500) — brand aligned ---------- */
.error-page {
  padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 10vw, 120px);
  background: var(--warm-white);
}

.error-page-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.error-page-decor {
  width: 110px;
  height: 110px;
  color: var(--bronze);
  opacity: 0.7;
  margin-bottom: 8px;
}

.error-page-decor svg {
  width: 100%;
  height: 100%;
}

.error-page-inner h1 {
  font-size: clamp(34px, 5vw, 60px);
  margin: 0;
  text-wrap: balance;
  max-width: 14ch;
  line-height: 1.06;
}

.error-page-inner .lede {
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
}

.error-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}

.error-quick {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.error-quick a {
  color: var(--bronze-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Legal pages (KVKK, Privacy, Cookies) ---------- */
.legal-content {
  line-height: 1.85;
  color: var(--charcoal-2);
}

.legal-content h2 {
  margin-top: 32px;
  font-size: clamp(22px, 2.4vw, 28px);
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content h3 {
  margin-top: 18px;
  font-size: 18px;
}

.legal-content p,
.legal-content ul {
  margin-bottom: 12px;
}

.legal-content ul {
  padding-left: 22px;
}

.legal-content ul li {
  margin-bottom: 6px;
}

.legal-foot {
  margin-top: 32px;
}

.legal-fine {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}

/* ============================================================
   Print stylesheet — hide site chrome, show only content
   ============================================================ */
@media print {

  .site-header,
  .header-topbar,
  .mobile-nav,
  .app-bar,
  .wa-float,
  .site-footer .footer-bottom,
  .cookie-consent,
  .skip-link,
  .breadcrumbs,
  [data-screen-label]::after {
    display: none !important;
  }

  /* Cancel any body padding-bottom reserved for the mobile app-bar */
  body {
    padding-bottom: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  /* Reveal-animated elements: show as final state */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Avoid page-breaks in awkward spots */
  h1,
  h2,
  h3,
  h4 {
    page-break-after: avoid;
  }

  img,
  table {
    page-break-inside: avoid;
  }

  /* Make links printable */
  a {
    color: #000 !important;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: "";
  }

  /* Hero background images don't print — drop them */
  .hero-bg,
  .hero::before,
  .branch-stage-bg img {
    display: none !important;
  }

  .hero {
    min-height: auto !important;
    padding: 20pt 0 !important;
  }
}