/* ==========================================================================
   Room detail page (room.php?id=N). Builds on site.css components; only
   page-specific layout lives here.
   ========================================================================== */

/* ------------------------------------------------------------ hero photo */
/* The room's own cover is the star of this hero: show it clearly and keep
   the copy readable with a left-to-right shade. */
.pb-roompage .pb-pagehero .pb-hero__photo { opacity: .5; mix-blend-mode: normal; filter: saturate(.85) contrast(1.02); }
.pb-roompage .pb-pagehero::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(4, 31, 30, .94) 0%, rgba(4, 31, 30, .78) 45%, rgba(4, 31, 30, .42) 100%),
        linear-gradient(0deg, rgba(4, 31, 30, .55) 0%, rgba(4, 31, 30, 0) 40%);
}
/* No photo to shade (404, or a room without photos yet): keep the brand
   gradient and orbs of the other inner pages. */
.pb-roompage--missing .pb-pagehero::after,
.pb-roompage--nophoto .pb-pagehero::after { display: none; }
.pb-roompage .pb-pagehero h1 { max-width: 18ch; }

/* --------------------------------------------------------------- gallery */
/* The gallery and the details below are one story: no dead band between them. */
.pb-room-gallery-sec { padding-bottom: clamp(40px, 5vw, 72px); }
.pb-room-gallery__count { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-room-gallery__count .pb-badge { font-size: .84rem; padding: 7px 13px; }

.pb-room-gallery { grid-auto-rows: 210px; }
.pb-room-gallery .pb-gallery__item { isolation: isolate; box-shadow: var(--shadow-s); }
/* Video tiles without a spare photo for a poster get a branded backdrop
   (a poster, when there is one, covers it). */
.pb-room-gallery .pb-gallery__item[data-type="video"] {
    background:
        radial-gradient(60% 80% at 80% 10%, rgba(45, 212, 191, .25), transparent 70%),
        radial-gradient(50% 70% at 0% 100%, rgba(224, 104, 58, .28), transparent 70%),
        linear-gradient(150deg, var(--teal-800), var(--teal-950));
}
.pb-room-gallery .pb-gallery__item::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, rgba(4, 31, 30, 0) 50%, rgba(4, 31, 30, .45) 100%);
    transition: opacity .5s var(--ease);
}
.pb-room-gallery .pb-gallery__item:hover::after { opacity: 1; }
.pb-room-gallery .pb-gallery__item:hover video { transform: scale(1.04); }
.pb-room-gallery .pb-gallery__play { z-index: 2; transition: background .4s; }
.pb-room-gallery .pb-gallery__play span { box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .6); transition: transform .5s var(--ease); }
.pb-room-gallery .pb-gallery__play .pb-i { width: 26px; height: 26px; margin-left: 4px; }
.pb-room-gallery .pb-gallery__item:hover .pb-gallery__play span { transform: scale(1.1); }
.pb-room-gallery .pb-gallery__item video + .pb-gallery__play { background: rgba(4, 31, 30, .42); }
.pb-room-gallery .pb-gallery__item video:not([poster]) + .pb-gallery__play { background: transparent; }
.pb-room-gallery__tag { position: absolute; left: 12px; bottom: 12px; z-index: 3; }
.pb-room-gallery__tag .pb-i { width: 15px; height: 15px; }
.pb-room-gallery__more {
    position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
    background: rgba(4, 31, 30, .62); color: #fff; font: 700 clamp(1.8rem, 3vw, 2.6rem)/1 var(--font-display); letter-spacing: -.03em;
    transition: background .4s;
}
.pb-gallery__item:hover .pb-room-gallery__more { background: rgba(4, 31, 30, .5); }

/* Layout per number of visible tiles (1–4 as is, 5 or 9 as a mosaic). */
.pb-room-gallery.pb-room-gallery--n1 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
.pb-room-gallery--n1 .pb-gallery__item:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 8; }
.pb-room-gallery.pb-room-gallery--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 400px; }
.pb-room-gallery--n2 .pb-gallery__item:first-child { grid-column: auto; grid-row: auto; }
.pb-room-gallery.pb-room-gallery--n3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-rows: 230px; }
.pb-room-gallery--n3 .pb-gallery__item:first-child { grid-column: auto; grid-row: span 2; }
.pb-room-gallery.pb-room-gallery--n4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 230px; }
.pb-room-gallery--n4 .pb-gallery__item:first-child { grid-column: auto; grid-row: span 2; }
.pb-room-gallery--n4 .pb-gallery__item:nth-child(2) { grid-column: span 2; }
.pb-room-gallery.pb-room-gallery--n5, .pb-room-gallery.pb-room-gallery--n9 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* No photos yet: a calm branded placeholder instead of an empty grid. */
.pb-room-empty {
    position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center;
    padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-l); color: #fff;
    background:
        radial-gradient(50% 90% at 90% 10%, rgba(45, 212, 191, .22), transparent 70%),
        radial-gradient(40% 80% at 0% 100%, rgba(224, 104, 58, .3), transparent 70%),
        linear-gradient(150deg, var(--teal-800), var(--teal-950));
    box-shadow: var(--shadow);
}
.pb-room-empty::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(80% 90% at 70% 40%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(80% 90% at 70% 40%, #000 20%, transparent 80%);
}
.pb-room-empty .pb-icon { width: 72px; height: 72px; border-radius: 22px; }
.pb-room-empty .pb-icon .pb-i { width: 34px; height: 34px; }
.pb-room-empty h3 { color: #fff; margin: 0 0 8px; }
.pb-room-empty p { margin: 0; color: rgba(236, 246, 244, .8); max-width: 60ch; }

/* --------------------------------------------------- details + book card */
/* Markup order: intro (.pb-room-main) → card → details (.pb-room-more), so on
   phones and tablets the card follows the specs. On desktop the card takes
   the right column across both rows and stays sticky. */
.pb-room-details { overflow-x: clip; padding-top: clamp(64px, 8vw, 104px); box-shadow: inset 0 1px 0 var(--line); }
.pb-room-details > .pb-container { position: relative; z-index: 1; }
.pb-room-watermark {
    position: absolute; right: clamp(8px, 3vw, 48px); top: clamp(40px, 6vw, 90px); z-index: 0; pointer-events: none; user-select: none;
    font: 700 clamp(9rem, 24vw, 21rem)/.8 var(--font-display); letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(15, 118, 110, .13);
}

.pb-room-main > h2 { max-width: 20ch; }
.pb-room-more > h3 { margin-top: clamp(34px, 4vw, 48px); margin-bottom: 16px; }
.pb-room-long { max-width: 66ch; margin-bottom: 30px; }
.pb-room-long p { color: var(--ink-2); font-size: 1.04rem; }
.pb-room-long .pb-room-long__first { font-size: clamp(1.1rem, 1.5vw, 1.24rem); line-height: 1.6; color: var(--ink); }

.pb-room-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 8px; }
.pb-room-specs .pb-spec { background: var(--sand-50); border: 1px solid var(--line); }
.pb-room-specs dt { display: flex; align-items: center; gap: 6px; }
.pb-room-specs dt .pb-i { width: 16px; height: 16px; color: var(--terra); }
.pb-room-specs dd { font-size: 1.08rem; }

.pb-room-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.pb-room-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.pb-room-tags .pb-badge { font-size: .88rem; font-weight: 700; padding: 9px 15px; letter-spacing: 0; }
.pb-room-tags .pb-badge .pb-i { width: 16px; height: 16px; }
.pb-room-pricing li { color: var(--ink-2); }

.pb-room-steps { margin-top: 6px; }
.pb-room-steps h4 { margin: 0 0 6px; font-size: 1.12rem; }
.pb-room-steps > li { padding-bottom: 26px; }
.pb-room-steps > li::before { background: var(--sand-0); }

.pb-bookcard { border-radius: 28px; overflow: hidden; background: var(--sand-0); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pb-bookcard__top {
    position: relative; overflow: hidden; padding: 26px 26px 24px; color: #fff;
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(45, 212, 191, .22), transparent 70%),
        radial-gradient(60% 100% at 0% 100%, rgba(224, 104, 58, .28), transparent 70%),
        linear-gradient(160deg, var(--teal-800), var(--teal-950));
}
.pb-bookcard__label { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.pb-bookcard__top .pb-price strong { font-size: clamp(2.6rem, 4vw, 3.3rem); }
.pb-bookcard__top .pb-price span { font-size: 1rem; }
.pb-bookcard__session {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .08); border: 1px solid var(--line-light); color: rgba(236, 246, 244, .86); font-size: .84rem; font-weight: 600;
}
.pb-bookcard__session .pb-i { width: 16px; height: 16px; color: var(--gold); }
.pb-bookcard__body { padding: 22px 22px 24px; }
.pb-bookcard__body > h3 { font-size: .8rem; font-family: var(--font-text); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.pb-bookcard .pb-tiers { margin-bottom: 18px; }
/* Plain list items (not links): no hover motion that would suggest a click. */
.pb-bookcard .pb-tiers li { padding: 11px 14px; background: var(--sand-50); }
.pb-bookcard .pb-tiers li > span { display: grid; gap: 1px; min-width: 0; }
.pb-bookcard .pb-tiers li > span > b { font: 700 1.08rem/1.2 var(--font-display); }
.pb-bookcard .pb-tiers small { color: var(--muted); font-size: .8rem; font-weight: 600; }
.pb-bookcard .pb-tiers__rate { text-align: right; justify-items: end; }
.pb-bookcard .pb-tiers li.is-best { border-color: rgba(224, 104, 58, .55); background: #fff6f0; box-shadow: 0 10px 24px -18px rgba(224, 104, 58, .9); }
.pb-bookcard .pb-tiers li.is-best .pb-tiers__rate b { color: var(--terra-600); }
.pb-bookcard__none { font-size: .95rem; margin-bottom: 18px; }
.pb-bookcard__points { gap: 8px; font-size: .93rem; margin-bottom: 16px; }
.pb-bookcard__points li { padding-left: 30px; }
.pb-bookcard__points li::before { width: 20px; height: 20px; background-size: 12px; }
.pb-bookcard__note { margin: 0 0 16px; padding: 14px 16px; gap: 12px; font-size: .9rem; line-height: 1.5; }
.pb-bookcard__note .pb-i { width: 20px; height: 20px; }
.pb-bookcard__actions { display: grid; gap: 10px; }
/* A primary contact action on phones: a full 44 px tap target. */
.pb-bookcard__call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0; font-weight: 700; font-size: .94rem; }
.pb-bookcard__compare { margin-top: 10px; font-size: .94rem; }

@media (min-width: 981px) {
    .pb-roomhero { grid-template-rows: auto 1fr; row-gap: 0; }
    .pb-room-main { grid-column: 1; grid-row: 1; }
    .pb-room-more { grid-column: 1; grid-row: 2; }
    .pb-bookcard { grid-column: 2; grid-row: 1 / span 2; }
    /* The code watermark moves out from behind the sticky card to the lower
       left, behind the booking steps. */
    .pb-room-watermark { right: auto; left: clamp(8px, 2vw, 32px); top: auto; bottom: clamp(40px, 6vw, 90px); -webkit-text-stroke-color: rgba(15, 118, 110, .09); }
}
/* Short desktop screens: compact the sticky card so its prices, buttons and
   the cancellation note fit on screen while it sticks … */
@media (min-width: 981px) and (max-height: 980px) {
    .pb-bookcard__points { display: none; }
    .pb-bookcard__top { padding: 20px 24px 18px; }
    .pb-bookcard__top .pb-price strong { font-size: 2.4rem; }
    .pb-bookcard__session { margin-top: 10px; }
    .pb-bookcard .pb-tiers { margin-bottom: 14px; }
    .pb-bookcard .pb-tiers li { padding: 8px 12px; }
    .pb-bookcard__body { padding: 16px 20px 18px; }
    .pb-bookcard__note { padding: 12px 14px; margin-bottom: 14px; }
}
/* … and stop sticking where even the compact card cannot fit. */
@media (min-width: 981px) and (max-height: 820px) {
    .pb-roompage .pb-bookcard.pb-sticky-card { position: relative; top: auto; }
}

/* ------------------------------------------------------------- band */
.pb-room-band .pb-band__cards { max-width: 860px; }

/* ------------------------------------------------------- before you come */
/* Cards keep their natural height (no hollow stretched rules card). */
.pb-room-info { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(16px, 2.2vw, 28px); align-items: start; }
.pb-room-info__side { display: grid; gap: clamp(16px, 2.2vw, 28px); }
.pb-room-info__rules { display: flex; flex-direction: column; align-items: flex-start; }
.pb-room-info__rules .pb-check { margin: 4px 0 22px; }
.pb-room-info__rules .pb-link-arrow { margin-top: 6px; }
.pb-room-info__rules .pb-check li { color: var(--ink-2); }
.pb-room-info .pb-card h3 { margin-top: 16px; }
.pb-room-info .pb-card--accent strong { color: #fff; }
.pb-room-info .pb-card--accent .pb-room-info__maplink { color: var(--teal-200); margin-top: 6px; }
.pb-room-info .pb-card--accent .pb-room-info__maplink:hover { color: #fff; }

/* ------------------------------------------------------------ other rooms */
/* The rail bleeds to both screen edges (as on the home page) so the next
   card peeks out and, once scrolled, cards are not cut off by a hard edge
   inside the page margin; the padding keeps the first and last card aligned
   with the container (the section clips overflow). */
@media (min-width: 981px) {
    .pb-roompage .pb-section--clip > .pb-container > .pb-rail {
        --bleed: max(var(--gutter), calc(50vw - var(--container) / 2));
        margin-inline: calc(50% - 50vw); padding-inline: var(--bleed); scroll-padding-inline: var(--bleed);
    }
}
/* Cards that start off-screen in the rail keep the parallax offset site.js
   gave them on load (it only recalculates on window scroll), so after the
   arrows bring them in the photo sat far too high over an empty frame.
   The in-card drift is a few pixels anyway: photos in the rail stay put. */
.pb-roompage .pb-rail .pb-room__media img { translate: none !important; }

/* --------------------------------------------------------------- WhatsApp */
/* room.js hides the floating button while the booking card (with its own
   WhatsApp button) is on screen, so it never covers the tiers. */
.pb-roompage .pb-fab.pb-fab--card { opacity: 0; pointer-events: none; transform: scale(.8); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
    .pb-room-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .pb-roompage .pb-pagehero::after { background: linear-gradient(180deg, rgba(4, 31, 30, .88) 0%, rgba(4, 31, 30, .74) 60%, rgba(4, 31, 30, .6) 100%); }
    /* Full-width band copy: a vertical shade keeps it readable (WCAG AA). */
    .pb-room-band::before { background: linear-gradient(180deg, rgba(4, 31, 30, .9) 0%, rgba(4, 31, 30, .82) 60%, rgba(4, 31, 30, .66) 100%); }
    .pb-room-gallery { grid-auto-rows: 160px; }
    .pb-room-gallery.pb-room-gallery--n2 { grid-auto-rows: 300px; }
    .pb-room-gallery.pb-room-gallery--n3 { grid-auto-rows: 190px; }
    .pb-room-gallery.pb-room-gallery--n4 { grid-auto-rows: 180px; }
    .pb-room-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pb-room-info { grid-template-columns: minmax(0, 1fr); }
    .pb-room-info__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Single column (the card and hero stats are full width): slide in from
       below instead of from the right, so nothing pokes past the screen edge
       while waiting to be revealed. */
    .js .pb-roompage .reveal[data-reveal="right"]:not(.is-in) { transform: translate3d(0, 34px, 0); }
}
/* Tablets: hero stats side by side, and a booking card across the full
   column: price and the 50-minute pill on one row, package tiers as three
   columns, the two main buttons side by side. */
@media (min-width: 681px) and (max-width: 980px) {
    .pb-roompage .pb-pagehero__aside { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .pb-roompage .pb-pagehero__stat { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pb-bookcard__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
    .pb-bookcard__label { flex-basis: 100%; margin-bottom: 0; }
    .pb-bookcard__session { margin-top: 0; }
    .pb-bookcard .pb-tiers { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .pb-bookcard .pb-tiers li { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pb-bookcard .pb-tiers__rate { text-align: left; justify-items: start; }
    .pb-bookcard__points { display: flex; flex-wrap: wrap; gap: 8px 22px; }
    .pb-bookcard__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pb-bookcard__call { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
    .pb-room-gallery, .pb-room-gallery.pb-room-gallery--n3, .pb-room-gallery.pb-room-gallery--n4,
    .pb-room-gallery.pb-room-gallery--n5, .pb-room-gallery.pb-room-gallery--n9 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; gap: 10px; }
    .pb-room-gallery--n3 .pb-gallery__item:first-child,
    .pb-room-gallery--n4 .pb-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
    .pb-room-gallery.pb-room-gallery--n2 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 230px; }
    .pb-room-gallery--n1 .pb-gallery__item:first-child { aspect-ratio: 4 / 3; }
    .pb-room-gallery .pb-gallery__item { border-radius: 14px; }
    .pb-room-gallery .pb-gallery__play span { width: 52px; height: 52px; }
    .pb-room-empty { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .pb-room-empty .pb-btn { justify-self: stretch; }
    .pb-room-watermark { top: 20px; font-size: 7.5rem; -webkit-text-stroke-color: rgba(15, 118, 110, .08); }
    .pb-room-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pb-room-specs .pb-spec { padding: 14px; }
    .pb-room-specs dd { font-size: 1rem; }
    .pb-room-features { grid-template-columns: minmax(0, 1fr); }
    .pb-room-info__side { grid-template-columns: minmax(0, 1fr); }
    .pb-bookcard__top { padding: 22px 20px; }
    .pb-bookcard__body { padding: 20px 18px 22px; }
    .pb-bookcard .pb-btn { white-space: normal; text-align: center; }
}
/* Small phones: the hero eyebrow ("KABİNET B3 · «28 MAY» METROSU YANINDA") on one line. */
@media (max-width: 400px) {
    .pb-roompage .pb-pagehero .pb-eyebrow { letter-spacing: .08em; gap: 8px; }
    .pb-roompage .pb-pagehero .pb-eyebrow::before { width: 18px; }
}