/* ============================================================
   Kybele Otel – responsive.css
   Tüm breakpoint'ler burada
   ============================================================ */

/* ────────────────────────────
   ≤ 1200px  Geniş tablet / küçük laptop
   ──────────────────────────── */
@media (max-width: 1200px) {
  :root { --container: 100%; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  .values-grid { grid-template-columns: repeat(2, 1fr); }

  .masonry { columns: 2; }

  .activity-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ────────────────────────────
   ≤ 1024px  Tablet
   ──────────────────────────── */
@media (max-width: 1024px) {

  /* Hero */
  .hero-frame { inset: 16px; }

  /* About grid */
  .about-grid { gap: 48px; }
  .about-img-main { height: 420px; }
  .about-badge { right: -14px; bottom: -14px; }

  /* Facility */
  .facility-grid { gap: 48px; }
  .facility-img { height: 400px; }

  /* Rooms page */
  .room-full { grid-template-columns: 1fr; }
  .room-full.flip { direction: ltr; }
  .room-full-img { min-height: 280px; }
  .room-full-info { padding: 36px 32px; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }

  /* Reservation */
  .rez-layout { grid-template-columns: 1fr; gap: 44px; }
}

/* ────────────────────────────
   ≤ 900px  Small tablet / landscape mobile
   ──────────────────────────── */
@media (max-width: 900px) {

  /* Nav – collapse to hamburger */
  .nav-menu {
    display: none;
    position: fixed; inset: 0;
    background: rgba(8,14,8,0.98);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    z-index: 1000;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a {
    font-size: 1.15rem;
    letter-spacing: 1px;
    padding: 10px 24px;
  }
  .nav-menu a::after { display: none; }

  .nav-right {
    gap: 10px;
  }
  .nav-right .lang-selector,
  .nav-right .lang-switcher,
  .nav-right .nav-rezervasyon {
    display: none;
  }

  /* Show lang + rez inside mobile menu */
  .nav-menu .mobile-extras {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid rgba(184,151,90,0.2);
    width: 200px;
  }

  .hamburger { display: flex; }

  /* Sections */
  .about-grid { grid-template-columns: 1fr; }
  .about-img-badge { display: none; }

  .facility-grid { grid-template-columns: 1fr; }

  .features-row { grid-template-columns: repeat(2, 1fr); }
  .feature-item:nth-child(2) { border-right: none; }
  .feature-item { border-bottom: 1px solid rgba(245,240,232,0.08); }
  .feature-item:nth-child(3),
  .feature-item:nth-child(4) { border-bottom: none; }

  .rooms-scroll-item { width: 280px; height: 360px; }

  .testimonials-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ────────────────────────────
   ≤ 768px  Mobile
   ──────────────────────────── */
@media (max-width: 768px) {

  /* Typography scale */
  .section-header { margin-bottom: 44px; }

  /* Hero */
  .hero-title br { display: none; }
  .hero-btns { flex-direction: column; align-items: center; }
  .hero-frame { display: none; }

  /* Page hero */
  .page-hero { height: 280px; padding-bottom: 36px; }

  /* WhatsApp label hide */
  .wa-label { display: none; }
  .whatsapp-float { padding: 13px; border-radius: 50%; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom-row { flex-direction: column; text-align: center; }
  .footer-bottom { flex-direction: column; text-align: center; padding: 18px 16px; }

  /* Section vertical padding — desktop 100-110px is excessive on mobile */
  .about-home,
  .rooms-section,
  .facility-section,
  .otelimiz-story,
  .otelimiz-mission { padding: 64px 0; }
  .google-reviews { padding: 3.5rem 1.5rem; }

  /* Values */
  .values-grid { grid-template-columns: 1fr; }

  /* Gallery */
  .masonry { columns: 1; }

  /* Gallery filters */
  .gallery-filters { gap: 8px; }
  .gal-filter { font-size: 0.72rem; padding: 7px 16px; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-wrap { padding: 32px 22px; }

  /* Activity grid */
  .activity-grid { grid-template-columns: 1fr; }

  /* Features */
  .features-row { grid-template-columns: 1fr; }
  .feature-item { border-right: none !important; border-bottom: 1px solid rgba(245,240,232,0.08) !important; }
  .feature-item:last-child { border-bottom: none !important; }

  /* Spec grid */
  .facility-specs { grid-template-columns: 1fr 1fr; }

  /* Amenity grid */
  .amenity-grid { grid-template-columns: 1fr; }

  /* about list */
  .about-list { grid-template-columns: 1fr; }

  /* CTA */
  .cta-btns { flex-direction: column; align-items: center; }

  /* Back to top */
  #back-to-top { right: 16px; bottom: 82px; }
  .whatsapp-float { right: 16px; bottom: 18px; }

  /* Lightbox nav */
  #lb-prev { left: 10px; }
  #lb-next { right: 10px; }
}

/* ────────────────────────────
   ≤ 480px  Small mobile
   ──────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  .hero-title { font-size: 2.2rem; }

  .btn { padding: 12px 22px; font-size: 0.78rem; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

  .room-full-info { padding: 28px 20px; }

  .facility-specs { grid-template-columns: 1fr; }

  .rez-layout { gap: 32px; }

  .rooms-scroll-item { width: 240px; height: 320px; }

  .footer-grid { gap: 32px; }

  .page-hero { height: 250px; }

  .masonry { columns: 1; }

  .about-home,
  .rooms-section,
  .facility-section,
  .otelimiz-story,
  .otelimiz-mission { padding: 48px 0; }
  .google-reviews { padding: 2.5rem 1rem; }
}

/* ────────────────────────────
   Print
   ──────────────────────────── */
@media print {
  #header, .whatsapp-float, #back-to-top { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero, .hero { height: auto; min-height: 0; }
}