:root {
    --ink: #0f172a;
    --muted: #475569;
    --sand: #f1f5f9;
    --cream: #f8fafc;
    --sea: #0f766e;
    --sea-light: #14b8a6;
    --coral: #ea580c;
    --coral-hover: #c2410c;
    --border: #e2e8f0;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "DM Sans", system-ui, sans-serif;
    --radius: 14px;
    --shadow-card: 0 20px 50px rgba(15, 23, 42, 0.08);
    --shadow-soft: 0 12px 40px rgba(15, 23, 42, 0.06);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

@supports (overflow-x: clip) {
    html {
        overflow-x: clip;
    }
}

/*
 * AŞIRI KAYDIRMADA BEYAZ ALAN ÇIKMAZ.
 *
 * Mobil tarayıcılar sayfanın sonunda/başında lastik gibi esnetiyor ve
 * arkada `html` ögesinin zemini görünüyor. `html` renksiz olduğu için
 * ziyaretçi sayfanın altından beyaz bir boşluk çekiliyormuş gibi görüyordu.
 *
 * İki katman birden: `html`'e de zemin verilir (esnetmede o görünür) ve
 * `overscroll-behavior-y: none` ile esnetme kapatılır. İkisi birden çünkü
 * `overscroll-behavior` iOS Safari'nin bazı sürümlerinde `body`'de
 * çalışmıyor; zemin rengi her koşulda doğru sonucu veriyor.
 */
html {
    background: var(--cream);
    overscroll-behavior-y: none;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    max-width: 100%;
    overscroll-behavior-y: none;
}

@supports (overflow-x: clip) {
    body {
        overflow-x: clip;
    }
}

/* Form controls: grid/flex min-content genişliği dar ekranda sayfayı şişirmesin */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    max-width: 100%;
    min-width: 0;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
}

.wrap {
    width: 100%;
    max-width: min(1120px, 100%);
    margin-inline: auto;
    padding-inline: clamp(0.875rem, 4vw, 1.5rem);
    box-sizing: border-box;
}

.site-header {
    background: rgba(248, 250, 252, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    transition: box-shadow 0.25s ease;
    max-width: 100%;
    overflow-x: hidden;
}

.site-header.is-scrolled {
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0;
    gap: 0.65rem 1rem;
    row-gap: 0.5rem;
    min-width: 0;
}

.logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--sea);
    text-decoration: none;
    letter-spacing: -0.02em;
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem 1.5rem;
    flex-wrap: wrap;
}

.main-nav a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--sea);
    border-bottom-color: var(--coral);
}

.main-nav .nav-cta {
    background: var(--sea);
    color: #fff !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
}

.main-nav .nav-cta:hover {
    background: var(--sea-light);
}

.nav-toggle {
    display: none;
    border: 1px solid var(--border);
    background: var(--cream);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--sea);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

@media (max-width: 768px) {
    .header-inner {
        flex-wrap: wrap;
    }

    .logo {
        font-size: clamp(1.05rem, 4.2vw, 1.3rem);
        line-height: 1.2;
        padding-right: 0.25rem;
    }

    .nav-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .main-nav {
        display: none;
        position: static;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        flex-basis: 100%;
        order: 3;
        background: var(--cream);
        border: 1px solid var(--border);
        border-radius: 10px;
        flex-direction: column;
        align-items: stretch;
        padding: 0.35rem 0;
        margin-top: 0.25rem;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        gap: 0;
    }

    .main-nav.is-open {
        display: flex;
    }

    .main-nav a {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--border);
        border-bottom-color: rgba(226, 232, 240, 0.9);
        font-size: 1rem;
    }

    .main-nav a:last-child {
        border-bottom: none;
    }

    .main-nav a:hover,
    .main-nav a.active {
        border-bottom-color: rgba(226, 232, 240, 0.9);
        border-left: 3px solid var(--coral);
        padding-left: calc(1rem - 3px);
    }

    .main-nav a:not(.active) {
        border-left: 3px solid transparent;
    }
}

.site-main {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow-x: clip) {
    .site-main {
        overflow-x: clip;
    }
}

/* Tüm tam genişlik bölümler taşmayı site-main dışına sızdırmasın (cloud, hero vb.) */
.site-main > section {
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow-x: clip) {
    .site-main > section {
        overflow-x: clip;
    }
}

.hero {
    position: relative;
    min-height: min(88vh, 760px);
    display: flex;
    align-items: center;
    padding: clamp(3.5rem, 10vw, 6rem) 0;
    background-color: #0f172a;
    color: #fff;
    overflow-x: hidden;
    max-width: 100%;
}

.hero--photo {
    background-image:
        linear-gradient(115deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 118, 110, 0.42) 42%, rgba(15, 23, 42, 0.82) 100%),
        var(--hero-image, linear-gradient(145deg, #0f766e, #0f172a));
    background-size: cover;
    background-position: center;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 38rem;
    min-width: 0;
    width: 100%;
}

.hero-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.88;
    margin-bottom: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: 1.1rem;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.hero-lead {
    font-size: 1.12rem;
    line-height: 1.65;
    opacity: 0.94;
    max-width: 36rem;
    margin-bottom: 2rem;
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
}

.btn {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    transition: transform 0.15s, box-shadow 0.15s;
    max-width: 100%;
    min-width: 0;
    text-align: center;
    box-sizing: border-box;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--coral);
    color: #fff;
    box-shadow: 0 4px 18px rgba(234, 88, 12, 0.35);
}

.btn-primary:hover {
    background: var(--coral-hover);
}

/*
 * İkincil düğme. Sitede yalnızca `.btn-primary` vardı; panelden alışkanlıkla
 * yazılan `.btn-secondary` hiçbir kural bulamayıp tarayıcının mavi bağlantısı
 * olarak çıkıyordu (blog «Tüm yazılar» düğmesinde görüldü).
 */
.btn-secondary {
    background: #fff;
    color: #1e293b;
    border: 1px solid #cbd5e1;
}

.btn-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn--inline {
    margin-top: 1rem;
}

.hero .btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin-left: 0;
}

.hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
}

.section {
    padding: 3.5rem 0;
    max-width: 100%;
    overflow-x: hidden;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--sea);
    margin-bottom: 1.5rem;
}

.muted {
    color: var(--muted);
    font-size: 0.95rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
}

@media (max-width: 520px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

.card-grid > * {
    min-width: 0;
}

.room-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.room-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
}

.room-card-visual {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--sand);
}

/*
 * ODA FOTOĞRAFI KIRPILMADAN GÖSTERİLİR — bkz. tema dosyalarındaki aynı not.
 * `cover` otelin göstermek istediği yeri kesebiliyordu.
 */
.room-card-visual__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Sarmalayıcı zemini bulanık basıyor; görselin arkası saydam kalmalı. */
.room-card-visual.photo-frame { background-color: var(--sand, #f1efe9); }

.room-card-visual__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
}

.room-card-body {
    padding: 1.25rem 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.room-card-body h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 0.35rem;
}

.room-meta {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
}

.room-card-body > .muted {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.8em;
}

.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.75rem;
    list-style: none;
    padding: 0;
}

.feature-tags span,
.feature-tags li {
    font-size: 0.75rem;
    background: var(--sand);
    color: var(--muted);
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
}

.feature-tags--icons li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.feature-tags--icons li i {
    color: var(--sea);
    font-size: 0.7rem;
}

.price-tag {
    font-weight: 700;
    color: var(--sea);
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.price-tag__old {
    text-decoration: line-through;
    color: #94a3b8;
    margin-right: 0.45rem;
    font-weight: 600;
}

.price-tag__new {
    color: #dc2626;
    margin-right: 0.3rem;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
    min-width: 0;
}

.two-col > * {
    min-width: 0;
}

@media (max-width: 800px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}

.prose {
    max-width: 65ch;
}

.prose p + p {
    margin-top: 1rem;
}

.contact-form {
    min-width: 0;
    max-width: 100%;
}

.contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
    margin-top: 1rem;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    max-width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
}

.contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.alert-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.site-footer {
    background: var(--ink);
    color: #e7e5e4;
    margin-top: auto;
    padding: 2.5rem 0 1rem;
    font-size: 0.95rem;
    overflow-x: hidden;
    max-width: 100%;
}

.site-footer p,
.site-footer a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
    min-width: 0;
}

.footer-grid .muted {
    color: #a8a29e;
}

.footer-grid a {
    color: #e7e5e4;
    text-decoration: none;
    display: block;
    margin-top: 0.35rem;
}

.footer-grid a:hover {
    text-decoration: underline;
}

.footer-copy {
    border-top: 1px solid #44403c;
    padding-top: 1rem;
    font-size: 0.85rem;
    color: #a8a29e;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 640px) {
    .footer-copy {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
}

.footer-credit {
    font-size: 0.8rem;
    color: #a8a29e;
}

.footer-credit a {
    color: #e7e5e4;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-credit a:hover {
    color: #fff;
}

.features-strip {
    background: linear-gradient(180deg, #fff 0%, var(--sand) 100%);
    border-block: 1px solid var(--border);
    padding: 1.75rem 0;
    overflow-x: hidden;
    max-width: 100%;
}

.features-strip-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.25rem;
    justify-content: center;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95rem;
}

.features-strip-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.features-strip-list li i {
    color: var(--sea);
    font-size: 1.05rem;
}

/* ——— Ortak sayfa kahramanı ——— */
.page-hero {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: flex-end;
    padding: 3rem 0 2.25rem;
    /* Örtü ve yedek zemin temadan gelir; sabit lacivert+teal karışımı mavi
       ya da yeşil kimlikli temalarda yabancı duruyordu. Değişken yoksa
       eski değerlere düşer, yani mevcut temalar aynı görünür. */
    background-color: var(--hero-scrim-1, #0f172a);
    background-image:
        linear-gradient(100deg, var(--hero-scrim-1, rgba(15, 23, 42, 0.9)) 0%, var(--hero-scrim-2, rgba(15, 118, 110, 0.45)) 100%),
        var(--page-hero-image, linear-gradient(135deg, var(--sea, #0f766e), var(--ink, #0f172a)));
    background-size: cover;
    background-position: center;
    color: #fff;
    margin-bottom: 0;
    overflow-x: hidden;
    max-width: 100%;
}

.page-hero--compact {
    min-height: 200px;
}

.page-hero__inner {
    position: relative;
    z-index: 1;
}

/* Koyu zeminde etiket bağlantısı — varsayılan mavi okunmuyordu. */
.page-hero__eyebrow a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.page-hero__eyebrow a:hover {
    border-bottom-color: currentColor;
}

.page-hero__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.5rem;
}

.page-hero__lead {
    font-size: 1.05rem;
    opacity: 0.92;
    max-width: 40ch;
}

/* ——— Odalar sayfası ——— */
.rooms-page-hero {
    padding: 2.75rem 0 2rem;
    background: linear-gradient(180deg, var(--sand) 0%, var(--cream) 100%);
    border-bottom: 1px solid var(--border);
    overflow-x: hidden;
    max-width: 100%;
}

.rooms-page-hero--photo {
    position: relative;
    color: #fff;
    border-bottom: none;
    overflow: hidden;
    background: none;
}

.rooms-page-hero--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Örtü rengi de temadan gelir: sabit lacivert+teal karışımı, mavi ya da
       yeşil kimlikli temalarda fotoğrafı yabancı bir renge boyuyordu. */
    background-image:
        linear-gradient(105deg, var(--hero-scrim-1, rgba(15, 23, 42, 0.92)) 0%, var(--hero-scrim-2, rgba(15, 118, 110, 0.5)) 55%, var(--hero-scrim-1, rgba(15, 23, 42, 0.85)) 100%),
        var(--rooms-hero-image);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.rooms-page-hero--photo .wrap {
    position: relative;
    z-index: 1;
}

/*
 * Vurgu rengine bağlı — sabit şeftali tonu temayı hiç dinlemiyordu.
 * Klasik'te `--coral-light` bu değere çok yakın (#ea580c açılmışı), yani
 * görünüm değişmiyor; Risos gibi mavi kimlikli temalarda ise etiket artık
 * sayfanın rengine uyuyor.
 */
.rooms-page-hero--photo .rooms-page-eyebrow {
    color: var(--coral-light, rgba(253, 186, 116, 0.95));
}

.rooms-page-hero--photo .rooms-page-title {
    color: #fff;
}

.rooms-page-hero--photo .rooms-page-lead {
    color: rgba(255, 255, 255, 0.9);
}

.rooms-page-hero--photo .rooms-page-lead a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rooms-page-hero--photo .rooms-stat {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}

.rooms-page-hero--photo .rooms-stat__value {
    color: #fff;
}

.rooms-page-hero--photo .rooms-stat__label {
    color: rgba(255, 255, 255, 0.82);
}

.rooms-page-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.5rem;
}

.rooms-page-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--sea);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.rooms-page-lead {
    max-width: 62ch;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 2rem;
}

.rooms-page-lead a {
    color: var(--sea);
    font-weight: 600;
}

.rooms-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 1rem;
    max-width: 640px;
    min-width: 0;
}

.rooms-stat {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 4px 18px rgba(28, 25, 23, 0.05);
}

.rooms-stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--sea);
    line-height: 1.2;
}

.rooms-stat__label {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 600;
    margin-top: 0.25rem;
    display: block;
}

.rooms-cloud-section {
    padding: 2.25rem 0;
    background: var(--cream);
}

.rooms-cloud-heading {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.rooms-cloud-sub {
    margin-bottom: 1.25rem;
    max-width: 58ch;
}

.rooms-feature-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
}

.rooms-cloud-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    box-shadow: 0 2px 8px rgba(28, 25, 23, 0.04);
}

.rooms-cloud-chip i {
    color: var(--sea);
    font-size: 0.9rem;
}

.rooms-list-section {
    padding-top: 2.5rem;
}

.rooms-filter-box {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}

.rooms-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem 0.9rem;
}

.rooms-filter-grid label {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.rooms-filter-grid input,
.rooms-filter-grid select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.rooms-filter-features {
    margin-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
}

.rooms-filter-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--sand);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    color: var(--ink);
}

.rooms-filter-feature input {
    width: auto;
    margin: 0;
}

.rooms-filter-actions {
    margin-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 0.9rem;
    align-items: center;
}

.rooms-filter-count {
    font-weight: 700;
}

.rooms-showcase-list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.room-showcase {
    display: grid;
    grid-template-columns: minmax(min(100%, 240px), 340px) minmax(0, 1fr);
    gap: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(28, 25, 23, 0.07);
    align-items: stretch;
    max-width: 100%;
}

.room-showcase--alt {
    direction: rtl;
}

.room-showcase--alt > * {
    direction: ltr;
}

/*
 * GÖRSEL GÖVDEYE GÖRE UZAMAZ.
 *
 * Izgara hücresi gövde kadar uzuyordu: özellik listesi uzun olan tipte
 * fotoğraf dar ve çok uzun bir şeride sıkışıp neredeyse tamamen kırpılıyordu.
 * Sabit orana bağlanıp yukarı hizalanır; fotoğraf kırpılmadan sığar.
 */
.room-showcase__visual {
    position: relative;
    align-self: start;
    aspect-ratio: 4 / 3;
    min-height: 0;
    background: linear-gradient(145deg, #0f766e 0%, #0f172a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
}

/*
 * KARARTMA HAFİFLETİLDİ.
 *
 * Üstünde yazı yokken (kod ve yatak simgesi kaldırıldı) koyu perde bir işe
 * yaramıyor, yalnızca otelin fotoğrafını soluklaştırıyordu.
 */
/*
 * KARARTMA KALDIRILDI, FOTOĞRAF KIRPILMIYOR.
 *
 * Perde, üstünde yazı varken anlamlıydı; kod ve yatak simgesi kalkınca
 * yalnızca otelin fotoğrafını soluklaştırıyordu. `contain` ile fotoğrafın
 * tamamı görünür — kesilen yerde önemli bir şey kalmaz.
 */
/* Oturma biçimi `.photo-frame` kuralında (aşağıda). */
.room-showcase__visual--photo {
    background-image: var(--room-photo);
    background-color: var(--sand, #f1efe9);
}

.room-showcase__visual--photo .room-showcase__photo-scrim { display: none; }

.room-showcase__photo-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15, 118, 110, 0.08) 0%, rgba(15, 23, 42, 0.16) 100%);
    z-index: 0;
}

.room-showcase__visual--photo .room-showcase__pattern {
    z-index: 1;
}

.room-showcase__visual--photo .room-showcase__code,
.room-showcase__visual--photo .room-showcase__icon {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.room-showcase__thumbs {
    position: absolute;
    bottom: 0.65rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    max-width: calc(100% - 1.25rem);
}

.room-showcase__thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.room-showcase__thumb:hover {
    border-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
}

.room-showcase__thumb.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--sea-light), 0 4px 14px rgba(0, 0, 0, 0.4);
}

.room-showcase__pattern {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.room-showcase__code {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.room-showcase__icon {
    position: relative;
    z-index: 1;
    font-size: 2.25rem;
    margin-top: 0.75rem;
    opacity: 0.85;
}

.room-showcase__body {
    padding: 1.75rem 1.85rem 1.9rem;
    min-width: 0;
}

.room-showcase__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.room-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    background: var(--sand);
    color: var(--muted);
}

.room-pill--accent {
    background: rgba(196, 92, 74, 0.12);
    color: var(--coral);
}

.room-pill--accent small {
    font-weight: 600;
    opacity: 0.85;
}

.room-pill__old {
    text-decoration: line-through;
    color: #9ca3af;
}

.room-pill__new {
    color: #dc2626;
}

.room-showcase__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--sea);
    margin-bottom: 0.65rem;
    line-height: 1.25;
}

.room-showcase__desc {
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.room-showcase__feat-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.65rem;
}

.feature-icon-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0;
}

@media (max-width: 480px) {
    .feature-icon-grid {
        grid-template-columns: 1fr;
    }
}

.feature-icon-grid li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.4;
}

.feature-icon-grid li i {
    color: var(--sea);
    margin-top: 0.15rem;
    width: 1.1rem;
    flex-shrink: 0;
    text-align: center;
}

/* Otelin yüklediği ikon: hazır simgeyle aynı hizada ve boyda dursun. */
.feature-icon-img {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: contain;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* Listede kırpılan özelliklerin devamı — tip detayına götürür. */
.feature-more-link {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sea);
    text-decoration: none;
}

.feature-more-link:hover { text-decoration: underline; }

.room-showcase__cta {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.room-showcase__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 0.75rem;
    align-items: center;
}

.room-card-cta--split {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-room-detail {
    background: linear-gradient(135deg, #fff 0%, #f3f7ff 100%);
    color: var(--sea);
    border: 1px solid #b9d0ff;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.12);
}

.btn-room-detail i {
    color: #2563eb;
}

.btn-room-detail:hover {
    background: linear-gradient(135deg, #f8fbff 0%, #e8f1ff 100%);
    border-color: #8fb3ff;
    color: #0f5f59;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

@media (max-width: 900px) {
    .rooms-filter-grid {
        grid-template-columns: 1fr;
    }

    .room-showcase,
    .room-showcase--alt {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .room-showcase__visual {
        min-height: 0;
        aspect-ratio: 4 / 3;
        align-self: stretch;
    }
}

/* ——— Ana sayfa: hikâye & güven ——— */
.section--tight {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.split-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
    align-items: center;
    min-width: 0;
}

.split-showcase > * {
    min-width: 0;
}

.split-showcase__img-wrap {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    aspect-ratio: 4 / 3;
}

.split-showcase__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.split-showcase__text .section-title--left {
    text-align: left;
    margin-bottom: 1rem;
}

.check-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
    font-weight: 600;
    color: var(--ink);
}

.check-list li i {
    color: var(--sea);
    margin-top: 0.2rem;
}

.check-list--block li {
    margin-bottom: 0.75rem;
}

@media (max-width: 900px) {
    .split-showcase {
        grid-template-columns: 1fr;
    }
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
    max-width: 70ch;
}

.section-head__lead a {
    color: var(--sea);
    font-weight: 600;
}

.section--rooms-preview {
    background: linear-gradient(180deg, var(--cream) 0%, #fff 40%);
}

.section-cta-row {
    margin-top: 2.25rem;
}

.section--trust {
    background: var(--sand);
    border-top: 1px solid var(--border);
    padding-bottom: 3.5rem;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    min-width: 0;
}

.trust-grid > * {
    min-width: 0;
}

.trust-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.35rem;
    box-shadow: var(--shadow-soft);
}

.trust-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(15, 118, 110, 0.12);
    color: var(--sea);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.trust-card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--sea);
    margin-bottom: 0.5rem;
}

.trust-card .muted {
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (max-width: 800px) {
    .trust-grid {
        grid-template-columns: 1fr;
    }
}

/* ——— Hakkımızda ——— */
.about-grid {
    display: grid;
    grid-template-columns: 1fr minmax(min(100%, 280px), 380px);
    gap: 2.5rem 3rem;
    align-items: start;
    min-width: 0;
}

.about-grid > * {
    min-width: 0;
}

.prose--wide {
    max-width: none;
}

.about-sidebar-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.about-sidebar-card__img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.about-sidebar-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-sidebar-card__body {
    padding: 1.5rem 1.35rem 1.65rem;
}

.about-sidebar-card__body h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--sea);
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

/* ——— Galeri sayfası ——— */
.site-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 14px;
}

.site-gallery-item {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.site-gallery-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.gallery-empty-card {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    padding: 2rem 1.2rem;
    box-shadow: var(--shadow-soft);
}

.gallery-empty-card h2 {
    font-family: var(--font-display);
    color: var(--sea);
    margin-bottom: 0.6rem;
}

/* ——— İletişim ——— */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr minmax(min(100%, 300px), 400px);
    gap: 2.5rem 3rem;
    align-items: start;
    min-width: 0;
}

.contact-layout > * {
    min-width: 0;
}

.contact-layout--wide {
    grid-template-columns: minmax(0, 1fr) minmax(min(100%, 280px), 380px);
    max-width: min(1080px, 100%);
    margin-inline: auto;
}

.contact-form--booking {
    max-width: 100%;
}

.contact-form--booking .req {
    color: var(--coral);
    font-weight: 700;
}

.booking-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem 1.4rem;
    margin-bottom: 1.35rem;
    background: #fff;
    box-shadow: var(--shadow-soft);
    min-width: 0;
    max-width: 100%;
}

.booking-legend {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--sea);
    padding: 0 0.35rem;
}

.booking-availability-msg {
    min-height: 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.booking-dates-grid,
.booking-guests-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.75rem;
    min-width: 0;
}

.booking-dates-grid > *,
.booking-guests-grid > * {
    min-width: 0;
}

.booking-price-summary {
    margin-top: 0.9rem;
    padding: 0.95rem 1rem;
    border: 2px solid rgba(15, 118, 110, 0.25);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(15, 118, 110, 0.04) 100%);
    box-shadow: 0 8px 22px rgba(15, 118, 110, 0.08);
}

.booking-price-summary strong {
    display: block;
    font-size: 0.95rem;
    color: var(--sea);
    margin-bottom: 0.35rem;
    font-weight: 800;
}

.booking-price-summary p {
    margin: 0;
    font-size: 1.02rem;
    color: var(--ink);
    line-height: 1.45;
    font-weight: 700;
}

.contact-total-summary {
    margin-top: 1rem;
    margin-bottom: 0.85rem;
}

@media (max-width: 520px) {
    .booking-dates-grid,
    .booking-guests-grid {
        grid-template-columns: 1fr;
    }
}

.companion-row {
    display: grid;
    grid-template-columns: minmax(100px, 120px) 1fr 1fr minmax(min(100%, 140px), 1fr) auto;
    gap: 0.65rem;
    align-items: end;
    margin-bottom: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--sand);
    border-radius: 10px;
    border: 1px solid var(--border);
    min-width: 0;
    max-width: 100%;
}

.companion-row > * {
    min-width: 0;
}

.companion-row .companion-row-remove {
    align-self: stretch;
}

.companion-row__label {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.15rem;
}

@media (max-width: 720px) {
    .companion-row {
        grid-template-columns: 1fr 1fr;
    }

    .companion-row input:nth-child(4),
    .companion-row .companion-row-remove {
        grid-column: 1 / -1;
    }
}

.contact-submit-row {
    margin-top: 1.5rem;
}

.btn--block {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
}

.room-card-cta {
    margin-top: auto;
    padding-top: 1rem;
}

.contact-intro {
    max-width: 52ch;
    margin-bottom: 1.25rem;
}

.contact-intro a {
    color: var(--sea);
    font-weight: 600;
}

.contact-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.contact-card__photo {
    height: 180px;
    background-image: linear-gradient(180deg, rgba(15, 23, 42, 0.15), rgba(15, 23, 42, 0.55)), var(--contact-photo);
    background-size: cover;
    background-position: center;
}

.contact-card__body {
    padding: 1.5rem 1.35rem 1.65rem;
}

.contact-card__title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--sea);
    margin-bottom: 1.25rem;
}

.contact-card__block {
    margin-bottom: 1.25rem;
}

.contact-card__block:last-child {
    margin-bottom: 0;
}

.contact-card__block h3 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

.contact-card__block a {
    color: var(--sea);
    font-weight: 600;
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

/* ——— Oda detay sayfası ——— */
.room-detail-hero .page-hero__lead {
    max-width: none;
}

.room-detail-breadcrumb-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.room-detail-breadcrumb-link:hover {
    opacity: 0.92;
}

.room-detail-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    align-items: center;
}

.room-detail-hero-chips {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.room-detail-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    font-weight: 600;
}

.room-detail-price--old {
    text-decoration: line-through;
    color: #cbd5e1;
}

.room-detail-price--new {
    color: #fecaca;
    font-weight: 700;
}

.room-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 2rem;
}

.room-detail-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(min(100%, 280px), 360px);
    gap: 1.25rem 1.5rem;
    align-items: start;
    margin-bottom: 1.2rem;
}

.room-detail-summary-card,
.room-detail-cta-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.room-detail-summary-card {
    padding: 1.2rem 1.25rem;
}

.room-detail-summary-title {
    font-family: var(--font-display);
    color: var(--sea);
    font-size: 1.2rem;
    margin-bottom: 0.85rem;
}

.room-detail-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: 0.7rem;
}

.room-detail-stat {
    background: var(--sand);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
}

.room-detail-stat__label {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 0.2rem;
}

.room-detail-stat__value {
    font-size: 0.95rem;
    color: var(--ink);
}

.room-detail-stat--discount .room-detail-stat__value {
    color: #dc2626;
}

.room-detail-mini-features {
    margin-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.room-detail-mini-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.33rem 0.55rem;
    border-radius: 8px;
    background: rgba(15, 118, 110, 0.08);
    color: var(--sea);
    font-size: 0.78rem;
    font-weight: 600;
}

.room-detail-cta-card {
    padding: 1rem 1rem 1.05rem;
    border-color: #f3d0bf;
}

.room-detail-cta-card__eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

.room-detail-cta-card__price {
    font-family: var(--font-display);
    color: var(--coral);
    font-size: 1.65rem;
    line-height: 1.1;
    margin-bottom: 0.2rem;
}

.room-detail-cta-card__price span {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--muted);
}

.room-detail-cta-card__discount {
    font-size: 0.82rem;
    color: #dc2626;
    margin-bottom: 0.8rem;
}

.room-detail-cta-card .room-detail-actions {
    margin-bottom: 0.8rem;
}

.room-detail-quick-points {
    margin: 0;
    padding-left: 1rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.room-detail-quick-points li + li {
    margin-top: 0.25rem;
}

.room-detail-prose {
    margin-bottom: 2rem;
    line-height: 1.7;
}

.room-detail-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.room-detail-subtitle {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--sea);
    margin: 2rem 0 1rem;
}

.room-detail-features {
    margin-bottom: 0.5rem;
}

.room-detail-media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.5rem;
    align-items: start;
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .room-detail-media-grid {
        grid-template-columns: 1fr;
    }

    .room-detail-top-grid {
        grid-template-columns: 1fr;
    }
}

.room-detail-media-col {
    min-width: 0;
}

.room-detail-media-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1rem;
}

.room-detail-gallery-main {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--sand);
    aspect-ratio: 4 / 3;
}

.room-detail-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.room-detail-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.room-detail-thumb {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--sand);
    line-height: 0;
    opacity: 0.82;
    transition: opacity 0.15s, border-color 0.15s;
}

.room-detail-thumb:hover,
.room-detail-thumb.is-active {
    opacity: 1;
    border-color: var(--coral);
}

.room-detail-thumb img {
    width: 88px;
    height: 60px;
    object-fit: cover;
    display: block;
}

.room-detail-videos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.room-detail-video-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: var(--ink);
}

.room-detail-video-frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #0f172a;
    box-shadow: var(--shadow-soft);
}

.room-detail-video-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Marka logosu ─────────────────────────────────────────────────────────
   Panelden logo yüklenince üst menüde otel adı yerine görsel çıkar. Yükseklik
   sabit, genişlik oranla: farklı en–boy oranlarındaki logolar üst bandı
   büyütmesin. Üç temada da aynı sınıf kullanılıyor. */
.site-logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.logo--image {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .site-logo { height: 36px; max-width: 160px; }
}

/* ── WhatsApp butonu ───────────────────────────────────────────────────────
   Sağ alta sabitlenir. Etiket masaüstünde açılıp kapanır, mobilde hiç
   görünmez: dar ekranda genişleyen bir buton içeriğin üstüne oturuyor ve
   "kapat" düğmesi olmadığı için okumayı engelliyordu. */
/* ==========================================================================
   ÇEREZ ONAYI

   Sağ altta duran kutu. Reddet ve kabul AYNI BOYDA: soluk bir «reddet»
   bağlantısıyla parlak bir «kabul et» düğmesi GDPR'a göre geçerli onay
   sayılmıyor.
   ========================================================================== */

.cc-kutu {
    position: fixed;
    right: 22px;
    bottom: 22px;
    /* WhatsApp düğmesinin (900) üstünde. */
    z-index: 950;
    /* Sabit taban dar ekranda taşırıyor. */
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    padding: 20px 22px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
    color: #0f172a;
}

@media (max-width: 560px) {
    /* Dar ekranda köşeye sıkışmak yerine alt kenara yayılıyor. */
    .cc-kutu {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
    }
}

.cc-kutu__baslik {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
}

.cc-kutu__metin {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
}

.cc-eylemler {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cc-dugme {
    /* Dokunma hedefi: 44px altına inen düğme parmakla ıskalanıyor. */
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, .18);
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cc-dugme:hover,
.cc-dugme:focus-visible {
    border-color: var(--renk-vurgu, #2563eb);
}

.cc-dugme--kabul {
    background: var(--renk-vurgu, #2563eb);
    border-color: var(--renk-vurgu, #2563eb);
    color: #fff;
}

/*
 * «Ayarlar» iki sütunun altına tam genişlikte yayılır: kabul ve reddet
 * yan yana eşit kalsın, üçüncü seçenek onları daraltmasın.
 */
.cc-dugme--ayar {
    grid-column: 1 / -1;
    background: transparent;
    border-style: dashed;
}

.cc-dugme--kaydet {
    width: 100%;
    margin-top: 4px;
}

.cc-detay {
    margin: 0 0 14px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(15, 23, 42, .1);
}

.cc-secim {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    cursor: pointer;
}

.cc-secim input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: 0 0 auto;
    cursor: pointer;
}

.cc-secim--kilitli {
    cursor: default;
    opacity: .75;
}

.cc-secim--kilitli input {
    cursor: not-allowed;
}

.cc-secim strong {
    display: block;
    font-size: 13px;
}

.cc-secim em {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
    color: #64748b;
}

/*
 * «Çerez ayarları» — karar verildikten sonra kalan küçük tutamak.
 * Sol altta: sağ alt köşe WhatsApp düğmesinin.
 */
.cc-yeniden {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 890;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #475569;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    opacity: .65;
}

.cc-yeniden:hover,
.cc-yeniden:focus-visible {
    opacity: 1;
}

/*
 * Kutu açıkken WhatsApp düğmesi gizlenir: ikisi de sağ alt köşede duruyor
 * ve üst üste biniyorlardı. Karar verilince düğme geri gelir.
 */
.cc-acik .wa-fab {
    display: none;
}

.wa-fab {
    position: fixed;
    bottom: 22px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .35), 0 2px 6px rgba(15, 23, 42, .18);
    overflow: hidden;
    transition: max-width .25s ease, background-color .2s ease, transform .2s ease;
}

.wa-fab--right { right: 22px; }
.wa-fab--left { left: 22px; }

.wa-fab__icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
}

.wa-fab__label {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    padding-right: 20px;
    opacity: 0;
    transition: opacity .2s ease;
}

.wa-fab:hover,
.wa-fab:focus-visible {
    max-width: 320px;
    background: #1FB855;
    transform: translateY(-1px);
}

.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label { opacity: 1; }

.wa-fab:focus-visible { outline: 3px solid #0f766e; outline-offset: 3px; }

@media (max-width: 640px) {
    .wa-fab { bottom: 16px; height: 52px; max-width: 52px; }
    .wa-fab--right { right: 16px; }
    .wa-fab--left { left: 16px; }
    .wa-fab__icon { flex-basis: 52px; width: 52px; height: 52px; }
    .wa-fab__label { display: none; }
    .wa-fab:hover, .wa-fab:focus-visible { max-width: 52px; }
}

/* Hareket azaltma tercihi: genişleme animasyonu kapanır, buton yine çalışır. */
@media (prefers-reduced-motion: reduce) {
    .wa-fab, .wa-fab__label { transition: none; }
}

/* ── Dil seçici ───────────────────────────────────────────────────────────
   Üst menünün sağında, iki harfli kısa kodlar. Bayrak KULLANILMIYOR: bayrak
   ülkeyi gösterir, dili değil — İngilizce için hangi bayrak konursa konsun
   bir kesim kullanıcıyı dışarıda bırakır. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: 6px;
    padding: 3px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 999px;
}

.lang-switch__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted, #64748b);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.lang-switch__item:hover { color: var(--ink, #0f172a); background: var(--line-soft, #f1f5f9); }

.lang-switch__item.is-active {
    background: var(--sea, #0f766e);
    color: #fff;
}

/* ── Sağdan sola (Arapça) ─────────────────────────────────────────────────
   Yalnızca yön bağımlı kuralların düzeltmesi. Mantıksal özellikler
   (margin-inline-start) zaten kendiliğinden dönüyor; aşağıdakiler eski
   fiziksel kuralların karşılığı. */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .site-header .wrap,
[dir="rtl"] .header-inner { flex-direction: row-reverse; }
[dir="rtl"] .main-nav { flex-direction: row-reverse; }
[dir="rtl"] .footer-grid,
[dir="rtl"] .footer-links { text-align: right; }
[dir="rtl"] .wa-fab--right { right: auto; left: 22px; }
[dir="rtl"] .wa-fab--left { left: auto; right: 22px; }

/* Rakamlar ve tarihler LTR kalır: "12.03.2026" Arapça akış içinde ters
   dizilirse okunmaz hâle gelir. */
[dir="rtl"] .price-amount,
[dir="rtl"] time,
[dir="rtl"] .num { direction: ltr; display: inline-block; }

@media (max-width: 900px) {
    .lang-switch { margin-inline-start: 0; }
}

/* ==========================================================================
   BLOG (yol haritası #54)

   Liste kartları, kategori şeridi, sayfalama ve yazı gövdesi. Oda kartı
   ızgarasıyla aynı ölçüleri kullanır — sitede ikinci bir kart dili
   uydurmamak için.
   ========================================================================== */

.section--soft {
    background: #f8fafc;
}

/* --- kategori şeridi ----------------------------------------------------- */

.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2rem;
}

.blog-filter__item {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.blog-filter__item:hover {
    border-color: #94a3b8;
    color: #1e293b;
    text-decoration: none;
}

.blog-filter__item.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

/* --- kart ızgarası -------------------------------------------------------- */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.6rem;
}

.blog-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .10);
}

.blog-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f5f9;
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.15rem 1.25rem 1.35rem;
    min-width: 0;
}

.blog-card__cat {
    align-self: flex-start;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #4f46e5;
    text-decoration: none;
}

.blog-card__title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35;
}

.blog-card__title a {
    color: #0f172a;
    text-decoration: none;
}

.blog-card__title a:hover {
    text-decoration: underline;
}

.blog-card__excerpt {
    margin: 0;
    color: #64748b;
    font-size: .93rem;
    line-height: 1.6;
}

.blog-card__meta {
    margin: auto 0 0;
    padding-top: .35rem;
    color: #94a3b8;
    font-size: .8rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* --- sayfalama ------------------------------------------------------------ */

.blog-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 2.5rem;
}

.blog-pager__item {
    min-width: 40px;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #475569;
    font-weight: 600;
    font-size: .88rem;
    text-align: center;
    text-decoration: none;
}

.blog-pager__item.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

/* --- yazı sayfası --------------------------------------------------------- */

/* Okuma genişliği sınırlı: 1200 px'lik bir satır gözü satır başına
   döndürmüyor, uzun metin okunmaz oluyor. */
.blog-article__wrap {
    max-width: 760px;
}

.blog-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .9rem;
}

.blog-article__body {
    font-size: 1.03rem;
    line-height: 1.75;
}

.blog-article__body h2 {
    margin: 2.2rem 0 .8rem;
    font-size: 1.5rem;
    line-height: 1.3;
}

.blog-article__body h3 {
    margin: 1.8rem 0 .6rem;
    font-size: 1.2rem;
}

.blog-article__body p { margin: 0 0 1.1rem; }
.blog-article__body ul,
.blog-article__body ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.blog-article__body li { margin-bottom: .4rem; }

.blog-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.2rem 0;
}

.blog-article__body blockquote {
    margin: 1.4rem 0;
    padding: .6rem 0 .6rem 1.1rem;
    border-left: 3px solid #cbd5e1;
    color: #475569;
    font-style: italic;
}

.blog-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0;
    font-size: .93rem;
}

.blog-article__body th,
.blog-article__body td {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    text-align: left;
}

.blog-article__back {
    margin: 2.5rem 0 0;
}

@media (max-width: 640px) {
    .blog-grid { gap: 1.1rem; }
    .blog-article__body { font-size: 1rem; }
}

/* ==========================================================================
   ODA GALERİSİ — oklar, sayaç, büyütme

   Küçük görsel ve ana görsel kuralları yukarıda (.room-detail-*).
   Burada gezinme katmanı var.
   ========================================================================== */

/* Görsel bir düğmenin içinde: tıklayınca büyüsün ve klavyeyle de
   açılabilsin. Düğmenin kendi görünümü olmamalı. */
.room-detail-gallery-zoom {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    line-height: 0;
}

.room-detail-gallery-main {
    position: relative;
}

.room-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .55);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    /* Dokunmatikte her zaman görünür; farede sadece üzerine gelince.
       Mobilde gizleseydik ok olduğunu kimse bilemezdi. */
    opacity: 1;
    transition: background .15s ease, opacity .15s ease;
}

.room-gallery-nav:hover {
    background: rgba(15, 23, 42, .8);
}

.room-gallery-nav--prev { left: 12px; }
.room-gallery-nav--next { right: 12px; }

@media (hover: hover) {
    .room-gallery-nav { opacity: 0; }
    .room-detail-gallery-main:hover .room-gallery-nav,
    .room-gallery-nav:focus-visible { opacity: 1; }
}

.room-gallery-count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .6);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
}

/* --- büyütme ------------------------------------------------------------- */

.room-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 4vh 4vw;
    background: rgba(8, 12, 22, .93);
}

.room-lightbox[hidden] { display: none; }

/* Arkadaki sayfa kaymasın: büyütme açıkken gövde kilitlenir. */
body.room-lightbox-open { overflow: hidden; }

.room-lightbox__img {
    max-width: 100%;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 10px;
}

.room-lightbox__close {
    position: absolute;
    z-index: 3;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.room-lightbox__close:hover { background: rgba(255, 255, 255, .22); }

/*
 * OKLAR GÖRSELİN ÜSTÜNDE DURMALI.
 *
 * Yığın sırası verilmemişti: `max-width: 100%` olan görsel dar ekranda
 * kutunun tamamını kaplayınca okların ÜSTÜNE biniyor ve tıklama görsele
 * gidiyordu. Düğmeler yerinde duruyor, çalışıyor, ama basılamıyor —
 * kullanıcı "geçmiyor" olarak görüyor (mobilde ölçüldü).
 *
 * Görsel de konumlandırılıyor: `z-index` yalnızca konumlanmış ögede işler.
 */
.room-lightbox__img { position: relative; z-index: 1; }

.room-lightbox__nav {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.room-lightbox__nav:hover { background: rgba(255, 255, 255, .22); }

@media (max-width: 640px) {
    .room-lightbox { padding: 2vh 2vw; gap: .25rem; }
    .room-gallery-nav { width: 38px; height: 38px; }

    /* Dar ekranda oklar görselin YANINDA değil ÜSTÜNDE: 390px'lik ekranda
       iki düğme yan yana konunca fotoğrafa 300px kalıyordu. */
    .room-lightbox__nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(15, 23, 42, .55);
    }

    .room-lightbox__nav--prev { left: 10px; }
    .room-lightbox__nav--next { right: 10px; }
}

/* ——— İletişim sayfası haritası ———
   Otelin yapıştırdığı Google Haritalar kodu (bkz. site_map_embed_html).
   Yükseklik burada verilir: yapıştırılan koddaki width/height nitelikleri
   ayıklandığı için iframe kendi boyutunu taşımaz. */
.contact-map {
    height: 420px;
    border-radius: var(--radius, 12px);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--sand);
}

.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ——— İletişim sayfası ———
   Düzen referansı moonlit contact sayfası; renkler ve tipografi projenin
   kendi değişkenlerinden geliyor, hazır tema CSS'i taşınmadı. */

.ct-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 10px;
}

/* Form solda, görsel sağda. Dar ekranda görsel gizlenir — küçük ekranda
   dekoratif bir fotoğraf için ekranın yarısını harcamak, formu aşağı iter. */
.ct-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 40px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .ct-form-row { grid-template-columns: 1fr; gap: 28px; }
    .ct-form-media { display: none; }
}

.ct-form-col { min-width: 0; }
.ct-form-lead { margin: 0 0 22px; }

.ct-form-media {
    border-radius: var(--radius, 12px);
    background-size: cover;
    background-position: center;
    min-height: 380px;
    border: 1px solid var(--border);
}

.ct-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 16px;
}

/*
 * Alanlar AÇIKÇA biçimlendirilir. `.form-group` panelin sınıfı; sitede
 * karşılığı yok ve etiketler satır içi, kutular minicik çıkıyordu.
 */
.ct-form .form-group { margin-bottom: 16px; min-width: 0; }

.ct-form label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.ct-form input,
.ct-form textarea {
    width: 100%;
    display: block;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    background: var(--cream);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ct-form input:focus,
.ct-form textarea:focus {
    outline: none;
    border-color: var(--sea);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 18%, transparent);
}

.ct-form textarea { resize: vertical; min-height: 150px; }
.ct-form .btn { margin-top: 6px; }

/* Bal küpü: ekran okuyucudan da uzak tutulur ama `display:none` bazı
   botlarca "atla" işareti sayıldığı için görsel olarak taşınır. */
.ct-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ——— İki bilgi kartı ——— */
.ct-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 20px;
}

.ct-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    background: var(--cream);
    padding: 30px;
}

.ct-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sand);
    color: var(--sea);
    font-size: 1.05rem;
    margin-bottom: 16px;
}

.ct-card h2 { margin: 0 0 18px; font-size: 1.35rem; }

.ct-list { margin: 0; display: grid; gap: 14px; }
.ct-list > div { display: grid; gap: 2px; }

.ct-list dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Telefon/e-posta bilgidir: bağlantı süsü olmadan, metin renginde. */
.ct-list dd { margin: 0; line-height: 1.6; }
.ct-list dd a { color: inherit; text-decoration: none; }
.ct-list dd a:hover { color: var(--sea); }

.ct-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

/* WhatsApp: kartın sağ üstünde yalnızca ikon. */
.ct-card__cta {
    position: absolute;
    top: 26px;
    right: 26px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sand);
    color: var(--sea);
    font-size: 1.2rem;
    text-decoration: none;
}

.ct-card__cta:hover { background: var(--sea); color: #fff; }

.ct-prose { line-height: 1.8; max-width: 70ch; }
.ct-prose p { margin: 0 0 1em; }

/* ——— Harita ———
   Yapıştırılan koddaki width/height ayıklandığı için yükseklik burada. */
.contact-map {
    height: 440px;
    border-radius: var(--radius, 12px);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--sand);
}

.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.contact-banks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}

.contact-bank {
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    padding: 20px;
    background: var(--cream);
}

.contact-bank h3 { margin: 0 0 8px; font-size: 1rem; }
.contact-bank p { margin: 0 0 4px; }
.contact-bank__iban { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }

/* ——— Rezervasyon sayfası ——— */
.booking-layout { display: grid; gap: 28px; }
.booking-layout__form { min-width: 0; }

/* ——— Dil seçici: TEK BAYRAK ———
   Çerçeveli kutu ve "TR/EN" yazıları kaldırıldı; menüde ağır duruyordu.
   Bayrak satır içi SVG (bkz. i18n_flag_svg) — emoji bayraklar Windows'ta
   harf kutusu olarak çiziliyor. Hedef dil `title`/`aria-label` ile
   söyleniyor: yazı olmadığı için tıklayınca ne olacağı başka türlü belli
   olmuyor. */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 17px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0.92;
    transition: opacity 0.15s ease;
}

.lang-toggle:hover { opacity: 1; }
.lang-toggle svg { width: 100%; height: 100%; display: block; }

.lang-toggle__code {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ——— Hızlı rezervasyon kutusu (beş temada ortak) ———
   Hero'nun altına biner: ziyaretçinin ilk gördüğü yerde tarih seçebilmeli.
   Tema kendi sarmalayıcı sınıfını verirse (ör. .rs-search) buradaki temel
   düzen korunur, görünüm o temanın CSS'inden gelir. */
.quick-search-wrap { position: relative; z-index: 5; margin-top: -32px; }

@media (max-width: 720px) {
    .quick-search-wrap { margin-top: 16px; }
}

.quick-search {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 4px;
    padding: 10px;
    background: var(--cream, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    box-shadow: 0 24px 50px -30px rgba(15, 23, 42, 0.45);
}

.quick-search__cell { padding: 14px 16px; border-radius: var(--radius, 12px); min-width: 0; }
.quick-search__cell:hover { background: var(--sand); }

.quick-search__cell label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

/* Kenarlıksız alanlar: kutu zaten çerçeveli, iç çerçeveler onu kalabalık
   gösteriyordu.

   SEÇİCİ NİYE BU KADAR UZUN: tema dosyaları form alanlarına genel bir
   kural yazıyor —

       body.theme-risos input:not([type="checkbox"]):not([type="radio"]):not([type="file"])

   — ve bu (0,4,2) ağırlığında. `.quick-search__cell input` (0,1,1) ile
   yarışamaz; kutunun içindeki tarih alanları temanın çerçevesini alıyor,
   kutunun içinde kutucuklar görünüyordu. Aynı `:not()` zinciri buraya da
   yazılıp iki sınıf eklenince (0,6,1) oluyor ve kural GERÇEKTEN uygulanıyor.
   Kısaltmayın: eksilen her parça çerçeveyi geri getirir. */
.quick-search .quick-search__cell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.quick-search .quick-search__cell select,
.quick-search .quick-search__cell textarea {
    border: 0;
    background: transparent;
    border-radius: 0;
}

/* Odak halkası KALIR: klavyeyle gezen ziyaretçi nerede olduğunu görmeli.
   Çerçeveyi sıfırlarken box-shadow da sıfırlansaydı bu kutuda odak
   görünmez olurdu. */
.quick-search .quick-search__cell input:focus,
.quick-search .quick-search__cell select:focus {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.quick-search__cell input,
.quick-search__cell select {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    border-radius: 0;
}

.quick-search__go {
    border: 0;
    background: var(--sea);
    color: #fff;
    padding: 16px 24px;
    border-radius: var(--radius, 12px);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.quick-search__go:hover { background: var(--ink); }

/* ——— Ana sayfa slider'ı (beş temada ortak) ———
   Slaytlar üst üste durur, etkin olan görünür. `display:none` yerine opacity:
   geçiş yumuşak olsun ve tarayıcı görselleri önceden indirsin. */
.hero-slider { position: absolute; inset: 0; overflow: hidden; }

.hero-slider__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.hero-slider__slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .hero-slider__slide { transition: none; }
}

.hero-slider__body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 clamp(24px, 5vw, 64px);
}

.hero-slider__inner { max-width: 640px; color: #fff; }

.hero-slider__title {
    margin: 0 0 14px;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.1;
    color: #fff;
}

.hero-slider__lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
}

/* Küçük kareler: sağ altta, etkin olan beyaz çerçeveli. */
.hero-slider__thumbs {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 3;
    display: flex;
    gap: 10px;
    pointer-events: auto;
}

.hero-slider__thumb {
    width: 92px;
    height: 62px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.hero-slider__thumb:hover { opacity: 1; }
.hero-slider__thumb.is-active { border-color: #fff; opacity: 1; }

/* Dar ekranda küçük kareler metnin üstüne biner. */
@media (max-width: 720px) {
    .hero-slider__thumbs { right: 12px; bottom: 12px; gap: 6px; }
    .hero-slider__thumb { width: 56px; height: 40px; border-radius: 8px; }
}

/* Slider hero'nun ARKASINDA durur: düğmeler ve arama kutusu üstte kalmalı.
   Küçük kareler kendi z-index'iyle tıklanabilir (bkz. .hero-slider__thumbs). */
.hero-slider { z-index: 0; }
.hero--slider > *:not(.hero-slider),
.has-slider > *:not(.hero-slider) { position: relative; z-index: 2; }

/* Metni olmayan slaytta başlık/metin ögesi BOŞ kalır; boş kutu yer
   kaplamasın (kullanıcı isteği: metin yoksa yazı hiç görünmesin). */
[data-hero-title]:empty,
[data-hero-lead]:empty { display: none; }


/* ——— Kaydırdıkça beliren bloklar ———
 *
 * Sayfa aşağı kaydıkça ögeler yerine "dökülür". Süslemeden ibaret olduğu
 * için JS'siz durumda GÖRÜNÜR kalır: `is-revealed` sınıfını JS ekler, ama
 * başlangıç durumu da okunabilir olmalı — betik yüklenmezse içerik
 * kaybolmasın diye gizleme YALNIZCA JS ögeyi işaretledikten sonra
 * uygulanır (bkz. [data-reveal].reveal-ready).
 */
[data-reveal].reveal-ready {
    opacity: 0;
    transform: translateY(18px);
}

[data-reveal].reveal-ready.is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal].reveal-ready,
    [data-reveal].reveal-ready.is-revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ——— Oda fotoğrafı çerçevesi (beş temada ortak) ———
 *
 * SORUN: fotoğraf kırpılmasın diye `contain` kullanıldı, ama fotoğrafın
 * oranı kutununkiyle tutmadığında yanlarda boş şerit kalıyordu.
 *
 * `cover`a dönmek fotoğrafı yine keser — otelin göstermek istediği yer tam
 * orada olabilir. Kutuyu fotoğrafın oranına uydurmak da olmaz: ızgaradaki
 * kartlar farklı yükseklikte olur, sıra bozulur.
 *
 * ÇÖZÜM: boşluk fotoğrafın KENDİSİYLE doldurulur. Arka planda `cover` ile
 * yayılan aynı görsel bulanıklaştırılır, üstünde `contain` ile tam görsel
 * durur. Kutu dolu görünür, fotoğraf kırpılmaz.
 *
 * Kullanım: elemana `photo-frame` sınıfı; `background-image` yine elemanın
 * kendisinde (inline). Katmanlar `inherit` ile aynı görseli alır — böylece
 * temaların her biri kendi seçicisini kullanmaya devam eder.
 */
.photo-frame {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*
 * Bulanık zemin: aynı görselin `cover` ile yayılmış, bulanıklaştırılmış
 * kopyası.
 *
 * NİYE `backdrop-filter` DEĞİL: ilk sürüm onu kullandı ve Klasik temada
 * fotoğrafı görünmez yaptı — `<img>` katmanı z-index ile üstte olmasına
 * rağmen bulanığa karışıyordu. `filter` ögenin KENDİ içeriğine uygulanır,
 * komşularına dokunmaz; davranışı öngörülebilir ve desteği daha geniş.
 *
 * `inset: -6%`: blur kenarlarda saydamlık üretir, katman kutudan biraz
 * taşırılmazsa köşelerde soluk bir çerçeve kalır.
 */
.photo-frame::before {
    content: "";
    position: absolute;
    inset: -6%;
    z-index: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(22px) brightness(0.92) saturate(1.1);
}

/* Net görsel: kırpılmadan, ortada. */
.photo-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: inherit;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*
 * Kartın üstünde duran rozet/etiket katmanların ÜSTÜNDE kalmalı.
 * Konumlandırması olmayan ögeye z-index işlemez; bu yüzden position da
 * veriliyor.
 */
.photo-frame > * {
    position: relative;
    z-index: 2;
}

/*
 * `<img>` ile basılan kartlar (Klasik tema). Görselin kendisi zaten
 * `object-fit: contain` ile tam görünüyor; burada YALNIZCA boşluğu dolduran
 * bulanık zemin gerekiyor, ikinci bir kopya değil — bu yüzden net katman
 * kapatılır.
 */
.photo-frame--img::after { content: none; }
.photo-frame--img > img { position: relative; z-index: 2; }

/*
 * `backdrop-filter` desteklenmiyorsa (eski tarayıcı) bulanıklık yerine
 * temanın sakin zemini kullanılır — boşluk yine dolu görünür, fotoğraf
 * yine kırpılmaz.
 */
@supports not (filter: blur(1px)) {
    .photo-frame {
        background-size: contain;
        background-color: var(--sand, #f1efe9);
    }

    /* Katmanlar kapatılır: `background-image: none` yazmak ::after'ın
       `inherit` ile aldığı görseli de silerdi. */
    .photo-frame::before,
    .photo-frame::after { display: none; }
}

/* ——— Oda kartı fotoğraf gezgini (/odalar, beş temada ortak) ———
 *
 * Otel odaya birden çok fotoğraf yüklüyor ama liste sayfasında yalnızca
 * kapak görünüyordu; gerisini görmek için tip detayına girmek gerekiyordu.
 *
 * KARELER SUNUCUDAN GELİR. JS ile getirilmiyor: betik çalışmazsa kareler
 * yine sayfada durur ve `:not(.is-active)` gizlemesi devrede olsa da ilk
 * kare görünür kalır — yani hiçbir durumda boş kutu çıkmaz.
 */
.room-gallery {
    position: relative;
    overflow: hidden;
}

.room-gallery__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.room-gallery__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/*
 * Oklar: fotoğrafın üstünde, koyu zeminli daire. Yalnızca karta gelince
 * belirginleşir — sürekli tam opaklıkta durmak fotoğrafı bölüyordu.
 */
.room-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.room-gallery__nav:hover,
.room-gallery__nav:focus-visible {
    opacity: 1;
    background: rgba(15, 23, 42, 0.8);
}

.room-gallery__nav--prev { left: 10px; }
.room-gallery__nav--next { right: 10px; }

/* Dokunmatik ekranda `:hover` yok; oklar hep görünür kalmalı. */
@media (hover: none) {
    .room-gallery__nav { opacity: 0.9; }
}

.room-gallery__dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 6px;
}

.room-gallery__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.room-gallery__dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

.room-gallery__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Kaçıncı fotoğrafta olunduğu: nokta sayısı çoğalınca tek başına okunmuyor. */
.room-gallery__count {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .room-gallery__nav { width: 32px; height: 32px; font-size: 13px; }
    .room-gallery__count { font-size: 11px; }
}

/* Turizm işletme belgesi numarası — footer'ın alt şeridinde, sönük.
   Yasal bir ibare; öne çıkmasın ama okunabilsin. */
.footer-license {
    font-size: 0.86rem;
    opacity: 0.85;
}

/* ——— Misafir cinsiyeti (konaklama kuralı açıkken) ——— */
.booking-genders {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 10px);
    background: var(--sand, #f8fafc);
}

.booking-genders__title {
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
}

.booking-gender-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 7px 0;
    border-top: 1px solid var(--border);
}

.booking-gender-row:first-child { border-top: 0; padding-top: 0; }

.booking-gender-row__label {
    flex: 0 0 auto;
    min-width: 92px;
    font-size: 0.88rem;
    color: var(--muted);
}

.booking-gender-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    cursor: pointer;
}

/* Kural metni: uyarı değil bilgi — kırmızı değil sönük. */
.booking-genders__note {
    margin: 10px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
}

/* ——— Mobilde yatay kaydırılan şerit ———
 *
 * Beş-altı kartlık "özellikler / değerler" şeritleri dar ekranda alt alta
 * diziliyor ve tek başına bir ekran boyu yer kaplıyordu; ziyaretçi asıl
 * içeriğe ulaşmak için uzun uzun kaydırmak zorunda kalıyordu.
 *
 * Yatay kaydırma, ızgarayı BOZMADAN yapılır: aynı öge mobilde tek satıra
 * alınıp `overflow-x` ile kaydırılır. Masaüstünde hiçbir şey değişmez.
 *
 * `scroll-snap` ile kartlar yerine oturur; parmak bırakıldığında yarım kart
 * görünmesi savruk durur.
 */
@media (max-width: 720px) {
    .is-scroll-strip {
        grid-auto-flow: column;
        grid-template-columns: none !important;
        grid-auto-columns: 62%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        /* Kaydırma alanı kenardan başlasın; ilk kart kesik görünmesin. */
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .is-scroll-strip > * { scroll-snap-align: start; }

    /*
     * Kaydırma çubuğu gizlenmez: kullanıcı kaydırılabildiğini görmeli.
     * Yalnızca inceltilir.
     */
    .is-scroll-strip::-webkit-scrollbar { height: 4px; }
    .is-scroll-strip::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, .25);
        border-radius: 999px;
    }
}

/* ——— Tarih alanı: metni biz yazarız ———
 *
 * `input[type=date]` metnini tarayıcı, cihazın BÖLGE ayarına göre çiziyor;
 * sayfanın dili bunu değiştirmiyor. Telefonu İngilizce olan misafirde
 * «02 Sep 2026» görünüyordu.
 *
 * Native alan yerinde kalır (takvim, doğrulama, klavye onda); yalnızca
 * yazısı saydamlaştırılıp üstüne bizim metnimiz konur.
 *
 * `is-ready` sınıfını JS ekler: betik çalışmazsa native metin görünür kalır
 * ve alan kullanılabilir olmaya devam eder. Boş kutu asla çıkmaz.
 */
.qs-date { position: relative; display: block; }

.qs-date__text {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

/*
 * NATIVE YAZI SAKLANIR — yalnız JS hazırladıysa.
 *
 * İKİ YOL BİRDEN, çünkü tek başına hiçbiri yetmiyor:
 *
 * 1. `::-webkit-datetime-edit` — tarih metnini taşıyan iç öge. Sözde öge
 *    olduğu için temaların `color` kuralları ona ULAŞMIYOR; Chrome, Safari
 *    ve Edge'de kesin sonuç veriyor.
 *
 * 2. `color: transparent` — Firefox'ta yukarıdaki sözde öge yok, renk
 *    üzerinden gizlemek gerekiyor.
 *
 * ÖZGÜLLÜK NOTU: ilk sürüm yalnızca (2) yaptı ve Risos'ta ÇALIŞMADI —
 * `body.theme-risos .rs-search .quick-search__cell input` (0,3,2) benim
 * (0,3,1) kuralımı eziyordu ve native metin görünür kalıp bizimkiyle üst
 * üste biniyordu. `[data-date-tr]` eklenince (0,4,1) oluyor ve kazanıyor.
 * Aynı tuzağa hızlı arama kutusunun ÇERÇEVESİNDE de düşülmüştü.
 */
.qs-date.is-ready input[type="date"][data-date-tr]::-webkit-datetime-edit {
    opacity: 0;
}

.qs-date.is-ready input[type="date"][data-date-tr] {
    color: transparent;
}

/* Takvim simgesi görünür kalmalı — dokunulacak yer o. */
.qs-date.is-ready input[type="date"][data-date-tr]::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* ——— Galeri şeridindeki video karesi ———
 *
 * Videolar ayrı bir «Videolar» başlığı altındaydı ve fotoğrafların çok
 * altında kalıyordu; otel videoyu yüklüyor, ziyaretçi göremiyordu. Artık
 * fotoğraflarla aynı şeritte, en sonda.
 *
 * Oynat işareti BÜYÜK ve SAYDAM: karenin ne olduğu bir bakışta anlaşılmalı
 * ama altındaki fotoğrafı da boğmamalı.
 */
.room-detail-thumb--video { position: relative; }

.room-detail-thumb__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .32);
    color: rgba(255, 255, 255, .92);
    font-size: 1.5rem;
    pointer-events: none;
}

.room-detail-thumb--video:hover .room-detail-thumb__play,
.room-detail-thumb--video.is-active .room-detail-thumb__play {
    background: rgba(15, 23, 42, .18);
}

/*
 * Ana alanda video oynarken: oynatıcı görselin yerini alır, oranı korunur.
 * Görsel `display:none` yapılmaz — geri dönünce yeniden yüklenmesin diye
 * yalnızca gizlenir.
 */
.room-detail-gallery-main.is-video .room-detail-gallery-zoom { display: none; }

.room-detail-video-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.room-detail-video-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Galerinin altındaki uzun metin — üstteki kısa tanıtımdan ayrışsın. */
.room-detail-prose-secondary {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

/* Oda sayfası içeriği — panelden zengin metin olarak giriliyor. Site
   tipografisiyle aynı ritim; editördeki görünümün karşılığı. */
.room-detail-content {
    margin-top: 22px;
    line-height: 1.7;
}

.room-detail-content > *:first-child { margin-top: 0; }
.room-detail-content p { margin: 0 0 14px; }
.room-detail-content h2 { font-size: 1.35rem; margin: 24px 0 10px; }
.room-detail-content h3 { font-size: 1.1rem; margin: 20px 0 8px; }
.room-detail-content h4 { font-size: 1rem; margin: 18px 0 6px; }
.room-detail-content ul,
.room-detail-content ol { margin: 0 0 14px; padding-left: 22px; }
.room-detail-content li { margin-bottom: 6px; }
.room-detail-content img { max-width: 100%; height: auto; border-radius: 12px; }

.room-detail-content blockquote {
    margin: 0 0 14px;
    padding: 8px 0 8px 16px;
    border-left: 3px solid rgba(15, 23, 42, .15);
}

.room-detail-content pre {
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .05);
    overflow-x: auto;
}

/* Tablo dar ekranda sayfayı yatay kaydırmasın. */
.room-detail-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px;
    display: block;
    overflow-x: auto;
}

.room-detail-content th,
.room-detail-content td {
    border: 1px solid rgba(15, 23, 42, .12);
    padding: 9px 12px;
    text-align: left;
}

/* ==========================================================================
   SİTEDEN REZERVASYON — ADIMLI AKIŞ

   Sol sütun adım içeriği, sağ sütun sabit özet. Ziyaretçi hangi odayı,
   hangi tarihte, kaç paraya aldığını her adımda görüyor; eski tek sayfalık
   formda seçim yukarıda kalıyor, aşağıyı doldururken kayboluyordu.
   ========================================================================== */

.bk-layout {
    display: grid;
    /* `min(100%, …)`: sabit taban dar ekranda taşıyor. */
    grid-template-columns: minmax(min(100%, 420px), 1fr) minmax(min(100%, 300px), 340px);
    gap: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .bk-layout {
        grid-template-columns: 1fr;
    }

    /* Mobilde özet ÜSTTE: seçimi görmek için sayfanın sonuna inmek
       gerekmemeli. */
    .bk-summary {
        order: -1;
    }
}

/* ——— Adım göstergesi ——— */

.bk-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.bk-step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-weight: 600;
    font-size: 15px;
}

.bk-step__no {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-size: 14px;
    flex: 0 0 auto;
}

.bk-step.is-active { color: var(--renk-vurgu, #2563eb); }
.bk-step.is-done { color: #16a34a; }

.bk-step.is-done .bk-step__no {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.bk-step.is-active .bk-step__no {
    background: var(--renk-vurgu, #2563eb);
    border-color: var(--renk-vurgu, #2563eb);
    color: #fff;
}

@media (max-width: 560px) {
    .bk-step__ad { display: none; }
    .bk-step { gap: 0; }
    .bk-steps { gap: 12px; justify-content: center; }

    /* Adım adı gizlenince aktif adımın adı tek başına yazılır — kullanıcı
       hangi adımda olduğunu bilmeli. */
    .bk-step.is-active .bk-step__ad {
        display: inline;
    }
}

/* ——— Özet kartı ——— */

.bk-summary__inner {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    /* Uzun formda kart ekranla birlikte kayar; kısa ekranda takılmaz. */
    position: sticky;
    top: 96px;
}

.bk-summary__gorsel {
    aspect-ratio: 16 / 9;
    background: #e2e8f0 center/cover no-repeat;
}

.bk-summary__body { padding: 18px 20px; }

.bk-summary__title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
}

.bk-summary__rez {
    margin: 0 0 10px;
    font-size: 13px;
    color: #64748b;
}

.bk-summary__bos {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.bk-summary__list {
    margin: 12px 0 0;
    display: grid;
    gap: 6px;
    font-size: 14px;
}

.bk-summary__list > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.bk-summary__list dt { color: #64748b; margin: 0; }
.bk-summary__list dd { margin: 0; font-weight: 600; }

.bk-summary__tutar {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, .1);
    display: grid;
    gap: 6px;
    font-size: 14px;
}

.bk-summary__satir {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.bk-summary__satir--indirim { color: #16a34a; }

.bk-summary__satir--toplam {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, .08);
    font-weight: 700;
    font-size: 16px;
}

.bk-summary__satir--kapora {
    color: var(--renk-vurgu, #2563eb);
    font-weight: 700;
}

.bk-summary__not {
    margin: 2px 0 0;
    font-size: 12px;
    color: #64748b;
}

.bk-summary__degistir {
    margin: 14px 0 0;
    font-size: 14px;
}

/* Sözleşme onayı — ödeme yollarının üstünde, tek kutu. */
.bk-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    line-height: 1.55;
    cursor: pointer;
}

.bk-consent input {
    /* Dokunma hedefi: 14 px'lik bir kutucuk parmakla ıskalanıyor. */
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    flex: 0 0 auto;
}

.bk-consent.is-error {
    border-color: #dc2626;
    background: #fef2f2;
}

/* ——— Adım 1: tarih arama ve oda kartları ——— */

.bk-baslik {
    margin: 0 0 18px;
    font-size: 1.6rem;
}

.bk-arama {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 12px;
    align-items: end;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 14px;
    background: #fff;
    margin-bottom: 20px;
}

.bk-arama label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.bk-arama input {
    width: 100%;
}

.bk-ipucu {
    margin: 0 0 16px;
    font-size: 14px;
}

.bk-odalar {
    display: grid;
    gap: 14px;
}

.bk-oda {
    display: grid;
    /* Görsel · içerik · fiyat. Dar ekranda alt alta. */
    grid-template-columns: 180px minmax(0, 1fr) 200px;
    gap: 0;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

@media (max-width: 780px) {
    .bk-oda {
        grid-template-columns: 1fr;
    }
}

.bk-oda__gorsel {
    /*
     * Geniş ekranda ORAN VERİLMEZ, sütunu doldurur.
     *
     * Burada `aspect-ratio: 4/3` + `min-height: 100%` vardı: kart yükseldikçe
     * (açıklama satırı, "son 1 oda" rozeti) yükseklik büyüyor, oran genişliği
     * onunla birlikte 180px'lik sütunun DIŞINA taşırıyordu. Fotoğraf oda adının
     * ve "En fazla N kişi" satırının üstüne biniyordu.
     */
    min-height: 150px;
    background: #e2e8f0 center/cover no-repeat;
}

@media (max-width: 780px) {
    /* Tek sütuna inince yükseklik satırdan gelmiyor; oran burada gerekli. */
    .bk-oda__gorsel {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }
}

.bk-oda__body { padding: 16px 18px; }

.bk-oda__ad {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.bk-oda__meta {
    margin: 0 0 8px;
    font-size: 13px;
    color: #64748b;
}

.bk-oda__aciklama {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
}

.bk-oda__fiyat {
    padding: 16px 18px;
    border-left: 1px solid rgba(15, 23, 42, .08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: right;
}

@media (max-width: 780px) {
    .bk-oda__fiyat {
        border-left: 0;
        border-top: 1px solid rgba(15, 23, 42, .08);
        text-align: left;
    }
}

.bk-oda__gecelik {
    font-size: 1.25rem;
    font-weight: 700;
}

.bk-oda__gecelik span {
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
}

.bk-oda__toplam {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 6px;
}

/* Kartla ödemede sorulan e-posta alanı. */
.bk-mail-alani {
    padding: 14px 16px 4px;
    text-align: left;
}

.bk-mail-alani label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.bk-mail-alani input {
    width: 100%;
}

.bk-mail-alani__not {
    margin: 6px 0 0;
    font-size: 12px;
    color: #64748b;
}

/* Üyeden gelen ön dolu bilgi uyarısı. */
.booking-uye-not {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 13px;
    line-height: 1.5;
}

/* ——— Ödeme adımı başlığı ve sonuç ekranı ——— */

.bk-odeme-bas {
    margin-bottom: 22px;
}

.bk-odeme-bas__baslik {
    margin: 0 0 6px;
    font-size: 1.5rem;
}

.bk-odeme-bas__no {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.bk-odeme-bas__no strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em;
    color: #0f172a;
}

/*
 * SONUÇ EKRANI. Eski hâli ortalanmış bir tik ve satır içi stillerle
 * kuruluyordu; başlık, numara ve mesaj birbirine yapışıktı.
 */
.bk-sonuc {
    padding: 28px 24px;
    margin-bottom: 22px;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
    text-align: center;
}

.bk-sonuc__ikon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: 22px;
}

.bk-sonuc__baslik {
    margin: 0 0 8px;
    font-size: 1.5rem;
}

.bk-sonuc__no {
    margin: 0 0 12px;
    color: #64748b;
    font-size: 14px;
}

.bk-sonuc__no strong {
    display: inline-block;
    margin-left: 4px;
    padding: 3px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #d1fae5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .06em;
    color: #065f46;
}

.bk-sonuc__mesaj {
    max-width: 46ch;
    margin: 0 auto;
    color: #334155;
    font-size: 15px;
    line-height: 1.65;
}

.bk-sonuc__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 20px 0 0;
}

/*
 * ÜYELİK DAVETİ — başarı ekranının altında.
 *
 * Üyeliksiz rezervasyon yapan misafirin elinde yalnızca numara kalıyordu.
 */
.bk-uyelik {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 22px;
    border: 1px dashed rgba(15, 23, 42, .22);
    border-radius: 16px;
    background: #f8fafc;
}

.bk-uyelik__ikon {
    font-size: 20px;
    color: var(--renk-vurgu, #2563eb);
    flex: 0 0 auto;
}

.bk-uyelik__metin {
    flex: 1;
    min-width: 0;
}

.bk-uyelik__metin p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #475569;
}

.bk-uyelik__dugme {
    flex: 0 0 auto;
}

@media (max-width: 620px) {
    .bk-uyelik {
        flex-wrap: wrap;
    }

    .bk-uyelik__dugme {
        width: 100%;
        text-align: center;
    }
}

/* ——— Ödeme adımı kutuları ———
 *
 * Bu bloklar `class="card"` ile yazılmıştı ve sitede öyle bir sınıf hiç
 * olmadı: tek biçim veren şey satır içi `padding` idi. Kenarlıksız,
 * köşesiz, gölgesiz metin yığınları sağdaki özet kartının yanında
 * yarım kalmış görünüyordu.
 */
.bk-kart {
    padding: 20px 22px;
    margin-bottom: 18px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 16px;
    background: #fff;
}

.bk-kart__baslik {
    margin: 0 0 16px;
    font-size: 1.05rem;
    font-weight: 700;
}

.bk-bolum-baslik {
    margin: 26px 0 14px;
    font-size: 1.05rem;
    font-weight: 700;
}

.bk-ozet-grid {
    display: grid;
    /* Sabit taban dar ekranda taşırıyor; `min(100%, …)` şart. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 16px 22px;
    margin: 0;
}

.bk-ozet-grid > div {
    min-width: 0;
}

.bk-ozet-grid dt {
    margin: 0 0 4px;
    font-size: 12px;
    color: #64748b;
}

.bk-ozet-grid dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.bk-tutar__satir {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 10px;
}

.bk-tutar__satir:last-child {
    margin-bottom: 0;
}

.bk-tutar__toplam {
    font-size: 1.05rem;
}

.bk-tutar__satir--odenen {
    color: #16a34a;
}

.bk-tutar__ayrac {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, .1);
}

.bk-tutar__satir--simdi > span:first-child {
    font-weight: 600;
}

.bk-tutar__kapora {
    font-weight: 400;
    font-size: 13px;
    color: #64748b;
}

.bk-tutar__simdi {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--renk-vurgu, #0f766e);
    white-space: nowrap;
}

.bk-tutar__satir--kalan {
    margin-top: 8px;
    color: #64748b;
}

.bk-tutar__tamam {
    margin: 0;
    text-align: center;
    color: #16a34a;
    font-weight: 600;
}

.bk-tutar__not {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
}

/* ——— Ödeme yolu seçenekleri ——— */

.bk-odeme-liste {
    display: grid;
    gap: 12px;
}

.pay-option {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 14px;
    background: #fff;
    text-align: left;
    font: inherit;
    color: inherit;
}

button.pay-option {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Dokunma hedefi: 44px altına inen düğme parmakla ıskalanıyor. */
    min-height: 44px;
    cursor: pointer;
}

.pay-option:hover,
.pay-option:focus-within {
    border-color: var(--renk-vurgu, #2563eb);
    box-shadow: 0 4px 16px rgba(15, 23, 42, .07);
}

.pay-option > summary {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}

/* Safari/Chrome varsayılan üçgeni: kendi okumuz zaten var. */
.pay-option > summary::-webkit-details-marker {
    display: none;
}

.pay-option__ikon {
    flex: 0 0 auto;
    width: 26px;
    font-size: 20px;
    text-align: center;
    color: var(--renk-vurgu, #0f766e);
}

.pay-option__metin {
    flex: 1;
    min-width: 0;
}

.pay-option__ad {
    display: block;
    font-weight: 700;
}

.pay-option__not {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: #64748b;
}

.pay-option__ok {
    flex: 0 0 auto;
    color: #94a3b8;
}

.pay-option[open] > summary .pay-option__ok {
    transform: rotate(180deg);
}

.pay-option__ic {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.bk-iban {
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.bk-iban:last-of-type {
    border-bottom: 0;
}

.bk-iban__sube {
    font-size: 12px;
    color: #64748b;
}

.bk-iban__no {
    margin-top: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

.bk-iban__sahip {
    font-size: 13px;
    color: #64748b;
}

.bk-iban__uyari {
    margin: 14px 0;
    font-size: 13px;
    color: #64748b;
}

.bk-consent-hata {
    margin-bottom: 14px;
}

.bk-dipnot {
    margin-top: 26px;
    font-size: 13px;
    text-align: center;
    color: #64748b;
}

/*
 * `class="container"` sitede HİÇ TANIMLANMAMIŞ bir sınıftı ve ödeme
 * sayfaları onu kullanıyordu: sayfa kenardan kenara yayılıyor, adım
 * göstergesinin ilk dairesi ve başlığın ilk harfi ekranın solunda kesik
 * duruyordu. Sayfalar `.wrap`'a taşındı; aşağıdakiler yalnızca genişlik
 * daraltmaları.
 */
.bk-bos-sayfa {
    max-width: min(640px, 100%);
    text-align: center;
}

.bk-dar {
    max-width: min(720px, 100%);
}