/*
 * YourHolidayGPT 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:var(--kose-kapsul);
  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);
}

/*
 * ═══ BAŞLIK ALTI ÇİZGİSİ KALDIRILDI (9 Ağustos) ═══
 * KULLANICI: "Ana başlıkların altındaki kısa çizgiyi yok et."
 *
 * Çizgi başlığı vurgulamak için konmuştu ama başlık zaten 29-40px
 * ve en koyu renk — vurguya ihtiyacı yoktu. Altına çekilen kısa
 * çubuk, göz başlığı okuduktan sonra takılacağı ikinci bir nesne
 * yaratıyordu.
 */
.section-heading h2::after,
.plan-ust h1::after,
.urun-h1::after{
  content:none;
}

.search-form{
  border-color:rgba(var(--theme-primary-rgb),.2);
  border-radius:var(--kose-buyuk);
  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));
}





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

/* ═══ KART DEĞİL, DÜZ SÜTUN (8 Ağustos) ═══
   KULLANICI: "Kutu yapma, böyle yap, bu stil daha güzel."

   Bir önceki turda kutulara çerçeve ve gölge vermiştim ("basılacağı
   belli olsun" istediği için). Ekranda görünce daha iyisini seçti:
   çerçevesiz sütunlar, aralarında ince bir çizgi. Altı logo yan yana
   dururken altı ayrı kart göz yoruyor; ince çizgi ayırmaya yetiyor.

   Basılabilirlik çerçeveden değil METİNDEN geliyor: her sütunun
   altında turkuaz "…'te keşfet" ve ok. Basınca da çöküyor — dokunmatikte
   tek geri bildirim bu. Yani kutu gitti, çağrı kaldı. */
.ortak-kutu{
  min-width:0;
  padding:14px 16px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/*
 * ═══ AYRAÇ HER KUTUDA (9 Ağustos) ═══
 * Önce `+` ile yalnız ikinciden itibaren çiziliyordu. ÖLÇÜLDÜ: sarma
 * noktasında iki kare piksel piksel AYNI ÇIKMADI — 102 piksellik bir
 * fark vardı. Sebep, ilk kutunun solunda çizgi olmaması ama yedincinin
 * (yani sarmadan sonra aynı yere gelen kutunun) olması.
 *
 * Ayraç artık her kutuda. İlk kutununki kabın kenarında ve kenar
 * maskesinin altında kalıyor, görünmüyor — ama iki tur birbirinin
 * aynısı oluyor.
 */
.ortak-kutu{
  border-left:1px solid rgba(var(--theme-primary-rgb),.2);
}

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

.ortak-kutu:active{
  transform:translateY(0) scale(.97);
}

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









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. */


/*
 * ═══ KONUM SİMGESİ KUTUSUZ (19 Ağustos) ═══
 * KULLANICI: "logo kısmında ana sayfada konum simgesi kutu içinde
 * olmasın, renkler attığım zipten tam al."
 *
 * Kutu eski logonun tek renkli olduğu döneme aitti: turkuaz yıldız
 * turkuaz zeminde kaybolduğu için BEYAZ işaret + renkli kutu
 * kullanılıyordu.
 *
 * Yeni marka kitindeki işaret zaten kendi gradyanını taşıyor
 * (#36E0DE → #18AECF → #0B5DA8). Kutu artık gereksiz ve markanın
 * kendi rengini örtüyor.
 */
.brand-mark{
  background:none;
  box-shadow:none;
}






.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 6px;
  text-shadow:0 1px 3px rgba(255,255,255,.85),0 0 10px rgba(255,255,255,.7);
  color:var(--theme-primary-dark);
  font-size:12px;
  font-weight:var(--agirlik-cok-kalin);
  letter-spacing:-.01em;
  text-align:center;
}
.destination-selectors{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--bosluk-3);
}
.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:var(--kose-kart);
}
#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)}



/* 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. */

.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:var(--bosluk-sayfa);
  align-items:flex-end;
}
/*
 * ═══ BAŞLIK KÜÇÜLDÜ VE GRİLEŞTİ (9 Ağustos) ═══
 * KULLANICI: "Yazı başlık rengini stilini güzel yap, çok kötü
 * duruyor böyle çok büyük — ve gri tonunda yap."
 *
 * 29-40px, telefonda ekran genişliğinin neredeyse yarısını kaplayan
 * bir başlık demekti; altındaki kartlardan daha yüksek sesle
 * konuşuyordu. Oysa asıl içerik kartlar.
 *
 * Renk #17233c (kontrast 15,65) neredeyse siyahtı. #3d4d5c'de
 * kontrast 8,70 — hâlâ AAA sınırının çok üstünde, ama sayfayı
 * bastırmıyor. Harf sıkışması da gevşetildi: küçük punto negatif
 * boşlukla birlikte tıkız görünüyordu.
 */
.section-heading h2{
  font-size:clamp(22px,2.4vw,29px);
  line-height:1.14;
  letter-spacing:-.018em;
  font-weight:var(--agirlik-orta);
  color:#3d4d5c!important;
}
.kicker{
  color:var(--theme-primary-dark);
  font-size:10px;
  letter-spacing:.15em;
}
.section-heading>div::after{
  width:56px;
  height:4px;
  margin-top:var(--bosluk-4);
  border-radius:var(--kose-kapsul);
  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:var(--bosluk-5);
  padding-bottom:var(--bosluk-4);
  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:var(--kose-kart);
  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;
}
/* ═══ KART TİPOGRAFİSİ (9 Ağustos) ═══
   KULLANICI: "GetYourGuide'da daha güzel; bizimkinde yazı başlık
   tipleri güzel değil, onları düzenleyelim."

   Karşılaştırıldı — fark boyutta değil HİYERARŞİDE:
     bizde   başlık 15px/800  ·  alt satır 11,25px/690
     onlarda başlık ~17px/600 ·  alt satır ~14px/400

   İki koyu satır alt alta durunca göz hangisinin önemli olduğunu
   seçemiyor. Bizim alt satırımız neredeyse başlık kadar kalındı ve
   onunla yarışıyordu. Ayrıca 800 ağırlık şehir adını sıkıştırıyor:
   Inter'in 700'ü aynı boyutta daha ferah okunuyor.

   Başlık büyüdü, ağırlığı DÜŞTÜ; alt satır inceldi ve nefes aldı.
   Satırları ayıran şey ağırlık değil boşluk. */
.sehir-govde b{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;
  font-weight:var(--agirlik-kalin);
  line-height:1.28;
  letter-spacing:-.012em;
}
.sehir-alt{
  width:100%;
  min-width:0;
  flex-wrap:nowrap;
  gap:7px;
  /* Başlıkla arası açıldı: satırları ayıran şey ağırlık değil boşluk. */
  margin-top:5px;
}
.sehir-alt em,
.ulke-kart .sehir-alt{
  min-width:0;
  overflow:hidden;
  color:var(--muted);
  font-size:12.5px;
  font-weight:500;
  line-height:1.4;
  /*
   * ═══ TEK SATIR YETMİYORDU (9 Ağustos) ═══
   * `white-space:nowrap` + `ellipsis` yüzünden "Turkey · 39 km ·
   * Yalova'da aktiviteleri gör" satırı "Yalova'da a…" diye
   * kesiliyordu. Üç noktayla biten yarım cümle bilgi değil.
   *
   * İki satıra izin veriliyor; üçüncüde yine kırpılıyor ki kart
   * yükseklikleri şeritte dağılmasın.
   *
   * Kuralı AYRI bir blokta yazmıştım ve bu satırlar onu eziyordu —
   * dosyada sonra geliyorlar. Aynı kuralın içinde değiştirmek tek
   * doğru yer.
   */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal;
}
.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. */
/*
 * ═══ GÖRSEL İÇİNDEKİ ÇİZGİ KALDIRILDI (9 Ağustos) ═══
 * KULLANICI: "Fotoğrafların içindeki mavi çizgiyi yok et."
 *
 * Kartın kendi paletini gösteren "ince bir imza" olarak konmuştu.
 * Ama fotoğrafın üstünde duran renkli bir çubuk, yüklenme çubuğu
 * ya da video ilerleme göstergesi gibi okunuyor — olmayan bir
 * durumu anlatan bir işaret.
 */
.ytg-city-card .sehir-gorsel::after,
.ytg-country-card .sehir-gorsel::after{
  content:none;
}
.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:var(--bosluk-ritim);
}
.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:var(--bosluk-sayfa);
  }
  #sehirler{
    padding-top:32px;
    padding-bottom:23px;
  }
  #ulkeler{
    padding-top:25px;
    padding-bottom:34px;
  }
  .section-heading{
    margin-bottom:var(--bosluk-kart);
  }
  .section-heading h2{
    margin-top:3px;
    font-size:clamp(21px,5.6vw,26px);
    line-height:1.16;
  }
  .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:var(--bosluk-ritim);
  }
  .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:var(--bosluk-ritim);
  }
  .sehir-govde b{
    font-size:15.5px;
  }
  .sehir-alt em,
  .ulke-kart .sehir-alt{
    font-size:12px;
  }
  .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. */
/* Kutu kaldırıldı: işaret kendi gradyanıyla duruyor. `!important`
 * kalıyor çünkü tema dosyaları aynı seçiciyi yeniden boyuyor. */
.brand-mark,
.footer-brand .brand-mark{
  background:none!important;
  box-shadow:none!important;
}

/*
 * ═══ İŞARET YAZIDAN KOPUK DURUYORDU (19 Ağustos) ═══
 * KULLANICI: "üstteki logo hâlâ ayrık."
 *
 * Sebep ölçüldü: arka plan kutusu kaldırılmıştı ama KAP 38px, GÖRSEL
 * 27px kalmıştı. İşaretin çevresinde 5,5px boşluk vardı ve üstüne
 * 10px aralık biniyordu — toplam ~15px görsel boşluk, işareti
 * yazıdan koparıyordu.
 *
 * Kutu varken o boşluk doğruydu (dolgu payıydı); kutu gidince
 * anlamsız kaldı. Görsel artık kabı dolduruyor, aralık daralıyor.
 */
/*
 * ═══ DÜZELTME: KABI KÜÇÜLT, GÖRSELİ DEĞİL (19 Ağustos) ═══
 * İlk denemede görseli %100'e çıkardım ve simge AŞIRI BÜYÜDÜ —
 * kopukluğu kapatmak yerine daha görünür yaptım.
 *
 * Yanlış yeri düzeltmişim: sorun görselin küçük olması değil, KABIN
 * büyük olmasıydı. Kap 38px, görsel 27px; aradaki 5,5px kutu varken
 * dolgu payıydı, kutu gidince ölü boşluk oldu.
 *
 * Doğrusu: kap görselin boyutuna iniyor, görsel OLDUĞU GİBİ kalıyor.
 */
/*
 * ═══ ÖLÜ KURALLAR KALDIRILDI (24 Ağustos) ═══
 * `.brand-mark` kutusu yeni markayla birlikte HTML'den kalktı;
 * onu küçülten `!important` kuralları hiçbir şeye uygulanmıyordu.
 * Yeni işaretin ölçüsü `styles.css` → `.brand-isaret`de.
 */


/*
 * ═══ ARALIK BİR KEZ DAHA DARALDI (v697) ═══
 * KULLANICI (20 Ağustos): "logo simgeden hâlâ ayrık, orada
 * engelleyen bir şey var, onu bul."
 *
 * HAKLIYDI VE ENGELLEYEN BUYDU. styles.css'te gap 3 px'e
 * indirilmişti ama buradaki `!important` onu eziyordu; üstelik
 * seçici BİRLEŞİK (`.brand, .footer-brand`) olduğu için `.brand{`
 * aramalarında hiç görünmüyordu. Tarayıcıya "hangi kural kazanıyor"
 * diye sordurunca ortaya çıktı.
 *
 * 19 Ağustos'ta 7 px doğru değerdi: SVG'nin viewBox'ı içerikten
 * genişti ve görsel kendi içinde pay taşıyordu. v695'te viewBox
 * içeriğe sıkıştırıldı (94 165 293 366), o pay kalktı — 7 px artık
 * fazla.
 */
/*
 * Yeni işaret ile ad arasındaki aralık: işaret artık kutusuz ve
 * kendi payını taşımıyor, 3px yapışık duruyordu.
 */
.brand,
.footer-brand{
  gap:0!important;
}

/*
 * ═══ YAZI DA İŞARETLE AYNI GRADYANDA (19 Ağustos) ═══
 * KULLANICI: "HolidayGPT kısmı bu renklerde birebir aynı olacak;
 * üst kısım hem simgede hem yazıda açık, alt kısım koyu."
 *
 * Renkler UYDURULMADI: işaretin kendi gradyanı zaten bu üç tonu
 * taşıyor (#36E0DE → #18AECF → #0B5DA8) ve eSIM afişindeki geçişin
 * aynısı. Yazıya da birebir aynısı veriliyor ki işaret ve ad tek
 * parça görünsün.
 *
 * `background-clip:text` gradyanı harflerin içine boyuyor.
 * `!important` gerekiyor çünkü şehir temaları aynı seçiciyi
 * yeniden boyuyor.
 */
/*
 * ═══ MAVİ GRADYAN KALKTI, YENİ MARKA GELDİ (24 Ağustos) ═══
 * KULLANICI: "üst bardaki logo hemen değişsin, yeni logo."
 *
 * Buradaki kural "HolidayGPT" yazısını eski kimliğin mavi
 * gradyanıyla (#36E0DE → #0B5DA8) boyuyordu ve `!important`
 * taşıyordu. Yeni marka iki DÜZ renk: "YourHoliday" turkuaz,
 * "GPT" turuncu.
 *
 * Seçici de değişti. Eski yapı `.brand > span:last-child > span`
 * idi; yeni yapıda ad iki parçalı (`.brand-ad-a` / `.brand-ad-b`)
 * ve o eski seçici İKİSİNİ BİRDEN yakalıyordu — yani mavi gradyan
 * turuncu "GPT"yi de eziyordu. `!important` korunuyor çünkü şehir
 * temaları aynı seçicileri yeniden boyuyor.
 *
 * `background-clip:text` de gitti: düz renkte gereksiz ve
 * desteklenmeyen tarayıcıda harfleri görünmez bırakma riski taşıyordu.
 */
/*
 * ═══ RENKLER ARTIK CSS'TE DEĞİL (24 Ağustos) ═══
 * Kelime markası HTML metni olmaktan çıktı, kitin SVG'sinin içinde
 * yol olarak duruyor. Renkleri dosya taşıyor; buradaki kurallar
 * boyayacak bir nesne bulamıyordu, kaldırıldı.
 */

/*
 * Eski seçici (`> span:last-child > span`) yeni yapıda adın İKİ
 * parçasını birden yakalıyor ve turuncu "GPT"yi tema rengiyle
 * eziyordu. Marka rengi şehir temasından etkilenmemeli — kural
 * kaldırıldı, renkler yukarıda parça parça veriliyor.
 */

/* Arama ve hızlı seçim alanları beyaz yüzeyde kalır. */


.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{
  border-color:rgba(var(--theme-primary-rgb),.16)!important;
  box-shadow: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{
  border-left-color:rgba(var(--brand-primary-rgb),.2)!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;
}

/* Çizgiler kaldırıldı (9 Ağustos); renklerini zorlayan kural da gitti. */

/* Tarayıcı içindeki sabit eski asistan alanı da beyaz kalır. */




@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. */


/* ═══════════════════════════════════════════════════════════
   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:var(--bosluk-ritim);
  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.
   ═══════════════════════════════════════════════════════════ */
/*
 * ═══ KUTU GİDİNCE BOŞLUK KALDI (19 Ağustos, EKRAN GÖRÜNTÜSÜ) ═══
 * KULLANICI: "çok ayrık duruyor."
 *
 * Kutu 32px'di ama içindeki işaret 23px: aradaki 9 piksel kutunun
 * iç boşluğuydu. Kutu kaldırılınca o boşluk olduğu gibi kaldı ve
 * işaret metinden kopuk göründü.
 *
 * İşaret artık kutunun yerini alıyor; kap ölçüsü de ona göre.
 */
.brand-mark{width:30px;height:30px;flex-basis:30px;border-radius:0}
.brand-mark img{width:30px;height:30px}
/* Boşluk daraldı: kutu yokken 9px fazla geliyordu. */
.brand{font-size:19px;gap:3px}

@media(max-width:620px){
  .brand-mark{width:27px;height:27px;flex-basis:27px;border-radius:0}
  .brand-mark img{width:27px;height:27px}
  .brand{font-size:17px;gap:3px}
}

/* ═══════════════════════════════════════════════════════════
   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:var(--bosluk-ritim);
  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:var(--agirlik-cok-kalin);
  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:var(--bosluk-1)}
  .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ı.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   ÜST BAR YATAY TAŞMASI (v699)

   KULLANICI: "üst bar tam oturmamış, sağa sola minimal kayıyor."

   CANLIDA ÖLÇÜLDÜ (Playwright, 412 px):
     documentElement.scrollWidth 416 · clientWidth 412 → 4 px taşma
     #menuButton  sol 376 · SAĞ 416  ← taşıran öğe

   Kutu kutu toplandı: 12 (sol dolgu) + 159 (marka) + 4 (marka sağ
   boşluğu) + 8 + 93 (dil) + 8 + 38 (favori) + 8 + 38 (hesap) + 8
   + 40 (menü) = 416, üstüne 12 px sağ dolgu daha isteniyor.
   Kullanılabilir genişlik 388 px; fazlalık 16 px.

   ═══ SEBEP: HİÇBİR ÖĞE SIKIŞAMIYOR ═══
   Bar bir flex satırı ama çocukların HEPSİ `flex:0 0 auto`.
   Toplam genişlik kaba sığmayınca satır sağa taşıyor.

   styles.css'te v688'de yazılan yorum zaten doğru kararı
   söylüyordu — "sıkışması gereken varsa dil seçici sıkışsın,
   menü tek çıkış yolu" — ama kuralı yazılmamıştı: dil seçici
   `flex:0 0 auto` ile sabit kalıyordu. Niyet vardı, uygulaması yoktu.

   ═══ NEDEN overflow-x:hidden DEĞİL ═══
   Taşmayı gizlemek menü düğmesinin kenarını kırpar ve asıl hatayı
   görünmez yapar. Bar gerçekten sığmalı.

   Dil seçici 93 px ve metni ("Türkçe") 10,5 puntoda ~76 px yer
   kaplıyor: 17 px payı var, KIRPILMADAN daralabiliyor.
   Marka adı kırpılmıyor — v688'de denendi, "YourTou…" çıktı.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:620px){
  .site-header{gap:var(--bosluk-2);padding:0 10px}
  /* Bardaki tek esneyebilen öğe. `min-width:0` olmadan flex öğesi
     içeriğinin altına inemez ve shrink hiç çalışmaz. */
  .site-header .dil-secici,
  .site-header .para-secici{flex:0 1 auto;min-width:0}
  .site-header .dil-secici select,
  .site-header .para-secici select{min-width:0;max-width:100%}
}

/*
 * OKUNURLUK TABANI — SIKIŞMA SINIRSIZ DEĞİL
 *
 * ÖLÇÜLDÜ (Playwright, yerel): taban konmayınca seçici 412 px'de
 * 89, 360'ta 56, 320'de 16 piksele iniyor. 16 pikselde yalnız ok
 * görünüyor, gezgin hangi dilde olduğunu göremiyor — v688'in
 * "TR yazmak belirsizleştirir" kuralının daha kötüsü.
 *
 * Taban 58 px: "TR"/"EN" gibi kısa metin ve ok rahat sığıyor.
 *
 * ═══ 360 PİKSELİN ALTINDA TABAN YOK VE BU BİLİNÇLİ ═══
 * ÖLÇÜLDÜ, 320 px'de bar zaten tam dolu: marka 142 + iki simge 76
 * + menü 40 + boşluklar 24 + dolgu 20 = 302, seçiciye 18 px kalıyor.
 * Taban koysak bar yeniden TAŞARDI ve düzeltmek istediğimiz arıza
 * geri gelirdi.
 *
 * Bu genişlikte gerçek çözüm seçiciyi bardan menüye taşımak; o iş
 * i18n.js'in `getElementById('dilSec')` bağını değiştirmeyi
 * gerektiriyor ve ayrı bir sürüme bırakıldı. Bugünkü karar:
 * taşmayan ama dar bir bar, taşan bir bardan iyidir.
 */
@media(min-width:360px) and (max-width:620px){
  .site-header .dil-secici select{min-width:58px}
  /*
   * ═══ 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:var(--bosluk-ritim);
  }
  /* `flex:0 0 auto` BURADAN KALDIRILDI (v699): yukarıdaki
     sıkışabilir kuraldan SONRA geldiği için onu eziyordu ve bar
     412 pikselde 4 px taşıyordu. Aynı özelliği iki yerde farklı
     değerle yazmak, ikincisinin sessizce kazanması demek. */
}

@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:var(--bosluk-1);margin-right:var(--bosluk-1)}
  /* Kutu yok: işaret kabın tamamını doldurur. */
  .brand-mark{width:24px;height:24px;flex-basis:24px;border-radius:0}
  .brand-mark img{width:24px;height:24px}
  .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.
   ═══════════════════════════════════════════════════════════ */
/*
 * Eski kimliğin gradyan yazısı kaldırıldı (24 Ağustos). Yeni marka
 * iki düz renk taşıyor ve `background-clip:text` gereksiz —
 * desteklenmeyen tarayıcıda harfleri görünmez bırakma riski de
 * ortadan kalkıyor.
 */

/* ═══════════════════════════════════════════════════════════
   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:var(--bosluk-2)}

  .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:var(--kose-orta);
    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:var(--bosluk-1);min-width:0}
.genis-cagri-metin b{font-size:15px;font-weight:var(--agirlik-cok-kalin);letter-spacing:-.01em}
.genis-cagri-metin span{font-size:11.5px;font-weight:var(--agirlik-orta);line-height:1.4;opacity:.85}
.genis-cagri-ok{font-size:19px;font-weight:var(--agirlik-kalin);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:var(--bosluk-ritim);
  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:var(--agirlik-cok-kalin);
  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}
.konum-durum{
  margin:8px 4px 0;
  color:var(--ink);
  font-size:12px;
  font-weight:var(--agirlik-orta);
  line-height:1.45;
  text-align:center;
}
.konum-durum[hidden]{display:none}

/* Gizlilik notu: başlığın altında, küçük.
   ═══ ÖLÇÜLDÜ (8 Ağustos, gerçek tarayıcı 412px) ═══
   Not y=223'te bitiyor, arama kutusu y=238'de başlıyordu: bir piksel
   dip dibe. Üstelik ikisi de kahraman fotoğrafının üstünde duruyor ve
   gri yazı (--muted) fotoğrafta okunmuyordu — ekran görüntüsünde
   kutunun ARKASINDA kalmış gibi görünüyor.
   Nefes payı + fotoğraf üstünde okunurluk için hafif beyaz hale. */
.destination-gizlilik{
  /*
   * ═══ ARAMA KUTUSU FOTOĞRAFIN ALTINA İNDİ (8 Ağustos) ═══
   * KULLANICI: "Şu arama kısmı çok az aşağı kaydır, fotoğrafın
   * üstünde çünkü."
   *
   * ÖLÇÜLDÜ (412px, gerçek tarayıcı): kahraman görseli y=296'da
   * bitiyor, arama kutusu y=249'da başlıyordu — kutunun üst yarısı
   * fotoğrafın üstünde kalıyordu. Beyaz kutu fotoğrafın üstünde
   * yüzüyor gibi duruyor ve gri yer tutucu yazı okunmuyordu.
   *
   * Alt boşluk 11'den 58'e çıktı: kutu artık y≈296'nın altında,
   * beyaz zeminde. Kaydırma "çok az" — başlığın ve fotoğrafın
   * kompozisyonuna dokunulmadı.
   */
  margin:2px 0 14px;
  color:#4d6070;
  font-size:10.5px;
  line-height:1.5;
  text-align:center;
  text-shadow:0 1px 3px rgba(255,255,255,.85),0 0 10px rgba(255,255,255,.7);
}

/* ═══ 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:var(--bosluk-3);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:var(--agirlik-cok-kalin);
}
.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. */
  /*
   * ═══ GÜL PEMBESİ ═══
   * KULLANICI (5 Ağustos): "Bu yazının rengini gül pembesi rengi
   * yap."
   *
   * Klasik gül pembesi (#e75480) bu puntoda beyaz zeminde 3,51
   * kontrast veriyor — küçük yazı eşiği 4,5, altında kalmak
   * okunamamak demek. Bu uyarı ödemenin BİZDE OLMADIĞINI söylüyor;
   * okunmaması kabul edilemez.
   *
   * #d6336c en açık gül tonu ki eşiği geçiyor: kontrast 4,62.
   * Pembe kimliği duruyor, yazı okunur kalıyor. Ölçüldü.
   */
  /*
   * ═══ PEMBE GERİ GELDİ (9 Ağustos) ═══
   * 8 Ağustos'ta kehribara çekilmişti ("uyumlu durmuyor"), sonra
   * sarı-kızıl geçiş denendi, o da geri alındı. Kullanıcı ekranda
   * görüp pembede karar kıldı: uyarı yazısı palete KARIŞMAMALI,
   * ayrışmalı. Beyaz zeminde kontrast 4,62 — AA sınırının üstünde.
   */
  --marka-turuncu-yazi:#d6336c;
  --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:var(--agirlik-cok-kalin)}
.durak-ucretsiz-harita{
  color:var(--theme-primary-dark,#1d7f82);
  font-size:12px;font-weight:var(--agirlik-cok-kalin);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:var(--bosluk-4);
  margin-top:var(--bosluk-kart);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:var(--bosluk-1);min-width:0}
.plan-arac-metin b{color:var(--ink);font-size:13.5px;font-weight:var(--agirlik-cok-kalin)}
.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:var(--agirlik-kalin)}

/* ═══ 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:var(--bosluk-4);flex-wrap:wrap;
  margin-top:var(--bosluk-kart);padding-top:var(--bosluk-kart);
  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:var(--bosluk-sayfa)}
.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:var(--agirlik-cok-kalin);text-decoration:none;white-space:nowrap;
}
.rota-ortaklar-baglanti:hover{text-decoration:underline}

@media(max-width:520px){
  .rota-ortaklar{gap:var(--bosluk-ritim)}
  .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:var(--bosluk-5);
  margin-bottom:var(--bosluk-kart);padding:var(--bosluk-5);
  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:var(--kose-kapsul);
  background:rgba(var(--theme-primary-rgb),.09);
  color:var(--theme-primary-dark,#1d7f82);
  font-size:11px;font-weight:var(--agirlik-cok-kalin);
}
/* ═══ 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`: açık turuncu bu küçük puntoda
   okunmazdı, ölçülmüştü. */
/*
 * ═══ DÜZELTİLDİ (24 Ağustos): TURUNCU DENEN RENK PEMBEYMİŞ ═══
 * KULLANICI: "kırmızı yazıda düzeltilmiş hâlini yap."
 *
 * 5 Ağustos'ta "chatteki turuncu olacak, kızıl değil" denmişti ve
 * kural `--marka-turuncu-yazi` kullanıyordu. ÖLÇÜLDÜ: o değişkenin
 * değeri `#d6336c` — adı turuncu ama rengi AHUDUDU. Yani istenen
 * düzeltme hiç uygulanmamış, yazı pembe kalmış.
 *
 * Artık gerçek turuncu: `--ytg-turuncu-yazi` (#e04412) — tokens.css'te
 * tanımlı, sohbette kullanılan ton.
 *
 * Ayrıca ton yumuşadı: 800 ağırlık + ORTALI hizalama hata mesajı
 * dilidir; gezgin sayfada bir şeyin yanlış gittiğini sanıyordu. Oysa
 * bu güven veren bir bilgi — "parayı biz almıyoruz". Bilgi KALDI,
 * yalnız bağırmayı bıraktı: 600 ağırlık, sola hizalı.
 *
 * NOT: `--marka-turuncu-yazi` hâlâ pembe ve `.turuncu-gecis`te de
 * kullanılıyor. Marka gradyanını tek başıma değiştirmedim.
 */
.ortaklar-bolumu .ortaklar-not{
  margin-top:12px!important;
  padding:0!important;
  background:none!important;
  border-radius:0!important;
  /*
   * ═══ VURGU DEĞİL NOT (24 Ağustos) ═══
   * KULLANICI, ekran görüntüsüyle: "rezervasyon ve ödemeler yazısını
   * normal güzel tarzda yaz, turuncu kalın güzel durmuyor."
   *
   * 5 Ağustos'ta "chatteki turuncu olsun, kızıl değil" denmişti ve
   * ben rengi turuncuya çekerken punto ile kalınlığı da artırmıştım.
   * Sonuç iki satırlık kalın turuncu bir blok oldu: ortak logolarının
   * hemen altında, sayfadaki en yüksek sesli metin.
   *
   * Bu bir UYARI değil, bir BİLGİ notu — gezgin ödemeyi nerede
   * yapacağını bilsin diye duruyor. Artık öyle görünüyor: soluk
   * gövde rengi, normal kalınlık. Turuncu vurgu sayfada fiyatlarda
   * ve araç düğmesinde kalıyor; orada bir işi var.
   */
  color:var(--ytg-soluk);
  font-size:12px;
  font-weight:var(--agirlik-normal, 400);
  line-height:1.5;
  /*
   * ═══ ORTALI (26 Ağustos) ═══
   * KULLANICI, ekran görüntüsüyle: "yaziyi ortali yaz". 24 Ağustos'ta
   * sesi kısılmıştı ama hizası sola bırakılmıştı; logo şeridi ortalı
   * olduğu için not tek başına sola kaçmış görünüyordu. Ton aynı
   * kalıyor (soluk, normal kalınlık) — yalnız şeridin altına
   * hizalandı.
   */
  text-align:center;
}
@media(max-width:520px){
  .ortak-kart{grid-template-columns:1fr;gap:var(--bosluk-4);padding:var(--bosluk-sayfa)}
}

/* ═══════════════════════════════════════════════════════════
   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:var(--bosluk-5);
  }
}

/* ═══════════════════════════════════════════════════════════
   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:var(--bosluk-2)}
.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:var(--bosluk-6)}
  .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:var(--bosluk-sayfa)}
}

/* ═══ 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;
  }
  /*
   * ═══ AYNI OPTİK KUTU (24 Ağustos) ═══
   * KULLANICI: "kayan provider logoları birbiriyle eşit olsun, bir
   * logo büyük diğeri küçük gözükmesin ölçülerde."
   *
   * Burası yüksekliği eşitliyordu ama `max-width:100%` geniş
   * kelime-logoların (GetYourGuide, DiscoverCars) yayılmasına izin
   * veriyordu: aynı yükseklikte, üç kat geniş. Araç logosuna ayrıca
   * 1px fazla yükseklik veriliyordu — o da eşitliği bozuyordu.
   *
   * Ortak kutu: 16x84, `contain`. Hiçbiri baskın değil, hiçbiri
   * ezilmiyor.
   */
  .ortak-kutu img{height:16px!important;max-width:84px!important;object-fit:contain}
  .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}
}


:root,html[data-ytg-theme]{}

/* 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. */
50%{outline-color:rgba(245,147,16,1)}}

/* `border` KALDIRILDI: çerçeveyi outline çiziyor. İkisi birden
   kalınca kutunun iki kenarı oluyordu. */



/* 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. */



/* 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. */



/* Hareketi kapatanlarda çerçeve duruyor, yalnızca nefes kesiliyor. */
@media(prefers-reduced-motion:reduce){}

/* ═══════════════════════════════════════════════════════════
   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:var(--bosluk-3);font-size:13px;font-weight:var(--agirlik-orta);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:var(--agirlik-kalin);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:var(--agirlik-cok-kalin)}

/* ═══ 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:var(--kose-orta);padding:0;background:#fff}
.rota-ek summary{padding:12px 14px;cursor:pointer;font-size:14px;font-weight:var(--agirlik-orta);color:var(--turkuaz-koyu);list-style:none}
.rota-ek summary::-webkit-details-marker{display:none}
.rota-ek summary::after{content:"+";float:right;font-weight:var(--agirlik-kalin);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:var(--bosluk-3);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:var(--agirlik-orta);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:var(--kose-orta);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:var(--kose-orta);background:#fff}
.plan-yemek-etiket{display:block;font-size:11px;letter-spacing:var(--harf-kicker);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:var(--bosluk-2);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:var(--agirlik-orta);color:var(--turkuaz-koyu);list-style:none}
.plan-yemek-digerleri summary::-webkit-details-marker{display:none}
.plan-yemek-digerleri summary::after{content:" +";font-weight:var(--agirlik-kalin)}
.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)}

/* ═══ PLAN DENETİM UYARILARI ═══
   Plan mantık denetiminden geçiyor: zikzak, kopuk durak, karşılanmayan
   istek. Uyarı planı gizlemiyor, üstünde duruyor — eksiği saklamak
   güveni kırar, söylemek kullanıcıya karar verdirir. */
.plan-uyarilar{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:var(--kose-orta);background:#fff}
.plan-uyari-baslik{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;font-weight:var(--agirlik-kalin)}
.plan-uyarilar ul{margin:0;padding-left:var(--bosluk-5)}
.plan-uyarilar li{font-size:14px;line-height:1.5;margin:0 0 4px;color:var(--ink)}






/* Karşılama: boş kutu insana ne yazacağını söylemiyor.
   Geçmişe yazılmıyor — token harcamıyor, kaydedilmiyor. */
.balon.karsilama{background:var(--turkuaz-acik);border:1px solid rgba(26,158,190,.25)}
.balon.karsilama p{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.balon.karsilama .karsilama-alt{margin-top:5px;font-size:14px;color:var(--muted)}

/* Sınıra çarpınca giriş önerisi. Duvar değil öneri: mesajda yarın
   yenileneceği de yazıyor. */




/* v355: tek vurgu çizgisi. Başlık altında iki ayrı çizgi görünmesin. */
.section-heading>div::after{display:none!important}

/* v355: sağlayıcı kataloğu / arama sonuçları daha kompakt ve ürün odaklı */
#sonuclar{padding-top:24px}
#sonuclar .section-heading{align-items:center;margin-bottom:var(--bosluk-kart)}
#sonuclar .section-heading h2{font-size:clamp(22px,2.6vw,30px);line-height:1.14}
#sonuclar .kicker{color:var(--theme-primary-dark);font-size:9.5px}
#sonuclar .temizle{padding:8px 12px;border-color:#d6e5e9;background:#fff;font-size:10.5px}
#sonuclar .filtreler{margin:0 0 18px;padding:0;border:0;background:transparent}
#sonuclar .filtre-grup{margin:0 0 10px;padding:0}
#sonuclar .filtre-basi{margin-bottom:7px;font-size:9px}
#sonuclar .etiket-serit{gap:var(--bosluk-2);padding-bottom:4px}
#sonuclar .etiket-dugme{padding:7px 10px;border-color:#dce8ec;background:#fff;font-size:10.5px;box-shadow:0 3px 12px rgba(16,42,67,.035)}
#sonuclar .etiket-dugme[aria-pressed="true"]{border-color:var(--theme-primary);background:rgba(var(--theme-primary-rgb),.08);color:var(--theme-primary-dark)}
#sonuclar .filtre-kapak{border-color:#dce7eb;border-radius:14px;background:#fff;box-shadow:0 7px 22px rgba(16,42,67,.045)}
#sonuclar .filtre-kapak>summary{min-height:46px;padding:10px 13px;color:#314f61;font-size:12px}
#sonuclar .filtre-kapak>summary::after{color:var(--theme-primary-dark)}
#sonuclar .filtre-kapak[open]>summary{border-bottom-color:#e8eff2}
#sonuclar .filtre-kapak .filtre-satir{padding:var(--bosluk-4)}
#sonuclar .filtre-alan span{font-size:9px}
#sonuclar .filtre-alan select,#sonuclar .filtre-alan input{height:40px;border-color:#dce7eb;border-radius:11px;background:#fbfdfe;font-size:11.5px}

/* v355: favori ve paylaş görselin üstünü kapatmaz; bilgi alanında sakin bir satır */
.urun-govde>.kart-eylem{position:static;display:flex;justify-content:flex-end;gap:var(--bosluk-2);margin:1px 0 0}
.urun-govde>.kart-eylem .favori-dugme,
.urun-govde>.kart-eylem .paylas-dugme{width:29px;height:29px;border:1px solid #dce7eb;background:#f8fbfc;color:#667d8c;box-shadow:none;backdrop-filter:none}
.urun-govde>.kart-eylem .favori-dugme:hover,
.urun-govde>.kart-eylem .paylas-dugme:hover{border-color:var(--theme-primary);background:rgba(var(--theme-primary-rgb),.08);color:var(--theme-primary-dark);transform:none}
.urun-govde>.kart-eylem .favori-dugme[aria-pressed="true"]{border-color:var(--theme-primary);background:rgba(var(--theme-primary-rgb),.1);color:var(--theme-primary-dark)}

@media(max-width:620px){
  #sonuclar{padding-top:var(--bosluk-5)}
  #sonuclar .section-heading{align-items:flex-end;margin-bottom:var(--bosluk-4)}
  #sonuclar .section-heading h2{font-size:clamp(21px,5.6vw,26px)}
  #sonuclar .temizle{padding:7px 10px;font-size:10px}
  #sonuclar .filtre-basi{margin-bottom:var(--bosluk-2)}
  #sonuclar .etiket-serit{margin:0 -15px;padding:0 15px 5px}
  #sonuclar .filtre-kapak>summary{min-height:44px;padding:9px 12px}
  #sonuclar .filtre-kapak .filtre-satir{padding:10px;gap:7px}
  .urun-govde>.kart-eylem{justify-content:flex-start}
  .urun-govde>.kart-eylem .favori-dugme,
  .urun-govde>.kart-eylem .paylas-dugme{width:28px;height:28px}
}


/* ═══════════════════════════════════════════════════════════
   V532 — ANA SAYFA HİZMET VİTRİNİ
   Travel → YourHoliday eSIM → Rent a Car. Sonsuz döngü, 1.5 sn otomatik
   geçiş ve parmak/fare ile iki yöne kaydırma.

   Üretilen afişlerin kendi tipografisi olduğu için eski ana slogan ekranda
   ikinci kez basılmaz; erişilebilirlik için HTML içinde kalmaya devam eder.
   Arama/konum katmanı afişin ALTINDA başlar.
   ═══════════════════════════════════════════════════════════ */
.hero.hero-kayan{
  position:relative;
  isolation:isolate;
  background:#fff!important;
  min-height:0;
  padding-top:0!important;
}
.hero.hero-kayan .hero-content{
  position:relative;
  z-index:3;
  width:min(900px,calc(100% - 36px));
  margin:0 auto;
  padding-top:20px;
  text-align:center;
}
.hero.hero-kayan .destination-guide,
.hero.hero-kayan .ai-home-hub{margin-left:auto;margin-right:auto}
@media(min-width:901px){
  .hero.hero-kayan .hero-content{padding-top:var(--bosluk-6)}
}
@media(max-width:620px){
  .hero.hero-kayan .hero-content{padding-top:var(--bosluk-kart)}
}
/* IKINCI nowrap KALDIRILDI (v704)
   Bu satir 2816'daki kurali EZIYORDU: ayni ozellik iki yerde
   yazilmis, ikincisi kazaniyordu.

   TARAYICIYA SORULDU (Playwright, 412 px) - "Kolay rezervasyon":
     whiteSpace  nowrap   (2816'da normal yazmasina ragmen)
     genislik    46 px
     scrollWidth 86 px    <- metin kutunun IKI KATI
   Yazi kutusundan tasip komsu rozetin ustune biniyordu.

   Bu oturumun ucuncu ayni kalibi: dil secicide flex:0 0 auto,
   kategori hesabinda uctaki ezme, simdi burada. Metin aramakla
   bulunmuyor - hangi kuralin kazandigini TARAYICIYA sordurmak
   gerekiyor. */
.hero.hero-kayan .hero-content{padding-top:4px!important}
.hero.hero-kayan .destination-guide{margin-top:4px!important}

@media(max-width:620px){
  .hero.hero-kayan .hero-content{padding-top:2px!important}
  .hero.hero-kayan .destination-guide{margin-top:3px!important}
}

/* ═══════════════════════════════════════════════════════════
   V549 — MOBİL HERO SIKI RİTİM
   İstenen düzen: bannerlar gerçek 2:1 fotoğraf oranında; altta yapay
   beyaz uzatma yok. Slider noktaları fotoğrafın içinde. Alt mikro metinler
   fotoğrafın sol beyaz/fade alanına taşındı ve biraz büyütüldü.
   Sidera kartı ile ortak şeridi arasındaki birikmiş genel section padding'i
   ayrıca sıfırlandı.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:620px){

  /* Banner biter bitmez arama alanı başlar. */
  .hero.hero-kayan .hero-content{padding-top:0!important}
  .hero.hero-kayan .destination-guide{margin-top:0!important}
  .destination-context{margin-top:0!important}

  /* Sidera kartının altındaki boşluğun kaynağı: genel content-section
     padding'i daha sonra ortaklar bölümüne yeniden uygulanıyordu. */
  .hero.hero-kayan{padding-bottom:0!important}
  #searchStatus:empty{display:none!important;min-height:0!important;margin:0!important}
  .content-section.ortaklar-bolumu{
    padding-top:0!important;
    padding-bottom:6px!important;
  }
  .ortaklar-bolumu .ortak-serit{margin-top:6px!important}
}


/* ═══════════════════════════════════════════════════════════
   V564 — TABLET YATAY HERO
   7–13" yatay tabletlerde hero tam ekran genişliğine yayılıp devleşmesin.
   Görsel ve HTML yazılar aynı 3:2 koordinat sisteminde kalır.
   ═══════════════════════════════════════════════════════════ */
@media (min-width:700px) and (max-width:1366px) and (orientation:landscape){

  .hero.hero-kayan{
    overflow:hidden!important;
  }
}

/* v651 — mobil/tablet menü yeniden tasarım */
@media (max-width: 980px){
  .mobile-menu{
    top:72px!important; left:auto!important; right:0!important;
    width:min(92vw,460px)!important; max-height:calc(100dvh - 72px)!important;
    overflow:auto!important; overscroll-behavior:contain;
    padding:18px!important; border:1px solid rgba(18,130,137,.16)!important;
    border-radius:0 0 26px 26px!important; border-top:0!important;
    /*
     * DÜZ BEYAZ — yarı saydam + bulanık DEĞİL. Başlık düz beyaz
     * olduğu için yarı saydam panel onun yanında BAŞKA BİR MALZEME
     * gibi duruyordu; arkadaki hero yazısı da panelin içinden hayal
     * meyal okunuyordu. Aynı beyaz olunca ikisi tek yüzey.
     */
    background:#fff!important;
    /*
     * Gölge yalnızca AŞAĞI (negatif yayılma): çepeçevre yayılan
     * yumuşak gölge paneli "havada duran kutu" gibi gösteriyordu.
     * Artık altındaki içeriğe düşüyor — açılır menü böyle davranır.
     */
    box-shadow:0 18px 34px -14px rgba(16,42,67,.30)!important;
  }
  .menu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--bosluk-sayfa);margin:0 12px 8px}
  .menu-head>div{display:flex;flex-direction:column;gap:3px}
  .menu-kicker,.menu-section-title{font-size:10px;font-weight:850;letter-spacing:.16em;color:#16858a}
  .menu-head strong{font-size:18px;line-height:1.2;color:#183247;letter-spacing:var(--harf-kart)}
  .menu-close{display:none!important}
  .mobile-menu .menu-ai{display:grid!important;grid-template-columns:42px 1fr auto;align-items:center;gap:var(--bosluk-4);padding:14px!important;margin-bottom:var(--bosluk-4);border:0!important;border-radius:18px!important;background:linear-gradient(135deg,#0d6972,#1299a2)!important;color:#fff!important;box-shadow:0 10px 24px rgba(13,105,114,.20)}
  .menu-ai-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.16);font-size:22px}
  .menu-ai b{display:block;font-size:15px}.menu-ai small{display:block;margin-top:var(--bosluk-1);font-size:11px;font-weight:550;opacity:.8}.menu-arrow{font-size:20px}
  .menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--bosluk-ritim);margin-bottom:17px}
  .mobile-menu .menu-grid>a{min-height:94px!important;padding:13px!important;border:1px solid #e3ecee!important;border-radius:16px!important;background:#fff!important;box-shadow:0 5px 16px rgba(25,53,70,.045);display:flex!important;flex-direction:column;align-items:flex-start;justify-content:flex-end}
  .menu-grid .menu-icon{display:grid;place-items:center;width:30px;height:30px;margin-bottom:auto;border-radius:10px;background:#eef8f8;color:#0f7e84;font-size:17px;font-style:normal}
  .menu-grid b{font-size:13px;line-height:1.15;color:#193449}.menu-grid small{font-size:10px;color:#8a989f;margin-top:3px;font-weight:550}
  .menu-section{margin-top:13px}.menu-section:first-of-type{margin-top:var(--bosluk-1)}.menu-section-title{display:block;margin:0 12px 6px}
  .menu-list{border:1px solid #e6edef;border-radius:15px;overflow:hidden;background:#fff}
  .mobile-menu .menu-list>a{display:flex!important;align-items:center;justify-content:space-between;padding:10px 12px!important;border:0!important;border-bottom:1px solid #edf2f3!important;border-radius:0!important;font-size:12px!important;font-weight:700!important;color:#294354!important;background:#fff!important}
  .mobile-menu .menu-list>a:last-child{border-bottom:0!important}.menu-list i{font-style:normal;color:#8eabb0;font-size:14px}
  .menu-legal .menu-list>a{font-weight:600!important;color:#62757f!important}
  .menu-bottom{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;margin-top:15px;padding-top:var(--bosluk-kart);border-top:1px solid #e5edef}
  .menu-giris{min-height:44px!important;margin:0!important;padding:0 13px!important;border:1px solid #dce8ea!important;border-radius:14px!important;background:#f7fafb!important;font-size:12px!important;font-weight:750!important;color:#294354!important}
  .menu-para{padding:0!important}.menu-para .menu-section-title{margin-bottom:5px}.menu-para select{height:44px!important;border-radius:14px!important;font-size:12px!important;background-color:#fff!important}
}
@media (max-width: 600px){
  /*
   * ═══ IZGARADAN AÇILIYOR HİSSİ ═══
   * KULLANICI (23 Ağustos): "ızgaraya basınca standart oradan
   * açılıyormuş gibi his olsun, şu an ayrık — havada kutu varmış
   * gibi."
   *
   * Boşluk zaten 0'dı; AYRIK HİSSETTİREN başlığın kendisiydi:
   * alt çizgisi dikişin üstünden geçiyor, gölgesi de panelin
   * üstüne düşüyordu — iki ayrı katman gibi.
   *
   * Yalnızca bu genişlikte yapılıyor: panel burada tam genişlik,
   * yani çizginin tamamı zaten panelin üstünde kalıyor. 601-980px
   * arasında panel sağa yaslı dar bir kutu; orada çizgiyi silmek
   * panelin SOLUNDA kalan başlığı da çizgisiz bırakırdı.
   *
   * :has() desteklenmezse eski görünüm kalır, işlev değişmez.
   */
  .site-header:has(#menuButton[aria-expanded="true"]){
    border-bottom-color:transparent!important;
    box-shadow:none!important;
  }
  .mobile-menu{top:64px!important;right:0!important;left:0!important;width:100vw!important;max-height:calc(100dvh - 64px)!important;padding:15px!important;border-radius:0 0 23px 23px!important;border-left:0!important;border-right:0!important}
  .menu-head strong{font-size:16px}.menu-grid>a{min-height:86px!important}.menu-bottom{grid-template-columns:1fr 1fr}
}

/* Masaüstünde mevcut erişilebilir menü, geniş bir keşif ızgarası olarak açılır.
   Mobilde kullanıcının tercih ettiği tek sütunlu satır listesi korunur. */
.menu-grid-icon{display:none}
@media (min-width:901px) and (max-width:980px){
  .site-header .desktop-nav{display:none!important}
  .site-header .menu-button{display:flex!important;align-items:center;justify-content:center}
}
@media (min-width:981px){
  .site-header .menu-button{display:grid!important;place-items:center;flex:0 0 44px!important;min-width:44px!important;width:44px;height:44px;padding:0;border:1px solid #d8e9ed;border-radius:14px;background:#fff;color:#17435a;box-shadow:0 5px 16px rgba(26,65,84,.07);cursor:pointer}
  .site-header .menu-button:hover,.site-header .menu-button:focus-visible,.site-header .menu-button[aria-expanded="true"]{border-color:#30afb4;background:#eefafb;outline-offset:3px}
  .site-header .menu-button>span{display:none}
  .site-header .menu-button .menu-grid-icon{display:block}
  .mobile-menu[hidden]{display:none!important}
  .mobile-menu{position:fixed;top:72px;left:50%;right:auto;transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,3fr) minmax(220px,1fr);gap:16px 22px;width:min(1050px,calc(100vw - 48px))!important;max-width:none!important;max-height:calc(100dvh - 88px);overflow:auto;padding:24px;border:1px solid #dce9ed;border-radius:0 0 24px 24px;background:#fff;box-shadow:0 22px 50px rgba(17,46,65,.19)}
  .mobile-menu .menu-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 2px 12px;border-bottom:1px solid #e7eef1}
  .mobile-menu .menu-head>div{display:flex;flex-direction:column;gap:4px}
  .mobile-menu .menu-kicker,.mobile-menu .menu-section-title{font-size:10px;font-weight:800;letter-spacing:.16em;color:#158d94}
  .mobile-menu .menu-head strong{font-size:19px;color:#183247}
  .mobile-menu .menu-close{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:9px;background:#f1f6f7;color:#375466;cursor:pointer}
  .mobile-menu .menu-section{margin:0;min-width:0}
  .mobile-menu .menu-section:first-of-type{grid-column:1;grid-row:2}
  .mobile-menu .menu-section-title{display:block;margin:0 0 10px}
  .mobile-menu .menu-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0;background:transparent}
  .mobile-menu .menu-list>a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:74px;padding:15px;border:1px solid #e0e9ec;border-radius:15px;background:#fbfdfd;color:#1e3b4c;font-size:13px;font-weight:700;line-height:1.35;box-shadow:0 5px 15px rgba(19,61,79,.04);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
  .mobile-menu .menu-list>a:hover,.mobile-menu .menu-list>a:focus-visible{transform:translateY(-2px);border-color:#43bbc0;background:#f1fbfb;box-shadow:0 9px 18px rgba(19,61,79,.10)}
  .mobile-menu .menu-list>a i{font-style:normal;color:#188e98}
  .mobile-menu .menu-section:first-of-type .menu-list>a:first-child{border-color:#138d9a;background:linear-gradient(135deg,#effcfc,#e6f5f7)}
  .mobile-menu .menu-legal{grid-column:2;grid-row:2;padding:0 0 0 18px;border-left:1px solid #e7eef1}
  .mobile-menu .menu-legal .menu-list{grid-template-columns:1fr;gap:7px}
  .mobile-menu .menu-legal .menu-list>a{min-height:44px;padding:10px 12px;border:0;box-shadow:none;background:#f5f9fa;font-size:12px;font-weight:600}
  .mobile-menu .menu-bottom{display:none}
}

/* ═══════════════════════════════════════════════════════════
   ÜRÜN KARTI (v713)

   Claude Design'da üretilen yön çalışmasından ÖLÇÜLER alındı,
   kod alınmadı. Tasarım dosyasında 653 satır içi stil ve
   `DCLogic` adlı kendi çalışma zamanı vardı; ikisi de üretimde
   çalışmaz. Alınan şey karar: kutu ölçüleri, ritim, bilgi sırası.

   Tasarımdan gelen ölçüler:
     görsel oranı      4/3
     köşe              17px üst, kart 18px
     iç boşluk         14px
     dikey ritim       9px
     kaydırma          scroll-snap-type: x mandatory
   ═══════════════════════════════════════════════════════════ */
.uk{
  display:flex;flex-direction:column;
  background:#fff;border-radius:var(--kose-kart);overflow:hidden;
  box-shadow:var(--golge-kart);
  /* Basınca hafif küçülme: tasarımdaki 0.985 ölçek. Dokunma
     geri bildirimi mobilde "tıkladım mı" belirsizliğini kaldırıyor. */
  transition:transform .16s ease,box-shadow .16s ease;
  /*
   * ═══ KART ARTIK <a> — TIKLANAMIYORDU (23 Ağustos) ═══
   * Dış etiket `<article>`den `<a>`ya geçti (bkz. urun-karti.js).
   * `<a>` varsayılan alt çizgi ve mavi renk getirir; kart zaten
   * kendi renklerini taşıyor, bunlar sıfırlanmalı.
   */
  text-decoration:none;color:inherit;
}
.uk:active{transform:scale(.985)}
@media(hover:hover){
  .uk:hover{box-shadow:var(--golge-kart-hover)}
}

.uk-gorsel{position:relative;background:var(--ytg-cizgi-acik);border-radius:17px 17px 0 0;overflow:hidden}
/*
 * `scroll-snap-type: x mandatory` — kaydırma her zaman bir fotoğrafta
 * duruyor, arada kalmıyor. JS YOK: tarayıcı kendisi yapıyor.
 */
.uk-serit{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;aspect-ratio:4/3;scrollbar-width:none}
.uk-serit::-webkit-scrollbar{width:0;height:0}
.uk-serit>img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;display:block}
.uk-fotosuz{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#E6EDF2,#F3F7FA)}

.uk-sayac{
  position:absolute;right:10px;bottom:10px;
  font-size:11.5px;font-weight:var(--agirlik-kalin);color:var(--ytg-siyah);
  background:rgba(255,255,255,.94);border-radius:var(--kose-kapsul);padding:4px 9px;
  box-shadow:var(--golge-sayac);
}
/*
 * ═══ NOKTALAR: "DAHA VAR MI?" SORUSUNUN CEVABI ═══
 * Sayaç ("1/5") kaçıncı fotoğrafta olduğumuzu söylüyor ama gezgin
 * kaydırmayı DENEMEDEN önce oraya bakmıyor. Noktalar fotoğrafın
 * üstünde, alt ortada duruyor: kart yüksekliğini artırmıyor.
 * `pointer-events:none` — kaydırmayı engellememeli.
 */
.uk-nokta{
  position:absolute;left:0;right:0;bottom:12px;
  display:flex;justify-content:center;gap:5px;pointer-events:none;
}
.uk-nokta i{
  width:5px;height:5px;border-radius:var(--kose-kapsul);
  background:rgba(255,255,255,.62);box-shadow:0 1px 3px rgba(3,17,34,.35);
  transition:width .2s ease,background .2s ease;
}
.uk-nokta i.uk-nokta-aktif{width:14px;background:#fff}

/*
 * ═══ OKLAR YALNIZ FARE OLAN CİHAZDA ═══
 * Dokunmatikte parmakla kaydırma zaten var; ok koymak fotoğrafın
 * üstünü kaplardı. Faresi olan cihazda ise scroll-snap şeridi
 * kaydırmanın kolay bir yolu YOK — ok olmadan ikinci fotoğraf
 * masaüstünde pratikte erişilemez kalıyordu.
 */
.uk-ok{display:none}
@media(hover:hover){
  .uk-ok{
    position:absolute;top:50%;margin-top:-15px;
    display:grid;width:30px;height:30px;place-items:center;
    border:0;border-radius:var(--kose-kapsul);background:rgba(255,255,255,.9);color:var(--ytg-siyah);
    cursor:pointer;box-shadow:0 2px 8px rgba(3,17,34,.18);
    font:800 14px/1 var(--font-arayuz,inherit);padding:0;
    opacity:0;transition:opacity .16s ease,background .16s ease;
  }
  /*
   * ═══ TASARIMDAN BİLİNÇLİ SAPMA: OK ÜSTÜNE GELİNCE BELİRİYOR ═══
   * `ProductCard.jsx` okları koşulsuz çiziyor. Katalog ızgarasında 24
   * kart var; koşulsuz çizim 48 beyaz dairenin fotoğrafların üstünde
   * sürekli durması demek. Sapma yalnız FARE OLAN cihazı etkiliyor
   * (dokunmatikte ok zaten hiç yok), dolayısıyla "üstüne gelince
   * beliriyor" davranışı erişilebilirlik kaybı yaratmıyor: imleç oka
   * ulaşmak için fotoğrafın üstünden geçmek zorunda, geçtiği anda ok
   * görünür oluyor.
   */
  .uk .uk-gorsel:hover .uk-ok{opacity:1}
  .uk-ok:hover{background:#fff}
  .uk-ok-sol{left:8px}
  .uk-ok-sag{right:8px}
}
/* `[hidden]` her koşulda kazanmalı: uçtaki ok hiç çizilmiyor. */
.uk-ok[hidden]{display:none}

.uk-saglayici{position:absolute;left:10px;top:10px;width:54px;height:16px;
  background-repeat:no-repeat;background-size:contain;background-position:left center;
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.9))}
/*
 * ═══ .svg DEĞİL .png — DOSYALAR SVG OLARAK HİÇ VAR OLMADI ═══
 * Bu üç kural `/assets/ortak/<ad>.svg` istiyordu; klasörde yalnızca
 * PNG var. Canlıda ölçüldü: üç .svg de 404, üç .png de 200.
 *
 * Sonuç görünmez bir hataydı: rozet `<span>`i çiziliyor, kutusu
 * (54×16, drop-shadow) yer kaplıyor ama içi boş kalıyordu. Ana
 * sayfadaki HER kartta sağlayıcı logosu eksikti ve kimse şikâyet
 * etmedi çünkü "logo yok" ile "logo hiç olmayacaktı" ayırt edilemez.
 *
 * Tiqets dosyasının adı `tiqets-turkuaz.png` — sadeleştirmek için
 * yeniden adlandırmadım; başka yerlerde de bu adla anılıyor.
 */
.uk-viator{background-image:url('/assets/ortak/viator.png')}
.uk-tiqets{background-image:url('/assets/ortak/tiqets-turkuaz.png')}
.uk-wegotrip{background-image:url('/assets/ortak/wegotrip.png')}

.uk-govde{padding:var(--bosluk-kart);display:flex;flex-direction:column;gap:var(--bosluk-ritim)}
.uk-baslik{
  margin:0;font-size:15px;line-height:1.3;font-weight:var(--agirlik-kalin);color:var(--ytg-ink);
  /* İki satır sonrası kırpılıyor: üç satırlık başlık kart yüksekliğini
     bozuyor ve şeritteki kartlar farklı boyda çıkıyor. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.uk-puan{display:flex;align-items:center;gap:var(--bosluk-2);font-size:12.5px;color:var(--ytg-soluk)}
.uk-puan b{color:var(--ytg-siyah);font-weight:var(--agirlik-kalin)}
.uk-puan b::before{content:'★ ';color:var(--ytg-turkuaz)}
/*
 * "Yeni · henüz yorum yok" — puanı olmayan ürün kartı BOZMUYOR.
 * Canlıda ölçüldü: ürünlerin bir kısmında puan yok. Boş bırakmak
 * kartı çökertirdi, sıfır yazmak yalan olurdu.
 */
.uk-yeni{color:var(--ytg-soluk);font-style:normal}
.uk-bilgi{font-size:12.5px;color:var(--ytg-soluk)}
.uk-kalkis{
  font-size:12px;color:var(--ytg-turkuaz-yazi);background:var(--ytg-turkuaz-yumusak);
  border-radius:var(--kose-kucuk);padding:6px 9px;line-height:1.25;
}
.uk-alt{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:var(--bosluk-1)}
.uk-fiyat{display:flex;flex-direction:column;gap:1px;min-width:0}
/*
 * ═══ FİYAT TURUNCU (24 Ağustos) ═══
 * KULLANICI: "fiyat rakamları turuncu olacak, sayfaya turuncu da
 * biraz eklemek gerekli."
 *
 * Token zaten vardı ve kullanılmıyordu: `--text-fiyat` →
 * `--ytg-turuncu-yazi` (#e04412). Tasarım kiti de aynı kararı
 * veriyor — Bolumler.jsx → BirGunAyir fiyatı
 * `var(--ytg-turuncu-yazi)` ile yazıyor.
 *
 * Ham turuncu (#ff6337) DEĞİL "yazı turuncusu" kullanılıyor: beyaz
 * zeminde ham turuncunun kontrastı gövde metni için yetmiyor.
 */
.uk-fiyat b{font-size:16px;font-weight:var(--agirlik-cok-kalin);color:var(--text-fiyat)}
.uk-fiyat span{font-size:11.5px;color:var(--ytg-soluk)}
.uk-fiyatsiz span{font-size:12.5px;color:var(--ytg-mavi);font-weight:var(--agirlik-orta)}
.uk-rozet{
  flex:0 0 auto;font-size:12px;font-weight:var(--agirlik-kalin);color:var(--ytg-turkuaz-yazi);
  background:var(--ytg-turkuaz-yumusak);border:0;border-radius:var(--kose-kapsul);padding:7px 12px;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(18,184,178,.35);
}

/*
 * ═══ BENZER TURLAR: FARKLI SAĞLAYICILARLA KARŞILAŞTIRMA ═══
 * KULLANICI (24 Ağustos) "Suluada" örneği: tıklanınca `/aktiviteler`de
 * o turun tüm sağlayıcılardaki karşılıklarını arıyor (`urun-karti.js:
 * benzerBagla`). Kart bütünüyle `<a>` olduğu için burası `<button>` —
 * iç içe `<a>` geçersiz HTML olurdu.
 */
.uk-benzer{
  display:flex;align-items:center;gap:var(--bosluk-3);width:100%;min-height:40px;
  padding:0 10px;border:0;border-radius:var(--kose-orta);background:var(--ytg-turkuaz-yumusak);
  color:var(--ytg-turkuaz-yazi);font:700 12px/1.3 var(--font-arayuz,inherit);cursor:pointer;text-align:left;
}
.uk-benzer svg{flex:0 0 auto}
.uk-benzer-ok{margin-left:auto}
@media(hover:hover){
  .uk-benzer:hover{background:#DBF1EF}
}

/*
 * ═══ EYLEM SATIRI: PAYLAŞ / FAVORİ / YORUMLAR ═══
 * Tasarım (`KartEylemleri`): üç eylem üç farklı iş — paylaşım gezgin
 * kararı yalnız vermiyor, favori "şimdi değil sonra", yorum güven.
 * İnce üst çizgiyle ürün bilgisinden ayrılıyor.
 *
 * Boşsa (Viator — `eylemleriBagla` konteyneri kaldırıyor) hiç yer
 * kaplamıyor: `:empty` görünmez.
 */
.uk-eylem{
  display:flex;align-items:center;gap:var(--bosluk-1);
  margin-top:var(--bosluk-1);padding:8px 4px 0;border-top:1px solid #EDF1F3;
}
.uk-eylem:empty{display:none}
/*
 * `.favori-dugme`/`.paylas-dugme` genel tanımı dairesel ikon
 * düğmesi (bkz. styles.css) — burada tasarımın istediği "ikon +
 * yazı, eşit üç parça" biçimine ÖZEL olarak eziliyor.
 */
.uk-eylem .favori-dugme,
.uk-eylem .paylas-dugme,
.uk-eylem-yorum{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;
  min-height:36px;padding:0 6px;border:0;border-radius:0;background:transparent;
  box-shadow:none;backdrop-filter:none;cursor:pointer;
  font-size:11.5px;font-weight:var(--agirlik-kalin);color:var(--ytg-soluk);white-space:nowrap;
  text-decoration:none;transition:color .16s ease;
}
.uk-eylem .favori-dugme svg,
.uk-eylem .paylas-dugme svg{width:15px;height:15px}
.uk-eylem .favori-dugme[aria-pressed="true"]{color:#F2810C}
@media(hover:hover){
  .uk-eylem .favori-dugme:hover,
  .uk-eylem .paylas-dugme:hover,
  .uk-eylem-yorum:hover{color:var(--ytg-siyah)}
}

/* ═══ İSKELET ═══
   Soğuk çağrı 7,3 sn ölçüldü; o süre boyunca ekran BOŞTU ve gezgin
   "bir şey yok" sanıyordu. Parıltı saf CSS, tek istek yok. */
.uk-iskelet{pointer-events:none}
.uk-parilti{
  border-radius:7px;
  background:linear-gradient(90deg,#EDF2F5 25%,#F8FBFC 37%,#EDF2F5 63%);
  background-size:200% 100%;animation:ukParilti 1.4s infinite linear;
}
.uk-iskelet .uk-gorsel .uk-parilti{width:100%;aspect-ratio:4/3;border-radius:0}
.uk-p1{height:14px;width:92%}
.uk-p2{height:14px;width:64%}
.uk-p3{height:16px;width:38%}
@keyframes ukParilti{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Hareketi azalt tercihi: parıltı ve ölçek kapanıyor. */
@media(prefers-reduced-motion:reduce){
  .uk,.uk-parilti{transition:none;animation:none}
  .uk:active{transform:none}
}

/* ═══ VİTRİN BÖLÜMLERİ (v714) ═══
   Tasarımdaki bölüm ritmi: kicker + başlık solda, "Tüm aktiviteler"
   sağda, altında yatay kart şeridi. */
#vitrin{display:flex;flex-direction:column;gap:var(--bosluk-6);padding:8px 0 4px}
.vb{display:flex;flex-direction:column;gap:var(--bosluk-4)}
.vb-bas{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--bosluk-4);padding:0 16px}
.vb-kicker{
  display:block;font-size:12px;font-weight:var(--agirlik-kalin);letter-spacing:var(--harf-kicker);
  text-transform:uppercase;color:var(--ytg-turkuaz-yazi);margin-bottom:3px;
}
.vb-baslik{margin:0;font-size:21px;line-height:1.2;font-weight:var(--agirlik-kalin);color:var(--ytg-ink)}
.vb-sayi{margin-left:var(--bosluk-3);font-size:13px;font-weight:var(--agirlik-orta);color:var(--ytg-soluk)}
/*
 * ═══ "TÜM AKTİVİTELER" BELİRGİN OLACAK (24 Ağustos) ═══
 * KULLANICI, iki ekran görüntüsüyle: "tüm aktiviteleri gör butonu
 * bu şekilde 'Sor' butonu gibi belirgin yap, daha güzel yazı ve
 * renkte yapabilirsin."
 *
 * Önceki hâli soluk turkuaz zeminde turkuaz yazıydı — bölüm
 * başlığının yanında ikincil bir etiket gibi duruyor, basılacak bir
 * şey olduğunu söylemiyordu. Oysa bu düğme gezgini 811 turluk bir
 * listeye götürüyor.
 *
 * Gradyan sohbet çubuğunun "Sor" düğmesiyle AYNI (styles.css:1961):
 * sayfada "bas beni" diyen tek bir dil olsun.
 */
.vb-tumu{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  min-height:38px;padding:0 16px;
  font:800 13px/1 var(--font-arayuz);letter-spacing:-.01em;color:#fff;
  background:linear-gradient(135deg,#16b8b4,#1597d4);
  border-radius:var(--kose-kapsul);white-space:nowrap;text-decoration:none;
  box-shadow:0 4px 14px rgba(21,151,212,.28);
  transition:filter .16s ease,transform .16s ease;
}
.vb-tumu:hover{filter:brightness(.96);transform:translateY(-1px)}
.vb-tumu:active{transform:translateY(0)}
/*
 * Şerit kartların KENDİ genişliğine göre kayıyor. `scroll-padding`
 * ilk kartın kenara yapışmasını önlüyor; `proximity` mandatory'den
 * yumuşak, kısa şeritte zorlama hissi vermiyor.
 */
.vb-serit{
  display:flex;gap:var(--bosluk-4);overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 16px 8px;scrollbar-width:none;scroll-padding-left:16px;
}
.vb-serit::-webkit-scrollbar{width:0;height:0}
.vb-serit>.uk{flex:0 0 78%;max-width:320px;scroll-snap-align:start}
@media(min-width:600px){.vb-serit>.uk{flex:0 0 46%}}

/* ═══ AKTİVİTELER SAYFASI IZGARASI ═══
   Ana sayfadaki `.vb-serit` YATAY kayan bir şerit: gezgin oradan göz
   ucuyla bakıyor. Bu sayfada ise aradığını bulmaya gelmiş, o yüzden
   ızgara — hepsini aynı anda tarayabilsin.

   Kart tanımı (`.uk`) ORTAK: iki yerde iki kart tutmak, birini
   güncelleyip ötekini unutmak demek. Değişen yalnız yerleşim. */
/*
 * ═══ BİR EKRANA DÖRT TUR (24 Ağustos) ═══
 * KULLANICI: "tümünü görde bir sayfada 4 tur olsun, übersichtlich
 * olması için; fotoğraf kutu boyutunu ona göre ayarla."
 *
 * Izgara telefonda TEK sütundu: bir ekrana bir buçuk kart giriyor,
 * gezgin dört tur görmek için üç kez kaydırıyordu. Artık iki sütun
 * × iki satır.
 *
 * Ölçü: 390x844 telefonda üst bar (72) + başlık bloğu (~120) +
 * sohbet çubuğu (76) düşünce kartlara ~570 piksel kalıyor, kart
 * başına ~280. Kart fotoğrafı 4/3 yerine 3/2 (aynı genişlikte 30
 * piksel kısa), başlık iki satıra kırpılıyor, ikincil satırlar
 * sıkışıyor. Fotoğraf yine kartın en büyük parçası.
 */
.akt-izgara{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:2px 16px 8px;
}
@media(min-width:600px){.akt-izgara{grid-template-columns:repeat(3,1fr);gap:var(--bosluk-4)}}
@media(min-width:980px){.akt-izgara{grid-template-columns:repeat(4,1fr)}}

/*
 * ═══ KART BİÇİMİ ANA SAYFAYA GERİ DÖNDÜ (24 Ağustos) ═══
 * KULLANICI: "tüm aktiviteleri gör'e basınca ana sayfada olduğu gibi
 * güzel büyük kartlar olsun, kart biçimleri çok kötü."
 *
 * HAKLIYDI. Önceki tur "bir ekrana dört kart sığsın" isteğini
 * KARTI KÜÇÜLTEREK karşılamıştım: fotoğraf 4/3'ten 3/2'ye inmiş,
 * başlık 15 px'ten 13,5'e, dolgu 14'ten 10'a düşmüştü. Dört kart
 * sığıyordu ama kartlar ucuz görünüyordu.
 *
 * İki istek çelişmiyor: iki sütun × iki satır zaten dört kart eder.
 * Ölçü küçültmeye gerek yok — ana sayfanın oranları (4/3 fotoğraf,
 * 15 px başlık, 16 px fiyat) aynen korunuyor, yalnız ızgara iki
 * sütun kalıyor.
 */
@media(max-width:599px){
  /*
   * Telefonda iki dar sütun fotoğrafı büyütüyor, altındaki bilgi
   * bloğunu da gereksiz uzatıyordu. Kart tek satıra alındı:
   * fotoğraf solda sabit, karar bilgileri sağda. HTML ve tıklama
   * bağları değişmediği için kart, fotoğraf şeridi ve benzer-tur
   * düğmeleri mevcut davranışlarını koruyor.
   */
  .akt-izgara{grid-template-columns:1fr;gap:12px;padding:2px 14px 8px}
  .akt-izgara .uk{
    position:relative;display:grid;grid-template-columns:128px minmax(0,1fr);
    min-height:178px;border:1px solid #e2eaed;
  }
  .akt-izgara .uk-gorsel{
    grid-column:1;grid-row:1;
    min-height:178px;border-radius:17px 0 0 17px;
  }
  .akt-izgara .uk-serit{height:100%;aspect-ratio:auto}
  .akt-izgara .uk-serit>img{height:100%}
  .akt-izgara .uk-fotosuz{height:100%;aspect-ratio:auto}
  .akt-izgara .uk-govde{
    grid-column:2;grid-row:1;
    min-width:0;padding:11px 12px 10px;gap:6px;
  }
  .akt-izgara .uk-baslik{
    font-size:14.5px;line-height:1.28;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .akt-izgara .uk-alt{margin-top:0}
  .akt-izgara .uk-fiyat b{font-size:16px}
  .akt-izgara .uk-bilgi{font-size:11.5px}
  .akt-izgara .uk-puan{font-size:12px}
  .akt-izgara .uk-benzer{
    min-height:34px;padding:5px 7px;border-radius:0;
    border-top:1px solid #e3edef;background:transparent;
  }
  .akt-izgara .uk-benzer svg{display:none}
  .akt-izgara .uk-benzer + .uk-benzer{margin-top:-3px}
  .akt-izgara .uk-sayac{right:7px;bottom:7px;padding:3px 7px}
  .akt-izgara .uk-nokta{bottom:8px}
  /* Eylem satırı (paylaş/favori) dar kartta yer kaplıyor; kart
     zaten tıklanabilir ve favori ürün sayfasında da var. */
  .akt-izgara .uk-eylem{display:none}
}
@media(max-width:350px){
  .akt-izgara .uk{grid-template-columns:112px minmax(0,1fr)}
  .akt-izgara .uk-govde{padding:10px 9px}
  .akt-izgara .uk-fiyat span{display:none}
}

/* Sayfalama düğmesi: sonsuz kaydırma DEĞİL. Sonsuz kaydırmada gezgin
   altbilgiye hiç ulaşamıyor ve "kaçıncı sıradayım" bilgisini
   kaybediyor. */
.daha-fazla{
  display:block;margin:16px auto 32px;padding:12px 22px;
  font-size:14px;font-weight:var(--agirlik-kalin);color:var(--ytg-turkuaz-yazi);
  background:var(--ytg-turkuaz-yumusak);border:0;border-radius:var(--kose-kapsul);cursor:pointer;
  transition:transform .16s ease;
}
.daha-fazla:active{transform:scale(.97)}
.daha-fazla[disabled]{opacity:.55;cursor:default}
/* Activities toggles this class for exhausted pages and unused reset controls.
   The admin-only .gizli rule is not loaded on public pages. */
#aktivitelerSayfa .gizli{display:none!important}
@media(min-width:900px){.vb-serit>.uk{flex:0 0 31%}}

.vb-parilti-metin{
  display:inline-block;min-width:120px;border-radius:6px;
  background:linear-gradient(90deg,#EDF2F5 25%,#F8FBFC 37%,#EDF2F5 63%);
  background-size:200% 100%;animation:ukParilti 1.4s infinite linear;color:transparent;
}
.vb-yukleniyor .vb-baslik{min-width:200px}

/* ═══ ÇİP SATIRI (v718) ═══
   Gezgin arama kutusuna ne yazacağını bilmiyor; çipler dört hazır
   başlangıç veriyor. Tek satır, yatay kaydırma — alt alta düşerse
   aramanın önüne geçer. */
.cip-serit{
  display:flex;gap:var(--bosluk-3);overflow-x:auto;padding:2px 16px 10px;
  scrollbar-width:none;scroll-snap-type:x proximity;
}
.cip-serit::-webkit-scrollbar{width:0;height:0}
.cip{
  flex:0 0 auto;font-size:13.5px;font-weight:var(--agirlik-orta);color:var(--ytg-ink);
  background:#fff;border-radius:var(--kose-kapsul);padding:10px 15px;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(30,58,73,.10);
  transition:transform .14s ease,box-shadow .14s ease;
}
.cip:active{transform:scale(.96)}
@media(hover:hover){.cip:hover{color:var(--ytg-turkuaz-yazi);box-shadow:inset 0 0 0 1px rgba(18,184,178,.45)}}

/* ═══ YOLCULUĞUN GERİ KALANI (v718) ═══
   Aktivite tek başına tatil değil: internet ve araç da aynı yerde.
   Kartlar ALT ALTA, her genişlikte tek sütun: yan yana dizilince
   afiş 145px'e iniyordu ve fotoğrafın içindeki marka okunmuyordu. */
#yolculuk{display:flex;flex-direction:column;gap:var(--bosluk-4);padding:8px 0 4px}

/* ═══════════════════════════════════════════════════════════
   KONUM GİZLİLİK NOTU — DÜĞMENİN ALTINDA
   TASARIM (23 Ağustos): "Yakınındaki aktiviteleri gör" başlığı
   kaldırıldı; not "Konum al" düğmesinin altında tek ince satır.

   Not bir bağlam cümlesi değil, düğmenin yan etkisini anlatıyor:
   düğmeden 300 piksel yukarıda dururken hangi eylemi açıkladığı
   belli olmuyordu.

   Değerler tasarımdan BİREBİR: 11,5px / 1.4 satır — yuvarlanmadı.
   Renk ve yazı ailesi token üzerinden; hardcode yok.
   ═══════════════════════════════════════════════════════════ */
.konum-gizlilik-not{
  margin:10px 0 0;
  text-align:center;
  font:400 11.5px/1.4 var(--font-arayuz);
  color:var(--ytg-soluk);
}

/* ═══════════════════════════════════════════════════════════
   AFİŞ KUTULARI — eSIM ve ARAÇ (tasarım v2, 23 Ağustos)
   Referans: ui_kits/mobil-site/Bolumler.jsx → AfisKutusu

   İki AYRI bölüm, her biri kendi kicker'ıyla. Önceki hâlde ikisi
   tek başlık altında bir ızgaradaydı ve iki farklı hizmet tek
   şeyin parçasıymış gibi okunuyordu.

   Değerler tasarımdan BİREBİR alındı, yuvarlanmadı: radius 14px
   (kart tokenı 18px değil — bu kart değil afiş), düğme 13,5px
   yazı / 40px yükseklik / 14px kenar boşluğu.
   Renkler token üzerinden.

   ═══ SINIF ADI NEDEN `hizmet-afis` ═══
   İlk yazımda `.afis` seçildi ve SESSİZCE bozuldu: depoda ZATEN bir
   `.afis` bileşeni var (assets/afis.js, promosyon şeridi) ve
   styles.css'te `@media(max-width:640px){.afis img{aspect-ratio:16/9}}`
   kuralı bulunuyor. Ölçüldü: 393px'te kutu 16/7 değil 16/9 çıkıyordu.
   Kural benim CSS'imden SONRA gelmediği hâlde kazanıyordu çünkü
   `.afis img` daha spesifik. Ad çakışması böyle görünmez kalıyor.
   ═══════════════════════════════════════════════════════════ */
#yolculuk{display:flex;flex-direction:column;gap:var(--bosluk-5);padding:8px 0 4px}
.hizmet-afis{padding:0 16px}
.hizmet-afis-kicker{
  display:block;margin-bottom:10px;
  font:700 11px/1 var(--font-arayuz);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ytg-turkuaz-yazi);
}
.hizmet-afis-kutu{
  position:relative;display:block;
  border-radius:14px;overflow:hidden;text-decoration:none;
  /* Kutu zemini: afiş yüklenene kadar görünen tek renk. Karşılığı
     olan bir token YOK ve tasarım da düz değer veriyor; görselin
     ARKASINDA kaldığı için palet kararı değil, yükleme zemini. */
  background:#0B1F2E;
  transition:transform .16s ease,box-shadow .16s ease;
}
.hizmet-afis-kutu:active{transform:scale(.985)}
@media(hover:hover){
  .hizmet-afis-kutu:hover{box-shadow:0 14px 28px rgba(3,17,34,.16)}
}
.hizmet-afis-gorsel{display:block;width:100%;aspect-ratio:16/7;object-fit:cover}
/* Keep the car poster heading visible in the shared wide banner. */
.hizmet-afis[data-kod="arac"] .hizmet-afis-gorsel{object-position:top}
.hizmet-afis-dugme{
  position:absolute;left:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:var(--bosluk-2);
  min-height:40px;padding:0 16px;border-radius:var(--kose-kapsul);
  color:#fff;font:700 13.5px/1 var(--font-arayuz);
  box-shadow:0 6px 18px rgba(3,17,34,.35);
}
.hizmet-afis[data-kod="esim"] .hizmet-afis-dugme{background:var(--ytg-turkuaz)}
.hizmet-afis[data-kod="arac"] .hizmet-afis-dugme{background:var(--ytg-turuncu)}

/* ═══════════════════════════════════════════════════════════
   KAHRAMAN VİTRİNİ — 3B HİZMET DESTESİ (tasarım v2, 23 Ağustos)
   Referans: ui_kits/mobil-site/UstBolum.jsx → HeroVitrin

   Düz kayan şerit değil derinlikli vitrin. Sayısal değerler
   tasarımdan BİREBİR: kart 296px, kaydırma 132px, derinlik -140px,
   dönüş 34°, ölçek .93, geçiş .72s cubic-bezier(.22,.68,0,1).
   Yuvarlanmadı.

   ═══ TEK ÖLÇEK DEĞİŞKENİ ═══
   Tasarım mobil ui_kit'inden geliyor: 296px kart, 393px ekran —
   yani ekranın %75,3'ü. Masaüstünde 296px kart geniş sayfanın
   ortasında kaybolurdu. Bu yüzden geometri TEK değişkene bağlı
   (--hv-en) ve diğer ölçüler ondan türüyor; oranlar tasarımdakiyle
   AYNI kalıyor, yeni bir tasarım uydurulmuyor. Üst sınır 560px:
   ötesinde yan kartlar ekrandan taşıyor.
   ═══════════════════════════════════════════════════════════ */
.hv{
  --hv-en:clamp(296px,75vw,560px);
  --hv-kaydir:calc(var(--hv-en) * 132 / 296);
  --hv-derinlik:calc(var(--hv-en) * -140 / 296);
}
.hv-sahne{
  position:relative;
  /* Kart yüksekliği (en / 1.62) + yansıma 26px + 5px pay = 214px @296 */
  height:calc(var(--hv-en) / 1.62 + 31px);
  perspective:1100px;perspective-origin:50% 46%;
  transform-style:preserve-3d;overflow:hidden;
  /* Kenarlarda yumuşak kesim: yan kartlar sahneden çıkarken
     sert kırpılmıyor, siliniyor. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
  /* Yatay sürükleme bize, dikey kaydırma sayfaya: bu olmadan
     tarayıcı parmağı kendi kaydırması için alıyor ve pointer
     olayları iptal ediliyor — deste sürüklenemez oluyordu. */
  touch-action:pan-y;
}
.hv-halo{
  position:absolute;left:50%;top:52%;
  width:calc(var(--hv-en) * 340 / 296);height:calc(var(--hv-en) * 150 / 296);
  transform:translate(-50%,-50%);
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,159,176,.20),rgba(0,159,176,0) 70%);
  filter:blur(6px);pointer-events:none;
}
.hv-kart{
  position:absolute;left:50%;top:50%;width:var(--hv-en);
  padding:0;border:0;background:transparent;cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.22,.68,0,1),opacity .5s ease,filter .5s ease;
  /* Konum JS'ten değil, veri özniteliğinden: aktif karta göre
     hesaplanan fark (-1, 0, 1) `data-fark` olarak yazılıyor. */
  transform:translate(-50%,-50%)
    translateX(calc(var(--hv-fark,0) * var(--hv-kaydir)))
    translateZ(var(--hv-z,0px))
    rotateY(calc(var(--hv-fark,0) * -34deg))
    scale(var(--hv-olcek,1));
  opacity:var(--hv-saydam,1);
  filter:var(--hv-filtre,none);
}
.hv-kart[data-fark="0"]{--hv-fark:0;--hv-z:0px;--hv-olcek:1;--hv-saydam:1;--hv-filtre:none;z-index:10}
/* Initial HTML positions match the ring before deferred JavaScript executes. */
.hv-kart[data-fark="1"]{--hv-fark:1}
.hv-kart[data-fark="-1"]{--hv-fark:-1}
.hv-kart:not([data-fark="0"]){
  --hv-z:var(--hv-derinlik);--hv-olcek:.93;--hv-saydam:.82;
  --hv-filtre:saturate(.82) brightness(.94);z-index:9;
}
.hv-kart[data-uzak="1"]{--hv-saydam:0;pointer-events:none;z-index:8}
.hv-kutu{
  position:relative;display:block;border-radius:var(--kose-buyuk);overflow:hidden;
  box-shadow:0 10px 22px -10px rgba(3,17,34,.30);
}
.hv-kart[data-fark="0"] .hv-kutu{
  box-shadow:0 2px 4px rgba(3,17,34,.10),0 26px 46px -12px rgba(3,17,34,.42),0 0 0 1px rgba(255,255,255,.55) inset;
}
.hv-gorsel{display:block;width:100%;height:auto;aspect-ratio:1.62/1;object-fit:cover}
/* Keep the car poster heading visible in the carousel frame. */
.hv-kart[data-kod="arac"] .hv-gorsel{object-position:top}
/* Kenar ışığı: cam kart hissini veren tek hairline. */
.hv-kenar{
  position:absolute;inset:0;border-radius:var(--kose-buyuk);pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -24px 34px -22px rgba(3,17,34,.34);
}
/* Yansıma: kart yüzeyin üstünde duruyor izlenimi. Yalnız ortadaki. */
.hv-yansima{
  display:block;margin:0 14px;height:26px;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,rgba(3,17,34,.16),rgba(3,17,34,0));
  filter:blur(5px);opacity:0;transition:opacity .5s ease;
}
.hv-kart[data-fark="0"] .hv-yansima{opacity:1}
/* Sağlayıcı kartı: manzara görünür kalır, metin ayrı açık cam panelde durur. */
.hv-yazi{
  position:relative;isolation:isolate;
  width:100%;aspect-ratio:1.62/1;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,5vw,36px);text-align:left;
  background:
    url('/assets/gorsel/shop-pamukkale-sea-hero-2026.webp') 56% center/cover no-repeat;
}
.hv-yazi::before{
  content:"";position:absolute;z-index:0;
  top:18px;bottom:18px;left:16px;width:70%;
  border:1px solid rgba(255,255,255,.86);border-radius:20px;
  background:rgba(255,255,255,.91);
  box-shadow:0 12px 36px rgba(18,75,99,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.hv-yazi>*{position:relative;z-index:1}
.hv-kicker{
  align-self:flex-start;padding:7px 10px;
  border:1px solid #cae9e8;border-radius:999px;
  background:#e8f8f6;
  font:700 10px/1 var(--font-arayuz);letter-spacing:.13em;
  text-transform:uppercase;color:#087985;
}
.hv-baslik{
  max-width:64%;margin:15px 0 0;font:700 clamp(19px,2.8vw,27px)/1.17 var(--font-arayuz);
  letter-spacing:var(--harf-kart);color:#153b50;text-wrap:balance;
}
.hv-metin{
  max-width:64%;margin:12px 0 0;font:500 clamp(11px,1.45vw,14px)/1.48 var(--font-arayuz);
  color:#365568;text-wrap:pretty;
}
@media(max-width:520px){
  .hv-yazi{
    padding:18px;
    background-position:68% center;
  }
  .hv-yazi::before{
    top:8px;bottom:8px;left:8px;width:calc(100% - 16px);
    border-radius:15px;background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  .hv-kicker{padding:5px 7px;font-size:8px;letter-spacing:.1em}
  .hv-baslik{max-width:100%;margin-top:9px;font-size:16px;line-height:1.18}
  .hv-metin{max-width:100%;margin-top:7px;font-size:10px;line-height:1.35}
}
/* ═══ GÖSTERGE: SADECE NOKTA, SAHNENİN İÇİNDE ═══
   Etiket yazısı YOK. Kapsül, çerçeve, gölge de YOK — çıplak noktalar.

   Nokta satırı sahnenin ALTINDA ayrı bir satırdı (`padding:10px 0 4px`)
   ve iki şeyi birden bozuyordu: sayfayı o kadar uzatıyor, göstergeyi de
   ait olduğu karttan koparıyordu. Artık sahnenin İÇİNDE, kartın alt
   kenarının altındaki beyaz boşlukta duruyor.

   Ölçüler tasarım kitinden BİREBİR (ui_kits/mobil-site/UstBolum.jsx →
   HeroVitrin): düğme 20×20, nokta 6px yüksek, aktif 20px genişliğinde. */
.hv-noktalar{
  position:absolute;left:50%;bottom:2px;z-index:20;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;
}
.hv-nokta{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;border:0;background:transparent;cursor:pointer;
}
.hv-nokta>span{
  display:block;width:6px;height:6px;border-radius:var(--kose-kapsul);
  background:#D3DFE5;
  transition:width .3s cubic-bezier(.22,.68,0,1),background .25s ease;
}
.hv-nokta.is-active>span{
  width:20px;background:var(--ytg-turkuaz);
  box-shadow:0 1px 4px rgba(0,159,176,.45);
}
@media(prefers-reduced-motion:reduce){
  .hv-kart,.hv-yansima,.hv-nokta>span{transition:none}
}

/* ═══════════════════════════════════════════════════════════
   KATEGORİ IZGARASI
   KULLANICI ŞARTNAMESİ (birebir, yuvarlanmadı):
     12 kutu · iki sütun · İKON YOK
     beyaz zemin · 14px köşe · inset 0 0 0 1px rgba(30,58,73,.10)
     başlık 15px / 600 / #1E3A49
     sayı    12px / #7B8B9A
     iç boşluk 14px 12px · aralık 10px · basınca scale(.97)

   İKON YOK kuralı bilerek: on iki ikon bulmak on iki karar demek ve
   yarısı zorlama çıkıyor ("hamam" için hangi ikon?). Zorlama ikon
   kutuyu süslemiyor, yanlış yönlendiriyor.

   Kutu tıklanınca /aktiviteler?kategori=<anahtar> açılıyor.
   ═══════════════════════════════════════════════════════════ */
.kat-sarmal{padding:14px 16px 0}
.kat-dugme{
  position:relative;width:100%;min-height:48px;
  display:flex;align-items:center;justify-content:center;padding:0 46px;
  border:1px solid #DCE6EC;border-radius:var(--kose-kapsul);background:#fff;
  font:700 14px/1 var(--font-arayuz);color:var(--ytg-ink);cursor:pointer;
  box-shadow:0 1px 2px rgba(3,17,34,.04),0 8px 20px rgba(16,42,67,.06);
}
.kat-ok{
  position:absolute;right:6px;top:50%;width:34px;height:34px;margin-top:-17px;
  display:grid;place-items:center;border-radius:var(--kose-kapsul);
  background:#F3F7F9;color:var(--ytg-turkuaz-yazi);
  transition:transform .18s ease,background .18s ease;
}
.kat-dugme[aria-expanded="true"] .kat-ok{transform:rotate(180deg);background:var(--ytg-turkuaz-yumusak)}
.kat-izgara{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.kat-kutu{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  /* Sol hizalı: üst kap ortalıyor ve kategori adları ortada
     kırılınca liste dağınık görünüyordu. Tasarım sistemi de sol
     diyor (ui_kits/mobil-site → KategoriAcilir). */
  text-align:left;
  padding:14px 12px;border-radius:14px;background:#fff;
  /* Çizgi `border` değil `inset` gölge: kutunun ölçüsünü büyütmüyor,
     böylece iki sütun aynı genişlikte kalıyor. */
  box-shadow:inset 0 0 0 1px rgba(30,58,73,.10);
  text-decoration:none;transition:transform .12s ease,box-shadow .12s ease;
}
.kat-kutu:active{transform:scale(.97)}
@media(hover:hover){
  .kat-kutu:hover{box-shadow:inset 0 0 0 1px rgba(30,58,73,.22)}
}
.kat-ad{font-size:15px;font-weight:var(--agirlik-orta);line-height:1.25;color:var(--ytg-ink)}
.kat-adet{font-size:12px;line-height:1.2;color:var(--ytg-soluk)}

/* ═══ ANA SAYFA ALT BOŞLUĞU ═══
   Tasarım kiti (ui_kits/mobil-site/AnaSayfa.jsx) bölüm sarmalının alt
   dolgusunu 32px'ten 96px'e çıkardı: sabit Sidera çubuğu son kartın
   üstünü kapatıyordu.

   TARAYICIDA ÖLÇÜLDÜ (390×844): bizde `main` alt dolgusu 0px ve
   çubuk örtüşmesi ZATEN YOK — `body:has(.ytg-cubuk){padding-bottom:78px}`
   ile `footer`in 126px alt dolgusu birlikte çubuğu temizliyor
   (son bölümün altı çubuğun 104px üstünde kalıyor).

   Yine de değer birebir uygulanıyor: kitin verdiği nefes payı son
   bölümle altbilgi arasında duruyor, çubuk payının üstüne EKLENİYOR
   değil — o pay `body`de, bu `main`de. */
body.anasayfa main{padding-bottom:96px}

/* ═══ "KENDİ BAŞINA GEZ" — KOYU PANEL ═══
   Tasarım kiti (ui_kits/mobil-site/Bolumler.jsx → KendiBasina):
   sesli rehber bir kategori kutusu değil, AYRI BİR KULVAR; kendi
   koyu gradyan paneliyle beyaz akıştan ayrılıyor.

   Gradyan ve kart gölgesi kitten birebir. Panel kenardan kenara:
   `.vb` genişlik sınırını taşımıyor, taşan kenarlar sayfayı yatay
   kaydırmasın diye negatif kenar boşluğu yerine tam genişlik. */
.vb-koyu{
  padding:30px 0 26px;
  background:linear-gradient(160deg,#0E3B52 0%,#0B5DA8 62%,#0E7C78 100%);
}
.vb-koyu .vb-kicker{color:rgba(255,255,255,.72)}
.vb-koyu .vb-baslik{color:#fff}
.vb-koyu .vb-sayi{color:rgba(255,255,255,.66)}
/* Koyu panelde de aynı düğme: gradyan zaten kendi kontrastını taşıyor. */
.vb-koyu .vb-tumu{box-shadow:0 4px 16px rgba(3,17,34,.32)}
.vb-koyu .uk{box-shadow:0 2px 6px rgba(3,17,34,.18),0 18px 34px rgba(3,17,34,.22)}

/* ═══════════════════════════════════════════════════════════
   ANA SAYFA — TASARIM KİTİ DÜZENİ (24 Ağustos)

   KULLANICI: "eski yüzeysel tasarımı kaldır baştan aşağı bu
   şekilde olsun."

   Kaynak: .claude/skills/yourholidaygpt-design/ui_kits/mobil-site/
   Ölçüler (px, easing, renk) kitten BİREBİR alındı.
   ═══════════════════════════════════════════════════════════ */

/* Üst bölümü karar akışından ayıran ince çizgi. AnaSayfa.jsx:
   height 1, margin '26px 16px 0', background #EDF1F3 */
.as-ayrac{height:1px;margin:26px 16px 0;background:#EDF1F3}

/* ═══ SÜRE KARTI ═══ Kahraman.jsx → SureKarti
   Beyaz kutu, 22px köşe, üstünde 3px marka çizgisi. */
.sure-karti{
  position:relative;z-index:2;
  width:min(1180px,calc(100% - 32px));margin:22px auto 0;
  padding:16px 0 8px;
  background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 1px 2px rgba(3,17,34,.05),0 14px 34px rgba(3,17,34,.10);
}
.sure-karti-cizgi{
  position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--ytg-gradyan-marka);
}
.sure-karti-bas{display:flex;align-items:baseline;gap:8px;padding:0 16px 8px}
.sure-karti-kicker{
  font:800 11px/1.2 var(--font-arayuz);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ytg-turkuaz-koyu);white-space:nowrap;
}
.sure-karti-serit{
  display:flex;gap:8px;overflow-x:auto;padding:0 16px 8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.sure-karti-serit::-webkit-scrollbar{display:none}
.sure-cip{
  flex:0 0 auto;min-height:36px;padding:0 15px;
  border:1px solid #DCE6EC;border-radius:var(--kose-kapsul);
  background:#fff;color:var(--ytg-ink);
  font:700 13px/1 var(--font-arayuz);cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.sure-cip[aria-pressed="true"]{
  border-color:transparent;background:var(--ytg-gradyan-marka);color:#fff;
}

/* ═══ CAZİBELER ═══ Bolumler.jsx → Cazibeler
   3/4 dikey kart, alttan koyu gradyan, ad + adet. */
.cazibe-serit{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.cazibe-serit::-webkit-scrollbar{display:none}
.cazibe-kart{
  flex:0 0 44%;max-width:190px;scroll-snap-align:start;
  position:relative;aspect-ratio:3/4;
  border:0;padding:0;border-radius:20px;overflow:hidden;
  background:var(--surface-gorsel);cursor:pointer;
  box-shadow:0 1px 2px rgba(3,17,34,.05),0 10px 24px rgba(3,17,34,.10);
  transition:var(--gecis-kart);
}
.cazibe-kart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cazibe-perde{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(3,17,34,.82) 100%);
}
.cazibe-yazi{position:absolute;left:12px;right:12px;bottom:12px;text-align:left;color:#fff}
.cazibe-yazi b{display:block;font:700 15px/1.18 var(--font-arayuz);letter-spacing:-.02em}
.cazibe-yazi em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.8)}

/* ═══ BAŞKA BİR YERE Mİ? ═══ Bolumler.jsx → BaskaYer
   Tek kapı: iki destinasyon şeridinin yerine. */
.baska-yer{width:min(1180px,calc(100% - 32px));margin:0 auto}
.baska-yer-kutu{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:20px;border-radius:20px;overflow:hidden;
  text-decoration:none;cursor:pointer;
}
.baska-yer-gorsel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.baska-yer-perde{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(3,17,34,.82),rgba(11,93,168,.62));
}
.baska-yer-yazi{position:relative;color:#fff}
.baska-yer-yazi b{
  display:block;font:700 17px/1.3 var(--font-arayuz);letter-spacing:-.02em;margin-bottom:4px;
}
.baska-yer-yazi em{
  display:block;font-style:normal;font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.78);
}
.baska-yer-ok{position:relative;color:#fff;font-weight:900}

/* ═══ ÖNE ÇIKAN KART ═══ Bolumler.jsx → OneCikan
   Şeritteki ilk ürün büyük ve tam genişlik: cevap bir kart yığınına
   gömülmüyor. Fiyat fotoğrafın üstünde turuncu kapsülde — sayfanın
   en güçlü turuncusu burada. Ölçüler kitten birebir. */
.oc{
  margin:0 16px;border-radius:24px;overflow:hidden;background:#fff;
  box-shadow:0 2px 4px rgba(3,17,34,.06),0 16px 34px rgba(3,17,34,.12);
  transition:var(--gecis-kart);
}
.oc-bag{display:block;color:inherit;text-decoration:none}
.oc-foto{
  position:relative;display:block;aspect-ratio:3/2;background:var(--surface-gorsel);
}
.oc-foto img{width:100%;height:100%;object-fit:cover;display:block}
.oc-perde{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,17,34,.22) 0%,transparent 42%,rgba(3,17,34,.62) 100%);
}
.oc-fiyat{
  position:absolute;right:12px;top:12px;padding:6px 11px;border-radius:var(--kose-kapsul);
  background:var(--ytg-gradyan-turuncu);color:#fff;
  font:800 12.5px/1 var(--font-arayuz);
  box-shadow:0 4px 14px rgba(255,99,55,.34);
}
.oc-yazi{position:absolute;left:16px;right:16px;bottom:14px;color:#fff}
.oc-yazi small{
  font:700 11px/1 var(--font-arayuz);letter-spacing:.1em;text-transform:uppercase;opacity:.82;
}
.oc-yazi h3{
  margin:7px 0 0;font:700 20px/1.2 var(--font-arayuz);letter-spacing:-.025em;color:#fff;
}
.oc-alt{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:12.5px;color:var(--ytg-soluk)}
.oc-alt b{color:var(--ytg-siyah)}
.oc-yildiz{color:var(--ytg-turkuaz)}
/* Koyu panelde de aynı kart: metin rengi kartın kendi zemininden. */
.vb-koyu .oc{box-shadow:0 2px 6px rgba(3,17,34,.24),0 18px 38px rgba(3,17,34,.28)}

/* ═══ BİR GÜN AYIR — LİSTE ═══ Bolumler.jsx → BirGunAyir
   Şerit değil alt alta liste: 116px küçük resim solda, metin sağda.
   80-250 km'lik bir tur günü BAŞTAN ayırmayı gerektiriyor; gezgin
   göz gezdirmiyor KARŞILAŞTIRIYOR ve liste süreyi, mesafeyi, fiyatı
   aynı hizada gösteriyor. */
.vb-liste{display:grid;gap:10px;padding:0 16px}
.bg-satir{
  display:grid;grid-template-columns:116px minmax(0,1fr);
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:var(--golge-kart);transition:var(--gecis-kart);
  color:inherit;text-decoration:none;
}
.bg-gorsel{
  width:100%;height:100%;min-height:116px;object-fit:cover;display:block;
  background:var(--surface-gorsel);
}
.bg-govde{padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.bg-govde h3{
  margin:0;font:var(--tip-kart-baslik);color:var(--ytg-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bg-bilgi{font-size:12px;color:var(--ytg-soluk)}
.bg-alt{
  margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.bg-alt b{font-size:15px;font-weight:var(--agirlik-cok-kalin);color:var(--text-fiyat)}
.bg-puan{font-size:12px;color:var(--ytg-soluk)}
.bg-yildiz{color:var(--ytg-turkuaz)}

/* ═══ KATEGORİ ŞERİDİ İSKELETİ ═══
   Şerit GÖRÜNÜR başlıyor: `hidden` başlarsa kutusu olmaz ve
   `IntersectionObserver` hiç ateşlemez — şerit kendi yüklenmesini
   bekleyen kalıcı bir kilide düşüyordu (tarayıcıda ölçüldü). */
.kserit-iskelet{
  flex:0 0 72%;max-width:300px;aspect-ratio:3/4;border-radius:var(--kose-kart);
  background:linear-gradient(100deg,var(--surface-gorsel) 30%,rgba(255,255,255,.6) 50%,var(--surface-gorsel) 70%);
  background-size:220% 100%;animation:kseritParilti 1.4s linear infinite;
}
@keyframes kseritParilti{from{background-position:180% 0}to{background-position:-40% 0}}
@media(prefers-reduced-motion:reduce){.kserit-iskelet{animation:none}}

/* ═══ FİYATI BİLİNMEYEN ÜRÜN ═══
   "Fiyat için bak" bir fiyat değil, bir not: fiyatı sağlayıcıdan
   canlı sorgu gerektiren ürünlerde çıkıyor. Fiyat gibi kalın ve
   turuncu yazılınca iki satıra sarıp yanındaki düğmeyi eziyordu
   (kullanıcı ekran görüntüsüyle bildirdi). Sakin ve tek satır. */
.urun-fiyatsiz{
  font-size:12.5px;font-weight:var(--agirlik-orta);color:var(--ytg-soluk);
  line-height:1.3;white-space:nowrap;
}

/* ═══ SAYFA ARAMA KUTUSU ═══
   Her sayfada, üst barın hemen altında (kullanıcı isteği). Ana
   sayfada çizilmiyor: orada kahramanın içinde zaten büyük bir kutu
   var. Ölçüler ana sayfadaki kutuyla aynı aileden — aynı işin iki
   yerde farklı görünmesi gezgini şaşırtır. */
.sayfa-arama{
  display:flex;align-items:stretch;
  width:min(1180px,calc(100% - 32px));margin:14px auto 0;
  border:1px solid var(--ytg-cizgi, #DCE6EC);border-radius:16px;background:#fff;
  box-shadow:0 1px 2px rgba(3,17,34,.04),0 10px 26px rgba(16,42,67,.07);
  overflow:hidden;
}
.sayfa-arama-ikon{display:grid;place-items:center;padding:0 0 0 14px;color:#9FB1BD}
.sayfa-arama-ikon svg{width:18px;height:18px}
.sayfa-arama input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:400 14px/1.4 var(--font-arayuz);color:var(--ytg-ink);padding:14px 10px;
}
.sayfa-arama button{
  flex:0 0 auto;margin:5px;padding:0 16px;min-height:42px;
  border:0;border-radius:12px;cursor:pointer;color:#fff;
  font:800 13px/1 var(--font-arayuz);
  background:var(--ytg-gradyan-marka);
  box-shadow:0 4px 14px rgba(18,143,211,.34);
}
.sayfa-arama button:hover{filter:brightness(.97)}
@media(max-width:520px){
  .sayfa-arama{width:calc(100% - 24px);border-radius:14px}
  .sayfa-arama input{padding:12px 8px;font-size:13.5px}
  .sayfa-arama button{padding:0 13px;min-height:38px;font-size:12.5px}
}

/* ═══ AYNI TUR / BENZER TUR ═══
   İki ayrı ilişki, iki ayrı düğme (kullanıcı isteği: "Suluada turu
   benzer değil, aynı tur; benzer turlar Kemer bot turları gibi
   yakınlardan olmalı"). Aynı tur bir KARŞILAŞTIRMA — turkuaz, daha
   belirgin. Benzer bir KEŞİF — nötr, ikincil. */
.uk-ayni{color:var(--ytg-turkuaz-yazi)}
.uk-alternatif{color:var(--ytg-soluk)}
.uk-benzer + .uk-benzer{margin-top:2px}

/*
 * ═══════════════════════════════════════════════════════════════════
 * AKTİVİTELER SÜZGEÇ ÇUBUĞU (v656)
 * ═══════════════════════════════════════════════════════════════════
 * KULLANICI: "arama sayfasındaki filtreler işlevsiz."
 * Sayfada süzgeç arayüzü hiç yoktu; her şey adresten geliyordu.
 *
 * Kategori şeridi YATAY KAYIYOR, sarmıyor: on iki kategori sarınca
 * telefonda üç satır tutuyor ve kartlar ekranın altına düşüyor.
 * Kaydırma çubuğu gizli ama kaydırma açık — ana sayfadaki vitrin
 * şeritleriyle aynı davranış, gezgin hareketi zaten tanıyor.
 */
.akt-suzgec{
  display:flex;flex-direction:column;gap:8px;
  padding:2px 16px 10px;
}
.akt-suzgec-serit{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  /* Çipin gölgesi kırpılmasın diye dikey pay. */
  padding:2px 0 4px;
  scroll-snap-type:x proximity;
}
.akt-suzgec-serit::-webkit-scrollbar{display:none}
.akt-cip{
  flex:0 0 auto;scroll-snap-align:start;
  min-height:36px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--ink);
  font-size:13px;font-weight:700;white-space:nowrap;
  cursor:pointer;transition:.15s ease;
}
.akt-cip:hover{border-color:var(--ytg-turkuaz)}
/*
 * Seçili çip TURKUAZ, turuncu değil: turuncu bu sayfada fiyatın
 * rengi ve iki farklı anlamı aynı renge yüklemek okumayı bozuyor.
 */
.akt-cip.secili{
  border-color:var(--ytg-turkuaz);
  background:var(--ytg-turkuaz);
  color:#fff;
}
.akt-suzgec-alt{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.akt-suzgec-alt .akt-suzgec-serit{flex:1 1 auto;min-width:0}
.akt-sirala select{
  min-height:36px;padding:0 30px 0 12px;
  border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--ink);
  font-size:13px;font-weight:700;
}
.akt-sifirla{
  min-height:36px;padding:0 12px;
  border:0;background:transparent;
  color:var(--ytg-turkuaz);font-size:13px;font-weight:700;
  cursor:pointer;
}

/*
 * ═══ KART FİYATINDA KUR KARŞILIĞI (24 Ağustos) ═══
 * KULLANICI: "TL, euro, dolar, pound seçince ona göre fiyat çıkması
 * gerek."
 *
 * ÖLÇÜLDÜ ("suluada", üst barda EUR seçili): kartlar "15,00 $" ve
 * "32,99 €" yan yana duruyordu — çevrim kartlara hiç uygulanmıyordu.
 *
 * Karşılık ana fiyatın ALTINDA, kendi satırında duruyor. Yan yana
 * koymak dar kartta ikisini de kırpıyordu; "≈" işareti ve soluk ton
 * kesin fiyatla karıştırılmasını önlüyor — ödeme ortağın sitesinde,
 * ilanın kendi para biriminde tahsil ediliyor.
 */
.uk-fiyat .fiyat-yaklasik{
  display:block;
  margin-top:1px;
  color:var(--muted,#7a8a97);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
}