/* ==========================================================================
   Konum şeridi — footer'ın hemen üstünde, kenardan kenara harita

   Referanstaki kalıp: açık zeminli harita, otelin üstünde marka imleci,
   imlecin yanında beyaz bilgi kartı, sağ altta yakınlaştırma düğmeleri.
   Kare otele ortalandığı ve gezdirilmediği için imleç her zaman doğru
   noktada durur; yakınlaştırma kareyi yeniden kurar (bkz. modules/locator.js).
   ========================================================================== */
.locator {
  position: relative;
  /* Harita yüklenene kadar aynı gri tonda bir yüzey durur */
  background: #EBEBEB;
}

.locator__map {
  position: relative;
  height: clamp(420px, 44vw, 620px);
}

/* Harita katmanı — kare, imleç ve düğmeler bunun içinde durur.
   Kart bunun kardeşidir; dar ekranda kanvasın altına akar. */
.locator__canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Harita karesi tıklamayı almaz: sayfa kaydırması harita içinde kaybolmaz
   ve imleç kaymaz. Ayrıntılı gezinme için kartta "Yol Tarifi Al" var.
   Kare, referanstaki gibi renksiz ve soluk görünür: Google'ın gömme
   haritası anahtarsız kullanıldığında tema verilemiyor, bu yüzden renk
   CSS süzgeciyle alınıyor. Yol ve etiket kontrastı korunsun diye
   doygunluk sıfırlanırken kontrast bir tık açılıyor. */
.locator__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}

/* --- Marka imleci — karenin tam ortası, yani otel ------------------------- */
.locator__pin {
  position: absolute;
  z-index: 3;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  /* Geniş ekranda kart zaten açık; imleç yalnızca işaret olarak durur. */
  pointer-events: none;
  cursor: default;
}

.locator__pin-mark {
  /* Daire içindeki logonun yüksekliği. Yüzde vermek işe yaramıyor:
     ızgara satırı içeriğe göre boyutlandığı için 100% döngüye giriyor
     ve tarayıcı görselin doğal boyuna düşüyordu. */
  --mark-size: 2rem;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--c-black);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.55);
}

/* Marka karesi dikey bir görsel (107×200): genişliğe göre ölçeklenince
   dairenin dışına taşıyordu. Yüksekliğe sabitlenip genişliği serbest
   bırakılıyor. */
.locator__pin-mark picture { display: block; }

.locator__pin-mark img {
  display: block;
  width: auto;
  height: var(--mark-size);
}

.locator__pin-label {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--c-white);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-black);
  white-space: nowrap;
}

/* --- Yakınlaştırma ------------------------------------------------------- */
.locator__zoom {
  position: absolute;
  z-index: 3;
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  inset-block-end: clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.locator__zoom-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--c-black);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.locator__zoom-btn:hover { background: var(--c-ink); }
.locator__zoom-btn .icon { width: 1.25rem; height: 1.25rem; }

/* --- Bilgi kartı — imlecin sağında duran pencere -------------------------- */
.locator__card {
  position: absolute;
  z-index: 3;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translateY(-50%);
  margin-inline-start: 1.5rem;
  width: 360px;
  max-width: calc(50% - 3rem);
  background: var(--c-white);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.45);
}

/* Kapatma düğmesi yalnızca dar ekranda, kart haritanın üstünde açıldığında
   görünür; geniş ekranda kart zaten kalıcı olduğu için gizlidir. */
.locator__card-close { display: none; }

.locator__card-figure {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-gray-200);
}

.locator__card-figure picture,
.locator__card-figure img {
  display: block;
  width: 100%;
  height: 100%;
}

.locator__card-figure img { object-fit: cover; }

/* Görselin sol üstünde beyaz marka rozeti (referanstaki kalıp) */
.locator__card-chip {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 5.5rem;
  padding: 0.75rem;
  background: var(--c-white);
}

.locator__card-chip img {
  display: block;
  width: 100%;
  height: auto;
}

.locator__card-body { padding: 1.5rem; }

.locator__card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-base);       /* 16px */
  font-weight: var(--fw-semibold); /* 600 */
  line-height: var(--lh-base);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-black);
}

.locator__card-stars {
  display: inline-flex;
  gap: 0.125rem;
  color: var(--c-gold);
}

.locator__card-stars .icon { width: 0.75rem; height: 0.75rem; }

.locator__card-address {
  margin-top: 0.75rem;
  font-size: var(--fs-sm);         /* 14px */
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-normal);
  color: var(--fg-secondary);
}

.locator__card-cta { margin-top: 1.5rem; }

.locator__card-link {
  display: inline-flex;
  margin-top: 1rem;
  font-size: var(--fs-sm);
}

.locator__card-link .icon { width: 1.125rem; height: 1.125rem; }

/* --- Dar ekran ----------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Dar ekran

   Şerit yalnızca harita kadar yer kaplar: kart artık haritanın altında
   akmıyor, imlece dokununca haritanın üstünde bir bilgi penceresi olarak
   açılıyor (referanstaki kalıp). Böylece footer'ın üstünde boşluk kalmıyor.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .locator__map {
    height: auto;
    padding-bottom: 0;
  }

  .locator__canvas {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
  }

  /* İmleç dokunulabilir bir düğme olur */
  .locator__pin {
    pointer-events: auto;
    cursor: pointer;
  }

  .locator__pin:focus-visible {
    outline: 2px solid var(--c-black);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
  }

  .locator__pin-mark {
    --mark-size: 1.75rem;
    width: 3rem;
    height: 3rem;
    padding: 0.625rem;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .locator.is-card-open .locator__pin-mark { transform: scale(0.9); }

  /* --- Kart: haritanın üstünde açılan bilgi penceresi ------------------- */
  .locator__card {
    position: absolute;
    z-index: 4;
    inset-inline: 1rem;
    inset-block-end: 1rem;
    inset-block-start: auto;
    transform: none;
    margin: 0;
    width: auto;
    max-width: none;
    display: none;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.5);
  }

  .locator.is-card-open .locator__card {
    display: block;
    animation: locator-card-in var(--dur-base) var(--ease-out);
  }

  @keyframes locator-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  .locator__card-close {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 3;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: var(--c-black);
    cursor: pointer;
  }

  .locator__card-close .icon { width: 1.125rem; height: 1.125rem; }

  /* Pencere yüksek olmasın: görsel ince şerit, dolgular sıkı */
  .locator__card-figure { aspect-ratio: 3 / 1; }
  .locator__card-chip { width: 4.5rem; padding: 0.5rem; }
  .locator__card-body { padding: 1.25rem; }
  .locator__card-address { margin-top: 0.5rem; }
  .locator__card-cta { margin-top: 1rem; }
  .locator__card-link { margin-top: 0.75rem; }

  /* Yakınlaştırma düğmeleri: kart kapalıyken sağ altta, açıkken sağ üstte */
  .locator__zoom {
    inset-inline-end: 0.75rem;
    inset-block-end: 0.75rem;
    flex-direction: row;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  .locator__zoom-btn { width: 2.75rem; height: 2.75rem; }  /* 44px dokunma alanı */

  /* Kart açıkken düğmeler pencerenin altında kalmasın */
  .locator.is-card-open .locator__zoom {
    inset-block-end: auto;
    inset-block-start: 0.75rem;
  }
}

@media (max-width: 419px) {
  .locator__canvas { aspect-ratio: 1 / 1; }
  .locator__card { inset-inline: 0.75rem; inset-block-end: 0.75rem; }
  .locator__pin-label { font-size: 0.6875rem; padding: 0.1875rem 0.625rem; }
}