/* ==========================================================================
   AVLU — responsive.css
   Tüm medya sorguları burada toplanır (büyükten küçüğe).
   Kırılımlar: 1400 · 1200 · 992 · 768 · 576
   ========================================================================== */

/* ==========================================================================
   ≤ 1400px — geniş dizüstü
   ========================================================================== */
@media (max-width: 1400px) {
  :root { --sec-y: 92px; }

  .showcase { gap: 52px; }
  .detail-layout { grid-template-columns: 1fr 350px; gap: 44px; }
  .contact-layout { grid-template-columns: 360px 1fr; gap: 52px; }
  .footer-top { gap: 36px; }
  .nav__link { padding-inline: 10px; font-size: 14px; }
}

/* ==========================================================================
   ≤ 1200px — masaüstü menü mobil çekmeceye geçer
   Ölçüm: logo 120 + menü 730 + aksiyonlar 249 ≈ 1099px;
   kenar boşluğu ve nefes payıyla ~1200px'te çekmeceye iner.
   ========================================================================== */
@media (max-width: 1200px) {
  .nav { display: none; }

  .header-toggle { display: grid; }

  .header-inner { gap: 16px; }
  .header-actions { gap: 10px; }
  .header-actions .btn--primary { display: none; }

  .listing { grid-template-columns: 260px 1fr; gap: 34px; }

  /* Sticky kart mobil/tablette akışa iner, sabitlik kaldırılır */
  .detail-layout { grid-template-columns: 1fr; gap: 40px; }
  .booking-card { position: static; max-width: 520px; }
  .stat-row { margin-top: 28px; }

  .gallery { grid-template-rows: repeat(2, 180px); }
}

/* ==========================================================================
   ≤ 992px — tablet
   ========================================================================== */
@media (max-width: 992px) {
  :root { --sec-y: 80px; --gutter: 20px; }

  .section-head { margin-bottom: 36px; }
  .section-head--split { flex-direction: column; align-items: flex-start; gap: 20px; }

  .hero { min-height: 620px; padding-block: 76px 168px; }
  .hero__meta { gap: 26px; margin-top: 40px; }

  /* Arama barı — 2 sütun */
  .searchbar { grid-template-columns: 1fr 1fr; }
  .searchbar__field:nth-child(2) { border-right: 0; }
  .searchbar__field:nth-child(1),
  .searchbar__field:nth-child(2) { border-bottom: 1px solid var(--c-border); }
  .searchbar__submit { grid-column: 1 / -1; border-top: 1px solid var(--c-border); }
  .searchbar__submit .btn { min-height: 52px; width: 100%; }

  .stay-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .region-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .region-card--feature { grid-column: span 2; grid-row: span 1; }
  .region-card--feature .region-card__name { font-size: 28px; }

  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .value { padding: 32px 26px; }
  .value:not(:first-child) { padding-left: 26px; }

  .showcase { grid-template-columns: 1fr; gap: 36px; }
  .showcase__media { aspect-ratio: 16 / 10; }
  .spec-list { margin: 24px 0; }

  .promo-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .service-grid { grid-template-columns: repeat(3, 1fr); }

  .steps { grid-template-columns: 1fr; }
  .step { padding: 0 0 26px; border-bottom: 1px solid var(--c-border); }
  .step + .step { padding: 26px 0 0; border-left: 0; }
  .step:last-child { border-bottom: 0; }
  .step__no { font-size: 38px; margin-bottom: 10px; }

  .quote-grid { grid-template-columns: 1fr; gap: 18px; }
  .mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; }
  .post-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }

  .cta-dark__inner { padding-block: 88px; }

  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
    padding-block: 60px 48px;
  }
  .footer-about { grid-column: 1 / -1; }

  /* Listeleme — filtre çekmecesi */
  .listing { grid-template-columns: 1fr; gap: 0; }
  .filters-open { display: inline-flex; }
  .filters {
    position: fixed;
    inset: 0 0 0 auto;
    top: 0;
    width: min(400px, 90vw);
    z-index: 210;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--sh-2);
  }
  .filters.is-open { transform: none; }
  .filters__body { flex: 1; max-height: none; }
  .filters__close { display: grid; }
  .filters__head { padding-right: 16px; }
  .filters__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 205;
    background: rgba(24, 32, 28, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t);
  }
  .filters__backdrop.is-open { opacity: 1; visibility: visible; }

  /* Detay */
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .amenity-grid { grid-template-columns: repeat(2, 1fr); }
  .room-grid { grid-template-columns: repeat(2, 1fr); }
  .calendar-wrap { grid-template-columns: 1fr; gap: 34px; }
  .detail-section { padding-block: 34px; }

  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--wide-left { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats > div { padding: 32px 24px; }
  .stats strong { font-size: 38px; }

  .contact-layout { grid-template-columns: 1fr; gap: 44px; }
  .form-card { padding: 28px 24px; }

  .page-hero { min-height: 320px; padding-block: 64px 44px; }
  .page-hero--tall { min-height: 400px; }
}

/* ==========================================================================
   ≤ 768px — mobil
   ========================================================================== */
@media (max-width: 768px) {
  :root { --sec-y: 68px; --header-h: 68px; }

  body { font-size: 15.5px; }
  .lead { font-size: 15.5px; }

  .site-header.is-stuck .header-inner { height: 60px; }
  .logo__mark { font-size: 23px; }
  .logo__sub { font-size: 8px; letter-spacing: .26em; }

  .hero {
    min-height: 560px;
    padding-block: 56px 130px;
    align-items: flex-end;
  }
  .hero__title { margin-bottom: 16px; }
  .hero__text { font-size: 16px; margin-bottom: 26px; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__meta { display: none; }

  /* Arama barı — dikey kart */
  .searchbar-wrap { margin-top: -70px; }
  .searchbar { grid-template-columns: 1fr; }
  .searchbar__field {
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
    padding: 15px 18px;
  }
  .searchbar__field:nth-child(1),
  .searchbar__field:nth-child(2) { border-bottom: 1px solid var(--c-border); }
  .searchbar__submit { padding: 14px 14px 16px; }
  .popover { left: 14px; right: 14px; }

  .stay-grid,
  .stay-grid--2 { grid-template-columns: 1fr; gap: 32px; }
  .cat-grid { grid-template-columns: 1fr; gap: 16px; }
  .cat-card { aspect-ratio: 16 / 11; }
  .region-grid { grid-template-columns: 1fr; grid-auto-rows: 190px; gap: 14px; }
  .region-card--feature { grid-column: span 1; }
  .region-card--feature .region-card__body { padding: 22px; }

  .value-grid { grid-template-columns: 1fr; }
  .value { padding: 26px 0 !important; }

  .promo-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service { padding: 26px 14px; }

  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; }
  .mosaic__item--wide { grid-column: span 1; }
  .mosaic__item--tall { grid-row: span 1; }

  .post-grid { grid-template-columns: 1fr; gap: 32px; }

  .cta-dark__inner { padding-block: 68px; }
  .cta-dark__actions .btn { flex: 1 1 auto; }

  .footer-top { grid-template-columns: 1fr; gap: 34px; padding-block: 48px 36px; }
  .footer-about p { max-width: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-bottom nav { gap: 16px; }

  .toolbar { padding-bottom: 18px; margin-bottom: 24px; }
  .toolbar__right { width: 100%; }
  .toolbar__right .select { flex: 1; min-width: 0; }

  /* Detay — galeri yatay kaydırma */
  .gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery__item {
    flex: 0 0 84%;
    height: 260px;
    scroll-snap-align: center;
  }
  .gallery__all { position: static; margin-top: 14px; }
  .gallery-wrap { position: relative; }

  .stay-header { gap: 18px; }
  .stay-header__place { gap: 12px; font-size: 13.5px; }
  .share-row { width: 100%; }
  .share-row .icon-btn { flex: 1; justify-content: center; }

  .stat-row { grid-template-columns: 1fr 1fr; margin-block: 24px; }
  .stat { padding: 16px 14px; gap: 10px; }
  .stat i { font-size: 17px; }
  .amenity-grid { grid-template-columns: 1fr; }
  .room-grid { grid-template-columns: 1fr; }
  .detail-section__title { font-size: 21px; }
  .cal__day { font-size: 13px; }
  .score-box { padding: 22px 20px; gap: 20px; }
  .score-box__val { font-size: 42px; }

  .mobile-book { display: flex; }
  body.has-mobile-book { padding-bottom: 82px; }
  .wa-float { bottom: 92px; right: 16px; }

  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .article__body { font-size: 16px; }
  .article__body h2 { font-size: 26px; margin: 34px 0 14px; }
  .article__body blockquote { font-size: 20px; padding-left: 20px; margin: 26px 0; }

  .acc__btn { font-size: 16px; padding: 20px 0; gap: 16px; }
  .acc__panel { padding-right: 0; }

  .approach li { grid-template-columns: 38px 1fr; gap: 14px; padding: 20px 0; }
  .stats { grid-template-columns: 1fr 1fr; }

  .page-hero { min-height: 260px; padding-block: 48px 36px; }
  .page-hero--tall { min-height: 320px; }
  .crumb { font-size: 12.5px; padding-block: 16px; }

  .lightbox { padding: 70px 12px; }
  .lightbox__prev { left: 10px; }
  .lightbox__next { right: 10px; }
  .lightbox__close { top: 14px; right: 14px; }

  .booking-card__foot { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ≤ 576px — küçük mobil
   ========================================================================== */
@media (max-width: 576px) {
  :root { --gutter: 18px; --sec-y: 64px; }

  .hero__title { font-size: 38px; }
  .display-xl { font-size: 36px; }
  .display-lg { font-size: 30px; }
  .display-md { font-size: 26px; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .cta-dark__actions { flex-direction: column; }

  .service-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }

  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 128px; }

  .quote { padding: 26px 22px; }
  .quote__text { font-size: 19px; }

  .form-card { padding: 24px 18px; }
  .pager a, .pager span { min-width: 40px; height: 40px; padding: 0 8px; font-size: 13.5px; }
  .pager .is-dots { display: none; }

  .gallery__item { flex: 0 0 90%; height: 220px; }
  .promo__body { padding: 22px 20px 24px; }
  .mobile-book__price strong { font-size: 17px; }
}

/* ==========================================================================
   Yükseklik / yazdırma
   ========================================================================== */
@media (max-height: 700px) and (min-width: 993px) {
  .hero { min-height: 640px; }
  .filters { top: 20px; }
  .booking-card { top: 84px; }
}

@media print {
  .site-header, .site-footer, .wa-float, .mobile-book, .booking-card, .drawer { display: none !important; }
  body { font-size: 12pt; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Backend entegrasyonu ile eklenen bileşenlerin uyarlaması
   ========================================================================== */
@media (max-width: 1200px) {
  .booking-layout { grid-template-columns: 1fr; gap: 36px; }
  .booking-summary { position: static; max-width: 520px; }
}

@media (max-width: 768px) {
  .flash-wrap { padding-top: 14px; }
  .booking-dates { grid-template-columns: 1fr; }
  .result-box { padding-block: 8px; }
  .result-box__icon { width: 64px; height: 64px; font-size: 28px; }
  .empty-state { padding: 48px 18px; }
  .cal__price { display: none; }
}

/* Dil değiştirici — mobil */
@media (min-width: 1201px) {
  /* Menünün açık olduğu genişlikte dil kodu da yazıyla gösterilir */
  .langbar--header .langbar__code { display: inline; }
}
@media (max-width: 768px) {
  .langbar--header { order: -1; }
}

/* ==========================================================================
   Mobil dokunma ve giriş alanı düzeltmeleri (QA)
   ========================================================================== */
@media (max-width: 768px) {

  /* iOS Safari, yazı boyutu 16px'in altındaki bir alana odaklanınca
     sayfayı otomatik büyütür ve kullanıcı düzeni kaybeder. Mobilde
     tüm giriş alanları 16px'e çıkarılır. */
  .input,
  .select,
  .textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
  }

  /* Dokunma hedefleri en az 44×44px olmalı (WCAG 2.5.5 / Apple HIG) */
  .searchbar__trigger {
    min-height: 44px;
  }

  /* Arama kutusundaki alanlar kendi font boyutunu tanımlıyor;
     mobilde onlar da 16px'e çekilir. */
  .searchbar__field .input,
  .searchbar__field .select,
  .searchbar__field input,
  .searchbar__field select {
    font-size: 16px;
  }

  [data-fav],
  .fav {
    width: 44px;
    height: 44px;
  }

  .link-arrow,
  .langbar__item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}


/* CTA arka planı — dar ekranda kadraj dikey olarak açıldığı için
   fotoğrafın daha parlak bölümleri (gökyüzü) görünür alana girer.
   Perde bir tık koyulaştırılır; fotoğraf yine okunur kalır. */
@media (max-width: 768px) {
  .cta-dark__bg::after {
    background: linear-gradient(
      180deg,
      rgba(24, 32, 28, .88) 0%,
      rgba(24, 32, 28, .68) 40%,
      rgba(24, 32, 28, .68) 62%,
      rgba(24, 32, 28, .90) 100%
    );
  }
  .cta-dark__bg img { object-position: center 55%; }
}