/* ==========================================================================
   Yerleşim yardımcıları
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 860px; }
.container--flush { padding-inline: 0; }

.section {
  padding-block: clamp(4rem, 8vw, 8rem);
}

.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.section--dark {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}

/* Nötr gri şerit — beyaz sayfa akışını bölmek için */
.section--gray {
  background: var(--c-gray-band);
}

.stack > * + * { margin-top: var(--flow, 1rem); }

.grid {
  display: grid;
  gap: var(--gap, var(--sp-6));
}

.flex-row {
  display: flex;
  align-items: center;
  gap: var(--gap, var(--sp-4));
}

.hide-sm { display: none; }
.hide-lg { display: initial; }

@media (min-width: 1080px) {
  .hide-sm { display: initial; }
  .hide-lg { display: none; }
}

/* --- Kaydırmada beliren öğeler ----------------------------------------
   Gizleme yalnızca JavaScript varken uygulanır (<html class="js">).
   Böylece betik yüklenmezse ya da hata verirse içerik yine görünür. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 28px));
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.js [data-reveal="fade"] { --reveal-y: 0px; }
.js [data-reveal="left"] { transform: translateX(-28px); }
.js [data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-slower) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="clip"].is-revealed { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* --- İkon boyutları ---------------------------------------------------- */
.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.icon--xs { width: 0.875rem; height: 0.875rem; }
.icon--sm { width: 1rem;     height: 1rem; }
.icon--md { width: 1.25rem;  height: 1.25rem; }
.icon--lg { width: 1.5rem;   height: 1.5rem; }

/* --- Görsel sarmalayıcı ------------------------------------------------- */
/* <picture> satır içi bir kutudur; oran verilmiş kapsayıcılarda img'in
   height:100% değeri ona göre çözülür ve görsel kutuyu doldurmaz.
   Bu yüzden medya kapsayıcılarında blok yapılıp kutuyu doldurması sağlanır.
   (.brand picture hariç — orada konumlandırma için satır içi kalmalı.) */
.card__figure picture,
.split__media picture,
.room-row__media picture,
.gallery-item picture,
.page-hero__media picture,
.cta-band__media picture,
.offer-feature__media picture,
.hero__media picture,
.map-embed picture,
.mega__figure picture {
  display: block;
  width: 100%;
  height: 100%;
}