/* ==========================================================================
   Düğmeler — Fairmont ölçüsü

   Tek biçim: 2px köşe, 1px çerçeve, büyük harf, Montserrat 500,
   16px/24 ve 0.8px harf aralığı. Boy 56px (padding 16px 24px).
   Sitedeki her düğme — rezervasyon, müsaitlik sorgula, kart CTA'sı,
   form gönderimi — bu ölçüyü paylaşır.
   ========================================================================== */

.btn {
  --btn-fg: var(--c-white);
  --btn-bg: var(--c-black);
  --btn-border: var(--c-black);
  --btn-fg-hover: var(--c-white);
  --btn-bg-hover: var(--c-black-hover);
  --btn-border-hover: var(--c-black-hover);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  min-height: 3.5rem;              /* 56px */
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm); /* 2px */
  /* Uzun yazım: kısayolun içindeki var() değişince geçiş yenilenmiyor. */
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);       /* 16px */
  font-weight: var(--fw-medium);   /* 500 */
  line-height: var(--lh-base);     /* 24px */
  letter-spacing: var(--ls-btn);   /* 0.8px */
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  background-color: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  border-color: var(--btn-border-hover);
}

.btn .icon { flex: none; }

/* --- Çeşitler ---------------------------------------------------------- */

/* Açık zemin üzerinde ana eylem */
.btn--solid {
  --btn-fg: var(--c-white);
  --btn-bg: var(--c-black);
  --btn-border: var(--c-black);
  --btn-fg-hover: var(--c-white);
  --btn-bg-hover: var(--c-black-hover);
  --btn-border-hover: var(--c-black-hover);
}

/* .btn--solid ile aynı; ayrım yalnızca anlamsal */
.btn--accent {
  --btn-fg: var(--c-white);
  --btn-bg: var(--c-black);
  --btn-border: var(--c-black);
  --btn-fg-hover: var(--c-white);
  --btn-bg-hover: var(--c-black-hover);
  --btn-border-hover: var(--c-black-hover);
}

/* Koyu zemin üzerinde ana eylem — beyaz dolgu, siyah yazı */
.btn--inverse {
  --btn-fg: var(--c-black);
  --btn-bg: var(--c-white);
  --btn-border: var(--c-white);
  --btn-fg-hover: var(--c-black);
  --btn-bg-hover: var(--c-gray-200);
  --btn-border-hover: var(--c-gray-200);
}

/* Çerçeveli — kart CTA'ları (CHECK RATES kalıbı) */
.btn--outline {
  --btn-fg: var(--c-ink);
  --btn-bg: transparent;
  --btn-border: var(--c-ink);
  --btn-fg-hover: var(--c-white);
  --btn-bg-hover: var(--c-ink);
  --btn-border-hover: var(--c-ink);
}

.btn--outline-light {
  --btn-fg: var(--c-white);
  --btn-bg: transparent;
  --btn-border: var(--c-white);
  --btn-fg-hover: var(--c-black);
  --btn-bg-hover: var(--c-white);
  --btn-border-hover: var(--c-white);
}

/* Yalın metin düğmesi */
.btn--ghost {
  --btn-fg: currentColor;
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg-hover: currentColor;
  --btn-border-hover: transparent;
  border-color: transparent;
  padding-inline: 0.5rem;
  min-height: 2.5rem;
}

/* --- Boyutlar ----------------------------------------------------------
   Küçük boy da aynı aile ve ağırlıkta; yalnızca basamak iner. */
.btn--sm {
  padding: 0.75rem 1.25rem;
  min-height: 2.75rem;             /* 44px */
  font-size: var(--fs-sm);         /* 14px */
  line-height: var(--lh-sm);       /* 22px */
  letter-spacing: var(--ls-btn);
}

.btn--lg {
  padding: 1.125rem 2rem;
  min-height: 3.75rem;             /* 60px */
}

/* Fairmont'un gerçek ölçüsü: 12px/24px dolgu, 48px boy. Anasayfadaki
   "Tüm Fotoğrafları Gör", "Fırsattan Yararlan" ve deneyim kartının
   düğmesi bu basamağı kullanır. */
.btn--md {
  padding: 0.75rem 1.5rem;
  min-height: 3rem;                /* 48px */
}

/* Dolgusu saf siyah değil, gövde mürekkebi (#2F2F2F) — referanstaki
   birincil düğme rengi. */
.btn--ink {
  --btn-fg: var(--c-white);
  --btn-bg: var(--c-ink);
  --btn-border: var(--c-ink);
  --btn-fg-hover: var(--c-white);
  --btn-bg-hover: var(--c-black);
  --btn-border-hover: var(--c-black);
}

.btn--block { display: flex; width: 100%; }

/* --- İkon düğmesi ------------------------------------------------------ */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  color: currentColor;
  transition: background-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.icon-btn:hover { background: rgba(0, 0, 0, 0.06); }
.on-dark .icon-btn:hover { background: rgba(255, 255, 255, 0.14); }

/* --- Ok bağlantısı ----------------------------------------------------
   "SEE DETAILS →" kalıbı: düğmeyle aynı basamak, çerçevesiz. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-base);       /* 16px */
  font-weight: var(--fw-medium);   /* 500 */
  line-height: var(--lh-base);     /* 24px */
  letter-spacing: var(--ls-btn);   /* 0.8px */
  text-transform: uppercase;
  color: var(--fg-heading);
  transition: color var(--dur-fast) var(--ease-out);
}

.arrow-link:hover { color: var(--accent-text); }

.on-dark .arrow-link,
.section--dark .arrow-link { color: var(--c-white); }

.on-dark .arrow-link:hover,
.section--dark .arrow-link:hover { color: var(--c-gold-light); }

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

.arrow-link:hover .icon { transform: translateX(5px); }