/* ==========================================================================
   TUR DETAY SAYFASI
   Baslik · Rota haritasi · Sekmeler · Hizmetler · Rezervasyon · Koltuk
   (Galeri stilleri css/galeri.css icinde — lokasyon sayfalari da kullanir)
   ========================================================================== */

/* ==========================================================================
   1. BASLIK
   ========================================================================== */
.tb { padding-block: var(--s5) var(--s6); background: var(--mist); border-bottom: 1px solid var(--line); }

/* Arka plan gorseli YALNIZCA dar ekranda gorunur (asagidaki 720px bloğu).
   Masaustunde baslik seridi sade kalir, galeri sol sutunun tepesindedir. */
.tb__ard { display: none; }

.tb__yol { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
           font-size: var(--fs-3xs); color: var(--tx-mute); margin-bottom: var(--s4); }
.tb__yol a { transition: color var(--t1); }
.tb__yol a:hover { color: var(--brand); }
.tb__yol svg { opacity: .5; margin-inline: 2px; }
.tb__yol [aria-current] { color: var(--tx); font-weight: var(--fw-600); }

.tb__ust { display: flex; align-items: flex-start; justify-content: space-between;
           gap: var(--s6); }
.tb__sol { min-width: 0; }
.tb__rz  { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.tb__b   { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: var(--ls-tt); }
.tb__rota { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s3);
            font-size: var(--fs-s); color: var(--tx-mute); }
.tb__rota svg { color: var(--brand); flex: none; }

.tb__eyl { flex: none; display: flex; gap: var(--s2); }
.tb__ey  { display: inline-flex; align-items: center; justify-content: center;
           width: 40px; height: 40px; color: var(--tx-soft); background: var(--white);
           border: 1px solid var(--line); border-radius: var(--r2);
           transition: all var(--t1); }
.tb__ey:hover { color: var(--brand); border-color: var(--brand-200); background: var(--brand-50); }
.tb__ey.on    { color: var(--white); background: var(--brand); border-color: var(--brand); }

/* Hizli bilgi seridi */
/* Hizli bilgi seridi galerinin hemen altinda durur */
.tb__bilgi { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1px;
             background: var(--line-soft);
             border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; }
.tb__bi { display: flex; flex-direction: column; align-items: center; gap: 3px;
          padding: var(--s4) var(--s3); text-align: center; background: var(--white); }
.tb__bi svg   { color: var(--brand); }
.tb__bi b     { font-size: var(--fs-2xs); font-weight: var(--fw-700); color: var(--tx); }
.tb__bi small { font-size: 10px; letter-spacing: var(--ls-cap); text-transform: uppercase;
                color: var(--tx-faint); }

@media (max-width: 1024px) { .tb__bilgi { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* [2026] Baslik seridi TUM genisliklerde turun ilk fotografinin uzerinde.
   Masaustunde fotograf bulanik + lacivert perdeli (yalniz atmosfer; net
   hali hemen asagidaki galeride). Dar ekran farklari asagidaki 720px blogunda. */
.tb--ard { position: relative; isolation: isolate; overflow: hidden;
           background: var(--koyu); border-bottom: 0; }
.tb--ard .tb__ard { display: block; position: absolute; inset: 0; z-index: -2;
                    filter: blur(24px) saturate(1.2); transform: scale(1.15); }
/* filtre kapsayicida: img'nin kendi filter'i app.css yukleme efektine (data-yedek) ait */
.tb--ard .tb__ard img { width: 100%; height: 100%; object-fit: cover; }
.tb--ard::after { content: ""; position: absolute; inset: 0; z-index: -1;
                  background: linear-gradient(90deg,
                              rgba(16,30,54,.86) 0%,
                              rgba(16,30,54,.7) 55%,
                              rgba(16,30,54,.5) 100%); }

.tb--ard .tb__yol { color: rgba(255,255,255,.62); }
.tb--ard .tb__yol a { color: rgba(255,255,255,.62); }
.tb--ard .tb__yol a:hover,
.tb--ard .tb__yol [aria-current] { color: var(--white); }

.tb--ard .tb__b { color: var(--white); }
.tb--ard .tb__rota { color: rgba(255,255,255,.82); }

.tb--ard .tb__ey { color: var(--white); background: rgba(255,255,255,.16);
                   border-color: rgba(255,255,255,.28);
                   backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tb--ard .tb__ey:hover { color: var(--white); background: var(--brand);
                         border-color: var(--brand); }
.tb--ard .tb__ey.on { background: var(--brand); border-color: var(--brand); }

@media (max-width: 720px) {
  .tb__ust { flex-direction: column; gap: var(--s4); }
  .tb__bilgi { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tb__b { font-size: var(--fs-h2); }

  /* -----------------------------------------------------------------
     BASLIK BLOGU FOTOGRAFIN UZERINDE
     -----------------------------------------------------------------
     Kirilim + rozet + ad + rota tek basina ekranin ustunu dolduruyor,
     fotografi katlamanin altina itiyordu. Ayni bilgiler ilk fotografin
     uzerine binince hem fotograf en tepeye ciktı hem de blok yaklasik
     yarı yer kapliyor.

     Gorsel <img> olarak duruyor (background-image degil): tarayici onu
     LCP adayi sayip erken indiriyor ve yedek/iskelet duzeni calisiyor.
     ----------------------------------------------------------------- */
  .tb--ard { padding-block: var(--s6) var(--s5);
             min-height: 62vw; display: flex; align-items: flex-end; }
  .tb--ard .tb__ard { filter: none; transform: none; }

  /* Perde: altta koyu, ustte seffaf — yazi her fotografta okunur kalsin */
  .tb--ard::after { background: linear-gradient(to top,
                                rgba(16,30,54,.93) 0%,
                                rgba(16,30,54,.72) 42%,
                                rgba(16,30,54,.3)  100%); }

  .tb--ard .kap { width: 100%; }
  .tb--ard .tb__yol { margin-bottom: var(--s3); }

  /* Eylem dugmeleri sag uste — baslik satirini uzatmasinlar */
  .tb--ard .tb__ust { position: static; }
  .tb--ard .tb__eyl { position: absolute; top: var(--s5); right: var(--gut); }
}



/* ==========================================================================
   4. IKI KOLONLU YERLESIM
   ========================================================================== */
/* align-items: start yerine stretch — yan sutun satirin tamamini kaplar.
   Yapiskan kutunun kayabilecegi alan boylece sol sutun kadar uzun olur:
   kutu sayfa boyunca goz onunde kalir ve en altta dogal olarak birakir.
   'start' iken sutun kisa kaldigi icin kutu birkac yuz pikselde takilip
   kaliyordu. */
.td { display: grid; grid-template-columns: minmax(0,1fr) 366px; gap: var(--s7);
      align-items: stretch; }
/* Galeri ve bilgi seridi kart cercevesi tasimaz; aralarindaki bosluk
   diger bloklardan dar olsun diye .glr kendi alt boslugunu verir. */
.td__ana { min-width: 0; display: flex; flex-direction: column; gap: var(--s6); }
.td__ana > .glr { margin-bottom: calc(var(--s6) * -1 + var(--s4)); }
/* Yapiskanlik sutuna DEGIL kutunun kendisine verilir; boylece guven/iletisim
   bloku sayfayla birlikte kayar ve yapiskan alan kisa kalir. */
.td__yan { display: flex; flex-direction: column; gap: var(--s4); }
.td__yan .rez { position: sticky; top: calc(var(--hd-h-s) + var(--s4)); }
/* Masaustunde yukseklik siniri YOK: ekrana sigmayan kutuyu app.js
   yapiskanSutunlar() yonetir (sayfayla akar, alt ucta kilitlenir — .yks--dip).
   Sinir varken o kod kisaltilmis yuksekligi olcuyor, icerik kutudan tasip
   kesik kaliyordu (or. on kayit formunun "Mesajınız" / "Gönder"i). */
@media (min-width: 1101px) { .td__yan .rez { max-height: none; } }

.td__blk { background: var(--white); border: 1px solid var(--line);
           border-radius: var(--r3); padding: var(--s6); }
.td__b   { display: flex; align-items: center; gap: var(--s3);
           margin-bottom: var(--s4); font-size: var(--fs-h3);
           font-weight: var(--fw-800); letter-spacing: var(--ls-tt); color: var(--tx); }
.td__b svg { color: var(--brand); flex: none; }
.td__b-alt { margin-top: calc(var(--s4) * -1 + 2px); margin-bottom: var(--s4);
             font-size: var(--fs-2xs); color: var(--tx-mute); }

.td__mtn p { margin-bottom: var(--s4); font-size: var(--fs-s); line-height: 1.75; color: var(--tx-soft); }
.td__mtn p:last-child { margin-bottom: 0; }

.td__capraz { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
              margin-top: var(--s5); padding: var(--s4);
              font-size: var(--fs-2xs); color: var(--tx-soft);
              background: var(--brand-50); border: 1px solid var(--brand-200);
              border-radius: var(--r2); }
.td__capraz svg { color: var(--brand); flex: none; }
.td__capraz a { display: inline-flex; align-items: center; gap: 4px;
                font-weight: var(--fw-700); color: var(--brand-700);
                text-decoration: underline; text-underline-offset: 3px; }
.td__capraz a:hover { color: var(--brand); }

@media (max-width: 1100px) {
  .td { grid-template-columns: minmax(0,1fr); }
  .td__yan { position: static; }

  /* -----------------------------------------------------------------
     REZERVASYON: ALTA SABIT SERIT + ACILIR PANEL
     -----------------------------------------------------------------
     Tek sutuna dusunce kutu sayfanin en altinda kaliyor ve fiyati
     gormek icin butun programi kaydirmak gerekiyordu. Serit her zaman
     goz onunde; dokununca ayni kutu asagidan yukari aciliyor.

     Kutu KOPYALANMIYOR — .rez'in kendisi panele donusuyor.
     ----------------------------------------------------------------- */
  /* KATMAN SIRASI (ustten alta)
       .lyt  galeri isik kutusu    --z-tp + 1    (acikken ekranin tamami odur)
       .ckm  mobil menu            --z-tp
       .prd  menu perdesi          --z-tp - 1
       .rezb alt serit             --z-tp - 2    (kapali panelin ustunde)
       .rez  acilan panel          --z-tp - 3
       .rezb__ortu panel perdesi   --z-tp - 4
     Serit panelden YUKARIDA olmali: panel kapaliyken asagi kaydirilmis
     hâlde duruyor ve ust kenari seridin altindan gorunuyordu. */
  .rezb { position: fixed; left: 0; right: 0; bottom: 0;
          z-index: calc(var(--z-tp) - 2);
          display: flex; align-items: center; gap: var(--s4);
          padding: var(--s3) var(--s4);
          /* Centikli telefonlarda ev cubugunun altinda kalmasin */
          padding-bottom: max(var(--s3), env(safe-area-inset-bottom, 0px));
          background: var(--white); border-top: 1px solid var(--line);
          box-shadow: 0 -6px 24px rgba(16,30,54,.14);
          transition: transform var(--t2); }

  /* Seridin ALTINI doldurur. Mobil tarayicilarda sayfa sonunda lastik gibi
     esneyince (overscroll) sabit seridin altinda bir an sayfa zemini
     goruluyor; koyu alt bilgi uzerinde bu siyah bir serit gibi duruyordu.
     Bu dolgu ekran disinda kalir, yalnizca o esneme aninda gorunur. */
  .rezb::after { content: ""; position: absolute; left: 0; right: 0; top: 100%;
                 height: 80px; background: var(--white); }
  .rezb__f { flex: 1; min-width: 0; }
  .rezb__f small { display: block; font-size: 10px; font-weight: var(--fw-700);
                   letter-spacing: var(--ls-cap); text-transform: uppercase;
                   color: var(--tx-mute); }
  .rezb__f b { display: block; font-size: var(--fs-h5); font-weight: var(--fw-800);
               color: var(--brand-700); }
  .rezb__bt { flex: none; min-height: 46px; padding-inline: var(--s5); }

  /* Sayfa sonu seridin altinda kalmasin */
  body.sf-tur .ft { padding-bottom: 84px; }

  /* -- Kutunun kendisi: asagidan acilan panel --
     top: auto SART. Masaustunde kutu position:sticky ve bir 'top' degeri
     tasiyor; o deger burada da gecerli kaliyordu. top + bottom + max-height
     birlikte verilince kutu ASIRI KISITLANIYOR, tarayici bottom'u yok sayip
     ust kenara yapistiriyor ve altta bosluk kaliyor — yukseklik de tam
     max-height'a (88vh = 841px) sabitleniyordu. */
  .td__yan .rez { position: fixed; left: 0; right: 0; bottom: 0; top: auto;
                  z-index: calc(var(--z-tp) - 3);
                  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
                  border: 0; border-radius: var(--r4) var(--r4) 0 0;
                  box-shadow: 0 -14px 44px rgba(16,30,54,.3);
                  transform: translateY(102%);
                  transition: transform .32s var(--e); }
  /* Yapiskan sutun betigi (js/app.js) bu kutuyu da izliyor ve sutun
     uzunsa .yks--dip ile bir 'top' yaziyor. Dar ekranda kutu artik
     yapiskan degil panel; o 'top' yine asiri kisitlama yaratir. */
  .td__yan .rez.yks--dip { top: auto; }

  .rez-acik .td__yan .rez { transform: none; }

  /* Baslik seridi panelin tepesinde sabit kalir: uzun formda kaydirirken
     panelin neresi oldugu kaybolmasin. Tutamak BASLIGIN ICINDE — ayri bir
     serit olarak eklendiginde panelin ustunde bos beyaz bir alan
     olusuyordu ve kutu iki parca gibi duruyordu. */
  .td__yan .rez .rez__bas { position: sticky; top: 0; z-index: 2;
                            padding-top: var(--s5);
                            border-radius: var(--r4) var(--r4) 0 0; }
  .td__yan .rez .rez__bas::before { content: ""; position: absolute; top: 8px;
                                    left: 50%; width: 40px; height: 4px;
                                    margin-left: -20px;
                                    background: rgba(255,255,255,.34);
                                    border-radius: var(--rp); }

  /* Sag ustte kapatma */
  .rez__kapa { display: inline-flex; align-items: center; justify-content: center;
               flex: none; width: 32px; height: 32px; margin-right: -6px;
               color: var(--white); background: rgba(255,255,255,.14);
               border-radius: var(--rp); transition: background var(--t1); }
  .rez__kapa:hover { background: rgba(255,255,255,.28); }

  /* Panel acikken serit asagi kayar: iki dugme ust uste durmasin */
  .rez-acik .rezb { transform: translateY(110%); }

  /* Ortu panelin HEMEN ALTINDA: z-ov (300) sayfa basligini ortuyor ama
     maskot gibi z-dr katmanindaki ogelerin altinda kaliyordu. */
  .rezb__ortu { position: fixed; inset: 0; z-index: calc(var(--z-tp) - 4);
                background: rgba(16,30,54,.55);
                opacity: 0; transition: opacity var(--t2); }
  .rez-acik .rezb__ortu { opacity: 1; }

  body.rez-acik { overflow: hidden; }

  /* Alta sabit serit, yuzen ogelerin yerini isgal ediyor: maskot ve
     "yukari cik" dugmesi seridin ustune cikarilir. Panel acikken ikisi
     de gizlenir — panelin onunde durmalari gereksiz gurultu. */
  body.sf-tur .ai { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.sf-tur .up { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.rez-acik .ai,
  body.rez-acik .up { display: none; }
}
@media (max-width: 560px) { .td__blk { padding: var(--s5) var(--s4); } }


/* ==========================================================================
   5. ROTA HARITASI
   ========================================================================== */
/* --------------------------------------------------------------------------
   ROTA HARITASI — surukle / yakinlastir
   Katmanlar ust uste: karolar → rota (SVG) → duraklar (HTML) → denetimler.
   Hepsi JS ile cizilir; olcu birimi PIKSEL (SVG viewBox degil), boylece
   etiketler her yakinlikta ayni boyda kalir.
   -------------------------------------------------------------------------- */
.hrt { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
       background: #EAF0F6; border: 1px solid var(--line);
       border-radius: var(--r3);
       cursor: grab; touch-action: none; user-select: none; }
.hrt--tut { cursor: grabbing; }

/* -- Karo katmani -- */
.hrt__karo { position: absolute; inset: 0; }
.hrt__karo img { position: absolute; max-width: none; pointer-events: none;
                 /* Rota rengi one ciksin diye karolar hafifce soluklastirilir */
                 opacity: .88; }

/* -- Rota katmani -- */
.hrt__svg { position: absolute; inset: 0; width: 100%; height: 100%;
            pointer-events: none; }

.hrt__iz  { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 7;
            stroke-linecap: round; stroke-linejoin: round; }
.hrt__yol { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
            filter: drop-shadow(0 2px 6px rgba(244,125,24,.45)); }

/* Rota VARSAYILAN OLARAK GORUNUR. Canlandirma yalnizca "Rotayı izle"
   basilinca oynar; onceki surumde cizgi bastan gizliydi ve kullanici
   dugmeye basana kadar rotayi hic goremiyordu. */
/* Sure: 2,6 sn cok hizliydi — rota okunmadan bitiyordu. 5,5 sn,
   ortalama 7-9 duraklik bir rotada her duragi secebilecek hiz.
   Yumusatma DEGIL duz hiz (linear): JS ile cizilen arac isareti de duz
   hizla ilerliyor, egri kullanilsa ikisi birbirinden kopardi. */
.hrt.ciz .hrt__yol { animation: hrt-ciz 5.5s linear backwards; }
@keyframes hrt-ciz {
  from { stroke-dasharray: var(--uz, 3000); stroke-dashoffset: var(--uz, 3000); }
  to   { stroke-dasharray: var(--uz, 3000); stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) { .hrt.ciz .hrt__yol { animation: none; } }

/* Rotayi kat eden isaret */
.hrt__arac { opacity: 0; }
.hrt__arac-d { fill: rgba(244,125,24,.30); }
.hrt__arac-i { fill: var(--brand); }
.hrt.ciz .hrt__arac { opacity: 1; }

/* -- Durak etiketleri -- */
.hrt__etk { position: absolute; inset: 0; pointer-events: none; }
.hrt__e {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--s3) 3px 3px; pointer-events: auto;
  font-size: var(--fs-3xs); font-weight: var(--fw-700); color: var(--koyu);
  white-space: nowrap; background: var(--white);
  border: 1.5px solid var(--white); border-radius: var(--rp);
  box-shadow: 0 3px 10px rgba(16,30,54,.28);
  transition: color var(--t1), background var(--t1), border-color var(--t1);
}
.hrt__e:hover, .hrt__e.on { z-index: 3; color: var(--white);
                            background: var(--brand); border-color: var(--white); }

.hrt__e-n { flex: none; display: inline-flex; align-items: center; justify-content: center;
            width: 20px; height: 20px; font-size: 10px; font-weight: var(--fw-800);
            color: var(--white); background: var(--brand); border-radius: var(--rp); }
.hrt__e:hover .hrt__e-n, .hrt__e.on .hrt__e-n { color: var(--brand); background: var(--white); }

/* [2026/CI] Numara IGNESI her zaman tam durak noktasinda; ad saga acilir
   (varsayilan), sagda yer yoksa sola (--sol), ikisinde de yoksa yalnizca
   numara kalir (--dar), uzerine gelince ad acilir. Eskiden etiket butun
   olarak noktaya ortalaniyordu: ad acilinca igne noktadan kayiyor, yogun
   bolgede neredeyse hicbir ad sigmiyordu. (js/tur.js etiketDagit)
   14.5px = cerceve 1.5 + bosluk 3 + ignenin yarisi 10 */
.hrt__e { transform: translate(-14.5px, -50%); }
.hrt__e--sol { flex-direction: row-reverse; padding: 3px 3px 3px var(--s3);
               transform: translate(calc(-100% + 14.5px), -50%); }
.hrt__e--dar { padding: 3px; transform: translate(-50%, -50%); }
.hrt__e--dar .hrt__e-a { display: none; }
.hrt__e--dar:hover { padding: 3px var(--s3) 3px 3px; transform: translate(-14.5px, -50%); }
.hrt__e--dar:hover .hrt__e-a { display: inline; }

/* -- Yakinlastirma denetimleri -- */
.hrt__zum { position: absolute; right: var(--s3); top: var(--s3); z-index: 3;
            display: flex; flex-direction: column; gap: 4px; }
.hrt__zb { display: inline-flex; align-items: center; justify-content: center;
           width: 34px; height: 34px; color: var(--tx);
           background: rgba(255,255,255,.94); border-radius: var(--r2);
           box-shadow: 0 2px 8px rgba(16,30,54,.20);
           transition: all var(--t1); }
.hrt__zb:hover { color: var(--white); background: var(--brand); }
.hrt__zb--sig { margin-top: var(--s2); }

/* Kaynak gosterimi — OSM kullanim kosulu geregi zorunlu */
.hrt__kynk { position: absolute; right: 6px; bottom: 6px; z-index: 2;
             padding: 2px 7px; font-size: 9px; color: var(--tx-mute);
             background: rgba(255,255,255,.82); border-radius: var(--r1); }
.hrt__kynk a { text-decoration: underline; text-underline-offset: 2px; }
.hrt__kynk a:hover { color: var(--brand); }

/* -- Alt bar: haritanin USTUNDE yuzer, yer kaplamaz -- */
.hrt__bar { position: absolute; left: var(--s3); bottom: var(--s3); z-index: 2;
            display: flex; align-items: center; gap: var(--s3); }
.hrt__oynat { display: inline-flex; align-items: center; gap: var(--s2);
              padding: 8px var(--s4); font-size: var(--fs-3xs); font-weight: var(--fw-700);
              color: var(--white); background: var(--g-brand); border-radius: var(--rp);
              box-shadow: 0 3px 10px rgba(244,125,24,.4);
              transition: transform var(--t1), box-shadow var(--t1); }
.hrt__oynat:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(244,125,24,.5); }
.hrt__ipucu { display: inline-flex; align-items: center; gap: var(--s2);
              padding: 5px var(--s3); font-size: 10px; color: var(--tx-mute);
              background: rgba(255,255,255,.88); border-radius: var(--rp); }

@media (max-width: 720px) {
  .hrt { aspect-ratio: 4 / 3; }
  .hrt__ipucu { display: none; }
}
/* Durak listesi */
/* [2026/CI] Esit boyutlu izgara. Gercek turlarda 15-20 durak var; satir
   sonunda kirilan, yakin yeri olanlari genis olmayanlari dar haplar
   duzensiz duruyordu. Her hucre ayni yukseklikte: numara + ad, altta
   (varsa) tek satira kirpilmis yakin yerler. */
.hrt__ls { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s2);
           margin-top: var(--s4); list-style: none; counter-reset: none; }
.hrt__ls li { display: flex; min-width: 0; }
.hrt__ls a { flex: 1; display: flex; align-items: center; gap: var(--s2); min-width: 0; min-height: 46px;
             padding: 6px var(--s3) 6px 8px; font-size: var(--fs-3xs); font-weight: var(--fw-600);
             color: var(--koyu); background: var(--mist); border: 1px solid transparent;
             border-radius: var(--r2); transition: all var(--t1); }
.hrt__ls a:hover, .hrt__ls a.on { color: var(--white); background: var(--koyu); }
.hrt__ls-n { flex: none; display: inline-flex; align-items: center; justify-content: center;
             width: 22px; height: 22px; font-size: 10px; font-weight: var(--fw-800);
             color: var(--white); background: var(--brand); border-radius: var(--rp); }
.hrt__ls-m { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hrt__ls-m b { font-weight: var(--fw-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrt__ls-m small { font-size: 10px; font-weight: var(--fw-500); color: var(--tx-faint);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrt__ls a:hover .hrt__ls-m small, .hrt__ls a.on .hrt__ls-m small { color: rgba(255,255,255,.7); }
@media (max-width: 560px) { .hrt__ls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }



/* ==========================================================================
   6. SEKMELER
   ========================================================================== */
.skm { display: flex; gap: var(--s2); margin-bottom: var(--s5);
       border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.skm::-webkit-scrollbar { display: none; }
.skm__b { position: relative; display: inline-flex; align-items: center; gap: var(--s2);
          flex: none; padding: var(--s4) var(--s5);
          font-size: var(--fs-xs); font-weight: var(--fw-700); color: var(--tx-mute);
          white-space: nowrap; transition: color var(--t1); }
.skm__b svg { opacity: .6; transition: opacity var(--t1); }
.skm__b:hover { color: var(--tx); }
.skm__b.on { color: var(--brand); }
.skm__b.on svg { opacity: 1; }
.skm__b::after { content: ""; position: absolute; left: var(--s4); right: var(--s4); bottom: -1px;
                 height: 3px; background: var(--g-brand); border-radius: var(--rp) var(--rp) 0 0;
                 transform: scaleX(0); transition: transform var(--t2); }
.skm__b.on::after { transform: scaleX(1); }

/* JS yoksa tum paneller gorunur kalir */
.js .skm__p { display: none; }
.js .skm__p.on { display: block; animation: skm-gir .3s var(--e); }
@keyframes skm-gir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .skm__p.on { animation: none; } }


/* ==========================================================================
   7. TUR PROGRAMI
   ========================================================================== */
.prg { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }

.prg__g { position: relative; background: var(--mist); border: 1px solid transparent;
          border-radius: var(--r3); transition: all var(--t2); }
.prg__g:hover { border-color: var(--line); }
.prg__g.acik { background: var(--white); border-color: var(--brand-200); box-shadow: var(--sh2); }

.prg__bas { display: flex; align-items: center; gap: var(--s4); width: 100%;
            padding: var(--s4) var(--s5); text-align: left; }
.prg__no { flex: none; display: inline-flex; align-items: baseline; gap: 3px;
           min-width: 62px; font-size: var(--fs-h4); font-weight: var(--fw-800);
           color: var(--brand); letter-spacing: var(--ls-tt); }
.prg__no small { font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--tx-mute); }
.prg__ad { flex: 1; min-width: 0; font-size: var(--fs-s); font-weight: var(--fw-700);
           color: var(--tx); line-height: 1.4; }
.prg__ok { flex: none; display: inline-flex; align-items: center; justify-content: center;
           width: 28px; height: 28px; color: var(--brand);
           background: var(--white); border: 1px solid var(--line); border-radius: var(--rp);
           transition: transform var(--t2), background var(--t2); }
.prg__g.acik .prg__ok { transform: rotate(180deg); color: var(--white);
                        background: var(--brand); border-color: var(--brand); }

.prg__gv { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t2); }
.prg__g.acik .prg__gv { grid-template-rows: 1fr; }
.prg__gv-ic { overflow: hidden; min-height: 0; }
.prg__p { padding: 0 var(--s5) var(--s5) calc(var(--s5) + 62px + var(--s4)); }

.prg__lok { flex-wrap: wrap !important; overflow: visible !important;
            mask-image: none !important; -webkit-mask-image: none !important; }
.prg__mtn { margin-top: var(--s4); }
.prg__mtn p { margin-bottom: var(--s3); font-size: var(--fs-2xs); line-height: 1.8; color: var(--tx-soft); }
.prg__mtn p:last-child { margin-bottom: 0; }
.prg__knk { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s4);
            padding: var(--s2) var(--s4); font-size: var(--fs-3xs); color: var(--koyu);
            background: var(--brand-50); border-radius: var(--rp); }
.prg__knk svg { color: var(--brand); }

/* Sitede kayitli tesise baglanan konaklama satiri — kucuk bir otel karti */
.prg__knk--otel { display: flex; align-items: center; gap: var(--s3);
                  max-width: 420px; padding: var(--s2);
                  background: var(--white); border: 1px solid var(--brand-200);
                  border-radius: var(--r2);
                  transition: border-color var(--t1), box-shadow var(--t1),
                              transform var(--t1); }
.prg__knk--otel:hover { border-color: var(--brand); box-shadow: var(--sh2);
                        transform: translateY(-1px); }
.prg__knk-g { flex: none; width: 56px; height: 42px; overflow: hidden;
              background: var(--mist-2); border-radius: var(--r1); }
.prg__knk-g img { width: 100%; height: 100%; object-fit: cover; }
.prg__knk-m { flex: 1; min-width: 0; }
.prg__knk-m small { display: flex; align-items: center; gap: 4px;
                    font-size: 10px; font-weight: var(--fw-700);
                    letter-spacing: var(--ls-cap); text-transform: uppercase;
                    color: var(--tx-mute); }
.prg__knk-m b { display: block; font-size: var(--fs-3xs); font-weight: var(--fw-800);
                color: var(--tx);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prg__knk-m i { display: block; font-size: 10px; font-style: normal; color: var(--tx-faint); }
.prg__knk--otel:hover .prg__knk-m b { color: var(--brand-700); }
.prg__knk-o { flex: none; color: var(--brand); }

.prg__eyl { margin-top: var(--s4); }

@media (max-width: 560px) {
  .prg__bas { gap: var(--s3); padding: var(--s4); }
  .prg__no { min-width: 46px; font-size: var(--fs-s); }
  .prg__p  { padding: 0 var(--s4) var(--s4); }
}


/* ==========================================================================
   8. FIYATLAR VE TARIHLER
   ========================================================================== */
.fyt { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s4); }

.fyt__k { display: flex; flex-direction: column; background: var(--white);
          border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden;
          transition: border-color var(--t2), box-shadow var(--t2); }
.fyt__k:hover { border-color: var(--brand-200); box-shadow: var(--sh2); }
.fyt__k.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }

.fyt__bas { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
            flex-wrap: wrap; padding: var(--s4); background: var(--mist);
            border-bottom: 1px solid var(--line-soft); }
.fyt__trh { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-700); color: var(--tx); }
.fyt__trh i { font-style: normal; color: var(--tx-faint); margin-inline: 2px; }
.fyt__bas .rz { margin-top: 4px; }

.fyt__kalan { flex: none; font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--tx-mute); }
.fyt__kalan b { font-size: var(--fs-2xs); font-weight: var(--fw-800); color: var(--ok); }
.fyt__kalan--az b { color: var(--no); }
.fyt__kalan--yok { color: var(--no); font-weight: var(--fw-700); }

.fyt__t { width: 100%; border-collapse: collapse; }
.fyt__t th, .fyt__t td { padding: 9px var(--s4); font-size: var(--fs-3xs); text-align: left;
                         border-bottom: 1px solid var(--line-soft); }
.fyt__t th { font-weight: var(--fw-500); color: var(--tx-mute); }
.fyt__t td { text-align: right; font-weight: var(--fw-800); color: var(--tx);
             white-space: nowrap; font-variant-numeric: tabular-nums; }
.fyt__t td span { font-size: 10px; font-weight: var(--fw-700); color: var(--tx-mute); }
.fyt__t tr:first-child th { color: var(--tx); font-weight: var(--fw-700); }
.fyt__t tr:first-child td { color: var(--brand); font-size: var(--fs-xs); }

.fyt__sor { padding: var(--s5) var(--s4); font-size: var(--fs-2xs); color: var(--tx-mute); text-align: center; }
.fyt__bt  { margin: var(--s4); margin-top: auto; }

.fyt__not { margin-top: var(--s5); padding: var(--s5); background: var(--mist); border-radius: var(--r3); }
.fyt__not h4 { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3);
               font-size: var(--fs-2xs); font-weight: var(--fw-700); color: var(--tx); }
.fyt__not h4 svg { color: var(--warn); }
.fyt__not ul { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.fyt__not li { position: relative; padding-left: var(--s4);
               font-size: var(--fs-3xs); line-height: 1.7; color: var(--tx-mute); }
.fyt__not li::before { content: "—"; position: absolute; left: 0; color: var(--tx-faint); }


/* ==========================================================================
   10. HIZMETLER
   ========================================================================== */
.hzm { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 720px) { .hzm { grid-template-columns: minmax(0,1fr); } }

.hzm__k { padding: var(--s5); border-radius: var(--r3); border: 1px solid var(--line); }
.hzm__k--var { background: #F3FAF6; border-color: #CDEBDB; }
.hzm__k--yok { background: var(--mist); }

.hzm__b { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4);
          font-size: var(--fs-xs); font-weight: var(--fw-700); color: var(--tx); }
.hzm__k--var .hzm__b svg { color: var(--ok); }
.hzm__k--yok .hzm__b svg { color: var(--tx-faint); }

.hzm__ls { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.hzm__ls li { display: flex; align-items: flex-start; gap: var(--s3);
              font-size: var(--fs-2xs); line-height: 1.6; color: var(--tx-soft); }
.hzm__ls li svg { flex: none; margin-top: 3px; }
.hzm__k--var .hzm__ls svg { color: var(--ok); }
.hzm__k--yok .hzm__ls svg { color: var(--tx-faint); }

.hzm__ek { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line-soft); }
.hzm__cip { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.hzm__cip li { padding: 6px var(--s4); font-size: var(--fs-3xs); font-weight: var(--fw-600);
               color: var(--koyu); background: var(--mist); border-radius: var(--rp); }

.hzm__ek--not .hzm__b svg { color: var(--warn); }
.hzm__ls--not li { position: relative; padding-left: var(--s4); }
.hzm__ls--not li::before { content: ""; position: absolute; left: 0; top: 8px;
                           width: 5px; height: 5px; background: var(--warn); border-radius: var(--rp); }


/* ==========================================================================
   11. REZERVASYON KUTUSU — kisa tutulur
   --------------------------------------------------------------------------
   Yapiskan bir oge ekrandan uzunsa tarayici onu yapistiramaz; kullanici
   kutunun altini gormek icin sol sutunun sonuna inmek zorunda kalir.
   Bu yuzden kutu, laptop yuksekliginde (yaklasik 640px kullanilabilir alan)
   tek parca sigacak kadar kisa: yolcu secimi acilir panelde, guven ve
   iletisim bloku kutunun disinda. Yine de sigmazsa max-height devreye girer
   ve kutu KENDI ICINDE kayar.
   ========================================================================== */
.rez { background: var(--white); border: 1px solid var(--line);
       border-radius: var(--r3); box-shadow: var(--sh2);
       max-height: calc(100vh - var(--hd-h-s) - var(--s6)); }

.rez__bas { display: flex; align-items: center; justify-content: space-between;
            padding: var(--s3) var(--s5); color: var(--white); background: var(--g-koyu);
            border-radius: var(--r3) var(--r3) 0 0; }
.rez__bas-b { display: inline-flex; align-items: center; gap: var(--s2);
              font-size: var(--fs-2xs); font-weight: var(--fw-700); letter-spacing: .03em; }
.rez__bas-b svg { color: var(--brand-200); }
/* Kapatma yalnizca dar ekranda: masaustunde kutu panel degil, sayfanin
   sabit bir parcasi. */
.rez__kapa { display: none; }
.rez__cnl { display: inline-flex; align-items: center; gap: 5px;
            font-size: 10px; font-weight: var(--fw-700); text-transform: uppercase;
            letter-spacing: var(--ls-cap); color: #8FE3B8; }
.rez__cnl i { width: 7px; height: 7px; background: currentColor; border-radius: var(--rp);
              animation: rez-nb 2s var(--e) infinite; }
@keyframes rez-nb { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.rez__frm { padding: var(--s4) var(--s5) var(--s5);
            display: flex; flex-direction: column; gap: var(--s3); }

/* Fiyat — tek satir */
.rez__fiy { display: flex; align-items: baseline; justify-content: center; gap: var(--s3);
            padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); }
.rez__tut { font-size: 1.7rem; font-weight: var(--fw-800);
            letter-spacing: var(--ls-tt); color: var(--brand); line-height: 1.1; }
.rez__tut small { font-size: var(--fs-xs); font-weight: var(--fw-700); margin-left: 2px; }
.rez__tut--sor { font-size: var(--fs-h4); color: var(--tx-mute); }
.rez__on { font-size: var(--fs-3xs); color: var(--tx-mute); }
.rez__on s { color: var(--tx-faint); margin-left: 3px; }

.rez__alan { display: flex; flex-direction: column; gap: 5px; }
.rez__etk { display: inline-flex; align-items: center; gap: 5px;
            font-size: 10px; font-weight: var(--fw-700); letter-spacing: var(--ls-cap);
            text-transform: uppercase; color: var(--tx-faint); }
.rez__etk svg { color: var(--brand); }

.rez__hesap { display: flex; flex-direction: column; gap: 3px;
              padding: var(--s3) var(--s4); background: var(--mist); border-radius: var(--r2); }
.rez__sat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
            font-size: var(--fs-3xs); color: var(--tx-mute); }
.rez__sat b { font-weight: var(--fw-700); color: var(--tx); font-variant-numeric: tabular-nums; }
.rez__sat--top { font-size: var(--fs-2xs); color: var(--tx); font-weight: var(--fw-600); }
.rez__sat--top b { font-size: var(--fs-h4); font-weight: var(--fw-800); color: var(--brand); }
.rez__sat--on { color: var(--ok); }
.rez__sat--on b { color: var(--ok); }

.rez__adim { display: flex; align-items: center; justify-content: center; gap: 5px;
             font-size: 10px; color: var(--tx-faint); }
.rez__adim svg { color: var(--tx-faint); }

/* Kontenjan dolu durumu */
.rez__dolu { display: flex; flex-direction: column; align-items: center; gap: var(--s3);
             padding: var(--s5); text-align: center; }
.rez__dolu svg { color: var(--no); }
.rez__dolu p { font-size: var(--fs-2xs); color: var(--tx); }
.rez__dolu-a { color: var(--tx-mute) !important; font-size: var(--fs-3xs) !important; }
.rez__dolu-l { display: inline-flex; align-items: center; gap: 4px;
               font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--brand-700); }
.rez__dolu-l:hover { color: var(--brand); }

/* -- On rezervasyon formu (kalkis tarihi acilmamis turlar) --
   Kutu ayni; icerigi tarih secimi yerine talep formu. Masaustunde sag
   sutunda, dar ekranda alttan acilan panelde ayni sekilde gorunur. */
.rez__on { gap: var(--s3); }
.rez__on .alan { margin: 0; }
.rez__on-a { display: block; margin-top: 2px;
             font-size: var(--fs-3xs); color: var(--tx-mute); }
.rez__on-b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-700);
             color: var(--tx); }
.rez__on-n { display: flex; align-items: flex-start; gap: 6px;
             padding: var(--s3); font-size: var(--fs-3xs); line-height: 1.6;
             color: var(--brand-700); background: var(--brand-50);
             border: 1px solid var(--brand-200); border-radius: var(--r2); }
.rez__on-n svg { flex: none; margin-top: 2px; color: var(--brand); }
.rez__on textarea.alan__g { min-height: 74px; resize: vertical; }

.rez__uyari { padding: var(--s3); font-size: var(--fs-3xs); line-height: 1.6;
              border-radius: var(--r2); }
.rez__uyari--hata { color: var(--no); background: #FDF0EF; border: 1px solid #F5D2CF; }
.rez__uyari--ok   { color: var(--ok); background: #EAF7F0; border: 1px solid #C9E9D8; }


/* -- Kutu DISINDAKI ek blok: guven + iletisim ------------------------------ */
.rez__ek { background: var(--white); border: 1px solid var(--line); border-radius: var(--r3); }
.rez__guv { list-style: none; display: flex; flex-direction: column; gap: var(--s2);
            padding: var(--s4); border-bottom: 1px solid var(--line-soft); }
.rez__guv li { display: flex; align-items: center; gap: var(--s2);
               font-size: var(--fs-3xs); color: var(--tx-soft); }
.rez__guv svg { color: var(--ok); flex: none; }
.rez__ara { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); }
.rez__ara a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
              padding: 8px; font-size: var(--fs-3xs); font-weight: var(--fw-700);
              color: var(--brand-700); background: var(--mist);
              border: 1px solid var(--line); border-radius: var(--r1);
              transition: all var(--t1); }
.rez__ara a:hover { color: var(--white); background: var(--brand); border-color: var(--brand); }


/* -- Oda/yolcu acilir paneli -> css/yolcu.css */


/* -- Kisa ekranlarda daha da sikilastir ------------------------------------ */
@media (max-height: 760px) {
  .rez__frm { padding: var(--s3) var(--s4) var(--s4); }
  .rez__tut { font-size: 1.5rem; }
  .rez__fiy { padding-bottom: var(--s2); }
  .rez__adim { display: none; }
}
/* Son care: kutu yine sigmiyorsa kendi icinde kaysin */
@media (max-height: 620px) {
  .rez { overflow-y: auto; }
  .ylp__p { position: static; box-shadow: none; animation: none; max-height: none; }
}

/* 12. ODA / YOLCU SECIMI -> css/yolcu.css (ana sayfa aramasi da kullanir) */


/* ==========================================================================
   14. DOLULUK — ince cubuk (rezervasyon kutusunu uzatmasin)
   ========================================================================== */
.dlk { display: flex; flex-direction: column; gap: 5px; }
.dlk__cbk { height: 6px; background: var(--mist-2); border-radius: var(--rp); overflow: hidden; }
.dlk__d { display: block; height: 100%; border-radius: var(--rp); transition: width var(--t3); }
.dlk__d--dolu { background: var(--g-brand); }
.dlk__bilgi { display: flex; align-items: center; gap: 5px;
              font-size: 10px; color: var(--tx-mute); }
.dlk__bilgi svg { color: var(--brand); }
.dlk__bilgi b { font-weight: var(--fw-800); color: var(--tx); }


/* ==========================================================================
   15. GOOGLE HARITA / SEMA SEKMELERI
   ========================================================================== */
.hrt__skm { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.hrt__sb { display: inline-flex; align-items: center; gap: 5px;
           padding: 7px var(--s4); font-size: var(--fs-3xs); font-weight: var(--fw-700);
           color: var(--tx-mute); background: var(--mist);
           border: 1px solid transparent; border-radius: var(--rp);
           transition: all var(--t1); }
.hrt__sb svg { opacity: .6; }
.hrt__sb:hover { color: var(--tx); background: var(--mist-2); }
.hrt__sb.on { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-200); }
.hrt__sb.on svg { opacity: 1; color: var(--brand); }

/* "Haritalarda aç" — serit sagina yaslanir */
.hrt__dis { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
            font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--tx-mute);
            transition: color var(--t1); }
.hrt__dis:hover { color: var(--brand); }
.hrt__dis svg { opacity: .7; }

.js .hrt__p { display: none; }
.js .hrt__p.on { display: block; }

/* Google harita cercevesi */
.gmp { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
       background: linear-gradient(160deg, #F7FAFE, #E6ECF5);
       border: 1px solid var(--line); border-radius: var(--r3); }
.gmp__f { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Harita yuklenmeden once gorunen ortu — istek ancak tiklaninca gider */
.gmp__ac { position: absolute; inset: 0; z-index: var(--z-2);
           display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 6px; text-align: center;
           background: radial-gradient(ellipse at center, rgba(255,255,255,.92), rgba(237,241,246,.96));
           transition: background var(--t2); }
.gmp__ac:hover { background: radial-gradient(ellipse at center, #FFFFFF, rgba(255,244,233,.96)); }
.gmp__ac-i { display: inline-flex; align-items: center; justify-content: center;
             width: 54px; height: 54px; color: var(--white); background: var(--g-brand);
             border-radius: var(--rp); box-shadow: 0 8px 22px rgba(244,125,24,.36);
             transition: transform var(--t2); }
.gmp__ac:hover .gmp__ac-i { transform: scale(1.06); }
.gmp__ac b { font-size: var(--fs-s); font-weight: var(--fw-800); color: var(--tx);
             letter-spacing: var(--ls-tt); }
.gmp__ac small { font-size: var(--fs-3xs); color: var(--tx-mute); }
.gmp__ac em { font-style: normal; font-size: 10px; color: var(--tx-faint); }
.gmp.yuklu .gmp__ac { display: none; }

@media (max-width: 560px) { .gmp { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   16. ROTA HARITASI — GERCEK KARO ZEMIN
   --------------------------------------------------------------------------
   Sema artik OpenStreetMap karolari uzerinde cizilir. Karolar hafifce
   soluklastirilir ki turuncu rota ve durak numaralari one ciksin.
   ========================================================================== */
.hrt__karo image { image-rendering: auto; }

/* Kaynak gosterimi — OSM kullanim kosulu geregi zorunlu */
.hrt__kynk { position: absolute; right: 6px; bottom: 46px; z-index: var(--z-2);
             padding: 2px 7px; font-size: 9px; color: var(--tx-mute);
             background: rgba(255,255,255,.82); border-radius: var(--r1); }
.hrt__kynk a { text-decoration: underline; text-underline-offset: 2px; }
.hrt__kynk a:hover { color: var(--brand); }

.hrt__yol { stroke-width: 4.5;
            filter: drop-shadow(0 2px 7px rgba(244,125,24,.5))
                    drop-shadow(0 0 2px rgba(255,255,255,.9)); }
.hrt__iz  { stroke: rgba(255,255,255,.75); stroke-width: 7; stroke-dasharray: none; }

/* -- Gunun oteli (program gunu icinde; tur_detay.php .prg__otl) ------------ */
.prg__otl { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); padding: var(--s2);
            background: var(--white); border: 1px solid var(--line); border-radius: var(--r2);
            transition: border-color var(--t1), box-shadow var(--t1); }
.prg__otl:hover { border-color: var(--brand-200); box-shadow: var(--sh1); }
.prg__otl img { flex: none; width: 96px; height: 72px; object-fit: cover; border-radius: var(--r1); }
.prg__otl-i { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prg__otl-i small { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: var(--fw-800);
                    letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--brand); }
.prg__otl-i b { font-size: var(--fs-xs); font-weight: var(--fw-800); color: var(--tx); }
.prg__otl-i span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--tx-mute); }
.prg__otl-ok { flex: none; margin-left: auto; padding-right: var(--s2); color: var(--tx-faint); }
.prg__otl:hover .prg__otl-ok { color: var(--brand); }
@media (max-width: 480px) { .prg__otl img { width: 76px; height: 60px; } }

/* -- Tur Hakkinda: uzun metin kisaltma (tur_detay.php .ozk, js ozetKisalt) -- */
.ozk__ic { max-height: 230px; overflow: hidden; position: relative; }
.ozk--uzun .ozk__ic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
                             background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white)); pointer-events: none; }
.ozk.acik .ozk__ic { max-height: none; }
.ozk.acik .ozk__ic::after { display: none; }
.ozk__bt { display: flex; align-items: center; gap: 4px; margin: var(--s2) 0 0 auto; padding: 6px 0;
           font-size: var(--fs-xs); font-weight: var(--fw-800); color: var(--brand); background: none; border: 0; cursor: pointer; }
.ozk__bt:hover { text-decoration: underline; text-underline-offset: 3px; }
.ozk__bt svg { transition: transform var(--t1); }
.ozk.acik .ozk__bt svg { transform: rotate(180deg); }
@media (max-width: 560px) { .ozk__ic { max-height: 260px; } }