/* ==========================================================================
   STONEART GALLERY - AAA-CLASS MASTER MOBILE RESPONSIVE ENGINE
   Strictly Isolation Media Queries: Desktop (>=1024px) Unchanged!
   Mobile & Tablet: 320px - 1023px
   ========================================================================== */

/* 1. BASE SAFETY ONLY ON MOBILE/TABLET (max-width: 1023px) */
@media (max-width: 1023px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }

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

  img, video, iframe, svg, canvas {
    max-width: 100% !important;
  }

  /* Touch Target Ergonomics */
  a, button, input, select, textarea, .nav-link, .nav-btn, .filter-btn, .btn {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* Fluid Typography for Mobile Headings */
  h1, .hero-title {
    font-size: clamp(1.6rem, 5vw + 1rem, 2.6rem) !important;
    line-height: 1.25 !important;
  }

  h2, .studio-title, .section-title {
    font-size: clamp(1.4rem, 4vw + 0.8rem, 2.1rem) !important;
    line-height: 1.3 !important;
  }

  h3, .blog-card-title, .team-name-title {
    font-size: clamp(1.2rem, 3vw + 0.6rem, 1.6rem) !important;
  }

  p, .hero-desc, .studio-desc, .blog-excerpt, .team-bio-desc {
    font-size: clamp(0.88rem, 1.5vw + 0.75rem, 1rem) !important;
    line-height: 1.65 !important;
  }
}

/* 2. STONEART FLOATING WHATSAPP BUTTON (MOBILE ONLY) */
@media (max-width: 768px) {
  .pure-float-wp-btn, #stoneart-root-wp {
    bottom: 20px !important;
    right: 20px !important;
    width: 54px !important;
    height: 54px !important;
    z-index: 999990 !important;
  }
}

/* 3. MOBILE NAVBAR & OFF-CANVAS SLIDE DRAWER */
.stoneart-navbar .nav-toggle-btn {
  display: none;
}

@media (max-width: 1023px) {
  .stoneart-navbar {
    height: 70px !important;
    padding: 0 20px !important;
    background: rgba(3, 3, 3, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99990 !important;
  }

  .stoneart-navbar .navbar-container {
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .stoneart-navbar .navbar-brand {
    font-size: 16px !important;
    letter-spacing: 2px !important;
    z-index: 2147483647 !important;
  }

  .stoneart-navbar .nav-toggle-btn {
    display: inline-flex !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483647 !important;
  }

  /* Slide-in Mobile Menu Panel */
  #stoneart-nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 82vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #080808 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s ease, visibility 0.4s !important;
    transform: translate3d(100%, 0, 0) !important;
    z-index: 2147483646 !important;
    padding: 90px 24px 30px 24px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.95) !important;
    margin: 0 !important;
  }

  #stoneart-nav-links.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  #stoneart-nav-links .nav-link {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    padding: 14px 0 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    width: 100% !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #stoneart-nav-links .nav-link.active,
  #stoneart-nav-links .nav-link:hover {
    color: #ffffff !important;
    padding-left: 8px !important;
  }

  #stoneart-nav-links .nav-btn {
    margin-top: 20px !important;
    padding: 14px 20px !important;
    font-size: 12px !important;
    width: 100% !important;
    text-align: center !important;
    background: #ffffff !important;
    color: #040405 !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    letter-spacing: 2px !important;
    text-decoration: none !important;
    display: block !important;
  }
}

/* 4. HERO BANNER RESPONSIVE (FOR ALL HERO SECTIONS) */
@media (max-width: 1023px) {
  .services-hero-section,
  .gallery-hero-section,
  .blog-hero-section,
  .contact-hero-section {
    padding: 110px 20px 40px 20px !important;
    text-align: center !important;
  }
}

/* 5. STUDIO PAGE MOBILE RESPONSIVE (studio.html) */
@media (max-width: 960px) {
  .studio-content-wrap {
    gap: 70px !important;
    margin: 30px auto !important;
    padding: 0 16px !important;
  }

  .studio-row-item, .studio-row-item.reverse {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .studio-row-item.reverse .studio-img-wrap { order: 1 !important; }
  .studio-row-item.reverse .studio-text-wrap { order: 2 !important; }

  .studio-img-wrap img {
    height: 320px !important;
  }

  .studio-features-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .studio-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .studio-gallery-card {
    height: 180px !important;
  }
}

@media (max-width: 480px) {
  .studio-img-wrap img {
    height: 260px !important;
  }

  .studio-gallery-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 6. TEAM PAGE MOBILE RESPONSIVE (ekibimiz.html) */
@media (max-width: 960px) {
  .team-showcase-wrap {
    gap: 70px !important;
    margin: 30px auto !important;
    padding: 0 16px !important;
  }

  .team-member-row, .team-member-row.reverse {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .team-member-row.reverse .team-img-large { order: 1 !important; }
  .team-member-row.reverse .team-text-box { order: 2 !important; }

  .team-img-large img {
    height: 360px !important;
  }
}

@media (max-width: 480px) {
  .team-img-large img {
    height: 300px !important;
  }
}

/* 7. GALLERY PAGE MOBILE RESPONSIVE (galeri.html) */
@media (max-width: 1023px) {
  .gallery-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }

  .gallery-card {
    height: 300px !important;
  }
}

@media (max-width: 480px) {
  .gallery-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .gallery-card {
    height: 340px !important;
  }
}

/* 8. BLOG & BLOG-DETAY MOBILE RESPONSIVE */
@media (max-width: 1023px) {
  .blog-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }
}

@media (max-width: 768px) {
  .blog-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

  .blog-detail-wrap {
    margin: 90px auto 40px !important;
    padding: 0 16px !important;
  }

  .blog-detail-img {
    max-height: 280px !important;
  }
}

/* 9. SERVICES & CONTACT PAGE MOBILE RESPONSIVE */
@media (max-width: 960px) {
  .services-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

  .contact-container {
    flex-direction: column !important;
    gap: 30px !important;
    padding: 0 16px !important;
  }

  .contact-info-col, .contact-form-col {
    width: 100% !important;
  }

  .stoneart-form input,
  .stoneart-form select,
  .stoneart-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 10. FOOTER MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .stoneart-footer-top {
    flex-direction: column !important;
    gap: 30px !important;
    padding: 40px 20px !important;
  }

  .footer-col {
    width: 100% !important;
  }

  .stoneart-footer-bigtext {
    font-size: 28px !important;
    letter-spacing: 2px !important;
    padding: 20px 10px !important;
  }

  .stoneart-footer-bottom p {
    font-size: 11px !important;
    line-height: 1.6 !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     MUTLAK ZAFER EXPLOITİ: RESPONSIVE.CSS DÜŞMANINI EN DİPTEN EZ VE LOGOYU KURTAR!
  ========================================================================= */

  /* 1. MENÜ AÇILSA DAHİ MARKA ADI (STONEART GALLERY) ASLA YOK OLMAYACAK! */
  .stoneart-navbar:has(.active) .navbar-brand,
  .navbar-container:has(.active) .navbar-brand,
  body:has(#stoneart-nav-links.active) .navbar-brand,
  body:has(.navbar-links.active) .navbar-brand,
  .navbar-brand {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 999999 !important; /* Her zaman görünür ve asil */
  }

  /* 2. HAMBURGER BUTONUNUN GRİ ÇERÇEVESİNİ VE GRİ ZEMİNİNİ KÖKÜNDEN İMHA ET! */
  .stoneart-navbar .nav-toggle-btn,
  body header .nav-toggle-btn,
  body nav .nav-toggle-btn,
  button.nav-toggle-btn,
  .nav-toggle-btn {
    background: rgba(0, 0, 0, 0.75) !important; /* SAF SİYAH HAFİF ŞEFFAF */
    background-color: rgba(0, 0, 0, 0.75) !important;
    background-image: none !important;
    border: none !important; /* O İĞRENÇ BEYAZ/GRİ ÇERÇEVEYİ SİLDİK */
    outline: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 3. AÇILAN PANEL KESİNLİKLE SAF ZİFİRİ SİYAH (080808 VEYA GRİ FİLTRELER SİLİNDİ) */
  #stoneart-nav-links,
  .navbar-links,
  div[id="stoneart-nav-links"] {
    background: #000000 !important; /* KESİN ZİFİRİ SİYAH */
    background-color: #000000 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* FRAMER HAMBURGER IZOLASYON - responsive.css nav-toggle-btn stillerini ez */
@media screen and (max-width: 1023px) {
  .stoneart-framer-mobile-header .nav-toggle-btn,
  .stoneart-framer-mobile-header .framer-rhq1eu-container.nav-toggle-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}