/* ============================================================
   Raviyeni — Vitrin
   Seyahat sektörü: güven, sadelik, net fiyat. Mobil öncelikli.
   ============================================================ */

/* Kurumsal kimlik: LACİVERT + ALTIN.
   Renkler ve gölgeler eski vitrinden alındı; tek yerde token olarak
   duruyor ki bileşenler tek tek boyanmasın.

   Yazı tipi SİSTEMDEN: eski site Google Fonts'tan Inter + Playfair
   çekiyordu. Dışarıdan font çekmek her ziyarette üçüncü tarafa istek
   demek ve ilk boyamayı geciktiriyor; başlıklar için sistemdeki serif
   yığını kullanılıyor. */
:root {
  --bg:         #ffffff;
  --bg-alt:     #f5f7fa;
  --surface:    #ffffff;
  --border:     #e6eaf0;
  --text:       #0f172a;
  --text-muted: #64748b;

  /* MARKA RENKLERİ BURADA DEĞİL — `temalar.css` içinde, tema başına bir
     blok olarak. O dosyayı panel de yüklüyor: Vitrin → Görünüm ekranındaki
     tema kartları aynı renkleri gösteriyor. Renkler burada da dursaydı
     yeni tema eklendiğinde biri güncellenip diğeri unutulurdu.

     TÜRETİLEN tokenlar burada: tema yalnızca kendi renklerini veriyor,
     aşağıdakiler kendiliğinden geliyor. Her temada tekrar yazılsaydı yeni
     tema eklerken biri unutulur ve o temada bağlantılar başka renk olurdu.

     Bağlantı rengi MARKA ZEMİNİNDEN DEĞİL `--brand-ink`ten geliyor: koyu
     temalarda ikisi aynı değer, açık temalarda değil. Krem bir üst barın
     rengiyle yazılan bağlantı beyaz sayfada okunmuyordu. */
  --accent:       var(--brand-ink);   /* bağlantı ve vurgu */
  --accent-dark:  color-mix(in srgb, var(--brand-ink) 82%, #000);
  --accent-soft:  var(--brand-soft);
  --accent-text:  #ffffff;
  --warm:         var(--gold-deep);

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow:    0 2px 8px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, .14);
  --container: 1180px;

  --font:      "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", "Playfair Display", serif;
}

/* ---------- Koyu görünüm ----------
   Üç seçenek var (Vitrin → Görünüm): ziyaretçinin cihazına uy · her zaman
   açık · her zaman koyu. Cihaza uymak varsayılan.

   ⚠ Aynı gövde İKİ seçicide yazılı ve öyle kalmak zorunda: biri ortam
   sorgusunun içinde, diğeri dışında olduğu için tek kurala alınamıyor
   (CSS'te ortam sorgusu seçici listesine giremiyor). Birini değiştiren
   diğerini de değiştirmeli; sınama ikisinin de var olduğunu kontrol
   ediyor. Renk DEĞERLERİ temadan geliyor (`--gold-light`), o yüzden bu
   blok tema başına çoğalmıyor. */
:root[data-koyu="koyu"] {
  --bg:         #0b1118;
  --bg-alt:     #111a24;
  --surface:    #131d29;
  --border:     #22303f;
  --text:       #e8eef5;
  --text-muted: #93a4b8;

  /* Koyu zeminde koyu marka rengi okunmuyor; vurgu altına dönüyor */
  --accent:      color-mix(in srgb, var(--gold-light) 80%, #fff);
  --accent-dark: var(--gold-light);
  --accent-soft: #1c2836;
  --accent-text: #0b1118;

  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .55);
}

@media (prefers-color-scheme: dark) {
  :root[data-koyu="sistem"] {
    --bg:         #0b1118;
    --bg-alt:     #111a24;
    --surface:    #131d29;
    --border:     #22303f;
    --text:       #e8eef5;
    --text-muted: #93a4b8;

    /* Bir tık daha açık: buz/krem gibi AÇIK temalarda vurgu rengi koyu
       (lacivert/mavi) ve koyu zeminde olduğu gibi kullanılınca bağlantı
       okunmuyordu. */
    --accent:      color-mix(in srgb, var(--gold-light) 80%, #fff);
    --accent-dark: var(--gold-light);
    --accent-soft: #1c2836;
    --accent-text: #0b1118;

    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .55);
  }
}

/* Marka zeminleri — bölüm ve düğmelerde ortak */
.brand-navy-bg {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-light) 100%);
  color: var(--on-brand);
}
.brand-gold-bg {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color: var(--on-gold);
}
.font-display { font-family: var(--font-display); letter-spacing: -.02em; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; font-weight: 700; letter-spacing: -.015em; }
h1, h2 { font-family: var(--font-display); }
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.7vw, 2.1rem); }
h3 { font-size: 1.1rem; }
.h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .6rem; }
p { margin: 0 0 1rem; }

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

img { max-width: 100%; height: auto; }

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

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.15rem; }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.mb-0  { margin-bottom: 0; }
.mt-1  { margin-top: .75rem; }
.mt-2  { margin-top: 1.5rem; }
.text-center { text-align: center; }

/* ---------- Üst bar ---------- */

/* Üst bar LACİVERT ve sayfayla birlikte kaymıyor: her sayfada telefon
   ve turlar menüsü elin altında dursun. */
.site-header {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-light) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--on-brand) 8%, transparent);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow-md);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 66px;
  flex-wrap: wrap;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--on-brand); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color: var(--on-gold);
  font-size: .9rem; font-weight: 800;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 35%, transparent);
}
.brand__name { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.02em; }

/* Logo yüksekliği SABİT: yüklenen dosyanın boyutu üst barı şişirip
   menüyü aşağı itiyordu. Genişlik oranla ayarlanır. */
/* Logo yüksekliği: üst çubuk `min-height` ile büyüyebildiği için
   44px'ten yükseltmek kırpmaya yol açmıyor, çubuğu bir tık
   uzatıyor. Genişlik `auto` kalıyor — sabitlenirse dar ya da geniş
   logolar eziliyor. */
.brand__logo { height: 65px; width: auto; display: block; }

/* Alt bilgi daha geniş: orada yükseklik kısıtı yok ve logo markanın
   son göründüğü yer. */
.brand--footer .brand__logo { height: 80px; }

@media (max-width: 560px) {
  .brand__logo { height: 48px; }
  .brand--footer .brand__logo { height: 58px; }
}

.site-nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; flex-wrap: wrap; }
.site-nav__link {
  padding: .5rem .85rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--on-brand) 82%, transparent);
  font-size: .94rem;
  font-weight: 600;
  transition: background .18s, color .18s;
}
.site-nav__link:hover { background: color-mix(in srgb, var(--on-brand) 12%, transparent); color: var(--on-brand); text-decoration: none; }
.site-nav__link--active { color: var(--gold-light); }
/* Eski düz alt bağlantı sınıfı kaldırıldı; yerini `.nav-grup` aldı. */

/* ---------- Menüde açılır liste ----------
   JS YOK: açılma `:hover` ve `:focus-within` ile. Script'e bağlansaydı
   JS gelene kadar menü çalışmıyor olurdu ve alt sayfalara ulaşmanın
   başka yolu yok.

   Panel bağlantının ALTINDAN başlıyor ve araya boşluk konmuyor: imleç
   başlıktan panele inerken boşluktan geçerse liste kapanıyordu. */
.nav-grup { position: relative; display: inline-flex; }
.nav-grup__ok { margin-left: .3rem; font-size: .7em; opacity: .8; }

.nav-grup__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  display: none;
  min-width: 12rem;
  padding: .4rem;
  border-radius: var(--radius-sm);
  background: var(--navy-deep);
  border: 1px solid color-mix(in srgb, var(--on-brand) 14%, transparent);
  box-shadow: var(--shadow-lg);
}
.nav-grup:hover > .nav-grup__panel,
.nav-grup:focus-within > .nav-grup__panel { display: block; }

.nav-grup__link {
  display: block;
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--on-brand) 82%, transparent);
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav-grup__link:hover {
  background: color-mix(in srgb, var(--on-brand) 12%, transparent);
  color: var(--on-brand);
  text-decoration: none;
}

/* Telefon ALTIN düğme: aramanın kendisi en değerli dönüşüm, metin
   bağlantısı olarak gözden kaçıyordu. */
.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color: var(--on-gold);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 30%, transparent);
  transition: transform .18s, box-shadow .18s;
}
.site-header__phone:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--gold) 40%, transparent); text-decoration: none; }

.nav-toggle, .nav-toggle__label { display: none; }

@media (max-width: 980px) {
  .nav-toggle__label {
    display: inline-block;
    margin-left: auto;
    padding: .35rem .7rem;
    border: 1px solid color-mix(in srgb, var(--on-brand) 25%, transparent);
    border-radius: var(--radius-sm);
    color: var(--on-brand);
    cursor: pointer;
    font-size: 1.15rem;
  }
  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: .75rem;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  /* Telefonda açılır liste YOK: menü zaten açılıp kapanan bir
     panel ve içinde ikinci bir katman, dokunmatikte üzerine gelmenin
     karşılığı olmadığı için hiç açılmazdı. Alt başlıklar girintili
     olarak doğrudan listede duruyor. */
  .nav-grup { display: block; width: 100%; }
  .nav-grup__ok { display: none; }
  .nav-grup__panel {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 .25rem;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav-grup__link { padding-left: 1.6rem; font-size: .89rem; opacity: .85; }

  /* Dil kutusu telefonda MENÜNÜN İÇİNDE; kuralları kendi bölümünde
     (bkz. `.lang-switch`). Buraya yazılamıyor: temel tanım dosyada
     daha sonra geliyor ve aynı özgüllükte olduğu için buradaki
     `display` değerini eziyordu. */

  /* TELEFON KENDİ SATIRINI KAPLIYOR ve büyüyor: satırı paylaştığı öge
     menüye taşındı. Dokunma hedefi 48px — parmakla ıskalanmayan ölçü. */
  .site-header__phone {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    justify-content: center;
    min-height: 48px;
    font-size: 1.05rem;
    padding: .75rem 1rem;
  }
}

/* ---------- Hero ---------- */

/* Hero: koyu lacivert zemin. Görsel varsa arkada, üstünde okunurluk
   için koyu perde — açık zeminde beyaz başlık kayboluyordu. */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-light) 100%);
  background-size: cover;
  background-position: center;
  color: var(--on-brand);
  padding: clamp(3rem, 8vw, 6rem) 0;
  overflow: hidden;
}
.hero > .container { position: relative; z-index: 1; }

/* Slayt zeminleri üst üste duruyor ve sönümlenerek değişiyor. Kaydırma
   yerine sönümleme: yatay kayan blok, altındaki arama kutusunu da
   oynatıyor ve yazarken kutu kayıyordu. */
.hero__back {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .8s ease-in-out;
}
.hero__back--on { opacity: 1; }

/* Karartma yalnızca GÖRSELLİ slaytta: bölümün tamamına konan perde,
   görselsiz slaytta lacivert zemini çamura çeviriyordu. Görselin
   üstünde beyaz başlık perdesiz okunmuyor. */
/* Perde TEMANIN RENGİNDE: sabit lacivert yazılıydı ve bordo tema
   seçildiğinde üst bar bordo, hemen altındaki slayt perdesi lacivert
   kalıyordu — iki ayrı sitenin parçaları gibi. */
.hero__back--image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--navy-deep) 88%, transparent) 0%,
    color-mix(in srgb, var(--navy) 70%, transparent) 55%,
    color-mix(in srgb, var(--navy-deep) 50%, transparent) 100%);
}

/* Metinler ÜST ÜSTE değil, aynı ızgara gözünde: yükseklik en uzun
   slayta göre sabitleniyor, geçişte sayfa zıplamıyor. */
.hero__texts { display: grid; }
.hero__text {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s ease, visibility 0s .55s;
}
.hero__text--on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hero__cta { margin-bottom: .5rem; }

/* Slayt düğmeleri JS ile ekleniyor: çalışmadığında tıklanınca hiçbir
   şey olmayan noktalar kalıyordu. */
.hero__dots { position: relative; z-index: 2; display: flex; gap: .4rem; margin-top: 1.4rem; }
.hero__dot {
  position: relative;
  width: 10px; height: 10px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--on-brand) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-brand) 25%, transparent);
  cursor: pointer;
  transition: width .25s, background .25s;
}
.hero__dot--on { width: 28px; background: var(--gold); border-color: var(--gold-light); }

/* Nokta 10px: görünüşü doğru ama parmak için hedef değil — telefonda
   yanına basılıyor ve slayt değişmiyordu. Görünmez bir hedef alanı
   büyütmesi: nokta aynı kalıyor, tıklanan yer 34px oluyor. */
.hero__dot::after { content: ""; position: absolute; inset: -12px; }

.hero__title { max-width: 20ch; color: var(--on-brand); }
.hero__title em { font-style: normal; color: var(--gold-light); }
.hero__lead { max-width: 62ch; font-size: 1.08rem; color: color-mix(in srgb, var(--on-brand) 85%, transparent); }

.hero__search {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr auto;
  gap: .6rem;
  background: rgba(255, 255, 255, .97);
  padding: .8rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-top: 1.75rem;
}

.hero__trust {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  color: color-mix(in srgb, var(--on-brand) 80%, transparent);
  font-size: .92rem;
  font-weight: 500;
}

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

/* ---------- Hero: iki sütun ----------
   Tek sütunken slaytın sağ yarısı bomboş bir fotoğraf alanıydı ve
   ziyaretçi "hangi turlar var" sorusunun cevabını görmek için aşağı
   kaydırmak zorundaydı.

   `auto` sağ sütun: şerit boşsa (hiç tur işaretlenmemişse) partial hiç
   çizilmiyor ve sol sütun tüm genişliği alıyor — boş bir sütun payı
   kalmıyor. */
/* Sütunlar ÜSTTEN hizalı: ortalanınca sol sütun, sağdaki tur şeridinin
   boyuna göre aşağı kayıyor ve başlık üst bardan kopuyordu. */
.hero__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.hero__sol { min-width: 0; }

/* ---------- Kayan tur şeridi ---------- */
.hero-serit { width: 340px; flex: none; }

.hero-serit__baslik { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.hero-serit__etiket {
  display: inline-flex;
  align-items: center;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-serit__cizgi { flex: 1; height: 1px; background: color-mix(in srgb, var(--on-brand) 18%, transparent); }

/* Pencere sabit yükseklikte, akış içeride kayıyor. Üst ve alt uçta
   yumuşak maske: kartlar kenarda kesilmek yerine soluyor, aksi hâlde
   yarım kart "bozuk çizilmiş" görünüyordu. */
.hero-serit__pencere {
  position: relative;
  height: 420px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.hero-serit__akis { display: flex; flex-direction: column; animation: seritKay 32s linear infinite; }
.hero-serit__grup { display: flex; flex-direction: column; gap: .7rem; padding-bottom: .7rem; }

/* Liste iki kez basıldığı için tam YARISI kadar kaydırıp başa dönüyor;
   böylece kopya tam özgünün üstüne oturuyor ve döngü görünmüyor. */
@keyframes seritKay {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Fare üzerindeyken ve klavye odağındayken DURUYOR: kayan bir bağlantıya
   tıklamaya çalışmak, hedefin parmağın altından kaçması demekti. */
.hero-serit__pencere:hover .hero-serit__akis,
.hero-serit__pencere:focus-within .hero-serit__akis { animation-play-state: paused; }

/* Üç turdan azında kaydırma yok: iki kart zaten ekrana sığıyor. */
.hero-serit--sabit .hero-serit__pencere { height: auto; -webkit-mask-image: none; mask-image: none; }
.hero-serit--sabit .hero-serit__akis { animation: none; }

.serit-kart {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--on-brand) 12%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--on-brand) 7%, transparent);
  text-decoration: none;
  transition: border-color .2s, transform .2s, background .2s;
}
.serit-kart:hover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--on-brand) 12%, transparent);
  transform: translateX(-3px);
  text-decoration: none;
}

/* Kapak görseli SOLUK zeminde: tam parlaklıkta basıldığında üstündeki
   beyaz yazı okunmuyordu. */
.serit-kart__zemin {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .22;
}
.serit-kart__cubuk { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.serit-kart__ic { position: relative; display: block; padding: .85rem .95rem .85rem 1.15rem; }

.serit-kart__ust { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.serit-kart__tip {
  padding: .18rem .55rem;
  border-radius: 999px;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.serit-kart__rozet {
  margin-left: auto;
  padding: .18rem .5rem;
  border: 1px solid color-mix(in srgb, var(--on-brand) 28%, transparent);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--on-brand) 85%, transparent);
}
/* Son koltuk uyarısı ALTIN: elle yazılan rozetten ayrılsın, ikisi aynı
   görünseydi "Son 2 yer" bir kampanya sloganı sanılırdı. */
.serit-kart__rozet--son { border-color: var(--gold); color: var(--gold-light); }

/* İki satırda kesiliyor: uzun tur adı kartı büyütüp şeridin ritmini
   bozuyordu. */
.serit-kart__ad {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .35rem;
  color: var(--on-brand);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.3;
}

.serit-kart__bilgi {
  display: flex;
  gap: .9rem;
  font-size: .78rem;
  color: color-mix(in srgb, var(--on-brand) 72%, transparent);
}

.serit-kart__alt {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: .6rem;
  padding-top: .55rem;
  border-top: 1px solid color-mix(in srgb, var(--on-brand) 10%, transparent);
}
.serit-kart__fiyat { display: block; color: var(--on-brand); font-weight: 800; font-size: 1.08rem; }
.serit-kart__fiyat-etiket {
  display: block;
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--on-brand) 60%, transparent);
}
.serit-kart__git {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 800;
  transition: transform .2s;
}
.serit-kart:hover .serit-kart__git { transform: translateX(3px); }

/* Dar ekranda şerit alta iniyor ve YATAY kaydırmaya dönüyor: 340px'lik
   bir sütun telefonun yarısını yiyordu. Otomatik kayma da kapalı —
   dokunmatikte parmakla kaydırılan bir şeridin kendi kendine hareket
   etmesi, tıklanan kartın kaçması demek. */
@media (max-width: 980px) {
  .hero__izgara { grid-template-columns: minmax(0, 1fr); }
  .hero-serit { width: auto; margin-top: 2rem; }
  .hero-serit__pencere {
    height: auto;
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero-serit__akis { flex-direction: row; animation: none; }
  .hero-serit__grup { flex-direction: row; padding-bottom: 0; }
  .serit-kart { width: 260px; flex: none; }
}

/* Hareket azaltma isteyen kullanıcıda şerit DURUYOR, gizlenmiyor:
   içerik kaybolmadan hareket kalkıyor. */
@media (prefers-reduced-motion: reduce) {
  .hero-serit__akis { animation: none; }
  .hero-serit__pencere { height: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Kayma durduğunda KOPYA gizleniyor. Kopya yalnızca kesintisiz döngü için
   var; animasyon yokken her tur ekranda iki kez görünüyordu. Ölçüt
   `aria-hidden`: kopyayı işaretleyen özniteliğin kendisi, ayrı bir sınıf
   koyup ikisinin ayrışmasını beklemek yerine. */
@media (max-width: 980px) {
  .hero-serit__grup[aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-serit__grup[aria-hidden="true"] { display: none; }
}

.page-hero {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-light) 100%);
  color: var(--on-brand);
  padding: 2.75rem 0 2.25rem;
}
.page-hero__title { margin-bottom: .35rem; color: var(--on-brand); }
.page-hero .muted, .page-hero .crumbs, .page-hero p { color: color-mix(in srgb, var(--on-brand) 78%, transparent); }
.page-hero a { color: var(--gold-light); }

/* ---------- Bölümler ---------- */

.section { padding: clamp(2.5rem, 5.5vw, 4rem) 0; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-light) 100%); color: var(--on-brand); }
.section--navy .section__title, .section--navy h2, .section--navy h3 { color: var(--on-brand); }
.section--navy .muted { color: color-mix(in srgb, var(--on-brand) 72%, transparent); }
.section__title { margin-bottom: 1.25rem; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.section__head .section__title { margin-bottom: 0; }
.link-more { font-weight: 700; font-size: .93rem; white-space: nowrap; }

/* Bölüm etiketi: başlığın üstünde küçük altın çip */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem;
  margin-bottom: .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--gold-deep);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.section--navy .eyebrow { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-light); }

/* ---------- Form öğeleri ---------- */

/* Seçim kutusu da AYNI kuralda: `.select` ayrı bir biçim almamıştı ve
   altbilgideki bülten formunda tarayıcının kendi kutusu çiziliyordu —
   yanındaki üç kutudan farklı yükseklikte, farklı yazı boyutunda. */
.input,
.select {
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
}
.input:focus,
.select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input--error { border-color: #b32d2d; }

/* Telefonda kutu yazısı 16px: iOS Safari, 16px'in ALTINDA yazısı olan bir
   alana odaklanıldığında sayfayı kendiliğinden yakınlaştırıyor. Ziyaretçi
   arama kutusuna dokunduğu anda site büyüyor, yazdıktan sonra da o
   yakınlıkta kalıyor — sayfanın geri kalanı ekrana sığmaz oluyor.
   Masaüstünde ölçü değişmiyor; sorun yalnızca dokunmatikte. */
@media (max-width: 780px) {
  .input,
  .select,
  textarea.input { font-size: 16px; }
}

.field { margin-bottom: 1rem; }
.field__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.field__error { display: block; color: #b32d2d; font-size: .85rem; margin-top: .25rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .68rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--bg-alt); text-decoration: none; }

/* Birincil eylem ALTIN: koyu lacivert zeminde de açık zeminde de tek
   bakışta bulunuyor. */
.btn--primary {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  border-color: var(--gold-deep);
  color: var(--on-gold);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 28%, transparent);
}
.btn--primary:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--gold) 38%, transparent); }
.btn--navy { background: var(--navy); border-color: var(--navy); color: var(--on-brand); }
.btn--navy:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn--ghost-light { background: transparent; border-color: color-mix(in srgb, var(--on-brand) 40%, transparent); color: var(--on-brand); }
.btn--ghost-light:hover { background: color-mix(in srgb, var(--on-brand) 12%, transparent); }
.btn--block { width: 100%; }

/*
 * Bot tuzağı — gerçek kullanıcı görmüyor ama alan sayfada duruyor.
 *
 * `display: none` KULLANILMIYOR: bazı botlar gizlenmiş alanları atlıyor
 * ve tuzak işe yaramıyor.
 *
 * ARAPÇA HATASI (mobil taramada çıktı): alan eskiden `left: -9999px` ile
 * ekranın soluna atılıyordu. Soldan sağa yazılan dillerde bu görünmez
 * bir yer, ama sağdan sola akışta sayfanın başlangıcı SAĞ kenardır ve
 * eksi konum kaydırılabilir alana dönüşüyor: Arapça sayfalarda belge
 * genişliği 375px yerine 10.374px çıkıyor, ziyaretçi sayfayı yanlara
 * savurabiliyordu.
 *
 * Yerine kırpma: alan 1×1px, içeriği kırpılmış. Yönden bağımsız ve
 * DOM'da okunur olduğu için tuzak çalışmaya devam ediyor.
 *
 * Tek kural, iki ad: `.honeypot` iletişim ve bülten formlarında,
 * `.tuzak` tur talep ve yorum formlarında kullanılıyor.
 */
.honeypot,
.tuzak {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* `.notice` KALKTI: vitrinin kendi sonuç şeridiydi, artık panelle ortak
   `.alert` + bildirim kutusu kullanılıyor (bkz. bildirim.css). İki ayrı
   şerit biçimi, aynı mesajın iki yerde farklı görünmesi demekti. */

/* ---------- Tur kartı ---------- */

.tour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.25rem;
}

.tour-card {
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1), border-color .25s;
}
.tour-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.tour-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.tour-card__link:hover { text-decoration: none; }

.tour-card__media {
  height: 178px;
  background-size: cover;
  background-position: center;
  background-color: var(--navy);
  position: relative;
}
.tour-card:hover .tour-card__media { filter: brightness(1.03); }
.tour-card__type {
  position: absolute;
  left: .75rem; top: .75rem;
  padding: .18rem .6rem;
  border-radius: 99px;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
}

/* Elle yazılan rozet SAĞ ÜSTTE, altın: sol üstteki tip etiketiyle
   çakışmaz ve fotoğrafın üstünde tek bakışta okunur. */
.tour-card__badge {
  position: absolute;
  right: .75rem; top: .75rem;
  max-width: 60%;
  padding: .18rem .6rem;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color: var(--on-gold);
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--gold) 35%, transparent);
}

.tour-card__body { padding: 1rem 1.1rem; flex: 1; }
.tour-card__title { font-size: 1.05rem; margin-bottom: .4rem; }
.tour-card__summary {
  color: var(--text-muted);
  font-size: .9rem;
  margin: 0 0 .8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tour-card__meta { display: flex; gap: 1.5rem; margin: 0; }
.tour-card__meta dt { font-size: .74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.tour-card__meta dd { margin: 0; font-size: .92rem; font-weight: 600; }

.tour-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.tour-card__price { font-size: 1.1rem; font-weight: 700; }
.tour-card__price-label { display: block; font-size: .72rem; font-weight: 500; color: var(--text-muted); }

.tag {
  padding: .2rem .6rem;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 650;
  background: var(--accent-soft);
  color: var(--accent-dark);
  white-space: nowrap;
}
/* Uyarı rozeti temanın vurgusundan türüyor: sabit krem zemin, mavi
   vurgulu bir temada sayfanın tek turuncu lekesi kalıyordu. */
.tag--last { background: color-mix(in srgb, var(--gold) 20%, #fff); color: var(--warm); }
.tag--full { background: #f0f2f3; color: var(--text-muted); }
.tag--type { background: var(--accent); color: var(--accent-text); display: inline-block; margin-bottom: .5rem; }

/* ---------- Tur tipi kartları ---------- */

.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .85rem; }

/* Kartlar TİPİN KENDİ RENGİNİ taşıyor. Önce yalnızca sol kenarda 4px'lik
   bir çizgi vardı: dört kart yan yana dizildiğinde hepsi aynı beyaz kutu
   gibi görünüyor, umre ile kültür turunu ayırt etmek için yazıyı okumak
   gerekiyordu. Renk tek başına bilgi taşımıyor — ad ve tur sayısı yazılı
   olarak da duruyor. */
.type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1.15rem 2.2rem 1.15rem 1.15rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--type-color, var(--accent));
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--type-color, #0a2540) 9%, #fff) 0%, var(--surface) 70%);
  color: inherit;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.type-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--type-color, var(--accent));
  text-decoration: none;
}

/* Ok işareti kartın tıklanabilir olduğunu söylüyor: kutular bağlantı
   olduklarını hiçbir biçimde belli etmiyordu. */
.type-card::after {
  content: "→";
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--type-color, var(--accent));
  font-weight: 700;
  opacity: .45;
  transition: opacity .18s ease, right .18s ease;
}
.type-card:hover::after { opacity: 1; right: .7rem; }

.type-card__name { font-weight: 700; font-size: 1.02rem; }
.type-card__count { font-size: .85rem; color: var(--text-muted); }

/* Kapak görselli tip kartı.
   Görsel `background-image` olarak inline geliyor (kaynak veriden), ölçü
   ve okunabilirlik burada. Yazı doğrudan fotoğrafın üstüne düşseydi açık
   renkli bir kapakta okunmazdı: karartma katmanı bunun için. */
.type-card--kapak {
  background-size: cover;
  background-position: center;
  min-height: 8.5rem;
  justify-content: flex-end;
  border-left-color: var(--type-color, var(--accent));
}
.type-card--kapak::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--navy) 82%, transparent) 0%,
    color-mix(in srgb, var(--navy) 18%, transparent) 60%,
    color-mix(in srgb, var(--navy) 5%, transparent) 100%);
}
.type-card--kapak > * { position: relative; }
.type-card--kapak .type-card__name,
.type-card--kapak .type-card__count { color: var(--on-brand); }
.type-card--kapak::after { color: var(--on-brand); z-index: 1; }

/* ---------- Tur detay ---------- */

/* Tur başlığı da LACİVERT: açık zeminli ince şerit, her sayfanın koyu
   başlığının yanında kopuk duruyordu. Kapak varsa zemin olarak
   kullanılıyor — sayfanın ilk ekranı turun kendi fotoğrafıyla doluyor
   ve görsel aşağıda ikinci kez basılmıyor. */
.tour-hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-light) 100%);
  background-size: cover;
  background-position: center;
  color: var(--on-brand);
  padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(1.75rem, 4vw, 3rem);
}
.tour-hero--image::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--navy-deep) 92%, transparent) 0%,
    color-mix(in srgb, var(--navy) 78%, transparent) 55%,
    color-mix(in srgb, var(--navy-deep) 58%, transparent) 100%);
}
.tour-hero > .container { position: relative; z-index: 1; }
.tour-hero__title { max-width: 24ch; color: var(--on-brand); }
.tour-hero__lead { max-width: 65ch; color: color-mix(in srgb, var(--on-brand) 85%, transparent); }
.tour-hero .crumbs, .tour-hero .crumbs span { color: color-mix(in srgb, var(--on-brand) 70%, transparent); }
.tour-hero .crumbs a { color: var(--gold-light); }
/* Tip rozeti turun KENDİ rengiyle: varsayılan lacivert rozet, lacivert
   zeminin üstünde tamamen kayboluyordu. */
.tour-hero .tag--type { background: var(--type-color, var(--gold)); color: #fff; }
.tour-hero .fact-row { border-top-color: color-mix(in srgb, var(--on-brand) 18%, transparent); }
.tour-hero .fact-row dt { color: color-mix(in srgb, var(--on-brand) 65%, transparent); }
.tour-hero .fact-row dd { color: var(--on-brand); }

.crumbs { font-size: .85rem; color: var(--text-muted); margin-bottom: .9rem; }

.fact-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.fact-row dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.fact-row dd { margin: 0; font-weight: 650; }

.tour-layout { display: grid; grid-template-columns: 1fr 330px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .tour-layout { grid-template-columns: 1fr; } }

.prose { max-width: 68ch; }
.prose--narrow { max-width: 62ch; margin: 0 auto; }

/* Dahil / hariç listeleri yan yana: ziyaretçi ikisini karşılaştırarak
   okuyor, alt alta konunca "hariç" olanlar gözden kaçıyordu. */
.include-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
@media (max-width: 700px) { .include-grid { grid-template-columns: 1fr; } }

/*
 * HER LİSTENİN KENDİ BAŞLIĞI VAR (kullanıcı isteği, 9 Eylül 2026).
 *
 * Tek başlık altında iki sütun duruyordu ve sağdakinin fiyata dahil
 * OLMAYANLAR olduğu yalnızca ✕ işaretinden anlaşılıyordu; ziyaretçi
 * "Kişisel harcamalar"ı fiyata dahil sanıyordu.
 *
 * Başlık sayfanın öteki `h2`lerinden KÜÇÜK: bunlar bölümün kendisi
 * değil, bölümün iki yarısı. Aynı boyda olsalardı sayfa iki ayrı
 * konuya bölünmüş gibi okunurdu.
 */
.include-blok__baslik {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
  line-height: 1.3;
  color: #1d7a4c;
}

/* Dahil olmayanların başlığı kırmızı — ama ayrım RENGE BIRAKILMIYOR,
   metnin kendisi söylüyor. Renk yalnızca pekiştiriyor. */
.include-blok__baslik--out { color: #b32d2d; }

.include-list { list-style: none; padding: 0; margin: 0; }
.include-list__item {
  position: relative;
  padding: .35rem 0 .35rem 1.75rem;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
}
.include-list__item:last-child { border-bottom: 0; }
/* İşaret RENKTEN BAĞIMSIZ: yalnızca yeşil/kırmızıyla ayırmak, renk körü
   ziyaretçi için iki listeyi aynı gösteriyordu. */
.include-list__item::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 800;
  color: #1d7a4c;
}
.include-list--out .include-list__item::before { content: "✕"; color: #b32d2d; }

.itinerary { list-style: none; padding: 0; margin: 0; }
.itinerary__item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--border);
}
.itinerary__item:last-child { border-bottom: 0; }
.itinerary__day { font-weight: 700; color: var(--accent); font-size: .9rem; }
@media (max-width: 560px) { .itinerary__item { grid-template-columns: 1fr; gap: .25rem; } }

/* SSS: tarayıcının kendi <details> bileşeni — açılıp kapanması için
   script yüklemek, JS gelmeden sayfanın yarısının görünmemesi demekti. */
.faq { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq__item { border-bottom: 1px solid var(--border); background: var(--surface); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  padding: .9rem 1.1rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq__q::-webkit-details-marker { display: none; }
/* İşaret metinden bağımsız: yalnızca kalın yazı, satırın tıklanabilir
   olduğunu göstermiyordu. */
.faq__q::after { content: "+"; color: var(--gold-deep); font-weight: 800; }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__item[open] .faq__q { background: var(--bg-alt); }
.faq__a { padding: 0 1.1rem 1rem; color: var(--text-muted); }

.hotel-list { display: grid; gap: .75rem; }
.hotel { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.stars { color: var(--warm); margin-left: .35rem; }

.booking-box {
  position: sticky;
  top: 84px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
.booking-box__price { margin-bottom: .75rem; }
.booking-box__price strong { display: block; font-size: 1.7rem; letter-spacing: -.02em; }
.booking-box__actions { display: grid; gap: .5rem; }

/*
 * MOBİLDE ALT ÇUBUK — bir satır, sabit yükseklik.
 *
 * BU BİR DÜZELTMEDİR. Kutu mobilde `position: fixed` ile ekranın altına
 * yapışıyordu ama iki sıra düğme + fiyat yaklaşık 170px tutuyor,
 * karşılığında verilen boşluk ise `body { padding-bottom: 8rem }` yani
 * 128px'ti. Aradaki fark kadarı sayfanın SONUNU ÖRTÜYORDU: yer ayırtma
 * formunun gönder düğmesi ve yorumlar bölümü çubuğun altında kalıyor,
 * ziyaretçi "içerik çıkmıyor" diyordu.
 *
 * Artık çubuk tek satır: fiyat solda, birincil eylem sağda. Kalan
 * eylemler zaten sayfa içinde (hero'daki "Yer ayırtın" ve form).
 *
 * Boşluk `body`den DE ALINDI: kural bütün sayfalarda geçerliydi ve
 * çubuğu olmayan sayfaların altında 128px ölü alan bırakıyordu. Yerine
 * turun kendi sayfasına açık bir ayraç kondu (`.booking-bosluk`).
 */
@media (max-width: 900px) {
  .booking-box {
    position: fixed;
    /*
     * `top: auto` ŞART — bu satır olmadan çubuk EKRANI KAPLIYOR.
     *
     * Kutunun masaüstü kuralı `position: sticky; top: 84px` (üst barın
     * altına yapışsın diye). Mobilde yalnızca `position` değiştirilip
     * `top` bırakılınca öğe hem üstten hem alttan sabitleniyor ve
     * yükseklik ikisinin ARASINA GERİLİYOR: 844px'lik telefonda çubuk
     * 760px oluyor, altındaki program, oteller ve yorumlar tümüyle
     * örtülüyordu. Ölçüldü (24 Ağustos 2026): top=84px, height=760px.
     */
    top: auto;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-radius: 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    padding: .6rem 1rem;
    z-index: 30;
    /* Telefonların alt çubuğu (iPhone ana ekran çizgisi) düğmenin
       üstüne biniyordu */
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  }
  .booking-box p { display: none; }
  .booking-box__price { margin-bottom: 0; }
  .booking-box__price strong { font-size: 1.25rem; }

  .booking-box__actions {
    display: flex;
    gap: .4rem;
    flex: 0 0 auto;
  }
  /* Yalnızca İLK eylem (telefon) çubukta: üçü birden tek satıra
     sığmıyor ve ikinci sıraya taşınca çubuk yine içeriği örtüyordu. */
  .booking-box__actions a:not(:first-child) { display: none; }
  .booking-box__actions a { margin: 0; }

  /* Çubuğun kapladığı yer kadar ayraç — turun KENDİ sayfasında.
     Ölçülen çubuk yüksekliği 78px; ayraç 72px'ti ve son 6px içeriğin
     üstünde kalıyordu. Pay biraz geniş tutuldu: eksik kalması içeriği
     örtüyor, fazlası yalnızca birkaç piksel boşluk demek. */
  .booking-bosluk { height: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Filtre, sayfalama, boş durum ---------- */

.filter-bar {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 1fr auto;
  gap: .6rem .75rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.filter-bar__field { min-width: 0; }
/* Etiket görünür duruyor: yer tutucu yazı, kutuya yazılınca kayboluyor
   ve kullanıcı hangi alanı doldurduğunu unutuyordu. */
.filter-bar__label {
  display: block;
  margin-bottom: .3rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.filter-bar__submit { height: 42px; }
@media (max-width: 880px) {
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-bar__submit { grid-column: span 2; }
}

.pager { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

.empty-state { text-align: center; padding: 3rem 1rem; }

/* ---------- Yorumlar ---------- */

.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }

/* Kart BEYAZ kalıyor (lacivert bölüm üstünde cam efekti denendiğinde
   yorum metni okunmuyordu); ayırt ediciliği tırnak işareti ve altın
   şerit veriyor. Üç düz kutu, sayfanın en güven veren bölümünü en sönük
   bölümü yapıyordu. */
.quote {
  position: relative;
  margin: 0;
  padding: 1.6rem 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.quote::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
}
.quote::after {
  content: "”";
  position: absolute;
  right: .8rem;
  top: .1rem;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--gold);
  opacity: .18;
  pointer-events: none;
}
.quote__stars { color: var(--warm); margin-bottom: .5rem; letter-spacing: .08em; }
.quote p { position: relative; z-index: 1; }
.quote cite { font-style: normal; font-weight: 650; font-size: .9rem; color: var(--text-muted); }

/* Hangi tura yazıldığı — adın ALTINDA ve daha sönük: yorumun kendisiyle
   yarışmasın ama "ne için yazılmış" sorusu cevapsız kalmasın. */
.quote__tur {
  display: block;
  margin-top: .2rem;
  font-size: .8rem;
  color: var(--brand-ink);
  opacity: .85;
}
a.quote__tur:hover { opacity: 1; text-decoration: underline; }

/* ---------- Çağrı bandı ---------- */

.cta { background: var(--accent-soft); padding: 2.5rem 0; }
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta__title { margin-bottom: .25rem; }
.cta__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---------- İletişim ---------- */

.contact-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
@media (max-width: 880px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-form, .contact-side {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.contact-line { display: block; padding: .6rem 0; border-bottom: 1px solid var(--border); color: inherit; }
.contact-line:hover { text-decoration: none; color: var(--accent); }

/* Belge rozetleri açık zeminde: alt bilgideki lacivert sürümün eşi */
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.badge-pill {
  padding: .3rem .7rem;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold-deep);
  font-size: .74rem;
  font-weight: 700;
}

/* ---------- Alt bilgi ---------- */

.site-footer {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-light) 100%);
  color: color-mix(in srgb, var(--on-brand) 82%, transparent);
  padding: 3rem 0 1.25rem;
  margin-top: 3rem;
}
.site-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2rem; }
@media (max-width: 780px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }

.footer__title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gold-light);
  font-weight: 800;
  margin-bottom: .7rem;
}
.footer__link { display: block; padding: .25rem 0; color: color-mix(in srgb, var(--on-brand) 78%, transparent); font-size: .92rem; }
.footer__link:hover { color: var(--on-brand); }

/* Altbilgi bağlantıları telefonda 30px yükseklikteydi ve alt alta
   bitişik duruyor: kurumsal sayfalar arasında yanlış olana basmak
   kolaydı. Masaüstünde liste seyrek görünmesin diye ölçü yalnızca dar
   ekranda büyüyor. */
@media (max-width: 780px) {
  .footer__link { padding: .5rem 0; }
}
.site-footer .muted { color: color-mix(in srgb, var(--on-brand) 60%, transparent); }
.brand--footer { margin-bottom: .7rem; }

/* Güven rozetleri: TÜRSAB/IATA numarası satır arasında kayboluyordu */
.footer__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.footer__badge {
  padding: .3rem .7rem;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  color: var(--gold-light);
  font-size: .74rem;
  font-weight: 700;
}

.social { display: flex; gap: .5rem; margin-top: .9rem; }
/*
 * Rozetler MARKA RENGİNDE ve simgeleri gerçek marka işareti (satır içi
 * SVG, bkz. Services\SocialIcon). Önce hepsi aynı gri kutuydu ve içinde
 * ağın baş harfi yazıyordu: bir sıra "I F Y" harfi, alt bilgide sosyal
 * hesap olduğunu bile anlatmıyordu.
 *
 * Renk `--marka` olarak satır içinde geliyor (her ağın kendi rengi);
 * tanınmayan ağda değişken tanımsız kalıyor ve yedek renk devreye
 * giriyor — o zaman içerik de harf oluyor.
 */
.social__link {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--marka, color-mix(in srgb, var(--on-brand) 12%, transparent));
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.social__link:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--marka, var(--gold)) 45%, transparent);
  text-decoration: none;
  color: #fff;
}

/* Simgesi olmayan ağ: harf rozeti markanın kendi renginde değil, sitenin
   vurgu renginde — uydurma bir marka rengi göstermemek için. */
.social__link--harf { background: var(--gold); color: var(--on-gold); }
.social__link--harf:hover { color: var(--on-gold); }

@media (prefers-reduced-motion: reduce) {
  .social__link { transition: none; }
  .social__link:hover { transform: none; }
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  margin-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--on-brand) 12%, transparent);
}
.site-footer__bottom a { color: color-mix(in srgb, var(--on-brand) 70%, transparent); }

/* ---------- Görseller ---------- */

.tour-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.gallery__item { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.gallery__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s; }
.gallery__item:hover img { transform: scale(1.04); }

.hotel { display: flex; gap: .9rem; align-items: center; }
.hotel__img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }

/* ---------- Güven şeridi ve sayılar ---------- */

/* Kurumsal göstergeler (yıl, müşteri, TÜRSAB): satış sayfasında en çok
   sorulan "siz kimsiniz" sorusunun cevabı. */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
}
.stat {
  text-align: center;
  padding: 1.25rem 1rem;
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.section--navy .stat { background: color-mix(in srgb, var(--on-brand) 6%, transparent); border-color: color-mix(in srgb, var(--on-brand) 12%, transparent); }
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold-deep);
  line-height: 1.1;
}
.section--navy .stat__value { color: var(--gold-light); }
.stat__label { font-size: .85rem; color: var(--text-muted); }
.section--navy .stat__label { color: color-mix(in srgb, var(--on-brand) 72%, transparent); }

/* ---------- Yakın kalkış sekmeleri ---------- */

/* Sunucuya gitmeden panel değiştirir: "bu ay" ile "gelecek 60 gün"
   arasında gidip gelen kullanıcı her seferinde sayfa beklemesin. */
/*
 * Şerit KENDİ İÇİNDE kayıyor, sayfayı kaydırmıyor.
 *
 * MOBİL HATA: kutu `inline-flex` idi ve genişliği içeriğe göre büyüyordu.
 * Beş şehirli otel sayfasında şerit 452px tutuyor, telefon ekranı ise
 * 375px: fazlalık SAYFANIN TAMAMINI yatay kaydırılabilir yapıyordu.
 * Sonuç yalnızca süzgecin taşması değildi — başlık, kartlar ve altbilgi
 * dâhil her şey sağa kayıyor, ziyaretçi sayfayı sürekli sola itmek
 * zorunda kalıyordu.
 *
 * Şehirler alt alta sarılmadı: sarılınca liste büyüdükçe süzgeç üç
 * satıra çıkıp otellerin kendisini ekranın dışına itiyor. Kaydırma
 * çubuğu gizli ama şerit parmakla kaydırılıyor.
 */
.pill-tabs {
  display: inline-flex;
  gap: .3rem;
  padding: .3rem;
  background: var(--bg-alt);
  border-radius: 999px;
  margin-bottom: 1.25rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.pill-tabs::-webkit-scrollbar { display: none; }
.pill-tab {
  flex: 0 0 auto;
  padding: .45rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.pill-tab--active { background: var(--navy); color: var(--on-brand); box-shadow: var(--shadow); }

/* ---------- Bülten ---------- */

.newsletter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .6rem;
  max-width: 480px;
  margin-top: .9rem;
}
@media (max-width: 560px) { .newsletter { grid-template-columns: 1fr; } }
.newsletter .input,
.newsletter .select { background: color-mix(in srgb, var(--on-brand) 12%, transparent); border-color: color-mix(in srgb, var(--on-brand) 25%, transparent); color: var(--on-brand); }
.newsletter .input::placeholder { color: color-mix(in srgb, var(--on-brand) 55%, transparent); }

/*
 * İsteğe bağlı alanlar — e-postanın ALTINDA, iki sütun.
 *
 * Üstüne konsaydı ya da zorunlu olsaydı yalnızca adresini yazıp geçen
 * ziyaretçi kaybediliyordu; bülten kutusunun tek işi adres toplamak.
 * `grid-column: 1 / -1`: ızgara "alan + düğme" için iki sütunlu, bu blok
 * ikisinin altını boydan boya kaplıyor.
 */
.newsletter__extra {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
@media (max-width: 560px) { .newsletter__extra { grid-template-columns: 1fr; } }
.newsletter__extra .select { grid-column: 1 / -1; }

.newsletter__not {
  grid-column: 1 / -1;
  font-size: .8rem;
  color: color-mix(in srgb, var(--on-brand) 50%, transparent);
}

/* Koyu zeminde açılır kutunun seçenekleri sistem renginde çiziliyor;
   beyaz metin beyaz zemine düşüp okunmaz oluyordu. */
.newsletter .select option { color: #0f172a; background: #fff; }

/* ---------- Yorum kartı (koyu zemin) ---------- */

.section--navy .quote {
  background: color-mix(in srgb, var(--on-brand) 6%, transparent);
  border-color: color-mix(in srgb, var(--on-brand) 12%, transparent);
  color: color-mix(in srgb, var(--on-brand) 90%, transparent);
}
.section--navy .quote cite { color: color-mix(in srgb, var(--on-brand) 65%, transparent); }
.quote__stars { color: var(--gold); letter-spacing: .1em; }

/*
 * Acenta yanıtı — yorumun İÇİNDE, girintili.
 *
 * Ayrı bir kart olsaydı ızgarada yorumdan kopuyor ve hangi yoruma cevap
 * verildiği anlaşılmıyordu. Kenar çizgisi `border-inline-start`:
 * Arapçada sayfa sağdan sola akıyor ve `border-left` çizgiyi metnin
 * yanlış tarafında bırakıyordu.
 */
.quote__reply {
  margin-top: .9rem;
  padding: .6rem .75rem;
  border-inline-start: 2px solid var(--gold);
  background: color-mix(in srgb, var(--on-brand) 7%, transparent);
  font-size: .88rem;
  line-height: 1.55;
}
.quote__reply-ad {
  display: block;
  font-weight: 600;
  font-size: .78rem;
  margin-bottom: .15rem;
  color: var(--gold);
}

/* ---------- Otel vitrini ---------- */

.hotel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.hotel-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  color: inherit;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s;
}
.hotel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.hotel-card__media { height: 170px; background-size: cover; background-position: center; background-color: var(--navy); }
.hotel-card__body { padding: 1rem 1.1rem; }
.hotel-card__city { font-size: .85rem; color: var(--text-muted); }

/* ---------- Hata sayfaları ---------- */

/* Vitrinde de hata sayfası çiziliyor: eskiden yalnızca yönetim stili
   vardı, site ziyaretçisi panel görünümüyle karşılaşıyordu. */
.error-page {
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: 3rem 1.5rem;
  text-align: center;
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -.04em;
  line-height: 1;
}
.error-page .btn { margin: .25rem; }
.error-page__trace {
  text-align: left;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .8rem;
  overflow: auto;
  font-size: .8rem;
}

/* ---------- Dil değiştirici ---------- */

/* Kısa kodlar (TR/EN/AR): bayrak kullanılmıyor — bayrak ülkeyi anlatır,
   dili değil; Arapça konuşan ziyaretçi hangi bayrağı arayacağını
   bilemiyordu. */
.lang-switch { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: 999px; background: color-mix(in srgb, var(--on-brand) 12%, transparent); }
.lang-switch__item {
  padding: .3rem .6rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--on-brand) 80%, transparent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.lang-switch__item:hover { background: color-mix(in srgb, var(--on-brand) 16%, transparent); color: var(--on-brand); text-decoration: none; }
.lang-switch__item--active { background: var(--gold); color: var(--on-gold); }

/*
 * TELEFONDA DİL KUTUSU MENÜNÜN İÇİNDE — üst barda değil.
 *
 * Üst barda telefon düğmesiyle aynı satırı paylaşıyordu ve satırı ikiye
 * bölüyordu: asıl dönüşüm olan arama düğmesi yarım genişlikte kalıyor,
 * dil kutusu da ziyaret başına bir kez kullanılan bir şey için sürekli
 * yer tutuyordu. Menü zaten açılıp kapanan panel; dil seçimi oraya ait.
 *
 * İKİNCİ BİR KOPYA BASILMIYOR: aynı öge, menü açıkken görünür oluyor
 * (`~` kardeş seçici — kutu DOM'da menüden sonra geliyor). Ayrı bir
 * mobil kopya, dil listesi değiştiğinde birini güncellemeyi unutmak
 * demekti.
 *
 * Kurallar BURADA, üst bar bölümünde değil: temel `.lang-switch` tanımı
 * dosyada bu noktada ve aynı özgüllükteki bir `display` kuralı yukarıda
 * yazılsaydı burası onu ezerdi.
 */
@media (max-width: 980px) {
  .lang-switch { display: none; }

  .nav-toggle:checked ~ .lang-switch {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: .75rem;
  }

  /* Kodlar EŞİT genişlikte ve satırı doldurur: 37×30px'lik bitişik
     hedeflerken Arapçaya geçmek isteyen ziyaretçi İngilizceye
     düşüyordu. */
  .nav-toggle:checked ~ .lang-switch .lang-switch__item {
    flex: 1 1 0;
    /* Dikey ölçü 44px'e çıksın: .55rem'de hedef 38px kalıyordu ve
       parmak ucu iki kodun arasına düşebiliyor. */
    padding: .8rem;
    text-align: center;
  }
}

/* ---------- Sağdan sola diller ---------- */

/* Yalnızca yön çevriliyor; bileşenler ayrıca yazılmıyor. Ayrı bir RTL
   sayfası tutmak, her düzeltmeyi iki yerde yapmak demekti. */
[dir="rtl"] .site-nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .hero__title, [dir="rtl"] .hero__lead,
[dir="rtl"] .tour-hero__title, [dir="rtl"] .tour-hero__lead { max-width: none; }
[dir="rtl"] .tour-card__type { left: auto; right: .75rem; }
[dir="rtl"] .tour-card__badge { right: auto; left: .75rem; }
[dir="rtl"] .include-list__item { padding: .35rem 1.75rem .35rem 0; }
[dir="rtl"] .include-list__item::before { left: auto; right: 0; }
[dir="rtl"] .itinerary__item { grid-template-columns: 1fr 90px; }
[dir="rtl"] .stars { margin-left: 0; margin-right: .35rem; }

/* Editörden gelen metin — tur ve otel sayfalarında.
   Panelin `.rte` biçimlerinin sitedeki karşılığı: kullanıcı panelde
   yazarken gördüğüyle ziyaretçinin gördüğü aynı olmalı. */
.rte { line-height: 1.7; }
.rte > :first-child { margin-top: 0; }
.rte > :last-child  { margin-bottom: 0; }
.rte h2 { font-size: 1.25rem; margin: 1.2rem 0 .5rem; }
.rte h3 { font-size: 1.08rem; margin: 1rem 0 .4rem; }
.rte p  { margin: 0 0 .8rem; }
.rte ul, .rte ol { margin: 0 0 .8rem; padding-left: 1.4rem; }
.rte li { margin-bottom: .3rem; }
.rte a  { text-decoration: underline; }

/* Dahil olmayan hizmetler: madde işareti farklı, renk tek başına bilgi
   taşımıyor — renk körü ziyaretçi de ayrımı görebilmeli */
.rte--out li::marker { content: '✕  '; }
.rte--note { padding: .9rem 1.1rem; border-left: 3px solid var(--accent); background: rgba(0,0,0,.03); }

/* Video: 16:9 oranı korunuyor, telefonda taşmıyor */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   Galeri önizleme penceresi
   ============================================================
   Görseller yeni sekmede açılıyordu; ziyaretçi her fotoğraf için sekme
   açıp kapatıyor ve sayfadaki yerini kaybediyordu.
   ============================================================ */
.lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: 1rem;
  background: rgba(10, 12, 16, .93);
}
.lb[hidden] { display: none; }

/* Arkadaki sayfa kaymasın: pencere açıkken gövde sabitleniyor */
body.lb-acik { overflow: hidden; }

.lb__cerceve {
  margin: 0;
  display: grid;
  place-items: center;
  gap: .6rem;
  max-height: 92vh;
}

.lb__gorsel {
  max-width: 100%;
  max-height: 84vh;
  border-radius: 8px;
  object-fit: contain;
  background: #111;
}
/* Büyük dosya inene kadar küçük resim gösteriliyor; hafif bulanıklık
   "bu geçici" demenin en sessiz yolu */
.lb__gorsel--bekliyor { filter: blur(6px); transform: scale(1.01); }

.lb__yazi { color: #e8e8e8; font-size: .9rem; text-align: center; }

.lb__kapat, .lb__ok {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lb__kapat:hover, .lb__ok:hover { background: rgba(255, 255, 255, .24); }
.lb__kapat { position: absolute; top: 1rem; right: 1rem; font-size: 1.1rem; }

.lb__sayac {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: #cfcfcf;
  font-size: .82rem;
}

/* Telefonda oklar parmağın altında kalıyordu; alta alınıp
   büyütülüyorlar */
@media (max-width: 640px) {
  .lb { grid-template-columns: 1fr; }
  .lb__ok { position: absolute; bottom: 3.2rem; }
  .lb__ok--sol { left: 1.2rem; }
  .lb__ok--sag { right: 1.2rem; }
}

/* ============================================================
   Dönüşüm parçaları — rozet, doluluk, talep formu, yorumlar
   ============================================================
   Sayfada fiyat ve program vardı ama karar verdiren şeyler yoktu:
   "kaç yer kaldı", "başkaları ne dedi", "nasıl yer ayırırım".
   ============================================================ */
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }

/* Rozet renkleri ANLAMA bağlı ve metinle birlikte veriliyor: renk tek
   başına bilgi taşımıyor, renk körü ziyaretçi de okuyabiliyor. */
.tag--firsat { background: var(--gold); color: var(--on-gold); font-weight: 600; }
.tag--acil   { background: #b8373a; color: #fff; font-weight: 600; }
.tag--yakin  { background: #2b6cb0; color: #fff; }
.tag--dolu   { background: #4a5060; color: #fff; }
.tag--gecmis { background: rgba(120,120,120,.28); color: inherit; }

/* Doluluk çubuğu — yalnızca gerçekten doluyorsa çiziliyor. Her turda
   görünseydi "%8 doldu" yazan çubuk, aciliyet yerine ilgisizliği
   duyururdu. */
.doluluk { margin: .9rem 0 .2rem; max-width: 420px; }
.doluluk__cubuk {
  height: 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--on-brand) 22%, transparent);
  overflow: hidden;
}
.doluluk__dolu { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.doluluk__yazi { display: block; margin-top: .35rem; font-size: .82rem; }

.hero-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1rem; }
.hero-puan {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: inherit;
  font-size: .9rem;
}
.hero-puan strong { font-size: 1.05rem; }

/* Bot tuzağının biçimi `.honeypot` ile ORTAK — yukarıda, form öğeleri
   bölümünde. İki ayrı kural olduğunda biri Arapça düzeltmesini alıp
   diğeri almamıştı. */

/* ---- Yer ayırtma formu ---- */
.rezerve {
  margin: 2rem 0;
  padding: 1.4rem;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.rezerve__satir { display: grid; gap: .8rem; grid-template-columns: repeat(3, 1fr); }
.rezerve__alt { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1rem; }

.alan { display: block; margin-bottom: .8rem; }
.alan__etiket { display: block; margin-bottom: .3rem; font-size: .85rem; font-weight: 600; }
.alan__giris {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--border, rgba(0,0,0,.18));
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
.alan__giris:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.alan__giris--hata { border-color: #b8373a; }
.alan__hata { display: block; margin-top: .25rem; font-size: .8rem; color: #b8373a; }

/* ---- Yorumlar ---- */
.yorumlar { margin: 2.5rem 0 1rem; }
.yorumlar__basli { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; }
.puan { display: inline-flex; align-items: baseline; gap: .4rem; }
.puan__yildiz { color: var(--gold); letter-spacing: 1px; }

.yorum-liste { display: grid; gap: .9rem; margin-top: 1rem; }
.yorum {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 10px;
}
.yorum__ust { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.yorum__metin { margin: 0; line-height: 1.6; }
.yorum__yanit {
  margin-top: .7rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--gold);
  background: rgba(0, 0, 0, .03);
  border-radius: 0 8px 8px 0;
}
.yorum__yanit-etiket {
  display: block;
  margin-bottom: .2rem;
  font-size: .78rem;
  font-weight: 600;
  opacity: .75;
}

/* Form artık açılır kutuda değil: başlık yalnızca başlık, tıklanmıyor. */
.yorum-form { margin-top: 1.4rem; }
.yorum-form__ac {
  margin: 0 0 .8rem;
  font-size: 1.05rem;
  font-weight: 600;
}

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

/* ---------- Geçmiş tur şeridi (ana sayfa en alt) ----------
   Yatay kayan şerit. Hero'daki şerit DİKEY kayıyor ve koyu zeminde
   duruyor; bu ikisi aynı sınıfa toplanmadı çünkü yön, yükseklik ve renk
   şemasının üçü de farklı — ortak sınıf her ikisini de "istisna"ya
   çevirirdi. Ortak olan yalnızca fikir: liste iki kez basılır, yarısı
   kadar kayar, üzerine gelince durur. */
.gecmis-serit {
  padding: 2.6rem 0 3rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.gecmis-serit__baslik {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.gecmis-serit__ad { font-size: 1.35rem; margin: .2rem 0 0; }

.gecmis-serit__pencere {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.gecmis-serit__akis { display: flex; width: max-content; animation: gecmisKay 38s linear infinite; }
.gecmis-serit__grup { display: flex; gap: 1rem; padding-right: 1rem; }

/* Liste iki kez basıldığı için tam YARISI kadar kaydırıp başa dönüyor;
   kopya tam özgünün üstüne oturuyor ve döngü görünmüyor. */
@keyframes gecmisKay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Fare üzerindeyken ve klavye odağındayken duruyor: kayan bir bağlantıya
   tıklamaya çalışmak, hedefin parmağın altından kaçması demekti. */
.gecmis-serit__pencere:hover .gecmis-serit__akis,
.gecmis-serit__pencere:focus-within .gecmis-serit__akis { animation-play-state: paused; }

/* Üç turdan azında kaydırma yok: iki kart zaten ekrana sığıyor. */
.gecmis-serit--sabit .gecmis-serit__akis { animation: none; }
.gecmis-serit--sabit .gecmis-serit__pencere { -webkit-mask-image: none; mask-image: none; }

.gecmis-kart {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 19rem;
  flex: 0 0 auto;
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gecmis-kart:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
  text-decoration: none;
}

.gecmis-kart__kapak {
  width: 4.6rem;
  height: 3.4rem;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  /* Geçmiş turun kapağı SOLUK: yanındaki satıştaki turlarla aynı
     canlılıkta durunca hangisinin alınabilir olduğu belirsizleşiyordu. */
  filter: saturate(.72);
}

.gecmis-kart__ic { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.gecmis-kart__tip {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gecmis-kart__ad {
  font-weight: 600;
  font-size: .92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gecmis-kart__tarih { font-size: .78rem; color: var(--text-muted); }

/* Dokunmatikte kendiliğinden KAYMIYOR, parmakla kaydırılıyor — hero'daki
   şeritte olduğu gibi. Kayan bir kartın üstüne basmaya çalışmak, hedefin
   parmağın altından kaçması demek; üstelik pencere `overflow: hidden`
   olduğu için ziyaretçi şeridi kendi de çeviremiyor, kartın dönüp
   gelmesini beklemek zorunda kalıyordu. */
@media (max-width: 980px) {
  .gecmis-serit__akis { animation: none; }
  .gecmis-serit__pencere {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .gecmis-serit__grup[aria-hidden="true"] { display: none; }
}

/* Hareket azaltma isteyen kullanıcıda şerit duruyor, gizlenmiyor; kopya
   ise gizleniyor — animasyon yokken her tur ekranda iki kez görünürdü. */
@media (prefers-reduced-motion: reduce) {
  .gecmis-serit__akis { animation: none; }
  .gecmis-serit__pencere { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .gecmis-serit__grup[aria-hidden="true"] { display: none; }
}

/* ---------- Alt sayfa kartları (kurumsal sayfa altında) ----------
   Yalnızca bağlantı listesi olsaydı sayfanın sonuna iliştirilmiş bir
   dipnot gibi görünür ve okunmazdı; alt sayfalar üst menüde olmadığı
   için buradan bulunmaları gerekiyor. */
.alt-sayfalar {
  max-width: 46rem;
  margin: 2.4rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}
.alt-sayfalar__baslik { font-size: 1.1rem; margin: 0 0 1rem; }

.alt-sayfa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .8rem;
}

.alt-sayfa {
  position: relative;
  display: block;
  padding: .9rem 2rem .9rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.alt-sayfa:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.alt-sayfa__ad { display: block; font-weight: 600; }
.alt-sayfa__ozet {
  display: block;
  margin-top: .2rem;
  font-size: .82rem;
  color: var(--text-muted);
}
.alt-sayfa__git {
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  opacity: .5;
}
.alt-sayfa:hover .alt-sayfa__git { opacity: 1; }

/* Altbilgideki alt sayfa bağlantısı girintili: üst menüye sığmayan
   sayfaların bulunabildiği tek yer altbilgi ve orada da hepsi aynı
   hizada durunca hangisinin neyin altında olduğu görünmüyordu. */
.footer__link--alt { padding-left: .9rem; opacity: .82; font-size: .86rem; }

/* Metin içindeki görseller taşmasın: editörden 1600px genişliğinde
   görsel geliyor ve sabit genişlikli sütunu yatay kaydırıyordu. */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 1rem 0;
}

/* ---------- Kurumsal sayfa: iki sütun ----------
   Bölümde birden çok alt sayfa varsa başlıklar solda, içerik sağda.
   Tek alt sayfada bu düzene geçilmiyor: içeriği yarı genişliğe
   sıkıştırıp yanına tek satırlık bir menü koymak olurdu. */
.sayfa-duzen {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.sayfa-menu {
  position: sticky;
  /* Üst çubuk yapışkan; menü de onun altına oturuyor, yoksa uzun bir
     metinde kaydırırken başlığın altına giriyordu. */
  top: 5.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.sayfa-menu__ust {
  display: block;
  padding-bottom: .6rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: .95rem;
  color: inherit;
  text-decoration: none;
}
.sayfa-menu__ust:hover { color: var(--accent); text-decoration: none; }

.sayfa-menu__liste { display: flex; flex-direction: column; gap: .1rem; }

.sayfa-menu__link {
  display: block;
  padding: .45rem .6rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.sayfa-menu__link:hover {
  background: var(--accent-soft);
  color: var(--text);
  text-decoration: none;
}

/* Açık başlık: renk TEK BAŞINA bilgi taşımıyor — sol çubuk ve kalın
   yazı da var, `aria-current` de işaretli. */
.sayfa-menu__link--acik {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.sayfa-govde { min-width: 0; }

/* Dar ekranda menü İÇERİĞİN ÜSTÜNE: yan yana iki sütun telefonda her
   ikisini de okunmaz genişliğe indiriyordu. */
@media (max-width: 860px) {
  .sayfa-duzen { grid-template-columns: 1fr; gap: 1.4rem; }
  .sayfa-menu { position: static; }
  .sayfa-menu__liste { flex-direction: row; flex-wrap: wrap; }
  .sayfa-menu__link { border-left: 0; border-bottom: 2px solid transparent; }
  .sayfa-menu__link--acik { border-left: 0; border-bottom-color: var(--accent); }
}

/* ============================================================
   Yüzen WhatsApp düğmesi
   ============================================================
   Sayfa içindeki WhatsApp bağlantıları ancak oraya kadar kaydıran
   ziyaretçiye görünüyordu; soru ise çoğu zaman programın ortasında
   doğuyor. Düğme her sayfada, sağ altta.

   Renk WhatsApp'ın KENDİ YEŞİLİ ve temadan gelmiyor: tanınırlığı
   renginden geliyor, tema rengine boyanınca "başka bir düğme" oluyor.
   ============================================================ */
.wa-yuzen {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 35;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-yuzen:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 26px rgba(37, 211, 102, .55);
  text-decoration: none;
  color: #fff;
}
.wa-yuzen:active { transform: scale(.97); }

/*
 * TUR SAYFASINDA ALT ÇUBUĞUN ÜSTÜNE ÇIKIYOR.
 *
 * Mobilde fiyat çubuğu ekranın altına sabitleniyor (78px). Düğme 1rem
 * yukarıda kalsaydı çubuğun telefon düğmesinin üstüne biner ve ikisi de
 * yanlış basılırdı. `:has()` ile sayfada çubuk VARSA pay veriliyor —
 * çubuğu olmayan sayfalarda düğme yerinde kalıyor.
 */
@media (max-width: 900px) {
  body:has(.booking-box) .wa-yuzen {
    bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Sağdan sola dillerde düğme SOL alta geçiyor: sağ alt köşe RTL'de
   "sayfanın başı" tarafı ve başparmağın altına denk gelmiyor. */
[dir="rtl"] .wa-yuzen { right: auto; left: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .wa-yuzen { transition: none; }
  .wa-yuzen:hover { transform: none; }
}

/*
 * ARŞİV KİPİNDE FİYAT KUTUSU.
 *
 * Geçmiş turda fiyat yok (bugün için bir söz değil) ve kutuda yalnızca
 * "tamamlandı" bilgisi ile iletişim düğmeleri kalıyor. Mobilde ekranın
 * altına YAPIŞMIYOR: yapıştırılan çubuğun tek işi fiyatı ve birincil
 * eylemi hep görünür tutmak; ortada fiyat yokken sayfanın altını kapatan
 * boş bir çubuk kalırdı.
 */
.booking-box__arsiv { font-size: 1.1rem; }

@media (max-width: 900px) {
  .booking-box--arsiv {
    position: static;
    display: block;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 1.25rem;
  }
  .booking-box--arsiv p { display: block; }
  .booking-box--arsiv .booking-box__actions { display: grid; gap: .5rem; }
  .booking-box--arsiv .booking-box__actions a:not(:first-child) { display: inline-flex; }
}

/* ============================================================
   TÜRSAB dijital doğrulama rozeti
   ============================================================
   TÜRSAB'ın kendi rozet görseli ÇEKİLMİYOR (dış istek); rozet burada
   çiziliyor ve bağlantı TÜRSAB'ın doğrulama sayfasına gidiyor. Zemin
   beyaz ve marka kırmızısı: alt bilginin koyu zemininde belge gibi
   dursun, sitenin bir bölümü gibi değil.
   ============================================================ */
.tursab-dds {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: .9rem;
  padding: .6rem .85rem;
  border-radius: 10px;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tursab-dds:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  text-decoration: none;
  color: #1a1a1a;
}

.tursab-dds__marka {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #e2001a;   /* TÜRSAB kırmızısı — markanın kendi rengi */
}

.tursab-dds__ic { display: flex; flex-direction: column; line-height: 1.25; }
.tursab-dds__ust { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #e2001a; }
.tursab-dds__alt { font-size: .74rem; color: #4a4a4a; }

/* Belge numarası ayrı kutuda: rozetin asıl bilgisi bu ve metnin içinde
   kaybolmamalı. */
.tursab-dds__no {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .25rem .6rem;
  border: 1px solid #e2001a;
  border-radius: 8px;
  line-height: 1.15;
}
.tursab-dds__no-etiket { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: #4a4a4a; }
.tursab-dds__no strong { font-size: .95rem; color: #e2001a; }

/* Dar ekranda alt satıra: dört parça yan yana 375px'e sığmıyor */
@media (max-width: 460px) {
  .tursab-dds { flex-wrap: wrap; gap: .5rem; }
  .tursab-dds__ic { flex: 1 1 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .tursab-dds { transition: none; }
  .tursab-dds:hover { transform: none; }
}

/* ============================================================
   Tur listesi — solda süzgeç paneli, sağda kartlar
   ============================================================
   Süzgeçler listenin üstünde tek satırdı: dört kutu yan yana sıkışıyor,
   tur tipi açılır listenin içinde saklı kalıyordu. Panelde hepsi açık
   duruyor ve seçili olan bir bakışta belli.
   ============================================================ */
.liste-duzen {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}
.liste-duzen__ana { min-width: 0; }

/* Panel kaydırırken yerinde kalıyor: uzun listede süzgeci değiştirmek
   için başa dönmek gerekmesin. */
.liste-duzen__yan { position: sticky; top: 5.5rem; }

.suzgec { display: grid; gap: 1rem; }

.suzgec__kutu {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.suzgec__baslik {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.suzgec__secim {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem 0;
  cursor: pointer;
  font-size: .93rem;
}
.suzgec__secim span { display: inline-flex; align-items: center; gap: .45rem; }

/* Tip rengi noktada: vitrindeki kartla aynı işaret, ama renk TEK BAŞINA
   bilgi taşımıyor — adı da yazılı. */
.suzgec__nokta { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }

.suzgec__aralik { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.suzgec__etiket {
  display: block;
  margin-bottom: .2rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.suzgec__eylem { display: grid; gap: .5rem; text-align: center; }
.suzgec__temizle { font-size: .86rem; color: var(--text-muted); }

/* Açma düğmesi YALNIZCA telefonda: masaüstünde panel hep açık ve
   "Süzgeçler" başlığına tıklamak gereksiz bir adım olurdu. */
.suzgec-ac, .suzgec-ac__etiket { display: none; }

.liste-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.liste-ust__sayi { font-weight: 600; }
.liste-ust__sirala { display: flex; align-items: center; gap: .5rem; }
.liste-ust__etiket { font-size: .84rem; color: var(--text-muted); white-space: nowrap; }
.liste-ust__sirala .input { width: auto; }

@media (max-width: 900px) {
  .liste-duzen { grid-template-columns: 1fr; gap: 1rem; }
  .liste-duzen__yan { position: static; }

  /* Telefonda panel KAPALI başlıyor: açık bir süzgeç paneli turları
     ekranın çok altına itiyordu. Onay kutusu gizli ama odaklanabilir —
     klavyeyle de açılıyor. */
  .suzgec-ac__etiket {
    display: block;
    padding: .7rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-weight: 700;
    cursor: pointer;
  }
  .suzgec-ac__etiket::after { content: " ▾"; color: var(--text-muted); }
  .suzgec-ac:checked ~ .suzgec-ac__etiket::after { content: " ▴"; }
  .suzgec-ac:checked ~ .suzgec-ac__etiket { margin-bottom: .75rem; }

  .suzgec-ac { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .suzgec-ac:focus-visible ~ .suzgec-ac__etiket { outline: 2px solid var(--accent); outline-offset: 2px; }

  .suzgec { display: none; }
  .suzgec-ac:checked ~ .suzgec { display: grid; }
}

/* Listede ÜÇ SÜTUN: yan panelin kalan genişliğinde `auto-fill` iki sütun
   üretiyordu ve kartlar gereğinden geniş, liste gereğinden uzun
   oluyordu. Sütun sayısı burada açıkça veriliyor. */
@media (min-width: 1080px) {
  .liste-duzen__ana .tour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1079px) and (min-width: 760px) {
  .liste-duzen__ana .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Hero: boşluk, oklar ve üstüne binen tip şeridi ----------
   Başlık üst bardan çok uzakta başlıyordu: hero'nun üst payı alttakiyle
   aynıydı ve araya bir de "TÜRSAB belgeli acente" etiketi giriyordu.
   Etiket kaldırıldı (aynı bilgi güven şeridinde ve altbilgide var), üst
   pay küçültüldü. */
.hero { padding-top: clamp(1.5rem, 3.5vw, 2.75rem); }

/* Alt pay ARTIYOR: tur çeşitleri şeridi hero'nun üstüne biniyor ve
   bindiği kadar yer açılmazsa slayt metnine çıkıyor. */
.hero { padding-bottom: clamp(3.5rem, 7vw, 6rem); }

/* Slaytı elle çevirmek: noktalar hangi slaytta olduğunu söylüyordu ama
   "sonrakine geç" demenin yolu küçük bir noktayı isabet ettirmekti. */
.hero__ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--on-brand) 30%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--navy-deep) 55%, transparent);
  color: var(--on-brand);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.hero__ok:hover { background: var(--gold); color: var(--on-gold); }
.hero__ok--sol { left: .75rem; }
.hero__ok--sag { right: .75rem; }

/* Dar ekranda oklar küçülüyor ve kenara yaklaşıyor: 44px\'lik iki daire
   metnin iki yanından yer çalıyordu. */
@media (max-width: 780px) {
  .hero__ok { width: 36px; height: 36px; font-size: 1.25rem; }
  .hero__ok--sol { left: .25rem; }
  .hero__ok--sag { right: .25rem; }
}

/*
 * TUR ÇEŞİTLERİ ŞERİDİ HERO'NUN ÜSTÜNE BİNİYOR.
 *
 * Bölüm hero'nun altında, kendi başına duruyordu ve ikisinin arasında
 * kocaman bir boşluk kalıyordu. Yarım binince sayfa tek parça okunuyor ve
 * kartlar ilk ekranda görünüyor — ziyaretçi "ne satıyorsunuz" sorusunun
 * cevabını kaydırmadan alıyor.
 */
.section--binen {
  position: relative;
  z-index: 2;
  margin-top: clamp(-4.5rem, -6vw, -3rem);
  padding-top: 0;
}
.section--binen .container {
  padding-top: 1.4rem;
  padding-bottom: 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

/* Kartlar biraz daha iri: şerit hero'ya bindiği için dar bir kart sırası
   "eklenmiş bir çubuk" gibi duruyordu. */
.section--binen .type-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.section--binen .type-card { min-height: 5.5rem; }
.section--binen .type-card--kapak { min-height: 10rem; }

@media (max-width: 700px) {
  /* Telefonda binme YOK: dar ekranda kart sırası zaten uzun ve slaytın
     üstüne çıkınca metni örtüyordu. */
  .section--binen { margin-top: 0; padding-top: clamp(2rem, 5vw, 3rem); }
  .section--binen .container { box-shadow: none; background: none; padding-top: 0; }
}

/* Geniş ekranda hero içeriği biraz içeri alınıyor: oklar tam kenarda
   dururken arama kutusunun üstüne biniyordu. Bu pay, okların yeri. */
@media (min-width: 1100px) {
  .hero > .container { padding-left: 4.25rem; padding-right: 4.25rem; }
}

/* ============================================================
   Tur çeşidi kartları — görsel kartı KAPLIYOR
   ============================================================
   Kart bir metin kutusuydu ve kapak görseli arkasında soluk duruyordu;
   yanındaki kartla arasında da beyaz bir çerçeve kalıyordu. Artık kart
   görselin kendisi: yazılar altta, koyu perdenin üstünde.
   ============================================================ */
.section--binen .type-grid { gap: 1rem; }

.type-card {
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--type-color, var(--navy)) 22%, var(--surface)) 0%,
    var(--surface) 75%);
}

/* Ok işareti artık kartın içinde yazıyla ("Keşfet →"); köşedeki tek ok
   kartın tıklanabilir olduğunu yeterince anlatmıyordu. */
.type-card::after { content: none; }

.type-card--kapak {
  min-height: 19rem;              /* dikeyde geniş: örnek düzendeki gibi */
  justify-content: flex-end;
  border-left: 0;
}
.type-card--kapak::before {
  background: linear-gradient(to top,
    color-mix(in srgb, #05101c 88%, transparent) 0%,
    color-mix(in srgb, #05101c 45%, transparent) 38%,
    transparent 72%);
}

/* Yazı bloğu kartın ALT İÇİNDE: kartın kendi payı sıfır olduğu için
   boşluk buradan geliyor. */
.type-card > * { padding-inline: 1.1rem; }
.type-card > *:last-child { padding-bottom: 1.1rem; }

.type-card__count {
  align-self: flex-start;
  margin-bottom: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 90%, transparent);
  color: var(--on-gold);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.type-card--kapak .type-card__count { color: var(--on-gold); }

.type-card__name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; }
.type-card__git { margin-top: .3rem; font-size: .82rem; font-weight: 700; opacity: .85; }
.type-card:hover .type-card__git { opacity: 1; }

/* Kapaksız kart da AYNI BOYDA: yan yana duran kartların biri yarım
   kalınca ızgara bozuk görünüyordu. */
.type-card:not(.type-card--kapak) { min-height: 19rem; justify-content: flex-end; }

@media (max-width: 700px) {
  .type-card--kapak,
  .type-card:not(.type-card--kapak) { min-height: 14rem; }
}

/* ---------- Bölüm payları daraltıldı ----------
   Bölümler arası boşluk, kısa bir sayfada içeriğin arasına ekran boyu
   aralıklar koyuyordu: ziyaretçi iki bölüm arasında boş ekran görüyordu. */
.section { padding: clamp(1.75rem, 3.4vw, 2.75rem) 0; }
.site-footer { padding-top: 2.25rem; margin-top: 2rem; }
.section__head { margin-bottom: 1rem; }
.section__title { margin-bottom: .9rem; }

/* ============================================================
   Kapak görselleri TAM SIĞIYOR
   ============================================================
   Kapaklar `cover` ile basılıyordu: kutuyu dolduruyor ama görselin
   kenarlarını KIRPIYOR — dikey çekilmiş bir kapakta otelin adı, turun
   tabelası ya da caminin minaresi kesiliyordu. Artık görselin tamamı
   görünüyor; kutunun kalan yeri marka renginde kalıyor.
   ============================================================ */
/* Kapak kutusu görselin ORANINA yakın: sabit 178px yükseklikte geniş bir
   şerit, dikey çekilmiş fotoğrafın yarısını kırpıyordu. 4:3 kutuda kayıp
   en az; `contain` denendi ve iki yanda bant bıraktığı için geri
   alındı — bant, kart yarım yüklenmiş gibi görünüyordu. */
.tour-card__media,
.hotel-card__media {
  height: auto;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}

/* Zemin marka renginin koyusu: beyaz bir bant, kartın görseli
   yüklenmemiş gibi görünmesine yol açıyordu. */
.tour-card__media,
.hotel-card__media { background-color: var(--navy-deep); }

/* Kapaklı çeşit kartında yazı görselin üstünde duruyor; perde tam
   kalsın diye zemin de koyu. */
.type-card--kapak { background-color: var(--navy-deep); }

/* Çeşit kartında görsel kartı DOLDURUYOR: tur ve otel kartında amaç
   görselin tamamını göstermek (kapak orada bir belge gibi), çeşit
   kartında ise görsel zeminin kendisi — ortada bant kalınca kart
   "yarım yüklenmiş" görünüyordu. */
.type-card--kapak { background-size: cover; }

/* ---------- Yorumlar: kendiliğinden kayan şerit ----------
   Üç yorum yan yana duruyor ve dördüncüsü hiç görünmüyordu; yorum
   biriktikçe bölüm uzayıp sayfayı şişiriyordu. Şerit beş saniyede bir
   sola kayıyor, üzerine gelince duruyor. */
.quote-grid--kayan {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.quote-grid--kayan::-webkit-scrollbar { display: none; }
.quote-grid--kayan > .quote {
  flex: 0 0 clamp(260px, 32%, 420px);
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .quote-grid--kayan { scroll-behavior: auto; }
}

/* ---------- Çeşit kartında yazı: rozetin içinde ----------
   Yazılar doğrudan fotoğrafın üstündeydi ve açık gökyüzü, deniz ya da
   kar gibi kapaklarda okunmuyordu; perdeyi koyulaştırmak ise fotoğrafı
   söndürüyordu. Yazı artık kendi zeminini taşıyor ve zemin TEMADAN
   geliyor — hangi kapak konursa konsun okunuyor. */
.type-card--kapak .type-card__name,
.type-card--kapak .type-card__git {
  align-self: flex-start;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--navy-deep) 88%, transparent);
  color: #fff;
  backdrop-filter: blur(2px);
}
.type-card--kapak .type-card__name { margin-bottom: .3rem; font-size: 1.15rem; }
.type-card--kapak .type-card__git { font-size: .78rem; }

/* Perde biraz daha koyu: rozetlerin altındaki fotoğraf da sakinleşsin. */
.type-card--kapak::before {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--navy-deep) 78%, transparent) 0%,
    color-mix(in srgb, var(--navy-deep) 30%, transparent) 55%,
    transparent 85%);
}

/* ---------- Sözleşme imza sayfası ----------
   Kendi başına bir sayfa: menü ve alt bilgi yok, ekranda tek bir iş var.
   Ölçüler telefonda okunacak şekilde; imza kutusu parmakla çizilecek
   kadar geniş. */
.imza-sayfa { background: var(--bg-alt); }
.imza-kap { max-width: 720px; margin: 0 auto; padding: 1rem 1rem 3rem; }

.imza-ust {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .8rem 0 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.imza-ozet h1 { font-size: 1.35rem; margin: 0 0 .8rem; }
.imza-ozet dl { display: grid; gap: .35rem; margin: 0 0 1.2rem; }
.imza-ozet dl > div { display: flex; justify-content: space-between; gap: 1rem; }
.imza-ozet dt { color: var(--text-muted); font-size: .88rem; }
.imza-ozet dd { margin: 0; font-weight: 600; text-align: right; }

/* Metin KENDİ KUTUSUNDA kayıyor: on sayfalık sözleşme, altındaki imza
   alanını ekranın çok aşağısına itiyor ve kullanıcı imzayı bulamıyordu. */
.imza-metin {
  max-height: 42vh;
  overflow-y: auto;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  line-height: 1.6;
}

.imza-kod, .imza-form {
  margin-top: 1.2rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.imza-kod h2, .imza-form h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.imza-kod__dugmeler { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.imza-uyari { margin: 0; color: #b32d2d; font-size: .88rem; }

/* İmza kutusu: yüksekliği sabit, genişliği ekranı dolduruyor. Çizgi
   kâğıdı gibi alt çizgi var ki nereye çizileceği belli olsun. */
.imza-kutu {
  position: relative;
  margin: .4rem 0 .5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.imza-kutu canvas {
  display: block;
  width: 100%;
  height: 200px;
  /* Dokunuşu tarayıcı kaydırma sanmasın: parmak çizerken sayfa kayıyordu */
  touch-action: none;
}
.imza-kutu__temizle { position: absolute; right: .4rem; top: .4rem; }

.imza-onay { display: flex; gap: .5rem; align-items: flex-start; margin: .8rem 0; font-size: .92rem; }
.btn--blok { display: block; width: 100%; text-align: center; }

.imza-durum { padding: 2rem 1rem; text-align: center; }
.imza-durum h1 { font-size: 1.3rem; margin: 0 0 .5rem; }
.imza-durum--tamam h1 { color: #1a7f4e; }
.imza-durum--kapali h1 { color: #b32d2d; }

.imza-alt { margin-top: 2rem; text-align: center; }

/* ---------- Oda tipine göre fiyat tablosu (tur detayı) ----------
   Ziyaretçinin ilk sorduğu şey "tek kişilik odada kaça geliyor" ve cevap
   yalnızca telefonda veriliyordu. Tablo değil satır listesi: iki sütunlu
   bir <table> dar ekranda ya taşıyor ya da rakamları okunmaz hâle
   getiriyordu. */
.oda-fiyat {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: .8rem 0 .6rem;
  max-width: 34rem;
}

.oda-fiyat__satir {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border);
}
.oda-fiyat__satir:last-child { border-bottom: 0; }

/* En uygun oda vurgulu: altı satırlık listede "hangisi en ucuz"
   sorusunun cevabı için rakamları tek tek karşılaştırmak gerekiyordu.
   Renk TEK BAŞINA bilgi taşımıyor — yanında "En uygun" yazısı da var. */
.oda-fiyat__satir--ucuz { background: var(--accent-soft); }

.oda-fiyat__ad { flex: 1 1 auto; font-weight: 600; min-width: 0; }
.oda-fiyat__kisi {
  display: block;
  font-weight: 400;
  font-size: .78rem;
  color: var(--text-muted);
}

.oda-fiyat__rozet {
  flex: 0 0 auto;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.oda-fiyat__tutar {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}
.oda-fiyat__birim {
  display: block;
  font-weight: 400;
  font-size: .72rem;
  color: var(--text-muted);
}

/* Dar ekranda ad ve tutar alt alta değil, yine yan yana: tutar sağda
   kalmalı ki göz tek sütunda aşağı inip karşılaştırabilsin. Yalnızca
   yazı küçülüyor. */
@media (max-width: 480px) {
  .oda-fiyat__satir { padding: .6rem .7rem; gap: .5rem; }
  .oda-fiyat__rozet { display: none; }
}

/* ============================================================
   VİTRİNDE METİN SEÇİMİ KAPALI
   ============================================================
   İçeriğin (tur programları, fiyatlar, açıklamalar) fare ya da
   dokunmayla seçilip kopyalanması engelleniyor.

   FORM ALANLARI DIŞARIDA. `user-select: none` her şeye uygulansaydı
   ziyaretçi iletişim formuna yazdığını düzeltemez, telefonundaki
   numarayı yapıştıramaz, arama kutusundaki yazıyı seçemezdi — yani
   kopyalamayı engellerken form doldurmayı da engellemiş olurduk.

   Bunun KESİN BİR KORUMA OLMADIĞINI bilerek yapıyoruz: sayfa
   kaynağı, geliştirici araçları ve ekran görüntüsü hâlâ mümkün.
   Amaç, gündelik kopyalayıp yapıştırmayı zorlaştırmak.
   ============================================================ */
body.site {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* iOS'ta uzun basınca çıkan "Kopyala / Paylaş" balonunu kapatır. */
  -webkit-touch-callout: none;
}

body.site input,
body.site textarea,
body.site select,
body.site [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Görseller sürüklenip masaüstüne bırakılamasın. */
body.site img {
  -webkit-user-drag: none;
  user-drag: none;
}