/* ============================================================
   Eflin Butik Otel — Kaleköy, Gökçeada
   Palette: warm limestone + deep Aegean sea + shutter blue + bougainvillea
   Type: Fraunces (display, editorial warmth) / Work Sans (body + UI)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --stone-50:  #FBF7EF;
  --stone-100: #F4EEE1;
  --stone-200: #E9DFCB;
  --stone-300: #D9CBAC;
  --ink:       #2A2420;
  --ink-soft:  #55483C;
  --sea-deep:  #0A3E4E;
  --sea-mid:   #146B7E;
  --sea-light: #4FA8B8;
  --sea-foam:  #DCEFEF;
  --shutter:   #2C93B8;
  --shutter-dark: #1c6f8c;
  --bloom:     #C43C6C;
  --bloom-soft:#E7A0BB;
  --olive:     #77804E;
  --gold:      #C9A961;

  --shadow-soft: 0 20px 50px -25px rgba(20,30,30,.35);
  --shadow-card: 0 12px 30px -15px rgba(20,30,30,.28);
  --radius: 6px;
  --radius-lg: 14px;

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'Work Sans', 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@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; }
}

body{
  margin:0;
  background:var(--stone-100);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
.container{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,48px); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .4em;
  text-wrap:balance;
  color:var(--ink);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sea-mid);
}
.eyebrow::before{
  content:"";
  width:28px; height:1px;
  background:var(--gold);
}

p{ margin:0 0 1em; color:var(--ink-soft); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.02em;
  padding:.95em 1.7em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--bloom);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(196,60,108,.6);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(196,60,108,.7); }
.btn-ghost{
  background:transparent;
  color:var(--stone-50);
  border-color:rgba(255,255,255,.55);
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn-dark{
  background:var(--sea-deep);
  color:var(--stone-50);
}
.btn-dark:hover{ background:var(--sea-mid); transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none !important; }

/* ---------------- Header ---------------- */
.site-header{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,48px);
  transition:background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header.is-scrolled{
  background:rgba(251,247,239,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px -18px rgba(0,0,0,.3);
  padding-top:12px; padding-bottom:12px;
}
.brand{
  display:flex; align-items:baseline; gap:.5em;
  text-decoration:none;
  font-family:var(--font-display);
  color:#fff;
  transition:color .35s ease;
}
.site-header.is-scrolled .brand{ color:var(--ink); }
.brand-name{ font-size:1.35rem; font-weight:600; letter-spacing:.01em; }
.brand-sub{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; opacity:.75; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:transparent;
  cursor:pointer;
  position:relative;
}
.nav-toggle .bar{
  position:absolute; left:12px; right:12px; height:2px;
  background:#fff; border-radius:2px;
  transition:transform .3s ease, opacity .3s ease, background-color .35s ease, top .3s ease;
}
.nav-toggle .bar:nth-child(1){ top:16px; }
.nav-toggle .bar:nth-child(2){ top:21px; }
.nav-toggle .bar:nth-child(3){ top:26px; }
.site-header.is-scrolled .nav-toggle{ border-color:rgba(42,36,32,.3); }
.site-header.is-scrolled .nav-toggle .bar{ background:var(--ink); }
.nav-toggle.is-open .bar:nth-child(2){ opacity:0; }
.nav-toggle.is-open .bar:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav-toggle.is-open .bar:nth-child(3){ top:21px; transform:rotate(-45deg); }

.main-nav{ display:flex; align-items:center; gap:2.2em; }
.main-nav a{
  text-decoration:none;
  font-size:.88rem; font-weight:500;
  color:#fff;
  position:relative;
  padding:.2em 0;
  transition:color .35s ease;
}
.site-header.is-scrolled .main-nav a{ color:var(--ink-soft); }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
  background:currentColor; transition:right .3s ease;
}
.main-nav a:hover::after{ right:0; }
.main-nav .btn{ margin-left:.4em; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,#123842 0%,var(--sea-deep) 55%,#0d2c37 100%);
  color:#fff;
}
.hero-photo{
  position:absolute; inset:0;
  background-image:url('../images/eflin24.jpeg');
  background-size:cover;
  background-position:center 30%;
  opacity:.62;
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,30,38,.35) 0%, rgba(9,35,44,.55) 45%, rgba(7,25,32,.92) 100%);
}
#wave-canvas{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:46%;
  display:block;
}
.hero-inner{
  position:relative; z-index:3;
  width:100%;
  padding:150px clamp(20px,5vw,48px) 220px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero-inner .eyebrow{ color:var(--stone-100); }
.hero-inner .eyebrow::before{ background:var(--gold); }
.hero-title{
  font-size:clamp(2.6rem, 6vw, 5rem);
  margin:.25em 0 .3em;
  max-width:15ch;
  color:#fff;
}
.hero-title em{ font-style:italic; color:var(--gold); }
.hero-lede{
  max-width:46ch;
  color:var(--sea-foam);
  font-size:1.08rem;
}
.hero-cta{ display:flex; gap:14px; margin-top:1.4em; flex-wrap:wrap; justify-content:center; }
.hero-scroll{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--sea-foam);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:.85;
}
.hero-scroll .line{ width:1px; height:34px; background:currentColor; overflow:hidden; position:relative; }
.hero-scroll .line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--gold);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ top:-100%; } 50%{ top:0; } 100%{ top:100%; }
}

/* ---------------- Sections generic ---------------- */
section{ position:relative; }
.section-pad{ padding:110px 0; }
.section-head{ max-width:640px; margin:0 0 3em; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }

/* ---------------- About ---------------- */
.about{ background:var(--stone-100); }
.about-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,70px);
  align-items:center;
}
.about-collage{ position:relative; }
.about-collage img{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.collage-main{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.collage-float{
  position:absolute;
  width:52%; aspect-ratio:4/3; object-fit:cover;
  right:-8%; bottom:-9%;
  border:6px solid var(--stone-50);
}
.about-stats{
  display:flex; gap:2.4em;
  margin:2em 0 1.6em;
  padding-top:1.6em;
  border-top:1px solid var(--stone-300);
}
.stat b{
  display:block; font-family:var(--font-display); font-size:2rem; color:var(--sea-deep);
}
.stat span{ font-size:.8rem; color:var(--ink-soft); }

/* ---------------- Rooms ---------------- */
.rooms{ background:var(--stone-50); }
.room-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,5vw,64px);
  align-items:center;
  padding:56px 0;
  border-top:1px solid var(--stone-300);
}
.room-row:last-child{ padding-bottom:0; }
.room-row:first-of-type{ border-top:none; padding-top:0;}
.room-row.reverse .room-media{ order:2; }
.room-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.room-media img{ width:100%; height:100%; aspect-ratio:6/5; object-fit:cover; transition:transform .8s ease; }
.room-media:hover img{ transform:scale(1.05); }
.room-tag{
  position:absolute; top:16px; left:16px;
  background:rgba(251,247,239,.92);
  color:var(--sea-deep);
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.5em 1em; border-radius:999px;
}
.room-copy h3{ font-size:1.7rem; }
.room-amenities{
  list-style:none; padding:0; margin:1.2em 0 1.6em;
  display:grid; grid-template-columns:1fr 1fr; gap:.6em 1em;
}
.room-amenities li{
  font-size:.87rem; color:var(--ink-soft);
  display:flex; align-items:center; gap:.55em;
}
.room-amenities li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--bloom); flex:none;
}

/* ---------------- Gallery ---------------- */
.gallery{ background:var(--stone-100); }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:170px;
  gap:12px;
}
.gallery-grid button{
  border:0; padding:0; margin:0; background:none; cursor:zoom-in;
  border-radius:var(--radius); overflow:hidden; position:relative;
}
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease, filter .6s ease; }
.gallery-grid button:hover img{ transform:scale(1.08); }
.gallery-grid button::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(10,30,38,.55) 100%);
  opacity:0; transition:opacity .4s ease;
}
.gallery-grid button:hover::after{ opacity:1; }
.g-span-2{ grid-column:span 2; }
.g-span-2-row{ grid-row:span 2; }

.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(8,20,26,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:min(90vw,1000px); max-height:82vh; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:50%; width:46px; height:46px; cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; transition:background-color .25s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(255,255,255,.2); }
.lightbox-close{ top:24px; right:24px; }
.lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }

/* ---------------- Amenities ---------------- */
.amenities{
  background:linear-gradient(180deg,var(--sea-deep), #0c3542);
  color:var(--stone-50);
}
.amenities .section-head h2{ color:#fff; }
.amenities .section-head p{ color:var(--sea-foam); }
.amenities .eyebrow{ color:var(--gold); }
.amenities .eyebrow::before{ background:var(--gold); }
.amenity-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4px;
  background:rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.amenity-card{
  background:#0e3d4c;
  padding:2.2em 1.6em;
  display:flex; flex-direction:column; gap:.7em;
  transition:background-color .3s ease;
}
.amenity-card:hover{ background:#125166; }
.amenity-card svg{ width:30px; height:30px; stroke:var(--gold); }
.amenity-card h4{ color:#fff; font-size:1.02rem; margin:0; }
.amenity-card p{ color:var(--sea-foam); font-size:.86rem; margin:0; }

/* ---------------- Explore Gökçeada ---------------- */
.explore{ background:var(--stone-50); }
.explore-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.explore-card{
  background:var(--stone-100);
  border-radius:var(--radius-lg);
  padding:1.9em 1.7em;
  position:relative;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
  border:1px solid var(--stone-300);
}
.explore-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.explore-num{
  font-family:var(--font-display); font-style:italic;
  font-size:2.4rem; color:var(--stone-300);
  position:absolute; top:8px; right:18px; line-height:1;
}
.explore-dist{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.08em;
  color:var(--sea-deep); background:var(--sea-foam);
  padding:.3em .8em; border-radius:999px; margin-bottom:.9em;
}
.explore-card h4{ font-size:1.18rem; margin-bottom:.5em; }
.explore-card p{ font-size:.9rem; margin:0; }

/* ---------------- Location ---------------- */
.location{ background:var(--stone-100); }
.location-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,5vw,60px);
  align-items:stretch;
}
.location-map{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  min-height:380px;
  filter:saturate(.9);
}
.location-map iframe{ width:100%; height:100%; min-height:380px; border:0; }
.location-facts{ list-style:none; margin:1.6em 0; padding:0; display:flex; flex-direction:column; gap:1em; }
.location-facts li{ display:flex; gap:.9em; font-size:.94rem; }
.location-facts b{ color:var(--ink); }
.location-facts .ico{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--sea-foam); color:var(--sea-deep);
  display:flex; align-items:center; justify-content:center;
}

/* ---------------- Reservation ---------------- */
.reserve{
  background:linear-gradient(180deg,#0c3542, var(--sea-deep));
  color:#fff;
}
.reserve .section-head p{ color:var(--sea-foam); }
.reserve-wrap{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(24px,5vw,60px);
  align-items:flex-start;
}
.reserve-info h3{ color:#fff; font-size:1.5rem; }
.reserve-info h2{ color:#fff; }
.reserve-info p{ color:var(--sea-foam); }
.reserve-info .eyebrow{ color:var(--gold); }
.reserve-info .eyebrow::before{ background:var(--gold); }
.reserve-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.6em; }
.chip{
  font-size:.82rem; padding:.5em 1em; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  color:var(--sea-foam);
}
.reserve-card{
  background:var(--stone-50);
  color:var(--ink);
  border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,40px);
  box-shadow:var(--shadow-soft);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:.4em; margin-bottom:16px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.76rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:.95rem;
  padding:.85em 1em;
  border-radius:8px;
  border:1px solid var(--stone-300);
  background:#fff;
  color:var(--ink);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--sea-mid);
  box-shadow:0 0 0 3px rgba(20,107,126,.15);
}
.field textarea{ resize:vertical; min-height:80px; font-family:var(--font-body); }
.nights-note{
  grid-column:1/-1;
  font-size:.85rem; color:var(--sea-deep);
  background:var(--sea-foam);
  border-radius:8px; padding:.7em 1em;
  display:none;
  align-items:center; gap:.6em;
}
.nights-note.is-visible{ display:flex; }
.reserve-actions{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.form-msg{ font-size:.85rem; margin-top:10px; min-height:1.2em; }
.form-msg.ok{ color:#1a7a4c; }
.form-msg.err{ color:#b3352c; }

/* ---------------- Footer ---------------- */
.site-footer{
  background:#08262f; color:var(--sea-foam);
  padding:64px 0 28px;
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand .brand-name{ color:#fff; font-size:1.4rem; }
.footer-brand p{ color:rgba(220,239,239,.75); max-width:34ch; margin-top:1em; }
.footer-col h5{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.1em;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7em; font-size:.9rem; }
.footer-col a{ text-decoration:none; color:rgba(220,239,239,.85); transition:color .25s ease; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:.8rem; color:rgba(220,239,239,.55);
}
.socials{ display:flex; gap:12px; }
.socials a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; text-decoration:none; color:#fff;
  transition:background-color .25s ease, transform .25s ease;
}
.socials a:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }

/* ---------------- Reveal on scroll ---------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------------- WhatsApp float ---------------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:150;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
  text-decoration:none;
  animation:floatPulse 2.8s ease-in-out infinite;
}
@keyframes floatPulse{
  0%,100%{ box-shadow:0 14px 30px -10px rgba(37,211,102,.5); }
  50%{ box-shadow:0 14px 30px -6px rgba(37,211,102,.85); }
}

/* ---------------- Responsive ---------------- */
@media (max-width:980px){
  .about-grid, .location-grid, .reserve-wrap{ grid-template-columns:1fr; }
  .about-collage{ margin-bottom:2em; }
  .collage-float{ right:0; bottom:-7%; }
  .room-row{ grid-template-columns:1fr; }
  .room-row.reverse .room-media{ order:0; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .amenity-grid{ grid-template-columns:repeat(2,1fr); }
  .explore-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    background:var(--sea-deep);
    flex-direction:column; align-items:flex-start;
    padding:110px 32px 32px;
    gap:1.6em;
    transform:translateX(100%);
    transition:transform .4s ease;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ color:#fff; font-size:1.05rem; }
  .main-nav .btn{ margin-left:0; margin-top:.6em; }
  .nav-toggle{ display:block; }
  .form-grid{ grid-template-columns:1fr; }
  .explore-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
}