/*
 * YourTourGPT dinamik destinasyon görünümü
 *
 * Yalnızca görsel katman. HTML sırası, metinler, logo, bağlantılar ve
 * işlevsel JavaScript değişmez. Bütün renkler destination-theme.js
 * tarafından CSS değişkenleri üzerinden yönetilir.
 */

:root{
  --theme-primary:#16b8b3;
  --theme-primary-dark:#087f86;
  --theme-secondary:#168bd2;
  --theme-secondary-dark:#075d94;
  --theme-accent:#168bd2;
  --theme-action:#087f86;
  --theme-action-2:#168bd2;
  --theme-soft:#e9fbfa;
  --theme-soft-2:#edf7ff;
  --theme-primary-rgb:22,184,179;
  --theme-secondary-rgb:22,139,210;
  --theme-accent-rgb:22,139,210;
  --theme-action-rgb:8,127,134;
  --theme-line:rgba(8,127,134,.16);
  --theme-shadow:0 16px 38px rgba(16,42,67,.12);
  --theme-photo-a:22px 22px 8px 22px;
  --theme-photo-b:22px 8px 22px 8px;
  --theme-photo-c:16px 24px 16px 8px;
}

html[data-ytg-theme]{
  --turkuaz:var(--theme-primary);
  --turkuaz-dolgu:var(--theme-primary-dark);
  --turkuaz-koyu:var(--theme-primary-dark);
  --turkuaz-acik:var(--theme-soft);
  --line:var(--theme-line);
  --hero:var(--theme-soft-2);
  --shadow:var(--theme-shadow);
}

html.ytg-theme-ready,
html.ytg-theme-ready body,
html.ytg-theme-ready .hero,
html.ytg-theme-ready .site-header,
html.ytg-theme-ready button,
html.ytg-theme-ready a,
html.ytg-theme-ready input,
html.ytg-theme-ready select{
  transition-property:background-color,border-color,color,box-shadow,filter,transform;
  transition-duration:.28s;
  transition-timing-function:ease;
}

body{
  background-color:#fff;
  background-image:
    radial-gradient(circle at 8% 0%,rgba(var(--theme-primary-rgb),.11),transparent 25rem),
    radial-gradient(circle at 96% 7%,rgba(var(--theme-secondary-rgb),.08),transparent 28rem),
    linear-gradient(180deg,rgba(var(--theme-primary-rgb),.035) 0,#fff 34rem);
  background-repeat:no-repeat;
}

.site-header{
  background:rgba(255,255,255,.9);
  border-bottom-color:rgba(var(--theme-primary-rgb),.12);
  box-shadow:0 4px 18px rgba(16,42,67,.035);
}

.mobile-menu{
  border-color:rgba(var(--theme-primary-rgb),.16);
  box-shadow:0 16px 42px rgba(16,42,67,.14);
}

.mobile-menu a:hover,
.mobile-menu a:focus-visible{
  background:linear-gradient(90deg,var(--theme-soft),var(--theme-soft-2));
  color:var(--theme-primary-dark);
}

.hero{
  isolation:isolate;
  background:
    radial-gradient(circle at 9% 12%,rgba(var(--theme-primary-rgb),.23),transparent 32%),
    radial-gradient(circle at 92% 14%,rgba(var(--theme-secondary-rgb),.18),transparent 34%),
    linear-gradient(132deg,var(--theme-soft) 0,#fff 48%,var(--theme-soft-2) 100%);
}

.hero::before,
.hero::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:999px;
  filter:blur(1px);
  opacity:.7;
}

.hero::before{
  width:20rem;
  height:20rem;
  left:-12rem;
  bottom:-14rem;
  background:rgba(var(--theme-primary-rgb),.19);
}

.hero::after{
  width:17rem;
  height:17rem;
  right:-10rem;
  top:-11rem;
  background:rgba(var(--theme-secondary-rgb),.16);
}

.eyebrow,
.kicker{
  color:var(--theme-primary-dark);
}

.section-heading h2::after,
.plan-ust h1::after,
.urun-h1::after{
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin-top:9px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--theme-primary),var(--theme-secondary));
}

.search-form{
  border-color:rgba(var(--theme-primary-rgb),.2);
  border-radius:20px;
  box-shadow:0 16px 40px rgba(16,42,67,.11),0 0 0 5px rgba(255,255,255,.56);
}

.search-form label{
  border-radius:15px;
  background:linear-gradient(135deg,rgba(var(--theme-primary-rgb),.065),rgba(var(--theme-secondary-rgb),.045));
}

.search-form label:has(input:focus-visible),
.search-form label:has(select:focus-visible){
  background:linear-gradient(135deg,var(--theme-soft),var(--theme-soft-2));
}

.search-form button,
.rezervasyon,
.rota-dugme,
.konum-dugme,
.sohbet-plan,
.elifa-composer button{
  border:0;
  background:linear-gradient(135deg,var(--theme-action),var(--theme-action-2));
  color:#fff;
  box-shadow:0 9px 22px rgba(var(--theme-action-rgb),.22);
}

.search-form button:hover,
.rezervasyon:hover,
.rota-dugme:hover,
.konum-dugme:hover,
.sohbet-plan:hover,
.elifa-composer button:hover{
  filter:brightness(1.06) saturate(1.04);
  box-shadow:0 12px 28px rgba(var(--theme-action-rgb),.28);
}

/* Buradaki eski turkuaz dolgu kaldırıldı: düğme artık beyaz zemin
   üzerine turuncu çerçeve. Kural dosyanın sonunda tek yerde. */

/* Ortaklar yan yana kalır; büyük beyaz kart görünümü kaldırılır. */
.ortak-kutular{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  max-width:560px;
  padding:4px 0;
}

.ortak-kutu{
  min-width:0;
  padding:11px 15px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.ortak-kutu + .ortak-kutu{
  border-left:1px solid rgba(var(--theme-primary-rgb),.18);
}

.ortak-kutu:hover,
.ortak-kutu:focus-visible{
  border-color:rgba(var(--theme-primary-rgb),.18);
  background:linear-gradient(135deg,rgba(var(--theme-primary-rgb),.055),rgba(var(--theme-secondary-rgb),.035));
  box-shadow:none;
  transform:translateY(-1px);
}

.ortak-kutu img{
  max-width:112px;
  filter:saturate(.96);
  transition:transform .2s ease,filter .2s ease;
}

.ortak-kutu:hover img{
  transform:scale(1.025);
  filter:saturate(1.08);
}

.ortak-kutu-adet,
.ortak-kutu-ok{
  color:var(--theme-primary-dark);
}

/* Bölümler doğrudan sayfa zemini üzerinde akar. */
.content-section,
.hero-content,
.urun-sayfa,
.plan-sayfa,
.rota-sayfa{
  background:transparent;
}

.serit{
  scroll-padding-inline:2px;
}

.urun-kart,
.sehir-kart{
  box-shadow:none!important;
}

.urun-kart:hover,
.urun-kart:focus-within,
.sehir-kart:hover,
.sehir-kart:focus-visible{
  box-shadow:none!important;
}

.urun-kart{
  flex-basis:226px;
}

.sehir-kart{
  flex-basis:214px;
}

.urun-gorsel,
.sehir-gorsel,
.urun-kapak,
.durak-gorsel,
.rota-oneri-kart img,
.ayni-yer-oge img{
  border:1px solid rgba(var(--theme-primary-rgb),.07);
  box-shadow:0 8px 21px rgba(16,42,67,.075);
  transform:translateZ(0);
}

.urun-gorsel{
  border-radius:var(--theme-photo-a);
  background:linear-gradient(135deg,var(--theme-soft),var(--theme-soft-2));
}

.sehir-gorsel{
  height:138px;
  flex-basis:138px;
  border-radius:var(--theme-photo-b);
  background:linear-gradient(135deg,var(--theme-soft),var(--theme-soft-2));
}

#yakin .sehir-gorsel{
  border-radius:24px 9px 24px 9px;
}

#sehirler .sehir-gorsel,
.tum-izgara .sehir-gorsel{
  border-radius:20px 20px 8px 20px;
}

#ulkeler .sehir-gorsel,
.ulke-kart .sehir-gorsel{
  border-radius:24px 10px 24px 10px;
}

.urun-kapak{
  border-radius:26px 26px 10px 26px;
}

.urun-gorsel img,
.sehir-gorsel img,
.urun-kapak img,
.durak-gorsel,
.rota-oneri-kart img,
.ayni-yer-oge img{
  transition:transform .34s ease,filter .34s ease;
}

.urun-kart:hover .urun-gorsel img,
.sehir-kart:hover .sehir-gorsel img,
.urun-kapak:hover img,
.rota-oneri-kart:hover img,
.ayni-yer-oge:hover img{
  transform:scale(1.025);
  filter:saturate(1.035) contrast(1.015);
}

.urun-kart:hover .urun-gorsel,
.sehir-kart:hover .sehir-gorsel{
  box-shadow:0 13px 28px rgba(var(--theme-primary-rgb),.16);
}

.urun-kart:hover h3,
.sehir-kart:hover .sehir-govde b,
.sehir-kart[aria-pressed="true"] .sehir-govde b{
  color:var(--theme-primary-dark);
}

.urun-git,
.plan-harita{
  background:linear-gradient(135deg,var(--theme-primary-dark),var(--theme-secondary-dark));
  color:#fff;
}

.urun-kart:hover .urun-git,
.plan-harita:hover{
  background:linear-gradient(135deg,var(--theme-action),var(--theme-action-2));
}

.rota-ekle:hover,
.rota-ekle.ekli{
  background:var(--theme-action);
}

.sayac,
.plan-rozet,
.etiket,
.saglayici-rozet{
  border-color:rgba(var(--theme-primary-rgb),.16);
  background:linear-gradient(135deg,rgba(var(--theme-primary-rgb),.06),rgba(var(--theme-secondary-rgb),.035));
}

.tum-katalog,
.daha,
.yorum-ac,
.temizle,
.oneri-ekle,
.plan-ikincil,
.tarih-kart,
.etiket-dugme,
.favori-dugme{
  border-color:rgba(var(--theme-primary-rgb),.2);
  background:rgba(255,255,255,.86);
}

.tum-katalog:hover,
.daha:hover,
.yorum-ac:hover,
.temizle:hover,
.oneri-ekle:hover,
.plan-ikincil:hover,
.tarih-kart:hover,
.etiket-dugme:hover,
.favori-dugme:hover{
  border-color:var(--theme-primary);
  color:var(--theme-primary-dark);
  background:linear-gradient(135deg,var(--theme-soft),var(--theme-soft-2));
  box-shadow:0 7px 18px rgba(var(--theme-primary-rgb),.1);
}

.etiket-dugme[aria-pressed="true"],
.tarih-kart[aria-pressed="true"]{
  border-color:var(--theme-primary);
  color:var(--theme-primary-dark);
  background:linear-gradient(135deg,var(--theme-soft),var(--theme-soft-2));
  box-shadow:0 7px 18px rgba(var(--theme-primary-rgb),.12);
}

/* İşlevsel alanlar aynı ölçüde kalır, sert kutu görünümü yumuşar. */
.filtreler,
.urun-bilgiler,
.fiyat-kutu,
.rota-form,
.plan-hazirlik,
.plan-toplam,
.rota-oneri,
.rota-secilenler,
.konum-davet{
  border-color:rgba(var(--theme-primary-rgb),.14);
  background:linear-gradient(135deg,rgba(var(--theme-primary-rgb),.055),rgba(255,255,255,.86) 46%,rgba(var(--theme-secondary-rgb),.04));
  box-shadow:none;
}

.rota-secilenler{
  border-left-color:var(--theme-action);
}

.katalog-suz input,
.filtre-alan select,
.filtre-alan input#sehirFiltre,
.rota-alan input,
.rota-alan select{
  border-color:rgba(var(--theme-primary-rgb),.17);
}

.katalog-suz input:focus-visible,
.filtre-alan select:focus-visible,
.filtre-alan input#sehirFiltre:focus-visible,
.rota-alan input:focus-visible,
.rota-alan select:focus-visible,
.search-form input:focus-visible,
.search-form select:focus-visible,
.elifa-composer textarea:focus-visible{
  outline-color:var(--theme-primary-dark);
  border-color:var(--theme-primary);
}

.elifa-panel{
  border-color:rgba(var(--theme-primary-rgb),.2);
  box-shadow:0 17px 42px rgba(16,42,67,.15),0 0 0 1px rgba(var(--theme-primary-rgb),.025);
}

.elifa-panel:not(.tam){
  background:rgba(255,255,255,.95);
}

.elifa-panel.tam .elifa-composer{
  border-top-color:rgba(var(--theme-primary-rgb),.12);
}

footer{
  border-top-color:rgba(var(--theme-primary-rgb),.11);
  background:linear-gradient(180deg,rgba(var(--theme-primary-rgb),.035),rgba(var(--theme-secondary-rgb),.045));
}

@media(max-width:620px){
  body{
    background-image:
      radial-gradient(circle at 3% 0%,rgba(var(--theme-primary-rgb),.1),transparent 18rem),
      linear-gradient(180deg,rgba(var(--theme-secondary-rgb),.03),#fff 28rem);
  }

  .hero{
    background:
      radial-gradient(circle at 8% 8%,rgba(var(--theme-primary-rgb),.18),transparent 45%),
      linear-gradient(138deg,var(--theme-soft) 0,#fff 56%,var(--theme-soft-2) 100%);
  }

  .ortak-kutular{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }

  .ortak-kutu{
    padding:10px 8px;
  }

  .ortak-kutu img{
    max-width:92px;
  }

  .urun-kart{
    flex-basis:192px;
  }

  .sehir-kart{
    flex-basis:190px;
  }

  .sehir-gorsel{
    height:124px;
    flex-basis:124px;
  }

  .urun-kapak{
    border-radius:22px 22px 9px 22px;
  }
}

@media(max-width:370px){
  .ortak-kutu{
    padding-inline:5px;
  }

  .ortak-kutu-not{
    font-size:9.8px;
  }

  .urun-kart{
    flex-basis:184px;
  }

  .sehir-kart{
    flex-basis:180px;
  }
}

@media(prefers-reduced-motion:reduce){
  html.ytg-theme-ready,
  html.ytg-theme-ready body,
  html.ytg-theme-ready .hero,
  html.ytg-theme-ready .site-header,
  .urun-gorsel img,
  .sehir-gorsel img,
  .urun-kapak img{
    transition:none!important;
  }
}


/* ═══════════════════════════════════════════════════════════
   TEMİZ 121 — tam sayfa destinasyon teması ve hızlı seçim alanı
   ═══════════════════════════════════════════════════════════ */
:root,
html[data-ytg-theme]{
  --orange:var(--theme-accent);
  --orange-soft:var(--theme-secondary);
}

/* Eski turuncu sabitlerinin tamamı seçilen destinasyon paletine bağlanır. */
.brand>span:last-child>span,
h1 em,
.search-icon,
.yildiz,
.urun-fiyat,
.ortak-kutu-adet,
.ortak-kutu-ok,
.elifa-mark,
.elifa-composer textarea::placeholder,
.elifa-composer textarea::-webkit-input-placeholder{
  color:var(--theme-accent)!important;
}

.brand-mark{
  background:linear-gradient(135deg,var(--theme-accent),var(--theme-secondary));
  box-shadow:0 8px 20px rgba(var(--theme-accent-rgb),.23);
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.temizle:hover,
.daha:hover,
.tum-katalog,
.elifa-baglam-dugme{
  color:var(--theme-primary-dark);
  border-color:rgba(var(--theme-primary-rgb),.22);
}

.elifa-baglam-dugme{
  background:linear-gradient(135deg,rgba(var(--theme-primary-rgb),.055),rgba(var(--theme-secondary-rgb),.035));
}
.elifa-baglam-dugme:hover{
  background:linear-gradient(135deg,var(--theme-action),var(--theme-action-2));
  color:#fff;
}

.favori-sayi,
.urun-sure,
.plan-rozet.dolu{
  background:linear-gradient(135deg,var(--theme-action),var(--theme-action-2));
  color:#fff;
}

.sehir-kart[aria-pressed="true"]{
  border-color:var(--theme-primary)!important;
  box-shadow:0 8px 20px rgba(var(--theme-primary-rgb),.15)!important;
}

/* Üst aramanın altında gerçek katalogla çalışan dört hızlı alan. */
.destination-guide{
  width:min(720px,100%);
  margin:14px auto 2px;
  text-align:left;
}
.destination-context{
  margin:0 0 8px;
  color:var(--theme-primary-dark);
  font-size:12px;
  font-weight:800;
  letter-spacing:-.01em;
  text-align:center;
}
.destination-selectors{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.destination-selector{
  min-width:0;
  display:block;
  padding:8px 10px 9px;
  border:1px solid rgba(var(--theme-primary-rgb),.16);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  box-shadow:0 6px 18px rgba(16,42,67,.045);
}
.destination-selector>span{
  display:block;
  margin:0 0 3px;
  color:var(--theme-primary-dark);
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.destination-selector select{
  width:100%;
  min-width:0;
  height:25px;
  padding:0 18px 0 0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-size:11px;
  font-weight:750;
  text-overflow:ellipsis;
  cursor:pointer;
}
.destination-selector:focus-within{
  border-color:var(--theme-primary);
  background:linear-gradient(135deg,var(--theme-soft),rgba(255,255,255,.92),var(--theme-soft-2));
  box-shadow:0 8px 22px rgba(var(--theme-primary-rgb),.11);
}
.destination-selector:has(select:disabled){
  opacity:.55;
  box-shadow:none;
}

/* Her bölüm kutusuz kalır, ama fotoğrafların ritmi tutarlı olur. */
.urun-kart{
  flex:0 0 clamp(202px,21vw,232px);
  min-width:0;
}
.urun-gorsel{
  aspect-ratio:4/3;
  border-radius:18px 18px 9px 18px;
}
.sehir-kart{
  flex:0 0 clamp(196px,20vw,222px);
  min-width:0;
}
.sehir-gorsel{
  height:auto;
  flex-basis:auto;
  aspect-ratio:1.55/1;
  border-radius:18px;
}
#yakin .sehir-gorsel{border-radius:20px 10px 20px 10px}
#sehirler .sehir-gorsel,.tum-izgara .sehir-gorsel{border-radius:18px 18px 8px 18px}
#ulkeler .sehir-gorsel,.ulke-kart .sehir-gorsel{border-radius:20px 10px 20px 10px}

.urun-govde,.sehir-govde{padding-inline:2px}
.urun-baslik{line-height:1.24}

/* Tema sayfanın altına kadar devam eder. */
.content-section::selection,
footer::selection{background:var(--theme-soft)}
footer a:hover{color:var(--theme-primary-dark)}
.elifa-panel{background:rgba(255,255,255,.965)}
.elifa-composer button{box-shadow:0 5px 15px rgba(var(--theme-action-rgb),.23)}

/* Dört kutu varken 760px altında 2×2 diziliyordu. Üç kutuya
   inince bu kural ters etki yapıyor: 2+1 kırık bir düzen üretiyor
   ve üçüncü kutu tek başına alta düşüyordu (ekran görüntüsünde
   görüldü). Üç kutu her genişlikte tek satırda kalıyor. */
@media(max-width:760px){
  .destination-selectors{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .destination-guide{margin-top:11px}
  .destination-context{font-size:11px;margin-bottom:7px}
  .destination-selectors{gap:7px}
  .destination-selector{padding:7px 9px 8px;border-radius:13px}
  .destination-selector select{font-size:10.5px}
  .urun-kart{flex-basis:calc((100vw - 52px)/2);min-width:172px;max-width:202px}
  .sehir-kart{flex-basis:calc((100vw - 48px)/2);min-width:176px;max-width:208px}
  .urun-gorsel{border-radius:16px 16px 8px 16px}
  .sehir-gorsel{border-radius:16px}
}
@media(max-width:390px){
  .urun-kart{min-width:168px}
  .sehir-kart{min-width:170px}
}


/* Sabit eski turuncu gölgeler de seçilen temaya bağlanır. */
.elifa-composer button,
.rezervasyon,
.konum-dugme:hover,
.rota-dugme:hover{
  box-shadow:0 8px 22px rgba(var(--theme-action-rgb),.24)!important;
}
.tarih-kart[aria-pressed="true"],
.tum-katalog:hover,
.ayni-yer-oge:hover{
  border-color:var(--theme-primary)!important;
  background:linear-gradient(135deg,var(--theme-soft),var(--theme-soft-2))!important;
  box-shadow:0 6px 17px rgba(var(--theme-primary-rgb),.13)!important;
}


/* ═══════════════════════════════════════════════════════════
   TEMİZ 122 — ana marka ülkelerde sabit + şehre özgü palet + vitrin ritmi
   ═══════════════════════════════════════════════════════════ */

/* Varsayılan ve ülke görünümü: Tiqets çizgisine yakın turkuaz–mavi–beyaz.
   Yalnız şehir veya alt destinasyon seçildiğinde JS şehre özgü renkleri uygular. */
html[data-ytg-theme-kind="default"],
html[data-ytg-theme-kind="country"],
html[data-ytg-theme-kind="city"]{
  color-scheme:light;
}

/* Bölüm başlıkları ve boşluklar daha düzenli bir dikey ritim izler. */
.content-section{
  padding-block:44px;
}
.content-section.compact{
  padding-top:20px;
}
#sehirler{
  padding-top:42px;
  padding-bottom:30px;
}
#ulkeler{
  padding-top:30px;
  padding-bottom:44px;
  border-top:1px solid rgba(var(--theme-primary-rgb),.08);
}
.section-heading{
  margin-bottom:16px;
  align-items:flex-end;
}
.section-heading h2{
  font-size:clamp(29px,3.2vw,40px);
  line-height:1.02;
  letter-spacing:-.035em;
}
.kicker{
  color:var(--theme-primary-dark);
  font-size:10px;
  letter-spacing:.15em;
}
.section-heading>div::after{
  width:56px;
  height:4px;
  margin-top:12px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--theme-primary),var(--theme-secondary));
}

/* Fotoğraf şeritleri: eşit genişlik, eşit metin başlangıcı, daha temiz crop. */
.serit{
  gap:18px;
  padding-bottom:12px;
  scroll-padding-inline:2px;
}
.sehir-kart{
  flex:0 0 clamp(204px,20vw,224px);
  min-width:0;
  border-radius:0;
  box-shadow:none!important;
}
.sehir-kart:hover,
.sehir-kart:focus-visible{
  transform:translateY(-2px);
  box-shadow:none!important;
}
.sehir-gorsel{
  position:relative;
  width:100%;
  height:auto;
  flex-basis:auto;
  aspect-ratio:1.54/1;
  border-radius:18px;
  background:linear-gradient(135deg,var(--theme-soft),var(--theme-soft-2));
  box-shadow:0 1px 0 rgba(16,42,67,.04),0 8px 22px rgba(16,42,67,.07);
  isolation:isolate;
}
.sehir-gorsel img{
  object-position:center 48%;
  border-radius:inherit;
  transition:transform .3s ease,filter .3s ease;
}
.sehir-kart:hover .sehir-gorsel{
  box-shadow:0 12px 28px rgba(var(--card-primary-rgb,18,184,178),.16);
}
.sehir-kart:hover .sehir-gorsel img{
  transform:scale(1.025);
}
.sehir-govde{
  min-height:58px;
  gap:4px;
  padding:10px 1px 2px;
}
.sehir-govde b{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.018em;
}
.sehir-alt{
  width:100%;
  min-width:0;
  flex-wrap:nowrap;
  gap:7px;
  margin-top:2px;
}
.sehir-alt em,
.ulke-kart .sehir-alt{
  min-width:0;
  overflow:hidden;
  color:var(--muted);
  font-size:11.25px;
  font-weight:690;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sehir-ok{
  flex:0 0 auto;
  color:var(--card-primary,var(--theme-primary));
}
.ytg-city-card:hover .sehir-govde b{
  color:var(--card-primary,var(--theme-primary-dark));
}

/* Şehir kartı kendi paletini, ülke kartı sabit marka paletini ince bir imzayla gösterir. */
.ytg-city-card .sehir-gorsel::after,
.ytg-country-card .sehir-gorsel::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
  z-index:2;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--card-primary),var(--card-secondary),var(--card-accent));
  box-shadow:0 3px 10px rgba(var(--card-primary-rgb),.22);
}
.ytg-country-card:hover .sehir-govde b{
  color:var(--card-primary);
}
.ytg-country-card .sehir-gorsel{
  border-radius:18px 18px 10px 18px!important;
}
.ytg-city-card .sehir-gorsel{
  border-radius:18px!important;
}

/* Büyük çerçeveli çağrılar daha hafif, şeritle aynı hizada. */
.tum-katalog{
  min-height:52px;
  margin-top:13px;
  padding:11px 14px;
  border-color:rgba(var(--theme-primary-rgb),.18);
  border-radius:16px;
  color:var(--theme-primary-dark);
  background:linear-gradient(135deg,rgba(var(--theme-primary-rgb),.025),#fff 52%,rgba(var(--theme-secondary-rgb),.025));
  box-shadow:none;
}
.tum-katalog:hover{
  border-color:var(--theme-primary);
  color:var(--theme-primary-dark);
  background:linear-gradient(135deg,var(--theme-soft),#fff,var(--theme-soft-2));
  box-shadow:0 8px 20px rgba(var(--theme-primary-rgb),.09);
}
.tum-katalog em{
  background:rgba(var(--theme-primary-rgb),.07);
}

/* Ürün fotoğrafları da şehir vitrinleriyle aynı modern ritmi kullanır. */
.urun-kart{
  flex-basis:clamp(202px,21vw,226px);
}
.urun-gorsel{
  border-radius:18px 18px 9px 18px;
  box-shadow:0 1px 0 rgba(16,42,67,.035),0 8px 22px rgba(16,42,67,.065);
}
.urun-govde{
  gap:5px;
  padding-top:9px;
}
.urun-baslik{
  font-size:13.75px;
  line-height:1.28;
  letter-spacing:-.012em;
}

@media(max-width:620px){
  .content-section{
    width:calc(100% - 28px);
    padding-block:31px;
  }
  .content-section.compact{
    padding-top:16px;
  }
  #sehirler{
    padding-top:32px;
    padding-bottom:23px;
  }
  #ulkeler{
    padding-top:25px;
    padding-bottom:34px;
  }
  .section-heading{
    margin-bottom:14px;
  }
  .section-heading h2{
    margin-top:3px;
    font-size:clamp(28px,8.2vw,34px);
    line-height:1.02;
  }
  .kicker{
    font-size:9.5px;
    letter-spacing:.14em;
  }
  .section-heading>div::after{
    width:48px;
    height:3px;
    margin-top:10px;
  }
  .serit{
    gap:13px;
    margin-inline:-14px;
    padding-inline:14px;
    padding-bottom:9px;
  }
  .sehir-kart{
    flex-basis:calc((100vw - 49px)/2);
    min-width:160px;
    max-width:190px;
  }
  .sehir-gorsel{
    aspect-ratio:1.48/1;
    border-radius:16px;
  }
  .sehir-govde{
    min-height:56px;
    padding-top:9px;
  }
  .sehir-govde b{
    font-size:14px;
  }
  .sehir-alt em,
  .ulke-kart .sehir-alt{
    font-size:10.5px;
  }
  .ytg-city-card .sehir-gorsel::after,
  .ytg-country-card .sehir-gorsel::after{
    left:10px;
    right:10px;
    bottom:8px;
    height:3px;
  }
  .tum-katalog{
    min-height:50px;
    margin-top:11px;
    padding-block:10px;
    font-size:12.5px;
  }
  .urun-kart{
    flex-basis:calc((100vw - 49px)/2);
    min-width:164px;
    max-width:194px;
  }
}

@media(max-width:370px){
  .sehir-kart{min-width:154px}
  .urun-kart{min-width:158px}
}


/* ═══════════════════════════════════════════════════════════
   TEMİZ 123 — saf beyaz zemin + sabit marka logosu
   ═══════════════════════════════════════════════════════════

   Şehir paleti yalnızca vurgu, çizgi, buton ve aktif durumlarda görünür.
   Sayfa zemini, hero, kart yüzeyleri ve marka logosu destinasyondan bağımsızdır.
*/
:root{
  --brand-primary:#12B8B2;
  --brand-primary-dark:#087E86;
  --brand-secondary:#168FD3;
  --brand-primary-rgb:18,184,178;
  --brand-secondary-rgb:22,143,211;
}

/* Eski turuncu değişkenini aktif destinasyonun ana rengine bağla.
   Böylece taban CSS'teki eski vurgu kalıntıları turuncu olarak geri dönmez. */
:root,
html[data-ytg-theme]{
  --orange:var(--theme-primary);
  --orange-soft:var(--theme-secondary);
  --hero:#fff;
}

/* Ana tuval her sayfada saf beyazdır. */
html,
body{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
}

body::before,
body::after{
  background-image:none!important;
}

/* ═══ `.hero` BU LİSTEDEN ÇIKARILDI ═══
   Bu kural "saf beyaz zemin" için yazılmıştı ve `!important` ile
   tüm arka plan görsellerini siliyordu. Kahraman görseli eklenince
   onu da sildi — görsel dosyası sunucuda vardı (200 dönüyordu) ama
   ekranda hiç görünmedi.
   Kahramanın kendi kuralı dosyanın sonunda. */
.site-header,
.mobile-menu,
.content-section,
.urun-sayfa,
.plan-sayfa,
.rota-sayfa,
footer{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
}

.hero::before,
.hero::after{
  display:none!important;
  content:none!important;
}

.site-header{
  border-bottom-color:rgba(var(--brand-primary-rgb),.13)!important;
  box-shadow:0 3px 16px rgba(16,42,67,.035)!important;
}

/* Logo ve marka yazısı şehir temasından etkilenmez. */
.brand-mark,
.footer-brand .brand-mark{
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))!important;
  box-shadow:0 8px 20px rgba(var(--brand-primary-rgb),.22)!important;
}

.brand>span:last-child>span,
.footer-brand>span:last-child>span{
  color:var(--brand-primary)!important;
}

/* Arama ve hızlı seçim alanları beyaz yüzeyde kalır. */
.search-form,
.search-form label,
.search-form label:has(input:focus-visible),
.search-form label:has(select:focus-visible),
.destination-selector,
.destination-selector:focus-within,
.katalog-suz input,
.filtre-alan select,
.filtre-alan input#sehirFiltre,
.rota-alan input,
.rota-alan select,
.elifa-composer textarea{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
}

.search-form{
  border-color:rgba(var(--theme-primary-rgb),.20)!important;
  box-shadow:0 14px 34px rgba(16,42,67,.09),0 0 0 4px #fff!important;
}

.destination-selector{
  border-color:rgba(var(--theme-primary-rgb),.17)!important;
  box-shadow:0 5px 14px rgba(16,42,67,.035)!important;
}

.destination-selector:focus-within{
  border-color:var(--theme-primary)!important;
  box-shadow:0 0 0 3px rgba(var(--theme-primary-rgb),.09)!important;
}

/* İçerik yüzeyleri: renkli dolgu yok, yalnız temiz çizgi ve şehir vurgusu. */
.filtreler,
.urun-bilgiler,
.fiyat-kutu,
.rota-form,
.plan-hazirlik,
.plan-toplam,
.rota-oneri,
.rota-secilenler,
.konum-davet,
.yorum-derleme,
.puan-dagilim,
.ortak-kart,
.liste-onemli,
.urun-hazirlik,
.rota-bekle,
.rota-hata,
.durak-kutu,
.plan-not-uyari,
.karsilastirma thead th,
.elifa-panel,
.elifa-panel:not(.tam){
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
}

.filtreler,
.urun-bilgiler,
.fiyat-kutu,
.rota-form,
.plan-hazirlik,
.plan-toplam,
.rota-oneri,
.rota-secilenler,
.konum-davet{
  border-color:rgba(var(--theme-primary-rgb),.16)!important;
  box-shadow:none!important;
}

.sayac,
.plan-rozet,
.etiket,
.saglayici-rozet,
.tum-katalog,
.daha,
.yorum-ac,
.temizle,
.oneri-ekle,
.plan-ikincil,
.tarih-kart,
.etiket-dugme,
.favori-dugme,
.elifa-baglam-dugme{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
}

.tarih-kart[aria-pressed="true"],
.etiket-dugme[aria-pressed="true"],
.rota-secenek.secili,
.favori-dugme.dolu,
.sehir-kart[aria-pressed="true"]{
  border-color:var(--theme-primary)!important;
  color:var(--theme-primary-dark)!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(var(--theme-primary-rgb),.08)!important;
}

/* İş ortağı ve şehir/ülke vitrinleri de doğrudan beyaz tuval üzerinde akar. */
.ortak-kutular,
.ortak-kutu,
.ortak-kutu:hover,
.ortak-kutu:focus-visible,
.urun-kart,
.sehir-kart,
.urun-govde,
.sehir-govde{
  background:transparent!important;
  background-image:none!important;
}

.ortak-kutu + .ortak-kutu{
  border-left-color:rgba(var(--brand-primary-rgb),.18)!important;
}

/* Footer eski gri/renkli banttan çıkar, marka sayfasının devamı olur. */
footer{
  border-top-color:rgba(var(--brand-primary-rgb),.12)!important;
}

/* Şehir renkleri sadece kontrollü vurgularda görünür. */
.eyebrow,
.kicker,
.destination-context,
.destination-selector>span,
.ortak-kutu-adet,
.ortak-kutu-ok,
.sehir-ok,
.tum-katalog,
footer a:hover{
  color:var(--theme-primary-dark)!important;
}

.section-heading h2::after,
.plan-ust h1::after,
.urun-h1::after,
.section-heading>div::after{
  background:linear-gradient(90deg,var(--theme-primary),var(--theme-secondary))!important;
}

/* Tarayıcı içindeki sabit Elifa alanı da beyaz kalır. */
.elifa-panel{
  border-color:rgba(var(--brand-primary-rgb),.18)!important;
  box-shadow:0 14px 34px rgba(16,42,67,.13),0 0 0 1px rgba(var(--brand-primary-rgb),.025)!important;
}

.elifa-composer textarea::placeholder,
.elifa-composer textarea::-webkit-input-placeholder{
  color:var(--brand-primary)!important;
  opacity:.48!important;
}

@media(max-width:620px){
  html,
  body,
  .hero,
  footer{
    background:#fff!important;
    background-image:none!important;
  }

  .search-form{
    box-shadow:0 11px 28px rgba(16,42,67,.085),0 0 0 3px #fff!important;
  }
}

/* Ana slogan ve marka işaretleri de sabit marka rengindedir;
   şehir paleti bunları eski turuncu/kırmızı görünüme döndüremez. */
h1 em,
.search-icon,
.elifa-mark{
  color:var(--brand-primary)!important;
}

/* ═══════════════════════════════════════════════════════════
   SEÇİCİ SİMGELERİ

   Dört kutu (ülke / şehir / bölge / aktivite) yalnızca yazıdan
   ibaretti ve dördü birbirine benziyordu — göz hangisinin ne
   olduğunu okumadan ayırt edemiyordu.

   Simge, okumadan önce tanımayı sağlıyor. `currentColor` ile
   yazının rengini alıyor, yani şehir temasında da uyumlu kalıyor.

   Izgara düzeni: simge solda sabit, yazı sağda. Simge küçülmüyor
   (`flex-shrink:0`) çünkü uzun ülke adında ezilip lekeye dönüyordu.
   ═══════════════════════════════════════════════════════════ */
.destination-selector{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:9px;
  align-items:center;
}
.secici-ikon{
  grid-row:1 / span 2;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  color:var(--theme-primary-dark,#1d7f82);
  opacity:.85;
}
.secici-ikon svg{width:19px;height:19px;display:block}
/* Etiket ve seçim ikinci sütuna geçiyor. */
.destination-selector>span{grid-column:2}
.destination-selector select{grid-column:2}

@media(max-width:620px){
  .secici-ikon{width:22px;height:22px}
  .secici-ikon svg{width:17px;height:17px}
  .destination-selector{column-gap:7px}
}

/* ═══════════════════════════════════════════════════════════
   MARKA İŞARETİ KÜÇÜLDÜ

   Logo 38px'ti ve üst çubuğun yarısını kaplıyordu; yanındaki dil
   ve para seçicileriyle yarışıyordu. Marka güveni boyutla değil
   tutarlılıkla kuruluyor — küçük ve net bir işaret, büyük ve
   baskın olandan daha profesyonel duruyor.

   Yazı da bir tık küçüldü ki işaretle oranı korunsun.
   ═══════════════════════════════════════════════════════════ */
.brand-mark{width:32px;height:32px;flex-basis:32px;border-radius:10px}
.brand-mark img{width:23px;height:23px}
.brand{font-size:19px;gap:9px}

@media(max-width:620px){
  .brand-mark{width:29px;height:29px;flex-basis:29px;border-radius:9px}
  .brand-mark img{width:21px;height:21px}
  .brand{font-size:17px;gap:8px}
}

/* ═══════════════════════════════════════════════════════════
   BAŞLIKTA TURUNCU VURGU

   Site turkuaza döndü ve turuncu neredeyse tamamen kayboldu.
   Sorun şu: Tiqets de turkuaz. Tamamen aynı renge geçmek, kendi
   markamızı tedarikçininkiyle karıştırılabilir hale getiriyor.

   Bu ince çizgi turuncuyu vurgu olarak geri getiriyor: kimlik
   korunuyor, turkuaz baskın kalıyor.

   `::after` kullanılıyor — metne dokunmuyor, yani çeviri ve
   ekran okuyucu etkilenmiyor.
   ═══════════════════════════════════════════════════════════ */
.hero h1 em{position:relative;display:inline-block}
/* Başlıkta alt çizgi DENENDI VE KALDIRILDI.
   Playfair'in uzun kuyrukları (g, y) çizgiyle çakışıyordu ve
   negatife çekince de başlıktan kopuk duruyordu. Marka vurgusu
   için daha iyi yerler var: düğmeler, rozetler, favori kalbi. */
.hero h1 em{position:relative;display:inline-block}

/* ═══════════════════════════════════════════════════════════
   KONUM ŞERİDİ

   Eskiden sayfanın çok aşağısında, başlıklı ve iki satır
   açıklamalı büyük bir kutuydu. İki sorunu vardı:
     1. Kullanıcı oraya inene kadar zaten şehir seçmişti — en
        kolay yol en geç görünüyordu
     2. Tek bir düğme için üç blok yer harcıyordu

   Şimdi seçicilerin hemen altında tek satır: simge, kısa metin,
   düğme. Gizlilik notu kalktı DEĞİL — küçülüp alt satıra indi.
   Söylemek zorunda olduğumuz şeyi kısaltıp saklamıyoruz.
   ═══════════════════════════════════════════════════════════ */
.konum-serit{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  margin-top:10px;
  padding:9px 12px;
  border:1px solid rgba(var(--theme-primary-rgb),.16);
  border-radius:14px;
  background:rgba(255,255,255,.72);
}
.konum-serit[hidden]{display:none}
.konum-serit-ikon{
  display:grid;place-items:center;
  width:26px;height:26px;
  color:var(--theme-primary-dark,#1d7f82);
}
.konum-serit-ikon svg{width:19px;height:19px;display:block}
.konum-serit-metin{
  margin:0;
  color:var(--ink);
  font-size:12px;
  font-weight:750;
  line-height:1.3;
}
.konum-serit-dugme{
  flex:0 0 auto;
  height:32px;
  padding:0 14px;
  border:0;
  border-radius:11px;
  background:linear-gradient(135deg,var(--theme-primary-dark,#1d8f93),var(--theme-primary,#48c2c5));
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}
.konum-serit-dugme:hover{filter:brightness(1.06)}
.konum-serit-dugme:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Gizlilik notu üç sütunun altına tam genişlikte geçiyor. */
.konum-serit-not{
  grid-column:1 / -1;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}

@media(max-width:520px){
  /* Dar ekranda düğme alta iniyor: yan yana sıkışıp metni kırpıyordu. */
  .konum-serit{grid-template-columns:auto minmax(0,1fr)}
  .konum-serit-dugme{grid-column:1 / -1;width:100%;height:36px;margin-top:2px}
  .konum-serit-not{font-size:10px}
}

/* ═══════════════════════════════════════════════════════════
   ÜST ÇUBUK — DAR EKRANDA NEFES

   Ekran görüntüsünde marka yazısı dil kutusuna DEĞİYORDU: logo,
   "Türkçe", kalp, "EUR €" ve menü hepsi tek satıra sığmaya
   çalışıyordu.

   Üç değişiklik:
     1. Marka yazısı kısalmıyor ama etrafındaki boşluk garanti
        ediliyor (`margin-right`) — çakışma önce burada oluyordu.
     2. Seçici kutuları daralıyor: dolgu ve yazı küçülüyor.
     3. Marka işareti daralamaz (`flex-shrink:0`) ama YAZI
        daralabilir; sıkışınca üç nokta ile kısalıyor, üst üste
        binmiyor.

   Seçenek metinleri kısaltılmadı: "TR" yazmak kullanıcının hangi
   dilde olduğunu belirsizleştirirdi. Yer kazanmanın bedeli
   anlaşılırlık olmamalı.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:620px){
  .site-header{gap:8px;padding:0 12px}
  /*
   * ═══ MARKA ADI KIRPILMIYOR ═══
   * Önceki denememde `text-overflow:ellipsis` koydum ve ekranda
   * "YourTou…" göründü — marka adının kırpılması kabul edilemez.
   * Kullanıcı sitenin adını okuyamıyor.
   *
   * Doğru çözüm marka yazısını daraltmak değil, YANINDAKİLERİ
   * daraltmak. Yazı tam görünüyor, seçici kutuları küçülüyor.
   */
  .brand{min-width:0;margin-right:4px;flex:0 0 auto}
  .brand>span:last-child{white-space:nowrap}
  .dil-secici select,.para-secici select{
    height:31px;
    font-size:10.5px;
    padding-right:22px;
    padding-left:9px;
  }
  .dil-secici,.para-secici{flex:0 0 auto}
}

@media(max-width:400px){
  /*
   * Çok dar ekranda marka KÜÇÜLÜYOR, gizlenmiyor. Menü ve
   * seçiciler daha da daralarak yer açıyor.
   */
  .brand{font-size:15px;gap:6px;margin-right:2px}
  .brand-mark{width:26px;height:26px;flex-basis:26px;border-radius:8px}
  .brand-mark img{width:19px;height:19px}
  .dil-secici select,.para-secici select{font-size:10px;padding-right:20px;padding-left:7px}
}

/* ═══════════════════════════════════════════════════════════
   MARKA ADI RENGİ

   "TourGPT" kısmı marka işaretinin kutusundaki maviyi alıyor:
   #12B8B2 → #168FD3 gradyanı. Böylece yazı ve simge aynı ailenin
   parçası gibi duruyor; şu ana kadar ikisi ayrı renkteydi.

   Gradyan metne `background-clip` ile uygulanıyor. Yedeği var:
   destekleyemeyen tarayıcıda düz mavi kalıyor, yani okunaksız
   olmuyor.
   ═══════════════════════════════════════════════════════════ */
.brand>span:last-child>span{
  color:var(--brand-secondary,#168FD3);
  background:linear-gradient(120deg,var(--brand-primary,#12B8B2),var(--brand-secondary,#168FD3));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* `background-clip:text` desteklenmezse yazı kaybolmasın. */
@supports not (background-clip:text){
  .brand>span:last-child>span{
    -webkit-text-fill-color:currentColor;
    background:none;
    color:var(--brand-secondary,#168FD3);
  }
}

/* ═══════════════════════════════════════════════════════════
   TELEFONDA OKUNAKLILIK

   Ekran görüntüsünde başlık ekranın yarısını kaplıyordu ve arama
   kutusunu aşağı itiyordu. Kullanıcının ilk gördüğü şey arama
   olmalı, slogan değil.

   Başlık küçüldü, satır aralığı sıkıldı, üst boşluk azaldı.
   Okunaklılık artıyor çünkü daha az kaydırma gerekiyor.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:620px){
  .hero h1{font-size:clamp(27px,7.4vw,34px);line-height:1.08;margin:6px 0 14px}
  .hero .kicker{font-size:10px;letter-spacing:.14em;margin-bottom:4px}
  .destination-context{font-size:12.5px;margin:12px 0 8px}
  .destination-selector{padding:7px 9px 8px}
  .destination-selector>span{font-size:8.5px}
  .destination-selector select{font-size:11px;height:23px}
  /* Sağlayıcı kutuları: sayı büyük kalsın, açıklama küçülsün. */
  .ortak-kutu-adet{font-size:14px}
}

/* ═══════════════════════════════════════════════════════════
   ÜÇ SEÇİCİ YAN YANA

   Dört kutu 2×2 ızgarada duruyordu ve dördüncüsü ("Bölge")
   kaldırıldı: katalogda bölge hiyerarşisi yok — Alanya ve Side,
   Antalya'nın altında değil kardeşi. Var olmayan bir kırılımı
   seçtirmek kullanıcıyı boş listeye götürüyordu.

   Üçü tek satırda: ülke → şehir → aktivite. Doğal daralma sırası
   da bu, soldan sağa.

   Dar telefonda tek satırda üç kutu okunmaz hale geliyor (her biri
   ~100px), bu yüzden orada alt alta diziliyorlar.
   ═══════════════════════════════════════════════════════════ */
.destination-selectors{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ═══ DAR EKRANDA DA YAN YANA ═══
   Alt alta dizmek üç kutuyu ekranın yarısına yayıyordu ve arama
   kutusunu aşağı itiyordu. Kullanıcı üç seçimi BİRLİKTE görmeli:
   ülke → şehir → aktivite bir akış, üç ayrı adım değil.

   360px ekranda her kutuya ~105px düşüyor. Yatay düzen (simge |
   yazı) o genişliğe sığmıyor, o yüzden kutu içi DİKEY oluyor:
   simge üstte, etiket altında, seçim en altta. Kutular yan yana
   kalıyor, içerik alt alta geçiyor. */
@media(max-width:560px){
  .destination-selectors{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}

  .destination-selector{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto;
    justify-items:center;
    text-align:center;
    padding:9px 6px 8px;
    border-radius:12px;
    row-gap:1px;
  }
  /* Simge artık kendi satırında, iki satır kaplamıyor. */
  .secici-ikon{grid-row:auto;width:22px;height:22px}
  .secici-ikon svg{width:18px;height:18px}
  .destination-selector>span{grid-column:1;font-size:8px;letter-spacing:.06em}
  .destination-selector select{
    grid-column:1;
    height:auto;
    padding:0;
    font-size:10.5px;
    line-height:1.25;
    text-align:center;
    /* Ok işareti kalkıyor: 105px'te yer yok ve kutunun kendisi
       zaten tıklanabilir olduğunu gösteriyor. */
    text-align-last:center;
  }
}

@media(max-width:380px){
  /* Çok dar ekranda etiket gizleniyor; simge zaten ne olduğunu
     söylüyor ve seçim metni ("Ülke seç") tek başına anlaşılır. */
  .destination-selector>span{display:none}
  .destination-selector{padding:8px 4px 7px}
  .destination-selector select{font-size:10px}
}

/* Para birimi notu: bilgi, uyarı değil. Soluk ve küçük. */
.para-notu{
  margin:8px 0 0;
  padding:7px 11px;
  border-radius:11px;
  background:rgba(var(--theme-primary-rgb),.06);
  color:var(--muted);
  font-size:10.5px;
  line-height:1.5;
}
.para-notu[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════
   RENK ORANI — 70 / 20 / 7 / 3

   Sayfanın canlı ama sakin durmasını sağlayan kural bu:

     %70  BEYAZ      zemin, kartlar, boşluk
     %20  TURKUAZ    birincil eylemler, simgeler, vurgular
     %7   LACİVERT   yazı (--ink)
     %3   TURUNCU    yalnızca dikkat çekmesi gereken tek şey

   Turuncunun az olması onu güçlü kılıyor. Her yerde turuncu
   kullanmak "hiçbir yerde turuncu yok" ile aynı sonucu verir:
   göz hiçbirini seçmez.

   Bu yüzden turuncu tek bir yerde dolgu olarak DEĞİL, çerçeve ve
   yazı olarak kullanılıyor — kapladığı alan küçük kalıyor ama
   göze ilk çarpan o oluyor.
   ═══════════════════════════════════════════════════════════ */

/* Beyaz üstünde marka turuncusu 2,96 kontrast veriyor — okunmuyor.
   Yazı için koyu tonu var: #cc3c0e, beyazda 4,98. Marka rengi
   çerçevede ve dolgularda yaşamaya devam ediyor. */
:root{--orange-yazi:#cc3c0e}

/* ═══ GENİŞ ÇAĞRI BARLARI ═══
   "Yakınındaki aktiviteleri gör" ve "Kendi rotanı kur" aynı
   biçimde: solda simge, ortada iki satır metin, sağda ok.

   İkisi de "tek tıkla bir yere git" eylemi; aynı görünmeleri
   kullanıcıya aynı ağırlıkta olduklarını söylüyor. Biri küçük
   şerit biri koca bar olunca, küçük olan sayfada kayboluyordu. */
.genis-cagri{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  width:100%;
  margin-top:10px;
  padding:14px 18px;
  border:0;
  border-radius:16px;
  font:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:.16s;
}
.genis-cagri[hidden]{display:none}
.genis-cagri-ikon{display:grid;place-items:center;width:30px;height:30px}
.genis-cagri-ikon svg{width:23px;height:23px;display:block}
.genis-cagri-metin{display:flex;flex-direction:column;gap:2px;min-width:0}
.genis-cagri-metin b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.genis-cagri-metin span{font-size:11.5px;font-weight:600;line-height:1.4;opacity:.85}
.genis-cagri-ok{font-size:19px;font-weight:700;flex:0 0 auto}

/* ── Konum: TURKUAZ (%20 payından) ── */
.konum-cagri{
  background:linear-gradient(135deg,var(--theme-primary-dark,#1d8f93),var(--theme-primary,#48c2c5));
  color:#fff;
}
.konum-cagri:hover{filter:brightness(1.06)}
.konum-cagri:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.konum-cagri:disabled{opacity:.7;cursor:default}

/* ── Rota: BEYAZ zemin, TURUNCU çerçeve ve yazı (%3 payı) ──
   Tek turuncu öğe bu. Dolgu değil çerçeve olduğu için kapladığı
   alan küçük, ama beyaz denizde tek renkli çerçeve olduğu için
   göz doğrudan buraya gidiyor. */

.rota-cagri .rota-cagri-alt,
.rota-cagri-metin span{color:var(--orange-yazi);opacity:.82}
/* Eski hover kuralı kaldırıldı; yenisi dosyanın sonunda. */


@media(max-width:620px){
  .genis-cagri{padding:12px 14px;gap:11px;border-radius:14px}
  .genis-cagri-ikon{width:26px;height:26px}
  .genis-cagri-ikon svg{width:20px;height:20px}
  .genis-cagri-metin b{font-size:14px}
  .genis-cagri-metin span{font-size:10.5px}
}

/* ═══════════════════════════════════════════════════════════
   AÇIK TURUNCU + GEÇİŞLİ YAZI

   İstenen: turuncu açılsın ve "TourGPT"deki gibi geçişli olsun.

   ═══ NEDEN BEYAZA GEÇMİYOR ═══
   Beyaz zeminde beyaza giden bir yazı, geçişin sonunda görünmez
   oluyor — harflerin yarısı kayboluyor. "TourGPT" geçişi de
   aslında beyaza gitmiyor: turkuazdan maviye gidiyor, iki ucu da
   renkli.

   Aynı mantık turuncuda: koyu turuncudan açık turuncuya. Geçiş
   hissi aynı, iki uç da okunur.

   Ölçüldü (beyaz zeminde):
     #b8350c  5,91  ✓
     #e04412  4,20  ✓ büyük kalın yazı için
   Her iki uç da eşiği geçiyor.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* Marka turuncusu açıldı: çerçeve ve simgelerde bu kullanılıyor. */
  --orange:#ff8a5c;
  /* Yazı için koyu uç — beyaz zeminde okunması şart. */
  --orange-yazi:#b8350c;
  --orange-yazi-acik:#e04412;
}

/* Geçişli turuncu yazı. Desteklenmeyen tarayıcıda düz koyu
   turuncuya düşüyor — yazı kaybolmuyor. */
.turuncu-gecis{
  color:var(--marka-turuncu-yazi);
  background:linear-gradient(120deg,var(--marka-turuncu-yazi),var(--marka-turuncu-koyu));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  .turuncu-gecis{-webkit-text-fill-color:currentColor;background:none;color:var(--marka-turuncu-yazi)}
}

/* ═══ KONUM ÇAĞRISI ═══
   Turkuazdan maviye giden dolgu — markanın kendi geçişi. Turuncu
   yalnızca "Kendi başına keşfet"te kalıyor; iki turuncu öğe
   yan yana durunca ikisi de vurgu olmaktan çıkıyordu.

   Genişlik "Kendi başına keşfet" ile aynı (tam satır) ama yükseklik
   daha az: ikisi eşit ağırlıkta değil. Rota kurmak asıl eylem,
   konum almak kısa yol. */
.konum-cagri{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  margin-top:10px;
  padding:10px 16px;
  border:0;
  border-radius:13px;
  background:linear-gradient(120deg,var(--brand-primary,#12B8B2),var(--brand-secondary,#168FD3));
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:.16s;
}
.konum-cagri[hidden]{display:none}
.konum-cagri-ikon{display:grid;place-items:center;width:19px;height:19px;color:#fff}
.konum-cagri-ikon svg{width:17px;height:17px;display:block}
.konum-cagri:hover{filter:brightness(1.07)}
.konum-cagri:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.konum-cagri:disabled{opacity:.65;cursor:default}

/* Gizlilik notu: başlığın altında, küçük. */
.destination-gizlilik{
  margin:2px 0 0;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.5;
  text-align:center;
}

/* ═══ WHATSAPP — KOYU MARKA YEŞİLİ ═══
   Parlak #25D366 beyaz yazıyla 1,98 kontrast veriyor: okunmuyor
   ve ekranda çiğ duruyor. WhatsApp'ın kendi koyu yeşili #128C7E
   ile 4,14 — hem okunur hem sakin. */
.plan-wa{background:#128C7E;color:#fff;box-shadow:0 4px 12px rgba(18,140,126,.22)}
.plan-wa:hover{background:#0F7A6C}

/* ═══ PLAN DÜĞMELERİ DENGELİ ═══
   WhatsApp dolgulu ve büyük, diğerleri ince çerçeveli ve küçüktü;
   alt alta gelince kırık duruyordu. Hepsi aynı yükseklik ve
   dolguda, yalnızca renkleri farklı: birincil olan dolu, diğerleri
   çerçeveli. */
.plan-eylem{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.plan-eylem .plan-dugme{
  flex:1 1 auto;
  min-height:40px;
  padding:0 15px;
  justify-content:center;
  font-size:12px;
  white-space:nowrap;
}
.plan-ikincil{
  background:#fff;
  border:1.5px solid var(--line);
  color:var(--ink);
}
.plan-ikincil:hover{border-color:var(--theme-primary,#48c2c5)}

@media(max-width:520px){
  /* Dar ekranda ikişerli: dört düğme alt alta dizilince sayfa
     düğme listesine dönüyordu. */
  .plan-eylem .plan-dugme{flex:1 1 calc(50% - 4px);min-width:0}
}


/* ═══ TURUNCU YAZI VARSA ÇERÇEVE VE SİMGE DE TURUNCU ═══
   Kutunun rengi tek parça olmalı: turuncu yazının yanında gri bir
   çerçeve ve turkuaz bir simge, kutuyu üç renkli bir yamaya
   çeviriyordu. */


/* Rota sayfasındaki seçici alanı: ana sayfayla aynı ızgara,
   etrafında form alanı çerçevesi yok — kutular kendi çerçevelerini
   zaten taşıyor. */
.rota-secici-alan{display:block}
.rota-alan-etiket{
  display:block;
  margin-bottom:7px;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
}
.rota-serbest{display:block;margin-top:10px}
.rota-serbest>span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:10.5px;
  font-weight:650;
}


/* ═══════════════════════════════════════════════════════════
   KENDİ BAŞINA KEŞFET — TEK YETKİLİ KURAL

   Bu düğmenin biçemi dört ayrı yere dağılmıştı ve birbirini
   eziyordu: bir yerde turkuaz dolgu, başka yerde beyaz zemin,
   üçüncü yerde çerçeve rengi. Ekranda turkuaz çerçeve ve turkuaz
   simge görünüyordu — turuncu yalnızca yazıda kalmıştı.

   Eskiler silindi, kural burada tek yerde ve `!important` ile
   korunuyor. Tema motoru (`destination-theme.js`) şehir rengini
   sayfaya basıyor; bu düğme bilinçli olarak onun DIŞINDA kalıyor,
   çünkü %3'lük turuncu payının tamamı burada.
   ═══════════════════════════════════════════════════════════ */
/* ═══ AYRI DEĞİŞKEN ADI — TEMA MOTORU DOKUNAMASIN ═══
   `--orange` iki yerde tema rengine bağlanmış:
     satır 517:  --orange:var(--theme-accent)
     satır 998:  --orange:var(--theme-primary)
   ve ikisi de `html[data-ytg-theme]` seçicisi altında. O seçici
   `:root`tan DAHA ÖZGÜL, yani sırayla kazanamıyorum — kuralım
   dosyanın en sonunda olsa bile eziliyordu. Ekranda turkuaz çerçeve
   ve turkuaz simge görünmesinin sebebi buydu.

   Özgüllük yarışına girmek yerine ayrı bir ad: `--marka-turuncu`
   tema motorunun bilmediği bir değişken, kimse ezemiyor. */
:root,
html[data-ytg-theme]{
  /* Beyaza çalan açık turuncu — çerçeve ve simge için. */
  --marka-turuncu:#ff9d78;
  /* Yazı koyu kalmalı: açık ton beyaz zeminde okunmuyor. */
  --marka-turuncu-yazi:#b8350c;
  --marka-turuncu-koyu:#e04412;
}

/* Yapısal biçem: hizalama ve genişlik. Renkler dosyanın sonundaki
   Viator bloğunda. */
.rota-cagri{
  display:flex!important;
  align-items:center;
  justify-content:center!important;
  width:min(520px,100%);
  margin:12px auto 0;
  border-radius:15px;
  text-decoration:none;
  transition:.16s;
}
.rota-cagri .rota-cagri-metin{align-items:center;text-align:center;gap:1px}
.rota-cagri .rota-cagri-ikon{margin-right:0;flex:0 0 auto}
.rota-cagri .rota-cagri-ok{flex:0 0 auto}

/* ═══ ÜCRETSİZ DURAK ═══
   Kart yapısı biletli durakla AYNI: bu bir dolgu değil, planın
   gerçek durağı. Tek fark satış satırının olmaması. */
.durak-ucretsiz-satir{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
  margin-top:11px;padding:10px 14px;
  border:1px solid rgba(var(--theme-primary-rgb),.2);
  border-radius:13px;
  background:rgba(var(--theme-primary-rgb),.05);
}
.durak-ucretsiz-etiket{color:var(--theme-primary-dark,#1d7f82);font-size:12px;font-weight:800}
.durak-ucretsiz-harita{
  color:var(--theme-primary-dark,#1d7f82);
  font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;
}
.durak-ucretsiz-harita:hover{text-decoration:underline}

/* ═══ ARAÇ KİRALAMA BAĞLANTISI ═══
   Plan durakları kadar baskın değil: bu bir öneri, planın parçası
   değil. Sade çerçeve, dolgu yok. */
.plan-arac{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:12px;
  margin-top:14px;padding:13px 16px;
  border:1px solid var(--line);border-radius:14px;
  background:#fff;text-decoration:none;transition:.16s;
}
.plan-arac:hover{border-color:var(--theme-primary,#48c2c5);background:#fbfefe}
/* Ortak logosu: yükseklik sabit, genişlik oranla. Tiqets ve
   WeGoTrip kutularıyla aynı ölçek ailesi. */
.plan-arac-logo{height:22px;width:auto;display:block;flex:0 0 auto}
@media(max-width:520px){.plan-arac-logo{height:19px}}
.plan-arac-metin{display:flex;flex-direction:column;gap:2px;min-width:0}
.plan-arac-metin b{color:var(--ink);font-size:13.5px;font-weight:800}
.plan-arac-metin span{color:var(--muted);font-size:11px;line-height:1.45}
.plan-arac-ok{color:var(--theme-primary-dark,#1d7f82);font-size:17px;font-weight:700}

/* ═══ ORTAK LOGO ŞERİDİ ═══
   Başlığın altında, sade. Logolar aynı YÜKSEKLİKTE değil aynı
   GÖRSEL AĞIRLIKTA: her markanın oranı farklı, tek tek ayarlandı.
   Hepsini 22px yapmak Tiqets'i devleştirip WeGoTrip'i ezerdi. */
.rota-ortaklar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);
}
.rota-ortaklar-not{color:var(--muted);font-size:11.5px;font-weight:650}
.rota-ortaklar-logolar{display:flex;align-items:center;gap:16px}
.rota-ortaklar-logolar img{width:auto;height:19px;max-width:96px;object-fit:contain;display:block;opacity:.85}
.rota-ortaklar-logolar img[alt="Tiqets"]{height:17px}
.rota-ortaklar-logolar img[alt="WeGoTrip"]{height:19px}
.rota-ortaklar-logolar img[alt="DiscoverCars"]{height:21px}
.rota-ortaklar-logolar img[alt="Klook"]{height:17px}
.rota-ortaklar-baglanti{
  margin-left:auto;color:var(--theme-primary-dark,#1d7f82);
  font-size:11.5px;font-weight:800;text-decoration:none;white-space:nowrap;
}
.rota-ortaklar-baglanti:hover{text-decoration:underline}

@media(max-width:520px){
  .rota-ortaklar{gap:9px}
  .rota-ortaklar-logolar{gap:13px}
  .rota-ortaklar-baglanti{margin-left:0;width:100%}
}

/* ═══ ORTAKLAR SAYFASI ═══ */
.ortaklar-sayfa{max-width:720px;margin:0 auto;padding:24px 18px 56px}
.ortaklar-giris{margin:6px 0 26px;color:var(--muted);font-size:14px;line-height:1.6}
.ortak-kart{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:start;gap:18px;
  margin-bottom:14px;padding:18px;
  border:1px solid var(--line);border-radius:16px;background:#fff;
}
.ortak-kart-logo{width:auto;height:29px;max-width:110px;object-fit:contain;display:block}
.ortak-kart-logo[alt="Tiqets"]{height:26px}
.ortak-kart-logo[alt="WeGoTrip"]{height:29px}
.ortak-kart-logo[alt="DiscoverCars"]{height:32px}
.ortak-kart-logo[alt="Klook"]{height:26px}
.ortak-kart h2{margin:0 0 5px;font-size:17px;letter-spacing:-.01em}
.ortak-kart p{margin:0 0 8px;color:var(--muted);font-size:13px;line-height:1.6}
.ortak-kart-rol{
  display:inline-block;padding:3px 10px;border-radius:999px;
  background:rgba(var(--theme-primary-rgb),.09);
  color:var(--theme-primary-dark,#1d7f82);
  font-size:11px;font-weight:800;
}
/* ═══ ORTAKLAR SAYFASINDAKİ KOMİSYON BEYANI ═══
   Kutu YALNIZCA o sayfada. Aynı sınıf adı ana sayfada da
   kullanılıyordu ve kutu oraya da bulaşıp kahraman görselinin
   üstünde beyaz bir blok yaratıyordu (ekran görüntüsü, 2 Ağustos).

   `.ortaklar-sayfa` ile sınırlandırıldı. */
.ortaklar-sayfa .ortaklar-not{
  margin-top:22px;padding:14px 16px;border-radius:13px;
  background:#f7f9fb;color:var(--muted);font-size:11.5px;line-height:1.65;
}

/* ═══ ANA SAYFADAKİ ORTAK NOTU ═══
   Kutusuz, düz yazı — görselin üstünde bir blok gibi durmuyor.
   Turuncu: burada ödeme ve rezervasyonun BİZDE OLMADIĞINI
   söylüyoruz; kullanıcının gözden kaçırmaması gereken bir bilgi.

   Ton `--marka-turuncu-yazi` (#b8350c): açık turuncu bu küçük
   puntoda okunmazdı, ölçülmüştü — beyaz zeminde 5,91. */
.hero .ortaklar-not{
  margin-top:12px!important;
  padding:0!important;
  background:none!important;
  border-radius:0!important;
  color:var(--marka-turuncu-yazi)!important;
  font-size:11.5px;
  font-weight:700;
  line-height:1.45;
  text-align:center;
}
@media(max-width:520px){
  .ortak-kart{grid-template-columns:1fr;gap:12px;padding:16px}
}

/* ═══════════════════════════════════════════════════════════
   KAHRAMAN GÖRSELİ

   Yerleşim ÖLÇÜLEREK belirlendi. Görselin bölgelerinde lacivert
   yazının kontrastı:
     üst orta (gökyüzü)  8,07 — en koyu noktada 4,14  ✓ başlık
     orta (beyaz alan)  13,05                          ✓ en güvenli
     arama hizası        en koyu 1,43                  ✗ çıplak yazı
     alt (polaroidler)   en koyu 1,07                  ✗ kesinlikle

   Bu yüzden başlık ÜST ORTAYA konuyor, arama kutusu kendi beyaz
   kartını taşıdığı için alt bölgede sorun çıkarmıyor, polaroidler
   süs olarak altta kalıyor.

   ═══ YİNE DE KATMAN VAR ═══
   Ölçüm ORTALAMA; görsel ileride değişebilir ve şehir seçimine
   göre başka fotoğraf gelebilir. Üstteki yumuşak beyaz katman,
   hangi fotoğraf gelirse gelsin başlığın okunur kalmasını garanti
   ediyor. Fotoğrafı boğmayacak kadar hafif.
   ═══════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  isolation:isolate;
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.42) 34%,
      rgba(255,255,255,.10) 58%,
      rgba(255,255,255,0) 100%),
    image-set(
      url("/assets/gorsel/kahraman-1600.webp") 2x,
      url("/assets/gorsel/kahraman-1000.webp") 1x)!important;
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.42) 34%,
      rgba(255,255,255,.10) 58%,
      rgba(255,255,255,0) 100%),
    -webkit-image-set(
      url("/assets/gorsel/kahraman-1600.webp") 2x,
      url("/assets/gorsel/kahraman-1000.webp") 1x)!important;
  background-size:cover!important;
  /*
   * Odak ÜST ORTA: dar ekranda kırpılırken gökyüzü ve başlık alanı
   * korunuyor. Merkeze hizalasaydık telefonda polaroidler ortaya
   * gelir, başlık onların üstüne düşerdi.
   */
  background-position:center 22%!important;
  background-repeat:no-repeat!important;
}

/* ═══ TELEFONDA BANT, `cover` DEĞİL ═══
   ÖLÇÜLDÜ (1 Ağustos): 16:9 görseli dikey telefon ekranına `cover`
   ile yaymak, 640px kaynağı 3,1 KAT büyütüyordu. Bulanıklığın
   sebebi sıkıştırma değil BÜYÜTME idi. Ayrıca kompozisyon
   bozuluyordu: yatay bir görselin ortasından dar bir dilim
   alınıyor, kenarlardaki Santorini ve Kolezyum kayboluyordu.

   Doğrusu: görsel KENDİ ORANINDA, sayfanın üstünde bant olarak
   duruyor. Genişliği ekranı dolduruyor, yüksekliği doğal
   (390px ekranda ~220px). Altı beyaza geçiyor ve içerik oradan
   devam ediyor.

   Kaynak da büyütüldü: 1600px dosya kullanılıyor çünkü 390px'lik
   ekran 3x yoğunlukta 1170 gerçek piksel istiyor. 640 yetmiyordu.

   ═══ ASIL ÇÖZÜM AYRI DİKEY GÖRSEL ═══
   Yatay bir görsel dikey ekranı iyi dolduramaz. Telefon için
   DİKEY kompozisyonlu ayrı bir görsel üretilirse `cover`
   kullanılabilir ve tam ekran kaplar. Bu, üretilene kadarki
   dürüst çözüm. */
@media(max-width:620px){
  .hero{
    background-image:
      linear-gradient(180deg,
        rgba(255,255,255,.34) 0%,
        rgba(255,255,255,.10) 42%,
        rgba(255,255,255,.72) 78%,
        #fff 100%),
      url("/assets/gorsel/kahraman-1600.webp")!important;
    /* Genişlik ekranı doldurur, yükseklik doğal kalır. */
    background-size:100% auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    padding-top:18px;
  }
}

/* ═══════════════════════════════════════════════════════════
   MENÜ VE KAHRAMAN DÜZENLEMELERİ
   ═══════════════════════════════════════════════════════════ */

/* Menü fotoğrafın ÜZERİNDEN değil, beyaz başlık çubuğunun
   altından açılıyor. Görselin üstüne binince hem okunmuyor hem
   kompozisyonu bozuyordu. */
.mobile-menu{
  background:#fff!important;
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 28px rgba(16,42,67,.10);
  padding:10px 16px 14px;
}
.mobile-menu a{
  display:block;padding:11px 2px;
  border-bottom:1px solid #f1f4f7;
  color:var(--ink);font-size:14px;font-weight:750;text-decoration:none;
}
.mobile-menu a:last-of-type{border-bottom:0}
.menu-ayrac{display:block;height:1px;margin:8px 0;background:var(--line)}
.menu-para{padding-top:6px}
.menu-para select{width:100%;height:40px}

/* ═══ VIATOR YEŞİLİ ═══
   Logosundan ölçüldü: #186c6c. Beyaz yazıyla 6,18, beyaz zeminde
   de 6,18 — yani hem dolgu hem yazı olarak okunuyor. Turuncudan
   farklı olarak iki yönde de güvenli. */
:root,html[data-ytg-theme]{--viator:#186c6c;--viator-koyu:#125555}

/* "Kendi Başına Keşfet" kutusu inceldi ve Viator yeşiline geçti. */
/* Ölçü ve boşluk; renk aşağıdaki dolgu bloğunda. */
.rota-cagri{
  padding:11px 16px!important;
  gap:10px!important;
  border:1.5px solid var(--viator)!important;
  background:var(--viator)!important;
  box-shadow:0 6px 18px rgba(24,108,108,.24)!important;
}
.rota-cagri .rota-cagri-metin b{font-size:14px!important}

/* Arama kutusu beyaz alana insin: başlık görselin üstünde kalıyor,
   arama onun altında beyaz zeminde. Görsel bandı kısaltmak yerine
   içeriği aşağı kaydırıyoruz — kompozisyon bozulmuyor. */
/* Eski (yetersiz) boşluk kaldırıldı: 4+26=30px, arama bandın
   içinde kalıyordu. Doğru değerler dosyanın sonunda. */

/* ═══════════════════════════════════════════════════════════
   DÜZELTMELER — ekran görüntüsünden (1 Ağustos)
   ═══════════════════════════════════════════════════════════ */

/* ═══ ARAMA KUTUSU GÖRSELİN ALTINA ═══
   ÖLÇÜLDÜ: bant telefonda 219px (390px ekran ÷ 16:9). Başlık ~90px
   kaplıyor, arama 160px civarında başlıyordu — yani hâlâ bandın
   içinde kalıyordu.

   Aramanın bandın ALTINDA başlaması için başlıktan önce ve sonra
   toplam ~135px boşluk gerekiyor. İkiye bölündü: üstte 52px
   (başlık gökyüzünde ortalanıyor), altta 80px (arama beyaza
   iniyor).

   Boşluk boş değil — arkasında görsel duruyor. */
@media(max-width:620px){
  .hero-content{padding-top:26px}
  .search-form{margin-top:112px!important}
  /* "Yakınındaki aktiviteleri gör" başlığı da artık beyaz
     alanda; görselin üstünde okunmuyordu. */
  .destination-guide{margin-top:16px}
}

/* ═══ KEŞFET KUTUSU: DOLGU YEŞİL, YAZI BEYAZ ═══
   Çerçeveli hâli sayfada zayıf kalıyordu. Viator yeşili beyaz
   yazıyla 6,18 kontrast veriyor — dolgu yapmak güvenli. */
.rota-cagri .rota-cagri-metin b,
.rota-cagri .rota-cagri-alt,
.rota-cagri .rota-cagri-metin span,
.rota-cagri .rota-cagri-ikon,
.rota-cagri .rota-cagri-ok{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:none!important;
}
.rota-cagri .rota-cagri-metin span{opacity:.9}
.rota-cagri:hover{
  background:var(--viator-koyu)!important;
  border-color:var(--viator-koyu)!important;
}

/* ═══ ÜÇÜNCÜ ORTAK KUTUSU ═══
   Üç kutu yan yana; dar ekranda alt alta. Araç kutusu bağlantı
   olduğu için düğme biçimini elle alıyor. */
.ortak-kutular{grid-template-columns:repeat(3,minmax(0,1fr))}
.ortak-kutu-arac{text-decoration:none}
.ortak-kutu-arac img{height:20px;width:auto}
/* ═══ TELEFONDA DA YAN YANA ═══
   Alt alta dizmek üç kutuyu ekranın yarısına yayıyordu ve
   "üç ortağımız var" mesajı tek bakışta görünmüyordu.

   Dar ekranda sığması için kutu içi dikeye geçiyor: logo üstte,
   yazı altında, ortalanmış. Seçicilerde de aynı çözümü
   kullanmıştık. */
@media(max-width:620px){
  .ortak-kutular{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .ortak-kutu{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:5px;
    padding:11px 6px 10px;
  }
  .ortak-kutu img{height:15px!important;max-width:100%}
  .ortak-kutu-arac img{height:16px!important}
  .ortak-kutu-not{font-size:9.5px;line-height:1.3}
  .ortak-kutu-adet{font-size:11px}
  /* Ok işareti dar kutuda yer kaplıyor; kutunun kendisi zaten
     tıklanabilir olduğunu gösteriyor. */
  .ortak-kutu-ok{display:none}
}

/* ═══════════════════════════════════════════════════════════
   SOHBET KUTUSU — NEFES ALAN ÇERÇEVE
   ═══════════════════════════════════════════════════════════
   Kutu ekranın altında sabit duruyor ve hareketsizken fark
   edilmiyordu.

   ═══ İLK DENEME ÇALIŞMADI — SEBEBİ ═══
   Çerçeveyi `border` üzerinden vermiştim, ekranda hiç görünmedi.
   Sebep: yukarıda `.elifa-panel{border-color:...!important}` var ve
   CSS animasyonları `!important` taşıyan bir bildirimi EZEMİYOR.
   Kutunun kenarı soluk marka tonunda sabit kalıyordu.

   Çözüm iki katlı:
     1. Sabit renk için daha özgül seçici + `!important`
     2. Nefes için `outline` — o özellik kilitli değil, üstelik
        kenarın DIŞINDA çiziliyor ve köşe yuvarlaklığını izliyor

   Hız bilinçli yavaş: hızlı yanıp sönen bir kenar reklam gibi durur
   ve okumayı bozar. Üç buçuk saniyelik döngü, göz ucuyla fark edilen
   bir nefes.

   Kutu YAZIYA ODAKLANINCA sakinleşiyor — yazarken kenarın oynaması
   dikkat dağıtır.
   ═══════════════════════════════════════════════════════════ */
:root,html[data-ytg-theme]{--sohbet-yesil:#0d7e7a;--sohbet-yesil-parlak:#12a49a;--sohbet-sari:#f59310}

/* Nefes yalnızca RENK üzerinden. İlk halinde kenar boşluğu da
   büyüyüp küçülüyordu ve `border` ile birlikte İKİ ÇERÇEVE gibi
   görünüyordu — canlıda görüldü. Tek halka, tek nefes. */
@keyframes sohbetNefes{0%,100%{outline-color:rgba(214,106,18,.32)}50%{outline-color:rgba(245,147,16,1)}}

/* `border` KALDIRILDI: çerçeveyi outline çiziyor. İkisi birden
   kalınca kutunun iki kenarı oluyordu. */
html .elifa-panel:not(.tam),html[data-ytg-theme] .elifa-panel:not(.tam){border:0!important;outline:2.5px solid rgba(214,106,18,.32);outline-offset:0;border-radius:24px;animation:sohbetNefes 3.4s ease-in-out infinite}
html .elifa-panel:not(.tam):focus-within,html[data-ytg-theme] .elifa-panel:not(.tam):focus-within{animation:none;outline-color:var(--sohbet-sari)}

/* Gönder düğmesi de aynı turuncuda. Tema motoru düğmeyi ve gölgesini
   `!important` ile şehir rengine bağlıyor; ikisini de aşmak gerekiyor. */
html .elifa-panel .elifa-composer button,html[data-ytg-theme] .elifa-panel .elifa-composer button{background:linear-gradient(135deg,var(--sohbet-sari),#d86a12)!important;color:#fff!important;box-shadow:0 8px 20px rgba(214,106,18,.3)!important}
html .elifa-panel .elifa-composer button:hover,html[data-ytg-theme] .elifa-panel .elifa-composer button:hover{filter:brightness(1.07);box-shadow:0 11px 26px rgba(214,106,18,.36)!important}

/* Yer tutucu: tema motoru hem rengi hem SAYDAMLIĞI `!important` ile
   eziyordu. İlk denemede yalnızca rengi geri almıştım, opaklık .48
   kaldığı için turuncu soluk görünüyordu. */
html .elifa-panel .elifa-composer textarea::placeholder{color:var(--sohbet-sari)!important;opacity:1!important;font-weight:650}
html .elifa-panel .elifa-composer textarea::-webkit-input-placeholder{color:var(--sohbet-sari)!important;opacity:1!important;font-weight:650}

/* Hareketi kapatanlarda çerçeve duruyor, yalnızca nefes kesiliyor. */
@media(prefers-reduced-motion:reduce){html .elifa-panel:not(.tam){animation:none;outline-color:var(--sohbet-yesil-parlak)}}

/* ═══════════════════════════════════════════════════════════
   ROTA SAYFASI — KAHRAMAN
   ═══════════════════════════════════════════════════════════
   ═══ NEDEN ARKA PLAN DEĞİL GERÇEK ÖĞE ═══
   Önce `background-image` + `cover` kullanılıyordu ve ÜÇ KEZ
   bozuldu: görsel kırpılıyor, kutu içerikten kısa kalıyor, yazı
   haritanın üstüne taşıyordu. `<img>` olarak konunca kutunun
   yüksekliği görselin kendi oranından geliyor — kırpma yok,
   taşma yok, `min-height` tahmini yok.

   ═══ NEDEN METİN ÜSTE BİNDİRİLMİYOR ═══
   Kullanılan görselin KENDİ başlığı var. Bizim başlığımızı üstüne
   bindirmek iki başlık demek olurdu. Metin görselin ardından,
   normal akışta başlıyor.

   Yüzdeyle konumlandırmayı da bu yüzden bıraktık: dört kez
   bozuldu, çünkü yüzde metnin uzunluğunu ve dilin farkını
   bilmiyor.
   ═══════════════════════════════════════════════════════════ */
.rota-ust{position:relative;margin-bottom:22px;padding:0}
.rota-ust-gorsel{display:block}
.rota-ust-gorsel img{display:block;width:100%;height:auto;border-radius:20px 20px 0 0}

.rota-ust-metin{padding:20px 4% 0}
.rota-ust-metin .kicker{margin:0 0 .45em;font-size:clamp(10px,1vw,13px);letter-spacing:.16em}
.rota-ust-metin h1{margin:0 0 .32em;font-size:clamp(24px,3.4vw,42px);line-height:1.05}
.rota-ust-metin .rota-giris{margin:0;font-size:clamp(14px,1.25vw,17px);line-height:1.5;max-width:64ch}

/* Ortak beyanı metnin altında, normal akışta. */
.rota-ust .rota-ortaklar{margin:16px 0 0}

@media(max-width:560px){
  .rota-ust-gorsel img{border-radius:16px 16px 0 0}
  .rota-ust-metin{padding:16px 2% 0}
}

/* ═══ ROTA ÖZELLİK ŞERİDİ ═══
   Görselin içinde gömülü metin olarak duruyordu: İngilizce
   sabitlenmişti, on bir dile çevrilemiyordu. HTML'e taşındı.
   Simgeler süs — anlamı taşıyan yazının kendisi, o yüzden
   `aria-hidden` ve ekran okuyucu yalnızca metni okuyor. */
.rota-ozellikler{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:18px 0 0;padding:0}
.rota-ozellikler li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--turkuaz-koyu);letter-spacing:.01em}
.rota-ozellikler li span:first-child{font-size:17px;line-height:1}
@media(max-width:560px){.rota-ozellikler{gap:8px 16px}.rota-ozellikler li{font-size:12px}}

/* ═══ ROTA FORMU — ADIMLAR ═══
   Form tek uzun sütundu: yedi soru alt alta, hepsi aynı ağırlıkta.
   Kullanıcı nerede olduğunu ve ne kadar kaldığını göremiyordu.

   Üç adıma bölündü. Numaralar ilerleme hissi veriyor; sorular
   gruplanınca hangi bilginin niye istendiği de anlaşılıyor. */
.rota-adim-basi{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:22px 0 2px;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.rota-adim-basi:first-of-type{margin-top:4px}
.rota-adim-no{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--turkuaz-acik);color:var(--turkuaz-koyu);font-size:12px;font-weight:800}

/* ═══ KATLANIR EK AYAR ═══
   Bütçe isteğe bağlı ve çoğu kullanıcı doldurmuyor; açık durunca
   formu uzatıp asıl sorulardan dikkat çekiyordu. */
.rota-ek{border:1px solid var(--line);border-radius:12px;padding:0;background:#fff}
.rota-ek summary{padding:12px 14px;cursor:pointer;font-size:14px;font-weight:600;color:var(--turkuaz-koyu);list-style:none}
.rota-ek summary::-webkit-details-marker{display:none}
.rota-ek summary::after{content:"+";float:right;font-weight:700;opacity:.6}
.rota-ek[open] summary::after{content:"−"}
.rota-ek-govde{display:block;padding:0 14px 14px}

/* ═══ BAŞLANGIÇ NOKTASI ═══
   Adres alanı ve konum düğmesi yan yana: ikisi aynı sorunun iki
   cevabı, alt alta dizmek ayrı iki iş gibi gösterirdi. */
.rota-baslangic-satir{display:flex;gap:8px;align-items:stretch}
.rota-baslangic-satir input{flex:1;min-width:0}
.rota-konum-dugme{flex:0 0 auto;padding:0 14px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--turkuaz-koyu);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.rota-konum-dugme:hover:not(:disabled){border-color:var(--turkuaz-koyu)}
.rota-konum-dugme:disabled{opacity:.55;cursor:progress}
.rota-konum-dugme.alindi{background:var(--turkuaz-acik);border-color:var(--turkuaz-koyu)}
@media(max-width:480px){.rota-baslangic-satir{flex-direction:column}.rota-konum-dugme{padding:10px 14px}}

/* ═══ DURAK ÇIKARMA ═══
   Kartın sağ üstünde küçük ve sessiz. Yıkıcı bir işlem olduğu için
   göze batmalı ama kartın kendisini bastırmamalı: rota okunacak,
   silme ikinci derece bir eylem. */
.plan-durak{position:relative}
.durak-cikar{position:absolute;top:8px;right:8px;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.92);color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0}
.durak-cikar:hover{border-color:#d0452a;color:#d0452a;background:#fff}
.durak-cikar:focus-visible{outline:2px solid #d0452a;outline-offset:2px}

/* ═══ HAZIR KOMBİNLER ═══
   Ad ve altında NE YAPTIĞI. Açıklama olmadan "Tarih ağırlıklı"
   seçmek karanlıkta seçim olurdu — neyin geri bırakıldığı yazmalı. */
.rota-kombinler{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.rota-kombin{display:block;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font:inherit}
.rota-kombin strong{display:block;font-size:14px;font-weight:650;color:var(--ink);margin-bottom:3px}
.rota-kombin span{display:block;font-size:12px;line-height:1.45;color:var(--muted)}
.rota-kombin:hover{border-color:var(--turkuaz-koyu)}
.rota-kombin.secili{border-color:var(--turkuaz-koyu);background:var(--turkuaz-acik)}

/* ═══ AKŞAM YEMEĞİ ═══
   Günün sonunda, duraklardan görsel olarak AYRI: bu bir durak değil,
   öneri. Kart yapısını taklit etmiyor — sıra numarası, saat ve fiyat
   kutusu yok. */
.plan-yemek{display:block;margin:10px 0 4px;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:#fff}
.plan-yemek-etiket{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.plan-yemek strong,.plan-yemek-ad{display:block;font-size:15px;font-weight:650;color:var(--ink)}
.plan-yemek-ad{text-decoration:none;border-bottom:2px solid var(--turkuaz-acik)}
.plan-yemek-ad:hover{border-bottom-color:var(--turkuaz-koyu)}
.plan-yemek-alt{display:block;margin-top:3px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.plan-yemek-not{display:block;margin-top:6px;font-size:11px;color:var(--muted);opacity:.85}

/* ═══ YEMEK ALTERNATİFLERİ ═══
   Katlanır: açık dursaydı plan sayfası restoran listesine dönerdi. */
.plan-yemek-ozet{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.plan-yemek-digerleri{margin-top:10px}
.plan-yemek-digerleri summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--turkuaz-koyu);list-style:none}
.plan-yemek-digerleri summary::-webkit-details-marker{display:none}
.plan-yemek-digerleri summary::after{content:" +";font-weight:700}
.plan-yemek-digerleri[open] summary::after{content:" −"}
.plan-yemek-secenek{padding:10px 0 0;border-top:1px solid var(--line);margin-top:10px}
.plan-yemek-secenek a{font-size:14px;font-weight:650;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--turkuaz-acik)}