/* =======================================================================
   MISYA CAVE HOTEL — site.css
   Museum Hotel'in sade, tipografi ağırlıklı lüks otel dilini temel alır.

   Bölümler:
     1) Tasarım değişkenleri      2) Reset
     3) Hareket (motion) altyapısı 4) Yardımcı sınıflar & butonlar
     5) Sayfa geçişi / preloader   6) Header & menü
     7) Alt rezervasyon çubuğu     8) Giriş (splash) ekranı
     9) Hero                      10) İçerik bölümleri
    11) Galeri                    12) İç sayfalar & detay
    13) Footer                    14) Formlar
    15) Yüzen kontroller          16) Duyarlı (responsive) kurallar
   ======================================================================= */

/* ---------- 1) Tasarım değişkenleri ---------- */
:root {
    --bg: #f5f4f4;
    --bg-deep: #edeae6;
    --surface: #ffffff;
    --fg: #0a0a0a;
    --muted: #6f6b66;
    --line: #ddd9d4;
    --accent: #9a7b4f;              /* Kapadokya tüfünün sıcak toprak tonu */
    --accent-soft: #c3a97f;
    --dark: #14110e;

    /* Üst çubuk, logo + "CAPPADOCIA" satırını sıkıştırmadan alacak kadar
       yüksektir. Sayfa kaydırılınca bir miktar daralır ama logonun altındaki
       satır yine çubuğun içinde kalır. */
    --header-h: 96px;
    --header-h-scrolled: 86px;
    --booking-h: 104px;       /* Yüzen rezervasyon adasının kapladığı toplam yükseklik */
    --menu-w: 315px;          /* Küçük ekranlarda açılıp kapanan panelin genişliği */
    --rail-w: 250px;          /* Masaüstünde ekranda sürekli duran sol menü şeridi */
    --container: 1505px;

    --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
    --font-display: "Cormorant Garamond", "Times New Roman", serif;

    /* Hareket eğrileri: --ease-out yumuşak duruş, --ease-io iki yönlü geçiş */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
    --ease: cubic-bezier(.25, .1, .25, 1);
}

/* ---------- 2) Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 26px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Menü açıkken sayfanın kaymasını engeller */
body.is-menu-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

h2 { font-size: 22px; line-height: 32px; }
h3 { font-size: 22px; line-height: 32px; }
h4 { font-size: 20px; line-height: 28px; letter-spacing: .4px; text-transform: none; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: #fff; }

/* İnce, markayla uyumlu kaydırma çubuğu */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #c8c2b9; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* =======================================================================
   3) HAREKET ALTYAPISI
   Sayfadaki tüm giriş animasyonları bu birkaç sınıf üzerinden yürür.
   JavaScript yalnızca "is-visible" sınıfını ekler; işi CSS yapar.
   ======================================================================= */

/* 3.1 — Aşağıdan yukarı yumuşak giriş.
   --i değişkeni ile sıralı (staggered) gecikme verilir. */
.reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 3.2 — Yandan giriş (metin sütunları için) */
.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal-left.is-visible,
.reveal-right.is-visible { opacity: 1; transform: none; }

/* 3.3 — Görsel perdesi: fotoğraf aşağıdan yukarı açılırken içindeki
   resim de yavaşça normal boyutuna oturur. Lüks otel sitelerinin imzası.

   ÖNEMLİ: clip-path kapsayıcıya değil, doğrudan <img> etiketine uygulanır.
   Çünkü clip-path ile tamamen kırpılan bir öğenin boyanan alanı sıfır olur ve
   IntersectionObserver o öğeyi "görünmüyor" kabul edip animasyonu hiç
   tetiklemez. Gözlenen kapsayıcı kırpılmadan bırakılarak bu kısır döngü kırılır.

   Ölçek ve paralaks ayrı değişkenlerde tutulur (--ms / --py); böylece
   ikisi birbirinin transform değerini ezmez. */
.media-reveal { overflow: hidden; }

.media-reveal img {
    --ms: 1.18;                                  /* media scale */
    clip-path: inset(0 0 100% 0);
    transform: scale(var(--ms));
    filter: saturate(.72);
    transition: clip-path 1.35s var(--ease-out),
                transform 1.2s var(--ease-out),
                filter 1.6s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 110ms);
}
.media-reveal.is-visible img {
    --ms: 1;
    clip-path: inset(0 0 0 0);
    filter: none;
}

/* 3.4 — Başlıkların kelime kelime yukarı kayarak belirmesi.
   Kelimeleri JavaScript sarar (data-split özniteliği olan başlıklarda). */
.split-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .08em;
}
.split-word > span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform .95s var(--ease-out);
    transition-delay: calc(var(--wi, 0) * 55ms);
}
.is-visible .split-word > span { transform: none; }

/* 3.5 — Başlık altındaki ince altın çizginin soldan çizilmesi */
.rule-line {
    display: block;
    width: 54px;
    height: 1px;
    margin: 20px auto 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s var(--ease-out) .35s;
}
.is-visible .rule-line,
.reveal.is-visible .rule-line { transform: scaleX(1); }

/* 3.6 — Kullanıcı hareket azaltmayı tercih ettiyse her şeyi kapat */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .reveal, .reveal-left, .reveal-right,
    .media-reveal, .media-reveal img,
    .split-word > span, .rule-line {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
        transition: none !important;
    }
    .hero__slide.is-active { animation: none !important; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 4) Yardımcı sınıflar & butonlar ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 80px;
}

.text-center { text-align: center; }
.btns { margin-top: 28px; }

/* Alt çizgili ince bağlantı — sitedeki temel "buton" dili.
   Üzerine gelince çizgi sağa doğru silinip soldan yeniden çizilir. */
.link-underline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    padding-bottom: 7px;
    transition: color .4s var(--ease-out);
}
.link-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: right;
}
.link-underline:hover { color: var(--accent); }
.link-underline:hover::after { animation: lineSwipe .75s var(--ease-out); }

@keyframes lineSwipe {
     0%  { transform: scaleX(1); transform-origin: right; }
    45%  { transform: scaleX(0); transform-origin: right; }
    46%  { transform: scaleX(0); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: left; }
}

/* Bağlantı sonundaki küçük ok, üzerine gelince ilerler */
.link-underline .arrow {
    width: 16px;
    height: 1px;
    background: currentColor;
    position: relative;
    transition: transform .45s var(--ease-out);
}
.link-underline .arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -2px;
    width: 5px;
    height: 5px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}
.link-underline:hover .arrow { transform: translateX(6px); }

/* Dolgusu aşağıdan yukarı süzülen buton */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 34px;
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    overflow: hidden;
    isolation: isolate;
    transition: color .45s var(--ease-out), border-color .45s var(--ease-out);
}
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translateY(101%);
    transition: transform .55s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }

.btn--outline { border: 1px solid var(--fg); }
.btn--outline::before { background: var(--fg); }
.btn--outline:hover { color: #fff; }

/* Koyu zeminde kullanılan altın buton (yüzen rezervasyon çubuğu) */
.btn--gold { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn--gold::before { background: #fff; }
.btn--gold:hover { color: var(--dark); border-color: #fff; }

.btn--solid { background: var(--fg); color: #fff; border: 1px solid var(--fg); }
.btn--solid::before { background: var(--accent); }
.btn--solid:hover { border-color: var(--accent); }

/* =======================================================================
   5) Sayfa geçişi & preloader
   ======================================================================= */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--bg);
    transition: opacity .9s var(--ease-out), visibility .9s var(--ease-out);
}
.splash .preloader { background: var(--dark); }

.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__logo {
    width: 170px;
    filter: invert(1);
    animation: breathe 2.6s var(--ease-io) infinite;
}
.splash .preloader__logo { filter: none; }

@keyframes breathe {
    0%, 100% { opacity: .35; transform: scale(.985); }
    50%      { opacity: 1;   transform: scale(1); }
}

/* Preloader altındaki ince ilerleme çizgisi */
.preloader__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    animation: loadBar 1.1s var(--ease-out) forwards;
}
@keyframes loadBar { to { transform: scaleX(1); } }

/* Başka bir sayfaya geçerken içeriğin yumuşakça sönmesi */
.page-shell,
.splash__content { transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
body.is-leaving .page-shell,
body.is-leaving .splash__content { opacity: 0; transform: translateY(-14px); }

/* Sayfanın en üstündeki okuma ilerleme çubuğu */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 95;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

/* ---------- 6) Header ---------- */
.page-shell {
    transition: transform .6s var(--ease-out), opacity .45s var(--ease-out);
    /* Dikkat: menü açıkken transform devreye girdiği için, içindeki
       position:fixed öğeler etkilenmesin diye header ve rezervasyon
       çubuğu kabuğun DIŞINDA tutulmuştur. */
}
body.is-menu-open .page-shell { transform: translateX(var(--menu-w)); }

.header {
    position: fixed;
    inset: 0 0 auto 0;
    /* Menü panelinden (70) yüksek: panel açıkken de kapatma (X) düğmesi
       görünür kalsın, kullanıcı menüde kilitli hissetmesin. */
    z-index: 80;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: transparent;
    transition: background-color .5s var(--ease-out),
                height .5s var(--ease-out),
                box-shadow .5s var(--ease-out),
                transform .6s var(--ease-out);
}

/* Aşağı kaydırırken üst çubuk gizlenir, yukarı kaydırınca geri gelir */
.header.is-hidden { transform: translateY(-100%); }

.header__inner {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

/* Şeffaf (hero üzerindeki) durum: beyaz yazı + üstten gradyan gölge */
.site--overlay .header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    pointer-events: none;
    transition: opacity .5s var(--ease-out);
}
.site--overlay .header { color: #fff; }

/* Kaydırıldıktan sonraki durum: yarı saydam beyaz zemin + siyah yazı */
.header.is-scrolled {
    height: var(--header-h-scrolled);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    color: var(--fg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .07);
}
.header.is-scrolled::before { opacity: 0; }

/* Menü açıkken üst çubuk her zaman açık zemine geçer; aksi hâlde
   beyaz panelin üzerinde beyaz yazı okunmaz hâle gelir. */
body.is-menu-open .header {
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    color: var(--fg);
}
body.is-menu-open .header::before { opacity: 0; }
body.is-menu-open .header__brand img { filter: invert(1); }

/* İç sayfalarda başlık baştan beyazdır */
.site--solid .header {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    color: var(--fg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .07);
}

/* Menü düğmesi — açıkken çizgiler çarpıya dönüşür */
.menu-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    letter-spacing: 1.2px;
}
.menu-toggle__bars { display: block; width: 26px; }
.menu-toggle__bars span {
    display: block;
    height: 1px;
    background: currentColor;
    transition: width .45s var(--ease-out), transform .45s var(--ease-out);
}
.menu-toggle__bars span:first-child { width: 26px; }
.menu-toggle__bars span:last-child  { width: 16px; margin-top: 7px; }
.menu-toggle:hover .menu-toggle__bars span:last-child { width: 26px; }

body.is-menu-open .menu-toggle__bars span:first-child { transform: translateY(4px) rotate(45deg); }
body.is-menu-open .menu-toggle__bars span:last-child  { width: 26px; transform: translateY(-4px) rotate(-45deg); }

.menu-toggle__label { transition: opacity .3s var(--ease-out); }

.header__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Dikeyde tam ortadan 8 piksel aşağı alınır: logo optik olarak
       ortalanır, üst kenara yapışmış görünmez. */
    transform: translate(-50%, calc(-50% + 8px));
    text-align: center;
}
.header__brand img {
    /* Logonun oranı 2.55:1 (900x353). 164 pikselde yüksekliği ~64 piksel
       olur; altındaki 18 piksellik "CAPPADOCIA" satırıyla birlikte 96
       piksellik çubuğa nefes payı kalarak sığar. Genişliği değiştirirken
       bu hesabı yeniden yapın. */
    width: 164px;
    margin: 0 auto;
    /* Kaynak dosya 900 piksel genişliğinde; bu ölçekte 5x'ten fazla kalır,
       yani yüksek yoğunluklu ekranlarda da keskindir. */
    image-rendering: -webkit-optimize-contrast;
    transition: width .5s var(--ease-out), filter .5s var(--ease-out);
}
.header__tagline {
    display: block;
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 11px;
    /* Gövdeden gelen 26px satır yüksekliği bu tek satır için fazlaydı ve
       logonun altında boşluk bırakıp çubuktan taşmasına yol açıyordu. */
    line-height: 16px;
    letter-spacing: 5px;
    text-transform: uppercase;
    opacity: .85;
    transition: letter-spacing .5s var(--ease-out);
}

/* Logo beyaz olduğu için açık zeminde tersine çevrilir */
.header.is-scrolled .header__brand img,
.site--solid .header__brand img { filter: invert(1); width: 140px; }

.header__nav {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 12px;
    letter-spacing: 1.2px;
}
.header__nav a { position: relative; padding-bottom: 3px; }
.header__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ease-out);
}
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__nav svg { transition: transform .45s var(--ease-out); }
.header__nav a:hover svg { transform: rotate(8deg) scale(1.12); }

/* ---------- Menü paneli ---------- */
.menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    width: var(--menu-w);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--header-h) + 24px) 0 40px;
    background: var(--surface);
    box-shadow: 1px 0 40px rgba(0, 0, 0, .07);
    transform: translateX(-100%);
    transition: transform .6s var(--ease-out);
    overflow-y: auto;
}
body.is-menu-open .menu-panel { transform: none; }

/* Menü maddeleri panel açılınca sırayla soldan süzülür */
.menu-list__item {
    opacity: 0;
    transform: translateX(-22px);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
body.is-menu-open .menu-list__item {
    opacity: 1;
    transform: none;
    transition-delay: calc(.2s + var(--i, 0) * 55ms);
}

.menu-list__item > a,
.menu-list__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 30px;
    font-size: 15px;
    letter-spacing: .6px;
    text-align: left;
    transition: color .4s var(--ease-out), padding-left .4s var(--ease-out);
}
/* Üzerine gelince soldan küçük bir altın çizgi çıkar ve madde içeri kayar */
.menu-list__item > a::before,
.menu-list__toggle::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 50%;
    width: 0;
    height: 1px;
    background: var(--accent);
    transform: translateY(-50%);
    transition: width .4s var(--ease-out);
}
.menu-list__item > a:hover,
.menu-list__toggle:hover { color: var(--accent); padding-left: 52px; }
.menu-list__item > a:hover::before,
.menu-list__toggle:hover::before { width: 14px; }

.menu-list__chevron {
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .45s var(--ease-out);
}
.menu-list__item.is-open .menu-list__chevron { transform: rotate(45deg); }

.menu-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease-io);
}
.menu-list__item.is-open .menu-sub { max-height: 340px; }
.menu-sub a {
    display: block;
    padding: 8px 30px 8px 44px;
    font-size: 12px;
    letter-spacing: .8px;
    color: var(--muted);
    transition: color .35s var(--ease-out), transform .35s var(--ease-out);
}
.menu-sub a:hover { color: var(--fg); transform: translateX(6px); }

.menu-panel__foot {
    padding: 24px 30px 0;
    margin: 0 0 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}
.menu-panel__foot a { display: block; transition: color .35s var(--ease-out); }
.menu-panel__foot a:hover { color: var(--accent); }

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(10, 10, 10, .3);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s var(--ease-out), visibility .5s var(--ease-out);
}
body.is-menu-open .menu-overlay { opacity: 1; visibility: visible; }

/* ---------- 7) Alt rezervasyon çubuğu ----------
   Tam genişlikte açık renkli bir şerit değil: ekranın altında yüzen,
   ortalanmış, otelin koyu tonundaki bir ada. Arkasındaki fotoğrafı boydan
   boya kesmediği için sayfanın kompozisyonu bozulmaz; koyu zemin de altın
   vurgunun okunmasını sağlar. */
.booking-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 0 28px 22px;
    /* Ada, arkasındaki içeriğin üzerinde yüzer; çubuğun kendisi saydamdır,
       bu yüzden boş kalan yanlarından sayfa görünmeye devam eder. */
    pointer-events: none;
    transform: translateY(130%);
    transition: transform .7s var(--ease-out);
}
.booking-bar.is-visible { transform: none; }

.booking-bar__form {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 16px 16px 30px;
    display: flex;
    align-items: center;
    gap: 26px;
    background: var(--dark);
    color: #fff;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .32);
    pointer-events: auto;
}
/* Üst kenardaki ince altın çizgi: adanın tek süsü */
.booking-bar__form::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 45%, transparent 100%);
}

/* Soldaki tipografik blok */
.booking-bar__intro {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 16px;
    border-left: 2px solid var(--accent);
    flex: 0 0 auto;
}
.booking-bar__eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--accent-soft);
}
.booking-bar__lead {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 22px;
    color: #fff;
}

/* Alanlar, aralarındaki ince dikey çizgilerle ayrılır */
.booking-bar__fields {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}
.booking-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 0;
    min-width: 120px;
    padding: 4px 24px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.booking-field--small { flex: 0 1 150px; }

.booking-field__label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    transition: color .35s var(--ease-out);
}
.booking-field input,
.booking-field select {
    height: 28px;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: #fff;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    border-radius: 0;
    /* Tarayıcının kendi tarih seçici ikonu da koyu zemine göre açık renk olsun */
    color-scheme: dark;
}
.booking-field select option { color: var(--fg); }

/* Odaklanınca alttaki çizgi soldan sağa altın renkle çizilir */
.booking-field::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 4px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease-out);
}
.booking-field:focus-within::after { transform: scaleX(1); }
.booking-field:focus-within .booking-field__label { color: var(--accent-soft); }
.booking-field input:focus,
.booking-field select:focus { outline: none; }

/* Sağdaki eylem bloğu: gece sayısı + buton */
.booking-bar__action {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.booking-bar__nights {
    font-size: 12px;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
}
.booking-bar .btn { height: 48px; }

/* ---------- 8) Giriş (splash) ekranı ---------- */
.splash {
    position: relative;
    min-height: 100vh;
    color: #fff;
    overflow: hidden;
}
.splash__bg { position: fixed; inset: 0; z-index: 0; }
.splash__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s var(--ease-io);
}
/* Aktif fotoğraf çok yavaşça yakınlaşır (Ken Burns) */
.splash__slide.is-active { opacity: 1; animation: kenBurnsSlow 14s linear forwards; }

@keyframes kenBurnsSlow {
    from { transform: scale(1.03); }
    to   { transform: scale(1.13); }
}

.splash__scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, .62) 78%),
        linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .34) 45%, rgba(0, 0, 0, .7));
}

/* Açık renkli fotoğraflarda da okunabilirlik için yumuşak gölge.
   Gölge <img> yerine kapsayıcıya verilir: <img> üzerindeki filter
   özelliğini giriş animasyonu (brandIn) zaten kullanıyor. */
.splash__content { text-shadow: 0 1px 18px rgba(0, 0, 0, .45); }
.splash__brand { filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .5)); }
.splash__partners a { filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .5)); }

/* Üç bant: logo üstte, dil seçimi ortada, marka logoları altta.
   space-between sayesinde otel logosu ekranın üst kısmına yerleşir. */
.splash__content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 8vh 24px 5vh;
    text-align: center;
}

.splash__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
}

.splash__brand img {
    width: 340px;
    max-width: 76vw;
    margin: 0 auto;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(16px);
    animation: brandIn 1.5s var(--ease-out) .35s forwards;
}
.splash__tagline {
    display: block;
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 18px;
    text-transform: uppercase;
    opacity: 0;
    letter-spacing: 26px;
    animation: tagIn 1.7s var(--ease-out) .8s forwards;
}
.splash__slogan {
    display: block;
    margin-top: 8px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    letter-spacing: 3px;
    opacity: 0;
    animation: fadeUp 1.2s var(--ease-out) 1.3s forwards;
}

@keyframes brandIn { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes tagIn   { to { opacity: .95; letter-spacing: 10px; } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(14px); } to { opacity: .9; transform: none; } }

.splash__enter {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 17px;
    letter-spacing: 1.4px;
    opacity: 0;
    animation: fadeUp 1.2s var(--ease-out) 1.5s forwards;
}
.splash__enter a {
    position: relative;
    padding: 4px 2px;
    transition: letter-spacing .5s var(--ease-out);
}
.splash__enter a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .5s var(--ease-out);
}
.splash__enter a:hover { letter-spacing: 3.5px; }
.splash__enter a:hover::after { transform: scaleX(1); transform-origin: left; }

.splash__divider { width: 1px; height: 18px; background: rgba(255, 255, 255, .55); }

/* İki grup markasının logoları — tıklanınca ilgili siteye gider */
.splash__partners {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 72px;
    opacity: 0;
    animation: fadeUp 1.3s var(--ease-out) 1.8s forwards;
}
.splash__partners a {
    position: relative;
    display: block;
    padding-bottom: 12px;
    opacity: .78;
    transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.splash__partners a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--accent-soft);
    transform: translateX(-50%);
    transition: width .45s var(--ease-out);
}
.splash__partners a:hover { opacity: 1; transform: translateY(-5px); }
.splash__partners a:hover::after { width: 100%; }

.splash__partners img {
    width: auto;
    max-width: 250px;
    max-height: 96px;
    object-fit: contain;
    /* Logolar koyu renkli olduğu için karanlık zeminde okunur hâle getirilir */
    filter: brightness(0) invert(1);
}

.splash__copy {
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    opacity: 0;
    animation: fadeUp 1.2s var(--ease-out) 2.1s forwards;
}

/* ---------- 9) Hero ---------- */
.hero {
    position: relative;
    height: 100vh;
    min-height: 620px;
    color: #fff;
    overflow: hidden;
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s var(--ease-io);
}
.hero__slide.is-active { opacity: 1; animation: kenBurns 9.5s linear forwards; }

@keyframes kenBurns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.14); }
}

.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .5) 80%),
        linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .5));
}

.hero__brand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    will-change: transform, opacity;
}
.hero__brand img {
    width: 260px;
    margin: 0 auto;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(18px);
    animation: brandIn 1.5s var(--ease-out) .3s forwards;
}
.hero__tagline {
    display: block;
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: 16px;
    text-transform: uppercase;
    opacity: 0;
    letter-spacing: 26px;
    animation: tagIn 1.8s var(--ease-out) .75s forwards;
}
.hero__slogan {
    display: block;
    margin-top: 6px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    letter-spacing: 3px;
    opacity: 0;
    animation: fadeUp 1.2s var(--ease-out) 1.25s forwards;
}

/* İnce dikey çizgi içinde aşağı akan nokta — kaydırma daveti */
.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 44px;
    width: 1px;
    height: 62px;
    margin-left: -.5px;
    background: rgba(255, 255, 255, .3);
    overflow: hidden;
    opacity: 0;
    animation: fadeUp 1.2s var(--ease-out) 1.6s forwards;
}
.hero__scroll::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 22px;
    background: #fff;
    animation: scrollDot 2.4s var(--ease-io) infinite;
}
@keyframes scrollDot {
    0%   { transform: translateY(-24px); }
    60%  { transform: translateY(62px); }
    100% { transform: translateY(62px); }
}

/* ---------- 10) İçerik bölümleri ---------- */
.section { position: relative; padding: 120px 0; }
.section--intro { padding-top: 130px; padding-bottom: 95px; }
.section--concept { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%); }

.section__title { text-align: center; margin-bottom: 58px; }

.box-intro { text-align: center; }
.box-intro h2 { margin-bottom: 26px; }
.box-intro h2 strong { font-weight: 700; }
.box-intro p { max-width: 1040px; margin: 0 auto; }

/* Mağara konsepti: geniş görsel + dar yan metin */
.concept { display: flex; gap: 46px; align-items: flex-start; }
.concept__media { flex: 1 1 auto; min-width: 0; }
.concept__media img { width: 100%; height: 620px; object-fit: cover; }
.concept__text { flex: 0 0 300px; padding-top: 8px; }
.concept__text h3 { margin-bottom: 20px; font-size: 18px; }
.concept__text p { font-size: 14px; line-height: 25px; }

/* Odalar: 3 sütun kart ızgarası */
.room-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}
.room-card { display: block; }
.room-card__media { position: relative; }
.room-card__media img {
    width: 100%;
    height: 480px;
    object-fit: cover;
}
/* Kartın üzerine gelince fotoğraf yakınlaşır, üstüne ince bir kararma iner */
.room-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35));
    opacity: 0;
    transition: opacity .6s var(--ease-out);
    pointer-events: none;
}
.room-card:hover .room-card__media img { --ms: 1.07; }
.room-card:hover .room-card__media::after { opacity: 1; }

.room-card__title {
    position: relative;
    margin-top: 22px;
    display: inline-block;
    transition: color .4s var(--ease-out);
}
.room-card__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease-out);
}
.room-card:hover .room-card__title { color: var(--accent); }
.room-card:hover .room-card__title::after { transform: scaleX(1); }

.room-card__desc { margin-top: 12px; color: var(--muted); font-size: 14px; }

/* Deneyimler: 2 sütun */
.experience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 90px 46px;
}
.experience-card__media { position: relative; display: block; }
.experience-card__media img {
    width: 100%;
    height: 560px;
    object-fit: cover;
}
.experience-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, .18);
    opacity: 0;
    transition: opacity .6s var(--ease-out);
}
.experience-card__media:hover img { --ms: 1.06; }
.experience-card__media:hover::after { opacity: 1; }

.experience-card__title { margin: 28px 0 14px; }
.experience-card__summary { max-width: 620px; color: var(--muted); }

/* ---------- 11) Galeri ---------- */
.gallery { position: relative; background: var(--dark); }
.gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }

.gallery__item {
    position: relative;
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
    overflow: hidden;
}
.gallery__item img {
    width: 100%;
    height: 78vh;
    min-height: 480px;
    object-fit: cover;
    transition: transform 8s linear;
}
.gallery__item.is-current img { transform: scale(1.07); }

.gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55));
    pointer-events: none;
}
.gallery__item figcaption {
    position: absolute;
    left: 80px;
    bottom: 62px;
    z-index: 1;
    color: #fff;
    font-size: 13px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s var(--ease-out) .2s, transform .8s var(--ease-out) .2s;
}
.gallery__item.is-current figcaption { opacity: 1; transform: none; }

.gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
    transition: border-color .4s var(--ease-out);
}
.gallery__nav::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .18);
    transform: scale(0);
    transition: transform .45s var(--ease-out);
    border-radius: 50%;
}
.gallery__nav:hover { border-color: #fff; }
.gallery__nav:hover::after { transform: scale(1); }
.gallery__nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transition: transform .4s var(--ease-out);
}
.gallery__nav--prev { left: 34px; }
.gallery__nav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.gallery__nav--prev:hover::before { transform: translate(-45%, -50%) rotate(-135deg); }
.gallery__nav--next { right: 34px; }
.gallery__nav--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.gallery__nav--next:hover::before { transform: translate(-55%, -50%) rotate(45deg); }

/* Alt orta noktalar — hangi görselde olduğunuzu gösterir */
.gallery__dots {
    position: absolute;
    left: 50%;
    bottom: 34px;
    z-index: 2;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}
.gallery__dot {
    width: 26px;
    height: 2px;
    background: rgba(255, 255, 255, .35);
    transition: background-color .45s var(--ease-out), width .45s var(--ease-out);
}
.gallery__dot.is-active { background: #fff; width: 44px; }

/* ---------- 12) İç sayfalar & detay ---------- */
.page-head {
    padding: calc(var(--header-h) + 100px) 0 64px;
    text-align: center;
}
.page-head h1 { font-size: 26px; line-height: 36px; }
.page-head p { max-width: 820px; margin: 22px auto 0; color: var(--muted); }

/* ---------- Konum / harita bloğu (iletişim sayfası) ----------
   Harita bir iframe'dir; oranı aspect-ratio ile korunur, böylece her ekran
   genişliğinde aynı kompozisyonda durur ve sayfa yüklenirken zıplama olmaz.
   Fotoğraflarda olduğu gibi köşeler keskin bırakılır; çerçeve yerine ince
   bir çizgi kullanılır. */
.map-block__head { max-width: 720px; }
.map-block__head h2 {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 3px;
}
.map-block__head p { margin-top: 22px; color: var(--muted); }

.map-block__frame {
    position: relative;
    margin-top: 34px;
    border: 1px solid var(--line);
    background: var(--bg-deep);
    aspect-ratio: 16 / 7;
    overflow: hidden;
}
.map-block__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* Harita sitenin sakin renk dünyasına yaklaşsın diye hafifçe soldurulur;
       üzerine gelindiğinde gerçek renklerine döner. */
    filter: grayscale(.55) contrast(.95);
    transition: filter .6s var(--ease-out);
}
.map-block__frame:hover iframe { filter: none; }

.map-block .btns { text-align: center; }

@media (max-width: 900px) {
    .map-block__frame { aspect-ratio: 4 / 3; margin-top: 26px; }
    .map-block__head h2 { font-size: 19px; letter-spacing: 2px; }
    /* Dokunmatik ekranda hover yok; harita baştan gerçek renklerinde dursun. */
    .map-block__frame iframe { filter: none; }
}

/* ---------- Hizmetlerimiz sayfası ----------
   Kartların kendi zemini yoktur; sitenin sade dilini bozmamak için her kart
   yalnızca üstündeki ince çizgiyle ayrılır. Üzerine gelindiğinde çizgi ve
   ikon altın tona döner. */
.amenity-group { margin-bottom: 78px; }
.amenity-group:last-of-type { margin-bottom: 0; }

.amenity-group__title {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 3px;
    margin-bottom: 34px;
}

.amenity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px 46px;
}

.amenity-card {
    padding-top: 24px;
    border-top: 1px solid var(--line);
    transition: border-color .5s var(--ease-out);
}
.amenity-card:hover { border-top-color: var(--accent); }

/* İkon satır içi SVG'dir; rengi currentColor üzerinden buradan gelir. */
.amenity-card__icon {
    display: block;
    color: var(--accent);
    margin-bottom: 16px;
    transition: transform .5s var(--ease-out), color .5s var(--ease-out);
}
.amenity-card:hover .amenity-card__icon {
    transform: translateY(-3px);
    color: var(--accent-soft);
}

.amenity-card__title {
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.amenity-card__desc {
    font-size: 14px;
    line-height: 24px;
    color: var(--muted);
}

/* Sayfa sonundaki yönlendirme bloğu */
.amenity-cta {
    margin-top: 84px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
    text-align: center;
}
.amenity-cta p { max-width: 640px; margin: 0 auto; color: var(--muted); }
.amenity-cta .btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
}

/* ---------- Anlatı sayfaları (Hikâyemiz, Mağara Konsepti) ----------
   Tek sütunlu, tipografi ağırlıklı bir okuma düzeni. Sitenin geri kalanında
   olduğu gibi kutu ya da kart yoktur; ayrımı boşluk ve ince çizgi kurar. */

/* Koyu zeminli tam genişlik görsel. data-dark taşıdığı için sol menü şeridi
   bu bölümün üzerinde beyaza döner (bkz. site.js, şerit rengi yoklaması). */
.story-media {
    position: relative;
    background: var(--dark);
    padding-bottom: 22px;
}
.story-media figure { max-height: 74vh; }
.story-media img {
    width: 100%;
    height: 74vh;
    object-fit: cover;
    display: block;
}
.story-media__caption {
    display: block;
    padding-top: 18px;
    font-size: 12.5px;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, .58);
}

.story-body { max-width: 760px; margin: 0 auto; }

/* Giriş paragrafı gövdeden puntoyla ayrılır, serif ailesini kullanır. */
.story-body__intro {
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 38px;
    color: var(--fg);
    margin-bottom: 42px;
    padding-bottom: 38px;
    border-bottom: 1px solid var(--line);
}

.story-body__text {
    font-size: 15px;
    line-height: 30px;
    color: var(--muted);
    margin-bottom: 24px;
}
.story-body__text:last-child { margin-bottom: 0; }

/* Sayfa altındaki üçlü vurgu bloğu */
.section--deep { background: var(--bg-deep); padding: 96px 0; }

.highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px 46px;
    max-width: 1100px;
    margin: 0 auto;
}

.highlight {
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.highlight__label {
    display: block;
    font-family: var(--font-display);
    font-size: 27px;
    line-height: 34px;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 12px;
}
.highlight__text {
    font-size: 14px;
    line-height: 24px;
    color: var(--muted);
}

/* ---------- Sıkça Sorulanlar ----------
   Akordeon <details>/<summary> ile kurulur; JavaScript gerekmez, klavye ve
   ekran okuyucu desteği tarayıcıdan hazır gelir. */
.faq-group { margin-bottom: 78px; }
.faq-group:last-of-type { margin-bottom: 0; }

.faq-list { max-width: 860px; }

.faq-item {
    border-top: 1px solid var(--line);
    transition: border-color .5s var(--ease-out);
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item[open], .faq-item:hover { border-top-color: var(--accent); }

/* Tarayıcının varsayılan üçgen işaretçisi kaldırılır; yerine kendi artı
   işaretimiz konur. ::-webkit-details-marker eski WebKit sürümleri içindir. */
.faq-item__question {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 22px 0;
    font-size: 14.5px;
    line-height: 24px;
    letter-spacing: .4px;
    transition: color .4s var(--ease-out);
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question:hover { color: var(--accent); }

/* Artı işareti: açıkken yatay çizgi kalır, dikey olan kaybolur (eksi olur). */
.faq-item__sign {
    position: relative;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
}
.faq-item__sign::before,
.faq-item__sign::after {
    content: "";
    position: absolute;
    background: var(--accent);
    transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.faq-item__sign::before { top: 5px; left: 0; width: 12px; height: 1px; }
.faq-item__sign::after { top: 0; left: 5px; width: 1px; height: 12px; }
.faq-item[open] .faq-item__sign::after { opacity: 0; transform: rotate(90deg); }

.faq-item__answer {
    padding: 0 40px 26px 0;
    font-size: 14px;
    line-height: 26px;
    color: var(--muted);
    animation: faqOpen .5s var(--ease-out) forwards;
}

@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Anlatı ve SSS sayfalarının dar ekran düzeni. */
@media (max-width: 1024px) {
    .highlight-grid { grid-template-columns: repeat(2, 1fr); }
    .story-media img { height: 56vh; }
    .story-body__intro { font-size: 21px; line-height: 33px; }
}

@media (max-width: 640px) {
    .highlight-grid { grid-template-columns: 1fr; }
    .story-media img { height: 46vh; }
    .story-body__intro { font-size: 19px; line-height: 30px; }
    .faq-item__answer { padding-right: 0; }
}

/* Dar ekranlarda sütun sayısı düşer. Bu blok, dosyanın en sonundaki
   1100px şerit bloğundan önce durmalıdır (bkz. CLAUDE.md, 4. tuzak). */
@media (max-width: 1024px) {
    .amenity-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 34px; }
    .amenity-group { margin-bottom: 60px; }
}

@media (max-width: 640px) {
    .amenity-grid { grid-template-columns: 1fr; gap: 30px; }
    .amenity-group__title { font-size: 19px; letter-spacing: 2px; margin-bottom: 26px; }
    .amenity-cta { margin-top: 56px; }
    .amenity-cta .btns { gap: 20px; }
}

.detail__hero { position: relative; overflow: hidden; }
.detail__hero img {
    width: 100%;
    height: 70vh;
    min-height: 420px;
    object-fit: cover;
    animation: kenBurnsStill 12s var(--ease-out) forwards;
}
@keyframes kenBurnsStill {
    from { transform: scale(1.12); }
    to   { transform: scale(1); }
}

.detail__body { display: flex; gap: 76px; padding: 84px 0; }
.detail__main { flex: 1 1 auto; }
.detail__aside { flex: 0 0 300px; }
.detail__facts { border-top: 1px solid var(--line); }
.detail__facts li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    transition: background-color .35s var(--ease-out), padding-left .35s var(--ease-out);
}
.detail__facts li:hover { background: rgba(154, 123, 79, .06); padding-left: 12px; }
.detail__facts li span:first-child { color: var(--muted); }

.detail__lead { font-size: 17px; line-height: 31px; }

/* ---------- 13) Footer ---------- */
.footer {
    position: relative;
    background: var(--surface);
    padding: 96px 0 calc(var(--booking-h) + 44px);
    text-align: center;
}
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 120px;
    height: 1px;
    background: var(--line);
    transform: translateX(-50%);
}
.footer__links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 34px;
    font-size: 13px;
    letter-spacing: 1px;
}
.footer__links a { position: relative; padding-bottom: 3px; transition: color .4s var(--ease-out); }
.footer__links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ease-out);
}
.footer__links a:hover { color: var(--accent); }
.footer__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.footer__contact { margin-top: 50px; font-size: 14px; color: var(--muted); }
.footer__contact a { transition: color .35s var(--ease-out); }
.footer__contact a:hover { color: var(--accent); }

.footer__social,
.footer__group { margin-top: 42px; }
.footer__social > span,
.footer__group > span {
    display: block;
    font-size: 11px;
    letter-spacing: 2.6px;
    color: var(--muted);
}
.footer__social nav,
.footer__group nav {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin-top: 12px;
    font-size: 13px;
}
.footer__social a,
.footer__group a { transition: color .35s var(--ease-out), transform .35s var(--ease-out); }
.footer__social a:hover,
.footer__group a:hover { color: var(--accent); transform: translateY(-2px); }

/* Yasal metin bağlantıları. Telif satırının hemen üstünde, ondan biraz daha
   belirgin durur: KVKK bakımından bu bağlantıların bulunabilir olması gerekir. */
.footer__legal { margin-top: 46px; }
.footer__legal nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    font-size: 12px;
}
.footer__legal a {
    color: var(--muted);
    transition: color .35s var(--ease-out);
}
.footer__legal a:hover { color: var(--accent); }

.footer__copy { margin-top: 26px; font-size: 11px; color: var(--muted); }

/* ---------- 14) Formlar ---------- */
.form-card {
    max-width: 760px;
    margin: 0 auto;
    background: var(--surface);
    padding: 54px;
    box-shadow: 0 20px 60px rgba(20, 17, 14, .05);
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.form-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 12px; letter-spacing: .6px; color: var(--muted); transition: color .35s var(--ease-out); }
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    height: 44px;
    padding: 0 2px;
    font: inherit;
    font-size: 15px;
    color: var(--fg);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}
.form-field textarea { height: 112px; padding-top: 10px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; }

/* Odaklanınca alttaki altın çizgi soldan çizilir */
.form-field::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease-out);
}
.form-field:focus-within::after { transform: scaleX(1); }
.form-field:focus-within label { color: var(--accent); }

.field-error { font-size: 12px; color: #a5361f; }
.form-summary { margin-bottom: 20px; font-size: 13px; color: #a5361f; }

/* Doluluk uyarısı: hata değil, bilgilendirmedir — kırmızı yerine altın çizgi. */
.form-notice {
    margin-bottom: 22px;
    padding: 14px 18px;
    background: var(--bg-deep);
    border-left: 2px solid var(--accent);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fg);
}
.form-summary ul { display: grid; gap: 4px; }

.alert-success {
    max-width: 760px;
    margin: 0 auto 30px;
    padding: 18px 24px;
    background: #efeee9;
    border-left: 2px solid var(--accent);
    font-size: 14px;
    animation: fadeUp .8s var(--ease-out) forwards;
}

/* İletişim sayfası: bilgi sütunu + form */
.contact-layout { display: grid; grid-template-columns: 340px 1fr; gap: 76px; align-items: start; }
.contact-info h3 { font-size: 16px; margin-bottom: 16px; }
.contact-info p { font-size: 14px; color: var(--muted); }
.contact-layout .form-card { max-width: none; margin: 0; }

/* ---------- 15) Yüzen kontroller ---------- */
.to-top {
    position: fixed;
    right: 30px;
    bottom: calc(var(--booking-h) + 26px);
    z-index: 45;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .5s var(--ease-out), visibility .5s var(--ease-out),
                transform .5s var(--ease-out), border-color .4s var(--ease-out);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--accent); }
.to-top::before {
    content: "";
    position: absolute;
    top: 52%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--fg);
    border-right: 1px solid var(--fg);
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: transform .4s var(--ease-out), border-color .4s var(--ease-out);
}
.to-top:hover::before { transform: translate(-50%, -75%) rotate(-45deg); border-color: var(--accent); }

/* ---------- 16) Duyarlı kurallar ---------- */
@media (max-width: 1280px) {
    .container { padding: 0 48px; }
    .booking-bar__form { gap: 18px; padding-left: 24px; }
    .booking-bar__lead { font-size: 15px; }
    .booking-field { padding: 4px 16px; min-width: 104px; }
    .booking-field::after { left: 16px; right: 16px; }
    .booking-bar__action { padding-left: 16px; gap: 14px; }
    .booking-bar__nights { display: none; }
    .gallery__item figcaption { left: 48px; }
    .concept__text { flex-basis: 260px; }
}

@media (max-width: 1024px) {
    .section { padding: 90px 0; }
    /* Alt alta dizilince öğeler tam genişliğe yayılmalı; flex-start
       hizalaması olduğu gibi kalırsa görsel içerik genişliğinde daralır. */
    .concept { flex-direction: column; align-items: stretch; }
    .concept__media img { height: 420px; }
    .concept__text { flex: 1 1 auto; }
    .room-grid { grid-template-columns: repeat(2, 1fr); }
    .room-card__media img { height: 380px; }
    .experience-grid { gap: 64px 36px; }
    .experience-card__media img { height: 420px; }
    .detail__body { flex-direction: column; gap: 44px; }
    .contact-layout { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 768px) {
    :root { --menu-w: 285px; --booking-h: auto; --header-h: 82px; --header-h-scrolled: 74px; }
    /* Dar çubukta 8 piksellik kaydırma alt kenara dayanırdı. */
    .header__brand { transform: translate(-50%, calc(-50% + 4px)); }

    .container { padding: 0 24px; }
    .section { padding: 72px 0; }
    .header__inner { padding: 0 20px; }
    .header__brand img { width: 134px; }
    /* Açık zeminli (kaydırılmış / iç sayfa) çubuk 74 piksele iner; iki
       sınıflı seçici yukarıdaki tek sınıflı kuralı ezdiği için daraltmayı
       burada ayrıca yazmak gerekir. */
    .header.is-scrolled .header__brand img,
    .site--solid .header__brand img { width: 120px; }
    .header__nav { gap: 16px; font-size: 11px; }
    /* Ortadaki logo mutlak ortalandığı için dar ekranda sağdaki bağlantılarla
       çakışıyordu; en uzunu olan REZERVASYON burada gizlenir. */
    .header__nav-reserve { display: none; }
    .menu-toggle__label { display: none; }

    .hero__brand img { width: 190px; }
    .hero__tagline { font-size: 13px; }
    .hero__scroll { height: 44px; }

    .splash__content { padding: 6vh 20px 4vh; gap: 28px; }
    .splash__brand img { width: 240px; }
    .splash__tagline { font-size: 14px; }
    .splash__slogan { font-size: 14px; }
    .splash__foot { gap: 24px; }
    .splash__partners { gap: 34px; }
    .splash__partners img { max-width: 150px; max-height: 62px; }

    .room-grid,
    .experience-grid { grid-template-columns: 1fr; gap: 46px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-card { padding: 32px 24px; }

    /* Dar ekranda ada satırlara bölünür; alanların arasındaki dikey
       çizgiler kalkar, yerini üstlerindeki yatay çizgiler alır. */
    .booking-bar { padding: 0 14px 14px; }
    .booking-bar__form {
        flex-wrap: wrap;
        padding: 18px 20px;
        gap: 14px;
    }
    .booking-bar__intro { flex: 1 0 100%; }
    .booking-bar__fields { flex: 1 0 100%; }
    .booking-field {
        padding: 4px 0;
        margin-right: 18px;
        border-left: 0;
        min-width: 96px;
    }
    .booking-field:last-child { margin-right: 0; }
    .booking-field::after { left: 0; right: 0; }
    .booking-bar__action {
        flex: 1 0 100%;
        justify-content: space-between;
        padding-left: 0;
        padding-top: 12px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }
    .booking-bar__nights { display: inline; }
    .booking-bar .btn { flex: 0 1 auto; }

    .gallery__item img { height: 54vh; min-height: 320px; }
    .gallery__item figcaption { left: 24px; bottom: 54px; }
    .gallery__nav { display: none; }
    .gallery__dots { bottom: 22px; }

    .to-top { right: 16px; bottom: 200px; width: 42px; height: 42px; }
    .footer { padding-bottom: 210px; }

    /* Küçük ekranda uzun gecikmeler bekletici olur, kısaltılır */
    .reveal, .media-reveal, .media-reveal img { transition-delay: 0ms; }
}

/* =======================================================================
   6.b) MASAÜSTÜ: SABİT SOL MENÜ ŞERİDİ
   1100 pikselden geniş ekranlarda menü açılıp kapanan bir panel değildir.
   Arka planı olmayan, sayfanın solunda sürekli duran bir şerit hâline gelir.
   Küçük ekranlarda (aşağıdaki media query'lerin dışında) eski açılır panel
   davranışı korunur, çünkü dar ekranda kalıcı şerit içeriğe yer bırakmaz.
   ======================================================================= */
/* ---------- Yasal metin sayfaları (KVKK, gizlilik, çerez) ----------
   Uzun okuma metinleridir: satır uzunluğu okunabilir bir ölçüde tutulur,
   süsleme yapılmaz. Sitenin diğer sayfalarındaki dile (ince çizgi, altın
   vurgu, serif ara başlık) sadık kalınır. */
.legal {
    max-width: 760px;   /* Yaklaşık 75-85 karakter: rahat okunan satır uzunluğu */
}
.legal__effective {
    margin-top: 18px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .5px;
}
.legal__heading {
    margin-top: 52px;
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 34px;
    font-weight: 400;
    color: var(--fg);
}
/* İlk ara başlık metnin en üstünde durur; üstündeki boşluk fazla gelir. */
.legal__heading:first-child { margin-top: 0; }

.legal p {
    margin-top: 16px;
    color: var(--muted);
    font-size: 15px;
    line-height: 28px;
}
.legal p:first-of-type { margin-top: 0; }

/* Sayfa sonundaki diğer yasal metin bağlantıları. */
.legal__related {
    margin-top: 64px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    align-items: baseline;
}
.legal__related-label {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.legal__related a {
    font-size: 14px;
    color: var(--fg);
    border-bottom: 1px solid var(--accent-soft);
    padding-bottom: 2px;
}
.legal__related a:hover { color: var(--accent); }

@media (max-width: 700px) {
    .legal__heading { margin-top: 40px; font-size: 22px; line-height: 30px; }
    .legal p { font-size: 14px; line-height: 26px; }
}

/* ---------- Çerez bildirimi ----------
   Ekranın altına yaslanan ince bir şerit. İçeriği örtmez, sayfa gezilmeye
   devam edilebilir. Alt rezervasyon çubuğu da aynı köşede durduğu için
   bildirim onun üstünde (--booking-h kadar yukarıda) konumlanır. */
.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;               /* Rezervasyon çubuğunun (80) üstünde, menünün altında */
    background: var(--dark);
    color: #efece7;
    border-top: 1px solid rgba(255, 255, 255, .12);

    /* Başlangıçta aşağıda ve saydam durur; is-visible ile yukarı süzülür. */
    transform: translateY(100%);
    opacity: 0;
    transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.cookie-notice.is-visible { transform: translateY(0); opacity: 1; }

.cookie-notice__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.cookie-notice__text {
    font-size: 13px;
    line-height: 21px;
    color: rgba(239, 236, 231, .78);
}
.cookie-notice__text a {
    color: #efece7;
    border-bottom: 1px solid var(--accent-soft);
    padding-bottom: 1px;
    white-space: nowrap;
}
.cookie-notice__text a:hover { color: var(--accent-soft); }

.cookie-notice__button {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #efece7;
    padding: 10px 26px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.cookie-notice__button:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

@media (max-width: 700px) {
    .cookie-notice__inner {
        padding: 16px 22px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .cookie-notice__button { align-self: flex-start; }
}

/* ---------- Harita onay kapısı ----------
   Harita onay verilene kadar yüklenmez; yerinde bu blok durur.
   Ölçüler .map-block__frame'den gelir, burada yalnızca içerik ortalanır. */
.map-consent { display: flex; align-items: center; justify-content: center; }

/* Harita yüklendikten sonra kapsayıcı yeniden normal çerçeveye döner. */
.map-consent.is-loaded { display: block; }

.map-consent__notice {
    max-width: 480px;
    padding: 32px;
    text-align: center;
}
.map-consent__text {
    color: var(--muted);
    font-size: 14px;
    line-height: 24px;
}
.map-consent__button { margin-top: 22px; }

.map-consent__link {
    display: inline-block;
    margin-top: 16px;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding-bottom: 2px;
}
.map-consent__link:hover { color: var(--accent); border-color: var(--accent-soft); }

@media (max-width: 700px) {
    .map-consent__notice { padding: 24px 18px; }
    .map-consent__text { font-size: 13px; line-height: 22px; }
}

/* ---------- Form onay kutusu (KVKK) ---------- */
.form-consent {
    margin-top: 26px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.form-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--accent);
    cursor: pointer;
}
.form-consent label {
    font-size: 13px;
    line-height: 22px;
    color: var(--muted);
    cursor: pointer;
}
.form-consent a {
    color: var(--fg);
    border-bottom: 1px solid var(--accent-soft);
    padding-bottom: 1px;
}
.form-consent a:hover { color: var(--accent); }


@media (min-width: 1100px) {

    /* Şerit her zaman görünür: kaydırma, panel gölgesi ve zemin yok. */
    /* Şerit ekranın tamamını kaplamaz; yalnızca menü + iletişim bloğu
       kadar yer tutar. Böylece arkasındaki zeminin rengi tek parça olur
       ve açık/koyu geçişi doğru hesaplanabilir. */
    .menu-panel {
        width: var(--rail-w);
        height: auto;
        /* Şerit üst çubuğun altına yapışmaz; ekranın dikey ortasına
           yerleşir. top: 50% + translateY(-50%) ikilisi, yüksekliği
           içeriğe göre değişen kutuyu tam ortalamanın en güvenli yolu. */
        top: 50%;
        max-height: calc(100vh - 120px);
        padding: 0;
        justify-content: center;
        background: transparent;
        box-shadow: none;
        transform: translateY(-50%);
        overflow: visible;
        color: var(--fg);
        transition: color .45s var(--ease-out), text-shadow .45s var(--ease-out);
        pointer-events: none;   /* Boş alan tıklamaları arkadaki içeriğe geçsin */
    }
    .menu-panel__foot { margin-top: 32px; padding-bottom: 4px; }
    .menu-panel a,
    .menu-panel button { pointer-events: auto; }

    /* Koyu bir görselin (hero, galeri) üzerindeyken yazılar beyaza döner.
       Hangi bölümün üzerinde olduğunu site.js hesaplar. */
    .menu-panel.is-light {
        color: #fff;
        text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
    }

    /* Sadece fotoğrafların üzerindeyken devreye giren, soldan sağa eriyen
       çok yumuşak bir gölge. Panel gibi durmaz ama açık renkli kayaların
       üzerinde yazıların okunmasını sağlar. */
    .menu-panel::before {
        content: "";
        position: absolute;
        inset: -40px -70px -50px 0;
        z-index: -1;
        background: linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, 0) 100%);
        /* Alt ve üst kenarda da eriyip kaybolsun ki keskin bir dikdörtgen
           izlenimi vermesin. */
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 78%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 78%, transparent 100%);
        opacity: 0;
        transition: opacity .5s var(--ease-out);
        pointer-events: none;
    }
    .menu-panel.is-light::before { opacity: 1; }

    /* Maddeler sayfa açılışında sırayla soldan süzülür. */
    .menu-list__item {
        opacity: 0;
        transform: translateX(-22px);
        animation: railIn .8s var(--ease-out) forwards;
        animation-delay: calc(.35s + var(--i, 0) * 60ms);
        transition: none;
    }
    @keyframes railIn { to { opacity: 1; transform: none; } }

    .menu-list__item > a,
    .menu-list__toggle { padding: 10px 30px; }

    .menu-sub a { color: currentColor; opacity: .62; }
    .menu-sub a:hover { color: var(--accent); opacity: 1; }

    .menu-panel__foot {
        color: currentColor;
        opacity: .72;
        border-top-color: currentColor;
    }
    .menu-panel__foot a:hover { color: var(--accent); opacity: 1; }

    /* Şerit kalıcı olduğu için ne açma düğmesine ne de karartma katmanına
       ihtiyaç var; içerik de artık itilmiyor. */
    .menu-toggle { display: none; }
    .menu-overlay { display: none; }

    /* Açma düğmesi kalkınca space-between sağdaki bağlantıları sola
       çekiyordu; üst çubuk bağlantıları sağa sabitlenir. */
    .header__inner { justify-content: flex-end; }

    body.is-menu-open { overflow: visible; }
    body.is-menu-open .page-shell { transform: none; }
    /* İçerik şeridin altında kalmasın: metin sütunu sağa kaydırılır.
       Hero ve galeri gibi tam genişlikli bölümler etkilenmez; şerit
       onların üzerinde yüzer (istenen görünüm bu). */
    .container {
        max-width: calc(var(--container) + var(--rail-w));
        padding-left: calc(var(--rail-w) + 40px);
        padding-right: 80px;
    }
    /* Alt rezervasyon çubuğuna kaydırma uygulanmaz: şeridin en alt öğesi
       (iletişim bilgisi) zaten çubuğun üstünde biter, çakışma yoktur.
       Kaydırılsaydı dar ekranlarda alanlar alt satıra düşerdi. */
}

/* Ekranda görünmeyen ama arama motorları ve ekran okuyucuların okuduğu metin (ör. ana sayfa H1'i). */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Para birimi seçici (üst çubuk) ---------- */
.header__currency { position: relative; }
.header__currency summary { list-style: none; cursor: pointer; padding-bottom: 3px; white-space: nowrap; }
.header__currency summary::-webkit-details-marker { display: none; }
.header__currency ul {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 96px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    color: #1d1b19;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    z-index: 50;
}
.header__currency ul a { display: block; padding: 7px 16px; }
.header__currency ul a::after { display: none; }
.header__currency ul a.is-active { font-weight: 700; }
.header__currency ul a:hover { background: #f3efe9; }
.detail__price-note { margin-top: 10px; font-size: 12px; opacity: .7; }

/* Spam tuzağı (honeypot): ekran dışında, görünmez. display:none kullanılmaz; bazı botlar onu atlar. */
.hp-field { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }