/* ============================================
   BUNGOLOV - MOBİL GÖRÜNÜM EK DÜZELTMELERİ
   Bu dosya style.css'den SONRA yüklenir.
   ============================================ */

/* ============================================
   TEMEL — YATAY TAŞMA VE VIEWPORT
   ============================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  -webkit-tap-highlight-color: transparent;
}

*, *::before, *::after {
  box-sizing: border-box;
}

[class*="col-"] {
  min-width: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   HERO SECTION — MOBİL DÜZELTME (≤991px)
   Sorun: hero-section height:100vh + overflow:hidden
   Slider position:absolute olduğu için height:auto
   yapınca slider kaybolur.
   Çözüm: Mobilde hero'yu 2 parçaya böl:
   1) Slider: sabit yükseklikte, relative
   2) İçerik: normal flow'da altında
   ============================================ */

@media (max-width: 991px) {

  /* Section: overflow visible, height auto */
  .hero-section {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Slider: relative konuma al, sabit yükseklik ver */
  .hero-slider {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 260px !important;
    flex-shrink: 0 !important;
    order: 1 !important;
  }

  /* Slide: absolute kalabilir, parent artık relative ve yüksekliği var */
  .hero-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* İçerik katmanı: normal flow'da, slider'ın altında */
  .hero-inner {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 24px 0 32px !important;
    align-items: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    order: 2 !important;
    background: var(--primary-dark) !important;
    z-index: 3 !important;
  }

  /* Grid: tek sütun */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
  }

  /* Form kolonu: tam genişlik */
  .hero-form-col {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Arama kutusu */
  .hero-search-box {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 16px !important;
  }

  /* Slider ok butonları: slider içinde kalır */
  .hero-slider-prev,
  .hero-slider-next {
    z-index: 10 !important;
  }

  /* Dots: slider'ın altına */
  .hero-slider-dots {
    bottom: 8px !important;
  }

  /* Progress bar: slider'ın altında */
  .hero-slider-progress {
    bottom: 0 !important;
  }

  /* Navbar: hero-section artık overflow:visible, navbar sticky çalışır */
}

/* ============================================
   HERO — KÜÇÜK MOBİL (≤767px)
   ============================================ */
@media (max-width: 767px) {

  .hero-slider {
    height: 220px !important;
  }

  .hero-inner {
    padding: 20px 0 28px !important;
  }

  .hero-title {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-subtitle {
    font-size: 0.88rem !important;
    margin-bottom: 1rem !important;
  }

  .hero-badge {
    font-size: 0.75rem !important;
    padding: 5px 12px !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-btns .btn-primary-custom,
  .hero-btns .btn-accent-custom {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 20px !important;
  }

  .hero-stats {
    gap: 14px !important;
    margin-top: 14px !important;
  }

  .hero-stat .number { font-size: 1.3rem !important; }
  .hero-stat .label  { font-size: 0.68rem !important; }

  .hero-search-box {
    padding: 16px 14px !important;
  }

  .hero-search-box h4 {
    font-size: 0.95rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Slider ok butonları küçük */
  .hero-slider-prev,
  .hero-slider-next {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.85rem !important;
    background: rgba(0,0,0,0.5) !important;
    border-color: rgba(255,255,255,0.5) !important;
  }
  .hero-slider-prev { left: 8px !important; }
  .hero-slider-next { right: 8px !important; }
}

/* ============================================
   HERO — ÇOK KÜÇÜK MOBİL (≤575px)
   ============================================ */
@media (max-width: 575px) {

  .hero-slider {
    height: 190px !important;
  }

  .hero-inner {
    padding: 16px 0 24px !important;
  }

  .hero-title {
    font-size: clamp(1.25rem, 7vw, 1.7rem) !important;
  }

  .hero-subtitle {
    font-size: 0.85rem !important;
  }

  .hero-stats {
    gap: 10px !important;
  }

  .hero-stat .number { font-size: 1.15rem !important; }

  .hero-search-box {
    padding: 14px 12px !important;
  }
}

/* ============================================
   HERO — ÇOK KÜÇÜK (≤380px)
   ============================================ */
@media (max-width: 380px) {
  .hero-slider {
    height: 170px !important;
  }

  .hero-title {
    font-size: 1.2rem !important;
  }

  .hero-stats {
    display: none !important;
  }
}

/* ============================================
   HERO — LANDSCAPE MOBİL
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-slider {
    height: 180px !important;
  }

  .hero-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  .hero-btns {
    flex-direction: row !important;
  }

  .hero-btns .btn-primary-custom,
  .hero-btns .btn-accent-custom {
    width: auto !important;
    flex: 1 !important;
  }

  .hero-stats {
    display: none !important;
  }
}

/* ============================================
   NAVBAR — MOBİL
   ============================================ */
@media (max-width: 991px) {
  .navbar-custom {
    padding: 10px 0 !important;
  }

  .navbar-brand-custom .brand-text {
    font-size: 1.15rem !important;
  }

  .navbar-brand-custom .brand-sub {
    font-size: 0.6rem !important;
  }

  .navbar-logo-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 575px) {
  .navbar-custom .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .navbar-brand-custom {
    gap: 8px !important;
  }

  .navbar-brand-custom .brand-text {
    font-size: 1rem !important;
  }

  .navbar-logo-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 0.9rem !important;
  }
}

/* Mobil menü */
.navbar-collapse-custom {
  background: var(--white, #fff);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 24px rgba(26,58,92,0.15);
  padding: 16px !important;
  margin-top: 0 !important;
  border-top: 1px solid var(--border, #D0DCE8);
}

@media (max-width: 991px) {
  .navbar-collapse-custom .nav-link-custom {
    display: block !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    margin-bottom: 2px !important;
  }

  .navbar-collapse-custom .nav-link-custom:hover {
    background: var(--bg-light, #F4F7FB) !important;
  }
}

/* ============================================
   GENEL BÖLÜMLER — MOBİL
   ============================================ */
@media (max-width: 767px) {
  .section-padding    { padding: 48px 0 !important; }
  .section-padding-sm { padding: 32px 0 !important; }

  .section-title {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
    margin-bottom: 0.75rem !important;
  }

  .section-subtitle {
    font-size: 0.95rem !important;
    margin-bottom: 2rem !important;
  }
}

/* ============================================
   BUNGALOV KARTLARI — MOBİL
   ============================================ */
@media (max-width: 767px) {
  .bungalow-card-img          { height: 210px !important; }
  .bungalow-card-v2 .bungalow-card-img { height: 210px !important; }
  .bungalow-card-body         { padding: 16px !important; }
  .bungalow-card-title        { font-size: 1.05rem !important; }
  .bungalow-card-desc         { font-size: 0.85rem !important; }
  .bungalow-meta              { gap: 10px !important; }
  .bungalow-meta-item         { font-size: 0.8rem !important; }
  .bungalow-card-footer,
  .bungalow-card-footer-v2    { flex-wrap: wrap !important; gap: 8px !important; }
  .bungalow-price .price-amount { font-size: 1.2rem !important; }
  .bungalow-card-actions      { width: 100% !important; justify-content: space-between !important; }
  .card-btn-book              { flex: 1 !important; justify-content: center !important; }
  .bungalow-card-overlay      { display: none !important; }
  .bungalow-card              { height: auto !important; }
  .bungalow-card-body         { min-height: unset !important; }
}

@media (max-width: 575px) {
  .bungalow-card-img          { height: 190px !important; }
  .bungalow-card-v2 .bungalow-card-img { height: 190px !important; }
  .bungalow-card-body         { padding: 14px !important; }
  .bungalow-card-title        { font-size: 1rem !important; }
  .bungalow-amenities-preview { gap: 6px !important; }
  .amenity-chip               { font-size: 0.7rem !important; padding: 2px 8px !important; }
  .bungalow-price .price-amount { font-size: 1.1rem !important; }
  .card-btn-book              { padding: 7px 12px !important; font-size: 0.75rem !important; }
}

@media (max-width: 380px) {
  .bungalow-card-img          { height: 170px !important; }
  .bungalow-card-v2 .bungalow-card-img { height: 170px !important; }
}

/* ============================================
   REZERVASYON FORMU — MOBİL
   ============================================ */
@media (max-width: 767px) {
  .reservation-form-card { padding: 20px 14px !important; border-radius: 12px !important; }
  .step-indicator        { display: none !important; }
  .price-summary         { padding: 14px !important; }
  .price-row             { font-size: 0.85rem !important; }
  .price-row.total       { font-size: 1rem !important; }
  .reservation-sidebar-sticky { position: static !important; top: auto !important; }
  .payment-method-label  { flex-direction: row !important; }
}

@media (max-width: 575px) {
  .reservation-form-card { padding: 16px 12px !important; }
  .form-control-custom   { font-size: 0.88rem !important; padding: 10px 12px !important; width: 100% !important; box-sizing: border-box !important; }
  select.form-control-custom { width: 100% !important; box-sizing: border-box !important; }
  .price-summary         { padding: 12px !important; }
  .price-row             { font-size: 0.82rem !important; }
  .price-row.total       { font-size: 0.95rem !important; }
}

@media (max-width: 380px) {
  .reservation-form-card .d-flex.justify-content-between { flex-direction: column !important; gap: 10px !important; }
  .reservation-form-card .d-flex.justify-content-between button,
  .reservation-form-card .d-flex.justify-content-between a { width: 100% !important; justify-content: center !important; }
  .reservation-form-card .d-flex.justify-content-end { justify-content: stretch !important; }
  .reservation-form-card .d-flex.justify-content-end button { width: 100% !important; justify-content: center !important; }
  .rezervasyon-onay-card { padding: 20px 14px !important; }
}

/* ============================================
   BUTONLAR — MOBİL
   ============================================ */
@media (max-width: 575px) {
  .btn-primary-custom,
  .btn-accent-custom,
  .btn-outline-custom { padding: 10px 18px !important; font-size: 0.88rem !important; }
}

/* ============================================
   ÖZELLIK KARTLARI — MOBİL
   ============================================ */
@media (max-width: 767px) {
  .feature-card  { padding: 24px 16px !important; }
  .feature-icon  { width: 60px !important; height: 60px !important; font-size: 1.5rem !important; }
  .feature-title { font-size: 1rem !important; }
  .feature-desc  { font-size: 0.85rem !important; }
}

@media (max-width: 575px) {
  .feature-card  { padding: 20px 14px !important; }
  .feature-icon  { width: 52px !important; height: 52px !important; font-size: 1.3rem !important; margin-bottom: 14px !important; }
}

/* ============================================
   YORUM KARTLARI — MOBİL
   ============================================ */
@media (max-width: 767px) {
  .review-card { padding: 18px !important; }
  .review-text { font-size: 0.85rem !important; }
}

@media (max-width: 575px) {
  .review-avatar { width: 40px !important; height: 40px !important; font-size: 0.95rem !important; }
  .review-name   { font-size: 0.88rem !important; }
}

/* ============================================
   BLOG KARTLARI — MOBİL
   ============================================ */
@media (max-width: 767px) {
  .article-card-img { height: 180px !important; }
  .article-title    { font-size: 1rem !important; }
}

/* ============================================
   TAKVİM — MOBİL
   ============================================ */
@media (max-width: 767px) {
  .calendar-grid       { gap: 2px !important; }
  .calendar-day        { font-size: 0.8rem !important; }
  .calendar-day-header { font-size: 0.7rem !important; padding: 4px 0 !important; }
  .calendar-legend     { gap: 10px !important; }
  #availability-calendar { overflow-x: auto !important; }
}

@media (max-width: 575px) {
  .availability-calendar { padding: 14px 10px !important; }
  .calendar-day          { font-size: 0.75rem !important; }
  .calendar-day-header   { font-size: 0.65rem !important; }
  .calendar-header h5    { font-size: 0.95rem !important; }
  .calendar-nav-btn      { width: 30px !important; height: 30px !important; font-size: 0.8rem !important; }
}

/* ============================================
   BUNGALOV DETAY — MOBİL
   ============================================ */
@media (max-width: 767px) {
  .bungalow-detail-hero { height: 260px !important; border-radius: 0 0 12px 12px !important; }
  .bungalow-detail-hero .hero-info { left: 0 !important; right: 0 !important; padding: 0 16px !important; bottom: 12px !important; }
  .bungalow-detail-hero .hero-info h1 { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }
  .bungalow-detail-hero .hero-info .d-flex { gap: 8px !important; }
  .bungalow-detail-hero .hero-info span { font-size: 0.8rem !important; }

  .gallery-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
  .gallery-grid .gallery-item { height: 200px !important; }
  .gallery-grid .gallery-item:first-child { height: 240px !important; grid-row: auto !important; }

  .reservation-sidebar-sticky { position: static !important; top: auto !important; }
  .bungalov-filter-bar { flex-direction: column !important; gap: 10px !important; }
}

@media (max-width: 575px) {
  .bungalow-detail-hero { height: 200px !important; }
  .bungalow-detail-hero .hero-info h1 { font-size: 1.2rem !important; }
  .gallery-grid .gallery-item { height: 180px !important; }
  .gallery-grid .gallery-item:first-child { height: 200px !important; }
  .reservation-form-card .row.g-3 > [class*="col-md-6"] { width: 100% !important; }
}

/* ============================================
   FOOTER — MOBİL
   ============================================ */
@media (max-width: 767px) {
  .footer-custom { padding: 36px 0 0 !important; }
  .footer-brand .brand-name { font-size: 1.3rem !important; }
  .footer-title  { font-size: 1rem !important; margin-bottom: 14px !important; }
  .footer-links a { font-size: 0.85rem !important; }
  .footer-contact-item { font-size: 0.85rem !important; }
  .footer-bottom { font-size: 0.78rem !important; }
  .footer-custom .row > [class*="col-"] { margin-bottom: 24px !important; }
  .footer-custom .row > [class*="col-"]:last-child { margin-bottom: 0 !important; }
}

@media (max-width: 575px) {
  .footer-social { gap: 8px !important; }
  .social-btn    { width: 34px !important; height: 34px !important; font-size: 0.82rem !important; }
  .footer-newsletter input { font-size: 0.85rem !important; }
  .footer-bottom .d-flex.flex-wrap.justify-content-between { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 8px !important; }
  .footer-bottom .d-flex.gap-3 { flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
}

/* ============================================
   WHATSAPP & TOAST — MOBİL
   ============================================ */
@media (max-width: 767px) {
  .whatsapp-float { bottom: 16px !important; right: 16px !important; width: 50px !important; height: 50px !important; font-size: 1.3rem !important; }
  .toast-custom { min-width: 240px !important; max-width: calc(100vw - 32px) !important; }
  .toast-container-custom { right: 12px !important; left: 12px !important; top: 12px !important; }
  .cookie-banner { padding: 14px 16px !important; font-size: 0.82rem !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}

/* ============================================
   CTA SECTION — MOBİL
   ============================================ */
@media (max-width: 767px) {
  section .d-flex.flex-wrap.gap-3.justify-content-center { gap: 10px !important; }
  section .btn-accent-custom,
  section .btn-whatsapp { width: 100% !important; max-width: 320px !important; justify-content: center !important; }
}

/* ============================================
   ADMIN — MOBİL
   ============================================ */
@media (max-width: 991px) {
  .admin-sidebar { transform: translateX(-100%) !important; }
  .admin-sidebar.open { transform: translateX(0) !important; }
  .admin-content { margin-left: 0 !important; }
}

/* ============================================
   GENEL FONT BOYUTU — MOBİL
   ============================================ */
@media (max-width: 575px) {
  html { font-size: 15px; }
}

@media (max-width: 380px) {
  html { font-size: 14px; }
  .navbar-brand-custom .brand-text { font-size: 0.95rem !important; }
}