/* ===================== Pendik Suit Otel — STYLE (Mobile-first, Bordo) ===================== */
/* Tasarım değişkenleri */
:root{
  --max:1280px; --pad:20px;
  --bg:#ffffff; --fg:#0e0e0e; --muted:#616b76;
  --line:#e6e8ec; --divider:#dfe3e8;
  --accent:#7a0c2e; --accent-2:#94123a; /* Bordo */
  --wa:#25D366; /* WhatsApp yeşil */
  --soft:#f7f9fc;
  --radius:18px; --radius-sm:12px;
  --shadow-xs:0 1px 6px rgba(0,0,0,.06);
  --shadow-sm:0 2px 12px rgba(0,0,0,.08);
  --shadow:0 14px 40px rgba(0,0,0,.12);
  --focus:0 0 0 3px rgba(122,12,46,.25);
  --vh:1vh; /* JS ile set: mobil 100vh fix */
}

/* Temel */
*{box-sizing:border-box}
html{scroll-behavior:smooth;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
  color:var(--fg); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none; box-shadow:var(--focus)}
hr{border:0; border-top:1px solid var(--divider); margin:26px 0}
.w-full{width:100%}

/* ===================== HEADER (stabil) ===================== */
.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.98); backdrop-filter:blur(8px) saturate(1.06);
}
.header-bar{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px;
  padding:10px var(--pad);
}
.header-sep{height:1px; background:var(--divider)}
.brand-link{display:inline-flex; align-items:center; gap:10px}
.logo{height:44px; width:auto; object-fit:contain}

/* Desktop menü */
.nav-menu{display:none}
@media (min-width:980px){
  .nav-menu{display:flex; gap:18px; align-items:center}
  .nav-menu a{
    padding:8px 10px; border-radius:10px; color:#0e0e0e; font-weight:600;
  }
  .nav-menu a:hover{background:#f4f6f9; text-decoration:none}
}

/* Tek rezervasyon (desktop) */
.header-actions{display:none}
@media (min-width:980px){
  .header-actions{display:flex; gap:10px; align-items:center}
}

/* Hamburger (mobil) */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff;
}
.nav-toggle span{display:block; width:18px; height:2px; background:#111; position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:#111}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}
@media (min-width:980px){ .nav-toggle{display:none} }

/* Mobile drawer */
.mobile-drawer[hidden]{display:none !important}
.mobile-drawer{position:fixed; inset:0; z-index:120}
.drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px)}
.drawer-panel{
  position:absolute; right:0; top:0; bottom:0; width:min(86vw,380px);
  background:#fff; border-left:1px solid var(--divider); padding:20px;
  display:flex; flex-direction:column; gap:12px;
  transform:translateX(100%); transition:transform .28s ease;
  box-shadow:-24px 0 60px rgba(0,0,0,.18);
}
.mobile-drawer.is-open .drawer-panel{transform:none}
.drawer-panel a{padding:12px 10px; border-radius:12px; color:#0e0e0e; font-weight:700}
.drawer-panel a:hover{background:#f4f6f9; text-decoration:none}
.drawer-close{
  align-self:flex-end; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:#fff;
  margin-bottom:6px; cursor:pointer;
}

/* ===================== BUTONLAR ===================== */
.btn{
  display:inline-block; border-radius:12px; font-weight:700; cursor:pointer; transition:.25s ease;
  line-height:1; white-space:nowrap;
}
.btn.accent{background:var(--accent); color:#fff; border:1px solid var(--accent); padding:12px 16px; box-shadow:var(--shadow-sm)}
.btn.accent:hover{background:var(--accent-2)}
.btn.outline{background:#fff; color:var(--accent); border:2px solid var(--accent); padding:10px 14px}
.btn.outline:hover{background:var(--accent); color:#fff}

/* ===================== HERO (Banner) ===================== */
.hero{position:relative; overflow:hidden; isolation:isolate; background:var(--soft)}
/* Blur/degrade SLAYTLARIN ÜSTÜNDE, YAZILARIN ALTINDA */
.hero::before{
  content:""; position:absolute; inset:-2px; z-index:1; pointer-events:none;
  backdrop-filter:blur(6px) saturate(1.02); -webkit-backdrop-filter:blur(6px) saturate(1.02);
  background:
    radial-gradient(55% 40% at 12% 12%, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 60%),
    radial-gradient(45% 35% at 88% 10%, rgba(255,255,255,.30) 0, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0, rgba(255,255,255,.40) 50%, rgba(255,255,255,.78) 86%, #fff 100%);
}
.hero .slider{position:relative; z-index:0; height:calc(var(--vh) * 78); min-height:440px; max-height:860px}
.slides{position:relative; width:100%; height:100%}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .9s ease}
.slide.is-active{opacity:1}
.slide img{width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.06) contrast(1.06)}
.slide.is-active img{animation:kenburns 12s ease-out both}
@keyframes kenburns{0%{transform:scale(1)}100%{transform:scale(1.08)}}

/* Katmanlama: yazılar z=2 */
.hero-caption,.hero .arrow,.hero .dots,.hero .badges,.hero .booking{position:relative; z-index:2}
.hero-caption{
  position:absolute; inset:auto 0; top:50%; transform:translateY(-50%);
  width:min(100%, var(--max)); margin:0 auto; padding:0 var(--pad);
  pointer-events:none;
}
.cap-box{
  pointer-events:auto; background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:22px 24px; border-radius:18px; box-shadow:0 22px 60px rgba(0,0,0,.14);
  max-width:780px;
}
.eyebrow{display:inline-block; font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); background:rgba(122,12,46,.12); border:1px solid rgba(122,12,46,.25);
  border-radius:999px; padding:6px 10px; margin-bottom:6px}
.display-1{font-size:clamp(24px,5.2vw,46px); line-height:1.15; margin:.3rem 0; color:#111}
.accent-underline{position:relative}
.accent-underline::after{content:""; position:absolute; left:0; right:0; bottom:0; height:10px; border-radius:12px; background:rgba(122,12,46,.25); z-index:-1}
.hero .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.hero .muted{color:#5c6672; font-size:.95rem}

/* Slider kontrolleri */
.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background:#fff;
  box-shadow:var(--shadow-xs); font-size:22px; line-height:42px; text-align:center; cursor:pointer; transition:transform .2s ease
}
.arrow:hover{transform:translateY(-50%) scale(1.06)}
.arrow.prev{left:12px} .arrow.next{right:12px}
.dots{position:absolute; left:0; right:0; bottom:12px; display:flex; gap:8px; justify-content:center}
.dots button{width:9px; height:9px; border-radius:999px; border:1px solid #111; background:#fff; opacity:.55; cursor:pointer}
.dots button[aria-selected="true"]{opacity:1; background:#111}

@media (max-width:768px){
  .cap-box{padding:16px}
  .hero .slider{height:calc(var(--vh) * 70); min-height:420px}
  .arrow{display:none} /* mobilde okları gizle */
  .dots button{width:11px; height:11px}
}

/* ===================== BADGES & BOOKING ===================== */
.badges{display:flex; gap:8px; flex-wrap:wrap; margin:18px var(--pad) 0}
.badge{display:inline-flex; align-items:center; gap:8px; font-size:.95rem; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px; box-shadow:var(--shadow-xs)}
.badge .dot{width:8px; height:8px; border-radius:999px; background:var(--accent)}

.booking{
  margin:16px var(--pad) 0; background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-sm); padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.booking label{font-size:12px; color:var(--muted); display:block; margin-bottom:6px}
.booking input,.booking select{width:100%; height:44px; border:1px solid var(--line); border-radius:12px; padding:0 12px; font:inherit; background:#fff}
.booking .act{grid-column:1/-1; display:flex; gap:10px; flex-wrap:wrap}
@media (min-width:900px){
  .booking{grid-template-columns:repeat(5,1fr)}
  .booking .act{grid-column:auto}
}

/* ===================== SECTIONS / GRID / CARDS ===================== */
.section{margin-top:clamp(24px,5vw,52px)}
.section h2{margin:0 0 8px; font-size:clamp(22px,3.2vw,30px)}
.h-underline{position:relative; display:inline-block; padding-bottom:6px}
.h-underline:after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#cfd5dd}
.section .muted{margin-top:0; color:var(--muted)}
.section + .section{border-top:1px solid var(--divider); padding-top:clamp(18px,4vw,26px)}
.grid{display:grid; gap:16px}
.cols-3{grid-template-columns:1fr}
@media (min-width:700px){ .cols-3{grid-template-columns:repeat(3,1fr)} }
.card{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; background:#fff;
  box-shadow:var(--shadow-xs); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#dfe6ef}

/* ===================== GALERİ + LIGHTBOX ===================== */
.gallery{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.card.img{padding:0; overflow:hidden; cursor:zoom-in}
.card.img img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .55s ease}
.card.img:hover img{transform:scale(1.05)}
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.78); display:none; align-items:center; justify-content:center; z-index:1000; padding:14px}
.lightbox.is-open{display:flex}
.lightbox img{max-width:92vw; max-height:90vh; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.45)}
.lightbox .lb-prev,.lightbox .lb-next{
  position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:1px solid var(--line);
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-xs)
}
.lightbox .lb-prev{left:18px} .lightbox .lb-next{right:18px}
.lightbox .lb-close{
  position:absolute; top:14px; right:14px; background:#fff; border:1px solid var(--line);
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-xs)
}

/* ===================== FOOTER ===================== */
footer.site-footer{
  background:linear-gradient(180deg,#1a1a1a 0%,#0b0b0b 100%);
  color:#fff; margin-top:58px;
}
.site-footer__topline,.site-footer__bottomline{height:1px; background:linear-gradient(90deg,transparent,#2a2a2a,transparent)}
.footer-wrap{
  display:grid; grid-template-columns:1fr; gap:28px;
  max-width:var(--max); margin-inline:auto; padding:56px var(--pad) 40px;
}
.footer-col .footer-title{margin:0 0 12px; font-size:1rem; font-weight:700; color:#fff; letter-spacing:.2px; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:6px}
.footer-text{margin:0; color:#e8e8e8; line-height:1.75}
.footer-links,.footer-contact{list-style:none; margin:0; padding:0; display:grid; gap:10px}
footer.site-footer a{color:#fff; opacity:.9; text-decoration:none; transition:opacity .2s ease, transform .2s ease, color .2s}
footer.site-footer a:hover{opacity:1; color:var(--accent); transform:translateY(-1px)}
.credit{justify-self:start; opacity:.88; transition:.2s ease}
.credit:hover{opacity:1; transform:translateY(-1px)}
.footer-meta{padding:14px var(--pad) 28px; color:#d6d6d6; text-align:center; font-size:.95rem; opacity:.9}
@media (min-width:900px){
  .footer-wrap{grid-template-columns:1.3fr 1fr 1fr auto; gap:38px 28px; padding:64px var(--pad) 44px}
  .credit{justify-self:end; align-self:end}
}

/* ===================== FLOAT CTA (telefon & WhatsApp) ===================== */
.float-cta{position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:90}
.btn-fab{
  width:50px; height:50px; display:grid; place-items:center; border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.12); transition:transform .2s ease, filter .2s ease, background .2s ease;
}
.btn-fab img{width:26px; height:26px; filter:invert(1) brightness(2)}
.float-cta a[href^="tel:"]{ background:var(--accent) }              /* telefon bordo */
.float-cta a[href^="tel:"]:hover{ background:var(--accent-2); transform:scale(1.06) }
.float-cta a[href*="wa.me"]{ background:var(--wa) }                 /* WhatsApp yeşil */
.float-cta a[href*="wa.me"]:hover{ filter:saturate(1.1); transform:scale(1.06) }

/* ===================== REVEAL & CURSOR ===================== */
.reveal{opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:none}

/* Fancy cursor (touch’ta kapalı) */
.cursor,.cursor-dot{position:fixed; left:0; top:0; pointer-events:none; z-index:200}
.cursor{
  width:28px; height:28px; border-radius:999px; mix-blend-mode:multiply;
  background:radial-gradient(circle at 30% 30%, #000 0, #000 35%, rgba(0,0,0,0) 70%);
  opacity:.18; transform:translate(-50%,-50%); transition: width .15s ease, height .15s ease, opacity .2s ease
}
.cursor.is-big{width:52px; height:52px; opacity:.25}
.cursor-dot{width:6px; height:6px; border-radius:999px; background:#000; z-index:201; transform:translate(-50%,-50%)}
@media (pointer:coarse){ .cursor,.cursor-dot{display:none} } /* mobilde kapat */