@import url("tokens.css");

/* Brand palette, status colors, --radius-md, --shadow-lg, --ease, and the
   base --font-heading/--font-body now live in tokens.css (single source
   for the whole site). What's left here is genuinely local to the public
   site: two values that intentionally differ from tokens.css's admin/
   partner-derived defaults (--text, --shadow -- see tokens.css's own
   comment), sizes tokens.css doesn't define at all (--shadow-sm,
   --radius-sm, --radius-lg), and names for this file's own previously-
   stray hex codes that aren't shared with admin.css/partner.css. */
:root {
  /* Intentional overrides of tokens.css's defaults -- confirmed via git
     history as original intent (present unchanged since the initial
     commit, not later drift), not a duplication to clean up. Full
     reasoning in tokens.css's own top-of-file comment. */
  --text: #212529;
  --shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.06), 0 14px 32px rgba(var(--shadow-rgb), 0.08);

  /* Sizes only the public site uses */
  --shadow-sm: 0 2px 10px rgba(var(--shadow-rgb), 0.06);
  --radius-sm: 8px;
  --radius-lg: 20px;

  /* Checked every one of these 8 against the whole tokens.css palette
     (nearest-color distance, not just "does it look similar") -- none is
     an exact match for an existing token, so none can be bound to one
     without changing what actually renders. Genuinely independent,
     hand-picked values, not palette drift; kept local with the specific
     reason for each. */

  /* A second red family, distinct from tokens.css's --danger/--danger-bg.
     Nearest palette match is --danger itself (#b2453c), but at a real
     distance (not the same color) -- form-validation styling has
     historically used a different, more saturated red/pink than the
     alert-box "danger" tone. Possibly the same original intent that
     diverged over time, possibly always deliberate; either way, changing
     it now would be a visible color change on every checkout/auth-modal
     validation error, not a token rename -- left as its own pair. */
  --form-error: #c0392b;
  --form-error-bg: #fdf1f0;

  /* Darker text tones for readable copy sitting on top of the tinted
     success/danger alert backgrounds (--success/--danger themselves are
     used for the badge/border-left accent in the same rules, not the
     body text -- this is a genuine second role, not a duplicate). Each
     is close to its badge color (success-text ~27 units from --success,
     danger-text ~44 from --danger, in RGB space) but not equal to it or
     to anything else in the palette. */
  --success-text: #2f5824;
  --danger-text: #8a3730;

  /* One-off decorative tones, named by where they're used rather than
     what they look like, per the same "role, not color" reasoning as the
     status tokens above. None matches an existing token (nearest are
     --border, --gold, and tokens.css's --warning-bg, all at real
     distances, not equal) -- independently hand-picked accent colors, not
     palette drift. --footer-muted in particular is close enough to
     --gold to look like it should be the same value; it isn't (checked),
     so it stays separate rather than being guessed into a merge. */
  --kicker-gold: #e9d3a3;
  --closing-cta-text: #eee0c8;
  --footer-text: #fbeedb;
  --footer-muted: #b9ac93;

  /* Third-party brand colors (Instagram/WhatsApp's own official colors,
     not Royal Line's) -- deliberately NOT in tokens.css: a Royal Line
     rebrand doesn't change what color Instagram or WhatsApp's icon is. */
  --instagram-pink: #c1387d;
  --whatsapp-green: #25d366;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Was 0.7 -- raised 10% (0.7 * 1.1) on request. Two other values compound
     off this one and must move with it: .tour-print-page's zoom below
     (1/0.7 there, must become 1/0.77 to keep print output at true 100%)
     and .breadcrumb-sticky's top offset further down (a measured snapshot
     of .site-header's real rendered height at this zoom level). */
  zoom: 0.77;
}

/* Homepage specifically requested 10% more zoomed in than the site-wide
   baseline above — compounds with html's zoom (0.7 * 1.1 = 0.77 effective).
   Scoped to .home-page-content (views/index.ejs's wrapper around everything
   BELOW the header), not body.home-page, so .site-header never renders at a
   different size on the homepage than on any other page — it's a sibling
   of this wrapper, outside it, so it never inherits the extra 1.1. This is
   deliberately NOT a body.home-page .site-header override instead: this
   stylesheet has already been bitten once by a selector whose correctness
   depended on where an element sits in the page (docs/07-business-logic.md's
   "Header layout" section, the .nav-callback-cta ancestor-scoping lesson) —
   .site-header's own rules stay a single, unconditional definition that
   renders identically regardless of which page includes it, full stop. */
.home-page-content {
  zoom: 1.1;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--gold-dark);
  margin: 0 0 0.5em;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 90px 0;
}

.section-kicker {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 15px;
  color: var(--gold-dark);
  font-weight: 500;
  margin-bottom: 8px;
}

.section-title {
  font-size: 36px;
  margin-bottom: 40px;
}

.tours .section-kicker {
  margin-bottom: 3px;
}

.tours .section-title {
  margin-bottom: 14px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.25s var(--ease);
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--gold);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(180, 154, 105, 0.35);
}

.btn-primary:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(180, 154, 105, 0.4);
}

.btn-outline {
  border-color: var(--gold);
  color: var(--gold-dark);
}

.btn-outline:hover {
  background: var(--gold);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(180, 154, 105, 0.25);
}

.btn-block {
  display: block;
  text-align: center;
  width: 100%;
}

#reserveBtn {
  padding: 20px 34px;
  font-size: 18px;
  letter-spacing: 1.2px;
}

/* Header / Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 239, 0.95);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
}

/* Right-aligned stack: the slim Sizi Arayalım / Giriş Yap-Kayıt Ol line
   sits directly above the main nav-links line, both against the same
   .site-header background -- no separate band/border between them. */
.nav-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.topbar-links a {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
  font-weight: 500;
  transition: color 0.2s ease;
}

.topbar-links a:hover {
  color: var(--gold-dark);
}

/* Giriş Yap / Kayıt Ol -- two independently-clickable links (each opens the
   auth modal directly on its own tab) with a plain visual separator between
   them, same shape as .lang-toggle's TR / EN pair just below. */
.auth-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-text-sep {
  color: var(--text-light);
  opacity: 0.5;
  font-size: 14px;
}

/* Logged-in customer's name + a small Hesabım/Çıkış Yap dropdown --
   same click-to-toggle-an-.open-class mechanism as the admin subnav's own
   grouped dropdowns (views/admin/partials/header.ejs), reimplemented here
   with this file's own classes since admin.css is a separate stylesheet
   not loaded on the public site. */
.account-nav-dropdown {
  position: relative;
}

.account-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.account-nav-trigger:hover {
  color: var(--gold-dark);
}

.account-nav-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.2s ease;
}

.account-nav-dropdown.open .account-nav-caret {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.account-nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 180px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 200;
}

.account-nav-dropdown.open .account-nav-menu {
  display: block;
}

.account-nav-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  font-weight: 400;
  transition: background 0.15s ease;
}

.account-nav-menu a::after {
  display: none;
}

.account-nav-menu a:hover {
  background: var(--cream-alt);
  color: var(--gold-dark);
}

/* Mobile-only duplicates of the topbar's text links, folded into the
   existing hamburger dropdown below -- see the 720px breakpoint. Hidden
   here so desktop never shows them twice. */
.nav-links-mobile-only {
  display: none;
}

.brand-logo {
  height: 220px;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 36px;
}

.nav-links a {
  position: relative;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--navy);
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.25s var(--ease);
}

.nav-links a:hover {
  color: var(--gold-dark);
}

.nav-links a:hover::after {
  width: 100%;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-toggle-link {
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  opacity: 0.5;
}

.lang-toggle-link.active {
  opacity: 1;
  color: var(--gold-dark) !important;
}

.lang-toggle-sep {
  color: var(--navy);
  opacity: 0.35;
  font-size: 13px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--brown-dark);
}

.hero-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* The base .btn-outline's gold-on-white styling doesn't have enough contrast
   against the hero's dark brown/gold gradient, so it gets a white variant
   scoped to this section only. */
.hero-actions .btn-outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.hero-actions .btn-outline:hover {
  background: var(--white);
  color: var(--brown-dark);
}

/* Trust strip -- a thin gold top accent (the same hairline treatment as a
   section divider, not a new color) gives it its own identity as a
   distinct band rather than blending flush into the header above. */
.trust-strip {
  background: var(--white);
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.08);
}

.trust-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 32px 0;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  text-align: left;
}

.trust-item svg {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--gold-dark);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bolder/larger heading line for hierarchy -- the subtext right below it
   (.trust-item-sub) stays as it was, deliberately, so the strengthening is
   only on the headline. Playfair Display is the same serif already used
   for every other heading on the site (section titles, the auth modal's
   tab labels), not a new typeface. */
.trust-item-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brown-dark);
  font-size: 19px;
  letter-spacing: 0.2px;
}

.trust-item-sub {
  display: block;
  font-size: 13px;
  color: var(--text-light);
  margin-top: 1px;
}

/* Category cards */
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.category-card {
  position: relative;
  height: 320px;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--shadow-rgb), 0) 40%, rgba(var(--shadow-rgb), 0.82) 100%);
}

.category-card-body {
  position: relative;
  z-index: 1;
  padding: 32px;
  color: var(--white);
}

.category-card-kicker {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  color: var(--kicker-gold);
  margin-bottom: 6px;
  display: block;
}

.category-card-title {
  font-family: var(--font-heading);
  font-size: 28px;
  margin-bottom: 10px;
  /* Overrides the global h1-h4 rule's gold-dark (meant for light backgrounds) —
     low contrast against a photo, even under the gradient. */
  color: var(--white);
}

.category-card-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.category-card-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* About: two-column layout (text + photo) */
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about-photo {
  height: 460px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.about-text p {
  color: var(--text-light);
  font-size: 16px;
}

/* Why choose us — feature grid */
.why-us {
  margin-top: 56px;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.why-us-item {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.why-us-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--cream-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-us-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--gold-dark);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-us-item h4 {
  font-size: 17px;
  margin-bottom: 8px;
}

.why-us-item p {
  font-size: 14px;
  color: var(--text-light);
  margin: 0;
}

/* Instagram CTA banner */
.closing-cta {
  background: linear-gradient(135deg, var(--brown-dark), var(--brown) 60%, var(--gold-dark));
  color: var(--white);
  text-align: center;
}

.closing-cta-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.closing-cta h2 {
  color: var(--white);
  font-size: 30px;
  margin-bottom: 10px;
}

.closing-cta p {
  color: var(--closing-cta-text);
  font-size: 16px;
  margin-bottom: 26px;
}

.closing-cta .btn-outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.closing-cta .btn-outline:hover {
  background: var(--white);
  color: var(--brown-dark);
}

/* Tours */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

@media (max-width: 1100px) {
  .tour-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-strip-inner,
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.tour-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.tour-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.tour-card-image {
  position: relative;
  display: block;
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--cream-alt);
  cursor: pointer;
}

/* Real-data tour-card badges ("Son X Yer" / "Erken Rezervasyon") -- computed
   server-side from live capacity/early-bird data (modules/public-site/routes.js),
   never hardcoded or decorative. Shared between the homepage's .tour-card-image
   and the listing page's .tour-list-image, both already position:relative. */
.tour-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.tour-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.tour-badge-urgent {
  background: var(--form-error);
}

.tour-badge-earlybird {
  background: var(--gold-dark);
}

.tour-card-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.tour-destination {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--gold-dark);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.tour-card h3 {
  font-size: 22px;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}

.tour-summary {
  color: var(--text-light);
  font-size: 15px;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.2em;
}

.tour-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--text-light);
  margin-top: auto;
  margin-bottom: 18px;
}

.tour-price {
  color: var(--brown-dark);
  font-weight: 600;
  font-size: 18px;
}

/* Wraps .tour-price so a small "'den başlayan fiyatlarla" caption (same
   t('startingFrom') label /turlar.ejs's own price column already shows,
   reused here rather than a new one invented) can sit under the number
   without breaking .tour-meta's single-line "duration ... price" flex
   row -- this becomes .tour-meta's second flex item in place of the bare
   price span, right-aligned to match where that span always sat. */
.tour-price-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.tour-price-caption {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-light);
}

/* About */
.about {
  background: var(--cream-alt);
}

.about-stats {
  display: flex;
  gap: 48px;
  margin-top: 32px;
}

.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--gold-dark);
}

.stat-label {
  font-size: 14px;
  color: var(--text-light);
}

/* Tour detail */
.tour-title-header {
  background: var(--cream);
  padding: 4px 0;
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.08);
  line-height: 1.25;
}

.tour-title-header .section-kicker {
  margin-bottom: 0;
}

.tour-title-heading {
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 0;
}

.tour-gallery {
  margin-bottom: 32px;
}

.tour-gallery-main {
  position: relative;
  height: 560px;
  overflow: hidden;
  background-color: var(--cream-alt);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.tour-gallery-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tour-gallery-thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tour-gallery-thumb {
  position: relative;
  width: 100px;
  height: 70px;
  overflow: hidden;
  background-color: var(--cream-alt);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.7;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.tour-gallery-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tour-gallery-thumb:hover {
  opacity: 1;
}

.tour-gallery-thumb.active {
  opacity: 1;
  border-color: var(--gold);
}

.tour-detail-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 40px;
}

.tour-detail-description {
  font-size: 21px;
  color: var(--text);
  margin-bottom: 32px;
}

/* Detail tabs */
.detail-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.15);
  margin-bottom: 32px;
}

.detail-tab {
  background: none;
  border: none;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.detail-tab.active {
  color: var(--brown-dark);
  border-bottom-color: var(--gold);
  font-weight: 500;
}

.itinerary-title {
  font-size: 30px;
  margin-bottom: 24px;
}

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

.itinerary-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
}

.itinerary-day-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.itinerary-day-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--gold-dark);
  text-align: center;
  white-space: nowrap;
}

.itinerary-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  flex: 1;
  min-height: 10px;
  position: relative;
}

.itinerary-item:not(:last-child) .itinerary-dot::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: rgba(180, 154, 105, 0.3);
}

.itinerary-content {
  padding-bottom: 32px;
}

.itinerary-content h3 {
  font-size: 23px;
  margin-bottom: 8px;
}

.itinerary-content p {
  color: var(--text);
  font-size: 19px;
}

.itinerary-flight {
  margin-top: 10px;
  font-size: 16px;
  color: var(--text-light);
  background: var(--cream-alt);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.detail-tab-panel {
  overflow-wrap: anywhere;
}

.detail-list {
  list-style: disc;
  padding-left: 20px;
  color: var(--text);
  font-size: 21px;
}

.detail-list li {
  margin-bottom: 10px;
}

/* Fiyat Bilgileri / Genel Bilgiler have no dedicated class on their <p>
   tags (see tour-detail.ejs) -- matched to .tour-detail-description's size
   by panel id instead, same text size across all the tabs. */
#tab-fiyat p,
#tab-genel p {
  font-size: 21px;
  color: var(--text);
}

.city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.city-tags span {
  background: var(--cream-alt);
  color: var(--brown-dark);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 21px;
}

.tour-detail-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow);
}

.tour-detail-card .btn {
  padding: 9px 20px;
  font-size: 12.5px;
}

.tour-meta-label {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-light);
  margin: 0;
}

.tour-meta-value {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--brown-dark);
  font-weight: 500;
}

.tour-meta-value.tour-price span {
  font-size: 13px;
  color: var(--text-light);
  font-weight: 400;
}

/* Departure date selector (tour detail sidebar) */
.departure-select {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 4px;
  border: 1px solid rgba(var(--shadow-rgb), 0.15);
  border-radius: var(--radius-sm);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.departure-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(180, 154, 105, 0.15);
}

#selectedStatus {
  margin: 0 0 8px;
}

/* Room / passenger configurator (tour detail sidebar) */
.room-config {
  margin: 2px 0 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(var(--shadow-rgb), 0.1);
}

.room-counters {
  display: flex;
  gap: 6px;
  margin: 4px 0 6px;
}

.room-counter-field {
  flex: 1;
  background: var(--cream);
  border: 1px solid rgba(var(--shadow-rgb), 0.1);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  text-align: center;
}

.room-counter-field span:first-child {
  display: block;
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 2px;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stepper-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(var(--shadow-rgb), 0.2);
  background: var(--white);
  color: var(--brown-dark);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.stepper-btn:hover {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}

.stepper-value {
  font-weight: 600;
  font-size: 15px;
  color: var(--brown-dark);
  min-width: 20px;
}

.room-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
  font-size: 13px;
}

.room-table th {
  text-align: left;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-light);
  padding: 3px 4px;
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.12);
}

.room-table td {
  padding: 4px 4px;
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.08);
  color: var(--text);
}

.room-remove-btn {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.room-remove-btn:hover {
  color: var(--danger);
}

.room-grand-total[hidden] {
  display: none;
}

.room-grand-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid rgba(var(--shadow-rgb), 0.12);
  font-size: 14px;
  color: var(--text);
}

/* A long label (e.g. "Fiyata Dahil Olmayan Ek Hizmetler") wraps within its
   own space instead of pushing the price down onto its own line -- the
   price itself never wraps and stays pinned top-right next to the label's
   first line. */
.room-grand-total span {
  flex: 1;
}

.room-grand-total strong {
  font-size: 18px;
  color: var(--brown-dark);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Checkout / reservation form */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}

.checkout-summary {
  position: sticky;
  top: 190px;
}

@media (max-width: 900px) {
  .checkout-summary {
    position: static;
  }
}

.checkout-title {
  font-size: 30px;
  margin-bottom: 16px;
}

.test-mode-banner {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid rgba(138, 90, 18, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 24px;
}

.checkout-section-title {
  font-size: 20px;
  margin: 28px 0 6px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--shadow-rgb), 0.1);
}

.checkout-section-title:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.checkout-section-hint {
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: 16px;
}

.checkout-main .form-group {
  margin-bottom: 18px;
}

.checkout-main .form-group label {
  display: block;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
  margin-bottom: 6px;
}

.checkout-main .form-group input,
.checkout-main .form-group select,
.checkout-main .form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(var(--shadow-rgb), 0.15);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  background: var(--cream);
  color: var(--text);
}

.checkout-main .form-group input:focus,
.checkout-main .form-group select:focus,
.checkout-main .form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(180, 154, 105, 0.15);
}

.required-mark {
  color: var(--form-error);
}

/* Applied via JS only once the browser actually rejects a required field on
   submit (checkout.js listens for the native 'invalid' event) -- so an empty
   required field reads normal on first page load, not alarming before the
   visitor has even had a chance to fill it in. */
.checkout-main .form-group input.field-invalid,
.checkout-main .form-group select.field-invalid {
  border-color: var(--form-error);
  background: var(--form-error-bg);
}

.checkout-main .form-group .field-invalid-msg {
  display: block;
  color: var(--form-error);
  font-size: 12.5px;
  margin-top: 5px;
}

.checkout-main .form-group textarea {
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.form-row .form-group {
  min-width: 0;
}

.form-group-narrow {
  max-width: 120px;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-light);
  margin: 4px 0 12px;
  cursor: pointer;
}

.checkbox-inline input {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
}

.passenger-block {
  background: var(--cream);
  border: 1px solid rgba(var(--shadow-rgb), 0.1);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 14px;
}

.passenger-block-title {
  font-weight: 600;
  color: var(--brown-dark);
  margin: 0 0 12px;
}

.checkout-submit {
  margin-top: 12px;
}

/* Nested inside each .passenger-block (reservation-checkout.ejs) -- an
   extra is opted into per passenger by being right there in that
   passenger's own block, not via a shared list scoped with per-passenger
   checkboxes. Transparent background (not .passenger-block's cream
   repeated, and not white either) -- just a border for definition, so it
   reads as part of the same surface instead of a contrasting box-within-
   a-box. */
.passenger-extras-title {
  font-weight: 600;
  color: var(--brown-dark);
  font-size: 14px;
  margin: 16px 0 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--shadow-rgb), 0.1);
}

.extras-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(var(--shadow-rgb), 0.12);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: transparent;
}

.extra-service-item + .extra-service-item {
  padding-top: 12px;
  border-top: 1px solid rgba(var(--shadow-rgb), 0.1);
}

/* [checkbox] [name] .......... [price] on one line -- name left, price
   pinned to the right via margin-left:auto. */
.extra-service-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.extra-service-row input[type="checkbox"] {
  flex-shrink: 0;
}

.extra-service-name {
  font-weight: 600;
  color: var(--brown-dark);
}

.extra-service-price {
  margin-left: auto;
  padding-left: 12px;
  font-weight: 600;
  color: var(--brown-dark);
  white-space: nowrap;
  text-align: right;
}

.extra-service-perperson {
  font-weight: 400;
  color: var(--text-light);
  font-size: 12px;
}

/* The formatted description sits directly below its row, indented under the
   checkbox+name and set smaller -- matches the reference screenshot's
   visual hierarchy. Content here is sanitized admin-authored HTML (bold/
   underline/bullet lists/links only) -- see reservation-checkout.ejs's own
   comment at the render call for why this is safe to allow unescaped. */
.extra-service-description {
  margin: 6px 0 0 28px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-light);
}

.extra-service-description p {
  margin: 0 0 6px;
}

.extra-service-description p:last-child {
  margin-bottom: 0;
}

.extra-service-description ul {
  margin: 4px 0;
  padding-left: 18px;
}

.extra-service-description b,
.extra-service-description strong {
  color: var(--brown-dark);
}

.extra-service-description u {
  text-decoration: underline;
}

.extras-estimate-note {
  font-size: 12.5px;
  color: var(--text-light);
  margin: 4px 0 0;
}

/* intl-tel-input -- every phone field site-wide uses this same component
   (public/js/phone-input.js), so this is a plain (not page-scoped) rule --
   light touch to match the site's other fields rather than overriding the
   library's own layout. The input itself already inherits .form-group
   input's border/radius/cream background/focus glow; this just makes the
   flag+dial-code button on the left blend into that same field instead of
   sitting on top of it as a separate white box. */
.iti {
  width: 100%;
}

.iti__selected-country {
  background: transparent;
  border-right: 1px solid rgba(var(--shadow-rgb), 0.15);
}

.iti__selected-country:hover,
.iti__selected-country:focus {
  background: rgba(var(--shadow-rgb), 0.05);
}

.promo-box {
  margin: 16px 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--shadow-rgb), 0.1);
}

.promo-box label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
  margin-bottom: 6px;
}

.promo-input-row {
  display: flex;
  gap: 8px;
}

.promo-input-row input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid rgba(var(--shadow-rgb), 0.15);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  background: var(--cream);
}

.promo-input-row .btn {
  padding: 8px 18px;
  font-size: 12.5px;
  white-space: nowrap;
}

.promo-message {
  font-size: 13px;
  margin: 8px 0 0;
}

.promo-message-ok {
  color: var(--success);
}

.promo-message-error {
  color: var(--danger);
}

.promo-discount-value {
  color: var(--success) !important;
}

.checkout-tour-thumb {
  height: 140px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  margin-bottom: 16px;
}

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

/* Reservation voucher */
.voucher-card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid rgba(var(--shadow-rgb), 0.08);
}

.voucher-topbar {
  height: 8px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold) 50%, var(--gold-dark));
}

.voucher-letterhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 32px 40px 20px;
}

.voucher-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.voucher-logo {
  width: 96px;
  height: auto;
}

.voucher-brand-name {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--brown-dark);
  margin: 0;
}

.voucher-brand-tag {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 2px 0 0;
}

.voucher-refbox {
  text-align: right;
  border: 1px solid rgba(var(--shadow-rgb), 0.15);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  background: var(--cream);
  min-width: 200px;
}

.voucher-refbox-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-light);
  margin: 0;
}

.voucher-refbox-code {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: 1px;
  margin: 2px 0;
}

.voucher-refbox-date {
  font-size: 12px;
  color: var(--text-light);
  margin: 0;
}

.voucher-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 40px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.voucher-title-row h1 {
  font-size: 22px;
  margin: 0;
  color: var(--text);
}

.voucher-status-pill {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.voucher-status-ok {
  background: var(--success-bg);
  color: var(--success);
}

.voucher-status-pending {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.voucher-trip-hero {
  display: flex;
  gap: 20px;
  margin: 0 40px 24px;
  background: var(--cream);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(var(--shadow-rgb), 0.08);
}

.voucher-trip-thumb {
  width: 200px;
  min-height: 150px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.voucher-trip-info {
  padding: 18px 20px 18px 0;
  flex: 1;
}

.voucher-trip-route {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--gold-dark);
  font-weight: 500;
  margin: 0 0 4px;
}

.voucher-trip-info h2 {
  font-size: 22px;
  margin: 0 0 14px;
}

.voucher-trip-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.voucher-stat {
  display: flex;
  flex-direction: column;
}

.voucher-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
}

.voucher-stat-value {
  font-weight: 600;
  color: var(--brown-dark);
  font-size: 15px;
}

.voucher-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 40px 24px;
}

.voucher-info-box {
  border: 1px solid rgba(var(--shadow-rgb), 0.1);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}

.voucher-info-title {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gold-dark);
  font-weight: 600;
  margin: 0 0 8px;
}

.voucher-info-line {
  font-size: 14px;
  color: var(--text);
  margin: 0 0 4px;
}

.voucher-section-title {
  font-weight: 600;
  color: var(--brown-dark);
  font-size: 15px;
  margin: 0 40px 10px;
}

.voucher-table {
  width: calc(100% - 80px);
  margin: 0 40px 24px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.voucher-table th {
  text-align: left;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--white);
  background: var(--brown-dark);
  padding: 10px 12px;
}

.voucher-table th:first-child { border-radius: 6px 0 0 6px; }
.voucher-table th:last-child { border-radius: 0 6px 6px 0; }

.voucher-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.08);
}

.voucher-table tbody tr:nth-child(even) {
  background: var(--cream);
}

.voucher-subtotal-row {
  display: flex;
  justify-content: space-between;
  margin: 0 40px 6px;
  font-size: 13.5px;
  color: var(--text-light);
}

.voucher-discount-row {
  color: var(--success);
  font-weight: 600;
}

.voucher-total-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 40px 20px;
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: var(--radius-sm);
  color: var(--white);
}

.voucher-total-bar span {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.voucher-total-bar strong {
  font-size: 22px;
  font-family: var(--font-heading);
}

.voucher-note {
  margin: 0 40px 16px;
  font-size: 14px;
}

.voucher-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin: 30px 40px 0;
  padding-top: 20px;
  border-top: 1px dashed rgba(var(--shadow-rgb), 0.2);
}

.voucher-signature {
  text-align: center;
  font-size: 12px;
  color: var(--text-light);
}

/* Encodes this voucher's own public verification URL (GET /rezervasyon/:code)
   -- see utils/voucherQr.js. .voucher-signature is already text-align:center,
   so the image (inline by default) and caption below it center for free. */
.voucher-qr-code {
  width: 84px;
  height: 84px;
  margin-bottom: 6px;
}

.voucher-qr-caption {
  font-size: 10px;
  color: var(--text-light);
  margin: 0;
}

.voucher-footer-contact {
  text-align: right;
  font-size: 12.5px;
  color: var(--text-light);
}

.voucher-footer-contact p {
  margin: 0 0 2px;
}

.voucher-disclaimer {
  color: var(--text-light);
  font-size: 11.5px;
  margin: 20px 40px 0;
  padding: 16px 0 28px;
  border-top: 1px solid rgba(var(--shadow-rgb), 0.1);
}

.voucher-actions {
  max-width: 820px;
  margin: 20px auto 0;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.voucher-lang-switch {
  max-width: 820px;
  margin: 0 auto 14px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.voucher-lang-btn {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid rgba(var(--shadow-rgb), 0.15);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  background: var(--white);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.voucher-lang-btn.active {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}

/* Tour "Yazdır" print page — professional letterhead document (logo, photos,
   price, itinerary) opened in a new tab from the tour detail action row. */
body.tour-print-page {
  /* Cancels the sitewide html{zoom:0.77} (1/0.77) so the physical print output is
     true 100% scale rather than shrunk — zoom compounds multiplicatively down
     the tree, same reasoning as the homepage's zoom exception. */
  zoom: 1.298701;
}

.tourprint-actions {
  max-width: 860px;
  margin: 0 auto 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.tourprint-card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid rgba(var(--shadow-rgb), 0.08);
  padding: 36px 44px 44px;
}

.tourprint-letterhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--gold);
  margin-bottom: 24px;
}

.tourprint-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tourprint-logo {
  width: 96px;
  height: auto;
}

.tourprint-brand-name {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--brown-dark);
  margin: 0;
}

.tourprint-brand-tag {
  font-size: 12px;
  color: var(--text-light);
  margin: 2px 0 0;
}

.tourprint-refbox {
  text-align: right;
}

.tourprint-refbox-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--gold-dark);
  margin: 0;
}

.tourprint-refbox-date {
  font-size: 12px;
  color: var(--text-light);
  margin: 4px 0 0;
}

.tourprint-route {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 6px;
}

.tourprint-title {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--brown-dark);
  margin: 0 0 10px;
}

.tourprint-meta {
  font-size: 14.5px;
  color: var(--text-light);
  margin: 0 0 20px;
}

.tourprint-price-callout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--cream-alt);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  margin-bottom: 24px;
}

.tourprint-price-callout span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-light);
}

.tourprint-price-callout strong {
  font-size: 18px;
  color: var(--gold-dark);
}

.tourprint-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}

.tourprint-gallery-photo {
  height: 150px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
}

.tourprint-gallery:has(.tourprint-gallery-photo:only-child) {
  grid-template-columns: 1fr;
}

.tourprint-section-title {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--brown-dark);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 6px;
  margin: 0 0 16px;
}

.tourprint-itinerary {
  margin-bottom: 28px;
}

.tourprint-day {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px dashed rgba(var(--shadow-rgb), 0.12);
}

.tourprint-day:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.tourprint-day-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 6px;
}

.tourprint-day-desc {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

.tourprint-day-flight {
  font-size: 12.5px;
  color: var(--text-light);
  margin: 6px 0 0;
}

.tourprint-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 13.5px;
}

.tourprint-table th {
  background: var(--gold-dark);
  color: var(--white);
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
}

.tourprint-table th:first-child { border-radius: 6px 0 0 6px; }
.tourprint-table th:last-child { border-radius: 0 6px 6px 0; }

.tourprint-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.08);
}

.tourprint-table tbody tr:nth-child(even) {
  background: var(--cream-alt);
}

.tourprint-fineprint {
  font-size: 12.5px;
  color: var(--text-light);
  line-height: 1.6;
  text-align: justify;
  margin: 0 0 14px;
}

.tourprint-services {
  margin: 0 0 28px;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.7;
}

.tourprint-footer {
  border-top: 1px solid rgba(var(--shadow-rgb), 0.12);
  padding-top: 16px;
  text-align: center;
}

.tourprint-footer p {
  font-size: 12.5px;
  color: var(--text-light);
  margin: 0 0 6px;
}

.tourprint-disclaimer {
  font-size: 11px;
  font-style: italic;
}

@media print {
  .tourprint-actions {
    display: none !important;
  }
  .tourprint-card {
    box-shadow: none;
    border: none;
  }
}

@media (max-width: 700px) {
  .tourprint-card {
    padding: 24px 20px 28px;
  }
  .tourprint-letterhead {
    flex-direction: column;
  }
  .tourprint-refbox {
    text-align: left;
  }
  .tourprint-gallery {
    grid-template-columns: 1fr;
  }
}

@media print {
  .site-header, .breadcrumb, .site-footer, .whatsapp-float, .voucher-actions, .voucher-lang-switch {
    display: none !important;
  }
  .voucher-card {
    box-shadow: none;
    border: none;
  }
}

@media (max-width: 700px) {
  .voucher-letterhead, .voucher-title-row, .voucher-trip-hero, .voucher-info-grid,
  .voucher-section-title, .voucher-table, .voucher-subtotal-row, .voucher-total-bar, .voucher-note,
  .voucher-footer, .voucher-disclaimer {
    margin-left: 20px;
    margin-right: 20px;
  }
  .voucher-table { width: calc(100% - 40px); }
  .voucher-trip-hero { flex-direction: column; }
  .voucher-trip-thumb { width: 100%; height: 150px; }
  .voucher-info-grid { grid-template-columns: 1fr; }
  .voucher-footer { flex-direction: column; align-items: flex-start; gap: 16px; }
  .voucher-footer-contact { text-align: left; }
}

/* Admin reservation status badges */
.reservation-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.reservation-status-paid {
  background: var(--success-bg);
  color: var(--success);
}

.reservation-status-pending {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.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;
}

/* Print/favorite/share — sit in the same row as the detail tabs, right-aligned */
.detail-tabs-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 0;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  background: var(--white);
  border: 1px solid var(--gold);
  color: var(--gold-dark);
  padding: 0;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-btn:hover {
  background: var(--gold);
  color: var(--white);
}

.action-btn#favoriteBtn.active {
  background: var(--gold);
  color: var(--white);
}

.action-btn#favoriteBtn.active svg {
  fill: currentColor;
}

/* Print */
@media print {
  .site-header,
  .site-footer,
  .breadcrumb,
  .tour-gallery,
  .detail-tabs,
  .tour-detail-side,
  .tour-detail-body > .container:last-child,
  .mobile-book-bar,
  a[href="/turlar"].btn {
    display: none !important;
  }

  .tour-detail-body {
    grid-template-columns: 1fr !important;
  }

  body {
    background: var(--white);
  }
}

/* Breadcrumb */
.breadcrumb {
  background: var(--cream-alt);
  padding: 14px 0;
  font-size: 16px;
  color: var(--text-light);
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.08);
}

.breadcrumb a {
  color: var(--text-light);
}

.breadcrumb a:hover {
  color: var(--gold-dark);
}

.breadcrumb span {
  color: var(--brown-dark);
}

/* Scoped to /turlar specifically (not the base .breadcrumb, which is also
   used on tour-detail/checkout/favoriler and shouldn't change there) — pins
   the breadcrumb+quick-search bar right below the sticky nav, so it's part
   of the "stays fixed" chrome around the independently-scrolling results
   pane below (see .turlar-results). 185px = measured rendered height of
   .site-header at this page's zoom level (html{zoom:0.77}) -- re-measured
   live via Playwright at 1366x768 when the sitewide zoom moved from 0.7. */
.breadcrumb-sticky {
  position: sticky;
  top: 185px;
  z-index: 90;
}

.breadcrumb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.breadcrumb-links {
  white-space: nowrap;
}

/* Quick search — instant suggestions as you type, independent of the sidebar
   filter form (see public/js/turlar.js). */
.quick-search {
  position: relative;
  width: 320px;
  max-width: 100%;
}

.quick-search input {
  width: 100%;
  padding: 10px 18px;
  border: 1px solid rgba(var(--shadow-rgb), 0.15);
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quick-search input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(180, 154, 105, 0.15);
}

.quick-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid rgba(var(--shadow-rgb), 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 360px;
  overflow-y: auto;
  z-index: 50;
  text-align: left;
}

.quick-search-result {
  display: block;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.06);
}

.quick-search-result:last-child {
  border-bottom: none;
}

.quick-search-result:hover {
  background: var(--cream-alt);
}

.quick-search-result-title {
  display: block;
  font-weight: 500;
  color: var(--brown-dark);
  font-size: 15px;
}

.quick-search-result-route {
  display: block;
  font-size: 13px;
  color: var(--text-light);
}

.quick-search-empty {
  padding: 14px 18px;
  color: var(--text-light);
  font-size: 14px;
}

@media (max-width: 720px) {
  .breadcrumb-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .quick-search {
    width: 100%;
  }
}

/* Turlar listing layout */
.turlar-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  padding: 40px 24px 90px;
}

.filter-box {
  background: var(--white);
  border: 1px solid rgba(var(--shadow-rgb), 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  position: sticky;
  /* Matches .breadcrumb-sticky's top (nav + breadcrumb height) so the filter
     box settles in directly below it, not underneath/overlapping it. */
  top: 214px;
}

/* The results list scrolls in its own contained pane once it outgrows the
   space below the fixed nav+breadcrumb, rather than the whole page — nav,
   breadcrumb and the filter sidebar all stay in view the entire time. Once
   this pane reaches its own scroll end, wheel input naturally continues on
   to the page itself (e.g. to reach the footer). */
.turlar-results {
  max-height: calc(100vh - 214px - 12px);
  overflow-y: auto;
  padding-right: 12px;
  margin-right: -12px;
}

.turlar-results::-webkit-scrollbar {
  width: 8px;
}

.turlar-results::-webkit-scrollbar-track {
  background: transparent;
}

.turlar-results::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 999px;
}

.turlar-results::-webkit-scrollbar-thumb:hover {
  background: var(--gold-dark);
}

@media (max-width: 900px) {
  .breadcrumb-sticky {
    position: static;
  }
  .filter-box {
    position: static;
  }
  .turlar-results {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
    margin-right: 0;
  }
}

.filter-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--text-light);
}

.filter-clear {
  color: var(--gold-dark);
  text-decoration: underline;
}

.filter-group-title {
  font-size: 16px;
  margin-bottom: 12px;
}

.filter-apply {
  width: 100%;
  margin-top: 8px;
}

.filter-price-range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.filter-price-range input {
  width: 0; /* flex-basis via flex:1, width:0 stops number-input default sizing from overflowing */
  flex: 1;
  padding: 9px 10px;
  border: 1px solid rgba(var(--shadow-rgb), 0.15);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
}

.filter-price-range input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(180, 154, 105, 0.15);
}

.filter-price-range-sep {
  color: var(--text-light);
}

.filter-group-title {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--shadow-rgb), 0.08);
}

.filter-count {
  color: var(--text-light);
  font-size: 14px;
}

/* Searchable dropdown for long option lists (Kategoriler/Seyahat
   Konseptleri) — type to filter, click to select and submit the form. */
.filter-combobox {
  position: relative;
}

.filter-combobox-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(var(--shadow-rgb), 0.15);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6a55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  cursor: pointer;
}

.filter-combobox-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(180, 154, 105, 0.15);
  cursor: text;
}

.filter-combobox-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid rgba(var(--shadow-rgb), 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
}

.filter-combobox-option {
  padding: 10px 14px;
  font-size: 15px;
  cursor: pointer;
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.06);
}

.filter-combobox-option:last-child {
  border-bottom: none;
}

.filter-combobox-option:hover {
  background: var(--cream-alt);
}

.sort-tabs {
  display: flex;
  gap: 4px;
  background: var(--white);
  border: 1px solid rgba(var(--shadow-rgb), 0.08);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Placed after the base .sort-tabs rule above (not inside the earlier
   max-width:900px block, which sits before it in the file and would
   otherwise be overridden by it — same-specificity rules resolve by source
   order) so the sticky behavior is correctly undone once .turlar-results
   itself stops being an independently-scrolling container on mobile. */
@media (max-width: 900px) {
  .sort-tabs {
    position: static;
  }
}

.sort-tab {
  flex: 1;
  text-align: center;
  padding: 14px;
  font-size: 16px;
  color: var(--text-light);
  border-bottom: 2px solid transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.sort-tab.active {
  color: var(--brown-dark);
  border-bottom-color: var(--gold);
  font-weight: 500;
  background: var(--cream-alt);
}

.tour-list-card {
  display: grid;
  grid-template-columns: 260px 1fr 220px;
  background: var(--white);
  border: 1px solid rgba(var(--shadow-rgb), 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.tour-list-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.tour-list-image {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--cream-alt);
  min-height: 180px;
  cursor: pointer;
}

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

.tour-list-body {
  padding: 22px 24px;
  border-right: 1px solid rgba(var(--shadow-rgb), 0.08);
}

.tour-list-body h3 {
  font-size: 23px;
  margin-bottom: 4px;
}

.tour-list-route {
  color: var(--gold-dark);
  font-size: 16px;
  margin-bottom: 8px;
}

.tour-list-meta {
  font-size: 15px;
  color: var(--text-light);
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.tour-more-dates {
  color: var(--gold-dark);
  font-weight: 500;
}

.status-badge {
  display: inline-block;
  background: var(--danger);
  color: var(--white);
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.status-badge[hidden] {
  display: none;
}

.capacity-note {
  font-size: 13px;
  color: var(--text-light);
  margin: 16px 0 10px;
}

.capacity-note:empty {
  display: none;
}

.btn.sold-out {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.tour-list-airline {
  font-size: 15px;
  color: var(--text-light);
  margin-bottom: 10px;
}

.tour-list-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tour-list-badges span {
  font-size: 14px;
  background: var(--cream-alt);
  color: var(--text-light);
  padding: 5px 12px;
  border-radius: 999px;
}

.tour-list-price-col {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
}

.price-eur {
  font-family: var(--font-heading);
  font-size: 27px;
  color: var(--gold-dark);
  margin: 0;
}

.price-from {
  font-size: 13px;
  color: var(--text-light);
  margin: 0 0 12px;
}

@media (max-width: 960px) {
  .turlar-layout {
    grid-template-columns: 1fr;
  }
  .filter-box {
    position: static;
  }
  .tour-list-card {
    grid-template-columns: 1fr;
  }
  .tour-list-body {
    border-right: none;
    border-bottom: 1px solid rgba(var(--shadow-rgb), 0.08);
  }
}

/* Footer */
.site-footer {
  position: relative;
  margin-top: -70px;
  background: linear-gradient(180deg, var(--gold-dark) 0%, var(--brown) 70%, var(--brown) 100%);
  color: var(--footer-text);
  padding-top: 170px;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: var(--gold-dark);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
}

.footer-col:nth-child(2) {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0 32px;
}

.footer-logo {
  height: 243px;
  margin-bottom: 6px;
}

.footer-col h4 {
  color: var(--white);
  text-transform: uppercase;
  font-size: 21px;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.footer-col ul li {
  margin-bottom: 10px;
  font-size: 21px;
}

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

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-brand-name {
  font-family: var(--font-heading);
  letter-spacing: 2px;
  color: var(--cream);
  font-size: 22.5px;
  margin: 0 0 20px;
}

.footer-social {
  display: flex;
  gap: 14px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: transform 0.2s var(--ease), background 0.2s ease;
}

.social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  color: var(--white);
}

.social-icon:hover {
  transform: translateY(-3px);
}

.social-instagram:hover { background: var(--instagram-pink); }
.social-whatsapp:hover { background: var(--whatsapp-green); }

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--whatsapp-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 999;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.55), 0 3px 10px rgba(0, 0, 0, 0.18);
}

@media (max-width: 640px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--gold);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
  font-size: 19.5px;
  text-align: center;
  color: var(--footer-muted);
}

@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-col:nth-child(2) {
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 32px 0;
    order: -1;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-contact-list li {
    justify-content: center;
  }
  .tour-detail-body {
    grid-template-columns: 1fr;
  }
}

/* Sticky mobile "Rezervasyon Yap" bar (tour-detail.ejs's #mobileBookBar) --
   hidden by default (desktop already has the always-visible sidebar
   booking widget); shown as a fixed bottom bar only at mobile widths. */
.mobile-book-bar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-book-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998; /* below .whatsapp-float's 999, which this same breakpoint moves out of the way below */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--white);
    border-top: 1px solid rgba(var(--shadow-rgb), 0.12);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-book-bar-price {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
  }

  .mobile-book-bar-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
  }

  .mobile-book-bar-price strong {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--gold-dark);
    white-space: nowrap;
  }

  .mobile-book-bar .btn {
    flex-shrink: 0;
    padding: 12px 22px;
  }

  /* The bar covers whatever was at the bottom of the page (the footer) --
     the same lesson as the earlier fixed-admin-header issue: compensate
     with real space on the page itself so nothing real ever renders
     underneath a fixed overlay, checked at 375px and 320px. Approximate,
     generous fixed value (real content, e.g. a short footer, needs less;
     this errs toward "a bit more gap" over "content clipped"). */
  body.tour-detail-page {
    padding-bottom: 84px;
  }

  /* Moves the WhatsApp bubble above the new bar instead of letting the two
     fixed elements overlap in the bottom-right corner. */
  .tour-detail-page .whatsapp-float {
    bottom: 84px;
  }
}

@media (max-width: 480px) {
  .tour-detail-page .whatsapp-float {
    bottom: 78px;
  }
}

@media (max-width: 720px) {
  .nav-toggle {
    display: flex;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    gap: 0;
    display: none;
    box-shadow: var(--shadow);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links li {
    border-top: 1px solid rgba(var(--shadow-rgb), 0.08);
  }
  .nav-links a {
    display: block;
    padding: 16px 24px;
  }
  .nav-links-mobile-only {
    display: block;
  }
  .nav-links a.nav-callback-cta {
    display: inline-flex;
    padding: 13px 28px;
  }
  .topbar-text-item {
    display: none;
  }
  .about-stats {
    flex-wrap: wrap;
    gap: 24px;
  }
  .trust-strip-inner {
    grid-template-columns: 1fr 1fr;
  }
  .category-grid {
    grid-template-columns: 1fr;
  }
  .about-inner {
    grid-template-columns: 1fr;
  }
  .about-photo {
    height: 280px;
    order: -1;
  }
  .why-us-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Page-transition loading overlay — shown briefly while navigating to another
   page (see public/js/main.js). Real full-page navigations, not an SPA, so this
   only needs to appear for the moment between click and the next page's paint. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--cream);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.page-loader.is-active {
  opacity: 1;
  visibility: visible;
}

.page-loader-spinner {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(180, 154, 105, 0.25);
  border-top-color: var(--gold-dark);
  border-right-color: var(--gold);
  animation: page-loader-spin 1s linear infinite;
}

.page-loader-plane {
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 18px;
  height: 18px;
  color: var(--gold-dark);
  transform: rotate(45deg);
}

.page-loader-text {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dark);
}

@keyframes page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-spinner {
    animation-duration: 2.5s;
  }
}

/* Legal pages (Kullanıcı Sözleşmesi / Mesafeli Satış Sözleşmesi / KVKK) --
   a single reading column is more legible for long-form text than the
   site's usual full-width container. */
.legal-content {
  max-width: 820px;
  margin: 0 auto;
}

.legal-content h1 {
  font-size: 32px;
  margin-bottom: 8px;
}

.legal-content .legal-updated {
  color: var(--text-light);
  font-size: 13px;
  margin-bottom: 24px;
}

.legal-content h2 {
  font-size: 20px;
  color: var(--brown-dark);
  margin: 32px 0 12px;
}

.legal-content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 14px;
}

.legal-content ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal-content li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 8px;
}

.legal-content h3 {
  font-size: 17px;
  color: var(--brown-dark);
  margin: 24px 0 10px;
}

/* Business-identifier block on the Mesafeli Satış Sözleşmesi page only
   (content.businessInfo, views/legal-page.ejs) -- kept visually separate
   from the admin-edited body text below it because these 5 fields are live
   (read fresh from the legal_pages row on every request) while the body
   HTML is a saved snapshot, see modules/public-site/routes.js's
   buildBusinessInfo(). */
.legal-business-info {
  background: var(--cream);
  border: 1px solid rgba(var(--shadow-rgb), 0.15);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 32px;
}

.legal-business-info h2 {
  margin-top: 0;
}

.legal-business-info dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
}

.legal-business-info dt {
  font-weight: 600;
  color: var(--text-light);
  font-size: 14px;
}

.legal-business-info dd {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

@media (max-width: 480px) {
  .legal-business-info dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .legal-business-info dd {
    margin-bottom: 8px;
  }
}

/* Footer legal links -- small text row in the copyright bar, matching
   standard e-commerce/travel-site footer practice. */
.footer-legal-links {
  margin-top: 8px !important;
  font-size: 13px !important;
}

.footer-legal-links a {
  color: var(--footer-muted);
  text-decoration: none;
}

.footer-legal-links a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-legal-links .footer-legal-sep {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.25);
}

/* Checkout terms-acceptance checkbox */
.checkout-terms-row {
  margin: 18px 0;
}

.checkout-terms-row a {
  color: var(--gold-dark);
  text-decoration: underline;
}

/* Generic alert banner -- .alert/.alert-error/.alert-success already used
   throughout views/reservation-checkout.ejs but were never actually styled
   for the public site (only admin.css/partner.css defined them, and this
   page loads neither) -- rendered as plain unstyled text before this.
   Colors match admin.css's own --danger/success values for visual
   consistency between the admin panel and the public site. */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 20px;
}

.alert-error {
  background: var(--danger-bg);
  color: var(--danger);
}

.alert-success {
  background: var(--success-bg);
  color: var(--success);
}

/* .empty-state was already used by views/favoriler.ejs (and now
   views/hesap.ejs) but was never actually styled -- same pre-existing gap
   as .alert above. */
.empty-state {
  color: var(--text-light);
  font-size: 15px;
  padding: 8px 0;
}

.btn-sm {
  padding: 8px 20px;
  font-size: 12px;
}

/* ---- Customer membership: signup/login modal ---- */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--shadow-rgb), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.auth-modal-overlay[hidden] {
  display: none;
}

body.auth-modal-open {
  overflow: hidden;
}

.auth-modal {
  background: var(--white);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 36px 48px;
  position: relative;
  /* Without this, a flex item's max-height is only a suggestion -- the
     default min-height:auto lets it grow to fit its content anyway (a
     well-known flexbox gotcha), which is exactly what let a tall pane
     (signup, with 4 field groups) push past the top of short viewports
     instead of engaging its own overflow-y:auto. This forces the browser
     to actually honor max-height + scroll internally. */
  min-height: 0;
}

.auth-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--cream-alt);
  font-size: 20px;
  line-height: 1;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}

.auth-modal-close:hover {
  background: var(--gold);
  color: var(--white);
}

.auth-modal-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.1);
}

.auth-modal-tabs[hidden] {
  display: none;
}

.auth-modal-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 8px 8px 18px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.auth-modal-tab:hover:not(.active) {
  color: var(--brown-dark);
}

.auth-modal-tab.active {
  color: var(--gold-dark);
  border-bottom-color: var(--gold);
}

.auth-modal-pane[hidden] {
  display: none;
}

.auth-modal-pane .form-group {
  margin-bottom: 14px;
}

.auth-modal-pane .form-row {
  grid-template-columns: 110px 1fr;
}

/* E-posta + şifre side by side on signup -- one less stacked row, so the
   pane fits within .auth-modal's max-height without scrolling on a
   shorter screen. A distinct class (not .form-row) so it doesn't collide
   with the 110px/1fr override above, which is specific to the title+phone row. */
.auth-modal-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.auth-modal-split-row .form-group {
  min-width: 0;
}

.auth-modal-pane .form-group label {
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 6px;
}

.auth-modal-pane .form-group input,
.auth-modal-pane .form-group select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(var(--shadow-rgb), 0.15);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  background: var(--cream);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-modal-pane .form-group input:focus,
.auth-modal-pane .form-group select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(180, 154, 105, 0.15);
}

/* Applied via JS only once the browser actually rejects a required field on
   submit (auth-modal.js listens for the native 'invalid' event) -- mirrors
   .checkout-main's identical field-invalid/field-invalid-msg treatment. */
.auth-modal-pane .form-group input.field-invalid {
  border-color: var(--form-error);
  background: var(--form-error-bg);
}

.auth-modal-pane .form-group .field-invalid-msg {
  display: block;
  color: var(--form-error);
  font-size: 12.5px;
  margin-top: 5px;
}

.auth-modal-pane .btn-primary {
  padding: 14px 34px;
  font-size: 15px;
  margin-top: 4px;
}

.auth-modal-pane-title {
  margin-bottom: 10px;
  font-size: 22px;
}

.auth-modal-hint {
  color: var(--text-light);
  font-size: 14px;
  margin: 0 0 24px;
}

.auth-modal-forgot {
  text-align: right;
  margin: -4px 0 24px;
  font-size: 13px;
}

.auth-modal-forgot a {
  color: var(--gold-dark);
}

.auth-modal-forgot a:hover {
  text-decoration: underline;
}

.auth-modal-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* Without this, the unconditional display:flex above (same specificity as
   the browser's own [hidden]{display:none}, and later in the cascade) wins
   over the hidden attribute, so an emptied alert box -- hidden=true,
   innerHTML='' -- still lays out as a visible blank rectangle instead of
   disappearing. Same pattern already used just above for
   .auth-modal-overlay/.auth-modal-tabs/.auth-modal-pane in this same file;
   this box was the one left out. */
.auth-modal-alert[hidden] {
  display: none;
}

.auth-modal-alert-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.auth-modal-alert-error {
  background: var(--danger-bg);
  border-left-color: var(--danger);
  color: var(--danger-text);
}

.auth-modal-alert-success {
  background: var(--success-bg);
  border-left-color: var(--success);
  color: var(--success-text);
}

@media (max-width: 480px) {
  .auth-modal {
    padding: 36px 24px;
  }
  .auth-modal-tab {
    font-size: 19px;
    padding: 6px 6px 14px;
  }
  .auth-modal-pane .form-row {
    grid-template-columns: 1fr;
  }
  .auth-modal-split-row {
    grid-template-columns: 1fr;
  }
}

/* ---- Customer membership: "Hesabım" account page ---- */
.account-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}

/* A slim gold top accent (same device as the trust-strip and the account
   dropdown's own brand touches) instead of a plain white box, plus a
   deeper shadow and more generous padding for a less cramped feel. */
.account-card {
  background: var(--white);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow);
  padding: 36px;
  margin-bottom: 28px;
}

.account-card h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--brown-dark);
  margin-bottom: 22px;
  padding-bottom: 16px;
  /* Was silently rendering as no border at all -- this file never defined
     --border, so var(--border) computed as invalid and fell back to
     border-style: none (confirmed via getComputedStyle before this fix).
     Restored on purpose now that tokens.css provides --border: the CSS
     was always written to show a division line here; it just silently
     stopped doing so. */
  border-bottom: 1px solid var(--border);
}

.account-greeting {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 28px;
}

/* ---- Post-signup welcome interstitial (views/hosgeldiniz.ejs) ---- */
.welcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 40px;
}

/* .page-loader-spinner/.page-loader-plane (shared with the full-screen nav
   loader, public/css/style.css's own "page-loader" block) are self-
   contained -- position:relative, no dependency on that other component's
   fixed full-screen parent -- so reused here as-is rather than duplicating
   the spin animation under a second class name. */
.welcome-spinner {
  margin-bottom: 28px;
}

.welcome-heading {
  margin-bottom: 12px;
  text-wrap: balance;
}

.welcome-subtitle {
  color: var(--text-light);
  font-size: 15px;
  margin-bottom: 32px;
}

.welcome-continue {
  opacity: 0.7;
}

.account-reservation-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 18px 14px;
  border-radius: 8px;
  /* Restored -- see .account-card h2's identical comment above. */
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.account-reservation-row:hover {
  background: var(--cream-alt);
}

.account-reservation-row:last-child {
  border-bottom: none;
}

.account-reservation-code {
  font-weight: 600;
  color: var(--brown-dark);
}

.account-reservation-meta {
  color: var(--text-light);
  font-size: 14px;
}

.account-logout-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--text-light);
  font-size: 14px;
  text-decoration: underline;
}

.account-logout-link:hover {
  color: var(--brown-dark);
}

.account-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.account-status-pill-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.account-status-pill-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

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

/* ---- "Sizi Arayalım" (Call Me Back) header CTA + modal ---- */
/* A plain class selector (not scoped to a .nav-links/.topbar-links
   ancestor) so this pill styling keeps applying regardless of which list
   currently holds it -- ancestor-scoped versions of this rule silently
   stopped matching once the header was restructured and this link moved
   out of .nav-links, which is exactly the kind of breakage a plain class
   selector avoids. */
/* Single merged button: opens the callback modal -- previously a separate
   phone icon sat next to this pill with its own tel: click-to-call
   behavior; absorbed into one action per explicit request. The icon is
   still shown (visual continuity), but the whole pill now does one thing. */
.nav-callback-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  vertical-align: middle;
  background: var(--gold);
  color: var(--white);
  padding: 13px 28px;
  border-radius: 999px;
  font-size: 24px !important;
  letter-spacing: 0.5px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.nav-callback-cta svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

.nav-callback-cta:hover {
  background: var(--gold-dark);
  color: var(--white);
  transform: translateY(-1px);
}

/* Same underline-on-hover the other plain nav links get is wrong for a
   pill-shaped button -- suppressed here rather than overriding ::after's
   own width transition per element. */
.nav-callback-cta::after {
  display: none;
}

.callback-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--shadow-rgb), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.callback-modal-overlay[hidden] {
  display: none;
}

body.callback-modal-open {
  overflow: hidden;
}

.callback-modal {
  background: var(--white);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 610px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 36px 44px;
  position: relative;
}

/* Two fields per row instead of stacking all four -- halves the form's
   vertical footprint so it fits within max-height without scrolling on a
   shorter laptop screen. Scoped here rather than changing the shared
   .form-row (checkout's own 3-column layout relies on that staying as-is). */
.callback-modal .form-row {
  grid-template-columns: 1fr 1fr;
}

/* Konu/Ad Soyad row only -- Konu gets more room since a subject line runs
   longer than a name, Telefon/E-Posta right below stays an even 1fr/1fr via
   .callback-modal .form-row above. A genuinely separate class, not a
   :first-of-type/:nth-child selector layered on .form-row -- this codebase
   has already lost a rule's styling silently once from a position-based
   selector that stopped matching after the markup around it moved (see
   docs/07-business-logic.md's ".nav-callback-cta" history); a class of its
   own can't be broken that way. Self-contained (own display/gap/min-width),
   same shape as .auth-modal-split-row, not layered on top of .form-row. */
.callback-modal-subject-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}

.callback-modal-subject-row .form-group {
  min-width: 0;
}

.callback-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--cream-alt);
  font-size: 20px;
  line-height: 1;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}

.callback-modal-close:hover {
  background: var(--gold);
  color: var(--white);
}

.callback-modal-title {
  font-size: 27px;
  line-height: 1.3;
  margin: 0 0 28px;
  padding-right: 30px;
}

.callback-modal .form-group {
  margin-bottom: 20px;
}

.callback-modal .form-group label {
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 8px;
}

.callback-modal .form-group input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(var(--shadow-rgb), 0.15);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  background: var(--cream);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.callback-modal .form-group input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(180, 154, 105, 0.15);
}

.callback-modal .btn-primary {
  padding: 16px 34px;
  font-size: 15px;
  margin-top: 8px;
}

.callback-modal-alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 24px;
}

.callback-modal-alert-error {
  background: var(--danger-bg);
  color: var(--danger);
}

.callback-modal-alert-success {
  background: var(--success-bg);
  color: var(--success);
}

@media (max-width: 480px) {
  .callback-modal {
    padding: 36px 24px;
  }
  .callback-modal-title {
    font-size: 23px;
  }
  .callback-modal .form-row {
    grid-template-columns: 1fr;
  }
  .callback-modal-subject-row {
    grid-template-columns: 1fr;
  }
}