:root {
  --text: #222;
  --muted: #6b6b6b;
  --nav-bg: #dfeaee;
  --top-bg: #f3f4f6;
  --gray-bg: #f8f8f8;
  --accent: #7fa3b1;
  --navy: #062e47;
  --ph: #e4e4e4;
  --serif: "Lora", Georgia, serif;
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--sans); color: var(--text); background: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* Görsel yer tutucu */
.img-ph { background: var(--ph); }
img.img-ph { display: block; width: 100%; object-fit: cover; }

/* ---------- HEADER ---------- */
.site-header { position: sticky; top: 0; z-index: 50; transition: box-shadow .3s; }
.site-header.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.08); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 112px; background: var(--top-bg);
  max-width: none; padding: 0 max(16px, calc((100% - 1230px) / 2));
}
.brand { display: flex; align-items: center; gap: 10px; color: #1d1d1d; }
.brand-logo { display: block; width: 166px; height: auto; max-width: 40vw; }
.logo-mark { width: 60px; height: 60px; }

.topbar-right { display: flex; align-items: center; gap: 16px; }
.phone { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 17px; letter-spacing: 1.5px; }
.sep { width: 1px; height: 40px; background: #ccc; }
.whatsapp { display: flex; }
/* Dil menüsü */
.lang { position: relative; font-family: var(--serif); font-size: 17px; letter-spacing: 1px; }
.lang summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang[open] summary svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 130px;
  background: #fff; border: 1px solid #ddd; box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.lang-menu a { display: block; padding: 10px 16px; font-size: 15px; }
.lang-menu a:hover { background: var(--top-bg); }
.lang-menu a.active { font-weight: 600; color: var(--accent); }

/* Hamburger (yalnızca dar ekranlarda görünür) */
.nav-toggle { display: none; width: 40px; height: 40px; position: relative; }
.nav-toggle span {
  position: absolute; left: 8px; right: 8px; height: 2px; background: #222;
  transition: transform .3s, opacity .2s;
}
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mainnav { background: var(--nav-bg); }
.mainnav-extra { display: none; }
.mainnav ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 44px; padding: 22px 16px; }
.mainnav a {
  font-family: var(--serif); font-size: 15px; letter-spacing: 1.8px;
  text-transform: uppercase; color: #333;
}
.mainnav a:hover { color: var(--accent); }

/* ---------- HERO ---------- */
.hero { position: relative; height: 606px; overflow: hidden; color: #e9e2d6; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.slide.active { opacity: 1; }
.slide-bg {
  position: absolute; inset: 0;
  background: url("../images/anasayfa/2.jpg") center / cover no-repeat, linear-gradient(180deg, #1f3566 0%, #2a3a6e 40%, #6b2230 75%, #5c1426 100%);
}
/* Tek sanatçı slaytları: metin görselin içinde olduğundan HTML metni gizlenir */
.slide-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 80%; }
.has-art .slide-content { display: none; }
.slide-content { position: relative; height: 100%; max-width: 1880px; margin: 0 auto; }

.slide-headline { display: flex; flex-direction: column; align-items: center; text-align: center; }
.eyebrow { font-family: var(--display); font-size: 40px; letter-spacing: 10px; }
.big {
  font-family: var(--display); font-size: 120px; line-height: 1; letter-spacing: 4px;
  background: linear-gradient(180deg, #f2ebdf, #a99a85);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { font-family: var(--serif); font-size: 19px; letter-spacing: 4px; margin-top: 10px; }

.artists { display: flex; align-items: center; justify-content: center; gap: 48px; }
.artist { display: flex; flex-direction: column; align-items: center; }
.artist .date { font-size: 26px; letter-spacing: 5px; }
.artist .name { font-family: var(--display); font-size: 90px; letter-spacing: 4px; line-height: 1.1; color: #e9e1d4; }
.artists .divider { width: 2px; height: 100px; background: rgba(233,226,214,.6); align-self: flex-end; margin-bottom: 10px; }

/* Tüm sanatçılar slaytı */
.slide-all .slide-headline { padding-top: 50px; }
.slide-all .artists { margin-top: 50px; }

/* Tek sanatçı slaytı */
.slide-single .slide-headline { position: absolute; left: 6%; top: 55px; align-items: center; }
.slide-single .artists { position: absolute; left: 42%; top: 260px; }
.slide-single .artist .name { font-size: 120px; }

.dots { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.dot { width: 8px; height: 8px; border-radius: 10px; background: rgba(255,255,255,.5); transition: width .3s; }
.dot.active { width: 26px; background: #b9cdd5; border: 1px solid #fff; }

/* ---------- BOOKING ---------- */
.booking { position: relative; margin-top: -124px; z-index: 5; max-width: 1305px; }
.booking-tabs { display: flex; }
.tab { padding: 12px 18px; font-size: 17px; background: #f2f2f2; color: #999; border: 1px solid #ddd; }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.booking-form {
  display: flex; align-items: flex-end; justify-content: center; gap: 34px;
  background: #fff; border: 1px solid #ddd; padding: 46px 24px 36px;
}
.booking-form label { display: flex; flex-direction: column; gap: 4px; font-size: 16px; color: #555; }
.field { display: flex; align-items: center; gap: 10px; width: 262px; height: 40px; padding: 0 10px; border: 1px solid #ddd; color: #555; }
.field input { border: 0; outline: 0; font: inherit; font-size: 14px; color: #444; width: 100%; }
.btn-search { min-width: 122px; height: 53px; padding: 0 22px; background: var(--accent); color: #fff; font-size: 16px; letter-spacing: .5px; }

/* WhatsApp rezervasyon butonu */
.btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 24px; background: #25d366; color: #fff;
  font-family: var(--serif); font-size: 15px; letter-spacing: .5px;
  transition: background .2s;
}
.btn-wa::before {
  content: ""; width: 18px; height: 18px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='M3 21l1.6-4.7A9 9 0 1 1 8 19.6z'/%3E%3Cpath d='M9 9.5c0 3 2.5 5.5 5.5 5.5l1-1.5-2-1-1 .8a4 4 0 0 1-2-2l.8-1-1-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-wa:hover { background: #1ebe5b; }
.room-book { margin-top: 28px; }
.mainnav-wa { display: none; }
.btn-search:hover { background: #6a8f9d; }

/* ---------- INTRO ---------- */
.intro { text-align: center; padding: 100px 16px 110px; }
/* favicon beyaz; burada koyu griye çevrilir */
.intro-icon { display: block; width: 58px; height: auto; margin: 0 auto; filter: brightness(0) invert(.15); }
.intro hr { border: 0; border-top: 1px solid #ddd; margin: 14px auto; }
.intro hr.short { width: 96px; }
.intro hr.long { width: 510px; max-width: 100%; }
.intro-kicker { font-family: var(--serif); font-size: 19px; letter-spacing: 1.5px; color: #777; }
.intro-title { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: 2.5px; margin-top: 8px; }
.intro-sub { font-family: var(--serif); font-size: 16px; letter-spacing: 2px; }

/* ---------- FEATURES ---------- */
.feature h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: 1px; }
.feature-text p { font-size: 17px; line-height: 2; color: var(--muted); margin-top: 22px; }
.feature-text .subtitle { font-family: var(--serif); font-size: 19px; line-height: 1.4; margin-top: 8px; }
h3.with-line { display: flex; align-items: center; gap: 18px; }
h3.with-line::after { content: ""; width: 104px; height: 1px; background: #333; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 207px; height: 53px; margin-top: 60px;
  border: 1px solid #999; font-family: var(--serif); font-size: 17px; color: #555;
  transition: background .2s, color .2s;
}
.btn-outline:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 2 görsel + metin */
.feature-split {
  display: grid; grid-template-columns: 1fr 460px; gap: 80px;
  background: var(--gray-bg); padding: 105px 40px 105px 37px;
}
.split-images { display: grid; grid-template-columns: 741fr 434fr; gap: 26px; }
.split-images .img-ph { height: 507px; }
.section-logo { display: block; width: 200px; height: auto; }

/* Metin + 3 dikey görsel */
.feature-triple { display: grid; grid-template-columns: 400px 1fr; gap: 44px; padding-top: 115px; padding-bottom: 115px; }
.triple-image { height: 477px; }

/* Spa */
.feature-spa { text-align: center; padding-top: 60px; padding-bottom: 110px; max-width: 1310px; }
.spa-row { display: grid; grid-template-columns: 700px 1fr; gap: 70px; align-items: center; margin-top: 90px; text-align: left; }
.spa-img { display: block; width: 100%; height: 360px; object-fit: contain; }

/* ---------- FOOTER ---------- */
.site-footer { --gold: #c9a96e; background: var(--navy); color: rgba(255,255,255,.85); }

/* Rezervasyon bandı */
.footer-band { background: #04243a; border-bottom: 1px solid rgba(201,169,110,.25); }
.footer-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 44px; padding-bottom: 44px; }
.footer-eyebrow { font-family: var(--serif); font-size: 13px; letter-spacing: 4px; color: var(--gold); }
.footer-band-title { margin-top: 8px; font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1.2; color: #fff; }
.footer-band-actions { display: flex; flex-wrap: wrap; gap: 14px; flex: 0 0 auto; }
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px;
  border: 1px solid rgba(255,255,255,.5); color: #fff; font-family: var(--serif); font-size: 15px; letter-spacing: 1px;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-line:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* Logo, menü ve iletişim */
.footer-main { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 64px; padding-bottom: 56px; }
/* Logo koyu renkli; lacivert zeminde beyaza çevrilir */
.footer-logo { display: block; width: 166px; height: auto; filter: brightness(0) invert(1); }
.footer-tagline { margin-top: 18px; font-family: var(--display); font-style: italic; font-size: 21px; color: rgba(255,255,255,.75); }
.footer-ornament { position: relative; display: block; width: 220px; height: 1px; margin: 30px 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.footer-ornament::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  background: var(--gold); transform: translate(-50%, -50%) rotate(45deg);
}
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; max-width: 980px; }
.footer-nav a { font-family: var(--serif); font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; color: #fff; transition: color .2s; }
.footer-nav a:hover { color: var(--gold); }

.footer-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 100%; max-width: 1000px; margin-top: 52px; padding-top: 44px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-contact li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 15px; line-height: 1.6; }
.footer-contact svg { width: 22px; height: 22px; margin-bottom: 6px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; }
.footer-label { font-family: var(--serif); font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); }
.footer-contact a { color: #fff; }
.footer-contact a:hover { color: var(--gold); }

/* Alt satır */
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; font-size: 14px; color: rgba(255,255,255,.6); }
.footer-lang { display: flex; gap: 18px; }
.footer-lang a { color: rgba(255,255,255,.6); }
.footer-lang a.active, .footer-lang a:hover { color: #fff; }

/* ---------- ODA SAYFASI ---------- */
.mainnav a.active { font-weight: 600; color: #222; }

.page-hero { position: relative; height: 460px; background: #cfcfcf; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); }
.page-hero-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding-bottom: 30px; }
.page-hero-sub { font-family: var(--serif); font-size: 19px; }
.page-hero h1 { font-family: var(--serif); font-weight: 600; font-size: 40px; letter-spacing: 1px; }

.room-tabs { display: grid; grid-template-columns: repeat(6, 1fr); max-width: 1440px; margin-top: 43px; padding: 0; }
.room-tabs a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 53px; padding: 0 8px; background: #f7f7f7; border-right: 1px solid #e5e5e5;
  font-family: var(--serif); font-size: 17px; color: #999;
}
.room-tabs a:last-child { border-right: 0; }
.room-tabs a.active { background: var(--nav-bg); color: #222; }
.room-tabs a:hover { color: #222; }

.room-detail { max-width: 782px; margin: 0 auto; padding: 0 16px 30px; border-top: 1px solid #e5e5e5; margin-top: 30px; padding-top: 36px; }
.room-title { font-family: var(--serif); font-weight: 400; font-size: 15px; letter-spacing: .5px; margin-bottom: 16px; }

.room-carousel { overflow: hidden; }
.carousel-track { display: flex; gap: 15px; }
.carousel-item { position: relative; flex: 0 0 58%; height: 261px; cursor: pointer; }
.carousel-item.active::after { content: ""; position: absolute; inset: 9px; border: 1px solid #fff; }
.room-grid { display: grid; grid-template-columns: 431fr 304fr; grid-template-rows: 118px 118px; gap: 15px; margin-bottom: 20px; }
.room-grid .big { grid-row: span 2; }
.framed { position: relative; }
.framed::after { content: ""; position: absolute; inset: 8px; border: 1px solid #fff; }

.carousel-dots { display: flex; justify-content: center; gap: 4px; margin: 16px 0 14px; }
.carousel-dots .dot { width: 5px; height: 5px; border-radius: 5px; background: #ccc; transition: width .3s; }
.carousel-dots .dot.active { width: 15px; background: #8aa6b2; }

.room-text p { font-size: 12px; line-height: 1.7; color: #6d6450; margin-bottom: 20px; }
.room-text .room-note { font-size: 8px; color: #8a6d4d; }
.room-info { display: flex; align-items: center; gap: 10px; border: 1px solid #ddd; font-size: 11px; color: #555; }
.room-info-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 24px; background: #f2f2f2; color: #7bbf8a; }

.room-features { background: var(--gray-bg); margin-top: 30px; padding: 60px 16px 60px; }
.room-features-inner { max-width: 760px; margin: 0 auto; }
.room-features h3, .other-rooms h3 { font-family: var(--serif); font-weight: 400; font-size: 14px; letter-spacing: 1px; margin-bottom: 18px; }
.highlight-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 15px; }
.highlight {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  height: 80px; padding: 0 6px; background: #fff; border: 1px solid #ddd; color: #555; min-width: 0;
}
.highlight span { font-size: 9px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amenities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.amenities li {
  position: relative; padding-left: 16px; margin-bottom: 14px; font-size: 10px; color: #666;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amenities li::before {
  content: ""; position: absolute; left: 2px; top: 2px; width: 7px; height: 4px;
  border-left: 1px solid #555; border-bottom: 1px solid #555; transform: rotate(-45deg);
}

.other-rooms { max-width: 782px; margin: 0 auto; padding: 60px 16px 80px; }
.other-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.other-card .img-ph { height: 216px; }
.other-card span { display: block; margin-top: 12px; font-family: var(--serif); font-size: 10px; color: #555; }
.other-card:hover span { color: #000; }

/* ---------- LEZZET SAYFASI ---------- */
.room-tabs.compact { display: flex; justify-content: center; }
.room-tabs.compact a { flex: 0 0 auto; min-width: 140px; padding: 0 12px; font-size: 14px; }

.dining-intro { max-width: 900px; margin: 30px auto 0; padding: 40px 16px 80px; border-top: 1px solid #e5e5e5; text-align: center; }
.dining-intro p { font-family: var(--serif); font-size: 15px; color: #6d6450; margin-bottom: 26px; }

.venue { padding: 60px 16px; }
.venue-gray { background: var(--gray-bg); }
.tone-cool .venue-gray { background: #eff2f3; }
.venue h3 { font-family: var(--serif); font-weight: 400; font-size: 17px; letter-spacing: .5px; }
.venue-sub { font-family: var(--serif); font-size: 14px; color: #6f8a96; margin-top: 2px; }
.venue p:not(.venue-sub) { font-size: 12px; line-height: 1.8; color: #6b6b6b; }

.venue-row { max-width: 782px; margin: 0 auto; }
.venue-row .venue-images { display: grid; gap: 15px; margin: 14px 0 14px; }
.venue-row .img-ph { height: 250px; }
.venue-row .venue-images.tall { margin-bottom: 30px; }
.venue-row .venue-images.tall .img-ph { height: 312px; }
.venue-paras p + p { margin-top: 18px; }

.venue-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.venue-list li { position: relative; padding-left: 18px; margin-bottom: 9px; font-size: 11px; color: #666; }
.venue-list li::before {
  content: ""; position: absolute; left: 2px; top: 3px; width: 7px; height: 4px;
  border-left: 1px solid #555; border-bottom: 1px solid #555; transform: rotate(-45deg);
}
.venue-notes { margin-top: 46px; padding-right: 10px; line-height: 1.8; }
.venue-notes.standalone { margin-top: 24px; align-items: stretch; }
.venue-notes.standalone > div { padding: 6px 0; }
.venue-notes.standalone .room-info-icon { height: auto; }
.dining-intro.empty { padding: 0; }
.dining-intro.no-tabs { margin-top: 0; border-top: 0; padding: 26px 16px 20px; }
.dining-intro.empty.no-tabs { padding: 0; }
.dining-intro.no-tabs p { font-size: 13px; line-height: 1.4; margin-bottom: 18px; white-space: pre-line; }
.venue-side .venue-text p { white-space: pre-line; }

/* Kartlar (görsel + yanında metin) */
.venue-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 760px; margin: 0 auto; }
.venue-card { display: grid; grid-template-columns: 170px 1fr; gap: 15px; align-items: start; }
.venue-card .img-ph { height: 238px; }
.venue-card h4 { font-family: var(--serif); font-weight: 600; font-size: 13px; }
.venue-card p { margin-top: 4px; }

/* Ortalanmış başlık + metin + geniş görsel */
.venue-center { max-width: 730px; margin: 0 auto; text-align: center; }
.venue-center h3 { font-weight: 600; font-size: 14px; letter-spacing: 1px; }
.venue-center p { margin: 10px 0 30px; }
.venue-center .img-ph { height: 262px; }

/* İkonlu etiket listesi */
.venue-tags { text-align: center; }
.venue-tags h3 { font-weight: 600; font-size: 15px; }
.venue-tags ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 22px; }
.venue-tags li { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #333; }

/* Salon tabloları */
.venue-table { overflow-x: auto; margin-top: 14px; }
.venue-images + .venue-table { margin-top: 44px; }
.venue-table table { width: 100%; border-collapse: collapse; font-size: 10px; color: #777; }
.venue-table th { background: #dbe6eb; color: #555; font-weight: 600; text-align: left; padding: 8px 10px; border-right: 1px solid #fff; }
.venue-table td { padding: 8px 10px; border-right: 1px solid #eee; white-space: nowrap; }
.venue-table td:first-child { font-weight: 600; color: #555; }
.venue-table tbody tr:nth-child(odd) { background: #f7f7f7; }
.venue-table tbody tr:nth-child(even) { background: #fff; }
.venue-table + .venue-notes { margin-top: 60px; }

.venue-side { display: grid; grid-template-columns: 1fr 260px; gap: 100px; align-items: start; max-width: 1100px; margin: 0 auto; }
.venue-side .venue-images { display: grid; grid-template-columns: 437fr 258fr; gap: 15px; }
.venue-side .img-ph { height: 300px; }
.venue-side .venue-text { padding-top: 0; }
.venue-side .venue-text p:not(.venue-sub) { margin-top: 16px; }
.venue-side .venue-text p:not(.venue-sub) + p { margin-top: 22px; }

/* ---------- İLETİŞİM SAYFASI ---------- */
.contact-hero { height: 535px; }
.contact-hero::before { background: rgba(0,0,0,.05); }

.contact { display: grid; grid-template-columns: 298px 360px; gap: 77px; justify-content: center; padding-top: 16px; padding-bottom: 60px; }
.contact-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 566px; padding-top: 50px; background: #2a3646; color: #fff; text-align: center;
  font-family: var(--serif); font-size: 12px; letter-spacing: .5px;
}
.contact-panel .logo-mark { width: 44px; height: 44px; }
.contact-panel hr { width: 186px; border: 0; border-top: 1px solid rgba(255,255,255,.8); margin: 10px 0 12px; }
.contact-panel hr.short { width: 85px; margin-top: 14px; }

.contact-main h1, .contact-main h2 { font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: 1px; padding-bottom: 8px; border-bottom: 1px solid #ddd; }
.contact-info { margin: 10px 0 18px; }

/* 404 */
.not-found { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 120px 16px 130px; }
.not-found-code { font-family: var(--display); font-size: 110px; line-height: 1; color: var(--accent); }
.not-found h1 { margin-top: 10px; font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: 1.5px; }
.not-found p:not(.not-found-code) { margin-top: 14px; font-size: 16px; color: var(--muted); }
.not-found .btn-outline { margin-top: 40px; }
.contact-info li { display: flex; gap: 6px; font-family: var(--serif); font-size: 10px; line-height: 1.6; color: #333; margin-bottom: 10px; }
.contact-info svg { flex: 0 0 auto; color: #333; }
.contact-info a:hover { text-decoration: underline; }

.contact-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.contact-form label { display: flex; flex-direction: column; gap: 3px; font-family: var(--serif); font-size: 11px; color: #333; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea, .phone-field {
  width: 100%; border: 1px solid #ccc; padding: 8px; font: inherit; font-size: 11px; color: #333; background: #fff;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #ccc; }
.contact-form textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phone-field { display: flex; align-items: center; gap: 6px; }
.phone-field input { border: 0; outline: 0; font: inherit; flex: 1; min-width: 0; }
.flag { width: 14px; height: 10px; background: #e30a17; border-radius: 1px; }
.dash { color: #999; }
.contact-form label.check { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 8px; line-height: 1.6; color: #555; margin-top: 6px; }
.contact-form label.check input { width: 12px; height: 12px; margin-top: 2px; flex: 0 0 auto; }
.contact-form .invalid input, .contact-form .invalid textarea, .contact-form .invalid .phone-field { border-color: #c0392b; }
.contact-form label.check.invalid span { color: #c0392b; }
.btn-send { height: 30px; margin-top: 6px; background: #87a5b0; color: #fff; font-family: var(--serif); font-size: 10px; letter-spacing: .5px; }
.btn-send:hover { background: #6f8f9b; }
.form-error, .form-success { margin-top: 14px; padding: 10px 12px; font-size: 11px; border: 1px solid; }
.form-error { color: #c0392b; border-color: #e7b7b1; background: #fcf1ef; }
.form-success { color: #2e7d4f; border-color: #b7dcc5; background: #f0f8f3; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .feature-split { grid-template-columns: 1fr; gap: 40px; }
  .feature-triple { grid-template-columns: 1fr; }
  .spa-row { grid-template-columns: 1fr; }
  .big { font-size: 80px; }
  .artist .name, .slide-single .artist .name { font-size: 60px; }
  .slide-single .artists { left: 6%; top: 300px; }
}

/* Hamburger menü */
@media (max-width: 1024px) {
  .topbar { height: 80px; }
  .brand-logo { width: 130px; }
  .phone span, .sep, .lang { display: none; }
  .nav-toggle { display: block; }

  .mainnav {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 80px); overflow-y: auto;
    border-top: 1px solid #c9d8de; box-shadow: 0 12px 24px rgba(0,0,0,.12);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav-open .mainnav { opacity: 1; visibility: visible; transform: none; }
  .mainnav ul { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 8px 24px; }
  .mainnav li { border-bottom: 1px solid #c9d8de; }
  .mainnav a { display: block; padding: 16px 0; font-size: 15px; }

  .mainnav-extra {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px 24px; font-family: var(--serif); font-size: 15px; letter-spacing: 1px;
  }
  .mainnav a.mainnav-wa { display: flex; margin: 16px 24px 0; padding: 14px 20px; color: #fff; }
  .mainnav-lang { display: flex; gap: 6px; }
  .mainnav-lang a { padding: 6px 12px; border: 1px solid #9fb6bf; }
  .mainnav-lang a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  body.no-scroll { overflow: hidden; }
}

@media (max-width: 768px) {
  .hero { height: 520px; }
  .eyebrow { font-size: 26px; }
  .big { font-size: 52px; }
  .tagline { font-size: 12px; letter-spacing: 2px; }
  .artists { flex-direction: column; gap: 10px; }
  .artists .divider { display: none; }
  .artist .date { font-size: 16px; }
  .artist .name, .slide-single .artist .name { font-size: 36px; }
  .slide-single .slide-headline { position: static; padding-top: 40px; }
  .slide-single .artists { position: static; margin-top: 30px; }
  .slide-art { object-position: top; }
  .booking-form { flex-direction: column; align-items: stretch; }
  .field { width: 100%; }
  .btn-search { width: 100%; }
  .feature-split { padding: 60px 16px; }
  .split-images { grid-template-columns: 1fr; }
  .split-images .img-ph, .triple-image { height: 260px; }
  .spa-img { height: auto; }
  .footer-band-inner { flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 36px; padding-bottom: 36px; }
  .footer-band-title { font-size: 27px; }
  .footer-band-actions { width: 100%; flex-direction: column; }
  .footer-band-actions a { width: 100%; }
  .footer-main { padding-top: 48px; padding-bottom: 40px; }
  .footer-nav { gap: 12px 22px; }
  .footer-contact { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; padding-top: 36px; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .page-hero { height: 300px; }
  .room-tabs { grid-template-columns: repeat(2, 1fr); padding: 0 16px; }
  .room-tabs a { font-size: 13px; border-bottom: 1px solid #e5e5e5; }
  .carousel-item { flex-basis: 80%; height: 200px; }
  .room-grid { grid-template-columns: 1fr; grid-template-rows: 200px 120px 120px; }
  .room-grid .big { grid-row: auto; }
  .room-tabs.compact { flex-wrap: wrap; }
  .venue-row .venue-images, .venue-side .venue-images { grid-template-columns: 1fr !important; }
  .venue-row .img-ph, .venue-side .img-ph { height: 200px; }
  .venue-side { grid-template-columns: 1fr; gap: 24px; }
  .venue-list { grid-template-columns: 1fr; gap: 0; }
  .venue-cards { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; gap: 30px; }
  .contact-panel { min-height: 220px; padding-bottom: 30px; }
  .contact-hero { height: 300px; }
  .form-row { grid-template-columns: 1fr; }
  .venue-center .img-ph { height: 200px; }
  .highlight-grid { grid-template-columns: repeat(4, 1fr); }
  .amenities, .other-grid { grid-template-columns: repeat(2, 1fr); }
}