/* ============================================================
   Istanbul Night Cruise — design system (light / airy theme)
   Tokens live in tailwind.config.js; these are the composed
   component classes used by index.html.
   ============================================================ */

:root {
  --night: #0F2A44;
  --night-deep: #0A1D30;
  --sea: #1B7A8C;
  --sunset: #F0704B;
  --sunset-dark: #D9573A;
  --sand: #FAF6EF;
  --sand-dark: #F1EAE0;
  --sand-deep: #E6DCCB;
  --ink: #1C2733;
  --ink-muted: #5B6875;
  --ink-faint: #8A96A3;
  --wa: #25D366;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; background: var(--sand); color: var(--ink); }
img { display: block; }
::selection { background: rgba(240,112,75,.25); }

/* ---------- Header ---------- */
.header-transparent { background: transparent; }
.header-transparent .logo-text { color: #fff; }
.header-transparent .logo-sub { color: rgba(255,255,255,.55); }
.header-transparent .logo-ring { stroke: rgba(255,255,255,.35); }
.header-transparent .logo-moon { fill: #F0704B; }
.header-transparent .logo-wave { stroke: #fff; }
.header-transparent .logo-boat { fill: #fff; }
.header-transparent .nav-link { color: rgba(255,255,255,.85); }
.header-transparent .nav-link:hover { color: #fff; }
.header-transparent .lang-toggle { color: #fff; background: rgba(255,255,255,.1); }
.header-transparent .lang-toggle:hover { background: rgba(255,255,255,.18); }
.header-transparent .hamburger-line { background: #fff; }

.header-solid { background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 24px -12px rgba(15,42,68,.25); }
.header-solid .logo-text { color: var(--night); }
.header-solid .logo-sub { color: var(--ink-muted); }
.header-solid .logo-ring { stroke: rgba(15,42,68,.2); }
.header-solid .logo-moon { fill: #F0704B; }
.header-solid .logo-wave { stroke: var(--night); }
.header-solid .logo-boat { fill: var(--night); }
.header-solid .nav-link { color: var(--ink); }
.header-solid .nav-link:hover { color: var(--sea); }
.header-solid .lang-toggle { color: var(--ink); background: var(--sand-dark); }
.header-solid .lang-toggle:hover { background: var(--sand-deep); }
.header-solid .hamburger-line { background: var(--night); }

.nav-link { position: relative; padding: 4px 0; transition: color .2s; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--sunset); transform: scaleX(0); transform-origin: left; transition: transform .25s; border-radius: 2px; }
.nav-link:hover::after { transform: scaleX(1); }

.lang-opt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 16px; font-size: 14px; color: var(--ink); transition: background .15s; text-align: left; }
.lang-opt:hover { background: var(--sand); color: var(--sea); }
.mobile-nav-link { display: block; padding: 12px 4px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--sand-dark); }
.mobile-nav-link:last-of-type { border-bottom: 0; }
#menuToggle.is-open .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#menuToggle.is-open .hamburger-line:nth-child(2) { opacity: 0; }
#menuToggle.is-open .hamburger-line:nth-child(3) { width: 24px; transform: translateY(-8px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn-accent { background: var(--sunset); color: #fff; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 10px 24px -10px rgba(240,112,75,.6); cursor: pointer; }
.btn-accent:hover { background: var(--sunset-dark); transform: translateY(-1px); }
.btn-primary { background: var(--night); color: #fff; transition: background .2s, transform .15s; cursor: pointer; }
.btn-primary:hover { background: #17395C; transform: translateY(-1px); }
.btn-wa { background: var(--wa); color: #fff; transition: background .2s, transform .15s; box-shadow: 0 10px 24px -10px rgba(37,211,102,.55); }
.btn-wa:hover { background: #1DA851; transform: translateY(-1px); }
.btn-outline { border: 1.5px solid var(--sand-deep); color: var(--night); background: #fff; transition: border-color .2s, color .2s, background .2s; cursor: pointer; }
.btn-outline:hover { border-color: var(--sea); color: var(--sea); }

/* ---------- Hero ---------- */
.hero-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.9); backdrop-filter: blur(6px); }
.hero-chip svg { color: #F0704B; }
.quick-card { position: relative; }
.quick-card::before { content: ""; position: absolute; inset: -1px; border-radius: 1.75rem; background: linear-gradient(135deg, rgba(240,112,75,.35), rgba(27,122,140,.25)); z-index: -1; filter: blur(14px); opacity: .7; }

/* ---------- Badges / chips ---------- */
.badge-soft { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--sand-dark); color: var(--night); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.badge-dark { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(10,29,48,.75); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(6px); }
.chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #E4F2F4; color: #145F6E; font-size: 12.5px; font-weight: 700; }
.chip-check::before { content: "✓"; font-size: 12px; }

/* ---------- Forms ---------- */
.field-label { display: block; }
.field-label.hidden, .field-label[hidden] { display: none; } /* .field-label{display:block} used to beat Tailwind's .hidden — the wizard's hotel-address field showed with "No" selected (Özgür, 8 Sep 2026) */
.field-label > span { display: block; font-size: 12px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.field-input { width: 100%; border: 1.5px solid var(--sand-deep); background: #fff; border-radius: 14px; padding: 12px 14px; font-size: 15px; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; font-family: inherit; }
.field-input:focus { border-color: var(--sea); box-shadow: 0 0 0 4px rgba(27,122,140,.12); }
.field-input::placeholder { color: #A5AFBA; }
.field-warn { font-size: 12px; color: #C43D1F; margin-top: 6px; font-weight: 600; }
.stepper { display: flex; align-items: stretch; border: 1.5px solid var(--sand-deep); border-radius: 14px; overflow: hidden; background: #fff; }
.stepper-btn { width: 42px; font-size: 20px; font-weight: 600; color: var(--night); background: var(--sand); transition: background .15s; cursor: pointer; user-select: none; }
.stepper-btn:hover { background: var(--sand-dark); }
.stepper-input { flex: 1; min-width: 0; text-align: center; border: 0; font-size: 16px; font-weight: 700; color: var(--night); background: #fff; outline: none; -moz-appearance: textfield; padding: 10px 0; }
.stepper-input::-webkit-outer-spin-button, .stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
select.field-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B6875' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

/* ---------- Trust strip ---------- */
.trust-cell { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.trust-icon { width: 34px; height: 34px; color: var(--sea); flex-shrink: 0; }
.trust-title { font-size: 14px; font-weight: 800; color: var(--night); line-height: 1.2; }
.trust-sub { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

/* ---------- Sections ---------- */
.eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--sea); margin-bottom: 10px; }
.eyebrow-light { color: #F0704B; }
.section-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: -.01em; color: var(--night); text-align: center; }
.section-title.text-white { color: #fff; }
.section-sub { color: var(--ink-muted); font-size: 16px; line-height: 1.65; margin: 12px auto 0; max-width: 40rem; text-align: center; }
.section-title.text-left, .section-sub.text-left { text-align: left; }
.card { background: #fff; border: 1px solid var(--sand-dark); border-radius: 1.75rem; box-shadow: 0 10px 30px -12px rgba(15,42,68,.18); }
.incl-item { position: relative; padding-left: 22px; line-height: 1.5; }
.incl-item::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: #E4F2F4; border: 2px solid var(--sea); }
.extra-row { display: flex; align-items: flex-start; gap: 12px; }
.extra-ico { width: 38px; height: 38px; border-radius: 12px; background: #FCE7DF; color: var(--sunset-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.extra-ico svg { width: 20px; height: 20px; }

/* ---------- Timeline ---------- */
.timeline-card { background: #fff; border: 1px solid var(--sand-dark); border-radius: 1.25rem; padding: 22px 22px 24px; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.timeline-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(15,42,68,.3); }
.timeline-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--sunset), var(--sea)); }
.timeline-time { display: inline-block; font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 600; color: var(--sunset-dark); margin-bottom: 8px; }
.timeline-title { font-weight: 800; color: var(--night); font-size: 16px; margin-bottom: 6px; }
.timeline-desc { color: var(--ink-muted); font-size: 14px; line-height: 1.6; }

/* ---------- Steps ---------- */
.step-card { background: var(--sand); border: 1px solid var(--sand-dark); border-radius: 1.25rem; padding: 22px; }
.step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--night); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 15px; }
.step-title { font-weight: 800; color: var(--night); font-size: 15px; margin-bottom: 6px; }
.step-desc { color: var(--ink-muted); font-size: 14px; line-height: 1.6; }

/* ---------- Boat ---------- */
.spec-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--sand-deep); color: var(--ink-muted); }
.spec-val { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--night); min-width: 52px; }

/* ---------- Included (dark section) ---------- */
.incl-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 1.25rem; padding: 22px; transition: background .25s, border-color .25s; }
.incl-card:hover { background: rgba(255,255,255,.08); border-color: rgba(240,112,75,.4); }
.incl-ico { width: 44px; height: 44px; border-radius: 14px; background: rgba(240,112,75,.15); color: #F9A98C; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.incl-ico svg { width: 24px; height: 24px; }
.incl-title { font-weight: 800; font-size: 16px; margin-bottom: 6px; color: #fff; }
.incl-desc { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.6; }
.show-item { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.85); padding: 6px 0; }
.show-num { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; color: #F9A98C; }

/* ---------- Gallery ---------- */
.gallery-item { display: block; position: relative; border-radius: 1.1rem; overflow: hidden; background: var(--sand-dark); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,29,48,.55)); opacity: 0; transition: opacity .3s; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item:hover::after { opacity: 1; }

/* ---------- Reviews ---------- */
.stat-tile { background: var(--sand); border: 1px solid var(--sand-dark); border-radius: 1.1rem; padding: 16px 10px; text-align: center; }
.stat-val { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; color: var(--night); line-height: 1; }
.stat-lbl { font-size: 12px; color: var(--ink-muted); margin-top: 6px; font-weight: 600; }
.g-review-card { background: var(--sand); border: 1px solid var(--sand-dark); border-radius: 1.25rem; padding: 20px; }
.g-review-card .g-name { font-weight: 800; color: var(--night); font-size: 14px; }
.g-review-card .g-stars { color: #F0A500; font-size: 12px; letter-spacing: 1px; }
.g-review-card .g-date { color: #8A96A3; font-size: 11px; }
.g-review-card p { color: var(--ink); font-size: 14px; line-height: 1.65; margin-top: 10px; }
.g-avatar { width: 40px; height: 40px; border-radius: 50%; background: #E4F2F4; color: #145F6E; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.review-hidden { display: none !important; }

/* ---------- Why ---------- */
.why-card { background: #fff; border: 1px solid var(--sand-dark); border-radius: 1.25rem; padding: 24px; color: var(--ink-muted); font-size: 15px; line-height: 1.65; }
.why-tag { display: inline-block; font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 600; color: var(--night); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--sunset); }

/* ---------- FAQ ---------- */
.faq-item { background: var(--sand); border: 1px solid var(--sand-dark); border-radius: 1.1rem; overflow: hidden; transition: border-color .2s; }
.faq-item.is-open { border-color: rgba(27,122,140,.4); background: #fff; }
.faq-toggle { width: 100%; text-align: left; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 700; color: var(--night); font-size: 15px; cursor: pointer; }
.faq-icon { width: 20px; height: 20px; color: var(--sea); flex-shrink: 0; transition: transform .25s; }
.faq-item.is-open .faq-icon { transform: rotate(180deg); }
.faq-content { display: none; padding: 0 20px 18px; color: var(--ink-muted); font-size: 14.5px; line-height: 1.7; }
.faq-item.is-open .faq-content { display: block; }
.faq-content strong { color: var(--night); }

/* ---------- Footer ---------- */
.footer-h { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.footer-link { color: rgba(255,255,255,.7); transition: color .2s; overflow-wrap: anywhere; }
.footer-link:hover { color: #fff; }

/* ---------- Wizard ---------- */
.wiz-step { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.wiz-step-dot { width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; background: var(--sand-dark); color: var(--ink-muted); flex-shrink: 0; transition: all .2s; }
.wiz-step-lbl { font-size: 11px; font-weight: 700; color: #A5AFBA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-step.is-active .wiz-step-dot { background: var(--sunset); color: #fff; }
.wiz-step.is-active .wiz-step-lbl { color: var(--night); }
.wiz-step.is-done .wiz-step-dot { background: var(--sea); color: #fff; }
.wiz-step.is-done .wiz-step-lbl { color: var(--sea); }
.wiz-group { margin-bottom: 18px; }
.wiz-group-title { font-size: 12px; font-weight: 800; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.wiz-opt { text-align: left; background: #fff; border: 1.5px solid var(--sand-deep); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 2px; transition: border-color .2s, box-shadow .2s; cursor: pointer; }
.wiz-opt:hover { border-color: var(--sea); }
.wiz-opt.is-selected { border-color: var(--sunset); box-shadow: 0 0 0 3px rgba(240,112,75,.15); }
.wiz-opt-main { font-weight: 800; color: var(--night); font-size: 14px; }
.wiz-opt-sub { font-size: 12px; color: var(--ink-muted); line-height: 1.4; }
#wizSummary > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
#wizSummary dt { color: var(--ink-muted); }
#wizSummary dd { font-weight: 700; color: var(--night); text-align: right; }
#wizPriceLines > div { display: flex; justify-content: space-between; color: var(--ink-muted); }
.wiz-panel { animation: wizIn .3s cubic-bezier(.2,.7,.2,1); }
@keyframes wizIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
body.modal-open { overflow: hidden; }

/* ---------- Lightbox ---------- */
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(10,29,48,.6); border: 1px solid rgba(255,255,255,.2); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.lb-nav:hover { background: rgba(255,255,255,.22); }

/* ---------- Header hide-on-scroll (mobile) + scrollspy active state ---------- */
#siteHeader { transition: transform .3s ease, background .3s, box-shadow .3s; }
#siteHeader.header-hidden { transform: translateY(-100%); }
.nav-link.is-active { color: var(--sea); }
.nav-link.is-active::after { transform: scaleX(1); }
.header-transparent .nav-link.is-active { color: #fff; }

/* ---------- Section chip bar (mobile) ---------- */
.section-bar { background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--sand-deep); box-shadow: 0 6px 18px -12px rgba(15,42,68,.25); transition: transform .3s ease, opacity .3s ease; }
.section-bar.is-off { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.section-bar.with-header { transform: translateY(68px); }
.section-bar-track { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.section-bar-track::-webkit-scrollbar { display: none; }
.sec-chip { flex: 0 0 auto; scroll-snap-align: center; padding: 10px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--night); background: var(--sand-dark); white-space: nowrap; transition: background .2s, color .2s; }
.sec-chip.is-active { background: var(--night); color: #fff; }
/* anchors land below the pinned bars */
[id] { scroll-margin-top: 96px; }
@media (max-width: 1023px) { [id] { scroll-margin-top: 64px; } }

/* ---------- Currency switcher ---------- */
.cur-opt { justify-content: flex-start; }
.cur-opt .cur-sym { width: 20px; text-align: center; font-weight: 800; color: var(--night); }
.cur-opt .cur-sub { margin-left: auto; font-size: 12px; color: #8A96A3; }
.cur-opt.is-active { background: var(--sand); color: var(--sea); }
.cur-chip { flex: 1; padding: 10px 6px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--sand-dark); color: var(--night); }
.cur-chip.is-active { background: var(--night); color: #fff; }
.cur-off { display: none !important; }

/* ---------- Floating WhatsApp (appears after hero) ---------- */
#floatingWa { transition: opacity .3s, transform .3s; }
#floatingWa.wa-raised { transform: translateY(-68px); } /* clears the phone sticky bar */
#floatingWa.wa-off { opacity: 0; transform: translateY(16px); pointer-events: none; }
body.modal-open #floatingWa { opacity: 0; pointer-events: none; }

/* ---------- Scroll reveal & counters ---------- */
.scroll-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.scroll-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .scroll-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- RTL ---------- */
[dir="rtl"] .faq-toggle, [dir="rtl"] .wiz-opt, [dir="rtl"] .lang-opt { text-align: right; }
[dir="rtl"] .section-title.text-left, [dir="rtl"] .section-sub.text-left { text-align: right; }
[dir="rtl"] .incl-item { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .incl-item::before { left: auto; right: 0; }
[dir="rtl"] .timeline-card::before { left: auto; right: 0; }
[dir="rtl"] .nav-link::after { transform-origin: right; }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .trust-cell { padding: 14px 14px; gap: 10px; }
  .trust-icon { width: 28px; height: 28px; }
  .trust-title { font-size: 13px; }
  .wiz-step-lbl { display: none; }
  .wiz-step { flex: 0 0 auto; }
  #wizSteps { justify-content: center; gap: 10px; }
}

/* ---------- Legal pages (privacy / terms / cancellation) ---------- */
.legal { color: var(--ink); font-variant-ligatures: no-contextual no-discretionary; font-feature-settings: "liga" 0, "calt" 0; } /* Manrope turns (c) into © */
.legal h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; color: var(--night); letter-spacing: -.01em; }
.legal h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.35rem; color: var(--night); margin: 2.25rem 0 .75rem; scroll-margin-top: 96px; }
.legal h3 { font-weight: 800; font-size: 1rem; color: var(--night); margin: 1.5rem 0 .5rem; }
.legal p { color: var(--ink-muted); line-height: 1.7; margin: .6rem 0; font-size: 15px; }
.legal ul { margin: .6rem 0 .6rem 1.2rem; list-style: disc; color: var(--ink-muted); font-size: 15px; line-height: 1.7; }
.legal li { margin: .25rem 0; padding-left: .2rem; }
.legal li::marker { color: var(--sea); }
.legal strong { color: var(--night); font-weight: 700; }
.legal a { color: var(--sea); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(27,122,140,.35); text-underline-offset: 3px; }
.legal a:hover { color: var(--sea-dark, #145F6E); }
.legal-card { background: #fff; border: 1px solid var(--sand-dark); border-radius: 1.25rem; padding: 1.25rem 1.5rem; box-shadow: 0 4px 20px -6px rgba(15,42,68,.10); }
.legal-key { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .legal-key { grid-template-columns: repeat(3, 1fr); } }
.legal-key > div { background: #E4F2F4; border-radius: 1rem; padding: 1rem; }
.legal-key .k { font-family: 'Fraunces', Georgia, serif; font-size: 1.4rem; font-weight: 600; color: var(--night); }
.legal-key .v { font-size: 13px; color: #145F6E; font-weight: 600; margin-top: .25rem; }
.toc a { display: block; padding: 6px 0; font-size: 13.5px; color: var(--ink-muted); text-decoration: none; border-left: 2px solid transparent; padding-left: 12px; }
.toc a:hover { color: var(--sea); border-left-color: var(--sea); }
.legal-note { background: var(--sand-dark); border-radius: 1rem; padding: .9rem 1.1rem; font-size: 13.5px; color: var(--ink-muted); }

/* ---------- Responsive polish (audit 7 Sep 2026) ---------- */
.lang-toggle { min-height: 36px; }
.logo-text { white-space: nowrap; }
/* long words (de "Gästekapazität", fi, hu…) must never push the layout wider than the screen */
.spec-item span:last-child, .incl-card, .trust-title, .trust-sub, .timeline-title, .step-title, .incl-title, .wiz-opt-main, .wiz-opt-sub, .faq-toggle span, .legal p, .legal li { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  h1, h2, h3 { overflow-wrap: anywhere; }
  body { hyphens: auto; -webkit-hyphens: auto; }
  .cur-note--hero { display: none !important; }
  .stat-val { font-size: 1.45rem; }
  .stat-lbl { font-size: 11px; }
}
@media (max-width: 359px) {
  .logo-text { font-size: 15px; }
  #langLabel, #langToggle svg { display: none; }
  #langToggle { padding-left: 8px; padding-right: 8px; }
}

/* ---------- Content: blog & city guide (scripts/build-content.js) ---------- */
.art-page { font-variant-ligatures: no-contextual no-discretionary; }
.art-hero { position: relative; min-height: 420px; display: flex; align-items: flex-end; background: var(--night); overflow: hidden; }
.art-hero--index { min-height: 360px; }
.art-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.art-hero picture { position: absolute; inset: 0; }
.art-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,29,48,.15) 0%, rgba(10,29,48,.55) 55%, rgba(10,29,48,.92) 100%); }
.art-hero-inner { position: relative; width: 100%; padding-top: 4.5rem; padding-bottom: 2.5rem; color: #fff; }
.art-hero-inner h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1; letter-spacing: -.01em; max-width: 46rem; margin-top: .25rem; }
.art-lede { margin-top: 1rem; max-width: 42rem; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.86); }
.art-meta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; font-size: 13px; color: rgba(255,255,255,.65); }
.art-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: 12.5px; color: rgba(255,255,255,.65); margin-bottom: 1rem; }
.art-crumbs a { color: rgba(255,255,255,.85); font-weight: 600; }
.art-crumbs a:hover { color: #fff; }
.art-crumbs [aria-current] { color: rgba(255,255,255,.6); }
@media (min-width: 1024px) { .art-hero { min-height: 520px; } .art-hero-inner { padding-bottom: 3.5rem; } }

.art { color: var(--ink); }
.art > p, .art li, .art dd, .art td, .art figcaption, .art blockquote { overflow-wrap: anywhere; }
.art p { color: var(--ink-muted); line-height: 1.75; font-size: 16.5px; margin: .9rem 0; }
.art > p:first-child { font-size: 17.5px; color: var(--ink); }
.art h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.45rem, 2.4vw, 1.8rem); line-height: 1.2; color: var(--night); margin: 2.75rem 0 .9rem; scroll-margin-top: 96px; letter-spacing: -.01em; }
.art h3 { font-weight: 800; font-size: 1.05rem; color: var(--night); margin: 1.75rem 0 .5rem; scroll-margin-top: 96px; }
.art strong { color: var(--night); font-weight: 700; }
.art a { color: var(--sea); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(27,122,140,.35); text-underline-offset: 3px; }
.art a:hover { color: #145F6E; }
.art ul, .art ol { margin: .75rem 0 .9rem 1.25rem; color: var(--ink-muted); line-height: 1.7; font-size: 16px; }
.art ul { list-style: disc; } .art ol { list-style: decimal; }
.art li { margin: .35rem 0; padding-left: .2rem; }
.art li::marker { color: var(--sea); font-weight: 700; }
.art blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--sunset); font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem; line-height: 1.5; color: var(--night); }
.art-fig { margin: 1.75rem 0; }
.art-fig img { width: 100%; height: auto; border-radius: 1.25rem; box-shadow: 0 10px 30px -12px rgba(15,42,68,.25); }
.art-fig figcaption { margin-top: .6rem; font-size: 13px; color: var(--ink-faint); }
.art-facts { background: #fff; border: 1px solid var(--sand-dark); border-radius: 1.25rem; padding: 1.25rem 1.5rem; margin: 1.75rem 0; box-shadow: 0 4px 20px -6px rgba(15,42,68,.10); }
.art-facts h3 { margin: 0 0 .75rem; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sea); }
.art-facts dl { display: grid; grid-template-columns: 1fr; gap: .5rem .75rem; margin: 0; }
.art-facts dt { font-size: 12.5px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.art-facts dd { margin: 0 0 .5rem; color: var(--ink); line-height: 1.5; font-size: 15px; }
@media (min-width: 640px) { .art-facts dl { grid-template-columns: 10rem 1fr; } .art-facts dd { margin-bottom: .1rem; } }
.art-tip { background: #E4F2F4; border-left: 3px solid var(--sea); border-radius: 0 1rem 1rem 0; padding: .9rem 1.2rem; margin: 1.5rem 0; }
.art-tip p { margin: 0; color: #145F6E; font-size: 15px; }
.art-tip p + p { margin-top: .5rem; }
.art-table { margin: 1.5rem 0; overflow-x: auto; border: 1px solid var(--sand-dark); border-radius: 1.25rem; background: #fff; }
.art-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 32rem; }
.art-table th { text-align: left; background: var(--sand-dark); color: var(--night); font-weight: 800; padding: .7rem .9rem; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.art-table td { padding: .7rem .9rem; border-top: 1px solid var(--sand-dark); color: var(--ink-muted); vertical-align: top; line-height: 1.5; }
.art-table td:first-child { color: var(--night); font-weight: 700; }
[dir="rtl"] .art-table th { text-align: right; }
.art-faq { margin-top: 2rem; }
.art-faq-item { background: #fff; border: 1px solid var(--sand-dark); border-radius: 1rem; padding: 1rem 1.25rem; margin: .75rem 0; }
.art-faq-item h3 { margin: 0 0 .35rem; font-size: 1rem; }
.art-faq-item p { margin: 0; font-size: 15px; }
.art-toc a.is-active { color: var(--sea); border-left-color: var(--sea); font-weight: 700; }
.art-toc-mobile { background: #fff; border: 1px solid var(--sand-dark); border-radius: 1rem; padding: .75rem 1rem; margin-bottom: 1.5rem; }
.art-toc-mobile summary { cursor: pointer; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.art-toc-mobile summary::after { content: "+"; font-size: 18px; color: var(--sea); }
.art-toc-mobile[open] summary::after { content: "\2013"; }
.art-toc-mobile .toc { margin-top: .5rem; }
.art-book { background: #fff; border: 1px solid var(--sand-dark); border-radius: 1.25rem; padding: 1.25rem; box-shadow: 0 10px 30px -12px rgba(15,42,68,.18); }
.art-cta { margin-top: 3.5rem; background: var(--night); color: #fff; border-radius: 1.75rem; padding: 2.25rem 1.5rem; position: relative; overflow: hidden; }
.art-cta::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(240,112,75,.35), transparent 70%); }
.art-cta h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; max-width: 34rem; position: relative; }
.art-cta p { margin-top: .75rem; color: rgba(255,255,255,.75); max-width: 36rem; line-height: 1.6; position: relative; }
.art-cta > div { position: relative; }
@media (min-width: 640px) { .art-cta { padding: 3rem 2.5rem; } }
.art-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sand-dark); border-radius: 1.5rem; overflow: hidden; box-shadow: 0 4px 20px -6px rgba(15,42,68,.12); transition: transform .2s, box-shadow .2s; color: inherit; text-decoration: none; }
.art-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -16px rgba(15,42,68,.28); }
.art-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand-dark); }
.art-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.art-card:hover .art-card-img { transform: scale(1.04); }
.art-card-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.art-card-kicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sea); }
.art-card h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--night); }
.art-card p { font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.art-card-meta { margin-top: auto; padding-top: .5rem; font-size: 12px; color: var(--ink-faint); }

/* Content pages in Arabic, Persian and Urdu: mirror the edges that are hard-coded left. */
[dir="rtl"] .toc a { border-left: none; border-right: 2px solid transparent; padding-left: 0; padding-right: 12px; }
[dir="rtl"] .toc a:hover { border-left-color: transparent; border-right-color: var(--sea); }
[dir="rtl"] .art-toc a.is-active { border-left-color: transparent; border-right-color: var(--sea); }
[dir="rtl"] .art-tip { border-left: none; border-right: 3px solid var(--sea); border-radius: 1rem 0 0 1rem; }
[dir="rtl"] .art blockquote { border-left: none; border-right: 3px solid var(--sunset); padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .art ul, [dir="rtl"] .art ol { margin-left: 0; margin-right: 1.25rem; }
[dir="rtl"] .art li { padding-left: 0; padding-right: .2rem; }
[dir="rtl"] .art-cta::before { right: auto; left: -80px; }
[dir="rtl"] .art-toc-mobile summary { flex-direction: row-reverse; }
/* Latin runs inside RTL prose — T5, M2, Marmaray, Cibali, 20:00 — must not reorder. */
[dir="rtl"] .art, [dir="rtl"] .art-hero-inner, [dir="rtl"] .art-card-body { unicode-bidi: plaintext; }
.lang-nopage { opacity: .5; }
.lang-nopage:hover { opacity: .8; }
/* A long table-of-contents label must wrap, not widen its grid track: a grid item's
   default min-width:auto lets one unbreakable line push the whole column past the
   viewport, which is how the Arabic contents box overflowed on a phone. */
.toc a { overflow-wrap: anywhere; }
.art-toc-mobile, .art-toc-mobile nav, .art-toc-mobile summary { min-width: 0; }

/* ---------- Hero: mobile quick-jump chips, trust-chip strip, promo video ---------- */
/* On a phone the three trust chips wrap to two lines. A single scrollable strip was tried
   and rejected: the third chip (the pier and the time) sat off-screen and read as lost.
   Smaller chips instead, so the second line costs 26 px rather than 36. */
@media (max-width: 639px) {
  .hero-chips .hero-chip { font-size: 11.5px; padding: 5px 9px; gap: 5px; }
  .hero-chips .hero-chip svg { width: 12px; height: 12px; }
}
.hero-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hero-jump a { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); transition: background .2s, border-color .2s; }
.hero-jump a::after { content: "\2193"; font-size: 12px; opacity: .7; }
.hero-jump a:hover, .hero-jump a:active { background: rgba(240,112,75,.35); border-color: rgba(240,112,75,.6); }
.hero-play { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 14px 8px 8px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 700; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); transition: background .2s; cursor: pointer; }
.hero-play:hover { background: rgba(255,255,255,.18); }
.hero-play-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--sunset); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -8px rgba(240,112,75,.8); }
.hero-play-ico svg { margin-left: 2px; }
#videoModal.is-open { display: flex; }
#videoFrame iframe, #videoFrame video { width: 100%; height: 100%; display: block; }
/* Fixes after the first phone/desktop screenshots:
   - the scrollable chip strip must scroll inside its column, not widen it (the hero clips
     overflow, so a widened column shows up as text cut off, not as a scrollbar);
   - class display rules beat the [hidden] attribute and Tailwind's lg:hidden, so both
     need explicit rules here. */
@media (max-width: 639px) { .hero-chips { width: 100%; min-width: 0; } } /* keeps the column from widening */
.hero-jump { display: none; }
@media (max-width: 1023.98px) { .hero-jump { display: flex; } }
.hero-play[hidden] { display: none; }
@media (max-width: 639px) { .hero-jump { margin-bottom: 8px; } }
/* Four jump chips wrap to two lines in the longer languages (DE "Speisekarte", TR "Galeri"…)
   and push the booking button under the fold on short phones. The constraint is height,
   so on viewports up to 700 px tall the third chip (The Show) steps aside; tall phones keep four. */
@media (max-width: 639px) {
  .hero-jump a { padding: 6px 11px; font-size: 12.5px; }
}
@media (max-width: 639px) and (max-height: 700px) {
  .hero-jump a:nth-child(3) { display: none; }
}

/* ---------- Package card: menu photo strip ---------- */
/* Six course photos where one decorative picture used to be. Phones: a horizontal
   swipe with the next tile peeking and a position counter, so nothing is ever fully
   hidden (the lesson from the hero chips). Desktop: all six as a 2x3 grid. */
.menu-col { position: relative; display: flex; flex-direction: column; background: var(--sand); }
.menu-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 10px; }
.menu-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.menu-strip::-webkit-scrollbar { display: none; }
.menu-tile { position: relative; display: block; flex: 0 0 78%; scroll-snap-align: start; aspect-ratio: 16 / 10; border-radius: 1rem; overflow: hidden; background: var(--sand-dark); }
.menu-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.menu-tile:hover img { transform: scale(1.05); }
.menu-tile-label { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 10px; border-radius: 999px; background: rgba(10,29,48,.74); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; backdrop-filter: blur(4px); }
[dir="rtl"] .menu-tile-label { left: auto; right: 10px; }
.menu-strip-count { margin-left: auto; align-self: center; padding: 4px 9px; border-radius: 999px; background: rgba(10,29,48,.74); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
[dir="rtl"] .menu-strip-count { margin-left: 0; margin-right: auto; }
@media (min-width: 1024px) {
  .menu-col { height: 100%; }
  .menu-strip { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; overflow: visible; flex: 1; }
  .menu-tile { flex: none; aspect-ratio: auto; min-height: 118px; }
}
/* Play button placement: on phones/tablets an icon-only circle at the right end of the
   price line (Ozgur: the pill under the two CTAs "sat far too low"); on desktop the pill
   under the CTAs stays. Both open the same modal. */
.hero-play--top { margin: 0 0 0 auto; padding: 0 14px 0 0; height: 36px; gap: 9px; font-size: 13px; background: rgba(240,112,75,.16); border: 1px solid rgba(240,112,75,.7); box-shadow: 0 6px 18px -8px rgba(240,112,75,.7); }
.hero-play--top .hero-play-txt { white-space: nowrap; }
.hero-play--top .hero-play-ico { width: 36px; height: 36px; position: relative; }
.hero-play--top .hero-play-ico::before, .hero-play--top .hero-play-ico::after, .hero-play--bottom .hero-play-ico::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(240,112,75,.9); animation: play-pulse 1.6s ease-out infinite; pointer-events: none; }
.hero-play--top .hero-play-ico::after { animation-delay: .8s; }
.hero-play--bottom .hero-play-ico { position: relative; }
.hero-play .hero-play-ico { animation: play-beat 1.6s ease-in-out infinite; }
@keyframes play-pulse { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes play-beat { 0%, 100% { transform: scale(1); box-shadow: 0 8px 20px -8px rgba(240,112,75,.8); } 50% { transform: scale(1.12); box-shadow: 0 10px 26px -6px rgba(240,112,75,1); } }
@media (prefers-reduced-motion: reduce) { .hero-play .hero-play-ico, .hero-play .hero-play-ico::before, .hero-play .hero-play-ico::after { animation: none; } }
.hero-play--bottom { display: none; }
@media (min-width: 1024px) {
  .hero-play--top { display: none; }
  .hero-play--bottom { display: inline-flex; margin-top: 0; } /* sits beside the booking button */
  .hero-play--bottom[hidden] { display: none; }
}

/* Narrow AND short phones (360x640 class): the play pill wraps under the price line and
   would push the booking button under the fold, so the subtitle is clamped to three lines
   there. Tall or wider phones show the full sentence. */
@media (max-width: 379px) and (max-height: 700px) {
  #hero p[data-i18n="hero.subtitle"] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #hero h1 { font-size: 2rem; }
}