/* ════════════════════════════════════════════════════════════════
   TEMAD EMLAK — MOBİL CİLA / POLISH (2026-05-23)
   Mevcut layout/CSS sınıflarına dokunulmaz; yalnızca override + ek dekorasyon.
   Locked-code politikasıyla uyumlu: yeni dosya, mevcutlara müdahale yok.
   Kapsam:
     1) Anasayfa hero/arama — mobilde kompakt
     2) İlan-detay mobil overflow + sıkı padding fix
     3) Favori/Paylaş mini butonlarının görsel iyileştirmesi (desktop+mobile)
   ════════════════════════════════════════════════════════════════ */

/* === 1) ANASAYFA HERO — MOBİL KOMPAKT ============================ */
@media (max-width: 768px) {
  .hero-section {
    padding: 12px 0 18px !important;
    background: linear-gradient(180deg,#FAF8F5 0%,#F5EEE6 100%) !important;
  }
  .hero-section .hero-content {
    padding: 0 14px !important;
  }
  /* Başlık küçült + tek satıra benzer kompakt */
  .hero-title,
  .hero-section .hero-title {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px;
  }
  .hero-subtitle,
  .hero-section .hero-subtitle {
    font-size: 12px !important;
    margin-bottom: 14px !important;
    line-height: 1.4 !important;
  }
  .hero-subtitle strong { color: #C35B28 !important; font-weight: 700; }

  /* Arama kutusu — sıkıştır */
  .arama-kutusu {
    padding: 12px !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(195,91,40,.08), 0 2px 6px rgba(0,0,0,.04) !important;
    border: 1px solid rgba(195,91,40,.08);
  }
  .arama-tabs {
    margin-bottom: 10px !important;
    gap: 6px !important;
  }
  .arama-tab {
    flex: 1;
    padding: 8px 0 !important;
    font-size: 13px !important;
    font-weight: 600;
    border-radius: 8px !important;
  }
  .arama-form { gap: 8px !important; }
  .arama-field label {
    font-size: 11px !important;
    margin-bottom: 4px !important;
    color: #666 !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  .arama-form .form-select {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 14px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }
  .arama-btn {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    margin-top: 4px;
    font-weight: 700;
  }
}

/* === 2) İLAN-DETAY MOBİL OVERFLOW FIX ============================ */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body { width: 100vw; }

  /* Tüm container kıracak elementleri zorla içeride tut */
  .detay-grid,
  .detay-grid > *,
  .sol-kolon,
  .sag-kolon,
  .fiyat-karti,
  .danisan-karti,
  .ana-galeri,
  .info-bar,
  .ozellik-grid,
  .aciklama-section,
  #konumBolumu,
  .benzer-grid,
  .kredi-hesap-section {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Detay container padding sıkıştır */
  .container-xl, .container, .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Sağ kolon - mobilde tam genişlik */
  .sag-kolon { padding: 0 !important; margin-top: 12px; }
  .fiyat-karti { padding: 14px !important; border-radius: 14px !important; }
  .fiyat-deger { font-size: 22px !important; line-height: 1.2; }

  /* Galeri/foto bandı taşmasın */
  .ana-galeri, .ana-galeri img, .ana-galeri video,
  .gallery-image, .galeri-foto {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Tablo/iframe taşmasın */
  table, iframe, embed, object { max-width: 100% !important; }
  iframe { width: 100% !important; }

  /* İletişim butonları sıkış */
  .contact-btn {
    font-size: 14px !important;
    padding: 11px 12px !important;
  }
}

/* === 3) FAVORİ / PAYLAŞ MİNİ-ACTIONS — DEKORATİF İYİLEŞTİRME ===== */
.mini-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
.mini-actions button {
  position: relative;
  flex: 1 !important;
  height: 44px !important;
  border: 1.5px solid #f0d8c4 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #fffaf6 0%, #fff3e9 100%) !important;
  font-size: 13px !important;
  color: #8B3A0F !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease !important;
  box-shadow: 0 2px 6px rgba(195,91,40,.06);
}
.mini-actions button:hover {
  background: linear-gradient(180deg, #fff5ec 0%, #ffe6d3 100%) !important;
  border-color: #C35B28 !important;
  color: #7a3414 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(195,91,40,.18), 0 2px 4px rgba(195,91,40,.08);
}
.mini-actions button:active { transform: translateY(0); }

/* Aktif favori state */
.mini-actions button#favoriBtn.is-fav,
.mini-actions button#favoriBtn.active {
  background: linear-gradient(135deg, #C35B28, #E07B3B) !important;
  border-color: #C35B28 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(195,91,40,.32);
}

/* Paylaş butonu — vurgulu turuncu aksent */
.mini-actions button#paylasBtn {
  background: linear-gradient(135deg, #C35B28 0%, #E07B3B 100%) !important;
  border-color: #C35B28 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(195,91,40,.28);
}
.mini-actions button#paylasBtn:hover {
  background: linear-gradient(135deg, #B14E22 0%, #D06D33 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(195,91,40,.36);
}

/* Mobilde mini-actions sıkış */
@media (max-width: 768px) {
  .mini-actions { gap: 8px !important; margin-top: 12px !important; }
  .mini-actions button { height: 42px !important; font-size: 12.5px !important; }
}

/* === 4) PAYLAŞ MODALİ — KART STİLİ İPUCU + BUTONLARA GLOSS ======= */
.share-btn-social {
  position: relative;
  box-shadow: 0 3px 8px rgba(0,0,0,.10);
  min-height: 64px;
}
.share-btn-social::after {
  content:''; position:absolute; top:0; left:0; right:0; height:50%;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none; border-radius: 10px 10px 0 0;
}
.share-btn-social svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.share-btn-social:hover { box-shadow: 0 6px 14px rgba(0,0,0,.16); }

#sharePrevCard {
  background: linear-gradient(135deg,#fff7f0 0%,#fff 100%) !important;
  border: 1px solid #f5d6c3 !important;
  box-shadow: 0 2px 8px rgba(195,91,40,.06);
}

/* === 5) GALERİ İÇİ PAYLAŞ İKONU (icon-circle #galeriPaylasBtn) === */
.icon-circle#galeriPaylasBtn {
  background: rgba(255,255,255,.92) !important;
  color: #C35B28 !important;
  border: 1.5px solid #C35B28 !important;
  font-weight: 800;
  transition: all .2s;
}
.icon-circle#galeriPaylasBtn:hover {
  background: #C35B28 !important;
  color: #fff !important;
  transform: scale(1.08);
}
