/* Custom responsive + interactivity styles added for the static HTML/CSS/JS
   version of the 4 Element Prestige theme (the original React/Next.js app
   swaps entire header markup between mobile/desktop at the component level;
   here we reuse the desktop markup everywhere and hide/replace the link
   rows with a slide-in drawer below the same breakpoint the original used). */

/* The original React app fades sections in on scroll via a JS
   IntersectionObserver hook (framer-motion style): elements start as
   opacity-0 with an inline `transform: translateY(...)`. We removed the
   original app's JS, and if the small reveal script in site.js fails to
   run for ANY reason (blocked script, browser quirk, cached old file,
   etc.) those sections stay permanently invisible — which is exactly the
   "only the hero shows" symptom. This plain-CSS rule is a guarantee that
   does not depend on JavaScript at all: it forces every such element
   visible immediately, no matter what happens with site.js. */
[style*="translateY"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Room/venue photo-gallery prev/next arrows: on the live site these are
   only visible on :hover of the card (Tailwind's `md:opacity-0
   md:group-hover:opacity-100`), which reads as "the gallery doesn't work"
   the moment a visitor isn't actively hovering the exact card — especially
   on first glance or on a trackpad. Force them permanently visible instead
   so the controls are always obvious and clickable. */
[aria-label="Önceki fotoğraf"],
[aria-label="Sonraki fotoğraf"] {
  opacity: 1 !important;
}

@media (max-width: 1279px) {
  .site-navbar-links-start,
  .site-navbar-links-end {
    display: none !important;
  }
}

body{
    font-family:'Inter';
}

.site-navbar.is-scrolled {
  background-color: rgba(10, 10, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.55);
}

/* Mobile navigation drawer (hand-built; the original site portals its
   drawer content in via a JS dialog library we don't have access to) */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
.mobile-drawer.open {
  visibility: visible;
  pointer-events: auto;
}
.mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-drawer.open .mobile-drawer-backdrop {
  opacity: 1;
}
.mobile-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(320px, 85vw);
  background: #0a0a0d;
  color: #fff;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 4rem 1.75rem 2rem;
  overflow-y: auto;
  box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.6);
}
.mobile-drawer.open .mobile-drawer-panel {
  transform: translateX(0);
}
.mobile-drawer-panel nav {
  display: flex;
  flex-direction: column;
}
.mobile-drawer-panel a {
  display: block;
  padding: 0.9rem 0;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-family: var(--font-cormorant, Georgia, serif);
  font-size: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s ease;
}
.mobile-drawer-panel a:hover {
  color: var(--prestige-gold-light, #dbbf6a);
}
.mobile-drawer-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* Simple back-to-top button */
.back-to-top {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 39;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 10, 13, 0.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover {
  transform: translateY(-3px);
}