/* ==========================================================================
   LOKASYON MIMARISI
   --------------------------------------------------------------------------
   .lkm — sol sutundaki kirilim agaci (arama kutulu)
   .lkn — sayfa duzeni ve icerik bloklari

   Iki kolon: solda agac, sagda icerik. Agac yapiskan; kullanici uzun tur
   listesini kaydirirken agacta nerede oldugunu kaybetmez. Dar ekranda
   agac soldan acilan bir cekmeceye doner.
   ========================================================================== */
.lkn { display: grid; grid-template-columns: 272px minmax(0, 1fr);
       gap: var(--s5); align-items: start; }

.lkn__ana { min-width: 0; display: flex; flex-direction: column; gap: var(--s5); }


/* ==========================================================================
   1. KIRILIM AGACI (.lkm)
   ========================================================================== */
/* Agac uzunsa sutun DIPTEN yapisir (js/app.js -> yapiskanSutunlar);
   kendi icinde kaydirilmaz. */
.lkm { position: sticky; top: calc(var(--hd-h-s) + var(--s4));
       display: flex; flex-direction: column;
       background: var(--white); border: 1px solid var(--line);
       border-radius: var(--r3); box-shadow: var(--sh1); overflow: hidden; }

.lkm__b { display: flex; align-items: center; justify-content: space-between;
          gap: var(--s3); padding: var(--s3) var(--s4);
          background: var(--g-koyu); }
.lkm__b a { display: inline-flex; align-items: center; gap: 7px;
            font-size: var(--fs-3xs); font-weight: var(--fw-800);
            letter-spacing: var(--ls-cap); text-transform: uppercase;
            color: var(--white); transition: color var(--t1); }
.lkm__b a:hover { color: var(--brand); }
.lkm__b svg { color: var(--brand); }

.lkm__kapa { display: none; align-items: center; justify-content: center;
             width: 30px; height: 30px; margin-right: -6px;
             color: var(--white); border-radius: var(--r1);
             transition: background var(--t1); }
.lkm__kapa:hover { background: rgba(255,255,255,.14); }

/* -- Arama -- */
.lkm__ara { position: relative; display: flex; align-items: center;
            padding: var(--s3); border-bottom: 1px solid var(--line-soft); }
.lkm__ara-i { position: absolute; left: calc(var(--s3) + var(--s3));
              color: var(--tx-faint); pointer-events: none; }
.lkm__ara input { width: 100%; appearance: none; min-height: 40px;
                  padding: 0 32px 0 36px;
                  font-family: var(--font); font-size: var(--fs-3xs);
                  font-weight: var(--fw-500); color: var(--tx);
                  background: var(--mist); border: 1.5px solid transparent;
                  border-radius: var(--r2);
                  transition: border-color var(--t1), background var(--t1),
                              box-shadow var(--t1); }
.lkm__ara input:hover { background: var(--mist-2); }
.lkm__ara input:focus { outline: none; background: var(--white);
                        border-color: var(--brand);
                        box-shadow: 0 0 0 3px var(--brand-50); }
.lkm__ara input::-webkit-search-cancel-button { display: none; }

.lkm__sil { position: absolute; right: calc(var(--s3) + 6px);
            display: inline-flex; align-items: center; justify-content: center;
            width: 22px; height: 22px; color: var(--tx-mute);
            background: var(--line-soft); border-radius: var(--rp);
            transition: all var(--t1); }
.lkm__sil:hover { color: var(--white); background: var(--tx-mute); }

/* -- Arama sonuclari -- */
.lkm__sn { padding: var(--s2); }
.lkm__s { display: block; padding: var(--s2) var(--s3); border-radius: var(--r2);
          transition: background var(--t1); }
.lkm__s:hover, .lkm__s.on { background: var(--brand-50); }
.lkm__s b { display: block; font-size: var(--fs-3xs); font-weight: var(--fw-700);
            color: var(--tx); }
.lkm__s span { display: block; margin-top: 1px; font-size: 9px; line-height: 1.4;
               color: var(--tx-faint); }
.lkm__s mark { color: var(--brand-700); background: none; font-weight: var(--fw-800); }
.lkm__s-yok { padding: var(--s5) var(--s3); font-size: var(--fs-3xs);
              color: var(--tx-mute); text-align: center; }

/* -- Agac -- */
.lkm__ag { padding: var(--s2) var(--s2) var(--s3); }

.lkm__ls { list-style: none; }
.lkm__ls--d1 { padding-left: 11px; margin-left: 9px;
               border-left: 1px solid var(--line-soft); }
.lkm__ls--d2, .lkm__ls--d3 { padding-left: 10px; margin-left: 8px;
                             border-left: 1px solid var(--line-soft); }

.lkm__r { display: flex; align-items: center; gap: 2px; border-radius: var(--r2);
          transition: background var(--t1); }
.lkm__r:hover { background: var(--mist); }
.lkm__r--bu { background: var(--brand-50); }

.lkm__t { flex: none; display: inline-flex; align-items: center; justify-content: center;
          width: 20px; height: 26px; color: var(--tx-faint);
          transition: color var(--t1), transform var(--t2); }
.lkm__t:hover { color: var(--brand); }
.lkm__i--acik > .lkm__r > .lkm__t { transform: rotate(90deg); color: var(--brand); }

.lkm__nk { flex: none; width: 20px; }

.lkm__a { flex: 1; min-width: 0; padding: 5px 2px;
          font-size: var(--fs-3xs); line-height: 1.4; color: var(--tx-soft);
          transition: color var(--t1); }
.lkm__a:hover { color: var(--brand-700); }
.lkm__r--bu .lkm__a { font-weight: var(--fw-800); color: var(--brand-700); }

/* Ust seviyeler daha belirgin: bolge > sehir > yer okunur olsun */
.lkm__ag > .lkm__ls > .lkm__i > .lkm__r > .lkm__a { font-weight: var(--fw-800); color: var(--tx); }
.lkm__ls--d1 > .lkm__i > .lkm__r > .lkm__a { font-weight: var(--fw-700); }

.lkm__n { flex: none; padding-right: var(--s2); font-size: 9px; font-style: normal;
          font-weight: var(--fw-700); color: var(--tx-faint); }
.lkm__r:hover .lkm__n, .lkm__r--bu .lkm__n { color: var(--brand); }


/* ==========================================================================
   2. ICERIK BLOKLARI (.lkn)
   ========================================================================== */
.lkn__blk { padding: var(--s6); background: var(--white);
            border: 1px solid var(--line); border-radius: var(--r3); }
.lkn__blk--acik { padding: 0; background: transparent; border: 0; }

.lkn__b { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
          margin-bottom: var(--s3);
          font-size: var(--fs-h4); font-weight: var(--fw-800);
          letter-spacing: var(--ls-tt); color: var(--tx); }
.lkn__b svg { color: var(--brand); }
.lkn__b i { padding: 3px var(--s3); font-size: 10px; font-weight: var(--fw-700);
            font-style: normal; color: var(--brand-700);
            background: var(--brand-50); border-radius: var(--rp); }

.lkn__ba { margin-bottom: var(--s4); font-size: var(--fs-3xs);
           line-height: 1.65; color: var(--tx-mute); }

/* -- Ozet seridi -- */
.lkn__ist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
            gap: 1px; overflow: hidden;
            background: var(--line); border: 1px solid var(--line);
            border-radius: var(--r3); }
.lkn__is { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s3);
           align-items: center; padding: var(--s4);
           background: var(--white); }
.lkn__is svg { grid-row: span 2; color: var(--brand); }
.lkn__is b { font-size: var(--fs-3xs); font-weight: var(--fw-800); color: var(--tx); }
.lkn__is b a { color: inherit; transition: color var(--t1); }
.lkn__is b a:hover { color: var(--brand); }
.lkn__is small { font-size: 9px; color: var(--tx-faint); }

/* -- Tanitim metni -- */
.lkn__yaz { font-size: var(--fs-2xs); line-height: 1.85; color: var(--tx-soft); }
.lkn__yaz p + p { margin-top: var(--s4); }
.lkn__yaz b { font-weight: var(--fw-700); color: var(--tx); }

.lkn__nz { display: flex; flex-direction: column; gap: 4px;
           padding: var(--s4); margin-top: var(--s5);
           background: var(--brand-50); border: 1px solid var(--brand-200);
           border-radius: var(--r2); }
.lkn__nz span { display: inline-flex; align-items: center; gap: var(--s2);
                font-size: var(--fs-3xs); font-weight: var(--fw-800); color: var(--brand-700); }
.lkn__nz p { font-size: var(--fs-3xs); line-height: 1.65; color: var(--tx-soft); }

/* ==========================================================================
   YER KARTI (.lky) — gorselli
   --------------------------------------------------------------------------
   Kart tamamen fotograf; ad ve sayilar alttaki koyu gecisin uzerine yazilir.
   Duz metin dugmeler yerin ne oldugunu anlatmiyordu; fotograf hem taniyor
   hem tiklanmayi cok daha cok cekiyor.

   Fotografi olmayan yerlerde marka gorseli gelir (img/lokasyon/varsayilan.svg).
   ========================================================================== */
.lkn__yk { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(208px, 100%), 1fr));
           gap: var(--s3); }
.lkn__yk--dar { grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr)); }

.lky { position: relative; display: block; overflow: hidden;
       aspect-ratio: 4 / 3; border-radius: var(--r3);
       background: var(--koyu);
       transition: box-shadow var(--t1), transform var(--t1); }
.lky:hover { box-shadow: var(--sh3); transform: translateY(-3px); }
.lky:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.lky__g { position: absolute; inset: 0; display: block; }
.lky__g img { width: 100%; height: 100%; object-fit: cover;
              transition: transform var(--t3); }
.lky:hover .lky__g img { transform: scale(1.07); }

/* Perde: ad her fotografta okunsun */
.lky__perde { position: absolute; inset: 0;
              background: linear-gradient(to top,
                          rgba(12,23,40,.86) 0%,
                          rgba(12,23,40,.42) 38%,
                          rgba(12,23,40,.06) 70%); }

.lky__i { position: absolute; inset: auto 0 0 0; z-index: 1;
          display: flex; flex-direction: column; gap: 3px;
          padding: var(--s4); }
.lky__ad { font-size: var(--fs-2xs); font-weight: var(--fw-800); line-height: 1.3;
           color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.lky__m { display: flex; flex-wrap: wrap; gap: 5px; }
.lky__m i { padding: 2px var(--s2); font-size: 9px; font-style: normal;
            font-weight: var(--fw-700); color: var(--white);
            background: rgba(255,255,255,.16); border-radius: var(--rp);
            backdrop-filter: blur(3px); }

.lky__ok { position: absolute; right: var(--s3); top: var(--s3); z-index: 1;
           display: inline-flex; align-items: center; justify-content: center;
           width: 30px; height: 30px; color: var(--koyu);
           background: var(--brand); border-radius: var(--rp);
           opacity: 0; transform: translateX(-6px);
           transition: opacity var(--t1), transform var(--t1); }
.lky:hover .lky__ok, .lky:focus-visible .lky__ok { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lky:hover .lky__g img { transform: none; }
}


/* ==========================================================================
   3. TUR IZGARASI VE HARITA
   ========================================================================== */
/* Turlar kart duzeninde: ana sutun dar oldugu icin satir duzeni sikisiyordu */
.lkn__tg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
           grid-auto-rows: 1fr; gap: var(--s4); }

/* -- Harita — her lokasyon sayfasinda -- */
.lkn__hrt-c { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
              background: var(--mist-2)
                          repeating-linear-gradient(45deg, transparent 0 12px,
                                                    rgba(16,30,54,.03) 12px 24px);
              border: 1px solid var(--line); border-radius: var(--r2); }
.lkn__hrt-c iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lkn__krt-n { margin-top: var(--s2); font-size: 9px; color: var(--tx-faint);
              font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4. DANISMANLIK SERIDI
   ========================================================================== */
.lkn__dst { display: flex; align-items: center; justify-content: space-between;
            gap: var(--s5); flex-wrap: wrap;
            padding: var(--s5) var(--s6);
            background: var(--g-koyu); border-radius: var(--r3); }
.lkn__dst span { display: inline-flex; align-items: center; gap: var(--s2);
                 font-size: var(--fs-2xs); font-weight: var(--fw-800); color: var(--white); }
.lkn__dst span svg { color: var(--brand); }
.lkn__dst p { max-width: 52ch; margin-top: 5px; font-size: var(--fs-3xs);
              line-height: 1.65; color: rgba(255,255,255,.7); }
.lkn__dst-e { display: flex; gap: var(--s2); flex-wrap: wrap; }



/* ==========================================================================
   5. DAR EKRAN — agac cekmeceye doner
   ========================================================================== */
.lkn__ac { display: none; align-items: center; gap: 7px;
           min-height: 44px; padding: 0 var(--s4);
           font-family: var(--font); font-size: var(--fs-2xs);
           font-weight: var(--fw-700); color: var(--tx);
           background: var(--white); border: 1.5px solid var(--line);
           border-radius: var(--r2); box-shadow: var(--sh1);
           transition: border-color var(--t1); }
.lkn__ac:hover { border-color: var(--brand-200); }
.lkn__ac svg { color: var(--brand); }
.lkn__ortu { display: none; }

@media (max-width: 1080px) {
  .lkn { display: flex; flex-direction: column; gap: var(--s4); }

  .lkn__ac { display: inline-flex; align-self: flex-start; }

  .lkn__ortu { display: block; position: fixed; inset: 0; z-index: var(--z-ov);
               background: rgba(16,30,54,.5); animation: lkn-ortu .2s var(--e); }

  .lkm { position: fixed; inset: 0 auto 0 0; z-index: var(--z-dr);
         width: min(340px, 90vw); max-height: none;
         border: 0; border-radius: 0; box-shadow: 0 0 60px rgba(16,30,54,.35);
         transform: translateX(-100%); visibility: hidden;
         transition: transform var(--t3), visibility var(--t3); }
  .lkn--acik .lkm { transform: none; visibility: visible; }
  .lkm__kapa { display: inline-flex; }
  /* Cekmecede ic kaydirma zorunlu: panel ekrana sabit */
  .lkm__ag, .lkm__sn { flex: 1; min-height: 0;
                       overflow-y: auto; overscroll-behavior: contain; }
}

@keyframes lkn-ortu { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lkm { transition: none; }
  .lkn__ortu { animation: none; }
}

body.lkn-kilit { overflow: hidden; }

@media (max-width: 620px) {
  .lkn__blk { padding: var(--s4); }
  .lkn__dst { padding: var(--s4); }
  .lkn__dst-e { width: 100%; }
  .lkn__dst-e .bt { flex: 1; justify-content: center; }
}