/* MaxyTrip — tüm site stilleri (index.html'den ayrıştırıldı) */
:root {
  /* ===== "Sefer Panosu" kimliği =====
     Mürekkep + kâğıt + gün batımı mercanı. Deniz yeşili ikincil role çekildi;
     hatırlanan renk MERCAN olsun (fiyat, kalan yer, vurgu). */
  --ink: #101e26; /* mürekkep — koyu yüzeyler, başlıklar */
  --ink-2: #1b2f39;
  --paper: #f4efe5; /* kâğıt/kum — dönüşümlü bölümler */
  --primary: #137883; /* deniz — düğmeler, bağlantılar (beyaz yazıyla kontrast 5.2:1) */
  --primary-dark: #0e5c63;
  /* Koyu yüzeyler (üst şerit, hero, kampanya bandı, footer). Eskiden mürekkep
     rengi (#101e26) kullanılıyordu; müşteri isteğiyle daha açık okyanus mavisine
     çekildi. Metin rengi --ink AYRI kaldı: gövde yazısı koyu ve okunaklı olmalı. */
  --night: #1d5268; /* üst bölge: üst şerit + kapak (panelden seçilir) */
  --night-2: #236178; /* kapak degradesinin açık ucu — üst renkten türetilir */
  --night-deep: #1a4b60; /* kapak degradesinin koyu ucu */
  --scrim-rgb: 21 59 75; /* kapak görselinin üstündeki perde (üst renkten türer) */
  --band: #1d5268; /* ana sayfa ortasındaki koyu kampanya bandı */
  --band-2: #236178;
  --footer-bg: #1d5268; /* alt bilgi */
  /* Vurgu rengi açık mavi zeminde yeterince ayrışmıyor (mercan: 2.3:1);
     koyu yüzeylerde beyazla açılmış hali kullanılır. Temayla birlikte değişir:
     applyTheme() seçilen vurgu renginden yeniden hesaplar (%40 beyaz). Burada
     color-mix() kullanılmaz — desteklemeyen tarayıcıda (Safari < 16.2) değişken
     geçersiz olur, yazı/düğme rengi kaybolurdu. Değer varsayılan mercanın türevi. */
  --accent-night: #ef9a82;
  --on-night: #e8f1f4; /* açık zemin üstü ana yazı */
  --on-night-muted: #c9dbe2; /* ikincil yazı — #1d5268 üzerinde 5.8:1 */
  --accent: #e4572e; /* gün batımı mercanı — fiyat, uyarı, imza çizgisi */
  /* Mercan, açık zeminde metin (3.2:1) ve beyaz yazılı düğme (3.7:1) olarak AA'yı geçmez:
     metin/düğme için siyaha çekilmiş türevler kullanılır. Temayla birlikte değişir
     (applyTheme: metin %24, düğme %20, düğme üstüne gelince ayrıca %14 siyah). */
  --accent-text: #ad4223;
  --accent-btn: #b64625;
  --accent-btn-hover: #9d3c20;
  --accent-soft: #dcfce7; /* indirim/kampanya rozetlerinin zemini (panelden seçilir) */
  --accent-soft-ink: #166534; /* o rozetin yazısı — zeminden türetilir (bkz. softInk) */
  --muted: #586b73; /* kâğıt (#f4efe5) üzerinde 4.87:1 — eskisi 4.21:1 ile AA'yı geçemiyordu */
  --bg: #ffffff;
  --bg-alt: #f4efe5;
  --line: #e4e1d9;
  --radius: 12px;
  --shadow: 0 16px 44px rgba(16, 30, 38, 0.1);
  --shadow-sm: 0 1px 3px rgba(16, 30, 38, 0.07);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Sınıf kuralları (display:block / inline-block) hidden özelliğini eziyordu: boş sepette "0" rozeti
   ve çerez ayarı bağlantısı hep görünüyordu. hidden her yerde gizler. */
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
}
body {
  /* Emoji yazı tipleri sona açıkça eklenir: bazı sistemlerde (Linux, eski Android,
     bazı Windows kurulumları) ⚠ ✔ ↩ ⬇ gibi semboller renkli emoji yerine tek renk
     metin glifi olarak seçiliyordu. Sıra: Apple (Safari/iOS/macOS), Windows,
     Android/Linux. Metin karakterleri önceki yazı tiplerinden gelmeye devam eder. */
  font-family:
    Plus Jakarta Sans,
    system-ui,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
h1,
h2,
h3,
h4 {
  line-height: 1.2;
  font-weight: 800;
}
/* Sayfa başlığı artık h1 (erişilebilirlik/SEO) ama eski h2 boyutunda kalır */
.page-title {
  font-size: 1.5em;
}
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 12px;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    background 0.15s;
  text-decoration: none;
  text-align: center;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 8px 20px #0e749059;
}
.btn-light {
  background: #fff;
  color: var(--primary-dark);
}
.btn-block {
  width: 100%;
}
.topbar {
  background: var(--ink);
  color: #cbd5e1;
  font-size: 13px;
}
.topbar-inner {
  display: flex;
  gap: 22px;
  padding: 7px 20px;
}
.topbar-right {
  margin-left: auto;
}
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffffeb;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
}
.logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}
.logo span {
  color: var(--primary);
}
.logo-light {
  color: #fff;
}
.nav {
  display: flex;
  gap: 26px;
  align-items: center;
}
.nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.nav a:hover {
  color: var(--primary);
}
.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 10px;
}
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
}
.hero {
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(14, 116, 144, 0.18), transparent),
    linear-gradient(180deg, #ecfeff, #fff);
  padding: 72px 0 56px;
  text-align: center;
}
.hero-badge {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(34px, 5.5vw, 56px);
  margin-bottom: 16px;
}
.grad {
  background: linear-gradient(90deg, var(--primary), #06b6d4, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  color: var(--muted);
  font-size: 18px;
  margin-bottom: 34px;
}
.search-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  max-width: 860px;
  margin: 0 auto 26px;
  text-align: left;
}
.search-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.search-field select,
.search-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.search-btn {
  align-self: end;
}
.hero-trust {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.section {
  padding: 72px 0;
}
/* Telefonda masaüstünün 72px'lik bölüm boşluğu çok büyük kalıyordu: liste/detay/sepet/yasal
   sayfalarda üst menü ile "← Ana Sayfa" arasında bir parmak boyu boşluk, ana sayfada iki
   bölüm arasında neredeyse yarım ekran. */
@media (max-width: 640px) {
  .section {
    padding: 48px 0;
  }
  #listPage,
  #detailPage,
  #cartPage,
  #checkoutPage {
    padding-top: 18px;
  }
}
.section-alt {
  background: var(--bg-alt);
}
.section-head {
  text-align: center;
  margin-bottom: 44px;
}
.section-head h2 {
  font-size: clamp(26px, 3.6vw, 36px);
  margin-bottom: 10px;
}
.section-head p {
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
}
.cat-grid {
  /* Ortalanmış dizilim: kategori sayısı kaç olursa olsun kartlar ekranın ortasında sıralanır */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.cat-grid .cat-card {
  flex: 0 1 205px;
  min-width: 160px;
}
.cat-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}
.cat-card:hover,
.cat-card.active {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.cat-card.active {
  background: #ecfeff;
}
.cat-icon {
  font-size: 34px;
  margin-bottom: 10px;
}
.cat-card h3 {
  font-size: 15px;
  font-weight: 700;
}
.cat-card p {
  font-size: 12px;
  color: var(--muted);
}
.tour-grid {
  display: grid;
  /* minmax(0,1fr): kart içeriği ne olursa olsun sütun konteynerden taşmasın */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.tour-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  min-width: 0; /* grid/flex hücresinde içerik taşırmadan daralabilsin */
}
.tour-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.tour-img {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  position: relative;
}
.tour-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fffffff2;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  color: var(--primary-dark);
}
.tour-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tour-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.tour-body h3 {
  font-size: 18px;
  margin-bottom: 6px;
}
.tour-body .desc {
  font-size: 14px;
  color: var(--muted);
  flex: 1;
}
.tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* fiyat + buton tek satıra sığmazsa buton alt satıra iner, kırpılmaz */
  gap: 10px;
  margin-top: 16px;
}
.tour-price {
  flex: 1 1 auto; /* kalan alanı alır; indirim rozeti/≈TL ipucu içeride kendi satırına sarar */
  min-width: 0;
}
.tour-foot .btn {
  flex: 0 0 auto; /* buton daralıp bozulmaz; yer yoksa alt satıra iner */
}
.tour-price small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.tour-price strong {
  font-size: 22px;
  color: var(--primary-dark);
}
.no-result {
  text-align: center;
  color: var(--muted);
  margin-top: 20px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.why-card {
  text-align: center;
  padding: 30px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.why-icon {
  font-size: 36px;
  margin-bottom: 14px;
}
.why-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.why-card p {
  font-size: 14px;
  color: var(--muted);
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.stars {
  color: var(--accent);
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.review-card p {
  font-size: 15px;
  margin-bottom: 14px;
}
.review-card span {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.cta-band {
  background: linear-gradient(120deg, var(--primary-dark), var(--primary), #0891b2);
  color: #fff;
  padding: 60px 0;
}
.cta-inner {
  text-align: center;
}
.cta-inner h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  margin-bottom: 10px;
}
.cta-inner p {
  opacity: 0.85;
  margin-bottom: 24px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.contact-grid h2 {
  font-size: 30px;
  margin-bottom: 10px;
}
.contact-sub {
  color: var(--muted);
  margin-bottom: 22px;
}
.contact-list {
  list-style: none;
  display: grid;
  gap: 12px;
  font-weight: 600;
}
.contact-form {
  display: grid;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.contact-form input:not([type="checkbox"]),
.contact-form textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.kvkk-check {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  align-items: start;
}
/* Onay kutusu metnin hemen solunda, ilk satırla hizalı durur. İletişim formundaki
   "alanlar tam genişlik" kuralı kutuyu da 235px'e yayıyordu: tik metinden uzakta,
   kutunun ortasında görünüyordu. */
.kvkk-check input[type="checkbox"] {
  flex: none;
  margin: 2px 0 0;
  accent-color: var(--primary);
}
.kvkk-check a {
  color: var(--primary);
}
.footer {
  background: var(--ink);
  color: #94a3b8;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 36px;
  padding: 56px 20px 40px;
}
.footer-grid h4 {
  color: #fff;
  font-size: 15px;
  margin-bottom: 14px;
}
.footer-grid a {
  display: block;
  color: #94a3b8;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 9px;
}
.footer-grid a:hover {
  color: #fff;
}
.footer-grid p {
  font-size: 14px;
  margin-top: 12px;
}
.pay-badges {
  font-weight: 700;
  color: #cbd5e1;
}
.pay-note {
  font-size: 13px;
}
.footer-bottom {
  border-top: 1px solid #1e293b;
  padding: 18px 0;
  font-size: 13px;
  text-align: center;
}
.modal-overlay[hidden],
.toast[hidden] {
  display: none;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0f172a8c;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: pop 0.2s ease;
}
@keyframes pop {
  0% {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.modal-head {
  padding: 22px 26px 0;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.modal-head h3 {
  font-size: 22px;
}
.modal-close {
  background: var(--bg-alt);
  border: none;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.modal-body {
  padding: 16px 26px 26px;
}
.modal-hero {
  border-radius: 14px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  margin-bottom: 16px;
}
.modal-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 12px;
}
.modal-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
}
.modal-list {
  list-style: none;
  margin-bottom: 18px;
  display: grid;
  gap: 7px;
  font-size: 14px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid .full {
  grid-column: 1 / -1;
}
.form-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.form-field input,
.form-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  font-size: 14px;
}
.form-field input:focus,
.form-field select:focus {
  outline: 2px solid var(--primary);
  border-color: transparent;
}
.extra-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 6px 0;
}
/* Ek hizmet fiyatı dar ekranda "(+" ve "€50)" diye ikiye bölünüyordu */
.extra-option strong {
  white-space: nowrap;
}
.summary-box {
  background: var(--bg-alt);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  font-size: 14px;
  display: grid;
  gap: 6px;
}
.summary-box .total {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 17px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 4px;
}
.summary-box .row {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}
.secure-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}
.demo-banner {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}
.success-box {
  text-align: center;
  padding: 30px 10px;
}
.success-box .big {
  font-size: 56px;
  margin-bottom: 12px;
}
.success-box h3 {
  margin-bottom: 8px;
}
.success-box p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 6px;
}
.success-box code {
  background: var(--bg-alt);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
}
.steps {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.step-dot {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--line);
}
.step-dot.on {
  background: var(--primary);
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%);
  background: var(--ink);
  color: #fff;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  z-index: 200;
  box-shadow: var(--shadow);
}
.legal-text {
  font-size: 13px;
  color: var(--muted);
}
.legal-text h4 {
  color: var(--ink);
  margin: 14px 0 6px;
}
.hide-mobile {
  display: initial;
}
@media (max-width: 900px) {
  .cat-grid .cat-card {
    flex-basis: 30%;
  }
  .tour-grid,
  .review-grid,
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid,
  .search-box {
    grid-template-columns: 1fr 1fr;
  }
  .search-btn {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  /* Yalnızca e-posta span'i gizlenir. ÇOCUK birleştirici (>) şart: soysal
     seçici ".topbar-inner span:nth-child(2)" iç içe span'leri de yakalıyor ve
     dil seçicisini (.topbar-right içindeki 2. span) telefonlarda tamamen
     gizliyordu — 4 dilli sitede mobil ziyaretçi dil değiştiremiyordu. */
  .topbar-inner > span:nth-child(2) {
    display: none;
  }
  .hamburger {
    display: block;
  }
  .nav {
    display: none;
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 18px 20px;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav.open {
    display: flex;
  }
  .hide-mobile {
    display: none;
  }
  .cat-grid .cat-card {
    flex-basis: 44%;
  }
  /* minmax(0, 1fr) — düz "1fr" DEĞİL: 1fr aslında minmax(auto, 1fr) demektir ve
     sütun içeriğin doğal genişliğinin altına inemez. Safari form alanlarının
     varsayılan genişliğini (size=20 + dolgu) doğal genişlik sayıyor; 320px'lik
     iPhone'da İletişim bölümü 326px'e açılıp sayfa yana kayıyordu. */
  .tour-grid,
  .review-grid,
  .why-grid,
  .contact-grid,
  .footer-grid,
  .search-box,
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ===== 1) Sekmeli Arama Motoru ===== */
.search-panel[hidden] {
  display: none;
}
.search-tabs {
  display: flex;
  gap: 6px;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 14px;
  position: relative;
  z-index: 2;
  text-align: left;
}
.search-tab {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  background: #ffffff99;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 11px 22px;
  margin-bottom: -1px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.search-tab:hover {
  color: var(--primary);
}
.search-tab.active {
  background: #fff;
  color: var(--primary-dark);
  box-shadow: inset 0 3px 0 0 var(--primary);
}
.search-panel {
  grid-template-columns: repeat(4, 1fr);
}
.search-panel .search-btn {
  grid-column: 1/-1;
}
@media (max-width: 900px) {
  .search-panel {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .search-panel {
    grid-template-columns: 1fr;
  }
  .search-tab {
    padding: 10px 14px;
    font-size: 13px;
  }
}
/* Tüm arama alanları birebir aynı boyut ve hizada (select/text/date/time) */
.search-panel {
  align-items: start;
}
.search-field input,
.search-field select {
  height: 44px;
}
/* Araç paneli: tarih + saat alanları tek satırda (alış noktası 2 birim, tarihler 1'er, saatler daha dar) */
#panelCars {
  grid-template-columns: 1.05fr 1.05fr 1fr 0.74fr 1fr 0.74fr;
  max-width: 1000px;
}
#panelCars .f-pickup {
  grid-column: span 2;
}
/* Farklı teslim noktası açılınca alış noktası tek birime iner, teslim yanına gelir */
#panelCars.diff-on .f-pickup {
  grid-column: span 1;
}
#panelCars .search-btn {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  #panelCars {
    grid-template-columns: 1fr 1fr;
  }
  #panelCars .f-pickup {
    grid-column: 1 / -1;
  }
  #panelCars.diff-on .f-pickup {
    grid-column: span 1;
  }
}
/* ===== Gerçek zamanlı tarih doğrulaması ===== */
.search-field input.input-error {
  border: 2px solid #dc2626;
}
.field-error {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
  margin-top: 5px;
}
.field-error[hidden] {
  display: none;
}
.btn-err {
  margin-right: 6px;
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn:disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--primary);
}
/* ===== Araç listesi kartları ===== */
.car-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.car-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}
.car-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.car-img {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
}
.car-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.car-body h3 {
  font-size: 18px;
  margin-bottom: 12px;
}
.car-specs {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 14px;
}
.car-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.car-price small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.car-price strong {
  font-size: 22px;
  color: var(--primary-dark);
}
.car-total {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-text);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .car-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .car-grid {
    grid-template-columns: 1fr;
  }
}
/* Kartların tamamı tıklanabilir */
.tour-card,
.car-card {
  cursor: pointer;
}
/* Araç arama: farklı teslim noktası kutusu */
.full-row {
  grid-column: 1/-1;
}
.car-diff-drop {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 2px 0;
}
.car-diff-drop input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  margin: 0;
  flex-shrink: 0;
}
/* Araç detay: kiralama şartı rozetleri + özellik listesi */
.req-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 6px;
}
.req-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.req-chip b {
  color: var(--primary-dark);
  font-size: 15px;
}
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.spec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  font-weight: 600;
}
.detail-main ul.feat-list li {
  align-items: center;
}
/* ===== Sağ alt köşe: WhatsApp ===== */
.fab-corner {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
}
/* ===== 3) Dil Değiştirici ===== */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  background: #1e293b;
  border-radius: 8px;
  padding: 2px;
  vertical-align: middle;
}
.lang-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.lang-btn:hover {
  color: #fff;
}
.lang-btn.active {
  background: var(--primary);
  color: #fff;
}
/* ===== Akıllı arama & fiyat filtresi ===== */
.search-query {
  grid-column: 1/-1;
}
/* ===== Liste sayfası: sol filtre + sonuçlar ===== */
.list-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  align-items: start;
}
.filter-card {
  position: sticky;
  top: 86px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  gap: 14px;
}
.filter-card h3 {
  font-size: 16px;
}
.filter-group {
  display: grid;
  gap: 6px;
}
.filter-group > label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.filter-group select,
.filter-group input {
  width: 100%;
  min-height: 44px; /* tüm alanlar aynı boyda */
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
/* Safari açılır listede iç boşluğu ve en az yüksekliği yok sayıp basık çiziyordu (diğer
   kutuların yarısı); sabit yükseklik her motorda uygulanır (ana sayfa aramasıyla aynı) */
.filter-group select,
.form-field select:not([multiple]),
.booking-card select:not([multiple]),
.pass-card select:not([multiple]) {
  height: 44px;
}
.price-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* Kutu yazının hemen solunda: satırın öbür ucunda kalınca hangi seçeneğe ait olduğu belirsizdi
   (telefonda WhatsApp düğmesinin altına da giriyordu). İşaretleme metinde kutu sonra geldiği için
   ters sıra. */
.check-option {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
}
/* Grup başlığı kuralı (.filter-group > label: 12px, kalın, soluk) seçenek satırlarına da
   uyuyordu; seçenekler normal metin gibi okunur */
.filter-group > label.check-option {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.check-option input {
  flex-shrink: 0;
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.list-toolbar .count {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-dark);
}
.list-toolbar label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.list-toolbar select {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
#listResults .tour-grid,
#listResults .car-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.back-link {
  display: inline-block;
  font-weight: 700;
  color: var(--primary-dark);
  text-decoration: none;
  margin-bottom: 14px;
}
.back-link:hover {
  color: var(--primary);
}
@media (max-width: 900px) {
  .list-layout {
    grid-template-columns: 1fr;
  }
  .filter-card {
    position: static;
  }
}
/* ===== Detay sayfası: galeri + yapışkan rezervasyon kutusu ===== */
.gallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  margin-bottom: 6px;
}
.gallery-slide {
  flex: 0 0 auto;
  width: min(520px, 80%);
  height: 300px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 110px;
  scroll-snap-align: center;
  cursor: zoom-in;
}
.gallery-hint {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px;
}
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
.detail-main h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  margin-bottom: 10px;
}
.detail-main h3 {
  font-size: 18px;
  margin: 24px 0 10px;
}
.detail-main p {
  color: var(--muted);
  font-size: 15px;
}
.detail-main ul {
  list-style: none;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
}
.booking-card {
  position: sticky;
  top: 86px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: grid;
  gap: 12px;
}
.booking-card .price-line {
  display: flex;
  align-items: center;
  gap: 6px 8px;
  flex-wrap: wrap; /* çok rozet/sayaç olduğunda yana taşmak yerine alta sarar */
  min-width: 0;
}
.booking-card .price-line strong {
  font-size: 26px;
  color: var(--primary-dark);
}
.booking-card .price-line small {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
@media (max-width: 900px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .booking-card {
    position: static;
  }
}
/* Tur rezervasyonu kapalıyken rezervasyon kutusundaki bilgi notu */
.rez-kapali {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
}
.rez-kapali p {
  margin: 4px 0 0;
  color: var(--muted);
}
/* ===== Telefonda sabit "Rezervasyon Yap" çubuğu (tur/araç detayı) =====
   Yalnızca dar ekranda; bilgisayarda rezervasyon kutusu zaten yanda yapışık duruyor. */
.mobil-cta {
  display: none;
}
@media (max-width: 900px) {
  .mobil-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.1);
    transition: transform 0.25s ease;
  }
  .mobil-cta.gizli {
    transform: translateY(110%);
  }
  .mobil-cta-fiyat {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
  }
  .mobil-cta-fiyat strong {
    font-size: 19px;
  }
  .mobil-cta-fiyat .price-old {
    font-size: 13px;
    color: var(--muted);
  }
  .mobil-cta-fiyat small {
    font-size: 12px;
    color: var(--muted);
  }
  .mobil-cta .btn {
    flex-shrink: 0;
    padding: 12px 22px;
  }
  /* WhatsApp düğmesi çubuğun üstüne çıkar; alt bilgi çubuğun altında kalmasın */
  body.mobil-cta-var .fab-corner {
    bottom: 86px;
  }
  body.mobil-cta-var .footer-bottom {
    padding-bottom: 160px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobil-cta {
    transition: none;
  }
}
/* ===== Lightbox ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #0f172ae6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 20px;
}
.lightbox[hidden] {
  display: none;
}
.lightbox .gallery-slide {
  width: min(900px, 94vw);
  height: min(70vh, 600px);
  font-size: 180px;
  cursor: zoom-out;
}
/* ===== Kontenjan rozetleri ===== */
.tour-tag.cap {
  top: auto;
  bottom: 12px;
  left: 12px;
}
.tour-tag.feat {
  left: auto;
  right: 12px;
  background: var(--accent);
  color: #fff;
}
label.feat-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  cursor: pointer;
} /* .form-field label kuralını ezer */
.feat-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 0;
}
.tour-tag.low {
  background: #fef3c7;
  color: #92400e;
}
.tour-tag.soldout {
  background: #fee2e2;
  color: #b91c1c;
}
/* ===== WhatsApp destek butonu ===== */
.wa-fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0e7a6b; /* #25d366 üstünde beyaz yazı 2:1'di; koyu WhatsApp yeşili 5.2:1 */
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
  transition: transform 0.15s;
}
.wa-fab:hover {
  transform: translateY(-3px);
}
/* ===== Yönetim paneli ===== */
.login-card {
  max-width: 380px;
  margin: 40px auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid;
  gap: 12px;
  text-align: center;
}
.admin-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-toolbar .spacer {
  flex: 1;
}
.admin-tab {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.admin-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.admin-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  background: #fff;
  box-shadow: var(--shadow);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 680px;
}
.admin-table th {
  background: var(--bg-alt);
  text-align: left;
  padding: 11px 14px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.admin-table td {
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.admin-table th {
  vertical-align: middle;
}
.admin-table .btn {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 8px;
  white-space: nowrap; /* dar sütunda düğme metni harf harf sarmasın */
}
/* Durum hapı: yayın açık/kapalı, kupon aktif/pasif gibi iki durumlu alanlar.
   Düğme yerine nokta + tek kelime — dar sütunda "Yay ınd a" gibi kırılmaz. */
.admin-table .col-pub {
  white-space: nowrap;
  width: 1%; /* içeriği kadar yer kaplasın, tabloyu gereksiz genişletmesin */
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 5px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}
.status-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.status-pill.on {
  color: #0f766e;
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.status-pill.off {
  color: #94a3b8;
  background: #f8fafc;
}
button.status-pill:hover {
  filter: brightness(0.97);
}
span.status-pill {
  cursor: default; /* operatör: salt-okunur etiket */
}
/* ===== Sezonluk kontenjan kuralı satırı =====
   Önceki hâli sabit sütunlu bir grid'di: gün kutucukları sıkışınca etiketler
   harf harf alt alta düşüyor ve sil düğmesi üstlerine biniyordu. Artık esnek
   sarmalı bir düzen — dar alanda günler kendi satırına iner. */
.cap-rule-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-alt);
}
.cap-rule-row .cr-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 150px;
  min-width: 140px;
}
.cap-rule-row .cr-field.cr-cap {
  flex: 0 0 110px;
  min-width: 110px;
}
.cap-rule-row .cr-field > span,
.cap-rule-row .cr-days-lbl {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.cap-rule-row input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.cap-rule-row .cr-days {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 260px;
}
.cap-rule-row .wd-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* Gün kutucuğu: metin sarmayan küçük hap */
.wd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.wd-chip input {
  width: auto;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
}
.wd-chip:has(input:checked) {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: #ecfdf5;
}
.cap-rule-row .cr-del {
  flex: 0 0 auto;
  align-self: flex-end;
  padding: 8px 12px;
}

/* Çeviri durumu: "EN ✓ · DE ✓ · PL ✓" tek satırda kalsın */
.admin-table .col-i18n {
  font-size: 12px;
  white-space: nowrap;
  width: 1%;
}
.admin-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.admin-form h3 {
  margin-bottom: 14px;
}
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.admin-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px;
}
.btn-danger {
  background: #dc2626;
  color: #fff;
}
.btn-danger:hover {
  background: #b91c1c;
}
.crm-head {
  font-size: 17px;
  margin: 20px 0 10px;
}
/* Katlanabilir bölüm başlığı: tıklayınca altındaki blok kapanır. Uzun Ayarlar
   ekranında sık kullanılan bölümler arasında kaydırmayı azaltır. */
.crm-head.foldable,
.set-sub.foldable {
  margin-left: -6px;
}
.crm-head .fold-btn,
.set-sub .fold-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  user-select: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: 8px;
  padding: 4px 6px;
}
.crm-head .fold-btn:hover,
.set-sub .fold-btn:hover {
  background: var(--bg-alt);
}
.crm-head .fold-btn::before,
.set-sub .fold-btn::before {
  content: "▾";
  font-size: 13px;
  color: var(--muted);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.crm-head.collapsed .fold-btn::before,
.set-sub.collapsed .fold-btn::before {
  transform: rotate(-90deg);
}
.crm-head .fold-btn:focus-visible,
.set-sub .fold-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.crm-bulk {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.crm-bulk .btn {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 8px;
}
.admin-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
tr.crm-unread {
  background: #ecfeff;
}
.extra-row {
  display: grid;
  grid-template-columns: 1fr 90px auto;
  gap: 8px;
  margin-bottom: 8px;
}
.extra-row input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
}
.gallery--single {
  overflow-x: visible;
}
.gallery--single .gallery-slide {
  width: 100%;
}
/* ===== TL karşılığı + tasarımla uyumlu, gecikmesiz ipucu kutusu ===== */
.tl-price {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: help;
  margin-top: 2px;
  position: relative;
}
.tl-price .tip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  /* SAĞA yaslanır: `left:0` iken 210px'lik balon çapanın sağına taşıyordu ve
     `visibility:hidden` yerleşimden ÇIKARMADIĞI için sepet özetinde sayfayı
     yatay kaydırılabilir yapıyordu (375px ekranda 115px taşma). Geri sayım
     ipucu (.tour-tag.countdown .tip) zaten bu düzeni kullanıyor. */
  right: 0;
  z-index: 30;
  width: min(210px, calc(100vw - 28px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.45;
  transition: opacity 0.12s;
  pointer-events: none;
}
.tl-price:hover .tip {
  visibility: visible;
  opacity: 1;
}
/* ===== Sefer / tarih seçici (rezervasyon kutusu) ===== */
.dep-select {
  position: relative;
}
.dep-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}
.dep-trigger:hover {
  border-color: var(--primary);
}
.dep-trigger .dep-date {
  flex: 1;
}
.dep-caret {
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
}
.dep-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
}
.dep-dropdown[hidden] {
  display: none;
} /* display:grid, hidden özniteliğini ezmesin */
.dep-list {
  display: grid;
  gap: 6px;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 2px;
}
label.dep-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0;
  cursor: pointer;
  background: #fff;
} /* .form-field label kuralını ezer */
.dep-item:has(input:checked) {
  border-color: var(--primary);
  background: #ecfeff;
}
/* Dolu sefer: soluk ama SEÇİLEBİLİR — seçilince bekleme listesi düğmesi çıkar */
.dep-item.full {
  opacity: 0.7;
  cursor: pointer;
}
.dep-item.full:hover {
  opacity: 1;
}
.dep-item input {
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin: 0;
}
.dep-date {
  flex: 1;
  font-weight: 600;
}
.dep-left {
  font-size: 12px;
  font-weight: 700;
  color: #065f46;
  white-space: nowrap;
  margin-left: auto;
  background: #ecfdf5;
  border-radius: 8px;
  padding: 3px 8px;
}
.dep-left.low {
  background: #fef3c7;
}
.dep-left.zero {
  background: #fee2e2;
}
.dep-left.low {
  color: #92400e;
}
.dep-left.zero {
  color: #b91c1c;
}
/* ===== Detaylı program: zaman çizelgesi ===== */
.itinerary {
  margin-top: 6px;
}
.it-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  position: relative;
  padding-bottom: 22px;
}
.it-item::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 10px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.it-item:last-child::before {
  display: none;
}
.it-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary-dark);
  text-align: center;
  line-height: 1.15;
  position: relative;
  z-index: 1;
  padding: 4px;
}
.it-body h4 {
  font-size: 15px;
  margin: 6px 0 6px;
  color: var(--ink);
}
.it-body p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
/* ===== Admin: program tipi / sefer / program editörleri ===== */
.wd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.wd-item {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 600;
}
.wd-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  margin: 0;
  flex-shrink: 0;
}
.wd-item input[type="number"] {
  width: 58px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 6px;
  font: inherit;
  font-size: 13px;
}
.dep-row {
  display: grid;
  grid-template-columns: 1fr 1fr 84px auto;
  gap: 8px;
  margin-bottom: 8px;
}
.dep-row input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
}
.prog-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}
.prog-row-top {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 8px;
}
/* ===== Yardımcı butonlar & bağlantılar ===== */
.btn-soft {
  background: #ecfeff;
  color: var(--primary-dark);
}
.see-all {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  color: var(--primary-dark);
  text-decoration: none;
  font-size: 14px;
}
.see-all:hover {
  color: var(--primary);
}
/* ===== Araç: KM aşım uyarısı & doluluk notları ===== */
.km-warn {
  margin-top: 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
}
.booking-card .price-line .tl-price {
  flex-basis: 100%; /* TL karşılığı rozetlerle asla aynı hizada/üst üste olmaz */
  margin-top: 2px;
}
.booking-card .price-line .disc-tag {
  position: static;
}
/* İndirim rozeti ile TL karşılığı çakışmasın: TL her zaman kendi satırında */
.tour-price .tl-price,
.car-price .tl-price {
  display: block;
  clear: both;
  margin-top: 4px;
}
.tour-price .disc-tag,
.car-price .disc-tag {
  vertical-align: middle;
}
.busy-note {
  margin-top: 14px;
  background: var(--bg-alt);
  border: 1px dashed var(--line);
  color: var(--muted);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
}
/* ===== İzole checkout görünümü ===== */
.checkout-mode .nav,
.checkout-mode .hamburger,
.checkout-mode .fab-corner,
.checkout-mode .footer {
  display: none;
}
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 26px;
  align-items: start;
}
.checkout-side {
  position: sticky;
  top: 90px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.co-hero {
  height: 110px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
}
.co-name {
  margin-top: 12px;
  font-size: 18px;
}
.co-meta {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 4px;
}
.co-note {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 10px;
  line-height: 1.5;
}
.co-steps {
  display: flex;
  gap: 10px;
  margin: 14px 0 22px;
  flex-wrap: wrap;
}
.co-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
}
.co-step span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 12px;
}
.co-step.on {
  color: var(--primary-dark);
  border-color: var(--primary);
  background: #ecfeff;
}
.co-step.on span {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.co-step.done {
  color: #047857;
}
.pass-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.pass-card h4 {
  margin-bottom: 12px;
  font-size: 15.5px;
}
.coupon-row {
  display: flex;
  gap: 8px;
}
.coupon-row input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}
.summary-box .row.season span {
  color: #b45309;
}
.summary-box .row.discount span {
  color: #047857;
}
.summary-box .row.discount a {
  color: #dc2626;
  text-decoration: none;
  margin-left: 4px;
  font-weight: 700;
}
@media (max-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
  .checkout-side {
    position: static;
    order: -1;
  }
}
/* ===== OTP & iptal/iade modalı ===== */
.otp-box {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.otp-box input {
  width: 190px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 10px;
  font-family: inherit;
}
.refund-box {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.refund-box .total span:last-child {
  color: #047857;
}
/* ===== Admin dashboard ===== */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.dash-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.dash-tile small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.dash-tile strong {
  font-size: 26px;
}
.dash-tile.warn strong {
  color: #b45309;
}
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.dash-card {
  padding: 18px;
}
.dash-card h3 {
  font-size: 15.5px;
  margin-bottom: 12px;
}
.dash-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.3fr) 2fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
}
.dash-bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.dash-bar {
  background: var(--bg-alt);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}
.dash-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #06b6d4);
  border-radius: 999px;
}
.dash-bar-val {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.crm-export {
  margin-left: 10px;
  padding: 6px 12px;
  font-size: 12.5px;
}
/* İptal edilen rezervasyon satırı: veriler soluk, rozet + butonlar net */
.row-cancelled td:not(:first-child):not(:last-child) {
  opacity: 0.45;
}
.pill-cancelled {
  display: inline-block;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  margin-left: 6px;
  white-space: nowrap;
}
.pill-active {
  display: inline-block;
  background: #d1fae5;
  color: #047857;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  margin-left: 6px;
  white-space: nowrap;
}
/* Dashboard tıklanabilir bilgi kutuları */
.dash-clickable {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.dash-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}
/* İndirim: çizik eski fiyat + yeşil indirim rozeti */
.price-old {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8em;
  margin-right: 3px;
}
.disc-tag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  margin-left: 6px;
  white-space: nowrap;
}
.summary-box .row.discount span:first-child {
  color: #047857;
  font-weight: 700;
}
/* Admin: tarihe göre fiyat kuralı editörü */
.rule-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 74px auto;
  gap: 8px;
  margin-bottom: 8px;
}
.rule-row input,
.rule-row select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
}
@media (max-width: 640px) {
  .rule-row {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 900px) {
  .dash-tiles {
    grid-template-columns: 1fr 1fr;
  }
  .dash-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Gerçek görseller: kart kapakları, galeri ve checkout ===== */
.ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tour-img,
.car-img,
.co-hero {
  position: relative;
  overflow: hidden;
}
.tour-img .tour-tag,
.car-img .tour-tag {
  z-index: 2;
}
.gallery-slide {
  position: relative;
  overflow: hidden;
}
.gallery-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.img-thumb {
  position: relative;
  width: 92px;
  height: 62px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-thumb button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 6px;
  background: #0f172acc;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
}
/* ===== Kampanya rozetleri + geri sayım ===== */
.tour-tag.deal {
  top: auto;
  left: auto;
  right: 12px;
  bottom: 12px;
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}
.tour-tag.countdown {
  top: auto;
  left: auto;
  right: 12px;
  bottom: 44px;
  background: #0f172ae6;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tour-tag.deal.inline,
.tour-tag.countdown.inline {
  position: relative;
  top: auto; /* .tour-tag tabanındaki ofsetler inline modda kaymaya yol açmasın */
  right: auto;
  bottom: auto;
  left: auto;
  display: inline-block;
  margin-left: 0;
  vertical-align: middle;
}
.tour-tag.countdown {
  cursor: help;
}
.tour-tag.countdown .tip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 200px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.45;
  transition: opacity 0.12s;
  pointer-events: none;
  white-space: normal;
}
.tour-tag.countdown:hover .tip {
  visibility: visible;
  opacity: 1;
}
.car-img .ci-icon {
  position: relative;
}
/* ===== Fiyat kuralı editörü (6 sütun: tarih ×2, tip, değer, rozet, sil) ===== */
.rule-row {
  grid-template-columns: 1fr 1fr 1.1fr 72px 1.2fr auto;
}
@media (max-width: 640px) {
  .rule-row {
    grid-template-columns: 1fr 1fr;
  }
}
/* ===== Admin ipuçları & iletişim kişisi seçimi ===== */
.lbl-tip {
  cursor: help;
  text-decoration: underline dotted var(--muted);
  text-underline-offset: 3px;
}
.contact-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.contact-pick input {
  accent-color: var(--primary);
}
/* ===== Telefon (ülke kodu) & cinsiyet seçimi & dahil hizmetler ===== */
.phone-row {
  display: flex;
  gap: 6px;
}
.phone-row select {
  flex: 0 0 112px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 6px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.phone-row input {
  flex: 1;
  min-width: 0;
}
.gender-pick {
  display: flex;
  gap: 18px;
  align-items: center;
  min-height: 42px;
}
.gender-pick label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}
.gender-pick input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  margin: 0;
}
.co-incl {
  margin-top: 12px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.co-incl h4 {
  font-size: 13.5px;
  margin-bottom: 6px;
}
.co-incl ul {
  list-style: none;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
}
.co-incl li::before {
  content: "• ";
  color: var(--primary);
}
/* ===== Doluluk ısı haritası ===== */
.hm-wrap {
  overflow-x: auto;
  padding-bottom: 6px;
}
.hm-row {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 3px;
}
.hm-label {
  flex: 0 0 200px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-cells {
  display: flex;
  gap: 3px;
}
.hm-cell {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.hm-cell.off {
  background: var(--bg-alt);
}
.hm-day {
  width: 14px;
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: visible;
}
.hm-head {
  margin-bottom: 6px;
  height: 16px;
}
.dash-scroll {
  max-height: 176px; /* ~5 satır; fazlası dikey kaydırılır */
  overflow-y: auto;
  padding-right: 4px;
}
/* ===== Ana sayfa vitrin karuseli ===== */
/* Ana sayfa "Öne Çıkan Turlar": #tourGrid içeriği bir carousel'dir, 3'lü grid değil.
   Grid bırakılırsa carousel tek hücreye sıkışıp min-content ile taşar. */
#tourGrid {
  display: block;
}
.carousel-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* grid/flex hücresinde daralabilsin */
  max-width: 100%;
}
.carousel-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 14px;
  flex: 1;
  min-width: 0; /* flex öğesi olarak daralıp içeride kaydırılabilsin (yoksa tüm kartları sığdırmaya çalışıp sayfayı taşırır) */
  scrollbar-width: thin;
  outline: none;
}
.carousel-item {
  flex: 0 0 calc((100% - 36px) / 3); /* aynı anda 3 kart */
  scroll-snap-align: start;
  display: flex;
}
.carousel-item .tour-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.car-nav {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 24px;
  font-weight: 800;
  color: var(--primary-dark);
  cursor: pointer;
  line-height: 1;
}
.car-nav:hover {
  background: var(--primary);
  color: #fff;
}
@media (max-width: 900px) {
  .carousel-item {
    flex-basis: calc((100% - 18px) / 2);
  }
}
@media (max-width: 640px) {
  .carousel-item {
    flex-basis: 100%;
  }
}
/* ===== Ayarlar sekmesi ===== */
.set-add {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.set-add input,
.set-add select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  flex: 1;
  min-width: 110px;
  max-width: 240px;
}
.region-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.region-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 600;
}
.region-chip small {
  color: var(--muted);
}
.region-chip button {
  border: none;
  background: none;
  color: #dc2626;
  font-weight: 800;
  cursor: pointer;
  font-size: 12px;
}

/* ===== Mobil ince ayar ===== */
@media (max-width: 640px) {
  .car-nav {
    display: none; /* mobilde karusel dokunmatik kaydırma ile kullanılır */
  }
  .nav.open .nav-cta {
    text-align: center;
  }
  .carousel-track {
    scroll-snap-type: x mandatory;
  }
}

/* ===== Admin görsel araçları: sıralama okları + kapak rozeti ===== */
.img-thumb .img-tools {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  padding: 2px;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.55));
}
.img-thumb .img-tools button {
  position: static;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 5px;
  background: #0f172acc;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.img-thumb .cover-tag {
  position: absolute;
  top: 2px;
  left: 2px;
  background: #f59e0b;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 5px;
}
.img-thumb.is-cover {
  outline: 2px solid var(--accent);
}

/* ===== Dashboard dönem seçici ===== */
.dash-period {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.dash-period select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.dash-tiles {
  grid-template-columns: repeat(5, 1fr); /* iptal oranı kartıyla 5 kutu */
}
@media (max-width: 900px) {
  .dash-tiles {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== Rol rozeti + dashboard karşılaştırma ===== */
.role-chip {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12.5px;
  font-weight: 700;
}
.dash-delta {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.dash-delta.up {
  color: #047857;
}
.dash-delta.down {
  color: #b91c1c;
}
.dash-split {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}

/* ===== Operasyon ajandası ===== */
.ops-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.ops-bar input[type="date"] {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.ops-daylabel {
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
}
.ops-sec {
  margin: 18px 0 10px;
  font-size: 16px;
}
.ops-card {
  margin-bottom: 12px;
}
.ops-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ops-head h3 {
  font-size: 15.5px;
  margin: 0;
}
.ops-head .btn {
  margin-left: auto;
  padding: 7px 14px;
  font-size: 13.5px;
}
.ops-occ {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
}
.ops-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(15, 23, 42, 0.12);
}
.ops-chip {
  font-size: 12.5px;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px 10px;
  color: #475569;
  font-weight: 600;
}
.ops-card .admin-table {
  margin-top: 10px;
}
/* Alış saati kutusu: tabloda dar kalsın, boşken atanmadığı belli olsun */
.ops-time {
  width: 104px;
  padding: 5px 8px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 8px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  background: #fff;
}
.ops-time:invalid,
.ops-time:placeholder-shown {
  color: #94a3b8;
}
.ops-time:disabled {
  background: #f8fafc;
  color: #94a3b8;
}

/* ===== Karusel nokta göstergeleri ===== */
.car-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}
.car-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.car-dot.on {
  background: var(--primary);
  transform: scale(1.25);
}
/* ===== Rezervasyonlarım listesi ===== */
.mb-list {
  display: grid;
  gap: 10px;
}
.mb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.mb-row.off {
  opacity: 0.6;
}
.mb-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mb-info span {
  color: var(--muted);
  font-size: 13px;
}
.mb-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===================== ÇOK DİL: UZUN KELİME DAYANIKLILIĞI =====================
   Almanca/Lehçe kelimeler TR/EN'den %30–50 daha uzun olabilir; buton, kart ve form
   etiketleri taşmak yerine satır kırar. Tek satır kalması gerekenler (dil/para
   düğmeleri, tablo hücreleri) nowrap kurallarını korur. */
.btn {
  white-space: normal; /* uzun buton metni ikinci satıra kırılabilir */
  overflow-wrap: anywhere;
}
.lang-btn,
.car-nav,
.admin-tab {
  white-space: nowrap; /* kısa kontroller tek satır kalır */
}
.form-field label,
.pass-card h4,
.tour-card h3,
.car-card h3,
.co-name,
.cat-card h3,
.summary-box .row span:first-child,
.extra-option,
.kvkk-check span,
.check-option span,
.filter-group label {
  overflow-wrap: anywhere; /* uzun bileşik kelimeler kutudan taşmaz */
}
.dep-trigger .dep-date,
.dep-item .dep-date {
  overflow-wrap: anywhere;
}

/* ===================== TUR VİDEOSU ===================== */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 10px 0 4px;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.14);
}
.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===================== AKILLI ARAMA: ÖNERİ NOTU ===================== */
.search-note {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  color: #155e75;
  font-size: 14px;
}
.search-note a {
  color: #0e7490;
  text-decoration: underline;
}

/* ===================== YAN DİKEY REKLAM / KAMPANYA ALANLARI =====================
   Sayfa gövdesi 1140px; raylar yalnızca iki yanda yeterli boşluk kalan geniş
   ekranlarda görünür. Dar ekranlarda tamamen gizlenir — asla yatay taşma yapmaz. */
.ad-rail {
  display: none;
  position: fixed;
  top: 128px;
  width: 160px;
  z-index: 30;
}
.ad-rail--left {
  left: 18px;
}
.ad-rail--right {
  right: 18px;
}
@media (min-width: 1540px) {
  .ad-rail:not([hidden]) {
    display: block;
  }
}
body.checkout-mode .ad-rail,
body.admin-mode .ad-rail {
  display: none !important; /* ödeme ve yönetim ekranlarında reklam gösterilmez */
}
/* WhatsApp düğmesi yönetim panelinde anlamsız: oradaki kullanıcı müşteri değil
   personel. Dar ekranda tablo hücrelerinin ve düğmelerin üstünü kapatıyordu. */
body.admin-mode .fab-corner {
  display: none;
}
.ad-banner img,
.ad-rail ins {
  display: block;
  width: 160px;
  max-width: 100%;
  border-radius: 14px;
}
.ad-promo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px;
  border-radius: 16px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.2);
}
.ad-promo-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.ad-promo-icon {
  font-size: 34px;
  line-height: 1;
}
.ad-promo strong {
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ad-promo-price {
  font-size: 17px;
  font-weight: 800;
}
.ad-promo-price s {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
  margin-right: 4px;
}
.ad-promo-btn {
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #0e7490;
  font-weight: 800;
  font-size: 13px;
}

/* ===================== DOLULUK PANOSU (5 / 10 / 15 GÜN) ===================== */
.load-tabs {
  display: inline-flex;
  gap: 6px;
  margin-left: 10px;
  vertical-align: middle;
}
.load-tabs .admin-tab {
  padding: 5px 12px;
  font-size: 12.5px;
}
.dash-card tr.dash-clickable {
  cursor: pointer;
}
.dash-card tr.dash-clickable:hover td {
  background: #f0fdfa;
}

/* ===================== NOSCRIPT FALLBACK =====================
   JS kapalıyken görünen tek içerik; sade ve okunabilir olması yeterli. */
.noscript-box {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  font-size: 15px;
  line-height: 1.6;
}
.noscript-box h1 {
  font-size: 26px;
  margin-bottom: 10px;
}
.noscript-box h2 {
  font-size: 18px;
  margin: 22px 0 8px;
  color: #0e7490;
}
.noscript-box ul {
  margin: 0 0 0 20px;
}
.noscript-box a {
  color: #0e7490;
}

/* ===================== SEPET (ÇOK TURLU) ===================== */
.cart-link {
  position: relative;
  white-space: nowrap;
}
.cart-badge {
  display: inline-block;
  min-width: 20px;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #0e7490;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
}
.cart-summary {
  position: sticky;
  top: 96px;
}
.cart-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
@media (max-width: 640px) {
  .cart-row {
    grid-template-columns: 84px 1fr;
  }
  .cart-row .cart-side {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
  }
}
.cart-thumb {
  position: relative;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.cart-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-thumb span {
  position: relative;
}
.cart-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.cart-info a {
  color: inherit;
  text-decoration: none;
}
.cart-info strong {
  font-size: 15.5px;
  /* --text diye bir değişken yok (yedek değere düşüyordu); gövde mürekkebi kullanılır */
  color: var(--ink);
}
.cart-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  white-space: nowrap;
}
.cart-side strong {
  font-size: 18px;
}
.cart-sug-head {
  margin: 28px 0 4px;
}
.tier-hint {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: #fefce8;
  border: 1px solid #fde68a;
  color: #854d0e;
  font-size: 13px;
}
.co-line-head {
  margin: 18px 0 8px;
  font-size: 15px;
  color: #0e7490;
}
.co-line-head small {
  color: var(--muted);
  font-weight: 500;
}
.tier-row {
  grid-template-columns: 1fr 1fr 1fr auto;
}

/* ===================== İPTAL & İADE TAKİBİ ===================== */
.pill-pending {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.tab-badge {
  display: inline-block;
  min-width: 19px;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}

/* ===================== DİL SEÇİCİ (açılır liste) =====================
   Diller üst çubukta yan yana dizilmez: tek düğme, tıklanınca bayrak +
   kısaltma + tam adın göründüğü açılır liste. */
.lang-select {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1e293b;
  border: none;
  color: #e2e8f0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.lang-trigger:hover {
  background: #27364b;
}
.lang-caret {
  font-size: 10px;
  opacity: 0.75;
  transition: transform 0.15s;
}
.lang-select[data-open="true"] .lang-caret {
  transform: rotate(180deg);
}
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 195px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 250;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lang-menu[hidden] {
  display: none;
}
.lang-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.lang-opt:hover {
  background: var(--bg-alt);
}
.lang-opt.on {
  background: rgba(14, 116, 144, 0.1);
}
.lang-opt-flag {
  font-size: 16px;
  line-height: 1;
}
.lang-opt-code {
  min-width: 22px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.lang-opt-name {
  font-weight: 600;
}
.lang-opt.on .lang-opt-name {
  color: var(--primary-dark);
}
.lang-opt-tick {
  margin-left: auto;
  color: var(--primary);
  font-weight: 800;
}

/* ===================== SEPET HOVER PANELİ =====================
   Sepet bağlantısının üzerine gelindiğinde altında açılır: içindeki turlar
   (uzunsa kendi içinde kaydırılır), toplam ve doğrudan ödeme düğmesi.
   Sepete tıklamak yine #sepet ekranını açar. Dokunmatik/mobilde gizlidir. */
.cart-wrap {
  position: relative;
  display: inline-flex;
}
.cart-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 240;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.15s,
    transform 0.15s,
    visibility 0.15s;
  text-align: left;
  cursor: default;
}
.cart-wrap:hover .cart-pop,
.cart-wrap:focus-within .cart-pop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.cart-pop-empty {
  margin: 6px 2px;
  font-size: 13.5px;
  color: var(--muted);
}
.cart-pop-list {
  max-height: 268px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  scrollbar-width: thin;
}
.cart-pop-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s;
}
.cart-pop-row:hover {
  background: var(--bg-alt);
}
.cart-pop-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.cart-pop-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-pop-info {
  flex: 1;
  min-width: 0;
}
.cart-pop-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-pop-meta {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.cart-pop-price {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}
.cart-pop-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.cart-pop-foot strong {
  font-size: 15px;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}
.cart-pop .btn {
  margin-top: 10px;
  width: 100%;
  font-size: 14px;
  padding: 9px 14px;
}
.cart-pop-view {
  display: block;
  margin-top: 7px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.cart-pop-view:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .cart-pop {
    display: none; /* dokunmatikte hover yok: sepete dokunmak doğrudan sepet ekranını açar */
  }
}

/* ===================== DAR MASAÜSTÜ: MENÜYÜ ERKEN TOPLA =====================
   Menü etiketleri dile göre uzar (Almanca/Lehçe TR'den ~%20 geniş). 640–900 px
   arasında yatay menü kapsayıcıyı taşırıyordu; bu aralıkta da hamburger menü
   kullanılır, böylece hiçbir dilde yatay taşma oluşmaz. */
@media (max-width: 900px) {
  .hamburger {
    display: block;
  }
  .nav {
    display: none;
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav.open {
    display: flex;
  }
  .cart-wrap {
    display: block; /* açılır menüde tam satır */
  }
  .cart-pop {
    display: none; /* menü toplanmışken hover paneli yok: sepete dokunmak sepet ekranını açar */
  }
}

/* ============================================================================
   "SEFER PANOSU" — YAPISAL TASARIM KATMANI
   ----------------------------------------------------------------------------
   Tez: Bir tur operatörünün dünyasındaki en karakteristik şey güzel bir gradyan
   değil, SALI SABAHI 4 KOLTUĞU KALMIŞ BİR TEKNEDİR. O yüzden hero ortalanmış bir
   slogan değil, gerçek veriyle çalışan bir KALKIŞ PANOSU taşır.
   Kompozisyon ortalı değil ASİMETRİK: solda tipografi, sağda pano, altta rezervasyon şeridi.
   Cesaret tek yerde: pano. Gerisi sessiz.
   ============================================================================ */

/* ---------- Tipografi: geniş grotesk başlıklar ---------- */
.hero h1,
.section-head h2,
.cta-band h2,
#listTitle,
#detailPage h1,
.tour-card h3,
.car-card h3,
.logo {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.hero h1 {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 0.98;
  color: #fff;
  margin-bottom: 20px;
  text-wrap: balance;
}
.grad {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
}

/* ---------- HERO: asimetrik ızgara ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 88% -30%, rgba(228, 87, 46, 0.16), transparent 65%),
    linear-gradient(170deg, #0c1a21 0%, #12242c 60%, #16303a 100%);
  color: #e8eef0;
  padding: 66px 0 0;
  text-align: left;
  overflow: hidden;
}
/* Hero arka plan görsel şeridi — .hero zaten position:relative + overflow:hidden.
   Görsel tanımlı değilken #heroMedia [hidden] kalır ve degrade görünür. */
.hero-media {
  position: absolute;
  inset: 0 0 auto 0;
  min-height: 100%; /* yükseklik heroGorselSabitle ile sabitlenir; ölçülemezse bölümü kaplar */
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-slide.on {
  opacity: 1;
}
/* Perde: beyaz başlık açık renkli bir fotoğrafın üstünde okunmaz olurdu.
   Soldan sağa koyulaşan degrade metin sütununu korur, sağdaki sefer panosunun
   arkasını da yeterince karartır. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 15, 20, 0.92) 0%, rgba(8, 15, 20, 0.72) 48%, rgba(8, 15, 20, 0.58) 100%),
    linear-gradient(180deg, rgba(8, 15, 20, 0.35), rgba(8, 15, 20, 0.6));
}
/* Hero içeriği görsel katmanının ÜSTÜNDE kalmalı */
.hero-inner,
.hero .container {
  position: relative;
  z-index: 1;
}
/* Gezinme kümesi: hero ızgarasının sol sütununda, güven satırının altında
   durur. Mutlak konumlandırılsaydı 1540px üstünde yan reklam panolarının,
   altta da arama kutusunun altında kalıyordu. */
.hero-ctrl {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.hero-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 15, 20, 0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    transform 0.15s;
}
.hero-nav:hover {
  background: rgba(8, 15, 20, 0.78);
}
.hero-dots {
  display: flex;
  gap: 4px;
}
.hero-dot {
  width: 24px;
  height: 24px;
  padding: 8px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  background-clip: content-box;
  cursor: pointer;
}
.hero-dot.on {
  background: #fff;
  background-clip: content-box;
}
@media (max-width: 900px) {
  /* Dar ekranda küme akışın sonuna düşer; ızgara kuralları geçersizdir */
  .hero-ctrl {
    order: 8;
    align-self: flex-start; /* kolon flex'te çapraz eksen = yatay */
    margin-top: 18px;
  }
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  column-gap: 54px;
  align-items: start;
}
.hero-badge,
.hero h1,
.hero p {
  grid-column: 1;
  justify-self: start;
}
.dep-board {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
}
.search-tabs,
.search-panel,
.hero-trust {
  grid-column: 1 / -1;
}
.hero-badge {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero p {
  color: rgba(232, 238, 240, 0.72);
  font-size: 17px;
  max-width: 46ch;
  margin-bottom: 30px;
}
.hero-trust {
  justify-content: flex-start;
  gap: 28px;
  margin: 22px 0 34px;
  color: rgba(232, 238, 240, 0.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- İMZA: SEFER PANOSU ---------- */
.dep-board {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 6px;
  backdrop-filter: blur(8px);
}
.db-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px 10px;
}
.db-title {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.db-live {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.db-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(228, 87, 46, 0.7);
  animation: dbPulse 2.4s infinite;
}
@keyframes dbPulse {
  70% {
    box-shadow: 0 0 0 7px rgba(228, 87, 46, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(228, 87, 46, 0);
  }
}
.db-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 13px 14px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.db-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.db-date {
  font-family: var(--display);
  font-stretch: 90%;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.db-main {
  min-width: 0;
}
.db-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #eef3f4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-region {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(232, 238, 240, 0.42);
  margin-top: 2px;
}
.db-side {
  text-align: right;
  white-space: nowrap;
}
.db-price {
  display: block;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 16.5px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.db-seats {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(232, 238, 240, 0.45);
  margin-top: 2px;
}
.db-seats.low {
  color: var(--accent);
}

/* ---------- Rezervasyon şeridi: hero'nun altına oturur ---------- */
.search-tabs {
  max-width: none;
  padding: 0;
  gap: 4px;
  margin-top: 6px;
}
/* Seçili olmayan sekme yarı saydam beyaz: neredeyse görünmez saydam zeminde
   tıklanabilir olduğu anlaşılmıyordu */
.search-tab {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-bottom: none;
  color: var(--ink);
  border-radius: 10px 10px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px;
}
.search-tab.active {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.search-box {
  max-width: none;
  margin: 0 0 -34px;
  border: 0;
  border-radius: 14px;
  padding: 14px;
  gap: 10px;
  box-shadow: 0 24px 60px rgba(6, 16, 21, 0.45);
  position: relative;
  z-index: 3;
}
.search-field label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero + .section,
.hero + section {
  padding-top: 78px;
}

/* ---------- Bölüm başlıkları: sola yaslı + sağa uzanan çizgi ---------- */
.section-head {
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 22px;
  margin-bottom: 34px;
}
.section-head h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  margin: 0;
}
.section-head::after {
  content: "";
  height: 1px;
  background: var(--line);
}
.section-head p {
  grid-column: 1 / -1;
  color: var(--muted);
  margin: 10px 0 0;
  max-width: 58ch;
}
.see-all {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 10px;
  font-weight: 700;
  color: var(--accent-text);
}

/* ---------- Kartlar: görsel hâkim, mercan fiyat ---------- */
.tour-card,
.car-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.tour-card:hover,
.car-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(16, 30, 38, 0.16);
}
.tour-img,
.car-img {
  height: 215px;
}
.tour-img::after,
.car-img::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(180deg, transparent, rgba(12, 26, 33, 0.5));
  pointer-events: none;
}
.tour-img .ph-img,
.car-img .ph-img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tour-card:hover .ph-img,
.car-card:hover .ph-img {
  transform: scale(1.05);
}
.tour-card h3,
.car-card h3 {
  font-size: 18.5px;
  line-height: 1.2;
}
.tour-meta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.tour-price strong,
.car-price strong {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 24px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tour-price small,
.car-price small {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tour-tag {
  background: rgba(16, 30, 38, 0.66);
  color: #fff;
  backdrop-filter: blur(4px);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tour-tag.feat {
  background: var(--accent);
  color: #fff;
}

/* ---------- Kategoriler, düğmeler, bantlar ---------- */
.cat-card {
  background: var(--paper);
  border-color: transparent;
}
.cat-card:hover,
.cat-card.active {
  background: #fff;
  border-color: var(--accent);
}
.btn {
  border-radius: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.btn-primary {
  background: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.nav-cta {
  background: var(--accent-btn);
  border-radius: 9px;
}
.nav-cta:hover {
  background: var(--accent-btn-hover);
}
.cta-band {
  background: linear-gradient(150deg, var(--ink), #16303a);
}
.topbar {
  background: var(--ink);
  color: #8ea0a7;
  font-size: 12.5px;
}
.footer {
  background: var(--ink);
  color: #93a6ad;
}
.logo {
  font-size: 24px;
  color: var(--ink);
}
.logo span {
  color: var(--accent);
}
.logo-light {
  color: #fff;
}
.logo-light span {
  color: var(--accent);
}

/* ---------- Erişilebilirlik ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .db-live::before {
    animation: none;
  }
  .tour-card,
  .car-card,
  .ph-img,
  .btn-primary {
    transition: none;
  }
  .tour-card:hover,
  .car-card:hover,
  .btn-primary:hover {
    transform: none;
  }
  .tour-card:hover .ph-img,
  .car-card:hover .ph-img {
    transform: none;
  }
}

/* ---------- Dar ekran: tek sütun, pano metinden hemen sonra ---------- */
@media (max-width: 900px) {
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-badge {
    order: 1;
  }
  .hero h1 {
    order: 2;
  }
  .hero p {
    order: 3;
  }
  .dep-board {
    order: 4;
    margin-bottom: 26px;
  }
  .search-tabs {
    order: 5;
  }
  .search-panel {
    order: 6;
  }
  .hero-trust {
    order: 7;
  }
}
@media (max-width: 640px) {
  .hero {
    padding-top: 44px;
  }
  .hero-trust {
    gap: 14px;
    font-size: 10px;
  }
  .db-row {
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px 10px;
  }
  .section-head {
    grid-template-columns: 1fr;
  }
  .section-head::after {
    display: none;
  }
}

/* Pano: tarih grubu başlığı (kalkış panosu mantığı) */
.db-day {
  padding: 12px 14px 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--display);
  font-stretch: 90%;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.db-day + .db-row {
  border-top: 0;
}
.db-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 14px 11px;
}

/* ---- DÜZELTME: sol sütun panonun yüksekliğine göre esnemesin ----
   Önceki kurguda pano 3 satır boyunca uzandığı için o satırlar geriliyor,
   başlık ile paragraf arasında kocaman boşluk kalıyordu. Metin artık tek
   hücrede (.hero-copy); ızgara yalnızca iki sütundan ibaret. */
.hero-inner {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: start;
}
.hero-copy {
  grid-column: 1;
  grid-row: 1;
  padding-top: 26px;
}
.dep-board {
  grid-column: 2;
  grid-row: 1;
}
.hero-badge,
.hero h1,
.hero p {
  grid-column: auto;
}
.hero p {
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .hero-copy {
    order: 1;
    padding-top: 0;
  }
  .dep-board {
    order: 2;
    margin: 22px 0 26px;
  }
  .hero p {
    margin-bottom: 4px;
  }
}

/* ---- Hero ızgarası: açık yerleşim (kompozisyonu dengele) ----
   Güven satırı sağdaki panonun bıraktığı boşluğu doldurmak için sol sütuna alınır. */
.hero-copy {
  grid-column: 1;
  grid-row: 1;
}
.dep-board {
  grid-column: 2;
  /* Görsel şeridi gezinme kümesi için 3. satır eklendi; pano onu da kapsar */
  grid-row: 1 / span 3;
}
.hero-trust {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 30px 0 0;
}
.hero-ctrl {
  grid-row: 3;
  align-self: start;
  margin-top: 22px;
}
.search-tabs {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: 34px;
}
.search-panel {
  grid-column: 1 / -1;
  grid-row: 5;
}
@media (max-width: 900px) {
  .hero-trust {
    order: 7;
    margin: 20px 0 0;
  }
  .search-tabs {
    order: 5;
    margin-top: 0;
  }
  .search-panel {
    order: 6;
  }
}

/* ============================================================================
   CİLA TURU — hata avı sonrası düzeltmeler
   ============================================================================ */

/* (1) Görsel bulunamadığında: parlak gradyan + dev emoji yerine sakin mürekkep zemin.
   Veri içinden gelen turuncu/mor gradyanlar yeni kimlikle çakışıyordu; üzerine
   mürekkep örtüsü serilir, emoji küçültülüp soluklaştırılır. Fotoğraf varsa
   fotoğraf her şeyin üstünde kalır. */
.tour-img::before,
.car-img::before,
.gallery-slide::before,
.cart-pop-thumb::before,
.cart-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(158deg, rgba(16, 30, 38, 0.72), rgba(22, 48, 58, 0.88));
  z-index: 0;
}
/* DİKKAT: burada `.tour-img > span` gibi geniş bir seçici KULLANMA —
   rozetler (.tour-tag, .deal-countdown) de span'dir ve position:absolute'tur;
   relative'e çevrilince hepsi üst üste biniyordu. Yalnızca büyük ikon hedeflenir. */
.tour-img > span:not([class]),
.car-img > span.ci-icon,
.cart-thumb > span:not([class]) {
  position: relative;
  z-index: 1;
}
/* emoji rozetleri değil, yalnızca büyük ikon: sınıfsız span */
.tour-img > span:not([class]),
.car-img > span.ci-icon {
  font-size: 38px;
  opacity: 0.42;
  filter: grayscale(0.3);
}
.gallery-slide {
  font-size: 64px;
  color: rgba(255, 255, 255, 0.34);
}
.ph-img {
  z-index: 2;
}
.tour-img .tour-tag,
.car-img .tour-tag,
.tour-img .deal-countdown,
.car-img .deal-countdown {
  z-index: 3;
}
.tour-img::after,
.car-img::after {
  z-index: 2;
}

/* (2) İç sayfa başlıkları da kimliğe bağlansın */
#checkoutPage h2,
#adminPage h2,
#cartPage h2,
.detail-sec h3,
#detailPage h3,
.modal h3,
.co-name {
  font-family: var(--display);
  font-stretch: 108%;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* (3) 900–1000px arası güven satırı iki satıra düşüyordu: sıkılaştır */
@media (max-width: 1080px) {
  .hero-trust {
    gap: 18px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }
}

/* (4) Odak halkası koyu zeminde de görünür olsun */
.hero :focus-visible,
.dep-board :focus-visible,
.footer :focus-visible {
  outline-color: #fff;
}

/* Güven satırı: TR'de tek satır, EN/DE/PL'de üç satıra düşüyordu.
   Dilden bağımsız düzgün dursun diye 2×2 ızgara (mobilde tek sütun). */
@media (min-width: 901px) {
  .hero-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 12px 34px;
  }
  .hero-trust span {
    position: relative;
    padding-left: 14px;
  }
  .hero-trust span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.85;
  }
}

/* ============================================================================
   HATA DÜZELTMELERİ — 2. tur
   ============================================================================ */

/* (1) Arama kutusunun ALTI KESİLİYORDU.
   Sebep: hero'ya verdiğim `overflow:hidden`, kutunun -34px negatif marjıyla
   hero'nun dışına taşan kısmını kırpıyordu. Arka plan gradyanı zaten kendi
   kutusuyla sınırlı olduğu için taşmaya izin vermek güvenli. */
.hero {
  overflow: visible;
}
.search-box {
  margin-bottom: -30px;
}

/* (2) ARAÇ KİRALAMA ÇUBUĞU AŞIRI DARALIYORDU.
   Sebep: orijinal `#panelCars { max-width: 1000px }` kuralı, ID önceliğiyle
   benim `.search-box { max-width:none }` kuralımı eziyordu; üstelik 6 sütun
   1000px'e sıkışıyordu. Tur çubuğuyla aynı genişliğe getirildi. */
#panelCars {
  max-width: none;
  grid-template-columns: 1.15fr 1.15fr 1fr 0.7fr 1fr 0.7fr;
}
/* Yukarıdaki 6 sütunlu masaüstü kuralı, dosyanın başındaki 900px kuralından SONRA geldiği
   için onu eziyordu: telefonda altı alan tek satıra sıkışıyor, alış noktası ve tarihler
   birkaç harf genişliğinde kalıyordu ("farklı noktaya teslim" işaretliyken daha da kötü).
   Tablet: iki sütun. Telefon: noktalar tam satır, tarih ile saati yan yana. */
@media (max-width: 900px) {
  #panelCars {
    grid-template-columns: 1fr 1fr;
  }
  #panelCars .f-pickup {
    grid-column: 1 / -1;
  }
  #panelCars.diff-on .f-pickup {
    grid-column: span 1;
  }
}
@media (max-width: 640px) {
  #panelCars {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #panelCars .f-pickup,
  #panelCars.diff-on .f-pickup,
  #panelCars #carDropField {
    grid-column: 1 / -1;
  }
}
/* En dar telefonlarda (≤380px) iki sütunlu tarih/saat kutularında değer kırpılmasın */
@media (max-width: 380px) {
  /* Tarih kutusu boşken "gg.aa.yyyy" göstermek için metin türünde durur, odaklanınca tarihe
     döner: tür seçicisi yerine alanın kendisi hedeflenir. Yazı 16px kalır (iPhone daha
     küçük yazılı kutuya odaklanınca sayfayı yakınlaştırır). */
  #panelCars .search-field input {
    padding-left: 8px;
    padding-right: 6px;
  }
}

/* (3) KARUSELDE HOVER GÖLGESİ KESİLİYORDU.
   Sebep: `.carousel-track` yatay kaydırma kabı olduğu için dikeyde de kırpar;
   kartın 46px'lik gölgesi ve -3px kalkışı dışarıda kalıyordu. Kaba dikey nefes
   payı verilip aynı miktar negatif marjla geri alındı (görsel boşluk değişmez). */
.carousel-track {
  padding: 22px 8px 30px;
  margin-top: -16px;
  margin-bottom: -20px;
  scroll-padding: 0 8px;
}

/* ============================================================================
   İYİLEŞTİRMELER
   ============================================================================ */

/* Sepette "Çıkar" düğmesi dolu kırmızı bloktu ve asıl eylemden (Ödemeye Geç)
   daha çok bağırıyordu. Yıkıcı eylem sessiz olmalı: hayalet düğme, hover'da kırmızı.
   (Yönetim panelindeki silme düğmeleri dolu kırmızı kalır — orada uyarı doğru.) */
.cart-row .btn-danger {
  background: none;
  color: var(--muted);
  border: 1px solid var(--line);
  font-weight: 600;
  padding: 7px 14px;
}
.cart-row .btn-danger:hover {
  background: #fdeceb;
  border-color: #f0b3ab;
  color: #b3261e;
}

/* Sefer panosu satırları tıklanabilir olduğunu belli etsin: hover'da ok belirir */
.db-row {
  position: relative;
}
.db-row::after {
  content: "→";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translate(6px, -50%);
  opacity: 0;
  color: var(--accent);
  font-size: 14px;
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.db-row:hover::after,
.db-row:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}
.db-row:hover .db-side,
.db-row:focus-visible .db-side {
  transform: translateX(-12px);
  transition: transform 0.15s;
}
.db-row .db-side {
  transition: transform 0.15s;
}

/* Bölüm başlığındaki "tümünü gör" bağlantısı: hover'da alt çizgi */
.see-all:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .db-row::after,
  .db-row .db-side {
    transition: none;
  }
  .db-row:hover .db-side {
    transform: none;
  }
}

/* ============================================================================
   KARUSEL: YATAY GÖLGE KIRPILMASI + KAYDIRMA ÇUBUĞU
   ============================================================================ */

/* (a) Kartın gölgesi kabın SOL/SAĞ kenarında da kesiliyordu — dikeyde çözmüştüm,
   yatayda 8px yetmiyordu. Kaba 26px yatay nefes payı verilip aynı miktar negatif
   marjla geri alınır: kartların yeri değişmez, gölge için yer açılır.
   (Ok düğmeleri 42px + 10px boşlukta durduğu için kapsayıcı dışına taşma olmaz.) */
.carousel-track {
  padding-left: 26px;
  padding-right: 26px;
  margin-left: -26px;
  margin-right: -26px;
  scroll-padding-left: 26px;
  scroll-padding-right: 26px;
}

/* (b) Karuselin altındaki kaydırma çubuğu görünmesin — gezinme için ok düğmeleri
   ve nokta göstergeleri var; çubuk hem gereksiz hem de tasarımı kirletiyordu.
   (Kaydırma davranışı aynen çalışmaya devam eder: tekerlek, dokunmatik, klavye.) */
.carousel-track {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* eski Edge */
}
.carousel-track::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome / Safari */
}

/* Ok düğmeleri ve noktalar kimliğe uysun */
.car-nav {
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.car-nav:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.car-dot {
  width: 7px;
  height: 7px;
  background: #cdd5d3;
}
.car-dot.on {
  background: var(--accent);
  transform: scale(1.25);
}
.car-dots {
  margin-top: 14px;
  gap: 9px;
}

/* ============================================================================
   FOOTER — editoryal blok (tasarımın en zayıf halkasıydı)
   ============================================================================ */
.footer-grid {
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 44px;
  padding: 72px 20px 48px;
  max-width: 1140px;
  margin: 0 auto;
}
.footer .logo-light {
  font-size: 32px;
  display: inline-block;
  margin-bottom: 14px;
}
.footer p {
  font-size: 14px;
  line-height: 1.65;
  color: #8ba0a6;
  max-width: 34ch;
}
.footer h4 {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #67848c;
  margin-bottom: 16px;
}
.footer a:not(.logo) {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: #b9cace;
  text-decoration: none;
  transition: color 0.15s;
}
.footer a:not(.logo):hover {
  color: var(--accent);
}
.footer .pay-badges {
  font-size: 13.5px;
  font-weight: 600;
  color: #b9cace;
  letter-spacing: 0.02em;
}
.footer .pay-note {
  font-size: 12.5px;
  color: #67848c;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px;
  font-size: 12.5px;
  color: #67848c;
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 48px 20px 32px;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Gölge payı, gölgenin GERÇEK yayılımına göre hesaplandı:
   box-shadow: 0 20px 46px  →  yukarı ~3px, aşağı ~43px, yanlara ~23px taşar.
   Paylar bunun üstünde tutulur; net görsel boşluk negatif marjla korunur. */
.carousel-track {
  padding: 26px 30px 46px;
  margin: -20px -30px -36px;
  scroll-padding-left: 30px;
  scroll-padding-right: 30px;
}

/* Dar ekranda ok düğmeleri gizlendiği için karusel kapsayıcının tüm genişliğini
   kaplar; -30px negatif marj kapsayıcının 20px iç boşluğunu aşıp SAYFAYI 10px
   TAŞIRIYORDU. Marj, kapsayıcı payına (20px) eşitlenir: taşma sıfır, gölgeye
   yine 20px yer kalır. */
@media (max-width: 900px) {
  .carousel-track {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
    scroll-padding-left: 20px;
    scroll-padding-right: 20px;
  }
}

/* HATA: Bölüm başlığındaki ayraç çizgisi (::after) ızgarada son çocuk olduğu için
   açıklama paragrafının ALTINA düşüyordu; başlığın sağında olması gerekiyordu.
   Açık yerleştirme ile 1. satırın 2. sütununa sabitlenir. */
.section-head::after {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}
.section-head h2 {
  grid-column: 1;
  grid-row: 1;
}

/* Kategori ve "neden biz" ikonları, sade tipografinin yanında en yüksek sesli
   öğe hâline gelmişti: küçültülüp doygunlukları düşürüldü. */
.cat-icon,
.why-icon {
  font-size: 26px;
  opacity: 0.75;
  filter: saturate(0.75);
}
.cat-card {
  padding: 22px 14px;
}
.cat-card h3 {
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.why-card {
  padding: 26px 20px;
}
.why-card h3 {
  font-size: 16px;
}
.why-card p {
  font-size: 13.5px;
  color: var(--muted);
}

/* ============================================================================
   KARUSEL — "komşu kart sızıntısı" düzeltmesi
   ----------------------------------------------------------------------------
   Sorun: Gölgeye yer açmak için kaba 30px yatay dolgu vermiştim. Ama kaydırma
   kabında içerik DOLGUNUN ALTINDAN kayar; dolgu > boşluk (gap) olunca komşu
   kartın ince bir şeridi görünür kalıyordu.

   Matematik: kartlar `flex-basis: calc((100% - 36px)/3)` ile içerik kutusuna
   göre boyutlanır. 3 kart + 3 boşluk = içerik genişliği + 18px. Yani sonraki
   kart, içerik bitiminden tam BİR BOŞLUK (18px) sonra başlar.
   Dolayısıyla dolgu = boşluk (18px) olduğunda:
     · sola kayan komşu kart tam görünür kenarda biter  → 0px sızıntı
     · sağdaki sonraki kart tam görünür kenarda başlar → 0px sızıntı
   ve gölgeye yine 18px yer kalır. Hover gölgesi de bu paya sığacak şekilde
   biraz sıkılaştırıldı (yayılım ~17px < 18px), böylece kırpılma da olmaz. */
.carousel-track {
  padding-left: 18px;
  padding-right: 18px;
  margin-left: -18px;
  margin-right: -18px;
  scroll-padding-left: 18px;
  scroll-padding-right: 18px;
}
@media (max-width: 900px) {
  .carousel-track {
    padding-left: 18px;
    padding-right: 18px;
    margin-left: -18px;
    margin-right: -18px;
    scroll-padding-left: 18px;
    scroll-padding-right: 18px;
  }
}
.carousel-item .tour-card:hover,
.carousel-item .car-card:hover {
  box-shadow: 0 16px 34px rgba(16, 30, 38, 0.17);
}

/* Önizleme rozeti — yalnızca geçici tanıtım adreslerinde görünür */
.preview-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 60;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: rgba(16, 30, 38, 0.82);
  backdrop-filter: blur(4px);
  pointer-events: auto;
  cursor: help;
}
@media (max-width: 600px) {
  .preview-badge {
    left: 8px;
    bottom: 8px;
    font-size: 10.5px;
    padding: 5px 9px;
  }
}

/* ============================================================================
   DOKUNMATİK CİLASI — dokunma hedefleri ve iOS yakınlaştırma
   ----------------------------------------------------------------------------
   Bu blok en sona konuldu: yukarıdaki kuralların üzerine yazar, fare kullanan
   masaüstü görünümünü değiştirmez.

   KOŞUL NEDEN GENİŞLİK DEĞİL: kurallar önce `max-width: 640px` idi ve telefon
   YAN ÇEVRİLİNCE (667px) ya da tablette (768px) hepsi devre dışı kalıyordu —
   yani iOS yakınlaştırma hatası tam da o hâllerde geri geliyordu. Parmakla
   dokunmak ekran genişliğiyle değil, işaretleme aygıtıyla ilgilidir:
   `pointer: coarse` tüm dokunmatik aygıtlarda, her yönde ve her genişlikte
   doğrudur. Dar ama fareli ekranlar için genişlik koşulu da korunur.
   ============================================================================ */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  /* iOS Safari 16px'ten KÜÇÜK yazılı bir alana odaklanınca sayfayı otomatik
     yakınlaştırır ve kullanıcı elle uzaklaştırana kadar öyle kalır. Formda
     alandan alana geçen ziyaretçi için rezervasyon akışını bozar. Tek çözüm
     alan yazısını 16px'e sabitlemektir (kutu boyutları aynı kalır).
     !important gerekli: alan yazı boyutları .search-field / .contact-form gibi
     SINIF seçicileriyle veriliyor, sınıf seçici eleman seçicisini yener. Tek
     tek sınıf saymak yeni bir form eklendiğinde hatayı geri getirirdi. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Ana menü düğmesi 23×32 idi — parmakla ıskalanıyordu. Görsel boyut aynı,
     yalnızca tıklanabilir alan büyütüldü. */
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-right: -10px; /* büyüyen alan logoyu itmesin */
  }

  /* Para birimi düğmeleri 24×25 idi */
  .lang-btn {
    min-width: 40px;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
  }

  /* Karusel noktaları 7–9px idi: görünen nokta aynı boyutta kalsın diye
     dolgu content-box ile kırpılıyor, dokunulabilir alan 24px oluyor. */
  .car-dots {
    gap: 2px;
  }
  .car-dot {
    width: 24px;
    height: 24px;
    padding: 7px;
    background-clip: content-box;
  }
  .car-dot.on {
    padding: 6px;
  }

  /* Onay kutuları 13×13 idi (KVKK/şartlar kutusu dahil) */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    flex: none;
  }

  /* Bölge/kategori rozetlerindeki ✕ 9×14 idi */
  .region-chip button,
  .wd-chip button {
    min-width: 28px;
    min-height: 28px;
    line-height: 1;
  }

  /* Katlanır bölüm başlıkları 28px yükseklikteydi */
  .crm-head .fold-btn {
    min-height: 40px;
  }

  /* WhatsApp düğmesi mobilde 126px genişliğinde bir haptı ve "Yaklaşan
     Seferler" listesinin fiyat/kontenjan sütununu kapatıyordu. Mobilde
     standart olan yuvarlak ikon düğmesine dönüşür; metin ekran okuyucular
     için bağlantıda kalır, yalnızca görsel olarak gizlenir. */
  .fab-corner {
    right: 14px;
    bottom: 14px;
  }
  .wa-fab {
    width: 56px;
    height: 56px;
    padding: 0;
    gap: 0;
    justify-content: center;
    font-size: 0;
  }
  .wa-fab::before {
    content: "📞";
    font-size: 25px;
    line-height: 1;
  }

  /* Sepette gizlenir: dar ekranda tam genişlikteki "Ödemeye Geç" düğmesinin
     üstüne biniyor ve satın alma düğmesini kapatıyordu. Ödeme ekranında zaten
     .checkout-mode ile gizli. */
  .cart-mode .fab-corner {
    display: none;
  }

  /* Sayfa sonuna kadar kaydırıldığında yüzen WhatsApp düğmesi alt bilgideki
     ACENTE KİMLİK SATIRINI ve telif satırını kapatıyordu. O satır mevzuat
     gereği görünür olmak zorunda (Seyahat Acentaları Yönetmeliği: unvan +
     işletme belge numarası her sayfanın sonunda). Alta düğme yüksekliği kadar
     boşluk bırakılınca düğme yazının değil boşluğun üstüne geliyor. */
  .footer-bottom {
    padding-bottom: 86px;
  }

  /* Geniş yönetim tabloları .admin-card içinde yatay kayar (min-width:680px);
     parmakla kaydırma akıcı olsun. */
  .admin-card,
  .dash-scroll {
    -webkit-overflow-scrolling: touch;
  }
}

/* Yasal metin satırı: başlık + sil düğmesi üstte, metin altında tam genişlik */
.legal-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.legal-row textarea {
  grid-column: 1 / -1;
}

/* Ödeme öncesi sözleşme onayları */
.consent-box {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-alt);
}
.consent-info {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
/* İsteğe bağlı izin zorunlulardan ayrılsın: üstünde ince bir ayraç */
.kvkk-check.opt {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
/* Acente unvanı + işletme belge numarası satırı (mevzuat gereği her sayfada) */
.agency-line {
  font-size: 12px;
  opacity: 0.75;
  padding-bottom: 6px;
}

/* ===================== YÖNETİM: RENK SEÇİCİLER =====================
   Hazır tema kartları kaldırıldı. Her rol bir satır: renk kutusu (damlalık),
   adı + nerede kullanıldığının açıklaması, ve elle yazılabilen hex alanı. */
.color-grid {
  display: grid;
  gap: 10px;
}
.color-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.color-row .color-dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: none;
  cursor: pointer;
  flex: none;
}
/* Tarayıcının renk kutusuna verdiği iç boşluk kaldırılır: renk kutuyu doldursun */
.color-row .color-dot::-webkit-color-swatch-wrapper {
  padding: 2px;
}
.color-row .color-dot::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}
.color-text label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.color-text .co-note {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
}
.color-row .color-hex {
  width: 96px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  text-transform: lowercase;
}
@media (max-width: 640px) {
  /* Dar ekranda hex alanı açıklamanın altına iner, renk kutusu solda kalır.
     Açıklama birkaç satır olduğunda kutu ortada asılı kalmasın diye üste hizalanır. */
  .color-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .color-row .color-hex {
    grid-column: 2;
    width: 100%;
  }
}

/* ===================== AÇIK LACİVERT YÜZEYLER =====================
   Üst şerit, hero, kampanya bandı ve footer eskiden neredeyse siyah bir mürekkep
   tonundaydı. Hepsi --night ailesine bağlandı; renk tek yerden (:root) değişir.
   Açık zeminde soluklaşan ikincil yazıların opaklığı yükseltildi — hepsi
   WCAG AA (küçük yazıda 4.5:1) sınırının üstünde kalır. */
.topbar {
  background: var(--night);
  color: var(--on-night-muted);
}
.topbar a {
  color: var(--on-night-muted);
}
.lang-switch {
  background: rgba(255, 255, 255, 0.12);
}
.lang-btn {
  color: var(--on-night-muted);
}
/* Seçili para birimi/dil: --primary artık zemine çok yakın, beyaz hap kullanılır */
.topbar .lang-btn.active {
  background: #fff;
  color: var(--night);
}
.hero {
  background:
    radial-gradient(1100px 520px at 88% -30%, rgba(228, 87, 46, 0.14), transparent 65%),
    linear-gradient(170deg, var(--night-deep) 0%, var(--night) 60%, var(--night-2) 100%);
  color: var(--on-night);
}
.hero p {
  color: rgba(232, 241, 244, 0.88);
}
.hero-trust {
  color: rgba(232, 241, 244, 0.8);
}
.hero-scrim {
  background:
    linear-gradient(90deg, rgb(var(--scrim-rgb) / 0.92) 0%, rgb(var(--scrim-rgb) / 0.74) 48%, rgb(var(--scrim-rgb) / 0.6) 100%),
    linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.3), rgb(var(--scrim-rgb) / 0.55));
}
.hero-nav {
  background: rgb(var(--scrim-rgb) / 0.5);
}
.hero-nav:hover {
  background: rgb(var(--scrim-rgb) / 0.85);
}
.dep-board {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}
.db-region {
  color: rgba(232, 241, 244, 0.7);
}
.db-seats {
  color: rgba(232, 241, 244, 0.75);
}
.search-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.85);
}
.hero .grad,
.hero-badge,
.db-live,
.db-seats.low,
.db-day,
.db-row::after,
.logo-light span,
.footer a:not(.logo):hover {
  color: var(--accent-night);
}
.db-live::before,
.hero-trust span::before {
  background: var(--accent-night);
}
/* Orta bant ve alt bilgi ÜST bölgeden bağımsız seçilebilir (panelde üç ayrı renk) */
.cta-band {
  background: linear-gradient(150deg, var(--band), var(--band-2));
}
.footer {
  background: var(--footer-bg);
  color: var(--on-night-muted);
}
.footer p,
.footer a:not(.logo),
.footer .pay-badges {
  color: var(--on-night-muted);
}
.footer h4,
.footer .pay-note,
.footer-bottom {
  color: rgba(232, 241, 244, 0.72);
}
.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.14);
}
.footer .logo {
  color: #fff; /* açık mavi zeminde gri (#94a3b8) logo sönük kalıyordu */
}

/* ===================== AYARLAR: ANA BAŞLIK / ALT BAŞLIK =====================
   Ayarlar sekmesi 16 bölümden oluşuyor ve tek listede akıyordu. Bölümler ana
   başlıklar altında toplandı; <details> ile açılıp kapanır. Alt başlıklar
   (.set-sub) grubun içinde durur ve applyAdminFolds ile ayrıca katlanabilir. */
.set-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  margin: 12px 0;
}
.set-group[open] {
  box-shadow: var(--shadow);
}
.set-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius);
  list-style: none; /* Safari/Chrome varsayılan üçgeni yerine kendi okumuz */
}
.set-group-head::-webkit-details-marker {
  display: none;
}
.set-group-head::before {
  content: "▸";
  color: var(--muted);
  font-size: 13px;
  transition: transform 0.15s ease;
}
.set-group[open] > .set-group-head::before {
  transform: rotate(90deg);
}
.set-group-head:hover {
  background: var(--bg-alt);
}
.set-group-head:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.set-group-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
}
.set-group-sub {
  color: var(--muted);
  font-size: 12.5px;
}
.set-group-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--line);
}
/* Alt başlık: ana başlıktan küçük, grup içinde ilk olduğunda üst boşluğu azalır */
.set-sub {
  font-size: 15px;
  margin: 18px 0 10px;
}
.set-group-body > .set-sub:first-child {
  margin-top: 14px;
}
@media (max-width: 600px) {
  .set-group-sub {
    flex-basis: 100%; /* dar ekranda alt başlık listesi alt satıra insin */
  }
}

/* ===================== MOBİL: HERO ARAMA KUTUSU TAM GENİŞLİK =====================
   Dar ekranda hero tek sütuna iner (.hero-inner → dikey flex). Ancak dosyanın
   ilerisindeki masaüstü düzeltmesi `.hero-inner { align-items: start }` bu media
   query'den SONRA geldiği için mobilde de geçerli oluyordu. Kolon yönlü flex'te
   çapraz eksen YATAY olduğundan arama kutusu (ve araç kiralama paneli) içerik
   genişliğine düşüp sola yapışıyor, sağda büyük boşluk kalıyordu.
   Ölçüm: 390px ekranda kutu 230px ve sağda 140px boşluk → şimdi 350px, iki yanda
   eşit kenar boşluğu. Okların kümesi (.hero-ctrl) kendi align-self'i ile
   içerik genişliğinde kalmayı sürdürür. */
@media (max-width: 900px) {
  .hero-inner {
    align-items: stretch;
  }
}
/* Dar ekranda araç paneli sayfayı genişletiyordu: alış/teslim seçicisindeki uzun
   seçenek metni ızgara sütununu içerik genişliğine zorluyor, ızgara öğelerinin
   varsayılan `min-width: auto` değeri de küçülmeyi engelliyordu. 320px'lik
   ekranda sayfa 386px'e açılıp her şeyi küçültüyordu (yatay sıkışma). */
.search-box > * {
  min-width: 0;
}

/* ===================== MOBİL HERO: GÜVEN SATIRI VE GÖRSEL OKLARI =====================
   (1) Arama kutusunun -34px alt marjı, masaüstünde kutuyu hero'nun kenarına
       taşırmak içindir. Dar ekranda kutunun ALTINDA güven satırı ("Güvenli
       ödeme · Anında onay · 7/24 destek · Ücretsiz iptal") durduğu için o
       satırın ilk sırasını yarı yarıya örtüyordu. Mobilde taşma kaldırıldı.
   (2) Güven satırı dört öğeyi 3+1 diye kırıyordu; 2×2 ızgaraya alındı, yazı
       10 → 11px büyütüldü ve masaüstündeki madde imleri mobilde de gösterildi.
   (3) Arka görsel değiştirme okları/noktaları hero'nun EN ALTINA, arama
       kutusunun da altına düşüyordu — kontrol ettikleri görselden kopuktu ve
       "sayfanın altında kalan gereksiz düğmeler" gibi duruyordu. Başlık
       metninden hemen sonraya, görselin üstüne alındı. */
@media (max-width: 900px) {
  .search-box {
    margin-bottom: 0;
  }
  .hero-ctrl {
    order: 4;
    margin: 2px 0 20px;
  }
  .dep-board {
    order: 5;
  }
  .search-tabs {
    order: 6;
  }
  .search-panel {
    order: 7;
  }
  .hero-trust {
    order: 8;
    /* masaüstü kuralındaki align-self:start burada da geçerliydi; iki sütun
       içerik genişliğinde kalıp sağda boşluk bırakıyordu */
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 24px 0 2px;
    font-size: 11px;
  }
}
/* Madde imleri her genişlikte (önce yalnızca ≥901px'te tanımlıydı) */
.hero-trust span {
  position: relative;
  padding-left: 14px;
}
.hero-trust span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-night);
  opacity: 0.9;
}

/* Dokunma hedefleri (ölçülen değerler): hero noktaları 24×24, karusel noktaları
   24×24, "← Ana Sayfa" 26px, "Tüm turları görüntüle" 22px, dil seçici 60×24 idi.
   Görünen boyutlar aynı kalır, yalnızca dokunulabilir alan büyür. */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .hero-dots {
    gap: 0;
  }
  .hero-dot {
    width: 32px;
    height: 32px;
    padding: 12px;
  }
  .hero-dot.on {
    padding: 11px;
  }
  .car-dot {
    width: 32px;
    height: 32px;
    padding: 11px;
  }
  .car-dot.on {
    padding: 10px;
  }
  .back-link,
  .see-all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .back-link {
    margin-bottom: 6px;
  }
  .see-all {
    margin-top: 2px;
  }
  .lang-trigger {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
  }
}

/* ===================== MOBİL CİLA — ÖLÇÜLEN AKSAKLIKLAR ===================== */
@media (max-width: 900px) {
  /* Güven satırı hero'nun en altındaydı ve dip kenara yapışıyordu */
  .hero {
    padding-bottom: 22px;
  }
}
@media (max-width: 640px) {
  /* Pano başlığı iki satıra kırılıyordu ("YAKLAŞAN / SEFERLER" + "CANLI /
     KONTENJAN"). Harf aralığı ve punto azaltılınca ikisi de tek satıra sığar. */
  .db-head {
    gap: 10px;
  }
  /* nowrap KULLANMA: 320px'lik ekranda başlık sığmayıp sayfayı 347px'e
     genişletiyor, tarayıcı tüm sayfayı küçültüyordu. Punto ve harf aralığı
     küçültülür, sığmazsa satır kırılmasına izin verilir. */
  .db-title {
    font-size: 11.5px;
    letter-spacing: 0.1em;
  }
  .db-live {
    font-size: 10px;
    letter-spacing: 0.06em;
    gap: 5px;
  }
}
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  /* Açılır menü satırları 24px yüksekliğindeydi: parmakla iki satır arasına
     denk gelmek kolaydı. Görünüm aynı, satır yüksekliği dokunma ölçüsünde. */
  .nav.open a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .nav.open {
    gap: 2px;
    padding: 8px 20px 14px;
  }
  /* Yönetim panelindeki dönem sekmeleri (5/10/15 gün) 27px yüksekliğindeydi */
  .load-tabs .admin-tab {
    min-height: 36px;
    padding: 8px 14px;
  }
}
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  /* Onay metinlerinin içindeki bağlantılar (KVKK, sözleşmeler) 16px yüksekliğinde
     satır içi bağlantılardı. Satır içi öğede dikey dolgu satır yüksekliğini
     değiştirmez: yazı yerinde kalır, dokunma alanı büyür. */
  .kvkk-check a,
  .consent-info a,
  .co-consent a {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}
@media (max-width: 640px) {
  /* Küçük yazı okunabilirliği: telefonda 10–10.5px metinler zorlanıyordu.
     Rozetler (tour-tag) tasarım gereği küçük kalır; bilgi taşıyan satırlar
     ve form etiketleri bir tık büyütüldü. */
  .search-field label {
    font-size: 11px;
  }
  .tour-meta,
  .footer h4 {
    font-size: 11.5px;
  }
}
@media (max-width: 400px) {
  .topbar-inner {
    gap: 10px;
    padding: 7px 14px;
  }
  .topbar-inner > span {
    white-space: nowrap; /* numara "…000 00 / 00" diye ikiye bölünüyordu */
    font-size: 11.5px;
  }
  /* 320px'de telefon + para birimi + dil seçici aynı satıra sığmıyor (satır
     354px'e taşıyor). Numara alt bilgide ve WhatsApp düğmesinde zaten var;
     dil seçicisine ise başka hiçbir yerden ulaşılamaz, o kalır. */
  .topbar-inner > span:first-child {
    display: none;
  }
}
/* Renk seçicide okunabilirlik uyarısı: kaydetmeyi ENGELLEMEZ, ne olacağını söyler */
.color-warn {
  margin: 6px 0 0;
  padding: 6px 9px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 12px;
  line-height: 1.45;
}

/* ===================== ÜZERİNE GELİNCE TİTREME (Safari) =====================
   Düğmeler/kartlar üzerine gelince 1–4px yukarı kalkıyor. İmleç öğenin ALT
   kenarındayken öğe kalkınca imleç dışarıda kalıyor → :hover düşüyor → öğe
   iniyor → yeniden :hover… Safari bu döngüyü sürekli yeniden değerlendirdiği
   için öğe durmadan titriyordu (Chrome'da görünmüyordu). Kalkınca boşalan
   şerit, yalnızca hover sırasında var olan görünmez bir alanla doldurulur:
   imleç öğenin üstünde sayılmaya devam eder. Tıklama alanı hover dışında
   değişmez. Tablo satırları (tr.dash-clickable) hariç: tabloda konumlandırma
   ve sözde öğe satır düzenini bozabilir. */
.btn,
.tour-card,
.car-card,
.dash-clickable:not(tr) {
  position: relative;
}
.btn:hover::after,
.tour-card:hover::after,
.car-card:hover::after,
.dash-clickable:not(tr):hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 5px; /* en büyük kalkma payı 4px */
}

/* İletişim formu: sütun tanımsızdı (örtük "auto" sütun içeriğe göre açılır).
   Safari'de alanların doğal genişliği 320px ekranda 1px taşıyordu. */
.contact-form {
  grid-template-columns: minmax(0, 1fr);
}
.contact-form input:not([type="checkbox"]),
.contact-form textarea,
.contact-form select {
  width: 100%;
  min-width: 0;
}

/* ===================== SAFARI: FORM ALANLARI ESNEK SATIRDA KÜÇÜLMÜYORDU =====================
   Esnek (flex) satırdaki bir alanın varsayılan en küçük genişliği "auto"dur;
   Safari bunu alanın doğal genişliği (size=20 + dolgu ≈ 270px) sayar. 320px'lik
   iPhone SE'de kupon satırı 344px'e açılıyor, yanındaki "Uygula" düğmesi 64px'e
   ezilip harf harf alt alta kırılıyor, satır 180px yüksekliğe çıkıyordu.
   Genel önlem: metin alanları küçülebilir (min-width: 0); düğmeler ezilmez. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  min-width: 0;
}
.coupon-row .btn,
.set-add .btn,
.price-inputs .btn {
  flex: none;
  white-space: nowrap;
}
/* Izgara öğeleri de içeriklerinden küçük olabilmeli. "1fr" sütun aslında
   minmax(auto, 1fr) demektir: öğenin en küçük genişliği içeriğinin doğal
   genişliği olur. Safari form alanlarının doğal genişliğini büyük saydığı için
   ödeme sayfasının tek sütunu 280px'lik ekranda 427px'e açılıyor, kupon satırı
   ve kart formu ekrandan taşıyordu (iPhone SE, hatta iPhone 13). Öğelere
   min-width: 0 verilince sütun ekrana sığar, içerik kendi içinde kırılır. */
.checkout-layout > *,
.cart-layout > *,
.detail-layout > *,
.list-layout > *,
/* iPhone Safari tarih/saat kutusunu kendi doğal genişliğinden dar çizmiyor ve değeri
   ortalıyor: dar sütunda kutu kartın dışına taşıyordu. Kutu her zaman alanına sığar,
   değer diğer alanlar gibi sola yaslanır. */
input[type="date"],
input[type="time"] {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  /* Yalnızca min-width yetmiyordu: iOS Safari, kutu YEREL görünümdeyken (appearance:auto)
     tarih SEÇİLİNCE kutuyu değerin doğal genişliğine büyütüyor ("22 Eki 2026" + iç boşluk),
     dar sütunda kutu alanından taşıyordu. Yerel görünüm kapatılınca boyutu sitenin kendi
     kenarlık/dolgu kuralları belirler; takvim yine dokununca açılır. */
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.75em; /* görünüm kapalıyken boş kutu iOS'ta basıklaşmasın */
  line-height: normal; /* yanındaki açılır listelerle aynı boy */
  overflow: hidden;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-width: 0;
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
  padding: 0;
  min-width: 0;
  overflow: hidden;
}
.form-grid > *,
.price-inputs > *,
.dep-row > *,
.extra-row > *,
.cart-row > *,
.car-specs > *,
.search-panel > *,
.it-item > *,
.prog-row-top > *,
.rule-row > *,
.tier-row > *,
.dash-grid > *,
.dash-tiles > *,
.legal-row > *,
.section-head > *,
.review-grid > *,
.why-grid > *,
.car-grid > * {
  min-width: 0;
}

/* Katlanır başlıkta eylem düğmeleri (Manuel Rezervasyon, CSV…) katlama
   düğmesinin yanında ayrı durur; dar ekranda alt satıra geçer. */
.crm-head.foldable {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.crm-head.foldable > .fold-btn {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}
.crm-head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.crm-head-actions .crm-export {
  margin: 0;
}

/* Odaklanan form alanı yapışkan üst menünün (~67px) altında kalıyordu: klavyede
   "sonraki alan"a geçince ya da hata mesajıyla alana götürülünce tarayıcı alanı
   ekranın en üstüne kaydırıyor, menü alanı örtüyordu (iPhone'da alan üstü −14px).
   Yalnızca form alanlarına pay verilir; bölüm bağlantılarının konumu değişmez. */
input,
select,
textarea {
  scroll-margin-top: 90px;
}

/* ===================== BAYRAK GÖRSELLERİ (dil seçici) =====================
   Emoji yerine SVG: Windows'taki Chromium tarayıcıları bayrak emojisini harf
   olarak gösteriyordu. İnce iç çizgi, beyaz ağırlıklı bayrakların (Polonya)
   açık zeminde kaybolmaması için. */
.flag-img {
  display: inline-block;
  width: 20px;
  height: 14px;
  flex: none;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
}
.lang-opt-flag {
  display: inline-flex;
  align-items: center;
}

/* ===== Çerez bandı (KVKK/GDPR): Reddet ve Kabul eşit ağırlıkta ===== */
.cerez-bandi {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 95; /* üst menü (50) ve WhatsApp düğmesinin (90) üstünde, pencerelerin (100) altında */
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}
.cerez-bandi .cerez-metin {
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.5;
}
.cerez-bandi .cerez-metin p {
  margin: 4px 0 0;
  color: var(--muted);
}
.cerez-bandi .cerez-metin a {
  color: var(--primary);
  font-weight: 600;
}
.cerez-bandi .cerez-dugmeler {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cerez-bandi .cerez-dugmeler .btn {
  min-height: 44px;
  white-space: nowrap;
}
.cerez-satir {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.cerez-satir input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
}
.cerez-satir span {
  display: grid;
  gap: 2px;
}
.cerez-satir small {
  color: var(--muted);
  font-size: 13px;
}
@media (max-width: 560px) {
  .cerez-bandi {
    left: 8px;
    right: 8px;
    bottom: 8px;
    gap: 10px;
    padding: 12px 14px;
  }
  /* Küçük ekranda bant sayfanın yarısından fazlasını kapatmasın */
  .cerez-bandi .cerez-metin {
    font-size: 12.5px;
    line-height: 1.4;
  }
  .cerez-bandi .cerez-metin p {
    margin-top: 2px;
  }
  /* Telefonda: Reddet ve Kabul yan yana eşit, Tercihler altta tam genişlik */
  .cerez-bandi .cerez-dugmeler {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .cerez-bandi .cerez-dugmeler .btn {
    padding-left: 8px;
    padding-right: 8px;
  }
  .cerez-bandi .cerez-dugmeler .btn-soft {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* ===== Ödeme sürerken ekran kilidi (js/06-checkout.js → odemeKilidi) ===== */
.odeme-kilit {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: rgba(16, 30, 38, 0.55);
  padding: 24px;
}
.odeme-kilit-kutu {
  display: grid;
  gap: 14px;
  justify-items: center;
  max-width: 340px;
  padding: 26px 28px;
  border-radius: 16px;
  background: var(--bg);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 20px 60px rgba(16, 30, 38, 0.35);
}
.odeme-kilit-kutu p {
  margin: 0;
  font-weight: 600;
}
.odeme-kilit-spin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 4px solid var(--line);
  border-top-color: var(--primary);
  animation: odeme-don 0.8s linear infinite;
}
@keyframes odeme-don {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .odeme-kilit-spin {
    animation-duration: 2.4s;
  }
}

/* ===== Yayın öncesi kontrol listesi (yönetim paneli → Panel) ===== */
.chk-card {
  padding: 16px;
  margin-bottom: 16px;
}
.chk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.chk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.chk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-alt);
}
.chk-row.todo {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}
.chk-txt {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.chk-txt small {
  color: var(--muted);
  font-size: 13px;
}
.chk-row .btn {
  flex: none;
  padding: 8px 14px;
  font-size: 13px;
}
@media (max-width: 560px) {
  .chk-row {
    flex-wrap: wrap;
  }
  .chk-row .btn {
    width: 100%;
  }
}

/* ===== Biçimlendirilmiş metin (js/01-core.js → mdHtml) =====
   Tur/araç açıklaması, program maddesi ve yasal metinler. Yazı boyu ve rengi bulunduğu yerden
   gelir; başlıklar em ile ona göre ölçeklenir (tur sayfasında # = bölüm başlığıyla aynı boy). */
.md-metin > :first-child {
  margin-top: 0;
}
.md-metin > :last-child {
  margin-bottom: 0;
}
.md-metin p {
  margin: 0 0 10px;
}
.md-metin .md-h1,
.md-metin .md-h2,
.md-metin .md-h3 {
  color: var(--ink);
  line-height: 1.3;
}
.md-metin .md-h1 {
  font-size: 1.2em;
  margin: 22px 0 8px;
}
.md-metin .md-h2 {
  font-size: 1.07em;
  margin: 18px 0 6px;
}
.md-metin .md-h3 {
  font-size: 1em;
  margin: 14px 0 4px;
}
/* .detail-main ul (işaretsiz ızgara: ✅ listeleri) biçimli metindeki listelere uygulanmaz */
.md-metin ul,
.md-metin ol,
.detail-main .md-metin ul,
.detail-main .md-metin ol {
  display: block;
  list-style: disc;
  padding-left: 1.4em;
  margin: 0 0 10px;
  font-size: inherit;
  color: inherit;
}
.md-metin ol,
.detail-main .md-metin ol {
  list-style: decimal;
}
.md-metin ul ul,
.detail-main .md-metin ul ul {
  list-style: circle;
}
.md-metin li {
  margin: 3px 0;
}
.md-metin li > p {
  margin: 0;
}
.md-metin li > ul,
.md-metin li > ol,
.detail-main .md-metin li > ul,
.detail-main .md-metin li > ol {
  margin: 4px 0 0;
}
.md-metin blockquote {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--bg-alt);
}
.md-metin hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 16px 0;
}
.md-metin a {
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.md-metin strong {
  color: var(--ink);
}
.detail-main .md-metin {
  font-size: 15px;
  color: var(--muted);
}
/* Kartta açıklamanın yalnızca ilk paragrafı görünür; çok uzunsa kırpılır, kartlar şişmez */
.tour-body .desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}

/* ===== Panel: biçimlendirme yardımı + önizleme (js/07-admin.js → mdAraclarHTML) ===== */
.md-araclar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 10px;
  margin-top: 6px;
}
.md-ipucu {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.md-ipucu summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
}
.md-ipucu-tablo {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  align-items: center;
  margin: 6px 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-alt);
}
.md-ipucu-tablo code {
  font-size: 12px;
  white-space: pre;
  color: var(--ink);
}
.md-ipucu-tablo .md-metin {
  font-size: 13px;
  color: var(--ink);
}
.md-ipucu-tablo .md-metin ul,
.md-ipucu-tablo .md-metin ol,
.md-ipucu-tablo .md-metin blockquote,
.md-ipucu-tablo .md-metin hr {
  margin: 0;
}
.md-ipucu-not {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}
.btn.md-onizle {
  flex: none;
  padding: 6px 12px;
  font-size: 13px;
}
.md-onizleme {
  margin-top: 8px;
  padding: 12px 14px;
  max-height: 420px;
  overflow: auto;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--bg);
  font-size: 14px;
  color: var(--muted);
}
.md-onizleme.legal-text {
  font-size: 13px;
}
.legal-row .md-araclar,
.legal-row .md-onizleme {
  grid-column: 1 / -1;
}
/* Yasal metinler: yardım bölümün üstünde BİR kez (altı alanın her birinde tekrar etmez) */
.md-ipucu-ust {
  margin: 0 0 12px;
}

/* ===== Rezervasyon formu: zorunlu alan işareti ve eksik alan vurgusu ===== */
.zorunlu {
  color: #dc2626; /* beyaz zeminde 4.8:1 */
  font-weight: 700;
  margin-left: 3px;
}
.zorunlu-not {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}
.opsiyonel {
  font-weight: 400;
  color: var(--muted);
}
/* Gönder'e basıldıktan (ya da alandan çıkıldıktan) sonra boş/hatalı zorunlu alan kırmızı
   çerçeveli: müşteri tarayıcının tek balonuyla eksikleri tek tek aramaz, hepsini birden görür.
   :user-invalid tanımayan eski tarayıcı bu kuralı yok sayar (yıldızlar yine görünür). */
.pass-card input:user-invalid,
.pass-card select:user-invalid,
.pass-card textarea:user-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.pass-card input[type="checkbox"]:user-invalid {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}
/* Yuvarlak seçim düğmesine kare çerçeve yakışmıyor: seçilmemiş grubun yazıları kırmızı olur */
.pass-card input[type="radio"]:user-invalid {
  box-shadow: none;
}
.gender-pick:has(input:user-invalid) label {
  color: #dc2626;
}

/* ===== Panel: rezervasyon araması ===== */
.crm-arama {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
}
.crm-arama input {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 520px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
}
.crm-ara-sayac {
  font-size: 13px;
  color: var(--muted);
}
.crm-ara-bos {
  margin: 0;
  padding: 14px;
}
/* Panel kodu ilk açılışta yüklenirken (07-cekirdek.js → panelCiz) */
.panel-yukleniyor {
  padding: 48px 16px;
  text-align: center;
}

/* ===== Ayarlar → Katalog: kategori/bölge çevirisi dil seçicisi ===== */
.katalog-dil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
}
.katalog-dil-lbl {
  font-weight: 700;
  margin-right: 4px;
}
.katalog-ceviri input {
  width: 100%;
  min-width: 140px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}
.katalog-ceviri input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

/* ===== Yasal metin sayfaları (/kvkk, /gizlilik …) ===== */
.yasal-sayfa {
  max-width: 860px;
  padding-top: 28px;
  padding-bottom: 56px;
}
.yasal-sayfa .legal-text {
  font-size: 15px;
  line-height: 1.7;
}