:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --burgundy: #7b1e3a;
  --burgundy-dark: #5c1530;
  --accent: #eab308;
  --accent-light: #fef9c3;
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --danger: #dc2626;
  --success: #16a34a;
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.logo {
  font-size: 21px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.3px;
}
.logo span { color: var(--burgundy); }
.logo .tld { color: var(--accent); }
.logo:hover { text-decoration: none; }

nav#siteNav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; flex: 1; gap: 6px 4px; }
nav a { font-weight: 500; color: var(--text); font-size: 15px; white-space: nowrap; }
nav a:hover { color: var(--primary); text-decoration: none; }
.btn-nav {
  background: var(--primary);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.btn-nav:hover { background: var(--primary-dark); }

.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
.nav-account {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-left: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.role-bar { background: var(--bg); border-top: 1px solid var(--border); }
.role-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 20px; }
.role-bar a { font-size: 14px; font-weight: 600; color: var(--primary); }

/* A dual-role account gets one row per kind of work. The rows carry a leading label and a
   tinted left edge so it stays obvious which hat a link belongs to — the two inboxes in
   particular are easy to confuse when they share a row. */
.role-bar-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .05); flex: 0 0 auto; cursor: help;
}
.role-bar-supply { box-shadow: inset 3px 0 0 var(--primary); }
.role-bar-supply .role-bar-label { color: var(--primary); background: rgba(37, 99, 235, .1); }

/* The page you are on, in either bar or the main nav. Without this there is no way to tell
   which of several similarly named pages you actually opened. */
.role-bar a.is-current,
.nav-links a.is-current { color: var(--text); border-bottom: 2px solid var(--primary); }

/* Plain-language hint under a nav label. On a pointer device the tooltip carries it and the
   text would only add clutter, so it is hidden there and revealed on the stacked mobile menu
   where there is room and no hover to rely on. */
.nav-hint { display: none; }

/* "Nerede / Ne zaman" on the listing form. Each option carries a line of plain language under
   it, because the difference between "belirli bir tarihte" and "katılımcının belirlediği
   tarihte" is the whole point and a bare radio label does not carry it. */
.mode-choices { display: grid; gap: 8px; margin-bottom: 14px; }
.mode-choice {
  display: flex; align-items: flex-start; gap: 10px; width: auto; font-weight: 400;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; cursor: pointer; background: var(--card);
}
.mode-choice:hover { border-color: var(--primary); }
.mode-choice input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }
.mode-choice span { display: block; }
.mode-choice strong { display: block; font-size: 14px; }
.mode-choice small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.mode-choice:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

.nav-bell { position: relative; display: inline-flex; align-items: center; }
.nav-bell .badge { position: absolute; top: -7px; right: -11px; font-size: 10px; line-height: 1; padding: 3px 5px; }
.nav-avatar { display: inline-flex; align-items: center; }
.nav-avatar img { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .logo { font-size: 18px; }

  nav#siteNav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 8px 20px 16px;
    z-index: 20;
    gap: 0;
  }
  nav#siteNav.open { display: flex; }
  .nav-links, .nav-account {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  .nav-links a, .nav-account a {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  /* No hover on a phone, so the tooltip is unreachable — show the hint as a subtitle instead.
     Only inside the hamburger menu, which is stacked, has the width, and is short. */
  .nav-links .nav-hint {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--muted);
    margin-top: 2px;
  }

  /* The workspace bars sit above the page, not behind the hamburger, so stacking them would
     push every page down by a screen and a half before a word of content appeared. Each stays
     one line and scrolls sideways instead; the group pill stays pinned to the left edge so it
     is still clear which set is being scrolled. The labels are explicit enough on their own
     here ("Gelen Teklif İstekleri"), so the hints stay hidden. */
  .role-bar-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0 16px;
    padding: 6px 20px;
  }
  .role-bar-inner::-webkit-scrollbar { display: none; }
  .role-bar a { padding: 9px 0; white-space: nowrap; flex: 0 0 auto; }
  .role-bar .nav-hint { display: none; }
  .role-bar-label {
    position: sticky; left: 0; flex: 0 0 auto;
    background: var(--bg); box-shadow: 0 0 6px 6px var(--bg);
  }
  .role-bar-supply .role-bar-label { background: #eef2ff; box-shadow: 0 0 6px 6px #eef2ff; }
  .nav-account a:last-child { border-bottom: none; }
  .nav-account .btn-nav { display: inline-block; margin-top: 8px; text-align: center; border-bottom: none; }
}

.help-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.help-item { padding: 16px 20px; margin-bottom: 0; }
.help-item summary { font-weight: 600; cursor: pointer; list-style: none; font-size: 15px; }
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary::before { content: '+'; display: inline-block; width: 18px; color: var(--primary); font-weight: 700; }
.help-item[open] summary::before { content: '−'; }
.help-item p { margin: 12px 0 0 18px; color: var(--text); font-size: 15px; }

.hero-carousel {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  background: #0f172a;
  box-shadow: var(--shadow-lg);
}
.hc-track { position: relative; width: 100%; height: 100%; }
.hc-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.hc-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.hc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 32px;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.85));
  color: #fff;
}
.hc-caption-text { font-weight: 700; font-size: 22px; }
.hc-caption-organizer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-top: 4px;
}
.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.hc-arrow:hover { background: rgba(15, 23, 42, 0.7); }
.hc-prev { left: 16px; }
.hc-next { right: 16px; }
.hc-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.hc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.15s ease;
}
.hc-dot.active { background: var(--accent); }

.hc-slide-promo {
  background: linear-gradient(135deg, var(--primary) 0%, var(--burgundy) 100%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.hc-promo-content { max-width: 620px; text-align: center; padding: 20px 32px; color: #fff; }
.hc-promo-content h2 { color: #fff; font-size: 28px; margin: 14px 0 10px; }
.hc-promo-content p { color: rgba(255,255,255,0.88); font-size: 15px; margin: 0 auto 18px; }
.hc-promo-content .btn { margin-top: 0; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--primary); }
.hc-promo-content .btn:hover { background: rgba(255,255,255,0.9); }

@media (max-width: 640px) {
  .hc-promo-content h2 { font-size: 19px; }
  .hc-promo-content p { font-size: 13px; }
}

@media (max-width: 640px) {
  .hero-carousel { height: 220px; }
  .hc-caption { padding: 14px 18px; }
  .hc-caption-text { font-size: 16px; }
}

main { padding: 32px 20px 60px; min-height: 70vh; }

.hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--burgundy) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 52px 32px 68px;
  margin-bottom: -40px;
  text-align: center;
}
.hero h1 { color: #fff; font-size: 34px; margin: 0 0 10px; font-weight: 800; letter-spacing: -0.5px; }
.hero p { color: rgba(255,255,255,0.88); margin: 0 auto; max-width: 520px; font-size: 16px; }

.search-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 640px;
  margin: 0 auto 32px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#resultsArea { transition: opacity 0.15s ease; min-height: 80px; }
#resultsArea.loading { opacity: 0.45; pointer-events: none; }
.search-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--bg); }
.search-tab {
  flex: 1;
  min-width: 110px;
  background: none;
  border: none;
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.search-tab:hover { color: var(--text); }
.search-tab.active { color: var(--primary); border-bottom-color: var(--accent); background: var(--card); }

.search-panel { display: flex; gap: 8px; padding: 20px; }
.search-panel.hidden { display: none; }
.search-panel input[type=text], .search-panel select {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 15px;
  font-family: inherit;
  background: var(--card);
}
.search-panel .btn { margin-top: 0; white-space: nowrap; }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.section-heading h2 { margin: 0; }
.section-heading .count { color: var(--muted); font-size: 14px; }

h1, h2, h3 { color: var(--text); font-weight: 700; letter-spacing: -0.3px; }

.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-weight: 500;
}
.alert-success { background: #f0fdf4; color: var(--success); border: 1px solid #bbf7d0; }
.alert-error { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }
.alert-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.chat-thread { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; }
.chat-msg { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; max-width: 80%; }
.chat-msg-mine { align-self: flex-end; background: #eff6ff; border-color: #bfdbfe; }
.chat-msg-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.chat-msg-body { font-size: 14px; white-space: pre-wrap; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
/* "Benzer ilanlar" under a listing: smaller cards, three across the listing column. */
.similar-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.similar-head { flex-wrap: wrap; gap: 6px 14px; }
.similar-head h2 { white-space: nowrap; }
.similar-grid .tour-card img { height: 120px; }
.similar-grid .tour-card .body { padding: 12px; }
/* Home page featured block: three to a row on a desktop, two on a tablet, one on a phone. */
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } }

.tour-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tour-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #c7d7fb; }
.tour-card img { width: 100%; height: 170px; object-fit: cover; background: #ddd; }
.tour-card .body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.tour-card h3 { margin: 0 0 6px; font-size: 18px; }
.tour-card .dest { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.tour-card .price { font-weight: 700; color: var(--primary); font-size: 18px; margin-top: auto; }
.tour-card .meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.badge-pending { background: var(--accent-light); color: #854d0e; }
.badge-approved { background: #f0fdf4; color: var(--success); }
.badge-rejected { background: #fef2f2; color: var(--danger); }
.badge-confirmed { background: #f0fdf4; color: var(--success); }
.badge-cancelled { background: #f1f5f9; color: var(--muted); }
.badge-tag { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

form.form-box { max-width: 480px; }
label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 14px; }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}
textarea { resize: vertical; min-height: 100px; }

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; box-shadow: var(--shadow-sm); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b91c1c; }
.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--bg); border-color: var(--primary); }

/* The one action the site most wants a visitor to take — get a quote — in the accent colour
   so it reads as different from every blue button around it. On the blue-to-burgundy hero the
   default link blue was nearly invisible; links there are white and underlined instead. */
.btn-accent { background: var(--accent); color: #1f1300; border: 1px solid transparent; font-weight: 700; box-shadow: 0 6px 18px rgba(234, 179, 8, 0.35); }
.btn-accent:hover { background: #facc15; color: #1f1300; transform: translateY(-1px); }
.btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); color: #fff; }
.hero p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.hero .hero-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero .hero-actions .btn { margin-top: 0; }
/* The small "Teklif Al" on a listing card. A span, not a link, because the card itself is one;
   the footer's click handler sends it to data-href. Sits in the card's bottom row beside the price. */
.tour-card .card-cta { margin-top: 10px; align-self: flex-start; font-size: 13px; padding: 6px 12px; cursor: pointer; }
.tour-card .price + .card-cta { margin-top: 8px; }
.nav-links a.nav-cta { color: #1f1300; background: var(--accent); padding: 6px 14px; border-radius: 999px; font-weight: 700; }
.nav-links a.nav-cta:hover { background: #facc15; }
.btn-sm { padding: 6px 13px; font-size: 13px; margin-top: 0; }

table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
/* footer.php wraps every table in this; on a phone the table keeps a readable width and the
   strip scrolls sideways, instead of the last columns being cut off. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 768px) {
  .table-scroll table { min-width: 640px; }
  .table-scroll { margin: 0 -20px; padding: 0 20px; }
}
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { background: var(--bg); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
th a.sort-th { color: inherit; text-decoration: none; }
th a.sort-th:hover { text-decoration: underline; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }

.tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.tabs a { padding: 8px 16px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 500; transition: all 0.15s ease; }
.tabs a:hover { border-color: var(--primary); text-decoration: none; }
.tabs a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* On a phone the page tabs (admin panel and the like) become one row of chips that scrolls
   sideways, like the role bars, instead of wrapping into a wall of buttons. footer.php scrolls
   the current one into view. */
@media (max-width: 768px) {
  /* A tinted band behind the strip, so the page tabs read as navigation and not as part of the
     content below. The organizer role bars get the same band and chips (further down). */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; margin: 0 -20px 18px; padding: 10px 20px; background: #e8effd; border-top: 1px solid #c7d7fb; border-bottom: 1px solid #c7d7fb; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: 0 0 auto; white-space: nowrap; border-radius: 999px; }
  .role-bar { background: #e8effd; border-color: #c7d7fb; }
  .role-bar-inner { gap: 0 8px; padding: 8px 20px; }
  .role-bar a { padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: 13px; }
  .role-bar a.is-current { background: var(--primary); color: #fff; border-color: var(--primary); }
  .role-bar-label { background: #e8effd; }
  .role-bar-label::after { background: linear-gradient(90deg, #e8effd, rgba(232, 239, 253, 0)); }
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: var(--shadow-sm); }
.stat-card .num { font-size: 26px; font-weight: 800; color: var(--primary); letter-spacing: -0.5px; }
.stat-card .label { color: var(--muted); font-size: 13px; margin-top: 4px; }

.gallery-strip { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.gallery-strip img {
  width: 90px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.gallery-strip img:hover { opacity: 1; }

.video-wrap { position: relative; width: 100%; padding-top: 56.25%; border-radius: 8px; overflow: hidden; background: #000; }
.video-wrap iframe, .video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.itinerary { list-style: none; margin: 0; padding: 0; }
.itinerary li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.itinerary li:last-child { border-bottom: none; }
.itinerary-day {
  flex: 0 0 auto;
  background: var(--burgundy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  height: fit-content;
  white-space: nowrap;
}
.itinerary-text { color: var(--text); }

.site-footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--muted); font-size: 13px; text-align: center; }
/* Pages opened inside the mobile app: the app has its own tabs and menu, so the site's navigation,
   role bars and footer are hidden and only the logo strip remains. See header.php. */
body.in-app .site-header, body.in-app .site-footer, body.in-app .tabs, body.in-app .tabs-select, body.in-app .role-bar { display: none !important; }
body.in-app main { padding-top: 8px; }

/* On the mobile WEBSITE the admin-style page tabs become a picker (footer.php builds it from the
   links): ten chips in a row are more than a thumb wants to drag through. */
.tabs-select { display: none; }
@media (max-width: 768px) {
  .tabs-select { display: block; width: 100%; margin: 0 0 18px; padding: 11px 40px 11px 14px; font-size: 15px; font-weight: 600; color: var(--text);
    background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center;
    border: 1px solid #c7d7fb; border-radius: 10px; box-shadow: var(--shadow-sm); -webkit-appearance: none; appearance: none; }
  .tabs.has-select { display: none; }
  /* Role bars on the mobile website: the group pill stays, the link row becomes one picker. */
  .role-bar.has-select .role-bar-inner { overflow: visible; padding: 8px 20px; gap: 0 10px; align-items: center; }
  .role-bar.has-select .role-bar-inner a { display: none; }
  .role-bar.has-select .role-bar-label { position: static; }
  .role-bar-select.tabs-select { flex: 1 1 auto; width: auto; margin: 0; padding: 9px 36px 9px 12px; font-size: 14px; }
}

/* The Android app badge in the footer: a small dark pill, the way store badges look. */
/* "Bugüne özel" strip on the home page: one special day at a time, thin and wide. */
.today-strip { display: flex; align-items: center; gap: 14px; margin: 14px 36px 0; padding: 8px 10px 8px 14px; background: linear-gradient(90deg, #fff7d6, #fef3c7); border: 1px solid #fde68a; border-radius: 12px; min-height: 48px; }
.today-label { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #92400e; }
.today-items { flex: 1 1 auto; position: relative; min-height: 32px; }
.today-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; }
.today-item.active { opacity: 1; visibility: visible; }
.today-item:hover { text-decoration: none; }
.today-emoji { font-size: 20px; line-height: 1; }
.today-when { flex: 0 0 auto; background: #b45309; color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
.today-item strong { flex: 0 0 auto; font-size: 14px; }
.today-blurb { flex: 1 1 auto; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.today-cta { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--primary); }
.today-all { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #92400e; white-space: nowrap; }
@media (max-width: 768px) {
  .today-strip { margin: 12px 0 0; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .today-items { flex-basis: 100%; min-height: 58px; }
  .today-item { flex-wrap: wrap; white-space: normal; gap: 6px 10px; }
  .today-blurb { flex-basis: 100%; white-space: normal; }
  .today-all { margin-left: auto; }
}
/* Special-days calendar page. */
.special-card .body { gap: 6px; }
.special-top { display: flex; justify-content: space-between; align-items: center; }
.special-card .special-emoji { font-size: 30px; line-height: 1; }
.special-list { display: flex; flex-direction: column; gap: 8px; }
.special-row { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.special-row.is-now { border-color: var(--accent); background: var(--accent-light); }
.special-date { flex: 0 0 46px; text-align: center; line-height: 1; }
.special-day { display: block; font-size: 22px; font-weight: 800; }
.special-mon { display: block; font-size: 11px; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.special-row .special-emoji { flex: 0 0 auto; font-size: 24px; }
.special-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.special-side { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 640px) { .special-row { flex-wrap: wrap; } .special-side { flex-basis: 100%; justify-content: space-between; } }
/* Legal links row in the footer, and the long-form legal pages themselves. */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px 0 10px; font-size: 13px; }
.footer-legal a { color: var(--muted); }
.legal { max-width: 820px; margin: 0 auto; line-height: 1.65; font-size: 15px; }
.legal h1 { font-size: 28px; margin-bottom: 4px; }
.legal h2 { font-size: 19px; margin: 28px 0 8px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.legal-table th, .legal-table td { padding: 8px 10px; font-size: 14px; }
.legal-links { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.footer-app {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  padding: 8px 16px 8px 12px; border-radius: 10px; background: var(--text); color: #fff;
  text-align: left; line-height: 1.15; transition: background 0.15s ease, transform 0.15s ease;
}
.footer-app:hover { background: #1e293b; color: #fff; text-decoration: none; transform: translateY(-1px); }
.footer-app svg { flex: 0 0 auto; color: #a3e635; }
.footer-app strong { display: block; font-size: 13px; font-weight: 700; }
.footer-app small { display: block; font-size: 11px; color: #cbd5e1; margin-top: 2px; }

/* ---------- Home page hero (index.php): rotating marketing banners, a static search box ---------- */
/* Every banner is a full panel (photo, badge, headline, price, button) and fades to the next;
   the first one is the site's own promise with the listing collage. The search form is not part
   of any banner: it sits on the hero's bottom edge and stays put while the banners change. */
.hero2 { position: relative; margin: 16px 0 0; height: 440px; overflow: hidden; background: var(--text); color: #fff; border-radius: 22px; box-shadow: var(--shadow-md); }
.hero2-banner { position: absolute; inset: 0; display: block; color: #fff; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; text-decoration: none; }
.hero2-banner:hover { color: #fff; text-decoration: none; }
.hero2-banner.active { opacity: 1; visibility: visible; z-index: 1; }
.hero2-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero2-bg-fallback { background: linear-gradient(135deg, var(--primary) 0%, var(--burgundy) 100%); }
.hero2-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,23,42,.86) 0%, rgba(15,23,42,.58) 50%, rgba(15,23,42,.25) 100%); }
.hero2-banner-brand::after { background: linear-gradient(90deg, rgba(15,23,42,.35) 0%, rgba(15,23,42,.15) 100%); }
/* Built-in marketing banners: no photo needed. Each theme is a gradient in the site's palette
   with two soft shapes for depth; the text carries the message. */
.hero2-banner-market::after { background: linear-gradient(90deg, rgba(15,23,42,.28) 0%, rgba(15,23,42,0) 70%); }
.hero2-market-bg { overflow: hidden; }
.hero2-market-bg::before, .hero2-market-bg::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.10); }
.hero2-market-bg::before { width: 520px; height: 520px; right: -120px; top: -220px; }
.hero2-market-bg::after { width: 320px; height: 320px; right: 220px; bottom: -200px; background: rgba(255,255,255,.07); }
.theme-wedding .hero2-market-bg { background: linear-gradient(120deg, #7b1e3a 0%, #a8325a 55%, #d97706 100%); }
.theme-boat .hero2-market-bg { background: linear-gradient(120deg, #0c4a6e 0%, #2563eb 55%, #22d3ee 100%); }
.theme-corporate .hero2-market-bg { background: linear-gradient(120deg, #0f172a 0%, #1e3a8a 60%, #2563eb 100%); }
.theme-supply .hero2-market-bg { background: linear-gradient(120deg, #14532d 0%, #0f766e 55%, #eab308 100%); }
.theme-provider .hero2-market-bg { background: linear-gradient(120deg, #3b0764 0%, #7b1e3a 55%, #ea580c 100%); }
.hero2-banner-inner { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 56px 84px; }
.hero2-copy { max-width: 600px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hero2-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.hero2-copy h1, .hero2-copy h2 { margin: 0; font-size: 40px; line-height: 1.08; font-weight: 900; letter-spacing: -1px; color: #fff; }
.hero2-copy > p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 520px; }
.hero2-copy .hero2-price { font-size: 22px; font-weight: 800; color: var(--accent); }
.hero2-deal-badge { background: var(--accent); color: #1f1300; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.hero2-banner-btn { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }
.hero2-sub { font-size: 14px; color: rgba(255,255,255,.85); }
.hero2-sub a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero2-collage { position: relative; width: 400px; height: 300px; flex: 0 0 auto; }
.hero2-collage-item { position: absolute; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(15,23,42,.35); background: #1e293b; }
.hero2-collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero2-collage-item.c1 { left: 0; top: 26px; width: 236px; height: 150px; transform: rotate(-3deg); }
.hero2-collage-item.c2 { right: 0; top: 0; width: 184px; height: 196px; transform: rotate(2deg); }
.hero2-collage-item.c3 { left: 86px; bottom: 0; width: 258px; height: 130px; transform: rotate(1.5deg); }
.hero2-tag { position: absolute; z-index: 2; font-size: 13px; font-weight: 700; border-radius: 10px; padding: 7px 12px; box-shadow: 0 8px 20px rgba(15,23,42,.2); }
.hero2-tag-price { left: 16px; bottom: 16px; background: var(--accent); color: #1f1300; border-radius: 999px; }
.hero2-tag-note { left: 214px; top: 80px; background: var(--card); color: var(--text); display: flex; flex-direction: column; gap: 1px; }
.hero2-tag-note .muted { font-size: 11px; font-weight: 600; }
.hero2-arrow { position: absolute; top: 50%; z-index: 3; transform: translateY(-60%); width: 40px; height: 40px; border-radius: 50%; background: rgba(15,23,42,.45); border: 1px solid rgba(255,255,255,.4); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hero2-arrow:hover { background: rgba(15,23,42,.75); }
.hero2-prev { left: 18px; }
.hero2-next { right: 18px; }
.hero2-dots { position: absolute; right: 56px; bottom: 96px; z-index: 3; display: flex; gap: 6px; align-items: center; }
.hero2-dot { width: 8px; height: 8px; border-radius: 999px; border: none; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: width .2s ease; }
.hero2-dot.active { width: 22px; background: var(--accent); }
/* The static search box, overlapping the hero's bottom edge. */
.hero2-search { position: relative; z-index: 4; margin: -64px 56px 0; display: flex; gap: 8px; background: var(--card); padding: 8px; border-radius: 14px; box-shadow: 0 12px 30px rgba(15,23,42,.25); }
.hero2-search-field { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; border-radius: 10px; background: var(--bg); color: var(--muted); margin: 0; font-weight: 400; }
.hero2-search-field input { border: none; background: transparent; padding: 0; height: 100%; font-size: 15px; box-shadow: none; }
.hero2-search-field input:focus { box-shadow: none; }
.hero2-search .btn { margin-top: 0; height: 48px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 10px; white-space: nowrap; }
.hero2-search .hero2-cta { padding: 0 26px; font-size: 16px; }
.hero2-compact { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 6px; font-size: 14px; }

.proof-strip { position: relative; z-index: 3; margin: 18px 36px 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--shadow-sm); }
.proof-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.proof-stat { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.proof-n { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; color: var(--primary); line-height: 1; }
.proof-l { font-size: 13px; color: var(--muted); }
.proof-cta { display: flex; flex-direction: column; gap: 3px; text-align: right; font-size: 13px; }
.proof-cta strong { font-size: 15px; color: var(--primary); }
.proof-cta:hover { text-decoration: none; }
.home-block { margin-top: 40px; }
.home-block-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-chip { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text); }
.cat-chip:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.cat-chip-more { color: var(--primary); border-style: dashed; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.step-n { width: 32px; height: 32px; border-radius: 50%; background: var(--burgundy); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.step h3 { margin: 10px 0 6px; font-size: 16px; }
.step p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 1000px) {
  .hero2-collage { display: none; }
  .hero2-copy { max-width: none; }
}
@media (max-width: 768px) {
  .hero2 { height: 400px; margin: 10px 0 0; border-radius: 16px; }
  .hero2-banner::after { background: linear-gradient(180deg, rgba(15,23,42,.35) 0%, rgba(15,23,42,.9) 65%); }
  .hero2-banner-brand::after { background: linear-gradient(180deg, rgba(15,23,42,.2) 0%, rgba(15,23,42,.45) 100%); }
  .hero2-banner-inner { padding: 22px 20px 96px; align-items: flex-end; }
  .hero2-copy { gap: 10px; }
  .hero2-copy h1, .hero2-copy h2 { font-size: 27px; letter-spacing: -0.6px; }
  .hero2-copy > p { font-size: 14px; line-height: 1.45; }
  .hero2-copy .hero2-price { font-size: 18px; }
  .hero2-sub { font-size: 13px; }
  .hero2-arrow { display: none; }
  .hero2-dots { right: 20px; bottom: 76px; }
  .hero2-search { margin: -56px 20px 0; flex-wrap: wrap; }
  .hero2-search-field { flex: 1 1 100%; }
  .hero2-search .btn { flex: 1 1 0; justify-content: center; height: 46px; }
  .hero2-search .hero2-cta { flex: 2 1 0; }
  .proof-strip { margin: 14px 0 0; padding: 14px 16px; flex-direction: column; align-items: stretch; }
  .proof-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .proof-n { font-size: 22px; }
  .proof-cta { text-align: left; border-top: 1px solid var(--border); padding-top: 12px; }
  .home-block { margin-top: 28px; }
  .cat-chip { font-size: 13px; padding: 7px 12px; }
  .steps { grid-template-columns: 1fr; }
}

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }

.stops-map { width: 100%; height: 380px; border-radius: var(--radius); border: 1px solid var(--border); margin-top: 8px; z-index: 1; }
.stop-search { display: flex; gap: 8px; margin-top: 8px; position: relative; }
.stop-search input { flex: 1; }
.stop-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md); margin-top: 4px; max-height: 220px; overflow-y: auto;
}
.stop-search-results div { padding: 10px 14px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--border); }
.stop-search-results div:last-child { border-bottom: none; }
.stop-search-results div:hover { background: var(--bg); }
.stop-list { list-style: none; margin: 12px 0 0; padding: 0; }
.stop-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.stop-list li:last-child { border-bottom: none; }
.stop-list input[type=text] { flex: 1; }
.stop-number {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700;
}
.stop-remove { flex: 0 0 auto; background: none; border: none; color: var(--danger); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px; }
.stop-remove:hover { opacity: 0.7; }

.category-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 6px 6px 6px 12px; font-size: 13px; }
.category-chip-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; }
.category-chip-remove:hover { opacity: 0.7; }

.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-col-grid > * { min-width: 0; }

.tour-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-top: 16px; align-items: start; }
.tour-layout > * { min-width: 0; }

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

@media (max-width: 768px) {
  /* The table is its own horizontal scroller here. Nothing on screen said so, so the columns
     past the right edge were simply invisible — these four layers are the standard scrolling
     shadow: the white pair masks the dark pair, and because the white pair scrolls WITH the
     content (background-attachment: local) the shadow only shows on a side there is more to
     reach. Pure CSS, and it disappears by itself once you scroll to the end. */
  table {
    display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
    background-image:
      linear-gradient(to right,  var(--card) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to left,   var(--card) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to right,  rgba(15, 23, 42, .16), rgba(15, 23, 42, 0)),
      linear-gradient(to left,   rgba(15, 23, 42, .16), rgba(15, 23, 42, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* List tables become a stack of cards (footer.php adds .stack and the data-label of each
     cell). The action buttons were the last column, off the right edge of every phone; here
     they close the card, full width, no sideways scrolling. */
  .table-scroll table.stack { min-width: 0; width: 100%; white-space: normal; background-image: none; overflow: visible; }
  table.stack, table.stack tbody { display: block; }
  table.stack .stack-head { display: none; }
  table.stack tr { display: block; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 6px 12px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
  table.stack td { display: block; position: relative; padding: 7px 0 7px 38%; border-bottom: 1px solid var(--border); font-size: 14px; overflow-wrap: anywhere; }
  table.stack td:last-child { border-bottom: none; }
  table.stack td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 9px; width: 34%; font-size: 11px; line-height: 1.3; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
  table.stack td:first-child { font-size: 15px; padding: 9px 0 7px; }
  table.stack td:first-child[data-label]::before { display: none; }
  table.stack td.actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 8px; }
  table.stack td.actions::before { display: none; }
  table.stack td.actions .btn, table.stack td.actions form { flex: 1 1 auto; text-align: center; }
  table.stack td.actions .btn { justify-content: center; }
  table.stack td:empty { display: none; }
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  display: inline-block;
  flex-shrink: 0;
}
.icon-sm { width: 0.75em; height: 0.75em; }
.icon-star { width: 18px; height: 18px; color: var(--accent); vertical-align: -0.2em; margin-right: 2px; }
.icon-star-empty { color: var(--border); }
.badge-tag .icon, .dest .icon, .tour-card .dest .icon { margin-right: 3px; }
th a.sort-th { display: inline-flex; align-items: center; }
.hc-arrow .icon { width: 18px; height: 18px; }
.search-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
nav a[href$="notifications.php"] { display: inline-flex; align-items: center; gap: 4px; }

.hidden { display: none !important; }

/* Visible to screen readers/search engines but not sighted users — for a page's real <h1> when
   the visual heading needs to be a different tag for styling reasons (e.g. matching a card). */
/* Breadcrumb trail on listing and profile pages (mirrors the BreadcrumbList structured data). */
.crumbs { font-size: 13px; margin: 0 0 12px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.crumbs li + li::before { content: '›'; color: var(--muted); margin-right: 4px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); font-weight: 500; }
.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; }

/* Multi-step wizard (registration, etc.) */
.wizard-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.wizard-step {
  width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.15s ease;
}
.wizard-step.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.wizard-step.done { background: var(--success); border-color: var(--success); color: #fff; }
.wizard-step-line { flex: 1; height: 2px; background: var(--border); }
.wizard-step-line.done { background: var(--success); }

.role-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 10px; }
.role-choice-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 20px; font: inherit; color: inherit; transition: all 0.15s ease;
}
.role-choice-card:hover { border-color: #c7d7fb; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.role-choice-card.selected { border-color: var(--primary); background: #eff4ff; }
.role-choice-card h3 { margin: 0 0 6px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.role-choice-card p { margin: 0; color: var(--muted); font-size: 13px; }

/* Listing detail tabs (tour.php, tedarik-ilani.php): a tab bar on a desktop, an accordion on a
   phone, driven by footer.php. Lists of included / excluded items carry a tick or a cross. */
.detail-tabs { margin-top: 16px; }
.detail-tabbar { display: flex; gap: 4px; align-items: flex-end; padding: 0 10px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.detail-tabbar::-webkit-scrollbar { display: none; }
/* Framed tabs: each one a folder tab, the active one white and joined to the panel below it. */
.detail-tab { flex: 0 0 auto; position: relative; background: var(--bg); border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; margin-bottom: -1px; padding: 10px 16px 11px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; box-shadow: inset 0 3px 0 transparent; }
.detail-tab:hover { color: var(--text); background: #eef2ff; }
.detail-tab.active { background: var(--card); color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); z-index: 1; }
.detail-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--card); }
.detail-panel { display: none; }
.detail-panel.active { display: block; }
.detail-panel .detail-body { background: var(--card); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 10px 10px; padding: 18px 20px; }
.detail-body > h3:first-child { margin-top: 0; }
.detail-body .sub-head { margin: 20px 0 8px; font-size: 16px; }
.detail-acc { display: none; }
.mark-list { list-style: none; margin: 0; padding: 0; }
.mark-list li { position: relative; padding: 6px 0 6px 28px; border-bottom: 1px solid var(--border); font-size: 15px; }
.mark-list li:last-child { border-bottom: 0; }
.mark-list li::before { position: absolute; left: 4px; top: 6px; font-weight: 700; }
.mark-check li::before { content: "\2713"; color: #15803d; }
.mark-cross li::before { content: "\2717"; color: #b91c1c; }
.mark-dot li::before { content: "\2022"; color: var(--primary); }
.two-col-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) {
  .two-col-lists { grid-template-columns: 1fr; }
  .detail-tabbar { display: none; }
  .detail-panel { display: block; border: 1px solid var(--border); border-radius: 10px; background: var(--card); margin-bottom: 10px; }
  .detail-acc { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; padding: 14px 16px; font: inherit; font-size: 16px; font-weight: 700; color: var(--text); text-align: left; cursor: pointer; }
  .detail-acc .icon { flex-shrink: 0; transition: transform .15s; }
  .detail-panel.open .detail-acc .icon { transform: rotate(180deg); }
  .detail-panel .detail-body { display: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 14px 16px; }
  .detail-panel.open .detail-body { display: block; }
}

/* One-button POST forms that replaced the old action links; they sit inline like the links did. */
.inline-form { display: inline-block; margin: 0; }
.inline-form + .inline-form { margin-left: 6px; }
.actions .inline-form .btn { margin-top: 0; }
@media (max-width: 768px) {
  table.stack td.actions .inline-form { display: block; margin-left: 0; }
  table.stack td.actions .inline-form .btn { width: 100%; }
}

/* Android install bar (header.php, androidAppPromo()): one slim row above the site header. */
.app-promo { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #0f172a; color: #fff; font-size: 13px; }
.app-promo[hidden] { display: none; }
.app-promo-icon { font-size: 22px; }
.app-promo-text { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.app-promo-text strong, .app-promo-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-promo-text small { color: #cbd5e1; font-size: 12px; }
.app-promo-btn { margin: 0; background: var(--accent); color: #1f1300; border-color: var(--accent); white-space: nowrap; }
.app-promo-close { background: none; border: 0; color: #cbd5e1; font-size: 22px; line-height: 1; padding: 0 2px; cursor: pointer; }

/* Visitor's quick-request history (hizli-teklif.php). */
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 4px 0 12px 14px; font-size: 14px; }
.timeline li::before { content: ""; position: absolute; left: -20px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.timeline li.tl-ok::before { background: #15803d; }
.timeline li.tl-route::before { background: var(--primary); }
.timeline li.tl-offer::before { background: var(--accent); }
.timeline li.tl-bad::before { background: #b91c1c; }
.tl-when { display: block; font-size: 12px; color: var(--muted); }

/* Filter panels on the provider boards (organizer/requests.php, organizer/supplier_demands.php). */
.filter-panel { margin-bottom: 16px; padding: 14px 16px; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.filter-grid label { font-size: 13px; margin-bottom: 4px; }
.filter-grid input, .filter-grid select { margin: 0; width: 100%; }
.filter-grid .span-2 { grid-column: span 2; }
.filter-grid .filter-check { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13.5px; margin: 0; padding-bottom: 8px; }
.filter-grid .filter-check input { width: auto; margin: 0; }
.filter-grid .filter-actions { display: flex; gap: 8px; grid-column: span 2; justify-content: flex-end; }
.filter-grid .filter-actions .btn { margin: 0; }
@media (max-width: 900px) { .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .filter-grid { grid-template-columns: 1fr; } .filter-grid .span-2, .filter-grid .filter-actions { grid-column: span 1; } }

/* Search box inside a section hero (kategoriler.php, tedarik-turleri.php): filters only that page. */
.hero-search { display: flex; align-items: center; gap: 8px; max-width: 560px; margin: 22px auto 0; padding: 6px 6px 6px 14px; background: #fff; border-radius: 12px; box-shadow: 0 10px 26px rgba(15,23,42,.22); text-align: left; }
.hero-search .icon { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.hero-search input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0; height: 40px; font-size: 15px; box-shadow: none; color: var(--text); }
.hero-search input:focus { outline: none; box-shadow: none; }
.hero-search .btn { margin: 0; height: 40px; padding: 0 18px; border-radius: 9px; }
.grid > [hidden] { display: none !important; }
@media (max-width: 520px) { .hero-search .btn { padding: 0 12px; } }

/* What the requester asked for, as one block under the Talep heading (requestFactsHtml()). */
.request-message { font-size: 15px; padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; }
.facts-title { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
table.facts { box-shadow: none; border: 1px solid var(--border); }
table.facts td { padding: 8px 12px; font-size: 14px; }
table.facts td:first-child { color: var(--muted); width: 42%; }

/* The price / booking / quote card on a listing page stays in view while the details scroll
   (desktop); on a phone a slim fixed bar takes over once the card has scrolled away (footer.php). */
@media (min-width: 861px) {
  .tour-layout .booking-card { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
}
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(15,23,42,.12); }
.sticky-cta.show { display: flex; }
.sticky-cta .sticky-cta-price { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 17px; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .btn { margin: 0; white-space: nowrap; }
body.has-sticky-cta { padding-bottom: 72px; }
body.in-app .sticky-cta { bottom: 0; }
.booking-card { scroll-margin-top: 80px; }

/* Attendee interest categories: chips on the register form, cards on attendee/interests.php. */
.interest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.interest-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 13.5px; font-weight: 500; cursor: pointer; margin: 0; }
.interest-chip input { width: auto; margin: 0; }
.interest-chip.on { border-color: var(--primary); background: #eef2ff; color: var(--primary); }
.interest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.interest-card { position: relative; display: block; border: 2px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--card); margin: 0; font-weight: 400; }
.interest-card img { display: block; width: 100%; height: 90px; object-fit: cover; }
.interest-card input { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }
.interest-card .interest-name { display: block; padding: 8px 10px 0; font-weight: 700; font-size: 14px; }
.interest-card .interest-subs { display: block; padding: 2px 10px 10px; font-size: 12px; color: var(--muted); }
.interest-card.on { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

/* Request forms for the hurried: one-tap sentence chips, quick picks, the composed text box. */
.fill-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.fill-title { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
.fill-chip { display: inline-flex; align-items: center; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; cursor: pointer; margin: 0; width: auto; }
.fill-chip:hover { border-color: var(--primary); color: var(--primary); }
.fill-chip.on { border-color: var(--primary); background: #eef2ff; color: var(--primary); }
.fill-chip.on::before { content: '\2713'; margin-right: 5px; font-weight: 700; }
.two-col-grid .fill-chips, input + .fill-chips { margin-top: 6px; }
.two-col-grid .fill-chip, input + .fill-chips .fill-chip { padding: 3px 9px; font-size: 12px; }
textarea.composed { background: #fbfcff; border-style: dashed; }
.compose-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.linklike { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; width: auto; }
a.fill-chip { text-decoration: none; }

/* The register nudge above the quick-quote form: bright enough to be read, not a faded info box. */
.register-pitch { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 2px solid var(--accent); border-radius: 14px; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); box-shadow: 0 8px 24px rgba(234, 179, 8, 0.22); }
.register-pitch .rp-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #1f1300; display: flex; align-items: center; justify-content: center; }
.register-pitch .rp-icon svg { width: 22px; height: 22px; }
.register-pitch strong { display: block; font-size: 17px; color: #1f1300; margin-bottom: 4px; }
.register-pitch p { margin: 0 0 10px; font-size: 14px; color: #3f3a1f; }
.register-pitch .rp-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font-size: 13px; }
.register-pitch .rp-actions .btn { padding: 9px 18px; }
@media (max-width: 600px) { .register-pitch { flex-direction: column; gap: 10px; } }

/* "Google ile devam et" on login and register. */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #fff; color: #1f2937; border: 1px solid var(--border); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.btn-google:hover { background: #f8fafc; border-color: #cbd5e1; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted); font-size: 13px; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* The listing a visitor's quick quote is about, on top of hizli-teklif.php. */
.quote-for-tour { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: inherit; text-decoration: none; }
.quote-for-tour:hover { border-color: var(--primary); }
.quote-for-tour img { width: 88px; height: 66px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.quote-for-tour > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.quote-for-tour small { color: var(--muted); font-size: 12px; }
.quote-for-tour strong { font-size: 15px; line-height: 1.3; }

/* The organizer's logo on its listings: a white badge on the card photo, and beside the name on the page. */
.tour-card { position: relative; }
.tour-card img.org-badge { position: absolute; top: 10px; left: 10px; z-index: 1; width: 96px; height: 34px; object-fit: cover; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25); }
.similar-grid .tour-card img.org-badge { width: 78px; height: 28px; }
.org-inline-link { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
img.org-inline { width: 72px; height: 26px; object-fit: cover; background: #fff; border: 1px solid var(--border); border-radius: 6px; }

/* Kampanyalar: the ribbon on cards and listing pages. */
.promo-ribbon { display: inline-block; background: linear-gradient(135deg, #dc2626, #f97316); color: #fff; font-weight: 700; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; box-shadow: 0 3px 10px rgba(220, 38, 38, 0.35); white-space: nowrap; }
.tour-card > .promo-ribbon { position: absolute; top: 10px; right: 10px; z-index: 1; max-width: calc(100% - 130px); overflow: hidden; text-overflow: ellipsis; }
.promo-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.promo-box s { font-size: 15px; }
.promo-ends { font-size: 12.5px; color: #b91c1c; font-weight: 600; width: 100%; }
.promo-hero { background: linear-gradient(135deg, #b91c1c 0%, #f97316 55%, #facc15 100%); }
.site-footer a.footer-hot { color: #dc2626; font-weight: 700; }

/* Search landing pages: popular-search links in the footer, FAQ on the page. */
.footer-popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0 0 14px; font-size: 13px; }
.footer-popular span { color: var(--muted); font-weight: 600; }
.footer-popular a { color: var(--muted); }
.faq-item { border-top: 1px solid var(--border); padding: 10px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { margin: 8px 0 0; font-size: 14px; }

/* "Benzer bir ... katılırım" on listing pages, and the similar requests under them. */
.similar-box { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); text-align: center; }
.similar-box.primary { border-top: 0; padding-top: 0; }
.similar-box.primary .btn { width: 100%; }
.similar-box form { display: inline; }
.request-card { display: flex; flex-direction: column; font-size: 14px; }
.similar-box.primary form { display: block; }

/* "Kullanıcıların yaptığı diğer aramalar" under search results, two columns like Google. */
.related-searches { margin-top: 40px; }
.related-searches h2 { font-size: 22px; font-weight: 500; margin-bottom: 14px; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 820px; }
.related-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: #f1f3f4; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 15px; }
.related-item:hover { background: #e8eaed; text-decoration: none; }
.related-item strong { font-weight: 700; }
.related-item svg { flex-shrink: 0; color: var(--muted); width: 18px; height: 18px; }
@media (max-width: 600px) { .related-grid { grid-template-columns: 1fr; } }

/* ---- Mobile pass for admin and moderator pages (2026-09-29) ---- */
.table-scroll.stack-wrap { margin: 0; padding: 0; overflow: visible; }
.stat-card .num { overflow-wrap: anywhere; }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.list-tools input { flex: 1 1 240px; max-width: 420px; margin: 0; }
.list-tools span { font-size: 13px; }
.list-more { display: block; width: 100%; max-width: 420px; margin: 4px auto 20px; }
@media (max-width: 768px) {
  .stat-card { padding: 14px 10px; }
  .stat-card .num { font-size: clamp(18px, 6.2vw, 26px); }
  /* Compact admin cards: the title, then every field as a small labelled pair side by side,
     then the buttons. About a third of the height of one field per row. */
  table.stack.compact tr { padding: 10px 12px 6px; }
  table.stack.compact td:first-child { padding: 2px 0 6px; font-weight: 600; }
  table.stack.compact td[data-label] { display: inline-block; vertical-align: top; padding: 3px 14px 3px 0; border: 0; font-size: 13.5px; max-width: 100%; }
  table.stack.compact td[data-label]::before { position: static; display: block; width: auto; font-size: 10px; margin-bottom: 1px; }
  table.stack.compact td.actions { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
  /* A thumb needs about 40px: small buttons grow on a phone. */
  .btn-sm, table.stack td.actions .btn { min-height: 38px; }
}
.list-tools input[type=search] { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 15px; background: var(--card); }
.list-tools input[type=search]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
@media (max-width: 768px) {
  table.stack.compact td:first-child { display: block; padding-right: 0; font-size: 15px; }
  table.stack.compact td:first-child::before { display: none; }
}
/* A long figure (revenue) gets smaller instead of breaking in the middle of the number. */
.stat-card .num-long { font-size: 20px; white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 768px) { .stat-card .num-long { font-size: clamp(14px, 4.4vw, 18px); } }
/* Searchable checkbox list replacing admin multi-selects (footer.php). */
.check-picker { border: 1px solid var(--border); border-radius: 10px; background: var(--card); padding: 8px; }
.check-picker input[type=search] { width: 100%; margin: 0 0 6px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; }
.check-picker-list { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.check-picker-list label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 6px; border-radius: 6px; font-weight: 400; font-size: 14px; cursor: pointer; min-height: 40px; }
.check-picker-list label.on { background: #eef2ff; }
.check-picker-list input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.check-picker-count { font-size: 12.5px; margin-top: 6px; }
/* Phone menu: admin shortcuts with counts, a labelled bell, hints that wrap. */
.nav-admin-quick, .nav-bell-label { display: none; }
@media (max-width: 768px) {
  .nav-admin-quick { display: flex; flex-direction: column; margin: 2px 0 6px 14px; border-left: 2px solid var(--border); padding-left: 12px; }
  .nav-links .nav-admin-quick a { padding: 10px 0; font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .nav-links .nav-admin-quick a:last-child { border-bottom: 0; }
  .nav-bell { gap: 8px; }
  .nav-bell-label { display: inline; }
  .nav-bell .badge { position: static; margin-left: auto; font-size: 11px; padding: 3px 7px; }
  .nav-links .nav-hint { white-space: normal; }
}
/* Dashboard figures are links to what they count. */
a.stat-card { display: block; color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
a.stat-card:hover, a.stat-card:focus-visible { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
a.stat-card .label::after { content: ' →'; opacity: .55; }
.stat-grid-waiting a.stat-card .num { color: var(--muted); }
.stat-grid-waiting a.stat-card.has-work { border-color: #f59e0b; background: #fffbeb; }
.stat-grid-waiting a.stat-card.has-work .num { color: #b45309; }
h2 a.h-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
h2 a.h-link:hover { color: var(--primary); }
h2 a.h-link svg { width: 20px; height: 20px; }

/* ---- Mobile pass for the public pages (2026-09-29) ---- */
@media (max-width: 600px) {
  /* Listing cards (they have a price) become a row: square photo left, the facts right. A phone
     shows four or five listings per screen instead of one and a half. */
  .grid, .grid-3 { gap: 12px; }
  .tour-card:has(.price) { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; padding: 10px; align-items: start; }
  .tour-card:has(.price):hover { transform: none; }
  .tour-card:has(.price) > img:not(.org-badge) { width: 112px; height: 112px; border-radius: 10px; grid-row: 1 / span 2; }
  .tour-card:has(.price) .body { padding: 0; min-width: 0; }
  .tour-card:has(.price) h3 { font-size: 15px; line-height: 1.3; margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tour-card:has(.price) .dest { font-size: 12.5px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tour-card:has(.price) .tags { display: none; }
  .tour-card:has(.price) .meta { font-size: 12px; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .tour-card:has(.price) .price { font-size: 15px; margin-top: 2px; }
  .tour-card:has(.price) .price s { font-size: 12px !important; }
  .tour-card:has(.price) .price br { display: none; }
  .tour-card:has(.price) .card-cta { margin-top: 6px; min-height: 34px; display: inline-flex; align-items: center; }
  .tour-card:has(.price) .promo-ends { font-size: 11.5px; margin-top: 2px !important; }
  /* Logo badge and campaign ribbon sit on the photo instead of over the text. */
  .tour-card:has(.price) img.org-badge { top: 14px; left: 14px; width: 62px; height: 22px; border-radius: 5px; }
  .tour-card:has(.price) > .promo-ribbon { top: auto; right: auto; left: 14px; top: 96px; max-width: 104px; font-size: 10.5px; padding: 3px 7px; }

  /* Category and type cards (no price): two to a row, photo and name, no paragraph. */
  .grid:not(:has(.price)):has(> .tour-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-card:not(:has(.price)) > img { height: 96px; }
  .tour-card:not(:has(.price)) .body { padding: 10px 10px 12px; }
  .tour-card:not(:has(.price)) h3 { font-size: 14px; line-height: 1.3; margin: 0 0 4px; }
  .tour-card:not(:has(.price)) .body > p { display: none; }
  .tour-card:not(:has(.price)) .meta { font-size: 12px; margin: 0 !important; }
  .tour-card:not(:has(.price)) .meta .badge { display: none; }

  /* Chips a thumb can hit. */
  .fill-chip, .footer-popular a { min-height: 34px; display: inline-flex; align-items: center; }
  .fill-chips { gap: 8px; }

  /* Long headings and key/value tables wrap instead of pushing the page sideways. */
  .section-heading h2, .similar-head h2 { white-space: normal; }
  table.kv, table.kv tbody, table.kv td, table.kv th { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  /* Supply listing cards: the description paragraph and the extra type line stay on the listing page. */
  .tour-card:has(.price) .body > p:has(~ .price) { display: none; }
  .tour-card:has(.price) .body > .dest ~ .dest { display: none; }
  .tour-card:has(.price) .body > .price ~ p { font-size: 11.5px !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .tour-card:has(.price) h3 .badge { font-size: 10px; padding: 2px 6px; vertical-align: middle; }
  /* Page titles in the coloured band: smaller, and a long word such as a domain may break. */
  .hero h1 { font-size: clamp(24px, 7vw, 30px); overflow-wrap: anywhere; }
  /* Slider dots stay small to look at but get a finger-sized tap area. */
  .hero2-dot { position: relative; }
  .hero2-dot::after { content: ''; position: absolute; inset: -14px -6px; }
}

/* ---------- Share buttons (WhatsApp first: trips get planned in WhatsApp groups) ---------- */
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; text-decoration: none; line-height: 1.2; }
.share-btn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.share-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.share-btn.share-wa { background: #25d366; border-color: #25d366; color: #fff; }
.share-btn.share-wa:hover { background: #1ebe5a; border-color: #1ebe5a; color: #fff; }
.share-btn.copied { border-color: var(--success); color: var(--success); }
.hero .share-row { justify-content: center; }
@media (max-width: 640px) {
  .share-btn { padding: 9px 13px; }
  /* On a phone the native share sheet already offers copy, so the copy button steps aside. */
  .share-row:has(.share-native:not([hidden])) .share-copy { display: none; }
}

/* ---------- Katalog içe aktarma (admin) ---------- */
.ci-source { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 8px; }
.ci-choice { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font-weight: 400; }
.ci-choice:has(input:checked) { border-color: var(--primary); background: #eff6ff; }
.ci-choice span { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.ci-consent { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin-top: 14px; font-size: 14px; }
.ci-consent input { margin-top: 3px; flex-shrink: 0; width: auto; }
.ci-bar { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 8px; }
.ci-bar span { display: block; height: 100%; background: var(--primary); transition: width .3s; }
.ci-tools { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.ci-tools label { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin: 0; }
.ci-tools select { width: auto; max-width: 260px; margin: 0; }
.ci-table td { vertical-align: top; }
.ci-table input[type=text], .ci-table input[type=number], .ci-table select { margin: 0; padding: 6px 8px; font-size: 13.5px; }
.ci-table .ci-title { min-width: 240px; }
.ci-table .ci-dest { min-width: 140px; }
.ci-table .ci-cat { max-width: 190px; }
.ci-table .ci-dur { width: 70px; }
.ci-price { display: flex; gap: 4px; }
.ci-price .ci-pr { width: 90px; }
.ci-price .ci-cur { width: 72px; }
.ci-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; display: block; background: var(--border); }
.ci-small { font-size: 12px; display: inline-block; margin-top: 3px; font-weight: 400; }
.ci-weak { opacity: .6; }
.ci-weak:has(.ci-pick:checked) { opacity: 1; }
.ci-results li { margin: 4px 0; }
.ci-group { font-size: 18px; margin: 22px 0 8px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ci-diff div { margin: 1px 0; }
/* Wizard: numbered step bar and one panel at a time */
.wz-steps { display: flex; list-style: none; padding: 0; margin: 16px 0 18px; counter-reset: none; gap: 0; }
.wz-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; font-size: 12.5px; color: var(--muted); text-align: center; min-width: 0; }
.wz-steps li::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.wz-steps li:first-child::before { display: none; }
.wz-steps li.done::before, .wz-steps li.current::before { background: var(--primary); }
.wz-num { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--card); border: 2px solid var(--border); color: var(--muted); }
.wz-steps li.done .wz-num { background: var(--primary); border-color: var(--primary); color: #fff; }
.wz-steps li.done { cursor: pointer; color: var(--text); }
.wz-steps li.current .wz-num { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px #dbeafe; }
.wz-steps li.current { color: var(--text); font-weight: 700; }
.wz-card { max-width: 760px; }
.wz-panel h2 { font-size: 20px; margin: 0 0 6px; }
.wz-panel select[size] { width: 100%; margin-top: 8px; }
.wz-tips { font-size: 13.5px; color: var(--muted); padding-left: 20px; margin: 8px 0 12px; }
.wz-tips li { margin: 3px 0; }
.wz-summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 8px 0 4px; font-size: 14px; }
.wz-summary dt { color: var(--muted); }
.wz-summary dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.wz-error { color: var(--danger); font-size: 13.5px; font-weight: 600; margin: 8px 0 0; }
.wz-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }
.wz-nav #wzNext, .wz-nav #wzStart { margin-left: auto; }
@media (max-width: 640px) {
  .wz-steps .wz-label { display: none; }
  .wz-steps li.current .wz-label { display: block; position: absolute; top: 38px; white-space: nowrap; }
  .wz-steps { margin-bottom: 30px; }
  .wz-num { width: 28px; height: 28px; font-size: 13px; }
  .wz-steps li::before { top: 13px; }
}
.wz-panel input[type=search] { width: 100%; }
/* The display rule above beat the hidden attribute, so "Paylaş" showed on browsers without a share sheet. */
.share-btn[hidden] { display: none !important; }
.share-btn.share-x { background: #000; border-color: #000; color: #fff; }
.share-btn.share-x:hover { background: #222; border-color: #222; color: #fff; }
@media (max-width: 640px) {
  .share-row { gap: 6px; }
  .share-btn { padding: 9px 12px; font-size: 13px; }
}

/* ---- Past listings (2026-10-14): a fixed-date listing whose dates have all gone (listingIsPast()).
   The card's photo goes grey with a "Tarihi geçti" badge on it, the text is muted, and the
   "Talep Oluştur" button stays in full colour. The listing page greys its photos the same way. ---- */
.tour-card.is-past img { filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.tour-card.is-past:hover img { filter: grayscale(.35); opacity: .9; }
.tour-card.is-past h3, .tour-card.is-past .dest, .tour-card.is-past .meta, .tour-card.is-past .tags, .tour-card.is-past .price,
.tour-card.is-past .promo-ends { opacity: .65; }
.tour-card.is-past > .promo-ribbon { filter: grayscale(1); }
.tour-card .past-badge { position: absolute; z-index: 1; left: 10px; top: 136px; background: rgba(15, 23, 42, .82); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.similar-grid .tour-card .past-badge { top: 88px; font-size: 11.5px; padding: 3px 8px; }
.tour-card .past-cta { opacity: 1; }
.tour-layout.is-past #mainTourImage, .tour-layout.is-past .gallery-strip img { filter: grayscale(1); opacity: .8; }
.past-listing-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 12px 0 14px; padding: 14px 16px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--card); }
.past-listing-notice > div { flex: 1 1 260px; min-width: 0; font-size: 14px; }
.past-listing-notice strong { display: block; font-size: 16px; margin-bottom: 2px; }
.past-listing-notice span { color: var(--muted); }
.past-listing-notice .btn { white-space: nowrap; }
@media (max-width: 600px) {
  .tour-card:has(.price) .past-badge { left: 14px; top: 74px; font-size: 10.5px; padding: 3px 7px; }
  .tour-card:not(:has(.price)) .past-badge { top: 64px; font-size: 10.5px; padding: 3px 7px; }
  .past-listing-notice .btn { width: 100%; text-align: center; }
}

/* ---------- Two-row header (logged-in organizers and attendees, desktop) ----------
   Row 1: logo left, account links right. Row 2: the menu, in one line. The nav element steps
   aside (display: contents) so its two groups can sit on different rows; phones keep the
   hamburger menu from the max-width: 768px rules. */
@media (min-width: 769px) {
  .site-header.nav-two-rows .header-inner { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
  .site-header.nav-two-rows nav#siteNav { display: contents; }
  .site-header.nav-two-rows .logo { order: 1; }
  .site-header.nav-two-rows .nav-account { order: 2; margin-left: auto; padding-left: 0; border-left: none; }
  .site-header.nav-two-rows .nav-links {
    order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    gap: 4px 22px; margin-top: 12px; padding: 10px 0 12px; border-top: 1px solid var(--border);
  }
  .site-header.nav-two-rows .nav-links::-webkit-scrollbar { display: none; }
}

/* The hidden attribute always wins. Class rules such as .btn { display: inline-block } otherwise
   override it, so a button or panel a script "hid" stayed visible (the import wizard's "İleri" on
   its last step led to an empty step). */
[hidden] { display: none !important; }