/* ==========================================================================
   Site Header — Fairmont kalıbı

   Dört şerit, yukarıdan aşağı:
     .header__promo     duyuru (sıcak vurgu zemini, ortalanmış)
     .header__bar       marka şeridi (beyaz; yardımcı bağlantı · logo · eylem)
     .header__nav-bar   menü şeridi (siyah; büyük harf menü + rezervasyon)
     .booking-bar       rezervasyon çubuğu

   Durumlar:
     .is-stuck   → hero bitti; header artık yapışık (fixed) ve kompakt
     .is-hidden  → aşağı kaydırırken gizlenir (varsayılan kapalı)
     .has-mega   → mega menü açık

   Yapışma: hero'dayken header sayfa akışının başında `position: absolute`
   durur — hero fotoğrafının üzerine biner ama sayfayla birlikte kayıp
   gözden kaybolur (üç şerit boyunca "sticky" görünmesin diye). Hero
   bitince (.is-stuck) `position: fixed`e geçer ve yukarıdan kayarak
   (header-drop-in) görünüme girer; o andan sonra viewport'un tepesine
   yapışık kalır (bkz. header.js).
   ========================================================================== */

/* Şeritler kendi zeminlerini boyar: duyuru opak, marka opak beyaz, menü
   yarı saydam. Bu yüzden header'ın kendisinde zemin yok — menü şeridi
   hero fotoğrafının üzerinde durabilsin. */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  background: transparent;
  color: var(--c-ink);
}

.site-header.is-stuck {
  position: fixed;
  animation: header-drop-in 520ms var(--ease-soft);
}

@keyframes header-drop-in {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.site-header.is-stuck.is-hidden { transform: translateY(-100%); }
.site-header.has-mega { transform: none !important; }

/* Header ve mega geniş konteyner kullanır */
.site-header .container,
.mega .container {
  max-width: var(--container-wide);
  padding-inline: clamp(1.25rem, 2.6vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   1 — Duyuru şeridi
   -------------------------------------------------------------------------- */
.header__promo {
  height: var(--header-promo-h);
  background: var(--c-gold);
  color: var(--c-white);
  overflow: hidden;
  transition:
    height var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.site-header.is-stuck .header__promo,
.header__promo.is-dismissed {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.promo__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--header-promo-h);
}

.promo__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-normal);
}

.promo__link {
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.promo__link:hover { opacity: 0.78; }

.promo__short { display: none; }

.promo__close {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-white);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.promo__close .icon { width: 1.5rem; height: 1.5rem; }
.promo__close:hover { opacity: 0.7; }

@media (max-width: 767px) {
  /* Metin iki satıra düşebilir; şerit sabit yükseklik yerine içeriğe uyar. */
  .header__promo { height: auto; }
  .promo__inner {
    height: auto;
    min-height: var(--header-promo-h);
    padding-block: 0.5rem;
    padding-inline-end: 2rem;
  }
  .promo__text {
    flex-wrap: nowrap;
    gap: 0.5rem;
    font-size: var(--fs-3xs);
    line-height: var(--lh-3xs);
  }
  .promo__full,
  .promo__link { display: none; }
  /* Kısa cümlenin kendisi bağlantı: altı çizili, tek satır */
  .promo__short {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--c-white);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  .site-header.is-stuck .header__promo,
  .header__promo.is-dismissed { height: 0; min-height: 0; }
  .site-header.is-stuck .promo__inner,
  .header__promo.is-dismissed .promo__inner { min-height: 0; padding-block: 0; }
}

/* --------------------------------------------------------------------------
   2 — Marka şeridi
   -------------------------------------------------------------------------- */
.header__bar {
  position: relative;
  z-index: 2;
  background: var(--c-white);
  box-shadow: var(--shadow-header);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: var(--header-main-h);
  transition: height var(--dur-base) var(--ease-out);
}

.site-header.is-stuck .header__inner { height: var(--header-main-h-sm); }

.header__side {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 0;
  min-width: 0;
}

.header__side--end { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Masaüstünde yapışık hâl: yalnızca logo + rezervasyon düğmesi kalır
   (yardımcı bağlantılar ve dil seçici gizlenir); yukarı kaydırınca menü
   şeridi logonun yanında görünür. Rezervasyon çubuğunun üstte sabitlenmesi de burada iptal edilir —
   masaüstünde başlıktan başka hiçbir şey yapışık kalmaz (bkz. booking-bar.css
   ve booking-dock.js).
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .site-header.is-stuck .header__side:not(.header__side--end) { display: none; }
  .site-header.is-stuck .header__side--end .lang-flags { display: none; }

  /* Rezervasyon düğmesi menü şeridinin üstünde kalsın: .header__bar kendi
     yığın bağlamını (z-index:2) kurduğu için içindeki öğeler bundan
     kaçamaz — o yığın bağlamını burada kaldırıp düğmenin bulunduğu
     .header__side--end'i doğrudan .site-header düzeyinde, menü şeridinden
     (z-index:3) daha yükseğe çıkarıyoruz. */
  .site-header.is-stuck .header__bar {
    position: static;
    z-index: auto;
  }

  .site-header.is-stuck .header__side--end {
    position: relative;
    z-index: 4;
    /* Bu kutu esneyerek şeridin neredeyse tamamını kaplar (logodan sağ
       kenara kadar). Menü şeridi (z-index:3) altında kaldığı için, boş
       kalan kısmı menü bağlantılarının tıklama alanını yutuyordu —
       yalnızca en soldaki bir iki bağlantı tıklanabiliyordu. Kutunun
       kendisi tıklamayı geçirsin, içindeki gerçek öğeler yakalasın. */
    pointer-events: none;
  }

  .site-header.is-stuck .header__side--end > * { pointer-events: auto; }

  .site-header.is-stuck .brand {
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }

  .site-header.is-stuck .brand {
    position: relative;
    z-index: 4;
  }

  .site-header.is-stuck .header__nav-bar {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 3;
    height: var(--header-main-h-sm);
    /* Ayrı (siyah) bir şerit gibi inmesin — marka şeridiyle aynı beyaz
       zeminde gibi görünsün, yalnızca içeriği (menü) kayarak gelsin. */
    background: var(--c-white);
    color: var(--c-nav-ink);
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }

  .site-header.is-stuck .primary-nav__link,
  .site-header.is-stuck .header__nav-bar:hover .primary-nav__link,
  .site-header.is-stuck .header__nav-bar:focus-within .primary-nav__link {
    color: var(--c-nav-ink);
  }

  .site-header.is-stuck .header__nav-bar:hover,
  .site-header.is-stuck .header__nav-bar:focus-within {
    background: var(--c-white);
  }

  .site-header.is-stuck.is-scrolling-up .header__nav-bar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-header.is-stuck .header__nav-inner,
  .site-header.is-stuck .primary-nav__list {
    height: var(--header-main-h-sm);
    align-items: center;
  }

  .site-header.is-stuck .header__nav-inner {
    padding-inline-start: calc(clamp(1.25rem, 2.6vw, 3.5rem) + 11rem);
    padding-inline-end: calc(clamp(1.25rem, 2.6vw, 3.5rem) + 8rem);
  }

  .site-header.is-stuck .primary-nav__list {
    gap: clamp(0.875rem, 1.25vw, 1.375rem);
  }

  .site-header.is-stuck .primary-nav__link { padding-block: 0; }
}

/* --- Yardımcı bağlantılar (telefon · yol tarifi · WhatsApp) ------------ */
.utility__list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.5rem);
}

.utility__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--c-nav-ink);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.utility__link:hover,
.utility__link:focus-visible { color: var(--c-black); }

.utility__link .icon {
  width: 1rem;
  height: 1rem;
  opacity: 0.7;
}

.utility__divider {
  width: 1px;
  height: 1rem;
  background: var(--c-gray-300);
}

@media (max-width: 1279px) {
  .utility__list { display: none; }
}

/* --- Logo (ortada) ----------------------------------------------------- */
/* Kilit iki parçadan oluşur: arma (mark) ve yazı (word). Ayrı olmalarının
   nedeni giriş animasyonu — önce arma belirir, dört yıldız sırayla yanar,
   sonra yazı kendi hizasında soldan sağa açılır. */
.brand {
  --brand-h: 40px;
  position: relative;
  display: block;
  flex: none;
}

.site-header.is-stuck .brand { --brand-h: 34px; }

@media (max-width: 1279px) {
  .brand { --brand-h: 32px; }
  .site-header.is-stuck .brand { --brand-h: 28px; }
}

.brand__lockup {
  display: flex;
  align-items: center;
  height: var(--brand-h);
  gap: calc(var(--brand-h) * 0.16);
  transition:
    height var(--dur-base) var(--ease-out),
    gap var(--dur-base) var(--ease-out);
}

.brand__mark,
.brand__word {
  position: relative;
  display: block;
  flex: none;
}

.brand__mark { height: 100%; aspect-ratio: 107 / 200; }
.brand__word { height: 62%;  aspect-ratio: 532 / 124; }

.brand__mark picture,
.brand__word picture { display: block; height: 100%; }

/* İkinci ton ilkinin üzerine biner */
.brand__mark picture + picture,
.brand__word picture + picture {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.brand__img {
  display: block;
  height: 100%;
  width: auto;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Marka şeridi hep beyaz — koyu logo her durumda görünür */
.brand__img--dark  { opacity: 1; }
.brand__img--light { opacity: 0; }

/* --- Giriş animasyonu: dört yıldız ------------------------------------ */
/* Zaman çizelgesi (ms):
     0    arma yükselerek belirir (yıldızları maskelenmiş hâlde)
   480    1. yıldız yanar — 170 ms arayla 2., 3., 4.
  1120    yazı soldan sağa açılır
  1600    yıldızlar altından marka grisine yatışır
  2150    maske kalkar, SVG yıldızlar raster yıldızlara devreder
   Hareket azaltma tercihinde animasyon yok; SVG katmanı hiç çizilmez. */

.brand__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  display: none;
}

.brand__star-shape,
.brand__star-ring,
.brand__star-glow {
  transform-box: fill-box;
  transform-origin: center;
}

.brand__star-shape {
  fill: var(--c-gold);
}

.brand__star-ring {
  fill: none;
  stroke: var(--c-gold-light);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke; /* 52px armada da 1px kalsın */
}

@media (prefers-reduced-motion: no-preference) {
  .brand__stars { display: block; }

  /* Arma: yıldız delikleri maskelenmiş, aşağıdan yumuşakça yükselir */
  .brand__mark picture {
    /* Maske kimliği kilidin kendi style'ında: header ve alt bilgi ayrı */
    clip-path: var(--brand-star-mask);
    opacity: 0;
    animation:
      brand-mark-rise 640ms var(--ease-out) forwards,
      brand-mark-unmask 1ms linear 2150ms forwards;
  }

  /* Yıldızlar: sırayla yanar, yatışır, devreder */
  .brand__star {
    --t: calc(480ms + var(--i) * 170ms);
    animation: brand-star-out 360ms var(--ease-soft) 2150ms forwards;
  }

  .brand__star-shape {
    opacity: 0;
    transform: scale(0) rotate(-40deg);
    animation:
      brand-star-pop 620ms var(--ease-out) var(--t) forwards,
      brand-star-settle 520ms var(--ease-soft) 1600ms forwards;
  }

  .brand__star-ring {
    opacity: 0;
    transform: scale(0.4);
    animation: brand-star-ring 700ms var(--ease-out) var(--t) forwards;
  }

  .brand__star-glow {
    opacity: 0;
    transform: scale(0.6);
    animation: brand-star-glow 760ms var(--ease-out) var(--t) forwards;
  }

  /* Yazı: yıldızların ardından kendi hizasında açılır */
  .brand__word {
    clip-path: inset(0 100% 0 0);
    animation: brand-reveal 720ms var(--ease-out) 1120ms forwards;
  }
}

@keyframes brand-mark-rise {
  from { opacity: 0; transform: translateY(7%) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

@keyframes brand-mark-unmask {
  from { clip-path: var(--brand-star-mask); }
  to   { clip-path: none; }
}

@keyframes brand-star-pop {
  0%   { opacity: 0; transform: scale(0)    rotate(-40deg); }
  30%  { opacity: 1; }
  55%  {             transform: scale(1.45) rotate(4deg); }
  100% { opacity: 1; transform: scale(1)    rotate(0deg); }
}

@keyframes brand-star-ring {
  0%   { opacity: 0.9; transform: scale(0.4); }
  100% { opacity: 0;   transform: scale(3); }
}

@keyframes brand-star-glow {
  0%   { opacity: 0;   transform: scale(0.6); }
  25%  { opacity: 1; }
  100% { opacity: 0;   transform: scale(3.4); }
}

/* Raster yıldızın rengi: koyu armada #868686, açık armada #A8A8A8 */
@keyframes brand-star-settle {
  to { fill: var(--brand-star-rest, #868686); }
}

@keyframes brand-star-out {
  to { opacity: 0; }
}

@keyframes brand-reveal {
  to { clip-path: inset(0 0 0 0); }
}

/* --- Sağ eylemler ------------------------------------------------------ */
/* Marka şeridinin sağında dil bayrakları ve rezervasyon düğmesi durur. */
.header__side--end { gap: 0.75rem; }

.header__book {
  flex: none;
  min-height: 2.5rem;
  padding: 0.5625rem 1.375rem;
}

/* Dar ekranda rezervasyon düğmesi header'da durmaz: ekranın altındaki
   yapışkan çubuk zaten kalıcı bir "Rezervasyon Yaptır" düğmesi taşıyor.
   Düğme burada dururken marka şeridi sıkışıyor, 360px'te sayfayı yatayda
   12 piksel taşırıyordu. */
@media (max-width: 899px) {
  .header__book { display: none; }
}

/* Dil listesi açıkken marka şeridi menü şeridinin üstüne çıkar.
   Sebep: .header__bar (z-index:2) kendi yığın bağlamını kurar, panelin
   z-index'i o bağlamın dışına çıkamaz; menü şeridi de aynı seviyede ama
   DOM'da sonra geldiği için paneli örtüyordu. Sınıfı lang-menu.js koyar. */
.site-header.has-lang-open .header__bar { z-index: 5; }

/* --- Canlı destek ------------------------------------------------------
   Yalnızca telefon genişliğinde (≤899px) görünür. 900px ve üstünde asistanın
   kendi düğmesi sağ alt köşede belirdiği için buradaki simge gizlenir —
   yoksa tablette ikisi birden çıkıyordu. Sınır assistant.css'teki
   `.assistant__launcher` kuralıyla aynı olmalı. Hamburgerle aynı ölçüde
   (44px) olduğu için ortadaki logo iki yanından eşit boşlukla dengelenir. */
.header__assistant {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-end: -0.75rem;
  color: currentColor;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.header__assistant:hover { opacity: 0.7; }
.header__assistant .icon { width: 1.5rem; height: 1.5rem; }

@media (max-width: 899px) {
  .header__assistant { display: grid; }
}

/* --- Hamburger --------------------------------------------------------- */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-start: -0.75rem;
  color: currentColor;
}

@media (min-width: 1280px) {
  .nav-toggle { display: none; }
}

.nav-toggle__box {
  position: relative;
  display: block;
  width: 22px;
  height: 12px;
}

.nav-toggle__line {
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  background: currentColor;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    width var(--dur-base) var(--ease-out);
}

.nav-toggle__line:nth-child(1) { top: 0; }
.nav-toggle__line:nth-child(2) { top: 50%; transform: translateY(-50%); width: 70%; }
.nav-toggle__line:nth-child(3) { bottom: 0; }

.nav-toggle:hover .nav-toggle__line:nth-child(2) { width: 100%; }

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0;
  width: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   3 — Menü şeridi
   -------------------------------------------------------------------------- */
/* Zemin saf siyah değil, %30 siyah: hero fotoğrafı şeridin altından okunur.
   Kaydırılıp header sayfanın üstüne yapıştığında (artık altında fotoğraf
   yok) opak siyaha döner ki menü beyaz zemin üzerinde kaybolmasın. */
.header__nav-bar {
  display: none;
  position: relative;
  z-index: 2;
  height: var(--header-nav-h);
  background: var(--c-black);
  color: var(--c-white);
  transition: background-color var(--dur-base) var(--ease-out);
}

.site-header.is-transparent .header__nav-bar { background: rgba(0, 0, 0, 0.3); }
.site-header.is-transparent.has-mega .header__nav-bar { background: var(--c-white); }
.site-header.is-transparent .header__nav-bar:hover,
.site-header.is-transparent .header__nav-bar:focus-within { background: var(--c-white); }

@media (min-width: 1280px) {
  .header__nav-bar { display: block; }
}

.header__nav-inner {
  display: flex;
  align-items: center;
  height: var(--header-nav-h);
}

.primary-nav { flex: 1 1 auto; min-width: 0; }

/* Fairmont ölçüsü: öğeler arası 24px, her öğe 28px alt-üst dolgulu */
.primary-nav__list {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  height: var(--header-nav-h);
}

.primary-nav__item { position: static; display: flex; }

/* Menü bağlantısı: 14/22, 500, +0.14px, büyük harf — düğmelerle aynı aile */
.primary-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 1.75rem;          /* 28px — üstten ve alttan */
  font-size: 0.875rem;             /* 14px — gövde basamağıyla aynı, menü belirgin kalsın */
  font-weight: var(--fw-medium);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-white);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Menü şeridinin herhangi bir noktası (yazı üstü, ikon, öğeler arası boşluk
   ya da sağdaki boş alan) üzerine gelince ya da mega panel açıkken tüm şerit
   (yarı saydam siyah zemin) beyaza döner; yazılar okunabilirlik için
   siyaha geçer. */
.header__nav-bar:hover,
.header__nav-bar:focus-within,
.site-header.has-mega .header__nav-bar {
  background: var(--c-white);
}

.header__nav-bar:hover .primary-nav__link,
.header__nav-bar:focus-within .primary-nav__link,
.site-header.has-mega .header__nav-bar .primary-nav__link {
  color: var(--c-black);
}

/* Fairmont'ta etkin öğe 4px kalın alt çizgiyle işaretlenir */
.primary-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Alt çizgi FARE ÜZERİNE GELİNCE ÇİZİLMEZ: menü şeridinin zemini zaten
   beyaza dönüyor, üstüne bir de çizgi binince hareket fazla oluyordu.
   İki durumda kalır:
     · klavyeyle gezinme (`:focus-visible`) — odağın nerede olduğu
       görünmezse klavye kullanıcısı menüde kaybolur,
     · mega panel açıkken (`.is-open`) — hangi başlığın açık olduğunu
       gösteren durum işareti, geçici bir vurgu değil.
   Bulunulan sayfa kasıtlı olarak işaretlenmez (`.is-active` dışarıda). */
.primary-nav__link:focus-visible::after,
.primary-nav__item.is-open > .primary-nav__link::after {
  transform: scaleX(1);
  transform-origin: left center;
}

@media (min-width: 1280px) {
  .site-header.is-stuck .primary-nav__item.is-open > .primary-nav__link::after {
    transform: scaleX(0);
  }

  .site-header.is-stuck .primary-nav__link:focus-visible::after {
    transform: scaleX(1);
  }
}

.primary-nav__link .icon {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.7;
  transition: transform var(--dur-base) var(--ease-out);
}

.primary-nav__item.is-open > .primary-nav__link .icon { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Mobil sadeleşme
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .header__side { flex: 0 0 auto; }
  .brand {
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
  .header__inner { justify-content: space-between; }

  /* Dil seçici mobil menünün içinde zaten var; şeritte yer kaplamasın —
     hamburger + ortalanmış logo + rezervasyon düğmesi 375px'e ancak sığar. */
  .header__bar .lang-flags { display: none; }
}

/* Dar ekranda da logo ortada kalır: solda menü (44px), sağda WhatsApp
   (44px) — iki uç eşit genişlikte olduğu için ortalama şaşmaz. Eskiden
   sağdaki rezervasyon düğmesi yüzünden logo sola kaydırılıyordu; düğme
   artık alttaki yapışkan çubukta. */
@media (max-width: 639px) {
  .header__inner { justify-content: space-between; gap: var(--sp-2); }
}