/* ==========================================================================
   GEBZE CAM BALKON - MOBİL KULLANICI DENEYİMİ (MOBILE UX ENHANCEMENTS)
   Bu dosya SADECE mobil ekranları (@media) hedefler.
   Masaüstü (Desktop) görünümü ve geniş ekranları ASLA ETKİLEMEZ.
   ========================================================================== */

/* Masaüstünde mobil alt çubuk kesinlikle gizlidir */
.mobile-sticky-bar {
  display: none !important;
}

/* ==========================================================================
   1. TABLET VE MOBİL (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Mobil Sabit Hızlı İletişim Çubuğu (Thumb-friendly Bottom Bar) */
  .mobile-sticky-bar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 990;
    background: rgba(255, 245, 247, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-subtle, #e4cad5);
    box-shadow: 0 -4px 20px rgba(41, 37, 44, 0.08);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    align-items: center;
    justify-content: stretch;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .msb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    min-height: 46px;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    flex: 1;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    opacity: 1 !important;
  }

  .msb-btn:active {
    transform: scale(0.97);
  }

  .msb-call {
    background: #29252c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(41, 37, 44, 0.18);
  }
  .msb-call svg {
    stroke: #ffffff !important;
  }

  .msb-whatsapp {
    background: #25D366 !important;
    color: #ffffff !important;
    flex: 1.2;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.38);
  }
  .msb-whatsapp svg {
    fill: #ffffff !important;
  }

  .msb-calc {
    background: var(--primary, #77546f) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(119, 84, 111, 0.28);
  }
  .msb-calc svg {
    stroke: #ffffff !important;
  }

  /* Mobilde sağ alttaki eski 3 yuvarlak butonu gizle (çubukla çakışmaz, ekran ferahlar) */
  .floating-actions {
    display: none !important;
  }

  /* Mobilde üst header'daki mükerrer butonu gizle (altta Proje & Fiyat zaten var) */
  .brand-theme .site-header .nav-cta-btn,
  .site-header .nav-cta-btn {
    display: none !important;
  }

  /* Footer veya en alttaki içeriğin çubuğun altında kalmaması için güvenli boşluk */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* Modal açıkken ana sayfa mobil alt çubuğu gizlenir */
  body.calc-modal-open .mobile-sticky-bar {
    display: none !important;
  }
}

/* ==========================================================================
   2. AKILLI TELEFONLAR (max-width: 640px)
   ========================================================================== */
@media (max-width: 640px) {
  /* Konteyner yan boşluklarını 16px yaparak ekrana ferah alan aç */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ==========================================================================
     HERO: TAM EKRANA SIĞAN SİNEMATİK GÖRSEL (Edge-to-Edge Full-Screen Hero)
     ========================================================================== */
  .brand-theme .premium-hero {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .brand-theme .premium-hero > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .brand-theme .premium-hero .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    position: relative !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    margin: 0 !important;
    height: calc(100vh - 60px - env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100dvh - 60px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 520px !important;
    max-height: calc(100dvh - 60px - env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }

  /* Görsel Arka Plana Geçer ve Tam Ekrana Oturur */
  .brand-theme .premium-hero-visual {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .brand-theme .premium-hero .hero-image-wrapper {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .brand-theme .premium-hero .hero-image-wrapper picture,
  .brand-theme .premium-hero .hero-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    border-radius: 0 !important;
  }

  /* Okunabilirlik için lüks koyu degradesi (scrim overlay) - üstte ve altta zengin kontrast, ortada ferah manzara */
  .brand-theme .premium-hero-visual::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(18, 12, 19, 0.70) 0%,
      rgba(18, 12, 19, 0.48) 32%,
      rgba(18, 12, 19, 0.22) 55%,
      rgba(18, 12, 19, 0.65) 80%,
      rgba(18, 12, 19, 0.94) 100%
    ) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  /* Eski resim üstü yazıları ve detay resmini gizle (başlıkla çakışmaz) */
  .brand-theme .hero-image-wrapper figcaption,
  .brand-theme .premium-detail-image,
  .brand-theme .premium-visual-word,
  .brand-theme .premium-eyebrow {
    display: none !important;
  }

  /* Metin ve Buton: Başlık & Açıklama Üstte, Buton Altta (Mükemmel Denge) */
  .brand-theme .premium-hero .hero-content {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 84px 22px 24px 22px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  .brand-theme .premium-hero .hero-title {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important;
    color: #ffffff !important;
    font-size: clamp(2.35rem, 8.8vw, 2.95rem) !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 12px 0 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65), 0 8px 30px rgba(18, 12, 19, 0.75) !important;
  }

  .brand-theme .premium-hero .hero-title em {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important;
    color: #ffd8ec !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 1.08em !important;
    letter-spacing: -0.2px !important;
  }

  .brand-theme .premium-hero .hero-description {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: clamp(0.85rem, 3.2vw, 0.92rem) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: 0.1px !important;
    margin: 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
    max-width: 95% !important;
  }

  .brand-theme .premium-hero .hero-cta-group {
    display: flex !important;
    width: 100% !important;
    margin: auto 0 0 0 !important;
    padding-top: 20px !important;
  }

  .brand-theme .premium-hero .hero-cta-group > a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 15px 24px !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    background: #ffffff !important;
    color: #3b2234 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    border-radius: 999px !important;
    gap: 8px !important;
  }

  .brand-theme .premium-hero .hero-cta-group > a:active {
    transform: scale(0.98) !important;
  }

  /* 6 Güven Kartı ("Neden Gebze Cam Balkon?"):
     Kare şeklinde, yan yana 2 sütunlu kompakt modern kartlar */
  .features-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .feature-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 14px 12px 16px 12px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(85, 64, 78, 0.12) !important;
    box-shadow: 0 3px 12px rgba(48, 38, 51, 0.04) !important;
    min-height: 156px !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }

  .feature-box:active {
    transform: scale(0.97) !important;
  }

  .feature-icon-wrapper {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    background: var(--brand-tint, #f7eff5) !important;
    color: var(--primary, #77546f) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
  }

  .feature-icon-wrapper svg {
    width: 18px !important;
    height: 18px !important;
  }

  .feature-box h3 {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--text-main, #302633) !important;
    line-height: 1.24 !important;
    margin: 0 0 5px 0 !important;
  }

  .feature-box p {
    font-size: 0.73rem !important;
    line-height: 1.42 !important;
    color: #554452 !important;
    margin: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Ek Hizmetler Bölümü (Sineklik, Plise Perde vb.):
     Kare şeklinde, yan yana 2 sütunlu kompakt modern kartlar */
  .ts-services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .ts-service-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 14px 12px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(85, 64, 78, 0.12) !important;
    box-shadow: 0 3px 12px rgba(48, 38, 51, 0.04) !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 152px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }

  .ts-service-card:active {
    transform: scale(0.97) !important;
  }

  .ts-service-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    background: var(--brand-tint, #f7eff5) !important;
    color: var(--primary, #77546f) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
    flex-shrink: 0 !important;
  }

  .ts-service-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .ts-service-card h3 {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--text-main, #302633) !important;
    line-height: 1.22 !important;
    margin: 0 0 3px 0 !important;
  }

  .ts-service-card p {
    font-size: 0.70rem !important;
    line-height: 1.35 !important;
    color: var(--text-muted, #72626e) !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .ts-service-cta {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--primary, #77546f) !important;
    margin-top: auto !important;
    padding-top: 6px !important;
  }

  /* Sistemler & Fiyat Kartları (#modeller) Mobilde Yatay Kaydırmalı / Carousel Modu */
  .brand-theme .systems-showcase-grid,
  .systems-showcase-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
    padding-bottom: 16px !important;
    margin-inline: -16px !important;
    padding-inline: 16px !important;
    scrollbar-width: none !important;
  }

  .brand-theme .systems-showcase-grid::-webkit-scrollbar,
  .systems-showcase-grid::-webkit-scrollbar {
    display: none !important;
  }

  .brand-theme .system-card,
  .system-card {
    flex: 0 0 86% !important;
    min-width: 86% !important;
    max-width: 86% !important;
    scroll-snap-align: start !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    overflow: hidden !important;
  }

  .system-card .card-image-box {
    height: 195px !important;
    border-radius: 15px 15px 0 0 !important;
  }

  .system-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding: 18px 16px !important;
  }

  .system-card .card-body h3 {
    font-size: 1.35rem !important;
    margin-bottom: 6px !important;
  }

  .system-card .card-body p {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }

  .system-card .card-specs {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .system-card .spec-item {
    font-size: 0.78rem !important;
    gap: 8px !important;
  }

  .system-card .ts-price-meta {
    margin-top: auto !important;
    padding: 10px 12px !important;
    font-size: 0.76rem !important;
    margin-bottom: 14px !important;
  }

  .system-card .card-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding-top: 14px !important;
  }

  .system-card .price-hint {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
  }

  .system-card .price-hint span {
    font-size: 0.75rem !important;
  }

  .system-card .price-hint strong {
    font-size: 1.25rem !important;
  }

  .system-card .card-footer .btn-primary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 12px !important;
    font-size: 0.88rem !important;
    min-height: 44px !important;
  }

  /* Galeri Filtre Butonları (Mobilde tek sıra yatay kaydırılabilir modern çipler) */
  .gallery-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-inline: -16px !important;
    padding-inline: 16px !important;
    padding-bottom: 6px !important;
    margin-bottom: 20px !important;
  }

  .gallery-filters::-webkit-scrollbar {
    display: none !important;
  }

  .filter-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
    font-size: 0.8125rem !important;
    min-height: 40px !important;
    border-radius: 20px !important;
  }

  /* Galeri Projeleri (Mobilde Yan Yana, Akıcı Yatay Kaydırma / Carousel) */
  .brand-theme .gallery-grid,
  .gallery-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
    padding-bottom: 16px !important;
    margin-inline: -16px !important;
    padding-inline: 16px !important;
    scrollbar-width: none !important;
  }

  .brand-theme .gallery-grid::-webkit-scrollbar,
  .gallery-grid::-webkit-scrollbar {
    display: none !important;
  }

  .brand-theme .gallery-item,
  .gallery-item {
    flex: 0 0 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;
    height: 330px !important;
    scroll-snap-align: start !important;
    border-radius: 16px !important;
  }

  /* Mobilde kartın altındaki karartma ve metin hizasını koru */
  .gallery-overlay {
    padding: 20px 18px !important;
  }

  .gallery-overlay h4 {
    font-size: 1.15rem !important;
  }

  /* Müşteri Yorumları (#yorumlar) Mobilde Yatay Kaydırmalı / Carousel Modu */
  .brand-theme .reviews-grid,
  .reviews-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
    padding-bottom: 16px !important;
    margin-inline: -16px !important;
    padding-inline: 16px !important;
    scrollbar-width: none !important;
  }

  .brand-theme .reviews-grid::-webkit-scrollbar,
  .reviews-grid::-webkit-scrollbar {
    display: none !important;
  }

  .brand-theme .review-card,
  .review-card {
    flex: 0 0 86% !important;
    min-width: 86% !important;
    max-width: 86% !important;
    scroll-snap-align: start !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 22px 20px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
  }

  .brand-theme .review-text,
  .review-text {
    font-size: 0.86rem !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    flex: 1 !important;
  }

  .review-author {
    margin-top: auto !important;
  }

  /* Harita Bölümü */
  .ts-map-frame iframe {
    min-height: 270px !important;
    max-height: 290px !important;
  }

  .ts-map-row {
    padding: 13px 14px !important;
    gap: 11px !important;
  }

  /* Footer Mobilde Kompakt & Derli Toplu Düzen */
  .brand-theme .site-footer,
  .site-footer {
    padding: 32px 0 20px 0 !important;
  }

  .brand-theme .footer-grid,
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 22px !important;
  }

  .footer-brand {
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .footer-brand p {
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
    max-width: none !important;
  }

  .footer-title {
    margin-bottom: 10px !important;
    font-size: 0.88rem !important;
  }

  .footer-links {
    gap: 8px !important;
  }

  .footer-links a,
  .contact-item {
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
  }

  .contact-info-list {
    gap: 8px !important;
  }

  .brand-theme .footer-bottom,
  .footer-bottom {
    padding-top: 14px !important;
    font-size: 0.72rem !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    gap: 10px !important;
  }
}

/* ==========================================================================
   3. KÜÇÜK EKRANLAR (max-width: 380px)
   ========================================================================== */
@media (max-width: 380px) {
  .msb-btn span {
    font-size: 0.75rem;
  }
  .msb-btn {
    gap: 4px;
    padding-inline: 4px;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .feature-box {
    padding: 11px 9px 13px 9px !important;
    min-height: 148px !important;
  }
  .feature-box h3 {
    font-size: 0.78rem !important;
  }
  .feature-box p {
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
    display: block !important;
    overflow: visible !important;
  }
  .ts-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .ts-service-card {
    padding: 10px 8px !important;
    min-height: 140px !important;
  }
  .ts-service-card h3 {
    font-size: 0.78rem !important;
  }
  .ts-service-card p {
    font-size: 0.67rem !important;
  }
}