/* ============================================================
   Club Aperion Beach Hotel — site.css
   El yazımı, bespoke Akdeniz kıyısı görsel kimliği.
   ============================================================ */

/* ---------- Değişkenler / Palet ---------- */
:root {
    --sea:      #0b5c63;  /* baskın marka rengi — deniz teali */
    --sea-900:  #06363b;  /* koyu deniz */
    --turq:     #15a0ae;  /* turkuaz vurgu */
    --sun:      #e7a23a;  /* güneş altını vurgu */
    --sand:     #fcfaf4;  /* arka plan — kum */
    --sand-2:   #f1efe6;  /* hafif tonlu kum panel */
    --ink:      #122b2c;  /* metin */
    --ink-soft: #3f5759;  /* yumuşak metin */
    --line:     #e3ddcf;  /* ince çizgiler (kum üstünde) */
    --white:    #ffffff;

    --maxw: 1180px;
    --header-h: 78px;   /* sabit başlık yüksekliği — mobilde küçülür */
    --gutter: clamp(1.1rem, 4vw, 2.6rem);
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 18px 50px -28px rgba(6, 54, 59, .55);
    --shadow-soft: 0 10px 30px -22px rgba(6, 54, 59, .5);

    --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --ease: cubic-bezier(.2, .7, .25, 1);
}

/* ---------- Reset / Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--sand);
    line-height: 1.65;
    font-size: 1.02rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--sea); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--turq); }

ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--ink);
}

em { font-style: italic; }

/* ---------- Erişilebilirlik ---------- */
.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;
}

.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 1000;
    background: var(--sea-900); color: #fff; padding: .75rem 1.25rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600;
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

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

/* ---------- Layout yardımcıları ---------- */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.4rem, 8vw, 6rem); position: relative; }
.section--sand { background: var(--sand-2); }
.section__cta { margin-top: 2.6rem; text-align: center; }

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--turq);
    margin-bottom: .9rem;
}

.section-head { max-width: 46rem; margin-bottom: 2.8rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-title { font-size: clamp(1.8rem, 4.2vw, 2.8rem); }
.section-lead {
    margin-top: 1rem; color: var(--ink-soft);
    font-size: 1.08rem; max-width: 42rem;
}
.section-head--center .section-lead { margin-inline: auto; }
.section-lead--light { color: rgba(255, 255, 255, .82); }

.h-block {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    margin: 2.2rem 0 1rem;
}
.h-block:first-child { margin-top: 0; }
.h-block--light { color: #fff; }

/* ---------- Butonlar ---------- */
.btn {
    --btn-bg: var(--sea);
    --btn-fg: #fff;
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--btn-bg); color: var(--btn-fg);
    font-family: var(--font-body); font-weight: 600; font-size: .98rem;
    padding: .85rem 1.5rem; border: 2px solid transparent; border-radius: 999px;
    cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    box-shadow: var(--shadow-soft); line-height: 1;
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); box-shadow: 0 16px 34px -18px rgba(6,54,59,.6); }
.btn .icon { width: 1.05em; height: 1.05em; }
.btn--sea  { --btn-bg: var(--sea); }
.btn--sea:hover { background: var(--sea-900); }
.btn--sun  { --btn-bg: var(--sun); --btn-fg: #3c2602; }
.btn--sun:hover { background: #f0b256; color: #3c2602; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--sea); border-color: var(--sea); box-shadow: none; }
.btn--ghost:hover { background: var(--sea); color: #fff; }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.6); box-shadow: none; }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn--sm { padding: .6rem 1.1rem; font-size: .9rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }

.link-arrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 600; color: var(--sea);
}
.link-arrow .icon { width: 1.05em; height: 1.05em; transition: transform .2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

.icon { width: 24px; height: 24px; flex: none; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    border-bottom: 1px solid transparent;
}
.site-header--solid {
    background: rgba(252, 250, 244, .92);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--line);
}
.site-header--over { background: transparent; }
/* JS scroll edince eklenir */
.site-header.is-scrolled {
    background: rgba(252, 250, 244, .92);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 30px -24px rgba(6,54,59,.6);
    border-bottom-color: var(--line);
}
body { padding-top: 0; }

.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--sea-900); }
.brand:hover { color: var(--sea-900); }
.brand__mark { width: 40px; height: 40px; color: var(--sea); flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-head); font-weight: 600; font-size: 1.22rem; color: var(--sea-900); }
.brand__sub { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

/* Hero üzerindeyken (scroll'dan önce) açık renk logo/menü */
.site-header--over:not(.is-scrolled) .brand__name,
.site-header--over:not(.is-scrolled) .brand__mark { color: #fff; }
.site-header--over:not(.is-scrolled) .brand__sub { color: rgba(255,255,255,.75); }
.site-header--over:not(.is-scrolled) .nav-link { color: rgba(255,255,255,.92); }
.site-header--over:not(.is-scrolled) .nav-link:hover,
.site-header--over:not(.is-scrolled) .nav-link.is-active { color: #fff; }
.site-header--over:not(.is-scrolled) .nav-link.is-active::after { background: var(--sun); }
.site-header--over:not(.is-scrolled) .nav-toggle__bars span { background: #fff; }

.site-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; }
.nav-list > li { flex: none; }
.nav-link {
    position: relative; display: inline-block; padding: .5rem .8rem;
    font-weight: 500; color: var(--ink); font-size: .97rem;
    white-space: nowrap;   /* uzun etiketler alt satıra kaymasın — tek satır kalsın */
}
.nav-link::after {
    content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .25rem;
    height: 2px; background: var(--turq); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--sea); }
.nav-list__cta { margin-left: .6rem; }

.nav-toggle {
    display: none; width: 46px; height: 46px; border: 0; background: transparent;
    cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 5px; width: 24px; }
.nav-toggle__bars span {
    height: 2.5px; width: 100%; background: var(--sea-900); border-radius: 3px;
    transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Başlık sağ grup (dil + menü) ---------- */
.site-header__actions { display: flex; align-items: center; gap: 1rem; }

/* ---------- Dil değiştirici ---------- */
.lang-switch {
    display: inline-flex; align-items: center; gap: .35rem;
    font-weight: 600; font-size: .9rem; letter-spacing: .03em;
}
.lang-switch__opt {
    color: var(--ink-soft); padding: .25rem .15rem; border-radius: 6px;
    line-height: 1; transition: color .2s var(--ease);
}
.lang-switch__opt:hover { color: var(--sea); }
.lang-switch__opt.is-active { color: var(--sea); font-weight: 700; pointer-events: none; }
.lang-switch__sep { color: var(--line); }
/* Hero üzerindeyken (scroll'dan önce) açık renkli */
.site-header--over:not(.is-scrolled) .lang-switch__opt { color: rgba(255,255,255,.8); }
.site-header--over:not(.is-scrolled) .lang-switch__opt:hover,
.site-header--over:not(.is-scrolled) .lang-switch__opt.is-active { color: #fff; }
.site-header--over:not(.is-scrolled) .lang-switch__sep { color: rgba(255,255,255,.4); }

/* ---------- Yüzen WhatsApp butonu ---------- */
.wa-float {
    position: fixed; z-index: 90;
    right: clamp(1rem, 4vw, 1.6rem);
    bottom: calc(clamp(1rem, 4vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #25d366; color: #fff;
    box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .6);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-float:hover {
    color: #fff; transform: translateY(-3px) scale(1.04);
    box-shadow: 0 18px 36px -10px rgba(37, 211, 102, .7);
}
.wa-float:active { transform: scale(.97); }
.wa-float__icon { width: 30px; height: 30px; }
/* Hafif nabız halkası (hareket azaltma tercihinde kapanır) */
.wa-float::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .55);
    animation: wa-pulse 2.4s var(--ease) infinite;
}
@keyframes wa-pulse {
    0%   { transform: scale(1);   opacity: .7; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative; isolation: isolate;
    background:
        radial-gradient(1100px 620px at 78% -8%, rgba(231,162,58,.55), rgba(231,162,58,0) 60%),
        linear-gradient(150deg, var(--sea-900) 0%, var(--sea) 48%, var(--turq) 110%);
    color: #fff; padding-top: var(--header-h); overflow: hidden;
}
.hero__glow {
    position: absolute; z-index: -1; top: -18%; right: -6%;
    width: 540px; height: 540px; border-radius: 50%;
    background: radial-gradient(circle, rgba(231,162,58,.45) 0%, rgba(231,162,58,0) 68%);
    filter: blur(6px); pointer-events: none;
}
.hero__inner {
    position: relative; z-index: 1;
    padding-block: clamp(4.5rem, 13vw, 8.5rem) clamp(6rem, 13vw, 9rem);
    max-width: 50rem;
}
.hero__eyebrow {
    display: inline-block; color: #fff;
    font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
    padding: .45rem .95rem; border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px; margin-bottom: 1.4rem;
    background: rgba(255,255,255,.06);
}
.hero__title {
    color: #fff; font-size: clamp(2.5rem, 7vw, 4.6rem);
    font-weight: 500; line-height: 1.04;
}
.hero__title em { color: var(--sun); font-weight: 600; }
.hero__lead {
    margin-top: 1.4rem; font-size: clamp(1.05rem, 2.3vw, 1.3rem);
    color: rgba(255,255,255,.9); max-width: 38rem;
}
.hero__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__wave { position: absolute; bottom: -1px; left: 0; right: 0; z-index: 2; }

/* ============================================================
   HERO SLIDER (animasyonlu, otomatik dönen)
   ============================================================ */
.hero-slider {
    position: relative; isolation: isolate; overflow: hidden;
    color: #fff; min-height: clamp(560px, 92vh, 880px);
    background: var(--sea-900);   /* yükleme öncesi zemin */
}
.hero-slider__viewport { position: absolute; inset: 0; }

/* ---- Slaytlar (üst üste, crossfade) ---- */
.hero-slide {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    padding-top: var(--header-h);
    opacity: 0; visibility: hidden;
    transition: opacity .9s var(--ease), visibility .9s var(--ease);
    z-index: 0;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* Arka plan + Ken Burns zoom */
.hero-slide__bg {
    position: absolute; inset: 0; z-index: 1;
    background-size: cover; background-position: center; transform: scale(1.06);
}
.hero-slide.is-active .hero-slide__bg { animation: kenburns 9s var(--ease) both; }

/* Varyant gradyanları (foto yoksa görünür; foto varsa inline image örter) */
.hero-slide--sea .hero-slide__bg {
    background-image:
        radial-gradient(1100px 620px at 80% -10%, rgba(231,162,58,.5), rgba(231,162,58,0) 60%),
        linear-gradient(150deg, var(--sea-900) 0%, var(--sea) 50%, var(--turq) 115%);
}
.hero-slide--turq .hero-slide__bg {
    background-image:
        radial-gradient(900px 560px at 18% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
        linear-gradient(150deg, var(--sea) 0%, var(--turq) 55%, #0b8a96 120%);
}
.hero-slide--sun .hero-slide__bg {
    background-image:
        radial-gradient(1000px 640px at 78% 6%, rgba(231,162,58,.75), rgba(231,162,58,0) 58%),
        linear-gradient(150deg, var(--sea-900) 0%, var(--sea) 42%, var(--sun) 135%);
}

/* Metin okunaklığı için koyu örtü (foto eklenince işe yarar) */
.hero-slide__veil {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(95deg, rgba(6,54,59,.55) 0%, rgba(6,54,59,.15) 55%, rgba(6,54,59,0) 100%);
}
.hero-slide__bg[style] + .hero-slide__veil { background: linear-gradient(95deg, rgba(6,54,59,.78) 0%, rgba(6,54,59,.45) 55%, rgba(6,54,59,.2) 100%); }

.hero-slider .hero__inner { position: relative; z-index: 4; padding-block: 2rem; }

/* ---- Kademeli yazı belirme (aktif slaytta) ---- */
.hero-anim { opacity: 0; transform: translateY(28px); }
.hero-slide.is-active .hero-anim {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.hero-slide.is-active .hero-anim[data-anim="1"] { transition-delay: .18s; }
.hero-slide.is-active .hero-anim[data-anim="2"] { transition-delay: .32s; }
.hero-slide.is-active .hero-anim[data-anim="3"] { transition-delay: .48s; }
.hero-slide.is-active .hero-anim[data-anim="4"] { transition-delay: .64s; }

/* ---- Yüzen dekoratif parçacıklar ---- */
.hero-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hero-fx__glow {
    position: absolute; top: -16%; right: -8%; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(231,162,58,.4) 0%, rgba(231,162,58,0) 68%);
    animation: hero-glow-pulse 7s var(--ease) infinite;
}
.hero-fx__b {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(255,255,255,.08) 70%);
    opacity: 0; will-change: transform, opacity;
}
.hero-fx__b--1 { width: 14px; height: 14px; left: 12%; bottom: 8%;  animation: hero-rise 9s  var(--ease) infinite; }
.hero-fx__b--2 { width: 9px;  height: 9px;  left: 26%; bottom: 4%;  animation: hero-rise 7s  var(--ease) infinite .8s; }
.hero-fx__b--3 { width: 20px; height: 20px; left: 58%; bottom: 6%;  animation: hero-rise 11s var(--ease) infinite 1.6s; }
.hero-fx__b--4 { width: 7px;  height: 7px;  left: 74%; bottom: 10%; animation: hero-rise 8s  var(--ease) infinite 2.4s; }
.hero-fx__b--5 { width: 12px; height: 12px; left: 88%; bottom: 3%;  animation: hero-rise 10s var(--ease) infinite 1.1s; }

@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1.2); } }
@keyframes hero-glow-pulse { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .72; transform: scale(1.12); } }
@keyframes hero-rise {
    0%   { transform: translateY(30px) scale(.8); opacity: 0; }
    15%  { opacity: .6; }
    85%  { opacity: .6; }
    100% { transform: translateY(-180px) scale(1.1); opacity: 0; }
}

/* ---- Yön okları ---- */
.hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
    width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(6px); transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.hero-nav:hover { background: rgba(255,255,255,.28); border-color: #fff; color: #fff; }
.hero-nav:active { transform: translateY(-50%) scale(.94); }
.hero-nav .icon { width: 22px; height: 22px; }
.hero-nav--prev { left: clamp(.6rem, 2.5vw, 1.6rem); }
.hero-nav--prev .icon { transform: rotate(180deg); }
.hero-nav--next { right: clamp(.6rem, 2.5vw, 1.6rem); }

/* ---- Noktalar ---- */
.hero-dots {
    position: absolute; left: 0; right: 0; bottom: clamp(2.4rem, 6vw, 3.4rem); z-index: 6;
    display: flex; justify-content: center; gap: .6rem;
}
.hero-dot {
    width: 11px; height: 11px; border-radius: 50%; cursor: pointer; padding: 0;
    background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.65);
    transition: transform .2s var(--ease), background .2s var(--ease), width .25s var(--ease);
}
.hero-dot:hover { background: rgba(255,255,255,.7); }
.hero-dot.is-active { background: var(--sun); border-color: var(--sun); width: 30px; border-radius: 999px; }

/* ---------- Dalga ayırıcı ---------- */
.wave-divider {
    line-height: 0; width: 100%; height: clamp(40px, 6vw, 72px);
    position: absolute; bottom: -1px; left: 0; right: 0; pointer-events: none;
}
.wave-divider svg { width: 100%; height: 100%; }
.wave-divider--flip { transform: scaleY(-1); top: -1px; bottom: auto; }
/* statik (akış içinde) dalga için */
.section > .wave-divider, .band-deep > .wave-divider, .hero > .wave-divider { z-index: 3; }

/* ============================================================
   RAKAM ŞERIDI
   ============================================================ */
.stats-strip { background: var(--sand); padding-block: clamp(2rem, 5vw, 3rem); border-bottom: 1px solid var(--line); }
.stats-strip__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center;
}
.stat { padding: .5rem; }
.stat__value {
    display: block; font-family: var(--font-head); font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.1rem); color: var(--sea); line-height: 1;
}
.stat__label {
    display: block; margin-top: .4rem; font-size: .82rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
}
.stats-strip__grid--light .stat__value { color: var(--sun); }
.stat--light .stat__label { color: rgba(255,255,255,.78); }

/* ============================================================
   WELCOME
   ============================================================ */
.welcome__grid {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.welcome__points { margin: 1.8rem 0; display: grid; gap: .8rem; }
.welcome__points li { display: flex; align-items: center; gap: .7rem; font-weight: 500; }
.welcome__points .icon { color: var(--turq); width: 26px; height: 26px; }
.welcome__media { position: relative; }
.welcome__badge {
    position: absolute; left: 1.2rem; bottom: 1.2rem;
    background: rgba(252,250,244,.96); backdrop-filter: blur(6px);
    border-radius: var(--radius-sm); padding: .85rem 1.1rem;
    box-shadow: var(--shadow); max-width: 16rem;
}
.welcome__badge strong { display: block; color: var(--sea); font-family: var(--font-head); font-size: 1.02rem; }
.welcome__badge span { font-size: .82rem; color: var(--ink-soft); }

/* ============================================================
   YER TUTUCULAR (placeholder)
   ============================================================ */
.ph {
    position: relative; width: 100%; aspect-ratio: 4 / 3;
    border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .6rem; color: rgba(255,255,255,.92); text-align: center;
    box-shadow: var(--shadow);
}
.ph--tall { aspect-ratio: 3 / 3.4; }
.ph::after { /* hafif güneş parıltısı */
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(420px 240px at 80% 12%, rgba(255,255,255,.22), transparent 60%);
    pointer-events: none;
}
.ph::before { /* alt dalga dokusu */
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 38%;
    background:
        radial-gradient(60% 120% at 50% 100%, rgba(255,255,255,.10), transparent 70%);
    pointer-events: none;
}
.ph__mark { color: rgba(255,255,255,.9); z-index: 1; }
.ph__caption {
    z-index: 1; font-family: var(--font-head); font-weight: 500; font-size: 1.15rem;
    letter-spacing: .01em; padding-inline: 1rem;
    text-shadow: 0 1px 10px rgba(6,54,59,.35);
}
.ph--1 { background: linear-gradient(150deg, var(--sea-900), var(--sea) 70%, var(--turq)); }
.ph--2 { background: linear-gradient(150deg, var(--sea), var(--turq)); }
.ph--3 { background: linear-gradient(150deg, var(--turq), var(--sea) 80%); }
.ph--4 { background: linear-gradient(150deg, var(--sea-900), var(--turq) 130%); }
.ph--5 { background: linear-gradient(150deg, var(--sea), var(--sea-900)); }
.ph--6 { background: linear-gradient(150deg, var(--turq), var(--sea-900) 120%); }
/* güneş aksanı sadece bazı varyantlarda */
.ph--2::after { background: radial-gradient(360px 220px at 82% 10%, rgba(231,162,58,.42), transparent 62%); }
.ph--4::after { background: radial-gradient(360px 220px at 18% 12%, rgba(231,162,58,.36), transparent 62%); }

.media-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.media-img--tall { aspect-ratio: 3 / 3.4; }

/* ============================================================
   ODALAR
   ============================================================ */
.room-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
}
.room-grid--wide { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }

.room-card {
    background: var(--white); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-soft); border: 1px solid var(--line);
    display: flex; flex-direction: column;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.room-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.room-card__media { display: block; }
.room-card__media .ph, .room-card__media .media-img { border-radius: 0; box-shadow: none; aspect-ratio: 16 / 11; }
.room-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.room-card__meta { display: flex; gap: 1.2rem; color: var(--ink-soft); font-size: .85rem; font-weight: 600; margin-bottom: .6rem; }
.room-card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.room-card__meta .icon { width: 18px; height: 18px; color: var(--turq); }
.room-card__title { font-size: 1.4rem; }
.room-card__title a { color: var(--ink); }
.room-card__title a:hover { color: var(--sea); }
.room-card__summary { margin: .6rem 0 1.2rem; color: var(--ink-soft); font-size: .96rem; flex: 1; }
.room-card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--line); }
.room-card__units { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sea); }

/* ============================================================
   KOYU DENIZ BANDI
   ============================================================ */
.band-deep {
    position: relative; color: #fff;
    background:
        radial-gradient(900px 480px at 88% 4%, rgba(231,162,58,.28), transparent 58%),
        linear-gradient(160deg, var(--sea-900), var(--sea));
    padding-block: clamp(4rem, 9vw, 6.5rem);
}
.band-deep--tight { padding-block: clamp(2.6rem, 6vw, 4rem); }
.band-deep .section-title, .band-deep .h-block { color: #fff; }
.band-deep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.band-deep__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.band-deep__list { display: grid; gap: .85rem; }
.band-deep__list li { display: flex; align-items: center; gap: .7rem; font-size: 1.05rem; }
.band-deep__list .icon { color: var(--sun); width: 22px; height: 22px; flex: none; }

.section-head__line { display: block; width: 60px; height: 3px; background: var(--sun); border-radius: 3px; margin: 1.2rem auto 0; }

/* ============================================================
   OLANAK IZGARASI
   ============================================================ */
.amenity-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
}
.amenity-grid--wide { grid-template-columns: repeat(4, 1fr); }
.amenity {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 1.5rem 1.3rem; text-align: left; display: flex; flex-direction: column; gap: .35rem;
    transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.amenity:hover { transform: translateY(-4px); border-color: var(--turq); }
.amenity__icon {
    width: 50px; height: 50px; border-radius: 14px; margin-bottom: .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--sea), var(--turq)); color: #fff;
}
.amenity__icon .icon { width: 26px; height: 26px; }
.amenity__title { font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; color: var(--ink); }
.amenity__desc { color: var(--ink-soft); font-size: .9rem; }

/* highlight band (koyu üzerinde) */
.highlight-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.highlight-band__item {
    border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius);
    padding: 1.8rem 1.6rem; background: rgba(255,255,255,.05);
}
.highlight-band__item h3 { color: #fff; font-size: 1.4rem; margin-bottom: .5rem; }
.highlight-band__item p { color: rgba(255,255,255,.82); }

/* ============================================================
   GALERI
   ============================================================ */
.gallery-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.gallery-preview__item .ph, .gallery-preview__item .media-img { aspect-ratio: 4 / 3; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.gallery-grid__item { position: relative; margin: 0; }
.gallery-grid__item--wide { grid-column: span 2; }
.gallery-grid__item .ph, .gallery-grid__item .media-img { aspect-ratio: 4 / 3.2; }
.gallery-grid__item--wide .ph, .gallery-grid__item--wide .media-img { aspect-ratio: 16 / 8.5; }
/* Sade foto ızgarası — başlık gösterilmez */
.gallery-grid__item .ph__caption { display: none; }

/* Tıklanabilir foto (lightbox tetikleyici) */
.gallery-grid__zoom {
    display: block; width: 100%; padding: 0; border: 0; background: none;
    cursor: zoom-in; position: relative; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-soft); -webkit-tap-highlight-color: transparent;
}
.gallery-grid__zoom .ph, .gallery-grid__zoom .media-img {
    border-radius: 0; box-shadow: none; display: block;
    transition: transform .5s var(--ease);
}
.gallery-grid__zoom:hover .media-img { transform: scale(1.05); }
.gallery-grid__zoom-icon {
    position: absolute; right: .7rem; bottom: .7rem; width: 40px; height: 40px;
    display: grid; place-items: center; border-radius: 50%;
    background: rgba(6, 54, 59, .55); color: #fff; backdrop-filter: blur(3px);
    opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
    pointer-events: none;
}
.gallery-grid__zoom-icon .icon { width: 20px; height: 20px; }
.gallery-grid__zoom:hover .gallery-grid__zoom-icon,
.gallery-grid__zoom:focus-visible .gallery-grid__zoom-icon { opacity: 1; transform: none; }

/* Oda detayı — fotoğraf galerisi */
.room-detail__gallery { margin-bottom: 2.5rem; }
.room-detail__gallery .gallery-grid { gap: 1rem; }

/* Galeri kategori sekmeleri (sticky) */
.cat-nav {
    position: sticky; top: var(--header-h); z-index: 20;
    background: rgba(252, 250, 244, .92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.cat-nav__inner {
    display: flex; gap: .6rem; padding-block: .8rem;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cat-nav__inner::-webkit-scrollbar { display: none; }
.cat-nav__link {
    flex: none; padding: .55rem 1.15rem; border-radius: 999px;
    background: var(--sand-2); color: var(--ink); font-weight: 600; font-size: .95rem;
    border: 1px solid var(--line); white-space: nowrap; transition: all .2s var(--ease);
}
.cat-nav__link:hover { background: var(--sea); color: #fff; border-color: var(--sea); }
.cat-section { scroll-margin-top: calc(var(--header-h) + 60px); }

/* ============================================================
   LIGHTBOX (foto büyütme)
   ============================================================ */
.lightbox {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center;
    background: rgba(6, 22, 24, .92); padding: clamp(1rem, 4vw, 3rem);
    opacity: 0; transition: opacity .25s var(--ease);
}
.lightbox.is-open { display: flex; }
.lightbox.is-visible { opacity: 1; }
.lightbox__figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; }
.lightbox__img {
    max-width: 100%; max-height: 82vh; width: auto; height: auto; margin-inline: auto;
    border-radius: var(--radius-sm); box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
    object-fit: contain;
}
.lightbox__caption { color: rgba(255,255,255,.85); text-align: center; margin-top: 1rem; font-size: .95rem; min-height: 1.2em; }
.lightbox__btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
    transition: background .2s var(--ease);
}
.lightbox__btn:hover { background: rgba(255,255,255,.25); }
.lightbox__btn svg { width: 26px; height: 26px; }
.lightbox__btn--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__btn--next { right: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__close {
    position: absolute; top: clamp(.8rem, 2vw, 1.4rem); right: clamp(.8rem, 2vw, 1.4rem);
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
    transition: background .2s var(--ease);
}
.lightbox__close:hover { background: rgba(255,255,255,.25); }
.lightbox__close svg { width: 24px; height: 24px; }
.lightbox__counter { position: absolute; top: clamp(1rem, 2vw, 1.6rem); left: clamp(1rem, 3vw, 2rem); color: rgba(255,255,255,.7); font-size: .9rem; font-weight: 600; letter-spacing: .05em; }
@media (max-width: 640px) {
    .lightbox__btn { width: 44px; height: 44px; }
    .lightbox__img { max-height: 74vh; }
}
@media (prefers-reduced-motion: reduce) {
    .lightbox, .gallery-grid__zoom .media-img, .gallery-grid__zoom-icon { transition: none; }
}

/* ============================================================
   KONUM + HARITA
   ============================================================ */
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.distance-list { display: grid; gap: .7rem; margin: 1.6rem 0; }
.distance-list li { display: flex; align-items: baseline; gap: .8rem; font-size: 1.02rem; }
.distance-list__value {
    font-family: var(--font-head); font-weight: 600; color: var(--sea);
    min-width: 4.5rem; font-size: 1.15rem;
}
.map-frame {
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    border: 1px solid var(--line); aspect-ratio: 4 / 3.2; background: var(--sand-2);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.map-frame--wide { aspect-ratio: 16 / 6; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
    position: relative; isolation: isolate; text-align: center; color: #fff;
    background: linear-gradient(150deg, var(--sea), var(--sea-900));
    padding-block: clamp(3.5rem, 8vw, 5.5rem); overflow: hidden;
}
.cta-band__glow {
    position: absolute; z-index: -1; inset: 0;
    background: radial-gradient(700px 360px at 50% -20%, rgba(231,162,58,.35), transparent 60%);
}
.cta-band__inner { max-width: 40rem; margin-inline: auto; }
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.cta-band p { margin: .9rem 0 1.8rem; color: rgba(255,255,255,.85); font-size: 1.08rem; }
.cta-band__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   İÇ SAYFA HERO
   ============================================================ */
.page-hero {
    position: relative; isolation: isolate; color: #fff; padding-top: var(--header-h); overflow: hidden;
    background:
        radial-gradient(800px 420px at 84% -10%, rgba(231,162,58,.4), transparent 58%),
        linear-gradient(150deg, var(--sea-900), var(--sea) 70%, var(--turq) 130%);
}
.page-hero__glow {
    position: absolute; z-index: -1; top: -30%; right: -4%; width: 420px; height: 420px;
    border-radius: 50%; background: radial-gradient(circle, rgba(231,162,58,.4), transparent 68%);
}
.page-hero__inner { padding-block: clamp(3rem, 8vw, 5rem) clamp(4.5rem, 9vw, 6.5rem); max-width: 46rem; }
.page-hero__title { color: #fff; font-size: clamp(2.2rem, 6vw, 3.6rem); }
.page-hero__lead { margin-top: 1.1rem; font-size: clamp(1.02rem, 2.2vw, 1.22rem); color: rgba(255,255,255,.88); max-width: 40rem; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
    padding-top: calc(var(--header-h) + 1.4rem); padding-bottom: .2rem;
    display: flex; flex-wrap: wrap; gap: .5rem; font-size: .88rem; color: var(--ink-soft);
}
.breadcrumb span[aria-current] { color: var(--ink); font-weight: 600; }

/* ============================================================
   ODA DETAY
   ============================================================ */
.room-detail__head { max-width: 48rem; margin-bottom: 1.8rem; }
.room-detail__title { font-size: clamp(2rem, 5vw, 3rem); margin-top: .4rem; }
.room-detail__summary { margin-top: .8rem; color: var(--ink-soft); font-size: 1.1rem; }
.room-detail__media { margin-bottom: 2.5rem; }
.room-detail__media .ph, .room-detail__media .media-img { aspect-ratio: 16 / 8; }
.room-detail__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.room-detail__text { color: var(--ink-soft); font-size: 1.05rem; }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: .85rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.spec-table th { font-weight: 600; color: var(--ink); width: 50%; }
.spec-table th { display: flex; align-items: center; gap: .55rem; }
.spec-table th .icon { width: 20px; height: 20px; color: var(--turq); }
.spec-table td { color: var(--ink-soft); text-align: right; }

.check-list { display: grid; gap: .65rem; }
.check-list li { display: flex; align-items: flex-start; gap: .6rem; }
.check-list .icon { color: var(--turq); width: 22px; height: 22px; flex: none; margin-top: .1rem; }
.check-list--light li { color: rgba(255,255,255,.9); }
.check-list--light .icon { color: var(--sun); }
.check-list--muted .icon { color: var(--sun); opacity: .85; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem 1.5rem; }
.feature-grid--compact { grid-template-columns: repeat(2, 1fr); }
.feature-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 50rem; margin-inline: auto; }
.feature-grid li { display: flex; align-items: center; gap: .55rem; font-weight: 500; }
.feature-grid .icon { color: var(--turq); width: 20px; height: 20px; flex: none; }

/* iletişim kartı */
.contact-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.8rem; box-shadow: var(--shadow-soft); position: sticky; top: 100px;
}
.contact-card__title { font-size: 1.3rem; }
.contact-card__text { color: var(--ink-soft); margin: .6rem 0 1.2rem; font-size: .95rem; }
.contact-card__list { display: grid; gap: .7rem; margin-bottom: 1.4rem; }
.contact-card__list li { display: flex; align-items: center; gap: .6rem; }
.contact-card__list .icon { color: var(--turq); width: 20px; height: 20px; }
.contact-card__back { margin-top: 1rem; justify-content: center; width: 100%; }

/* ============================================================
   HER ŞEY DAHIL — VENUE
   ============================================================ */
.concept-row {
    display: flex; gap: 1.4rem; align-items: center;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.6rem 1.8rem; box-shadow: var(--shadow-soft);
}
.concept-row__icon {
    width: 64px; height: 64px; flex: none; border-radius: 16px;
    background: linear-gradient(150deg, var(--sun), #f3b863); color: #4a2f02;
    display: flex; align-items: center; justify-content: center;
}
.concept-row__icon .icon { width: 32px; height: 32px; }
.concept-row p { color: var(--ink-soft); }

.venue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.venue-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-soft);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.venue-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.venue-card__media { position: relative; }
.venue-card__media .ph, .venue-card__media .media-img { aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; }
.venue-card__tag {
    position: absolute; top: .9rem; left: .9rem; z-index: 2;
    background: rgba(6,54,59,.78); color: #fff; padding: .35rem .8rem;
    border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .04em; backdrop-filter: blur(4px);
}
.venue-card__media { display: block; overflow: hidden; }
.venue-card__media .media-img { transition: transform .5s var(--ease); }
.venue-card:hover .venue-card__media .media-img { transform: scale(1.05); }
.venue-card__body { padding: 1.3rem 1.4rem 1.5rem; }
.venue-card__body h3 { font-size: 1.25rem; }
.venue-card__body h3 a { color: var(--ink); }
.venue-card__body h3 a:hover { color: var(--sea); }
.venue-card__body p { color: var(--ink-soft); margin: .5rem 0 .8rem; font-size: .95rem; }
.venue-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.venue-card__meta { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sea); }

/* ============================================================
   HAKKIMIZDA — STORY
   ============================================================ */
.story-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.story-grid__media { position: sticky; top: 100px; }
.story-grid__p { color: var(--ink-soft); margin-bottom: 1.1rem; font-size: 1.05rem; }

/* ============================================================
   İLETIŞIM
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.contact-info__list { display: grid; gap: 1.3rem; margin-top: 1.4rem; }
.contact-info__list li { display: flex; gap: 1rem; }
.contact-info__ic {
    width: 46px; height: 46px; flex: none; border-radius: 12px;
    background: linear-gradient(150deg, var(--sea), var(--turq)); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.contact-info__ic .icon { width: 22px; height: 22px; }
.contact-info__list strong { display: block; font-family: var(--font-head); color: var(--ink); margin-bottom: .15rem; }
.contact-info__list span span,
.contact-info__list a { color: var(--ink-soft); }
.contact-info__list a:hover { color: var(--turq); }

.contact-form-wrap {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 2.4rem); box-shadow: var(--shadow-soft);
}
.contact-form { display: grid; gap: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.field input, .field textarea {
    font-family: var(--font-body); font-size: 1rem; color: var(--ink);
    padding: .8rem .95rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: var(--sand); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
    width: 100%; resize: vertical;
}
.field input:focus, .field textarea:focus {
    outline: none; border-color: var(--turq);
    box-shadow: 0 0 0 3px rgba(21,160,174,.18);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #c0492f; }
.field__error { color: #c0492f; font-size: .85rem; font-weight: 500; }
.form-note { font-size: .82rem; color: var(--ink-soft); }

.alert {
    display: flex; align-items: center; gap: .6rem; padding: 1rem 1.2rem;
    border-radius: var(--radius-sm); margin-bottom: 1.4rem; font-weight: 500;
}
.alert--success { background: #e7f4ef; color: #1b6b4f; border: 1px solid #bfe3d4; }
.alert .icon { color: #1b6b4f; flex: none; }

.contact-map-section .map-frame { aspect-ratio: 16 / 6; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { position: relative; background: var(--sea-900); color: rgba(255,255,255,.8); margin-top: 0; }
.site-footer > .wave-divider { position: relative; height: clamp(40px, 6vw, 70px); }
.site-footer__main { padding-block: clamp(2.8rem, 6vw, 4rem) 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 2.5rem; }
.brand--footer .brand__name, .brand--footer { color: #fff; }
.brand--footer .brand__mark { color: var(--sun); }
.brand--footer .brand__sub { color: rgba(255,255,255,.6); }
.footer-brand__text { margin: 1.1rem 0; max-width: 24rem; color: rgba(255,255,255,.7); }
.footer-ig { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; }
.footer-ig:hover { color: var(--sun); }
.footer-social { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.footer-ig .icon { width: 22px; height: 22px; }

.footer-col__title { color: #fff; font-size: 1.15rem; margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a { color: rgba(255,255,255,.75); }
.footer-col a:hover { color: var(--sun); }
.footer-contact li { display: flex; gap: .7rem; margin-bottom: .85rem; align-items: flex-start; }
.footer-contact .icon { color: var(--turq); width: 20px; height: 20px; flex: none; margin-top: .15rem; }
.footer-cta { margin-top: 1.2rem; color: #fff; border-color: rgba(255,255,255,.4); }
.footer-cta:hover { background: rgba(255,255,255,.1); color: #fff; }

.site-footer__bar { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.3rem; }
.site-footer__bar-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.footer-note { color: var(--sun); }

/* ============================================================
   REVEAL ANIMASYONU
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE — 980px
   ============================================================ */
@media (max-width: 980px) {
    .welcome__grid, .location-grid, .band-deep__grid, .band-deep__cols,
    .room-detail__grid, .story-grid, .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .room-grid { grid-template-columns: repeat(2, 1fr); }
    .amenity-grid, .amenity-grid--wide { grid-template-columns: repeat(3, 1fr); }
    .venue-grid, .gallery-preview, .gallery-grid, .highlight-band { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid__item--wide { grid-column: span 2; }
    .contact-card, .story-grid__media { position: static; }
    .room-detail__media .ph, .room-detail__media .media-img { aspect-ratio: 16 / 9; }
}

/* ============================================================
   NAVİGASYON KIRILMA NOKTASI — 1080px
   Yatay menü yalnızca sığdığı genişlikte gösterilir; daha darda
   hamburger'a geçilir. Böylece link yazıları asla alt satıra kaymaz.
   (İçerik ızgaralarından bağımsızdır — onlar 980px'te değişir.)
   ============================================================ */
/* Dar masaüstü (1101–1240px): yatay menüyü sıkıştır ama tek satır tut */
@media (min-width: 1101px) and (max-width: 1240px) {
    .site-header__inner { gap: .8rem; }
    .site-header__actions { gap: .7rem; }
    .nav-list { gap: .1rem; }
    .nav-link { padding: .5rem .55rem; font-size: .9rem; }
    .nav-list__cta { margin-left: .35rem; }
    .btn--sm { padding: .5rem .85rem; }
}

@media (max-width: 1100px) {
    /* Mobil / dar masaüstü menü */
    .nav-toggle { display: inline-flex; }
    .nav-list {
        position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch;
        gap: 0; background: var(--sand); border-bottom: 1px solid var(--line);
        padding: .6rem var(--gutter) 1.4rem; box-shadow: var(--shadow);
        transform: translateY(-12px); opacity: 0; pointer-events: none;
        transition: opacity .25s var(--ease), transform .25s var(--ease); max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    }
    .nav-list > li { flex: 0 0 auto; }
    .nav-list.is-open { transform: none; opacity: 1; pointer-events: auto; }
    .nav-link { padding: .85rem .4rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); color: var(--ink); white-space: normal; }
    .nav-link::after { display: none; }
    .nav-link.is-active { color: var(--sea); }
    .nav-list__cta { margin: 1rem 0 0; }
    .nav-list__cta .btn { width: 100%; justify-content: center; }
    /* Hero üstü açık menü override'ını mobilde iptal et (menü kum zeminli) */
    .site-header--over:not(.is-scrolled) .nav-list .nav-link { color: var(--ink); }
}

/* ============================================================
   RESPONSIVE — 760px
   ============================================================ */
@media (max-width: 760px) {
    .stats-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
    .room-grid, .room-grid--wide,
    .amenity-grid, .amenity-grid--wide,
    .venue-grid, .gallery-preview, .highlight-band,
    .feature-grid, .feature-grid--compact, .feature-grid--two { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-grid__item--wide { grid-column: auto; }
    .gallery-grid__item .ph, .gallery-grid__item .media-img,
    .gallery-grid__item--wide .ph, .gallery-grid__item--wide .media-img { aspect-ratio: 4 / 3; }
    .hero__title { font-size: clamp(2.1rem, 9vw, 3rem); }
    .spec-table th { width: auto; }
    .site-footer__bar-inner { flex-direction: column; gap: .4rem; }
    .map-frame--wide, .contact-map-section .map-frame { aspect-ratio: 4 / 3.5; }
}

/* ============================================================
   RESPONSIVE — 620px (telefon: başlık & yerleşim sadeleşir)
   ============================================================ */
@media (max-width: 620px) {
    :root { --header-h: 64px; }

    .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }

    .site-header__inner { gap: .75rem; }
    .site-header__actions { gap: .65rem; }
    .brand__mark { width: 34px; height: 34px; }
    .brand__name { font-size: 1.08rem; }
    .brand__sub { font-size: .62rem; letter-spacing: .1em; }
    .nav-toggle { width: 42px; height: 42px; }

    /* Hero ve sayfa hero butonları tam genişlik, alt alta */
    .hero__actions, .cta-band__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn, .cta-band__actions .btn { width: 100%; justify-content: center; }

    /* Uzun kelimeler dar ekranda taşmasın */
    .hero__title, .page-hero__title, .section-title { overflow-wrap: break-word; }

    /* Hero slider mobil: kısalt, okları gizle (kaydırma + noktalar kalır) */
    .hero-slider { min-height: clamp(480px, 82vh, 640px); }
    .hero-nav { display: none; }
    .hero-dots { bottom: clamp(2rem, 8vw, 2.8rem); }
    .hero-fx__glow { width: 320px; height: 320px; }

    /* Yüzen WhatsApp butonu biraz küçülür */
    .wa-float { width: 52px; height: 52px; }
    .wa-float__icon { width: 27px; height: 27px; }

    /* Açık menü, küçük başlıkta da WhatsApp'ın üstünde kalsın */
    .nav-list { padding-bottom: 5.5rem; }
}

/* ============================================================
   RESPONSIVE — 380px (çok dar ekran)
   ============================================================ */
@media (max-width: 380px) {
    .brand__sub { display: none; }
}

/* ============================================================
   HAREKET AZALTMA TERCİHİ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .wa-float::before { display: none; }
}