/* Otel alt siteleri: ortak yerleşim. Renk, yazı karakteri ve vitrin kompozisyonu otel dosyasında (otel-halkali.css, otel-eyup.css). */
body[data-tema="otel"] {
  --c-wa: #1E7A4C;
  --c-wa-koyu: #17643E;
  --c-kart: var(--c-yuzey);
  --c-kart-cizgi: var(--c-cizgi);
  --c-cam: rgb(255 255 255 / .1);
  --c-cam-cizgi: rgb(255 255 255 / .2);
  color-scheme: light;
}

/* Mobil menü çekmecesi header'ın altından başlar */
body[data-tema="otel"] { --ust-alt: calc(var(--header-h) + 1px); }

/* Header: otelin koyu renginde, her zaman dolu (saydam header fotoğraf üstünde okunmuyordu; kullanıcı 2026-10-24).
   Metin beyaz/krem, aktif sayfa altı vurgu çizgisi, hover açık zeminli hap. Renkler otel dosyasında --c-ust-*. */
body[data-tema="otel"] .ust { position: sticky; background: var(--c-ust-zemin); border-bottom: 1px solid var(--c-ust-cizgi); color: var(--c-ust-metin); backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-tema="otel"] .ust .logo img { filter: brightness(0) invert(1); }
body[data-tema="otel"] .ust .ana-menu a, body[data-tema="otel"] .ust .ust__marka { color: var(--c-ust-metin-2); padding: .45rem .85rem; margin: 0 -.25rem; border-radius: 999px; font-weight: 500; transition: color var(--gecis), background-color var(--gecis); }
body[data-tema="otel"] .ust .ana-menu a:hover, body[data-tema="otel"] .ust .ust__marka:hover { color: var(--c-ust-metin); background: rgb(255 255 255 / .12); }
body[data-tema="otel"] .ust .ana-menu a[aria-current="page"] { color: var(--c-ust-metin); text-decoration: none; box-shadow: inset 0 -2px 0 var(--c-ust-vurgu); border-radius: 0; padding-inline: .25rem; }
body[data-tema="otel"] .ust .ana-menu a[aria-current="page"]:hover { background: none; }
body[data-tema="otel"] .ust .ust__marka { font-size: .875rem; opacity: .85; }
body[data-tema="otel"] .ust .dil-secici__dugme { border-color: rgb(255 255 255 / .35); color: var(--c-ust-metin); }
body[data-tema="otel"] .ust .dil-secici__dugme:hover, body[data-tema="otel"] .ust .dil-secici__dugme[aria-expanded="true"] { border-color: var(--c-ust-metin); }
body[data-tema="otel"] .ust .dil-secici__liste, body[data-tema="otel"] .ust .dil-secici__liste a { color: var(--c-metin); }
body[data-tema="otel"] .ust .btn--dolu { background: var(--c-ust-dugme); color: var(--c-ust-dugme-metin); }
body[data-tema="otel"] .ust .btn--dolu:hover { filter: brightness(1.08); }
body[data-tema="otel"] .ust .menu-dugme { color: var(--c-ust-metin); }
body[data-tema="otel"] .ust .ana-menu__liste { gap: .5rem; }
@media (max-width: 1099px) {
  /* Mobil çekmece header'la aynı koyu zemin */
  body[data-tema="otel"] .ana-menu { background: var(--c-ust-zemin); color: var(--c-ust-metin); }
  body[data-tema="otel"] .ana-menu__liste > li { border-bottom-color: var(--c-ust-cizgi); }
  body[data-tema="otel"] .ust .ana-menu a, body[data-tema="otel"] .ust .ana-menu .ust__marka { color: var(--c-ust-metin); padding: 0; margin: 0; border-radius: 0; background: none; }
  body[data-tema="otel"] .ust .ana-menu a[aria-current="page"] { box-shadow: none; color: var(--c-ust-vurgu); }
}

/* Tam ekran vitrin: fotoğraf arkada, degrade ve gren, metin sol altta, altında cam eylem paneli */
.o-vitrin { position: relative; min-height: min(calc(100svh - var(--header-h)), 860px); display: grid; align-items: end; isolation: isolate; color: #fff; }
.o-vitrin__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.o-vitrin::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--c-vitrin-koyu) 0%, var(--c-vitrin-orta) 32%, transparent 70%), linear-gradient(to right, var(--c-vitrin-orta), transparent 60%); }
.o-vitrin::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gren); opacity: .06; mix-blend-mode: overlay; pointer-events: none; }
.o-vitrin__ic { display: grid; gap: 1.5rem; padding-block: clamp(4rem, 12vh, 8rem) clamp(1.5rem, 4vh, 2.5rem); }
.o-vitrin__metin { display: grid; gap: 1.25rem; justify-items: start; max-width: 50rem; }
.o-vitrin__metin .etiket { color: rgb(255 255 255 / .85); }
.o-vitrin__metin .etiket::before { background: var(--c-vitrin-isaret); }
.o-vitrin__metin h1 { color: #fff; max-width: 10em; }
.o-vitrin__metin .giris { color: rgb(255 255 255 / .82); max-width: 32em; }
.o-vitrin__panel { display: grid; gap: 1rem; padding: 1rem; }
.o-vitrin__eylem { display: flex; flex-wrap: wrap; gap: .6rem; }
.o-vitrin__olanak { display: flex; flex-wrap: wrap; gap: .4rem .5rem; font-size: var(--t-kucuk); color: rgb(255 255 255 / .9); }
.o-vitrin__olanak li { display: inline-flex; align-items: center; gap: .5em; min-height: 32px; padding: 0 .75rem; border-radius: 999px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); }
@media (min-width: 900px) {
  .o-vitrin__panel { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; padding: 1rem 1.25rem; }
  .o-vitrin__olanak { justify-content: flex-end; }
}

/* Oda şeridi: yatay kaydırma, büyük kartlar, sıra numarası */
.oda-serit { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 420px); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--kenar); padding-inline: max(var(--kenar), (100vw - var(--kap)) / 2); padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: var(--c-cizgi-guclu) transparent; }
.oda-serit::after { content: ""; width: 1px; }
.oda { display: grid; gap: 1rem; align-content: start; text-decoration: none; scroll-snap-align: start; }
.oda__foto { position: relative; overflow: hidden; border-radius: var(--kose-buyuk); background: var(--c-yuzey); }
.oda__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--gecis-yavas); }
.oda:hover .oda__foto img { transform: scale(1.04); }
.oda__sira { position: absolute; top: .9rem; inset-inline-start: .9rem; padding: .35rem .7rem; border-radius: 999px; font: 600 .75rem/1 var(--f-metin); letter-spacing: .1em; color: #fff; background: rgb(0 0 0 / .45); backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; }
.oda__metin { display: grid; gap: .45rem; justify-items: start; }
.oda__adet { font: 600 .75rem/1.4 var(--f-metin); letter-spacing: .14em; text-transform: uppercase; color: var(--c-etiket); }
.oda h3 { font-size: 1.5rem; }
.oda p { color: var(--c-metin-2); font-size: .9375rem; max-width: 30em; }
.oda__ozellik { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: var(--t-kucuk); color: var(--c-metin-2); }
.oda__ozellik li::before { content: "·"; margin-inline-end: .5rem; color: var(--c-etiket); }
.oda__ozellik li:first-child::before { content: none; }
.oda__bag { margin-top: .25rem; }
/* Izgara düzeni (odalar sayfası ve Eyüp) */
.odalar { display: grid; gap: 2.25rem 1.5rem; }
@media (min-width: 560px) { .odalar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .odalar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 2rem; } }

/* Oda detayı (odalar sayfası) */
.oda-detay { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--c-cizgi); scroll-margin-top: calc(var(--header-h) + 1rem); }
.oda-detay:first-of-type { border-top: 0; }
.oda-detay__galeri { display: grid; gap: .75rem; }
.oda-detay__galeri img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--kose-buyuk); }
.oda-detay__galeri > :first-child img { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.oda-detay__metin { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.oda-detay__metin h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }
.oda-detay__liste { display: grid; gap: .5rem; padding-inline-start: 1.1rem; margin: 0; color: var(--c-metin-2); }
@media (min-width: 560px) { .oda-detay__galeri { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .oda-detay { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; } .oda-detay__metin { position: sticky; top: calc(var(--header-h) + 2rem); } }

/* Konum: koyu pano, büyük mesafeler, yanında fotoğraf */
.konum { display: grid; gap: 0; overflow: hidden; border-radius: var(--kose-buyuk); background: var(--c-vurgu); color: #fff; }
.konum__metin { display: grid; gap: 1.5rem; justify-items: start; align-content: start; padding: clamp(1.5rem, 4vw, 3rem); }
.konum__metin .etiket { color: rgb(255 255 255 / .85); }
.konum__metin .etiket::before { background: var(--c-vitrin-isaret); }
.konum__metin h2 { color: #fff; }
.konum__metin .giris { color: rgb(255 255 255 / .8); }
.konum .mesafe { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); }
.konum .mesafe strong { color: #fff; }
.konum .mesafe strong small { color: var(--c-vitrin-isaret); }
.konum .mesafe span { color: rgb(255 255 255 / .85); }
.konum .btn--cizgi { border-color: rgb(255 255 255 / .5); color: #fff; }
.konum .btn--cizgi:hover { border-color: #fff; }
.konum .bag { color: #fff; }
.konum__foto { min-height: 280px; }
.konum__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .konum { grid-template-columns: 7fr 5fr; } .konum__foto { min-height: 0; } }

/* Otelde spa: fotoğraf arkada */
.spa { position: relative; overflow: hidden; border-radius: var(--kose-buyuk); min-height: 420px; display: grid; align-items: end; isolation: isolate; color: #fff; }
.spa__foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.spa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--c-vitrin-koyu), rgb(0 0 0 / .15) 65%, rgb(0 0 0 / .05)); }
.spa__ic { display: grid; gap: 1.25rem; justify-items: start; padding: clamp(1.5rem, 4vw, 3rem); max-width: 40rem; }
.spa .etiket { color: rgb(255 255 255 / .85); }
.spa .etiket::before { background: var(--c-vitrin-isaret); }
.spa h2 { color: #fff; max-width: 14em; }
.spa p { color: rgb(255 255 255 / .82); max-width: 36em; }

/* Kısa konaklama ve rezervasyon daveti */
.davet { display: grid; gap: 1.25rem; justify-items: start; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--kose-buyuk); background: var(--c-yuzey); border: 1px solid var(--c-cizgi); }
.davet h2 { max-width: 16em; }
.davet p { color: var(--c-metin-2); max-width: 36em; }
@media (min-width: 900px) { .davet { grid-template-columns: 1fr auto; align-items: center; gap: 3rem; } .davet .satir-eylem { grid-column: 2; grid-row: 1 / span 2; } }

/* İç sayfa vitrini: otelin kendi temasında fotoğraf bandı; kırıntı, başlık ve giriş bandın içinde */
.ic-vitrin { position: relative; min-height: clamp(340px, 48svh, 560px); display: grid; align-items: end; isolation: isolate; color: #fff; }
.ic-vitrin__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ic-vitrin::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--c-vitrin-koyu) 0%, var(--c-vitrin-orta) 38%, rgb(0 0 0 / .15) 75%, rgb(0 0 0 / .35) 100%); }
.ic-vitrin::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gren); opacity: .06; mix-blend-mode: overlay; pointer-events: none; }
.ic-vitrin__ic { display: grid; gap: 1.1rem; justify-items: start; padding-block: 3rem clamp(2rem, 5vh, 3rem); max-width: 54rem; }
.ic-vitrin .kirinti { padding-top: 0; color: rgb(255 255 255 / .75); }
.ic-vitrin .kirinti li + li::before { color: rgb(255 255 255 / .4); }
.ic-vitrin .kirinti a:hover { color: #fff; }
.ic-vitrin .etiket { color: rgb(255 255 255 / .85); }
.ic-vitrin .etiket::before { background: var(--c-vitrin-isaret); }
.ic-vitrin h1 { color: #fff; max-width: 12em; }
.ic-vitrin h1 em { color: var(--c-vitrin-isaret); }
.ic-vitrin .giris { color: rgb(255 255 255 / .82); }
.ic-vitrin .btn--cizgi { border-color: rgb(255 255 255 / .5); color: #fff; }
.ic-vitrin .btn--cizgi:hover { border-color: #fff; }

/* Oda atlama çipleri (odalar sayfası): vitrinin altında, otel rengiyle */
.oda-atla { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 1.25rem; border-bottom: 1px solid var(--c-cizgi); }
.oda-atla a { display: inline-flex; align-items: center; gap: .5em; min-height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--c-cizgi-guclu); font: 600 .8125rem/1 var(--f-metin); color: var(--c-metin); text-decoration: none; transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis); }
.oda-atla a small { font-weight: 500; color: var(--c-metin-2); }
.oda-atla a:hover { background: var(--c-vurgu); border-color: var(--c-vurgu); color: var(--c-vurgu-uzeri); }
.oda-atla a:hover small { color: inherit; opacity: .8; }

/* Oda detayı: dergi satırı; sıra numarası büyük, dönüşümlü yön */
.oda-detay__sira { font: 600 clamp(3rem, 2rem + 4vw, 5.5rem)/1 var(--f-baslik); letter-spacing: -.05em; color: var(--c-cizgi-guclu); font-variant-numeric: tabular-nums; margin-bottom: -.5rem; }
.oda-detay__metin { padding-top: .5rem; }
.oda-detay__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.25rem; padding: 0; list-style: none; }
.oda-detay__liste li { display: flex; gap: .6em; align-items: baseline; }
.oda-detay__liste li::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: var(--c-isaret); flex: none; transform: translateY(-.1em); }
@media (min-width: 1000px) { .oda-detay:nth-of-type(even) .oda-detay__galeri { order: 2; } }

/* İletişim sayfası: iki kart (iletişim bilgileri, yakın yerler) */
.ilet-kartlar { display: grid; gap: 1.5rem; }
.ilet-kart { display: grid; gap: 1.25rem; align-content: start; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--kose-buyuk); background: var(--c-yuzey); border: 1px solid var(--c-cizgi); }
.ilet-kart .bilgi { max-width: none; }
.ilet-kart .mesafeler { grid-template-columns: 1fr; }
.ilet-kart .mesafe { background: var(--c-zemin); border-color: var(--c-cizgi); }
@media (min-width: 900px) { .ilet-kartlar { grid-template-columns: 1.15fr 1fr; gap: 2rem; } }

/* Kısa konaklama: adımlar kart, numara büyük; bilgiler kart ızgarası */
.adimlar { display: grid; gap: 1rem; }
.adimlar li { display: grid; gap: .6rem; padding: 1.5rem; border: 1px solid var(--c-cizgi); border-radius: var(--kose-buyuk); background: var(--c-yuzey); }
.adimlar__sira { font: 600 3rem/1 var(--f-baslik); letter-spacing: -.05em; color: var(--c-vurgu-metin); }
.adimlar h3 { font-size: 1.375rem; }
.adimlar p { color: var(--c-metin-2); }
@media (min-width: 760px) { .adimlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.olgular--kart { gap: 1rem; }
.olgular--kart li { padding: 1.25rem 1.25rem 1.1rem; border: 1px solid var(--c-cizgi); border-radius: var(--kose-buyuk); background: var(--c-yuzey); }
.olgular--kart strong { color: var(--c-vurgu-metin); }