/* Bölüm 05 · Destek bekleyen haneler (kart stili: css/temel/bilesenler.css) */

.haneler {
  padding-block: clamp(40px, 5vw, 64px) clamp(16px, 2vw, 24px);
}

/* Sekmeler: hap biçimli düğmeler */
.sekmeler {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sekmeler::-webkit-scrollbar {
  display: none;
}

.sekme {
  flex: none;
  padding: 9px 16px;
  border: 1px solid var(--renk-cizgi-koyu);
  border-radius: 999px;
  background: var(--renk-zemin);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--renk-metin);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.sekme:hover {
  border-color: var(--renk-orman);
}

.sekme[aria-selected="true"] {
  border-color: var(--renk-orman);
  background: var(--renk-orman);
  font-weight: 600;
  color: var(--renk-zemin);
}

/* Kaydırmalı kart şeridi: masaüstünde 4, tablette 3–2, telefonda 1 kart (yanında bir sonrakinin ucu) */
.haneler__kaydirici {
  position: relative;
}

.hane-izgarasi {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 20px) / 4);
  gap: 20px;
  margin: -12px calc(var(--kenar) * -1) -24px;
  padding: 12px var(--kenar) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--kenar);
  scrollbar-width: none;
}

.hane-izgarasi::-webkit-scrollbar {
  display: none;
}

.hane-izgarasi > * {
  scroll-snap-align: start;
}

.haneler__oku {
  position: absolute;
  top: 34%;
  z-index: 2;
}

.haneler__oku--geri {
  left: -22px;
}

.haneler__oku--ileri {
  right: -22px;
}

.bos-durum {
  grid-column: 1 / -1;
  width: 100%;
  padding: 40px 24px;
  border-radius: var(--yaricap-kocaman);
  background: var(--renk-gri);
  text-align: center;
  color: var(--renk-soluk);
}

.hane-izgarasi:has(.bos-durum) {
  grid-auto-columns: 100%;
}

.haneler__alt {
  margin-top: 24px;
}

/* Çubuk renk açıklaması */
.lejant {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 0.8125rem;
  color: var(--renk-metin);
}

.lejant__oge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lejant__ornek {
  flex: none;
  width: 22px;
  height: 7px;
  border-radius: 4px;
}

.lejant__ornek--onaylanan {
  background: var(--renk-orman);
}

.lejant__ornek--bildirilen {
  background: repeating-linear-gradient(135deg, var(--renk-yaprak-soluk) 0 4px, var(--renk-yaprak-soluk-2) 4px 8px);
}

.haneler__not {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--renk-soluk);
}

@media (max-width: 1100px) {
  .hane-izgarasi {
    grid-auto-columns: calc((100% - 2 * 20px) / 3);
  }
}

@media (max-width: 1280px) {
  .haneler__oku--geri {
    left: -8px;
  }

  .haneler__oku--ileri {
    right: -8px;
  }
}

@media (max-width: 820px) {
  .hane-izgarasi {
    grid-auto-columns: calc((100% - 20px) / 2);
  }
}

@media (max-width: 560px) {
  /* Telefonda kartlar kendi boyunda kalır (en uzun karta göre uzayıp boş alan bırakmaz) */
  .hane-izgarasi {
    grid-auto-columns: 84%;
    gap: 14px;
    align-items: start;
  }

  .haneler__oku {
    display: none;
  }
}