/* Otel sayfası — oda ızgarası ve oda detay modalı.
   Kaynak: design/Otel.dc.html */

.oda-liste {
  display: grid; gap: var(--b5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 36px;
}

.oda-kart {
  width: 100%; height: 100%; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--zemin-kart); border: var(--cizgi); border-radius: var(--r-kart);
  transition: border-color 0.15s, transform 0.15s;
}
.oda-kart:hover { border-color: var(--aksan); transform: translateY(-2px); }

.oda-gorsel { position: relative; display: block; height: 170px; background: var(--zemin-alt); }
.oda-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.oda-rozet {
  position: absolute; top: var(--b3); left: var(--b3);
  background: var(--derin); color: var(--aksan-metin);
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-cip);
}

.oda-govde { display: block; padding: var(--b4) 18px 18px; }
.oda-ust { display: flex; gap: var(--b2); justify-content: space-between; align-items: baseline; }
.oda-ad { font-family: var(--baslik-font); font-weight: 800; font-size: 16.5px; }
.oda-fiyat { font-weight: 800; font-size: 14.5px; color: var(--aksan); white-space: nowrap; }
.oda-birim { font-weight: 500; font-size: 11px; color: var(--metin-soluk); }
.oda-meta { display: block; font-size: 12.5px; color: var(--metin-soluk); margin-top: 5px; }
.oda-ok { display: block; font-size: 12.5px; font-weight: 700; color: var(--aksan); margin-top: 10px; }

/* Oda tipi mizaçları — kart rozetinin rengi tipe göre değişir, böylece
   ızgarada tipler göz taramasıyla ayrışır. */
.oda-kart[data-tip="suit"] .oda-rozet { background: #123B4D; }
.oda-kart[data-tip="deniz"] .oda-rozet { background: #1E7A8C; }
.oda-kart[data-tip="uc-kisilik"] .oda-rozet { background: #5A6B33; }
.oda-kart[data-tip="standart"] .oda-rozet { background: #8A7458; }

/* Fotoğrafı henüz olmayan odalar: prototipteki çizgili yer tutucu
   (design/Otel.dc.html stripe()). Boş gri kutu "yükleniyor mu, bozuk mu"
   sorusunu doğuruyor; desenli alan "burası henüz doldurulmadı" der. */
.oda-gorsel--bos { background: repeating-linear-gradient(45deg, #E4EFDC, #E4EFDC 12px, #EAF3E2 12px, #EAF3E2 24px); }
.oda-kart[data-tip="standart"] .oda-gorsel--bos { background: repeating-linear-gradient(45deg, #EFEAD8, #EFEAD8 12px, #F5F1E4 12px, #F5F1E4 24px); }
.oda-kart[data-tip="deniz"] .oda-gorsel--bos,
.oda-kart[data-tip="suit"] .oda-gorsel--bos { background: repeating-linear-gradient(45deg, #DCEAEE, #DCEAEE 12px, #E8F2F4 12px, #E8F2F4 24px); }

.blok-oda-izgara .modal-ust .oda-fiyat { font-size: 19px; }