/* =================================================================
   Otel Web Sitesi — özel stiller
   Tema: TAMAMEN AÇIK. Koyu zemin / dark mode / siyah header YOK.
   Bootstrap 5.3 üzerine biner, Bootstrap'ın kendi dosyası düzenlenmez.
   ================================================================= */

:root {
    /* Palet */
    --bg:          #ffffff;
    --bg-alt:      #f7f7f5;
    --text:        #2b2b2b;
    --text-muted:  #6b6b6b;
    --border:      #e5e5e5;
    --accent:      #b08d57;   /* .env > THEME_ACCENT ile ezilir */
    --accent-dark: #94743f;

    /* Biçim */
    --radius:      10px;
    --radius-lg:   16px;
    --shadow-sm:   0 1px 2px rgba(43, 43, 43, .04), 0 2px 8px rgba(43, 43, 43, .05);
    --shadow:      0 4px 24px rgba(43, 43, 43, .07);
    --space:       clamp(3rem, 6vw, 5.5rem);

    /* Bootstrap değişken köprüsü */
    --bs-body-bg:     var(--bg);
    --bs-body-color:  var(--text);
    --bs-border-color: var(--border);
    --bs-link-color:  var(--accent);
    --bs-link-hover-color: var(--accent-dark);
}

/* -----------------------------------------------------------------
   Temel
   ----------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
h3 { font-size: clamp(1.125rem, 1.8vw, 1.375rem); }

p { color: var(--text); }
.text-muted { color: var(--text-muted) !important; }

a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--accent-dark); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

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

code {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .1rem .4rem;
    color: var(--text);
    font-size: .875em;
}

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1080;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem 1rem;
}

/* -----------------------------------------------------------------
   Butonlar
   ----------------------------------------------------------------- */
.btn {
    border-radius: var(--radius);
    padding: .625rem 1.5rem;
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.btn-accent {
    background-color: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff;
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #ffffff;
}

.btn-outline-accent {
    background-color: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.btn-outline-accent:hover {
    background-color: var(--accent);
    color: #ffffff;
}

/* -----------------------------------------------------------------
   Header — İKİ KATMANLI ızgara, opak beyaz zemin

     ┌──────────┬──────────────────────────────────────────────┐
     │          │ üst şerit: menü .......... tel/e-posta/sosyal │
     │   LOGO   ├══════════ accent çizgi (sağ kenara kadar) ════╡
     │ (2 satır)│ alt şerit: ana menü ....... dil + Rezervasyon │
     └──────────┴──────────────────────────────────────────────┘

   İki menü de sağ sütunun solundan, yani logonun sağ kenarından başlar.
   992 px altında iki şerit gizlenir, off-canvas menüye geçilir.
   ----------------------------------------------------------------- */
.site-header {
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Izgara: sol sütun logo (iki satır), sağ sütun iki şerit.
   Header tam genişliktedir; kenar boşluğu --header-pad ile verilir. */
.header-grid {
    --header-pad: clamp(1rem, 4vw, 3rem);
    align-items: center;
    column-gap: clamp(1rem, 3vw, 2.5rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    padding-inline: var(--header-pad);
}

/* Logo sütunu: iki şeridi birden kaplar, dikeyde ortalanır */
.header-brand {
    align-self: center;
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1 / span 2;
    line-height: 1.15;
    padding-block: .5rem;
    text-decoration: none;
}

/* Hamburger düğmesi .navbar dışında durduğu için ikonu kendimiz veriyoruz
   (Bootstrap'in --bs-navbar-toggler-icon-bg değişkeni .navbar kapsamındadır). */
.header-toggler {
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    padding: .35rem .6rem;
}

.header-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232b2b2b' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    height: 1.4em;
    vertical-align: middle;
    width: 1.4em;
}

/* --- Üst şerit --------------------------------------------------- */
.header-top {
    align-items: center;
    /* Accent çizgi logo sütunundan sonra başlar; negatif sağ boşlukla
       sayfanın sağ kenarına kadar uzanır, içerik hizada kalır. */
    border-bottom: 3px solid var(--accent);
    font-size: .8125rem;
    gap: 1.5rem;
    grid-column: 2;
    grid-row: 1;
    justify-content: space-between;
    margin-right: calc(-1 * var(--header-pad));
    padding-block: .4rem;
    padding-right: var(--header-pad);
}

.header-top-meta {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 1rem;
}

.topbar-link {
    align-items: center;
    color: var(--text-muted);
    display: inline-flex;
    gap: .35rem;
    white-space: nowrap;
}
.topbar-link:hover { color: var(--accent); }
.topbar-link i { color: var(--accent); }

.header-social {
    align-items: center;
    display: flex;
    gap: .1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-social a {
    align-items: center;
    border-radius: 50%;
    color: var(--text-muted);
    display: inline-flex;
    font-size: .9375rem;
    height: 28px;
    justify-content: center;
    width: 28px;
}
.header-social a:hover { background-color: var(--bg-alt); color: var(--accent); }

/* --- Ortak menü listesi (iki şerit de aynı biçimi kullanır) ------- */
.header-nav-list {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: .15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav-link {
    color: var(--text);
    display: block;
    font-weight: 500;
    padding: .3rem .6rem;
    white-space: nowrap;      /* uzun başlıklar kırpılmaz, bölünmez */
}

.header-nav-link:hover { color: var(--accent); }

/* Aktif sayfa accent renginde */
.header-nav-link.is-active { color: var(--accent); font-weight: 600; }

/* --- Alt şerit --------------------------------------------------- */
.header-main {
    align-items: center;
    gap: 1.25rem;
    grid-column: 2;
    grid-row: 2;
    justify-content: space-between;
    padding-block: .55rem;
}

/* Menü, üst şeritle aynı hizada (sağ sütunun solunda) başlar */
.header-main-nav { flex: 0 1 auto; }
.header-main-nav .header-nav-list { gap: .35rem; }
.header-main-nav .header-nav-link { font-size: 1rem; padding: .35rem .75rem; }

.header-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: .75rem;
}

.header-lang { flex-direction: row; }
.header-cta { white-space: nowrap; }

/* Dar masaüstünde yazı ve boşluklar küçülür — kırpma yok */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .header-top { font-size: .75rem; }
    .header-top .header-nav-link { padding-inline: .4rem; }
    .header-top-meta { gap: .6rem; }
    .header-social a { height: 26px; width: 26px; }

    .header-main-nav .header-nav-link { font-size: .9375rem; padding-inline: .5rem; }
    .header-cta { font-size: .875rem; padding: .45rem .85rem; }
    .brand-logo { max-height: 38px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .header-top { font-size: .6875rem; }
    .header-top .header-nav-link { padding-inline: .3rem; }
    .header-social a { font-size: .875rem; height: 24px; width: 24px; }

    /* Yer daralınca e-posta yalnızca ikonla gösterilir (adres title'da) */
    .topbar-mail span { display: none; }

    .header-main-nav .header-nav-link { font-size: .875rem; padding-inline: .4rem; }
    .brand-name { font-size: 1.125rem; }
}

/* Mobil: solda logo, sağda hamburger — menüler off-canvas panelde */
@media (max-width: 991.98px) {
    .header-grid { padding-block: .35rem; }
    .header-brand { grid-row: 1; }
}

.brand-name {
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.brand-sub {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Dil seçici (dropdown) alt şeritte nav-link biçimini kullanır */
.navbar .nav-link {
    color: var(--text);
    font-weight: 500;
    padding-inline: .5rem;
    white-space: nowrap;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--accent);
}

.navbar-toggler {
    border-color: var(--border);
    padding: .375rem .625rem;
}

.navbar-toggler:focus { box-shadow: none; }

.dropdown-menu {
    border-color: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .375rem;
}

.dropdown-item {
    border-radius: 6px;
    color: var(--text);
    padding: .5rem .75rem;
}

.dropdown-item:hover { background-color: var(--bg-alt); color: var(--text); }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--bg-alt); color: var(--accent); }

/* -----------------------------------------------------------------
   Bölümler
   ----------------------------------------------------------------- */
.section { padding-block: var(--space); }
.section-alt { background-color: var(--bg-alt); }

.section-title {
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: .75rem;
}

.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background-color: var(--accent);
}

.text-center .section-title::after { left: 50%; transform: translateX(-50%); }

/* Hero — anasayfada tam genişlikte görsel (ayrıntılı kurallar aşağıda).
   İç sayfalarda (404/500) yalnızca .hero-title / .hero-intro kullanılır. */
.hero {
    background-color: var(--bg-alt);
}

.hero-title { margin-bottom: 1rem; }

.hero-intro {
    color: var(--text-muted);
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

/* Yumuşak kart */
.card-soft {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
    transition: box-shadow .2s ease, transform .2s ease;
}

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

.card-soft-title { margin-bottom: .625rem; }

/* Hata sayfaları */
.error-code {
    color: var(--accent);
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: .5rem;
}

/* -----------------------------------------------------------------
   Footer — açık zemin (siyah footer YOK)
   ----------------------------------------------------------------- */
.site-footer {
    background-color: var(--bg-alt);
    border-top: 1px solid var(--border);
    padding-block: var(--space) 1.5rem;
}

.footer-brand {
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.footer-title {
    color: var(--text);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

.site-footer address { font-style: normal; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }

.footer-langs li + li { margin-top: .25rem; }

.footer-bottom {
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .875rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
}

/* -----------------------------------------------------------------
   Duyarlı (responsive)
   ----------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .navbar-collapse {
        border-top: 1px solid var(--border);
        margin-top: .875rem;
        padding-top: .875rem;
    }

    .navbar .nav-link { padding-inline: 0; }
    .navbar .btn { margin-top: .75rem; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

/* Üst şerit biçimleri Header bölümündedir (.header-top) */

.brand-logo { display: block; width: auto; max-height: 44px; }

/* -----------------------------------------------------------------
   Statik sayfalar
   ----------------------------------------------------------------- */
.page-hero {
    background-color: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* İç sayfa hero görseli (Ayarlar > Genel): açık tema korunur; görselin
   üzerine açık renkli yarı saydam katman gelir, metin koyu kalır. */
.has-page-hero-image .page-hero {
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .8) 55%, rgba(255, 255, 255, .62) 100%),
        var(--page-hero-image);
    background-position: center;
    background-size: cover;
    padding-block: clamp(3rem, 8vw, 5.5rem);
}

/* Sağdan sola dilde metin sağda: katman en yoğun sağ tarafta */
[dir="rtl"] .has-page-hero-image .page-hero {
    background-image:
        linear-gradient(270deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .8) 55%, rgba(255, 255, 255, .62) 100%),
        var(--page-hero-image);
}

.page-breadcrumb {
    --bs-breadcrumb-divider-color: var(--text-muted);
    font-size: .8125rem;
    margin-bottom: .75rem;
}
.page-breadcrumb a { color: var(--text-muted); }
.page-breadcrumb a:hover { color: var(--accent); }
.page-breadcrumb .breadcrumb-item.active { color: var(--text-muted); }

.page-title { margin-bottom: .5rem; }

.page-summary {
    color: var(--text-muted);
    font-size: 1.0625rem;
    margin-bottom: 0;
    max-width: 65ch;
}

.page-cover {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-top: -2rem;
    position: relative;
    width: 100%;
}

.page-content { max-width: 70ch; }
.page-content h2 { margin: 2rem 0 .75rem; }
.page-content h3 { margin: 1.5rem 0 .5rem; }
.page-content p  { margin-bottom: 1rem; }
.page-content ul, .page-content ol { color: var(--text); padding-left: 1.25rem; }
.page-content img { border-radius: var(--radius); height: auto; }
.page-content table {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
}
.page-content th, .page-content td {
    border-bottom: 1px solid var(--border);
    padding: .5rem .75rem;
    text-align: left;
}

.page-aside { position: sticky; top: 96px; }

/* İletişim listesi */
.contact-list { font-style: normal; }
.contact-row { display: flex; flex-direction: column; margin-bottom: .85rem; }
.contact-row:last-child { margin-bottom: 0; }
.contact-label {
    color: var(--text-muted);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Google Maps */
.map-embed {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    padding-top: 42%;
}
.map-embed iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* Footer ek listeleri */
.footer-links li + li { margin-top: .25rem; }

.footer-bottom {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
}

/* Yasal bağlantılar: footer alt satırında ayrı, tam genişlik bir şerit */
.footer-legal { flex-basis: 100%; }
.footer-legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}

/* Yasal metin sayfaları (privacy / terms şablonu) */
.legal-updated { color: var(--text-muted); font-size: .875rem; margin-bottom: 1.5rem; }
.legal-nav ul li + li { margin-top: .5rem; }
.legal-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.page-content .table-scroll { overflow-x: auto; margin-bottom: 1rem; }

@media (max-width: 991.98px) {
    .page-aside { position: static; }
    .page-cover { margin-top: 0; }
    .map-embed { padding-top: 70%; }
}

/* -----------------------------------------------------------------
   Oda kartları — beyaz zemin, ince gri kenarlık
   ----------------------------------------------------------------- */
.room-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

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

.room-card-media {
    background: var(--bg-alt);
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

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

.room-card-placeholder {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: .8125rem;
    height: 100%;
    justify-content: center;
}

.room-card-body { flex: 1 1 auto; padding: 1.25rem; }

.room-card-title { font-size: 1.125rem; margin-bottom: .5rem; }
.room-card-title a { color: var(--text); }
.room-card-title a:hover { color: var(--accent); }

.room-card-text { color: var(--text-muted); font-size: .9375rem; margin-bottom: 1rem; }

.room-meta {
    border-top: 1px solid var(--border);
    display: grid;
    gap: .35rem;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    margin: 0 0 1rem;
    padding: .85rem 0 0;
}

.room-meta li { font-size: .875rem; }

.room-meta-label {
    color: var(--text-muted);
    display: block;
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.room-amenity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.room-amenity-chips li {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: .75rem;
    padding: .15rem .6rem;
}

.room-amenity-chips i { color: var(--accent); }

.room-card-foot {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    padding: .9rem 1.25rem;
}

.room-price { font-size: .9375rem; }
.room-price-label {
    color: var(--text-muted);
    display: block;
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.room-price strong { color: var(--text); font-size: 1.125rem; }
.room-price-lg { border-top: 1px solid var(--border); margin: 1rem 0; padding-top: 1rem; }
.room-price-lg strong { font-size: 1.5rem; }

/* -----------------------------------------------------------------
   Oda detayı — galeri ve özellikler
   ----------------------------------------------------------------- */
.room-gallery {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.room-gallery .carousel-item img {
    aspect-ratio: 3 / 2;
    display: block;
    object-fit: cover;
    width: 100%;
}

.room-gallery .carousel-caption {
    background: rgba(255, 255, 255, .88);
    border-radius: var(--radius);
    bottom: 1rem;
    color: var(--text);
    left: 50%;
    padding: .4rem .9rem;
    right: auto;
    transform: translateX(-50%);
    width: auto;
}

.room-gallery .carousel-control-prev-icon,
.room-gallery .carousel-control-next-icon {
    background-color: rgba(255, 255, 255, .9);
    background-size: 45%;
    border-radius: 50%;
    filter: invert(1) grayscale(1) brightness(.3);
    height: 2.5rem;
    width: 2.5rem;
}

.room-gallery .carousel-indicators [data-bs-target] {
    background-color: var(--text);
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.room-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
}

.room-thumb {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}

.room-thumb img { display: block; height: 54px; object-fit: cover; width: 80px; }
.room-thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(176, 141, 87, .18); }

.room-amenity-group {
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
}

.room-amenity-list li {
    align-items: center;
    display: flex;
    gap: .55rem;
    margin-bottom: .4rem;
}

.room-amenity-list i { color: var(--accent); font-size: 1.05rem; }

.room-booking { position: sticky; top: 96px; }

.room-spec { border-top: 1px solid var(--border); margin: 0; padding-top: .85rem; }
.room-spec li {
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
}
.room-spec li:last-child { border-bottom: 0; }
.room-spec span { color: var(--text-muted); font-size: .875rem; }

@media (max-width: 991.98px) {
    .room-booking { position: static; }
    .room-meta { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------
   Rezervasyon widget'ı — beyaz kart, açık gri kenarlık
   ----------------------------------------------------------------- */
.booking-widget {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: .4rem;
}

/* Masaüstü: tek satır yatay şerit — tarih, tarih, oda/misafir, buton */
.booking-widget-grid {
    align-items: stretch;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr 1fr 1.35fr auto;
}

.booking-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: .5rem .9rem;
    position: relative;
}

/* Alanlar arasındaki ince dikey ayırıcı */
.booking-field + .booking-field { border-left: 1px solid var(--border); }

.booking-label {
    color: var(--text-muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    margin-bottom: .15rem;
    text-transform: uppercase;
}

/* Şerit görünümü: alan içi kutular çerçevesiz durur */
.booking-widget .booking-input,
.booking-widget .booking-summary {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
    min-height: 1.6rem;
    padding: 0;
    width: 100%;
}

.booking-widget .booking-input:focus,
.booking-widget .booking-summary:focus-visible {
    box-shadow: none;
    outline: 2px solid rgba(176, 141, 87, .35);
    outline-offset: 3px;
}

.booking-field-date .booking-input { cursor: pointer; }

.booking-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    text-align: left;
}

.booking-summary > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-caret {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--text-muted);
    flex: 0 0 auto;
    transition: transform .15s ease;
}

.booking-summary[aria-expanded="true"] .booking-caret { transform: rotate(180deg); }

/* Buton alanı: ayırıcı yok, düğme alan yüksekliğini doldurur */
.booking-field-submit { border-left: 0; padding: .25rem; }

.booking-submit {
    align-self: stretch;
    font-weight: 600;
    min-width: 170px;
    white-space: nowrap;
}

/* Açılır oda paneli — özet düğmesinin ALTINDA açılır.
   Varsayılan KAPALI: yalnızca booking.js .is-open eklediğinde görünür. */
.booking-panel {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
    left: .35rem;
    margin-top: .5rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: .85rem;
    position: absolute;
    top: 100%;
    width: min(420px, 92vw);
    z-index: 1050;
}

.booking-panel.is-open { display: block; }

.booking-room {
    border-bottom: 1px solid var(--border);
    padding-bottom: .75rem;
    margin-bottom: .75rem;
}
.booking-room:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.booking-room-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.booking-remove {
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: .75rem;
    padding: 0;
    text-decoration: underline;
}
.booking-remove:hover { color: var(--accent); }

.booking-room-grid { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }

.booking-count { display: flex; flex-direction: column; font-size: .8125rem; gap: .2rem; }
.booking-count > span { color: var(--text-muted); font-size: .75rem; }

.booking-ages { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; margin-top: .5rem; }
.booking-age { display: flex; flex-direction: column; font-size: .75rem; gap: .2rem; }
.booking-age > span { color: var(--text-muted); }

.booking-panel-foot {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
}

/* jQuery UI datepicker — açık tema uyarlaması */
.booking-datepicker.ui-datepicker {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-family: inherit;
    font-size: .875rem;
    padding: .5rem;
    z-index: 1060 !important;
}
.booking-datepicker .ui-datepicker-header {
    background: transparent;
    border: 0;
    color: var(--text);
    font-weight: 600;
}
.booking-datepicker .ui-datepicker-title { color: var(--text); }
.booking-datepicker th { color: var(--text-muted); font-weight: 600; }
.booking-datepicker td a,
.booking-datepicker td span {
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text);
    text-align: center;
}
.booking-datepicker td a:hover { background: var(--bg-alt); border-color: var(--border); }
.booking-datepicker .ui-state-active,
.booking-datepicker .ui-state-highlight {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}
.booking-datepicker .ui-state-disabled { opacity: .4; }
.booking-datepicker .ui-datepicker-prev,
.booking-datepicker .ui-datepicker-next { cursor: pointer; top: .5rem; }
.booking-datepicker .ui-icon { filter: grayscale(1) brightness(.4); }

/* Mobil: tek sütun, alanlar alt alta — ayırıcılar yataya döner */
@media (max-width: 991.98px) {
    .booking-widget { padding: .35rem .35rem .5rem; }

    .booking-widget-grid { grid-template-columns: 1fr; }

    .booking-field { padding: .6rem .85rem; }
    .booking-field + .booking-field { border-left: 0; border-top: 1px solid var(--border); }
    .booking-field-submit { border-top: 0; padding: .5rem .35rem .25rem; }

    .booking-submit { min-width: 0; width: 100%; }

    /* Panel akış içinde açılır; dar ekranda taşma olmaz */
    .booking-panel {
        box-shadow: none;
        left: auto;
        margin-top: .6rem;
        max-height: none;
        position: static;
        top: auto;
        width: auto;
    }
}

/* -----------------------------------------------------------------
   Rezervasyon adımları
   ----------------------------------------------------------------- */
.booking-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.booking-step {
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    display: flex;
    font-size: .8125rem;
    gap: .45rem;
    padding: .35rem .9rem .35rem .4rem;
}

.booking-step-no {
    align-items: center;
    background: var(--bg-alt);
    border-radius: 50%;
    color: var(--text-muted);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.booking-step.is-current { border-color: var(--accent); color: var(--text); }
.booking-step.is-current .booking-step-no { background: var(--accent); color: #ffffff; }
.booking-step.is-done .booking-step-no { background: rgba(176, 141, 87, .16); color: var(--accent); }

.booking-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1rem, 3vw, 1.75rem);
}

.booking-card .booking-widget { border: 0; box-shadow: none; padding: 0; }

.booking-card-title { font-size: 1.0625rem; margin-bottom: 1rem; }

/* 2. adım — oda seçenekleri */
.booking-offer {
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}
.booking-offer:last-of-type { border-bottom: 0; }

.booking-offer-title { font-size: 1.0625rem; margin-bottom: 1rem; }

.booking-option {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: block;
    height: 100%;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.booking-option:hover { border-color: var(--accent); }
.booking-option.is-disabled { cursor: not-allowed; opacity: .6; }

.booking-option-input { position: absolute; opacity: 0; pointer-events: none; }
.booking-option:has(.booking-option-input:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(176, 141, 87, .16);
}

.booking-option-body { display: flex; flex-direction: column; gap: .25rem; padding: 0 0 1rem; }

.booking-option-image {
    aspect-ratio: 3 / 2;
    display: block;
    margin-bottom: .75rem;
    object-fit: cover;
    width: 100%;
}

.booking-option-name  { font-weight: 600; padding: 0 1rem; }
.booking-option-board { color: var(--text-muted); font-size: .8125rem; padding: 0 1rem; }
.booking-option-meta  { color: var(--text-muted); font-size: .75rem; padding: 0 1rem; }

.booking-option-price {
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    margin-top: .75rem;
    padding: .75rem 1rem 0;
}
.booking-option-price strong { font-size: 1.125rem; }

.booking-option-reason {
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .75rem;
    margin-top: .75rem;
    padding: .75rem 1rem 0;
}

.booking-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* 3. ve 4. adım — özet */
.booking-summary-card { position: sticky; top: 96px; }

.booking-summary-list { list-style: none; margin: 0; padding: 0; }
.booking-summary-list li {
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .65rem 0;
}
.booking-summary-list li:last-child { border-bottom: 0; }

.booking-total {
    align-items: baseline;
    border-top: 2px solid var(--border);
    display: flex;
    justify-content: space-between;
    margin: .75rem 0 1rem;
    padding-top: .75rem;
}
.booking-total strong { font-size: 1.25rem; }

.booking-done { text-align: center; }
.booking-code-label {
    color: var(--text-muted);
    font-size: .75rem;
    letter-spacing: .08em;
    margin-bottom: .25rem;
    text-transform: uppercase;
}
.booking-code {
    color: var(--accent);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 1rem;
}
.booking-done .booking-summary-list { text-align: left; }

@media (max-width: 991.98px) {
    .booking-summary-card { position: static; }
}

/* -----------------------------------------------------------------
   Bayraklı dil değiştirici
   ----------------------------------------------------------------- */
.lang-flag {
    border-radius: 2px;
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -2px;
}

.lang-current { align-items: center; display: flex; gap: .4rem; }

.lang-link { align-items: center; display: flex; gap: .5rem; }
.lang-link.is-active { color: var(--accent); font-weight: 600; }

.lang-note { color: var(--text-muted); font-size: .6875rem; margin-left: auto; }
.lang-link[data-no-translation] { opacity: .7; }

.lang-inline { display: flex; flex-direction: column; gap: .3rem; }
.lang-inline a { color: var(--text-muted); font-size: .875rem; }
.lang-inline a:hover { color: var(--accent); }

/* SSS listesi */
.faq-list { border-top: 1px solid var(--border); margin-bottom: 2rem; }

.faq-item { border-bottom: 1px solid var(--border); padding: .85rem 0; }
.faq-item summary {
    cursor: pointer;
    display: flex;
    gap: .5rem;
    list-style: none;
    align-items: flex-start;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
    color: var(--accent);
    content: '+';
    font-size: 1.125rem;
    line-height: 1.2;
}
.faq-item[open] summary::before { content: '−'; }

.faq-question { font-size: 1rem; margin: 0; }
.faq-answer { color: var(--text-muted); padding: .6rem 0 0 1.15rem; }
.faq-answer p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------
   Mekanlar — beyaz kartlar, ince gri kenarlık, yumuşak gölge
   ----------------------------------------------------------------- */
.place-category-card,
.place-card,
.album-card,
.promo-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

.place-category-card:hover,
.place-card:hover,
.album-card:hover,
.promo-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.place-category-card { padding: 1.5rem 1.25rem; }

.place-category-icon {
    align-items: center;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: inline-flex;
    font-size: 1.25rem;
    height: 46px;
    justify-content: center;
    margin-bottom: .9rem;
    width: 46px;
}

.place-category-title { font-size: 1.125rem; margin-bottom: .4rem; }
.place-category-title a { color: var(--text); }
.place-category-title a:hover { color: var(--accent); }
.place-category-text { color: var(--text-muted); font-size: .9375rem; margin-bottom: .75rem; }
.place-category-count { font-size: .8125rem; }

.place-card-media,
.album-card-media,
.promo-card-media {
    background: var(--bg-alt);
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
}

.place-card-media img,
.album-card-media img,
.promo-card-media img { display: block; height: 100%; object-fit: cover; width: 100%; }

.place-card-placeholder,
.album-card-placeholder,
.promo-card-placeholder {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: .8125rem;
    height: 100%;
    justify-content: center;
}

.place-card-body, .album-card-body, .promo-card-body { flex: 1 1 auto; padding: 1.15rem 1.25rem; }

.place-card-category {
    color: var(--text-muted);
    font-size: .6875rem;
    letter-spacing: .06em;
    margin-bottom: .2rem;
    text-transform: uppercase;
}

.place-card-title, .album-card-title, .promo-card-title { font-size: 1.0625rem; margin-bottom: .45rem; }
.place-card-title a, .album-card-title a, .promo-card-title a { color: var(--text); }
.place-card-title a:hover, .album-card-title a:hover, .promo-card-title a:hover { color: var(--accent); }

.place-card-text, .album-card-text, .promo-card-text { color: var(--text-muted); font-size: .9375rem; margin-bottom: .85rem; }

.place-meta, .promo-meta {
    border-top: 1px solid var(--border);
    display: grid;
    gap: .35rem;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    margin: 0;
    padding: .8rem 0 0;
}
.place-meta li, .promo-meta li { font-size: .875rem; }

.place-meta-label, .promo-meta-label {
    color: var(--text-muted);
    display: block;
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.place-cover, .promo-cover {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    width: 100%;
}

.place-aside, .promo-aside { position: sticky; top: 96px; }

.place-spec, .promo-spec { border-top: 1px solid var(--border); margin: 0; padding-top: .85rem; }
.place-spec li, .promo-spec li {
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .5rem 0;
}
.place-spec li:last-child, .promo-spec li:last-child { border-bottom: 0; }
.place-spec span, .promo-spec span { color: var(--text-muted); font-size: .875rem; }

/* -----------------------------------------------------------------
   Galeri ızgarası ve lightbox (açık tema)
   ----------------------------------------------------------------- */
.gallery-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.gallery-item {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: block;
    overflow: hidden;
    position: relative;
    aspect-ratio: 4 / 3;
}

.gallery-item img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
    width: 100%;
}

.gallery-item:hover img { transform: scale(1.04); }

.gallery-item-zoom {
    align-items: center;
    background: rgba(255, 255, 255, .92);
    border-radius: 50%;
    bottom: .5rem;
    color: var(--text);
    display: flex;
    font-size: .8125rem;
    height: 32px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: .5rem;
    transition: opacity .2s ease;
    width: 32px;
}
.gallery-item:hover .gallery-item-zoom,
.gallery-item:focus-visible .gallery-item-zoom { opacity: 1; }

.album-card-count {
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    bottom: .6rem;
    color: var(--text);
    font-size: .75rem;
    left: .6rem;
    padding: .1rem .6rem;
    position: absolute;
}

/* -----------------------------------------------------------------
   Kampanyalar
   ----------------------------------------------------------------- */
.promo-badge {
    background: var(--accent);
    border-radius: 999px;
    color: #ffffff;
    font-size: .8125rem;
    font-weight: 600;
    left: .75rem;
    padding: .15rem .7rem;
    position: absolute;
    top: .75rem;
}

.promo-card-foot {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    gap: .75rem;
    padding: .85rem 1.25rem;
}

.promo-code {
    background: var(--bg-alt);
    border: 1px dashed var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .8125rem;
    letter-spacing: .06em;
    padding: .15rem .6rem;
}

.promo-expired {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    display: inline-block;
    font-size: .8125rem;
    margin-top: .75rem;
    padding: .25rem .75rem;
}

.promo-discount {
    border-top: 1px solid var(--border);
    margin: 0 0 .5rem;
    padding-top: .85rem;
}
.promo-discount strong { color: var(--accent); font-size: 1.75rem; }

.promo-code-box {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 1rem;
    padding: .75rem .85rem;
}
.promo-code-row { align-items: center; display: flex; gap: .5rem; margin-top: .25rem; }
.promo-code-row code {
    background: var(--bg);
    border: 1px dashed var(--accent);
    color: var(--accent);
    flex: 1 1 auto;
    font-size: .9375rem;
    letter-spacing: .08em;
    padding: .3rem .6rem;
    text-align: center;
}

.promo-conditions { border-top: 1px solid var(--border); padding-top: 1rem; }
.promo-conditions-title { font-size: .9375rem; margin: 1rem 0 .35rem; }
.promo-conditions-title:first-child { margin-top: 0; }
.promo-condition-list { color: var(--text-muted); margin: 0; padding-left: 1.15rem; }
.promo-condition-list li { margin-bottom: .3rem; }

/* -----------------------------------------------------------------
   Ana sayfa "Otel Hizmetlerimiz" — solda küçük görsel, sağda başlık +
   kısa açıklama. Kartlar link değildir. Flex + gap yöne bağımsızdır
   (sağdan sola dilde görsel kendiliğinden sağa geçer, rtl.css gerekmez).
   ----------------------------------------------------------------- */
.service-card {
    align-items: flex-start;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 1rem;
    height: 100%;
    padding: 1rem;
}

.service-card-thumb {
    border-radius: var(--radius);
    flex: 0 0 auto;
    height: 81px;   /* .services-thumb ile aynı ölçü: görselli/görselsiz kartlar hizalı */
    object-fit: cover;
    width: 120px;
}

/* Hizmetin kendi görseli (thumb varsa thumb). flex-shrink 0: dar ekranda ezilmez. */
.services-thumb {
    border-radius: 1rem;
    flex: 0 0 auto;
    height: 81px;
    object-fit: cover;
    width: 120px;
}

/* Görsel yüklenmemiş hizmet: nötr yer tutucu */
.service-card-thumb.is-placeholder {
    background:
        linear-gradient(135deg, transparent 46%, var(--border) 46%, var(--border) 54%, transparent 54%),
        var(--bg-alt);
    border: 1px solid var(--border);
    display: block;
}

.service-card-body { min-width: 0; }
.service-card-title { font-size: 1.0625rem; margin-bottom: .35rem; }
.service-card-text { color: var(--text-muted); font-size: .9375rem; margin-bottom: 0; }

@media (max-width: 575.98px) {
    .service-card { gap: .85rem; padding: .85rem; }
    .service-card-thumb { height: 65px; width: 96px; }
    .services-thumb { height: 65px; width: 96px; } /* 120x81 oranı korunur, metne yer kalır */
    .service-card-title { font-size: .9375rem; }
    .service-card-text { font-size: .8125rem; }
}

@media (max-width: 991.98px) {
    .place-aside, .promo-aside { position: static; }
    .place-meta, .promo-meta { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* =================================================================
   ANASAYFA VE ÜST BİLGİ DAVRANIŞI
   Tema tamamen açık: koyu zemin, dark mode veya koyu gradient yok.
   ================================================================= */

/* -----------------------------------------------------------------
   Sticky header — her zaman opak; kaydırınca yalnızca gölge eklenir
   ----------------------------------------------------------------- */
.site-header {
    transition: box-shadow .25s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 1px 3px rgba(43, 43, 43, .07);
}

/* -----------------------------------------------------------------
   Mobil off-canvas menü
   ----------------------------------------------------------------- */
.site-offcanvas {
    background: var(--bg);
    border-left: 1px solid var(--border);
    color: var(--text);
    width: min(320px, 86vw);
}

.site-offcanvas .offcanvas-header { border-bottom: 1px solid var(--border); }
.site-offcanvas .offcanvas-title { font-size: 1rem; }

.offcanvas-nav { margin: 0; }
.offcanvas-nav li + li { border-top: 1px solid var(--border); }
.offcanvas-nav a {
    color: var(--text);
    display: block;
    font-size: 1rem;
    padding: .75rem 0;
}
.offcanvas-nav a:hover, .offcanvas-nav a.is-active { color: var(--accent); }

.offcanvas-lang { border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: 1rem; }

.offcanvas-phone {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}

/* -----------------------------------------------------------------
   Hero slider
   ----------------------------------------------------------------- */
/* Hero, header'ın ALTINDAN başlar: negatif üst boşluk yok, görsel
   header'ın arkasına geçmez. Aradaki ince beyaz şerit + header'ın alt
   çizgisi iki bölümü birbirinden ayırır. */
.hero {
    background: var(--bg);
    padding-top: .5rem;
    position: relative;
}

.hero-slider, .hero-slider .carousel-inner, .hero-slider .carousel-item { height: 100%; }

/* Görsel + metin katmanı. Okunurluk perdesi yalnızca bu sarmalı kaplar;
   böylece mobilde hero'nun altına akan form ile çakışmaz.
   Üst köşeler hafif yuvarlak; görsel taşmasın diye overflow gizlenir. */
.hero-media {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    position: relative;
}

/* Slayt da varsayılan görsel de yoksa: düz accent zemin.
   Otel adı ve alt başlık bunun üzerinde okunur. */
.hero-placeholder {
    background: linear-gradient(150deg, var(--accent) 0%, var(--accent-dark) 100%);
    height: 80vh;
    min-height: max(70vh, 520px);
    width: 100%;
}

/* Tam genişlik, masaüstünde en az 70vh yükseklik */
.hero-image {
    display: block;
    height: 80vh;
    min-height: max(70vh, 520px);
    object-fit: cover;
    object-position: center;
    width: 100%;
}

/* Katman sırası — görsel 1, perde 2, metin 3.
   Perdeye açık bir z-index verilmezse Bootstrap'ın konumlandırılmış
   carousel katmanları perdenin ÜSTÜNDE kalabilir; perde o zaman yalnızca
   duran ilk slaytta doğru görünür, geçişte kaybolur. Slaytların tamamı
   .hero-slider'ın (z-index:1) içinde kaldığı için tek bir perde
   hepsinin üstünü birden kapatır. */
.hero-slider,
.hero-image,
.hero-placeholder {
    position: relative;
    z-index: 1;
}

/* Okunurluk perdesi. Hero'nun tamamını kaplar; soldan sağa açılır ve
   %65'ten sonra tamamen saydamdır, yani görselin sağ yarısı hiç
   karartılmaz. Perde tek düz katmandır — burada BİLEREK mask-image
   kullanılmıyor: maske bu katmanı ayrı bir kompozisyon katmanına
   zorluyor ve .hero-media'nın overflow:hidden + border-radius kırpması
   ile birleşince ALTINDAKİ slayt görseli hiç boyanmıyordu. */
.hero-overlay {
    align-items: flex-end;
    background: linear-gradient(to right,
                rgba(0, 0, 0, .55) 0%,
                rgba(0, 0, 0, .30) 35%,
                transparent 65%);
    bottom: 0;
    display: flex;
    left: 0;
    /* Rezervasyon formu görselin altında durduğu için başlığa yer açılır */
    padding-bottom: clamp(11rem, 24vh, 16rem);
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
    z-index: 2;
}

/* Metin perdenin de üstünde kalır. */
.hero-content {
    pointer-events: auto;
    position: relative;
    z-index: 3;
}

/* Beyaz metin YALNIZCA görsel üzerindeki katmanda geçerlidir;
   iç sayfalardaki .hero-title / .hero-intro koyu metin olarak kalır. */
.hero-overlay .hero-title {
    color: #ffffff;
    margin-bottom: .75rem;
    max-width: 20ch;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.hero-overlay .hero-intro {
    color: #ffffff;
    font-size: 1.0625rem;
    margin-bottom: 1rem;
    max-width: 52ch;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.hero-overlay .hero-slide-note { color: #ffffff; margin-bottom: 1rem; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.hero-overlay .hero-slide-note span { display: block; font-size: .9375rem; opacity: .9; }

.hero-actions { margin-bottom: 0; }

/* Buton perdenin en koyu bölgesinde durur: kenarlık tam opak beyaza
   çekildi, zemin %96'ya çıkarıldı ve altına yumuşak bir gölge kondu —
   böylece açık tonlu görsellerde de kenarı görselden ayrışır. */
.btn-outline-light-accent {
    background: rgba(255, 255, 255, .96);
    border: 1px solid #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    color: var(--text);
    font-weight: 600;
}
.btn-outline-light-accent:hover,
.btn-outline-light-accent:focus-visible { background: #ffffff; border-color: #ffffff; color: var(--accent); }
.btn-outline-light-accent:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.hero-indicators { bottom: 1rem; }
.hero-indicators [data-bs-target] {
    background-color: #ffffff;
    border: 0;
    border-radius: 50%;
    height: 9px;
    opacity: .55;
    width: 9px;
}
.hero-indicators .active { opacity: 1; }

/* -----------------------------------------------------------------
   Hero üzerindeki rezervasyon formu
   ----------------------------------------------------------------- */
/* Form hero'nun DIŞINDA, bağımsız bir bloktur; hero render edilmese de
   kaybolmaz. Masaüstünde negatif üst boşlukla görselin üzerine biner. */
.hero-booking {
    margin-top: -7.5rem;
    position: relative;
    z-index: 5;
}

.hero-booking-panel .booking-widget {
    box-shadow: 0 1px 3px rgba(43, 43, 43, .06), 0 14px 36px rgba(43, 43, 43, .16);
}

/* -----------------------------------------------------------------
   Bölüm başlıkları
   ----------------------------------------------------------------- */
.section-head {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.section-head-center { justify-content: center; text-align: center; }
.section-head-center .section-text { margin-left: auto; margin-right: auto; }

.section-text { color: var(--text-muted); margin-bottom: 0; max-width: 60ch; }

.section-alt { background: var(--bg-alt); }

/* -----------------------------------------------------------------
   Ödül ve sertifikalar
   ----------------------------------------------------------------- */
.award-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.award-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.award-logo { display: block; margin: 0 auto .85rem; max-height: 72px; width: auto; }

.award-mark {
    align-items: center;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--accent);
    display: inline-flex;
    font-size: 1.5rem;
    height: 56px;
    justify-content: center;
    margin-bottom: .85rem;
    width: 56px;
}

.award-title { font-size: 1rem; margin-bottom: .25rem; }
.award-title a { color: var(--text); }
.award-title a:hover { color: var(--accent); }

.award-issuer {
    color: var(--text-muted);
    font-size: .75rem;
    letter-spacing: .04em;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.award-text { color: var(--text-muted); font-size: .875rem; margin-bottom: .5rem; }

.award-year {
    color: var(--accent);
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* -----------------------------------------------------------------
   SSS akordiyonu (anasayfa)
   ----------------------------------------------------------------- */
.home-faq .accordion-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius) !important;
    margin-bottom: .6rem;
    overflow: hidden;
}

.home-faq .accordion-header { margin: 0; }

.home-faq .accordion-button {
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
    padding: 1rem 1.15rem;
}

.home-faq .accordion-button:not(.collapsed) {
    background: var(--bg-alt);
    box-shadow: none;
    color: var(--text);
}

.home-faq .accordion-button:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(176, 141, 87, .15); }
.home-faq .accordion-button::after { filter: grayscale(1) brightness(.5); }
.home-faq .accordion-body { color: var(--text-muted); padding: 0 1.15rem 1.15rem; }

/* -----------------------------------------------------------------
   Bülten ve sosyal medya
   ----------------------------------------------------------------- */
.newsletter-section { background: var(--bg-alt); }

.newsletter-card, .social-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    height: 100%;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.newsletter-trap { height: 0; overflow: hidden; position: absolute; width: 0; }

.newsletter-message { font-size: .875rem; margin: .85rem 0 0; min-height: 1.2em; }
.newsletter-message.is-success { color: #1a7f4b; }
.newsletter-message.is-error { color: #b02a37; }

.social-list { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }

.social-link {
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    display: flex;
    gap: .5rem;
    padding: .55rem .75rem;
    transition: border-color .15s ease, color .15s ease;
}
.social-link:hover { border-color: var(--accent); color: var(--accent); }
.social-link i { color: var(--accent); font-size: 1.05rem; }

/* -----------------------------------------------------------------
   Çerez bildirimi
   ----------------------------------------------------------------- */
.cookie-notice {
    background: var(--bg);
    border-top: 1px solid var(--border);
    bottom: 0;
    box-shadow: 0 -2px 10px rgba(43, 43, 43, .06);
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    transform: translateY(100%);
    transition: transform .25s ease, opacity .25s ease;
    z-index: 1070;
}

.cookie-notice.is-visible { opacity: 1; transform: translateY(0); }

.cookie-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    justify-content: space-between;
    padding-block: .85rem;
}

.cookie-text { color: var(--text-muted); flex: 1 1 28rem; font-size: .875rem; }
.cookie-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie-details { color: var(--text-muted); font-size: .8125rem; text-decoration: underline; white-space: nowrap; }
.cookie-details:hover { color: var(--accent); }

/* Bildirim, alttaki iletişim barının üstüne JS ile alınır (consent.js);
   geçiş sırasında kayma görünmesin */
.cookie-notice { transition: transform .25s ease, opacity .25s ease, bottom .15s ease; }
.cookie-notice.is-inset-right { border-right: 1px solid var(--border); border-top-right-radius: var(--radius); }
.cookie-notice.is-inset-left  { border-left: 1px solid var(--border);  border-top-left-radius: var(--radius); }

@media (max-width: 575.98px) {
    .cookie-inner { padding-block: .75rem; }
    .cookie-actions { width: 100%; }
    .cookie-actions .btn { flex: 1 1 auto; }
}

/* Bir Bootstrap modalı açıkken iletişim barı gizlenir; alt butonları örtmesin.
   Barın kendi kuralları !important olduğundan seçici daha özgül tutuldu. */
body.modal-open #solemio-bar-mobil,
body.modal-open #solemio-bar-masaustu { display: none !important; }

/* Footer "Çerez ayarları" — bağlantı görünümünde buton */
.footer-cookie-settings {
    background: none;
    border: 0;
    color: var(--text-muted);
    font: inherit;
    padding: 0;
}
.footer-cookie-settings:hover { color: var(--accent); }

/* Onaya bağlı harita: izin verilene kadar yerinde açıklama kutusu */
.map-consent {
    align-items: center;
    background: var(--bg-alt);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    inset: 0;
    justify-content: center;
    padding: 1.5rem;
    position: absolute;
    text-align: center;
}
.map-consent-title { color: var(--text); font-weight: 600; margin: 0; }
.map-consent-text { color: var(--text-muted); font-size: .875rem; margin: 0; max-width: 42ch; }
.map-consent-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .25rem; }

.contact-map-link { font-size: .875rem; margin-top: .25rem; }

/* -----------------------------------------------------------------
   Duyarlı (mobil öncelikli düzeltmeler)
   ----------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hero-image,
    .hero-placeholder { height: 62vh; min-height: 380px; }
    /* Bu genişlikten itibaren rezervasyon formu hero'nun ALTINA aktığı
       için metin görselin en altına yaslanır. Soldan gelen perde dar
       ekranda metnin altını açıkta bırakırdı; yukarıdan aşağıya çevrildi. */
    .hero-overlay {
        background: linear-gradient(to bottom,
                    transparent 0%,
                    rgba(0, 0, 0, .30) 45%,
                    rgba(0, 0, 0, .55) 100%);
        padding-bottom: clamp(2.5rem, 8vh, 4rem);
    }

    /* Mobilde form görselin üzerinde değil, hero'nun ALTINA akar */
    .hero-booking {
        margin-top: 0;
        padding-block: 1.25rem 0;
    }

    .hero-booking-panel .booking-widget {
        box-shadow: 0 1px 3px rgba(43, 43, 43, .06), 0 6px 18px rgba(43, 43, 43, .07);
    }

    .section-head { align-items: flex-start; flex-direction: column; }
    .social-list { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .hero-image,
    .hero-placeholder { height: 58vh; min-height: 340px; }
    .hero-title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
    .hero-intro { font-size: .9375rem; }
    .cookie-inner { align-items: stretch; flex-direction: column; }
    /* Sütun düzeninde flex-basis yüksekliğe dönüşür; metin kendi boyunda kalsın */
    .cookie-text { flex: 0 0 auto; }
    .cookie-actions { justify-content: space-between; }
}

/* -----------------------------------------------------------------
   Form güvenlik alanları ve iletişim formu
   ----------------------------------------------------------------- */
/* Bal küpü (honeypot): ekran okuyucudan da gizlenir, robotlar doldurur */
.form-trap,
.newsletter-trap {
    height: 0;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.contact-form { margin-top: 1rem; }

.form-message { font-size: .875rem; margin: .85rem 0 0; min-height: 1.2em; }
.form-message.is-success { color: #1a7f4b; }
.form-message.is-error { color: #b02a37; }

/* -----------------------------------------------------------------
   Ana sayfa: Hakkımızda (iki sütun), güvence kartları, iletişim
   ----------------------------------------------------------------- */
.section-eyebrow {
    color: var(--accent);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.home-about-media {
    aspect-ratio: 4 / 3;
    background-color: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

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

.home-about-placeholder {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    font-size: .875rem;
    gap: .5rem;
    height: 100%;
    justify-content: center;
    letter-spacing: .06em;
}

.home-about-placeholder .bi { color: var(--accent); font-size: 2.5rem; }

.home-about-text { color: var(--text-muted); margin-bottom: 1.75rem; }
.home-about-text p:last-child { margin-bottom: 0; }

.home-assurance { padding-block: clamp(2.5rem, 5vw, 4rem); }

.assurance-card {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    height: 100%;
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: box-shadow .2s ease, transform .2s ease;
}

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

.assurance-icon {
    align-items: center;
    background-color: var(--bg-alt);
    border-radius: 50%;
    color: var(--accent);
    display: inline-flex;
    font-size: 1.5rem;
    height: 3.25rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 3.25rem;
}

.assurance-title { font-size: 1.0625rem; margin-bottom: .5rem; }
.assurance-text { color: var(--text-muted); font-size: .9375rem; margin-bottom: 0; }

.home-contact-map { height: 100%; min-height: 320px; padding-top: 0; }

@media (max-width: 991.98px) {
    .home-contact-map { height: auto; min-height: 0; padding-top: 62%; }
}

/* -----------------------------------------------------------------
   Ana sayfa: yakın çevre ve popüler noktalar
   ----------------------------------------------------------------- */
.nearby-card {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

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

.nearby-card-media { aspect-ratio: 3 / 2; background-color: var(--bg-alt); }
.nearby-card-media img { display: block; height: 100%; object-fit: cover; width: 100%; }

.nearby-card-body { flex: 1 1 auto; padding: 1.25rem 1.25rem .75rem; }

.nearby-card-category {
    color: var(--accent);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.nearby-card-category .bi { margin-right: .25rem; }

.nearby-card-title { font-size: 1.0625rem; margin-bottom: .4rem; }
.nearby-card-text { color: var(--text-muted); font-size: .9rem; margin-bottom: 0; }

.nearby-card-foot {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    justify-content: space-between;
    padding: .75rem 1.25rem;
}

.nearby-card-distance { color: var(--text); font-size: .875rem; font-weight: 600; margin: 0; }
.nearby-card-distance .bi { color: var(--accent); }

.nearby-card-map { font-size: .8125rem; white-space: nowrap; }
.nearby-card-map .bi { font-size: .75rem; }

.home-nearby-note {
    color: var(--text-muted);
    margin-top: 2.5rem;
    max-width: 52rem;
}

.home-nearby-note p:last-child { margin-bottom: 0; }
.home-nearby-note h3 { color: var(--text); font-size: 1.125rem; margin: 1.5rem 0 .6rem; }
.home-nearby-note ul, .home-nearby-note ol { padding-left: 1.25rem; }
.home-nearby-note a { color: var(--accent); }

/* Galeri karoları (/galeri ve "Otelden kareler"): eşit oranlı görsel */
.gallery-tile { aspect-ratio: 4 / 3; }
.gallery-album-count { color: var(--text-muted); font-size: .9375rem; font-weight: 400; margin-left: .5rem; }


/* -----------------------------------------------------------------
   Blog: liste, kategori çipleri, sayfalama, yazı detayı
   ----------------------------------------------------------------- */
.blog-categories { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }

.blog-chip {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: .875rem;
    padding: .4rem .95rem;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

.blog-chip:hover { border-color: var(--accent); color: var(--accent); }
.blog-chip.is-active { background-color: var(--accent); border-color: var(--accent); color: #fff; }
.blog-chip-count { font-size: .75rem; opacity: .7; }

.blog-card {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

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

.blog-card-media { aspect-ratio: 3 / 2; background-color: var(--bg-alt); display: block; }
.blog-card-media img { display: block; height: 100%; object-fit: cover; width: 100%; }

.blog-card-placeholder {
    align-items: center;
    color: var(--accent);
    display: flex;
    font-size: 2rem;
    height: 100%;
    justify-content: center;
}

.blog-card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1.25rem; }

.blog-card-meta {
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .8125rem;
    gap: .25rem .75rem;
    margin-bottom: .5rem;
}

.blog-card-category { color: var(--accent); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.blog-card-title { font-size: 1.125rem; line-height: 1.35; margin-bottom: .5rem; }
.blog-card-title a { color: var(--text); text-decoration: none; }
.blog-card-title a:hover { color: var(--accent); }

.blog-card-text { color: var(--text-muted); font-size: .9375rem; margin-bottom: 1rem; }
.blog-card-more { font-size: .875rem; font-weight: 600; margin-top: auto; text-decoration: none; }

.blog-pagination { margin-top: 2.5rem; }
.blog-pagination .page-link { color: var(--text); }
.blog-pagination .page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); color: #fff; }

.blog-post-meta {
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .875rem;
    gap: .35rem 1.25rem;
    margin: .75rem 0 0;
}

.blog-post-meta a { color: var(--text-muted); text-decoration: none; }
.blog-post-meta a:hover { color: var(--accent); }
.blog-post-meta .bi { color: var(--accent); margin-right: .2rem; }

.blog-article { margin-inline: auto; max-width: 760px; }

.blog-article-cover {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: block;
    height: auto;
    margin-bottom: 2rem;
    width: 100%;
}

.blog-article-lead { color: var(--text); font-size: 1.125rem; line-height: 1.7; margin-bottom: 1.5rem; }

.blog-article-content { font-size: 1.0625rem; line-height: 1.8; max-width: none; }
.blog-article-content a { text-decoration: underline; text-underline-offset: 3px; }
.blog-article-content blockquote {
    border-left: 3px solid var(--accent);
    color: var(--text-muted);
    margin: 1.5rem 0;
    padding: .25rem 0 .25rem 1.25rem;
}

.blog-article-cta {
    align-items: center;
    background-color: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding: 1.5rem;
}

/* Footer logosu (Ayarlar > Logo) — ana sayfaya bağlantı */
.footer-logo { display: block; height: auto; max-height: 44px; width: auto; }
.footer-brand-link { color: inherit; display: inline-block; }

/* Footer açıklaması (Ayarlar > Ana Sayfa, HTML) */
.footer-text { color: var(--text-muted); font-size: .9375rem; margin-bottom: 1rem; }
.footer-text p:last-child, .footer-text ul:last-child { margin-bottom: 0; }
.footer-text ul { padding-left: 1.1rem; }

/* İletişim sayfası: sosyal medya */
.contact-social { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.contact-social .contact-label { display: block; margin-bottom: .5rem; }

/* =================================================================
   GLIGHTBOX — açık tema, accent rengi
   Kütüphane CSS'i (vendor/glightbox) bu dosyadan önce yüklenir.
   ================================================================= */
.glightbox-container .goverlay,
.glightbox-mobile .glightbox-container .goverlay { background: rgba(247, 247, 245, .97); }

.glightbox-clean .gslide-media { box-shadow: var(--shadow, 0 8px 30px rgba(0, 0, 0, .08)); }
.glightbox-clean .gslide-image img { border-radius: var(--radius); }

.glightbox-clean .gslide-description { background: var(--bg); }
.glightbox-clean .gdesc-inner { padding: .85rem 1.1rem; }
.glightbox-clean .gslide-title { color: var(--text); font-family: inherit; font-size: .9375rem; font-weight: 500; margin-bottom: 0; }
.glightbox-clean .gslide-desc { color: var(--text-muted); font-family: inherit; }

.glightbox-clean .gprev,
.glightbox-clean .gnext,
.glightbox-clean .gclose {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    opacity: 1;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.glightbox-clean .gprev,
.glightbox-clean .gnext { height: 46px; width: 46px; }
.glightbox-clean .gclose { height: 40px; width: 40px; }
.glightbox-clean .gprev path,
.glightbox-clean .gnext path,
.glightbox-clean .gclose path { fill: var(--text); }
.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gclose:hover,
.glightbox-clean .gbtn:focus-visible {
    background-color: var(--bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    outline: none;
}
.glightbox-clean .gprev:hover path,
.glightbox-clean .gnext:hover path,
.glightbox-clean .gclose:hover path { fill: var(--accent); }
.glightbox-clean .gprev.disabled,
.glightbox-clean .gnext.disabled { opacity: .35; }

/* Mobil: kütüphanenin koyu degrade açıklaması açık zemine çevrilir */
.glightbox-mobile .glightbox-container .gslide-description {
    background: linear-gradient(to bottom, rgba(247, 247, 245, 0), rgba(247, 247, 245, .96) 35%);
}
.glightbox-mobile .glightbox-container .gslide-title { color: var(--text); }
.glightbox-mobile .glightbox-container .gslide-desc { color: var(--text-muted); }
.glightbox-mobile .glightbox-container .gslide-desc a,
.glightbox-mobile .glightbox-container .gslide-desc .desc-more { color: var(--accent); opacity: 1; }

/* Sayaç: "3 / 9" */
.glb-counter {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    left: 16px;
    padding: .3rem .75rem;
    position: absolute;
    top: 16px;
    z-index: 99999;
}
.glb-counter:empty { display: none; }

/* Küçük resim şeridi */
.glb-thumbs {
    bottom: 0;
    display: flex;
    gap: .5rem;
    justify-content: safe center;
    left: 0;
    overflow-x: auto;
    padding: .75rem 1rem;
    position: absolute;
    right: 0;
    scrollbar-width: thin;
    z-index: 99999;
}
.glb-thumbs:empty { display: none; }

.glb-thumb {
    background: var(--bg-alt);
    border: 2px solid transparent;
    border-radius: 6px;
    flex: 0 0 auto;
    height: 56px;
    opacity: .6;
    overflow: hidden;
    padding: 0;
    transition: opacity .15s ease, border-color .15s ease;
    width: 76px;
}
.glb-thumb img { display: block; height: 100%; object-fit: cover; width: 100%; }
.glb-thumb:hover, .glb-thumb:focus-visible { opacity: 1; outline: none; }
.glb-thumb.is-active { border-color: var(--accent); opacity: 1; }

/* Şerit varken görsel alanı şeridin üstünde kalır */
.glightbox-container.has-thumbs .gslider { height: calc(100% - 84px); }
.glightbox-container.has-thumbs .gslide-image img { max-height: calc(100vh - 150px); }

/* Masaüstünde GLightbox görsel yüksekliğini satır içi stille yazar
   (100vh - başlık); şerit (84px) + iki satırlık başlık için pay bırakılır. */
@media (min-width: 769px) {
    .glightbox-container.has-thumbs .gslide-image img { max-height: calc(100vh - 200px) !important; }
}
.glightbox-mobile .glightbox-container.has-thumbs .gslide-description { bottom: 84px; }

/* Çok alçak ekranlarda (yatay telefon) şerit gizlenir */
@media (max-height: 480px) {
    .glb-thumbs { display: none; }
    .glightbox-container.has-thumbs .gslider { height: 100%; }
    .glightbox-container.has-thumbs .gslide-image img { max-height: 100vh; }
}