/* ============================================================
   Kekova Island Boat Tour
   Direction: "waterline" — the page is split by the surface of
   the sea. Above it: air, stone, clarity. Below it: depth.
   ============================================================ */

:root {
  /* palette */
  --deep:        #062a3d;   /* deep sea — primary dark ground */
  --deeper:      #041c2a;   /* trench — footer, overlays */
  --aegean:      #1c7b93;   /* mid water */
  --shallow:     #4fc3d9;   /* sunlit shallow — accent, links */
  --shallow-dim: #2e93ae;
  --stone:       #c9b28a;   /* Lycian limestone — secondary accent */
  --stone-deep:  #a68a5e;
  --terracotta:  #d4664a;   /* CTA warmth, sunset */
  --hull:        #f7f4ed;   /* hull white — light ground */
  --hull-warm:   #efe9dd;
  --ink:         #0d1f28;
  --ink-soft:    #46606c;

  /* type */
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* metrics */
  --measure: 68ch;
  --shell: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 3px;

  /* spacing scale */
  --s1: 0.5rem;
  --s2: 0.875rem;
  --s3: 1.25rem;
  --s4: 2rem;
  --s5: 3rem;
  /* the lower bounds are deliberately below the vw term: at 390px, 8vw is 31px
     and 12vw is 47px, so a taller floor would pin every section to it and mobile
     would inherit desktop's breathing room. the vw factors and upper bounds are
     unchanged, so layouts above ~940px are untouched. */
  --s6: clamp(2.25rem, 8vw, 6.5rem);
  --s7: clamp(3rem, 12vw, 9rem);

  --header-h: 68px;
  --tap: 44px;          /* WCAG 2.5.8 minimum target */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hull);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
/* <picture> is inline by default, which breaks the percentage-height chain
   in .hero-media and .gallery-item — make it transparent to layout. */
picture { display: contents; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.08; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--shallow);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 200;
  background: var(--deep); color: var(--hull);
  padding: 0.75rem 1.25rem; border-radius: var(--radius);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* ---------------------------------------------------------- type helpers */
.eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--aegean);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: var(--s3);
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--stone-deep);
  flex: none;
}
.on-dark .eyebrow { color: var(--shallow); }
.on-dark .eyebrow::before { background: var(--stone); }

.section-title {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem);
  letter-spacing: -0.022em;
  max-width: 22ch;
}
.section-lede {
  margin-top: var(--s3);
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.on-dark .section-lede { color: rgba(247, 244, 237, 0.72); }

section { padding-block: var(--s7); }

/* the header is fixed, so anchored sections must clear it */
section[id], [id='top'] { scroll-margin-top: calc(var(--header-h) + var(--s3)); }

/* ---------------------------------------------------------- header */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(4, 28, 42, 0.62), rgba(4, 28, 42, 0));
  opacity: 1;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.header.is-stuck {
  background: rgba(6, 42, 61, 0.94);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 rgba(201, 178, 138, 0.22);
}
.header.is-stuck::before { opacity: 0; }

.header-inner {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s4);
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--hull);
  flex: none;
  margin-right: auto;
}
/* The logo's own box is 28px tall, below the 44px touch minimum in both the
   header and the footer. Growing the hit area only, so the mark and wordmark
   stay put; desktop keeps the tight header. */
@media (pointer: coarse) { .brand { min-height: var(--tap); } }
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-mark path, .brand-mark line { vector-effect: non-scaling-stroke; }
.brand-text { display: flex; flex-direction: column; line-height: 1.06; }
.brand-name {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
}

.nav { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.7rem); }
.nav a {
  text-decoration: none;
  color: rgba(247, 244, 237, 0.86);
  font-size: 0.855rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.35rem 0;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--shallow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: #fff; }

.header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }

/* ---------------------------------------------------------- language widget */
.lang {
  position: relative;
  flex: none;
}
.lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(247, 244, 237, 0.1);
  border: 1px solid rgba(201, 178, 138, 0.38);
  color: var(--hull);
  padding: 0.44rem 0.7rem;
  min-height: var(--tap);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
}
.lang-toggle:hover { background: rgba(247, 244, 237, 0.19); border-color: var(--stone); }
.lang-flag { font-size: 1rem; line-height: 1; }
.lang-code { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.72rem; font-weight: 600; }
.lang-caret {
  width: 9px; height: 9px;
  transition: transform 0.28s var(--ease);
  opacity: 0.75;
}
.lang.is-open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 194px;
  background: var(--hull);
  border: 1px solid rgba(6, 42, 61, 0.14);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -12px rgba(4, 28, 42, 0.44);
  padding: 0.3rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 120;
}
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: var(--tap);
  padding: 0.55rem 0.65rem;
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
  color: var(--ink);
  transition: background 0.15s;
}
.lang-option:hover { background: var(--hull-warm); }
.lang-option[aria-selected='true'] { background: rgba(28, 123, 147, 0.11); font-weight: 600; }
.lang-native { flex: 1; }
.lang-check { width: 13px; height: 13px; color: var(--aegean); opacity: 0; flex: none; }
.lang-option[aria-selected='true'] .lang-check { opacity: 1; }

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary { background: var(--terracotta); color: #fff; }
.btn-primary:hover { background: #c0563c; }

.btn-ghost {
  background: transparent;
  border-color: rgba(247, 244, 237, 0.42);
  color: var(--hull);
}
.btn-ghost:hover { border-color: var(--hull); background: rgba(247, 244, 237, 0.1); }

.btn-solid { background: var(--deep); color: var(--hull); }
.btn-solid:hover { background: var(--deeper); }

.btn-outline { background: transparent; border-color: rgba(6, 42, 61, 0.28); color: var(--deep); }
.btn-outline:hover { border-color: var(--deep); background: rgba(6, 42, 61, 0.05); }

.btn-wa { background: #25d366; color: #06301a; }
.btn-wa:hover { background: #1fb857; }

.btn-sm { padding: 0.56rem 1rem; font-size: 0.82rem; }
@media (pointer: coarse) { .btn-sm { min-height: var(--tap); } }

/* one "Book a tour" per breakpoint: drawer below 940px, header actions above */
.nav-book { display: none; }
.header-actions .btn-primary { display: none; }
@media (min-width: 940px) { .header-actions .btn-primary { display: inline-flex; } }

/* ---------------------------------------------------------- burger */
.burger {
  display: grid;
  place-items: center;
  width: var(--tap); height: var(--tap);
  background: rgba(247, 244, 237, 0.1);
  border: 1px solid rgba(201, 178, 138, 0.38);
  border-radius: var(--radius);
  cursor: pointer;
  flex: none;
}
.burger span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--hull);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.burger span + span { margin-top: 4px; }
body.nav-open .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (min-width: 940px) { .burger { display: none; } }

/* ---------------------------------------------------------- hero */
.hero {
  position: relative;
  /* just under a full screen, so the section boundary below peeks in and the
     page reads as scrollable; svh already accounts for mobile browser chrome */
  min-height: min(92svh, 940px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + var(--s6)) 0 var(--s6);
  background: var(--deep);
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.06);
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.4%, -1.6%, 0); }
}
/* Two gradients: one darkening upward, one darkening leftward.
   The horizontal one carries the contrast. The title sits in the left half,
   so darkening THERE buys legibility without flattening the photograph — the
   right side stays near-clear and the boat, its name and the hillside remain
   visible. An even, all-over scrim strong enough for the text turned the
   whole frame murky and wasted the point of a sunlit photo.
   Measured, not guessed (worst-case pixel behind the text, not the average —
   an average of 12:1 hid patches at 2.5:1):
     .hero-title  desktop 5.01:1  mobile 5.81:1   (AA 4.5 — passes)
   The .hero-lede reads ~2.3:1 at its worst on desktop, but that pixel is the
   animated .waterline crossing behind it, not the photo; the line is a 2px
   decorative accent over a 13:1 average and does not impede reading.
   If the hero frame is ever replaced, RE-MEASURE: a brighter frame moves the
   worst case, not the average. The previous, darker hero failed this same
   test at 2.24:1, so the weakness was in the scrim, never in one photo. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to top, rgba(4, 28, 42, 0.96) 0%, rgba(4, 28, 42, 0.84) 34%, rgba(6, 42, 61, 0.5) 66%, rgba(6, 42, 61, 0.56) 100%),
    linear-gradient(to right, rgba(4, 28, 42, 0.82), rgba(4, 28, 42, 0.05) 60%);
}

/* the signature: an animated waterline crossing the hero */
.waterline {
  position: absolute;
  left: 0; right: 0;
  bottom: 30%;
  height: 2px;
  z-index: -1;
  pointer-events: none;
}
.waterline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(79, 195, 217, 0.85) 12%, rgba(201, 178, 138, 0.72) 50%, rgba(79, 195, 217, 0.85) 88%, transparent);
  filter: blur(0.3px);
}
.waterline-svg {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 200%;
  height: 34px;
  color: rgba(79, 195, 217, 0.4);
  animation: swell 13s linear infinite;
}
@keyframes swell { to { transform: translateX(-50%); } }

.hero-content { position: relative; }
.hero-title {
  font-size: clamp(2.7rem, 1.4rem + 6vw, 6.2rem);
  color: var(--hull);
  letter-spacing: -0.035em;
  font-weight: 600;
  max-width: 15ch;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span {
  display: block;
  animation: riseIn 1s var(--ease) backwards;
}
.hero-title .line:nth-child(1) > span { animation-delay: 0.15s; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.28s; }
.hero-title .sunk {
  font-style: italic;
  color: var(--shallow);
}
@keyframes riseIn { from { transform: translateY(105%); } to { transform: translateY(0); } }

.hero .eyebrow {
  color: var(--stone);
  animation: fadeUp 0.9s var(--ease) 0.05s backwards;
}
.hero .eyebrow::before { background: var(--stone); }

.hero-lede {
  margin-top: var(--s4);
  max-width: 52ch;
  color: rgba(247, 244, 237, 0.86);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  animation: fadeUp 0.9s var(--ease) 0.42s backwards;
}
.hero-cta {
  margin-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  animation: fadeUp 0.9s var(--ease) 0.55s backwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.hero-scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s5);
  display: none;
  align-items: center;
  gap: 0.7rem;
  writing-mode: vertical-rl;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 244, 237, 0.6);
  text-decoration: none;
}
.hero-scroll::after {
  content: '';
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--stone), transparent);
  animation: dropline 2.4s ease-in-out infinite;
}
@keyframes dropline { 0%, 100% { transform: scaleY(0.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
@media (min-width: 1100px) { .hero-scroll { display: flex; } }

/* ---------------------------------------------------------- intro */
.intro { background: var(--hull); }
.intro-grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 920px) {
  .intro-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s7); }
}
.intro-body { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.intro-body p { color: var(--ink-soft); max-width: 54ch; }
.intro-pull {
  margin-top: var(--s3);
  padding-left: var(--s3);
  border-left: 2px solid var(--stone);
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--deep);
  max-width: 30ch;
}
.intro-figure { position: relative; margin: 0; }
.intro-figure img {
  width: 100%;
  /* the width/height attributes reserve space before the image lands, but they
     also resolve a used height — without height:auto that wins and the
     aspect-ratio below is silently ignored, stretching the figure to the
     attribute's 852px. same applies to .boat-figure. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.intro-figure::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(6, 42, 61, 0.55), transparent);
  border-radius: var(--radius);
  pointer-events: none;
}
.figure-caption {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  z-index: 2;
  color: var(--hull);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- captain */
/* Sits between the intro and the tours: what you read before choosing a tour.
   No photograph yet — the section is text until the captain's own frames land,
   so the copy carries it and the three facts give the eye somewhere to stop. */
/* --hull-warm, not --hull: the intro above is --hull and the tours below are
   --deep, so the warm tint keeps the light-section rhythm going (same
   alternation as .boat and .faq) instead of reading as one long pale block. */
.captain { background: var(--hull-warm); }
.captain .shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 900px) {
  /* Photo left, copy right, facts BACK UNDER THE PHOTO — not under the copy.
     The face leads because "who takes you out" is what the section answers
     and the site had no face at all until now; but the copy is much taller
     than the photo, so letting the facts follow the copy left a dead column
     under the image. Stacking them below the photo fills it and keeps both
     columns roughly level. */
  .captain .shell {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: var(--s4) var(--s6);
    align-items: start;
  }
  .captain-figure { grid-column: 1; grid-row: 1; }
  .captain-copy   { grid-column: 2; grid-row: 1 / span 2; }
  .captain-facts  { grid-column: 1; grid-row: 2; }
}
.captain-figure { margin: 0; }
.captain-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  /* the portrait crop is tall; cap it so it cannot push the copy off-screen
     on a phone */
  max-height: 68vh;
  object-fit: cover;
}
.captain-copy { max-width: 62ch; }
.captain-copy p { color: var(--ink-soft); margin-top: var(--s3); }
.captain-copy .section-title { margin-top: var(--s2); }

.captain-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: rgba(6, 42, 61, 0.14);
  border: 1px solid rgba(6, 42, 61, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
  align-self: start;
}
.captain-facts li {
  background: var(--hull);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.captain-facts h3 {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  /* German runs long here ("Niederländisch", "Muttersprache") and the wrapper
     has overflow:hidden, so an unbreakable word would be clipped silently —
     scrollWidth stays clean and only a screenshot shows it. Same reasoning as
     .feature h3 below. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.captain-facts p { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------------------------------------------------------- the day */
/* Replaced the tours block. There is no card grid any more: the section is a
   lede, two rules and a price sentence, so it needs far less than the five
   cards did. The place cards that used to sit under "the region" carry the
   visual weight now, which is the right order — a guest reading this wants to
   know how a day is agreed, then what is out there. */
/* Dolgu global --s7'de KALIYOR, bilerek. Bir ara --s6'ya cekilmisti (bolum
   kisa, bos gorunuyordu) ama olcum bunun daha kotu oldugunu gosterdi:
   1280px'te butun bolumler 144px nefes alirken bu 102px aliyordu ve sayfayi
   asagi kaydirirken ritim tam burada tokezliyordu. Bolumun kisa olmasi
   sorun degil — ic duzen iki sutuna alindi (asagiya bak), bosluk oradan
   kapandi. Ritmi tek bolum icin bozma. */
.day { background: var(--deep); color: var(--hull); }
.day-head { max-width: var(--measure); }
.day-head .section-title { color: var(--hull); }

/* The two rules are the only hard facts in the section, so they are set apart
   from the lede rather than buried in it. Bordered, not boxed: a box would
   read as a callout competing with the section title. */
.day-rules {
  margin-top: var(--s5);
  display: grid;
  gap: var(--s3);
  max-width: 68ch;
}
@media (min-width: 860px) {
  .day-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); max-width: none; }
}

/* Genis ekranda lede tek basina sol yariyi tutup sagi bos birakiyordu —
   olcum: 1280px'te satir uzunlugu --measure ile sinirli oldugu icin sagda
   ~45% bos alan kaliyordu. Iki sutun: solda lede, sagda iki kural. Ayni
   okuma sirasi (once neden, sonra kurallar), daha az bos kutu. */
@media (min-width: 1100px) {
  .day .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s6);
    align-items: start;
  }
  .day-head { grid-column: 1; }
  .day-rules {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: 1fr;
    margin-top: 0;
    gap: var(--s4);
  }
  .day-price { grid-column: 1; margin-top: var(--s4); }
}
.day-rule {
  padding-left: var(--s3);
  border-left: 2px solid rgba(201, 178, 138, 0.4);
  color: rgba(247, 244, 237, 0.78);
  font-size: 0.95rem;
}

/* The price sentence. No figure is given here and none is on the page —
   TouristTrip.price is deliberately absent too. Saying "it depends, write to
   us" is not a dodge: it is the actual pricing model, and it answers the
   question a guest already has instead of making them scroll to #contact. */
.day-price {
  margin-top: var(--s5);
  max-width: var(--measure);
  color: rgba(201, 178, 138, 0.9);
  font-size: 0.95rem;
}

/* The hero's second gate: one line under the buttons, pointing walkers at
   their own page. Deliberately quiet — it is a signpost for one audience,
   not a third call to action for everyone. */
.hero-lycian {
  margin-top: var(--s3);
  font-size: 0.92rem;
}
.hero-lycian a {
  color: rgba(247, 244, 237, 0.82);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(201, 178, 138, 0.6);
  display: inline-block;
  min-height: var(--tap);
  line-height: var(--tap);
}
.hero-lycian a:hover { color: var(--stone); }

/* ---------------------------------------------------------- boat */
.boat { background: var(--hull-warm); }
.boat-top {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  align-items: center;
  margin-bottom: var(--s6);
}
@media (min-width: 920px) { .boat-top { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.boat-figure { margin: 0; }
.boat-figure img {
  width: 100%;
  height: auto;          /* see .intro-figure img — attribute height beats aspect-ratio */
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius);
}
.boat-copy p { margin-top: var(--s3); color: var(--ink-soft); max-width: 50ch; }

/* Hard numbers, set apart from the prose. These four (length, decks, licensed
   capacity, recommended capacity) are the questions that used to be answered
   only in an FAQ paragraph or not at all. */
.boat-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--s4);
  background: rgba(6, 42, 61, 0.14);
  border: 1px solid rgba(6, 42, 61, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 560px) { .boat-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.boat-specs > div { background: var(--hull); padding: var(--s3) var(--s2); text-align: center; }
.boat-specs dt {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.boat-specs dd {
  margin: 0.3rem 0 0;
  font-family: var(--display);
  font-size: 1.06rem;
  color: var(--deep);
  overflow-wrap: anywhere;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 1px;
  background: rgba(6, 42, 61, 0.14);
  border: 1px solid rgba(6, 42, 61, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
}
.feature {
  background: var(--hull);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background 0.25s;
}
/* 248px never fits twice in a 350px content box, so all six features stack into
   a single column. two-up halves that; the padding comes down with it because
   --s4 is generous for a ~175px card. */
@media (max-width: 620px) {
  /* minmax(0, ...) not 1fr: a grid item's automatic minimum size is its longest
     unbreakable word, so German ("Schnorchelausrüstung", 186px) would push its
     track past the 175px share and the grid's overflow:hidden would silently
     clip it — scrollWidth stays clean, so only a screenshot shows it. The 0
     floor lets the track shrink; overflow-wrap then breaks the word instead. */
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { padding: var(--s3); }
  .feature h3 { overflow-wrap: anywhere; hyphens: auto; }
}
.feature:hover { background: #fff; }
.feature svg { width: 22px; height: 22px; color: var(--aegean); margin-bottom: 0.35rem; }
.feature h3 { font-size: 1.08rem; letter-spacing: -0.01em; }
.feature p { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------------------------------------------------------- route */
.route { background: var(--hull); }
.route-head { margin-bottom: var(--s5); }

/* ---- the map ---- */
/* Inlined SVG, so the points can be focused and clicked. The whole figure is
   decorative-plus-informative: the <title>/<desc> inside the SVG carry the
   geography for screen readers, and every point is also a real card below, so
   nothing here is the only route to the information. */
.region-map {
  margin: 0 0 var(--s5);
  border: 1px solid rgba(6, 42, 61, 0.16);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--deep);
}
.region-map-svg { display: block; width: 100%; height: auto; }

/* Under ~700px the map collapses to ~348x179: labels render at 9px and the
   point hit areas drop to ~28px, below the 44px --tap contract. Shrinking the
   type further would make it decorative. Instead the SVG keeps a usable
   minimum width and the figure scrolls sideways — the cards below carry every
   fact, so a guest who never scrolls the map loses nothing. */
@media (max-width: 699px) {
  .region-map-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .region-map-svg { width: 620px; max-width: none; }
}

.region-map-hint {
  padding: 0.7rem var(--s3);
  font-size: 0.82rem;
  color: rgba(247, 244, 237, 0.55);
  border-top: 1px solid rgba(201, 178, 138, 0.16);
}

/* Points: the hit area is a transparent circle far larger than the dot, so a
   thumb can land on it — the visible dot is only 10-13px and --tap cannot
   apply to SVG geometry. */
.map-pt { cursor: pointer; }
.map-pt .map-dot,
.map-pt .map-ring,
.map-pt .map-halo { transition: transform 0.25s ease, opacity 0.25s ease; transform-origin: center; transform-box: fill-box; }
.map-pt:hover .map-halo,
.map-pt:focus-visible .map-halo,
.map-pt.is-active .map-halo { opacity: 0.3; transform: scale(1.25); }
.map-pt:hover .map-dot,
.map-pt:focus-visible .map-dot,
.map-pt.is-active .map-dot { transform: scale(1.3); }
.map-pt:focus { outline: none; }
.map-pt:focus-visible .map-ring { stroke-width: 3; }
.map-pt.is-active .map-ring { stroke-width: 2.6; }

/* ---- place cards ---- */
/* No numbers, deliberately: a numbered list reads as a fixed itinerary and
   the whole point is that the order is agreed per trip. */
.place-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 700px)  { .place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.place {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(6, 42, 61, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--hull-warm);
  scroll-margin-top: calc(var(--header-h) + var(--s4));
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* set by the map when a point is chosen; fades on its own so the page does
   not keep a highlight the reader has moved on from */
.place.is-lit {
  border-color: var(--shallow);
  box-shadow: 0 0 0 2px rgba(127, 212, 232, 0.28);
}
.place-media { margin: 0; aspect-ratio: 16 / 9; background: var(--stone); }
.place-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-body { padding: var(--s3); display: flex; flex-direction: column; gap: 0.45rem; }
.place-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.place-head h3 {
  font-size: 1.12rem;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.place-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep);
  background: rgba(127, 212, 232, 0.3);
  padding: 0.2rem 0.45rem;
  border-radius: 2px;
  white-space: nowrap;
}
.place-body p { color: var(--ink-soft); font-size: 0.93rem; }
/* the two places with no photograph sit flush with the rest of the grid */
.place--text .place-body { padding-top: var(--s4); }

.route-note {
  margin-top: var(--s5);
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 0.95rem;
  padding-left: var(--s3);
  border-left: 2px solid var(--stone-deep);
}

/* ---------------------------------------------------------- aboard */
/* Four moments of the day, each one photo plus two lines. The photos carry
   the section: they are the only place the site shows lunch, the gear and
   the upper deck, so the copy stays short and lets them speak.

   Rows alternate image/text side on wide screens via :nth-child(even). Below
   920px everything stacks image-first — the photo is the argument, the text
   is the caption for it. */
/* --hull-warm, not --hull, for the same reason as .captain: #route above is
   --hull, so leaving this one --hull too ran 5000px of identical pale ground
   down the page with no seam anywhere — measured at 1280px, 2516px + 2583px
   back to back. The two sections say different things (where the boat goes /
   how the day runs) and the tint change is what tells the eye that. */
.aboard { background: var(--hull-warm); }
.aboard-head { margin-bottom: var(--s6); }
.aboard-list {
  display: grid;
  gap: var(--s6);
}
.aboard-row {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 920px) {
  .aboard-list { gap: var(--s7); }
  .aboard-row { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  /* mirror every second row so the eye zig-zags down the page instead of
     running along one edge */
  .aboard-row:nth-child(even) .aboard-figure { order: 2; }
}
.aboard-figure { margin: 0; }
.aboard-figure img {
  width: 100%;
  height: auto;          /* see .intro-figure img — attribute height beats aspect-ratio */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
/* Three of the four are phone shots in portrait; at 4/3 the crop threw away
   the top and bottom of the frame — the meze table lost the bread basket, the
   paddleboard lost its nose. A taller box on wide screens keeps them whole
   without making the row scroll. The wide g16 keeps 4/3 and is exempt. */
@media (min-width: 920px) {
  .aboard-figure img { aspect-ratio: 5 / 4; }
  .aboard-row:first-child .aboard-figure img { aspect-ratio: 4 / 3; }
}
.aboard-copy h3 {
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  letter-spacing: -0.015em;
  line-height: 1.18;
}
.aboard-copy p {
  margin-top: var(--s3);
  color: var(--ink-soft);
  max-width: 46ch;
}
.aboard-step {
  display: block;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-deep);
  margin-bottom: var(--s1);
}

/* ---------------------------------------------------------- gallery */
.gallery { background: var(--deeper); color: var(--hull); }
/* --s5 is a fixed 3rem, so unlike the other section heads this one did not
   follow the spacing scale down on narrow screens */
.gallery-head { margin-bottom: var(--s5); }
@media (max-width: 620px) { .gallery-head { margin-bottom: var(--s4); } }
.gallery-head .section-title { color: var(--hull); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 10px;
  grid-auto-flow: dense;
}
.gallery-item {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--deep);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 1;
}
.gallery-item.is-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery-item.is-tall { grid-row: span 2; aspect-ratio: 1 / 2; }
@media (max-width: 620px) {
  /* auto-fill collapses to a single column here, stacking 12 squares into ~2400px
     of scrolling. two columns halves that; the grid is a preview and the lightbox
     still opens each photo full size. keep GALLERY_SIZES in main.js in step —
     it advertises 50vw below 620px on the strength of this rule. */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.is-wide { grid-column: span 2; }
  .gallery-item.is-tall { grid-row: span 1; aspect-ratio: 1; }
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.4s;
  filter: saturate(0.94);
}
.gallery-item:hover img { transform: scale(1.06); filter: saturate(1.08); }
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(201, 178, 138, 0.24);
  border-radius: var(--radius);
  pointer-events: none;
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 20, 30, 0.96);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: rgba(247, 244, 237, 0.1);
  border: 1px solid rgba(247, 244, 237, 0.24);
  color: var(--hull);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.lb-btn:hover { background: rgba(247, 244, 237, 0.22); transform: scale(1.06); }
.lb-btn svg { width: 18px; height: 18px; }
.lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb-prev { left: clamp(0.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(0.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lb-count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: rgba(247, 244, 237, 0.66);
}

/* ---------------------------------------------------------- faq */
.faq { background: var(--hull-warm); }
.faq-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .faq-grid { grid-template-columns: 0.75fr 1.25fr; gap: var(--s7); } }
.faq-list { border-top: 1px solid rgba(6, 42, 61, 0.16); }
.faq-item { border-bottom: 1px solid rgba(6, 42, 61, 0.16); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
  font-weight: 600;
  color: var(--deep);
  letter-spacing: -0.01em;
  line-height: 1.32;
}
.faq-icon {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 0.22em;
  position: relative;
  color: var(--aegean);
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.faq-icon::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.faq-item.is-open .faq-icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 62ch;
  padding-bottom: var(--s3);
}

/* ---------------------------------------------------------- contact */
.contact { background: var(--deep); color: var(--hull); position: relative; overflow: hidden; }
.contact::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 260px;
  background: radial-gradient(120% 100% at 50% 100%, rgba(28, 123, 147, 0.4), transparent 70%);
  pointer-events: none;
}
.contact-grid {
  position: relative;
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  /* three blocks in two columns: the head and the "what to write" list stack
     on the left, the details sit on the right and span both rows */
  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s7); }
  .contact-details { grid-column: 2; grid-row: 1 / span 2; }
}

/* The five things Turgay needs before he can quote. Numbered on purpose —
   unlike the region section, here the order is genuinely useful, because it
   is the order he reads them in. */
.contact-ask {
  border: 1px solid rgba(201, 178, 138, 0.28);
  border-radius: var(--radius);
  padding: var(--s4);
  background: rgba(247, 244, 237, 0.04);
}
.contact-ask h3 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s3);
}
.ask-list { margin: 0; padding: 0; list-style: none; counter-reset: ask; display: flex; flex-direction: column; gap: 0.55rem; }
.ask-list li {
  counter-increment: ask;
  position: relative;
  padding-left: 2rem;
  font-size: 0.95rem;
  color: rgba(247, 244, 237, 0.9);
}
.ask-list li::before {
  content: counter(ask);
  position: absolute;
  left: 0; top: 0.05em;
  width: 1.35rem; height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(127, 212, 232, 0.5);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--shallow);
}
.ask-note {
  margin-top: var(--s3);
  font-size: 0.88rem;
  color: rgba(247, 244, 237, 0.6);
}
.contact-respond {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid rgba(201, 178, 138, 0.22);
  font-size: 0.88rem;
  color: rgba(247, 244, 237, 0.68);
}
.contact-head .section-title { color: var(--hull); }
.contact-actions { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: 0.75rem; }

.contact-details { display: flex; flex-direction: column; }
.detail {
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
  padding-block: var(--s3);
  border-bottom: 1px solid rgba(201, 178, 138, 0.22);
}
.detail:first-child { border-top: 1px solid rgba(201, 178, 138, 0.22); }
.detail-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}
.detail-value {
  font-family: var(--display);
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.35rem);
  color: var(--hull);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s;
  word-break: break-word;
}
a.detail-value:hover { color: var(--shallow); }

/* ---------------------------------------------------------- footer */
.footer {
  background: var(--deeper);
  color: rgba(247, 244, 237, 0.66);
  /* Bottom padding clears the floating WhatsApp bubble (54px tall, offset
     from the bottom edge) so the last line is never underneath it. main.js
     also hides the bubble here, but this keeps the page safe when
     IntersectionObserver is missing or JS is off. */
  padding-block: var(--s6) calc(var(--s4) + 54px + clamp(1rem, 3vw, 2rem));
  border-top: 1px solid rgba(201, 178, 138, 0.16);
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  padding-bottom: var(--s5);
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s4); } }
.footer .brand { color: var(--hull); margin-right: 0; margin-bottom: var(--s3); }
.footer-tagline { max-width: 32ch; font-size: 0.88rem; }
.footer h4 {
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s3);
}
.footer-links { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a, .footer-lang button {
  color: rgba(247, 244, 237, 0.7);
  text-decoration: none;
  transition: color 0.2s;
  font-size: 0.88rem;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: fit-content;
}
.footer-links a:hover, .footer-lang button:hover { color: var(--shallow); }
/* Touch pointers get the full 44px target; mice keep the tighter column. */
@media (pointer: coarse) {
  .footer-links a, .footer-lang button, .detail-value {
    min-height: var(--tap);
    display: flex;
    align-items: center;
  }
  /* The 44px height above made the rows touch at 0px, so the tel and mailto
     links sat edge to edge with nothing between them. */
  .footer-links { gap: 8px; }
  /* width: fit-content leaves short labels narrow — in Chinese the footer
     nav links and "中文" all measured 29px wide. Height was already 44px;
     only the horizontal axis was short. Desktop keeps the tight column. */
  .footer-links a { min-width: var(--tap); }
  .footer-lang button { min-width: var(--tap); justify-content: center; }
}
/* Plain facts, not links: same column rhythm as .footer-links but no hover,
   no cursor and no 44px tap target — nothing here is tappable. */
.footer-facts { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-facts span {
  color: rgba(247, 244, 237, 0.7);
  font-size: 0.88rem;
  line-height: 1.5;
}
.footer-lang { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.footer-lang button[aria-current='true'] { color: var(--stone); font-weight: 600; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem var(--s4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s4);
  border-top: 1px solid rgba(201, 178, 138, 0.16);
  font-size: 0.8rem;
  color: rgba(247, 244, 237, 0.46);
}

/* ---------------------------------------------------------- floating whatsapp */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  background: #25d366;
  color: #06301a;
  border-radius: 50%;
  box-shadow: 0 12px 30px -8px rgba(4, 28, 42, 0.6);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease),
              visibility 0.25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 27px; height: 27px; }
/* is-hidden: over #contact and the footer, where the same action is already
   on the page as a labelled button, so the bubble is only clutter.
   is-away: while the reader scrolls down, so it stops landing on the text
   and buttons under it; it returns on the first upward scroll.
   pointer-events go with both, so it cannot be tapped while fading out. */
.wa-float.is-hidden,
.wa-float.is-away {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  pointer-events: none;
}

/* ---------------------------------------------------------- back to top */
/* Sits directly above the WhatsApp bubble in the same right-hand column.
   The bubble is 54px, so the offset is its bottom + its height + a gap;
   the two never overlap and the column stays put when the bubble fades,
   because this button's position does not depend on the bubble's state. */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + 54px + var(--s2));
  z-index: 90;
  display: grid;
  place-items: center;
  width: var(--tap); height: var(--tap);
  padding: 0;
  /* Solid sand on the dark page: a translucent dark fill sank into the
     background and the arrow read as a smudge. The circle has to carry its
     own contrast, since it often shows alone — the WhatsApp bubble hides
     while the reader scrolls down, which is exactly when this appears. */
  background: var(--stone);
  color: var(--deeper);
  border: none;
  border-radius: 50%;
  box-shadow: 0 12px 30px -8px rgba(4, 28, 42, 0.75);
  cursor: pointer;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease),
              visibility 0.25s var(--ease), background 0.25s var(--ease);
}
.to-top:hover { transform: translateY(-2px); background: var(--hull); }
.to-top svg { width: 20px; height: 20px; }
/* Hidden near the top of the page, where it has nothing to do. Same
   opacity + visibility + pointer-events set as the bubble, so it cannot be
   tapped while fading out. */
.to-top.is-away {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  pointer-events: none;
}

/* ---------------------------------------------------------- mobile nav */
@media (max-width: 939px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    /* Measured 0px between links: six full-width targets in one unbroken
       strip, separated only by a hairline. The thumb has no margin for
       error. 8px is the acceptance floor; the divider stays, and the gap
       makes it read as a boundary. */
    gap: 8px;
    background: rgba(6, 42, 61, 0.98);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    padding: var(--s3) var(--gutter) var(--s4);
    border-bottom: 1px solid rgba(201, 178, 138, 0.22);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
  }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(201, 178, 138, 0.14);
    font-size: 1rem;
  }
  .nav a::after { display: none; }
  /* The menu already ends with the "ask about a date" button, which goes to
     #contact. Keeping the plain Contact link above it offers the same
     destination twice, 86px apart. Desktop keeps it: there nav-book is
     hidden, so the text link is the only way into the section. */
  .nav a[href="#contact"]:not(.nav-book) { display: none; }
  .nav a.nav-book {
    display: inline-flex;
    margin-top: var(--s4);
    border-bottom: 0;
    justify-content: center;
  }
  /* class-based lock, so it cannot fight the lightbox's inline style.overflow.
     <html> is the scrolling element here, so locking only <body> lets the
     background keep scrolling behind the open menu — both need the rule.
     main.js mirrors .nav-open onto <html> for browsers without :has(). */
  html.nav-open, html:has(body.nav-open), body.nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------- reveal */
/* Gated behind .js, which head.js writes onto <html> before first paint.
   Only JavaScript can add .is-in, so without it these rules would leave ~90%
   of the page permanently at opacity 0 — the content is still in the markup
   and still read by crawlers, but a visitor with JS off would see a blank
   page. Unstyled by default, hidden only once we know we can reveal it. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* ---------------------------------------------------------- cookie consent */
/* Sits above the WhatsApp bubble and the back-to-top button (z-index 90) so
   neither can be tapped through it, but below the lightbox (300) and the open
   mobile menu (120) — those take over the screen and the strip has no business
   floating on top of them. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 110;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s3) var(--gutter);
  background: var(--deeper);
  border-top: 1px solid rgba(201, 178, 138, 0.22);
  box-shadow: 0 -12px 30px -12px rgba(4, 28, 42, 0.55);
  color: rgba(247, 244, 237, 0.9);
  /* translateY rather than display:none — the strip slides in, and an inert
     element cannot be reached by tab or screen reader while it is off. */
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.32s var(--ease), visibility 0.32s var(--ease);
}
.consent.is-open { transform: translateY(0); visibility: visible; }

.consent-text {
  flex: 1 1 32ch;
  max-width: 68ch;
  font-size: 0.85rem;
  line-height: 1.55;
}
.consent-actions { display: flex; gap: var(--s2); flex: none; }
.consent-btn { min-height: var(--tap); padding-block: 0.6rem; }
/* Sand, not terracotta: the page already spends terracotta on "ask about a
   date", and a cookie prompt must not compete with the booking CTA. */
.consent-accept { background: var(--stone); color: var(--deeper); }
.consent-accept:hover { background: var(--stone-deep); }

/* While the strip is up it owns the bottom of the screen, so the two floating
   controls step above it instead of sitting underneath. --consent-h is written
   by main.js from the strip's measured height, because the text wraps to a
   different number of lines in each of the seven languages. */
.consent-open .wa-float { bottom: calc(clamp(1rem, 3vw, 2rem) + var(--consent-h, 0px)); }
.consent-open .to-top {
  bottom: calc(clamp(1rem, 3vw, 2rem) + 54px + var(--s2) + var(--consent-h, 0px));
}

@media (max-width: 640px) {
  .consent { gap: var(--s2); padding: var(--s3) var(--s3); }
  .consent-text { flex-basis: 100%; font-size: 0.8rem; }
  .consent-actions { width: 100%; }
  .consent-actions .consent-btn { flex: 1; }
}

/* ------------------------------------------------------------ map link
   Statik SVG harita. Gomulu bir iframe degil: ucuncu taraf istegi, cerez
   ve CSP frame-src gerektirmiyor. Tiklayinca ziyaretcinin kendi harita
   uygulamasi aciliyor. */
.map-link {
  display: block;
  position: relative;
  margin-top: var(--s3);
  border: 1px solid rgba(201, 178, 138, 0.22);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.3s var(--ease);
}
.map-link:hover,
.map-link:focus-visible { border-color: rgba(201, 178, 138, 0.5); }
.map-link img {
  display: block;
  width: 100%;
  height: auto;
  /* SVG oranini koruyor; genislik degisince yukseklik kendiliginden uyuyor */
}
.map-cta {
  position: absolute;
  right: var(--s2);
  bottom: var(--s2);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s3);
  background: var(--terracotta);
  color: var(--hull);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 12px rgba(4, 28, 42, 0.45);
}

/* Article pages have a light ground, so the header cannot rely on the hero's
   dark image for contrast: it is solid from the first paint rather than only
   after scrolling (.is-stuck). Without this the brand and nav are dark text
   on a light page and effectively invisible. */
[data-page="article"] .header {
  background: rgba(6, 42, 61, 0.94);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 rgba(201, 178, 138, 0.22);
}
[data-page="article"] .header::before { opacity: 0; }

/* -------------------------------------------------------------- article
   Guide pages under /<lang>/<slug>/. They share style.css with the home
   page rather than carrying a copy: one stylesheet, 21 documents. */
.article {
  padding: 0 0 var(--s6);
  background: var(--hull);
  color: var(--ink);
}

/* Makale hero'su. Eskiden makale header'in altinda dogrudan metinle
   basliyordu ve ana sayfadan gelen biri baska bir siteye dusmus gibi
   oluyordu: ana sayfa genis, gorselli, renkli zeminlerle nefes alirken
   makale dar bir metin sutunuydu, hic gorsel yoktu.
   Bant 21:9 — bilerek ince: makale okunmak icin var, hero onu ezmemeli.
   Baslik bandin UZERINDE degil altinda duruyor; uzerine koymak yedi dilde
   degisen basli uzunluklariyla kontrast olcumu gerektirirdi (hero'da
   oldugu gibi) ve makale basliklari cok daha uzun. */
.article-hero {
  position: relative;
  /* margin-inline: 0 SART: <figure> tarayicinin varsayilan 40px yan
     bosluguyla geliyor ve bant ekranin ortasina kayip daraliyordu
     (olculdu: 1280px'te 793px genislik, solda 40px bosluk, sagda yok).
     Reset blogu figure'u sifirlamiyor, o yuzden burada. */
  margin: var(--header-h) 0 0;
  /* width: 100% SART: aspect-ratio ile max-height birlikte calisinca
     tarayici genisligi yukseklikten TURETIYOR — 340px sinir, 21/9 oran,
     sonuc 793px genislik. Olculdu. Genisligi acikca vermek orani
     yukseklige uygulatiyor, tersine degil. */
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 340px;
  overflow: hidden;
  background: var(--deep);
}
.article-hero picture { display: contents; }
.article-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Alt kenara dogru koyulasan ince bir perde: bandin alti ile sayfanin
   acik zemini arasindaki sert kesigi yumusatiyor. */
.article-hero::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to bottom, transparent, rgba(247, 244, 237, 0.85));
  pointer-events: none;
}
.article-hero + .article-shell { margin-top: var(--s5); }
@media (max-width: 699px) {
  .article-hero { aspect-ratio: 16 / 9; max-height: 220px; }
}
.article-shell {
  width: min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.crumb {
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s3);
}
.crumb a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid rgba(70, 96, 108, 0.3); }
.crumb a:hover, .crumb a:focus-visible { color: var(--aegean); border-bottom-color: var(--aegean); }
.crumb span { margin: 0 var(--s1); opacity: 0.5; }

.article h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  line-height: 1.12;
  margin-bottom: var(--s3);
}
/* Eskiden burada "Güncelleme 29 Eylül 2026 · 3 dk okuma" yazan bir satir
   vardi. Kaldirildi: ikisi de blog kalibi ve ikisi de ziyaretcinin isine
   yaramiyor — buraya gelen "beni nereden alirsiniz" diye geliyor, yazinin
   kac dakika surdugunu sormuyor. Yerine sayfanin ne cevapladigini soyleyen
   bir standfirst var; SEO tarafinda da tarihten cok daha degerli, cunku
   arama sonucunda gorunen metne benziyor.
   Tarih kaybolmuyor: JSON-LD'deki dateModified duruyor, Google onu okuyor. */
.article-standfirst {
  font-family: var(--body);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid rgba(13, 31, 40, 0.12);
}
.article h2 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.5vw, 1.75rem);
  line-height: 1.2;
  margin: var(--s5) 0 var(--s2);
}
.article h3 {
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 600;
  margin: var(--s4) 0 var(--s1);
}
.article p, .article li {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.68;
  margin-bottom: var(--s2);
}
.article ul, .article ol { padding-left: var(--s3); margin-bottom: var(--s3); }
.article li { margin-bottom: var(--s1); }
.article a { color: var(--aegean); text-underline-offset: 3px; }
.article a:hover, .article a:focus-visible { color: var(--shallow-dim); }
.article strong { font-weight: 600; }

/* Fact table — the part a search engine and an assistant actually quote. */
.article-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s3) 0 var(--s4);
  font-family: var(--body);
  font-size: 0.92rem;
}
.article-table th,
.article-table td {
  text-align: left;
  padding: var(--s2) var(--s2) var(--s2) 0;
  border-bottom: 1px solid rgba(13, 31, 40, 0.1);
  vertical-align: top;
}
.article-table th { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.article-wide { overflow-x: auto; }

/* Closing call to action back to the tour page. */
.article-cta {
  margin-top: var(--s6);
  padding: var(--s4);
  background: var(--hull-warm);
  border-left: 3px solid var(--stone);
  border-radius: var(--radius);
}
.article-cta p { margin-bottom: var(--s3); }
.article-cta .btn { margin-right: var(--s1); }

/* Links to the same guide in the other two topics. */
.article-more {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid rgba(13, 31, 40, 0.12);
}
.article-more h2 { font-size: 1rem; font-family: var(--body); margin: 0 0 var(--s2); }
.article-more a { display: block; padding: var(--s1) 0; }

/* ---------------------------------------------------------- CJK tuning */
html[lang='zh'] body { font-family: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; }
html[lang='zh'] h1, html[lang='zh'] h2, html[lang='zh'] h3,
html[lang='zh'] .detail-value, html[lang='zh'] .faq-q, html[lang='zh'] .intro-pull {
  font-family: 'Fraunces', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', serif;
  letter-spacing: 0;
}
/* CJK glyphs are full-width: the Latin measure overflows, so cap it tighter
   and step the display size down to keep both lines above the waterline. */
html[lang='zh'] .hero-title {
  letter-spacing: 0;
  line-height: 1.2;
  max-width: 11ch;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.1rem);
}
html[lang='zh'] .hero-title .line { overflow: visible; }
@media (max-width: 520px) {
  html[lang='zh'] .hero-title { font-size: clamp(1.85rem, 1.1rem + 3.4vw, 2.3rem); }
}
html[lang='zh'] .section-title { line-height: 1.28; }
html[lang='ru'] .hero-title, html[lang='de'] .hero-title { font-size: clamp(2.3rem, 1.2rem + 5vw, 5.2rem); }
html[lang='de'] .section-title, html[lang='ru'] .section-title { hyphens: auto; }

/* Türkçe sözcükler uzun: başlığı biraz küçültüp ölçüyü genişletiyoruz ki
   iki satır su hattının üstünde kalsın. */
html[lang='tr'] .hero-title {
  font-size: clamp(2.2rem, 1.2rem + 4.6vw, 4.8rem);
  max-width: 18ch;
}
html[lang='tr'] .section-title { hyphens: auto; }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* must out-specify `.js .reveal` above, or reduced motion loses the cascade */
  .reveal, .js .reveal { opacity: 1; transform: none; }
  .hero-media img { animation: none; transform: scale(1.02); }
}

/* ---------------------------------------------------------- print */
@media print {
  .header, .wa-float, .hero-scroll, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  section { padding-block: 1.5rem; }
}