/* ==========================================================================
   Kartlar — oda, fırsat, etkinlik, mekân, galeri
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ortak kart iskeleti — Fairmont kalıbı

   Düz beyaz dikdörtgen: köşe yok, gölge yok, hover'da kart kıpırdamaz.
   Tek hareket görselin içeriden yavaşça yakınlaşmasıdır. Gövde 32px dolgulu;
   başlık büyük harf 600, açıklama 16/24, en altta çerçeveli CTA + ok bağlantısı.
   -------------------------------------------------------------------------- */
.card {
  /* Kart, koyu (on-dark) bağlamda da kendi beyaz yüzeyini taşır;
     miras yoluyla beyaz metin sızmasın diye renk kapsamı sıfırlanır. */
  --fg-primary: var(--c-ink);
  --fg-heading: var(--c-black);
  --fg-secondary: var(--c-gray-600);
  --fg-muted: var(--c-gray-500);
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--fg-primary);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);   /* 0 */
  overflow: hidden;
}

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

.card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.2s var(--ease-out);
}

.card:hover .card__figure img,
.card:focus-within .card__figure img {
  transform: scale(1.05);
}

/* Görsel üstü ince karartma — etiketler okunsun */
.card__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 42%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.card--overlay .card__figure::after { opacity: 1; }

/* Rozet: görselin üstünde koyu yarı saydam hap */
.card__badge {
  position: absolute;
  z-index: 2;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  padding: 0.375rem 0.875rem;
  background: rgba(0, 0, 0, 0.62);
  color: var(--c-white);
  border-radius: var(--radius-pill);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-3xs);
  letter-spacing: var(--ls-normal);
}

.card__badge--dark { background: rgba(0, 0, 0, 0.62); color: var(--c-white); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.5rem, 2.2vw, 2rem);
}

.card__eyebrow {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-3xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Kart başlığı — büyük harf, 600, 20/28 (Fairmont oda kartı ölçüsü) */
.card__title {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-heading);
}

.card__text {
  margin-top: 0.75rem;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
  color: var(--fg-secondary);
}

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

/* Kartın tamamı tıklanabilir olsun diye başlıktaki bağlantı yayılır */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Kart CTA'sı — düğme/menü ile aynı basamak: 14/22, 500, büyük harf */
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--fg-heading);
}

.card__cta .icon {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--dur-base) var(--ease-out);
}

.card:hover .card__cta .icon { transform: translateX(4px); }

/* Kartlar koyu zeminde de kendi beyaz yüzeyini taşır — metin rengi değişmez. */

/* --------------------------------------------------------------------------
   Oda kartı
   -------------------------------------------------------------------------- */
.room-card .card__figure { aspect-ratio: 16 / 11; }

/* Künye satırı — gövdeyle aynı basamak (16/24), noktalarla ayrılır */
.room-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.75rem;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
  color: var(--fg-primary);
}

.room-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Ayraç maddenin kendisine yapışır — satır başında tek başına kalmaz. */
.room-card__meta span:not(:last-child)::after {
  content: "·";
  margin-inline-start: 0.5rem;
  opacity: 0.45;
}

.room-card__meta .icon { width: 0.9375rem; height: 0.9375rem; opacity: 0.6; }

.room-card__meta .sep { opacity: 0.45; }

/* Yayılmış kart bağlantısının üstünde duran ikincil eylem */
.card__action {
  position: relative;
  z-index: 4;
}

/* Geniş ekranda düğme ve "Odayı incele" aynı satırda durur. Dar ekranda
   satır zorlanmaz: yan yana sığmadıklarında alt alta geçerler, yoksa
   düğmenin oku kartın dışına taşıyordu. */
@media (min-width: 720px) {
  .room-card .card__foot { flex-wrap: nowrap; }
}

.room-card .card__action {
  padding: 0.625rem 1rem;
  min-height: 0;
  font-size: var(--fs-3xs);
}

@media (max-width: 719px) {
  /* Dar ekranda kart içi nefes payı artar, başlık ve künye sıkışmaz. */
  .room-card .card__body { padding: 1.25rem; }
  .room-card .card__title { font-size: var(--fs-base); line-height: var(--lh-base); }
  .room-card .card__foot { gap: 0.75rem; padding-top: 1.25rem; }
  .room-card .card__action,
  .room-card .card__cta { width: 100%; }
  .room-card .card__cta { justify-content: space-between; }
}

/* Geniş oda kartı — liste sayfasında dönüşümlü yerleşim */
@media (min-width: 900px) {
  .room-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }

  .room-row--reverse .room-row__media { order: 2; }
}

.room-row__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--c-gray-200);
}

.room-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.room-row:hover .room-row__media img { transform: scale(1.04); }

.room-row__index {
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-3xs);
  letter-spacing: var(--ls-widest);
  color: var(--fg-muted);
}

/* Oda kartındaki başlıkla aynı basamak — aynı içerik, aynı ölçü. */
.room-row__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);         /* 20px */
  font-weight: var(--fw-semibold); /* 600 */
  line-height: var(--lh-lg);       /* 28px */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-heading);
}

.room-row__text {
  margin-top: 1rem;
  max-width: 52ch;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
  color: var(--fg-secondary);
}

.room-row__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin-top: 1.75rem;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.room-row__spec {
  padding: 0.875rem 1rem;
  background: var(--bg-page);
}

.room-row__spec dt {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-3xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.room-row__spec dd {
  margin-top: 0.25rem;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.room-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   Fırsat kartı
   -------------------------------------------------------------------------- */
/* Anasayfadaki fırsat kartı — referans ölçüsü:
   16/9 görsel, #F7F7F7 gövde, 32/24/12px dolgu, 12px satır aralığı,
   en altta çerçeveli düğme + ok bağlantısı. Kartlar aynı yükseklikte durur;
   düğme şeridi her zaman kartın dibine yaslanır. */
.offer-card {
  background: var(--c-mist);
  height: 100%;
}

.offer-card .card__figure { aspect-ratio: 16 / 9; }

.offer-card .card__body {
  gap: 0.75rem;                    /* 12px */
  padding: 2rem 1.5rem 0.75rem;    /* 32 · 24 · 12 */
}

/* Fırsat kartında başlık oda kartından bir basamak küçük: 16/24 · 600 */
.offer-card .card__title {
  margin-top: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: 0.03em;
}

.offer-card .card__text { margin-top: 0; }

/* Öne çıkan fayda — daire içinde onay imi + tek satır */
.offer-card__usp {
  display: flex;
  align-items: flex-start;
  gap: 1rem;                       /* 16px */
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
  color: var(--fg-heading);
}

.offer-card__usp .icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

/* Faydanın altındaki künye satırı (tarih, kapsam) */
.offer-card__key {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
  color: var(--fg-primary);
}

/* Düğme şeridi — gövdeden ayrı, kartın dibinde */
.offer-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;                /* 24 · 32 */
  margin-top: auto;
  padding: 0.5rem 1.5rem 1.5rem;   /* 8 · 24 · 24 */
}

.offer-card__terms {
  margin-top: 0.875rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-normal);
  color: var(--fg-muted);
}

/* Öne çıkan büyük fırsat */
.offer-feature {
  position: relative;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 46vw, 520px);
  padding: clamp(1.75rem, 3vw, 3rem);
  overflow: hidden;
  color: var(--c-white);
}

.offer-feature__media { position: absolute; inset: 0; z-index: 0; }

.offer-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.offer-feature:hover .offer-feature__media img { transform: scale(1.05); }

.offer-feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.05) 62%);
}

.offer-feature__body { position: relative; z-index: 1; max-width: 40ch; }

.offer-feature__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-display);
  line-height: var(--lh-2xl);
  letter-spacing: var(--ls-display);
}

.offer-feature__text {
  margin-top: 0.75rem;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   Etkinlik satırı
   -------------------------------------------------------------------------- */
.event-list { border-top: 1px solid var(--line-soft); }

.event {
  position: relative;
  display: grid;
  gap: 1rem 2rem;
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--dur-base) var(--ease-out);
}

@media (min-width: 900px) {
  .event {
    grid-template-columns: 160px minmax(0, 1fr) 200px auto;
    align-items: center;
  }
}

.event__when {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.event__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-heading);
}

.event__text {
  margin-top: 0.75rem;
  max-width: 60ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-normal);
  color: var(--fg-secondary);
}

.event__where {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-normal);
  color: var(--fg-secondary);
}

.event__where .icon { opacity: 0.5; }

.event__kind {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-3xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-secondary);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Mekân kartı (yeme-içme)
   -------------------------------------------------------------------------- */
/* Mekân kartı — kutusuz: görsel, altında başlık ve iki satır.
   Basamaklar fırsat kartıyla aynı: 16/24 · 600 başlık, 14/22 metin. */
.venue-card .card__figure { aspect-ratio: 4 / 5; }

/* Kendi logosu olan mekân (Espressolab): başlıkta ad yerine logo */
.venue-logo {
  display: block;
  width: auto;
  height: 1.25rem;
}

.venue-logo--lg { height: clamp(1.5rem, 1.2vw + 1.1rem, 2rem); }

/* İki mekân yan yana (anasayfa): kartlar geniş, dikey kare çok uzun
   kalıyordu — yatay orana geçer. */
@media (min-width: 720px) {
  .card-grid--2 .venue-card .card__figure { aspect-ratio: 3 / 2; }
}

.venue-card .card__body { padding: 1.5rem 0 0; }

.venue-card .card__title {
  margin-top: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: 0.03em;
}

.venue-card .card__text {
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.venue-card__hours {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-normal);
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}

.venue-card__hours .icon { width: 1.125rem; height: 1.125rem; }

/* --------------------------------------------------------------------------
   Izgara yardımcıları
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

@media (min-width: 720px) {
  .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Galeri
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 26vw;
  grid-auto-flow: dense;
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

@media (min-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 11vw;
  }
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--c-gray-200);
  cursor: zoom-in;
}

/* Oranlar hücre yayılımıyla verilir — böylece ızgarada boşluk kalmaz */
.gallery-item--wide   { grid-row: span 1; }
.gallery-item--square { grid-row: span 1; }
.gallery-item--tall   { grid-row: span 2; }

@media (min-width: 900px) {
  .gallery-item--wide   { grid-column: span 2; grid-row: span 2; }
  .gallery-item--square { grid-row: span 2; }
  .gallery-item--tall   { grid-row: span 3; }
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.gallery-item:hover img { transform: scale(1.05); }

/* Sekme şeridi — Fairmont kalıbı: hap değil, ince kural üzerinde
   büyük harf sekmeler; etkin olan 3px alt çizgiyle işaretlenir. */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.gallery-filter {
  position: relative;
  padding: 0 0 0.875rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
  color: var(--fg-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.gallery-filter::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-base) var(--ease-out);
}

.gallery-filter:hover { color: var(--fg-heading); }

.gallery-filter[aria-pressed="true"] { color: var(--fg-heading); }

.gallery-filter[aria-pressed="true"]::after,
.gallery-filter:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.gallery-item[hidden] { display: none; }

/* Büyütme katmanı */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(16, 27, 45, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}

.lightbox img {
  max-width: 100%;
  max-height: 84svh;
  object-fit: contain;
  transform: scale(0.97);
  transition: transform var(--dur-slow) var(--ease-out);
}

.lightbox.is-open img { transform: scale(1); }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--c-white); }

.lightbox__close { top: 1.25rem; inset-inline-end: 1.25rem; }
.lightbox__nav--prev { inset-inline-start: 1rem; }
.lightbox__nav--next { inset-inline-end: 1rem; }

.lightbox__count {
  position: absolute;
  bottom: 1.25rem;
  inset-inline: 0;
  text-align: center;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Oda galerisi — 1 büyük + 4 küçük. 4 sütunda (mobilde 2) ızgara tam dolar.
   -------------------------------------------------------------------------- */
.room-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 30vw;
}

.room-gallery .gallery-item { grid-column: span 1; grid-row: span 1; }

/* İlk kare her zaman büyük */
.room-gallery .gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

@media (min-width: 900px) {
  .room-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 15vw;
  }

  .room-gallery .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}