:root {
    --turuncu: #f47a1f;
    --mavi: #3b6cff;
    --lacivert: #1b2a4a;
    --gece: #121c33;
    --kagit: #ffffff;
    --zemin: #f6f7fb;
    --yazi: #1b2a4a;
    --soluk: #5c6b84;
    --cizgi: rgba(27, 42, 74, 0.1);
    --sans: "Source Sans 3", "Segoe UI", sans-serif;
    --display: "Outfit", "Source Sans 3", sans-serif;
    --el: "Great Vibes", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--zemin);
    color: var(--yazi);
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select { font: inherit; }
.yazi { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; color: var(--lacivert); }
.sarmal { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.etiket, .el-yazisi-kucuk {
    margin: 0;
    color: var(--turuncu);
    font-family: var(--el);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
}
.el-yazisi {
    margin: 0;
    font-family: var(--el);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1;
    color: #fff;
}

.serit-ust {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: 42px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 0.92rem;
    transition: opacity 0.2s ease;
}
.serit-ust .sarmal { display: flex; justify-content: space-between; gap: 16px; }
.serit-ust a { text-decoration: none; }
.serit-ust a:hover { color: #ffd7b8; }
body.kaydi .serit-ust { opacity: 0; pointer-events: none; }

.ust {
    position: fixed;
    top: 46px;
    inset-inline: 0;
    z-index: 40;
    padding: 0 16px;
    transition: top 0.2s ease;
}
body.kaydi .ust { top: 12px; }
.ust-ic {
    width: min(1160px, 100%);
    margin: 0 auto;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 12px 8px 22px;
    background: #fff;
    color: var(--lacivert);
    border-radius: 999px;
    box-shadow: 0 12px 36px rgba(18, 28, 51, 0.14);
}
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marka-isaret {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 70% 30%, var(--mavi) 0 5px, transparent 6px),
        conic-gradient(from 200deg, var(--turuncu), #ffb067, var(--turuncu));
    box-shadow: inset 0 0 0 7px #fff;
}
.marka-logo {
    display: block;
    width: min(210px, 56vw);
    height: auto;
    max-height: 92px;
    object-fit: contain;
    object-position: left center;
    background: transparent;
}
.logo-var .ust-ic { min-height: 104px; padding-top: 6px; padding-bottom: 6px; padding-left: 14px; }
.logo-var.ic main { padding-top: 168px; }
.marka strong { font-family: var(--display); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.04em; color: var(--lacivert); }
.marka em { font-style: normal; color: var(--turuncu); }
.menu { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px; }
.menu a {
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--lacivert);
    padding: 8px 7px;
    border-radius: 999px;
}
.menu a:hover, .menu a.aktif { color: var(--turuncu); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}
.btn:has(.ok) { padding: 6px 8px 6px 20px; }
.btn .ok {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--lacivert);
    font-size: 1rem;
}
.btn-turuncu, .btn-altin { background: var(--turuncu); color: #fff; }
.btn-turuncu:hover, .btn-altin:hover { background: #e06612; }
.btn-mavi { background: var(--mavi); color: #fff; }
.btn-mavi:hover { background: #2d59e6; }
.btn-koyu { background: var(--lacivert); color: #fff; }
.btn-koyu .ok, .btn-koyu:hover { color: #fff; }
.btn-koyu:hover { background: #24365e; }
.btn-kisa { min-height: 44px; padding-left: 16px; font-size: 0.95rem; }
.btn-kisa .ok { width: 28px; height: 28px; }
.menu-dugme {
    display: none;
    border: 0;
    background: var(--zemin);
    color: var(--lacivert);
    min-height: 44px;
    min-width: 44px;
    border-radius: 999px;
    font-weight: 700;
}
.ana main { padding-top: 0; }
.ic main { padding-top: 132px; }

.kahraman {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: #fff;
    background: var(--gece);
    overflow: hidden;
}
.kahraman-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.kahraman::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 18, 32, 0.72) 0%, rgba(12, 18, 32, 0.38) 58%, rgba(12, 18, 32, 0.2) 100%);
}
.kahraman-icerik { position: relative; z-index: 1; padding: 140px 0 120px; }
.kahraman h1 {
    margin: 8px 0 0;
    max-width: 12ch;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(3rem, 6.2vw, 5.4rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: #fff;
}
.kahraman h1 em {
    font-family: var(--el);
    font-style: normal;
    font-weight: 400;
    color: var(--turuncu);
    font-size: 1.18em;
    letter-spacing: 0;
}
.kahraman .ozet { max-width: 38rem; margin: 18px 0 0; color: rgba(255, 255, 255, 0.9); font-size: 1.08rem; }
.rozetler { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 22px 0 0; padding: 0; list-style: none; font-weight: 700; }
.rozetler li::before { content: ""; display: inline-block; width: 28px; height: 28px; margin-right: 8px; border-radius: 50%; vertical-align: -7px; background: #fff; box-shadow: inset 0 0 0 8px var(--turuncu); }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.arama-alani { position: relative; z-index: 3; width: min(1160px, calc(100% - 40px)); margin: -78px auto 0; }
.rezervasyon {
    display: grid;
    grid-template-columns: 1fr 1fr 0.7fr auto;
    gap: 8px;
    align-items: end;
    background: #fff;
    color: var(--yazi);
    border-radius: 28px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(18, 28, 51, 0.12);
}
.rezervasyon label { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--soluk); }
.rezervasyon input, .rezervasyon select {
    border: 0;
    background: var(--zemin);
    color: var(--lacivert);
    border-radius: 14px;
    min-height: 48px;
    padding: 0 12px;
    font-size: 1rem;
    font-weight: 600;
}
.rezervasyon button { border-radius: 999px; }
.rezervasyon-not { margin: 10px 8px 0; color: var(--soluk); font-size: 0.9rem; }

.bolum { padding: 84px 0; }
.bolum-soluk { background: #fff; }
.bolum h2 { margin: 6px 0 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.iki { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.yazi-govde p { color: var(--soluk); }
.yazi-govde a:not(.btn) { color: var(--mavi); }
.yazi-govde .btn { margin-top: 8px; }
.baslik-satir { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.kolaj { display: grid; grid-template-columns: 1.3fr 0.7fr 0.7fr; gap: 14px; align-items: stretch; }
.kolaj figure { margin: 0; }
.kolaj img { width: 100%; height: 460px; object-fit: cover; border-radius: 36px; }
.kolaj figure:nth-child(n+2) img { border-radius: 180px; height: 420px; }
.kolaj figcaption { margin-top: 8px; color: var(--soluk); font-size: 0.82rem; }

.serit-mavi { background: var(--mavi); color: #fff; }
.serit-mavi-ic { display: flex; justify-content: space-between; gap: 18px; padding: 22px 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.8rem); letter-spacing: -0.03em; }
.serit-mavi span::before { content: "✶ "; color: rgba(255, 255, 255, 0.75); }

.odalar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 28px; }
.oda-kart { background: #fff; display: flex; flex-direction: column; min-height: 100%; border-radius: 28px; box-shadow: 0 14px 40px rgba(18, 28, 51, 0.08); padding: 12px 12px 18px; }
.oda-kart-gorsel { display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: 22px; background: var(--gece); }
.oda-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.oda-kart:hover img { transform: scale(1.04); }
.harf { display: flex; align-items: flex-end; height: 100%; padding: 24px; color: var(--turuncu); font-size: 4rem; }
.oda-kart-govde { display: flex; flex-direction: column; gap: 8px; padding: 16px 8px 0; flex: 1; }
.oda-kart h2, .oda-kart h3 { margin: 0; font-size: 1.55rem; line-height: 1.15; }
.oda-kart h2 a, .oda-kart h3 a { text-decoration: none; }
.oda-kart .ozet { margin: 0; color: var(--soluk); flex: 1; }
.kart-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.fiyat { margin: 0; color: var(--mavi); font-weight: 700; }
.eski { color: var(--soluk); text-decoration: line-through; margin-left: 8px; font-weight: 500; }

.olgu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.olgu article, .olanak article, .sss details, .yan-kart {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(18, 28, 51, 0.06);
    padding: 22px;
}
.olgu h2, .olanak h3 { margin: 0 0 8px; font-size: 1.35rem; }
.olanak { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.olanak article { border-top: 4px solid var(--turuncu); }
.olanak p, .olgu p, .yazi-govde p { margin: 0 0 12px; }

.bolgeler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.bolge-kart {
    display: block;
    min-height: 150px;
    padding: 22px;
    text-decoration: none;
    background: #fff;
    color: var(--yazi);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(18, 28, 51, 0.06);
}
.bolge-kart span { color: var(--turuncu); font-family: var(--el); font-size: 1.5rem; }
.bolge-kart strong { display: block; margin-top: 8px; font-family: var(--display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; }
.bolge-kart:hover { box-shadow: 0 16px 36px rgba(18, 28, 51, 0.12); }

.sss { display: grid; gap: 10px; margin-top: 22px; }
.sss summary { cursor: pointer; font-weight: 700; }
.sss p { margin: 10px 0 0; color: var(--soluk); }

.cagri { background: var(--lacivert); color: #fff; }
.cagri .yazi, .cagri .el-yazisi-kucuk { color: #fff; }
.cagri .el-yazisi-kucuk { color: #ffc49a; }
.cagri .sarmal { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.cagri h2 { margin: 8px 0 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; color: #fff; }

.sayfa-bas {
    margin-top: -132px;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    padding: 170px 0 48px;
    color: #fff;
    background-image:
        linear-gradient(180deg, rgba(12, 18, 32, 0.45), rgba(12, 18, 32, 0.55)),
        var(--kapak);
    background-color: var(--lacivert);
    background-repeat: no-repeat;
    background-size: auto, 220%;
    background-position: center, 100% 45%;
}
.sayfa-bas h1 { margin: 8px 0 0; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; color: #fff; max-width: 18ch; }
.kirinti { margin: 0 0 8px; font-size: 0.95rem; color: var(--soluk); }
.kirinti a { color: var(--mavi); }
.sayfa-bas .kirinti, .sayfa-bas .kirinti a { color: rgba(255, 255, 255, 0.86); }
.sayfa-iki { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 36px; align-items: start; }
.giris { font-size: 1.12rem; max-width: 42rem; color: var(--soluk); }
.metin h2 { margin: 28px 0 8px; font-size: 1.7rem; line-height: 1.15; }
.metin p { color: var(--soluk); }
.metin ul { margin: 0 0 12px; padding-left: 1.1rem; color: var(--soluk); }
.metin a { color: var(--mavi); }
.foto-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.foto-ikili img { width: 100%; height: 280px; object-fit: cover; border-radius: 28px; }
.galeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.galeri a { display: block; background: var(--gece); border-radius: 24px; overflow: hidden; }
.galeri img { width: 100%; height: 220px; object-fit: cover; }
.foto-ikili figcaption { color: var(--soluk); font-size: 0.85rem; margin-top: 6px; }

.oda-detay { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 36px; margin-top: 28px; }
.yan-kart { position: sticky; top: 108px; }
.yan-kart .yazi { color: var(--mavi); }
.yan-kart dl { margin: 16px 0; }
.yan-kart div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
.yan-kart dt { color: var(--soluk); }
.yan-kart dd { margin: 0; }
.ozellikler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ozellikler li { border-radius: 14px; background: #fff; padding: 10px 12px; box-shadow: 0 6px 16px rgba(18, 28, 51, 0.05); }
.oda-galeri { margin-top: 18px; }
.oda-sahne { position: relative; background: var(--gece); border-radius: 28px; overflow: hidden; }
.oda-buyuk-bag { display: block; }
.oda-buyuk { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.oda-ok {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--lacivert);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.oda-once { left: 12px; }
.oda-sonra { right: 12px; }
.oda-sayac {
    position: absolute;
    right: 14px;
    bottom: 12px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(18, 28, 51, 0.72);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}
.oda-serit {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.oda-kucuk {
    flex: 0 0 92px;
    height: 68px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    background: var(--gece);
    cursor: pointer;
    scroll-snap-align: start;
}
.oda-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.oda-kucuk.secili { border-color: var(--turuncu); }
.oda-ilet { display: flex; flex-wrap: wrap; gap: 8px; }
.oda-ilet .btn { flex: 1 1 160px; }
.oda-swiper { margin-top: 22px; background: var(--gece); border-radius: 28px; overflow: hidden; }
.oda-swiper img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.zengin p { margin: 0 0 12px; color: var(--soluk); }

.altlik { background: var(--gece); color: rgba(255, 255, 255, 0.82); padding: 64px 0 28px; }
.altlik-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; }
.altlik h2 { margin: 0; color: #fff; font-size: 1.8rem; }
.altlik .etiket { color: #ffc49a; }
.altlik a { display: block; color: rgba(255, 255, 255, 0.78); text-decoration: none; padding: 3px 0; }
.altlik a:hover { color: #fff; }
.altlik p { margin: 8px 0; }
.telif { margin-top: 28px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.45); font-size: 0.85rem; }
.alt-sabit {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    grid-template-columns: 1fr 0.82fr 1.28fr;
    background: var(--lacivert);
    padding-bottom: env(safe-area-inset-bottom);
}
.alt-sabit a {
    text-align: center;
    text-decoration: none;
    padding: 14px 4px;
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.15;
    white-space: nowrap;
}
.alt-sabit a + a { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14); }
.alt-sabit a:last-child { background: var(--turuncu); }
.harita { width: 100%; height: 320px; border: 0; margin-top: 16px; border-radius: 24px; background: #ddd; }
.not-kutu { background: #fff; border-left: 4px solid var(--turuncu); border-radius: 16px; padding: 14px 16px; }

@media (max-width: 1100px) {
    .menu a { font-size: 0.82rem; padding: 8px 6px; }
}
@media (max-width: 980px) {
    .serit-ust { display: none; }
    .ust { top: 10px; }
    body.kaydi .ust { top: 10px; }
    .ana main { padding-top: 0; }
    .ic main { padding-top: 92px; }
    .sayfa-bas { margin-top: -92px; padding-top: 130px; }
    .logo-var.ic main { padding-top: 128px; }
    .logo-var .sayfa-bas { margin-top: -128px; padding-top: 168px; }
    .logo-var .menu { top: 116px; }
    .menu-dugme { display: inline-flex; align-items: center; justify-content: center; }
    .menu {
        display: none;
        position: absolute;
        top: 78px;
        left: 16px;
        right: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 12px;
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 16px 40px rgba(18, 28, 51, 0.16);
    }
    .menu.acik { display: flex; }
    .iki, .odalar, .olgu, .olanak, .bolgeler, .altlik-grid, .oda-detay, .foto-ikili, .ozellikler, .galeri, .sayfa-iki, .kolaj { grid-template-columns: 1fr; }
    .kolaj figure:nth-child(n+2) img, .kolaj img, .foto-ikili img { height: 240px; border-radius: 28px; }
    .rezervasyon { grid-template-columns: 1fr; }
    .rezervasyon button { min-height: 52px; }
    .kahraman { min-height: auto; align-items: flex-end; }
    .kahraman h1 { max-width: 14ch; font-size: 2.7rem; }
    .kahraman-icerik { padding: 120px 0 110px; }
    .serit-mavi-ic { flex-wrap: wrap; }
    .cagri .sarmal, .baslik-satir, .kart-alt { flex-direction: column; align-items: flex-start; }
    .yan-kart { position: static; }
    .oda-buyuk { aspect-ratio: 4/3; }
    .oda-ok { width: 40px; height: 40px; }
    .oda-ilet { flex-direction: column; }
    .oda-ilet .btn { width: 100%; }
    .alt-sabit { display: grid; }
    body { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .oda-kart-gorsel img, .ust, .serit-ust { transition: none; }
}