/* ==========================================================================
   STONEART GALLERY - DEDICATED MOBILE & TABLET CSS ENGINE
   Strict Media Isolation: Desktop (>= 1024px) Completely Unchanged!
   Mobile Range: 320px - 1023px
   ========================================================================== */

/* Desktop Default Hide for Mobile Showcase */
.mobile-hero-showcase {
  display: none !important;
}

@media screen and (max-width: 1023px) {

  /* 1. GLOBAL MOBILE RESET & OVERFLOW PREVENTION */
  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;
    height: auto;
  }

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

  /* 2. DYNAMIC MOBILE TYPOGRAPHY & HEADINGS */
  h1, .hero-title, [data-framer-name="Title"] {
    font-size: clamp(1.5rem, 5vw + 0.8rem, 2.3rem) !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  h2, .studio-title, .section-title, .banner-heading {
    font-size: clamp(1.3rem, 4vw + 0.6rem, 1.9rem) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  h3, .blog-card-title, .team-name-title, .gallery-item-title, .showcase-title {
    font-size: clamp(1.1rem, 3vw + 0.5rem, 1.45rem) !important;
    line-height: 1.3 !important;
  }

  p, .hero-desc, .studio-desc, .blog-excerpt, .team-bio-desc, .showcase-desc {
    font-size: clamp(0.85rem, 1.5vw + 0.7rem, 0.95rem) !important;
    line-height: 1.6 !important;
  }

  /* 3. DEDICATED MOBILE HEADER & SLIDE DRAWER */
  .stoneart-navbar {
    height: 68px !important;
    padding: 0 16px !important;
    background: rgba(3, 3, 3, 0.95) !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: 999990 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

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

  .stoneart-navbar .navbar-brand {
    font-size: 15px !important;
    letter-spacing: 2px !important;
    z-index: 2147483647 !important;
    text-decoration: none !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;
  }

  #stoneart-nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 84vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #060608 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !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.35s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.35s ease, visibility 0.35s !important;
    transform: translate3d(100%, 0, 0) !important;
    z-index: 2147483646 !important;
    padding: 85px 20px 30px 20px !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: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !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 18px !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: 1.5px !important;
    text-decoration: none !important;
    display: block !important;
  }

  /* 4. INDEX HOMEPAGE HERO & MOBILE 4-PHOTO DYNAMIC SHUFFLE */
  .mobile-hero-showcase {
    display: block !important;
    width: 100% !important;
    margin: 15px 0 25px 0 !important;
    text-align: center !important;
  }

  .mobile-showcase-title {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
  }

  .mobile-showcase-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .mobile-showcase-card {
    height: 180px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: #0d0d10 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85) !important;
  }

  .mobile-showcase-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: opacity 0.35s ease-in-out !important;
  }

  .framer-lbar7k, #header {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    padding: 85px 16px 30px 16px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
  }

  .framer-1lnca7s, .framer-15g7tg3-container {
    display: none !important;
  }

  /* 5. STONEART MIDDLE SHOWCASE PERFECT MOBILE FIX (stoneart-middle-showcase) */
  .stoneart-middle-showcase {
    padding: 30px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  .stoneart-middle-showcase .showcase-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .stoneart-middle-showcase .showcase-content-col {
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .stoneart-middle-showcase .showcase-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }

  .stoneart-middle-showcase .showcase-tags .dot {
    opacity: 0.4;
  }

  .stoneart-middle-showcase .showcase-title {
    font-size: clamp(1.4rem, 4.5vw + 0.5rem, 2rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
    color: #ffffff !important;
  }

  .stoneart-middle-showcase .showcase-desc {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: 10px !important;
  }

  .stoneart-middle-showcase .showcase-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 15px !important;
    width: 100% !important;
  }

  .stoneart-middle-showcase .badge {
    padding: 8px 14px !important;
    font-size: 11px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
  }

  .stoneart-middle-showcase .showcase-img-col {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important;
  }

  .stoneart-middle-showcase .middle-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 380px !important;
    object-fit: cover !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9) !important;
  }

  /* Background Video Section Responsive */
  .stoneart-banner-section {
    padding: 50px 16px !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .banner-video-wrap {
    width: 100% !important;
    height: 100% !important;
  }

  .banner-bg-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .banner-content-container {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  .banner-heading {
    font-size: clamp(1.2rem, 4vw, 1.7rem) !important;
    margin-bottom: 20px !important;
    letter-spacing: 3px !important;
    text-shadow: 0 4px 15px rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
  }

  .banner-top-accent {
    font-size: 10px !important;
    letter-spacing: 4px !important;
    opacity: 0.5 !important;
    margin-bottom: 15px !important;
  }

  .banner-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 10px !important;
    width: 100% !important;
  }

  .stat-divider {
    display: none !important;
  }

  .stat-number {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 12px rgba(255, 255, 255, 0.3) !important;
  }

  .stat-label {
    font-size: 9px !important;
    letter-spacing: 3px !important;
    opacity: 0.6 !important;
    text-transform: uppercase !important;
    margin-top: 4px !important;
    display: block !important;
  }

  /* 6. HERO BANNER RESPONSIVE FOR ALL OTHER PAGES */
  .services-hero-section,
  .gallery-hero-section,
  .blog-hero-section,
  .contact-hero-section {
    padding: 95px 16px 36px 16px !important;
    text-align: center !important;
  }

  /* 7. STUDIO PAGE MOBILE (studio.html) */
  .studio-content-wrap {
    gap: 60px !important;
    margin: 20px auto !important;
    padding: 0 16px !important;
  }

  .studio-row-item, .studio-row-item.reverse {
    grid-template-columns: 1fr !important;
    gap: 24px !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: 300px !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: 160px !important;
  }

  /* 8. TEAM PAGE MOBILE (ekibimiz.html) */
  .team-showcase-wrap {
    gap: 60px !important;
    margin: 20px auto !important;
    padding: 0 16px !important;
  }

  .team-member-row, .team-member-row.reverse {
    grid-template-columns: 1fr !important;
    gap: 24px !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: 320px !important;
  }

  /* 9. GALLERY PAGE MOBILE (galeri.html) */
  .gallery-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }

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

  /* 10. BLOG & BLOG DETAIL MOBILE (blog.html, blog-detay.html) */
  .blog-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

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

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

  /* 11. SERVICES & CONTACT PAGE MOBILE */
  .services-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

  .contact-container {
    flex-direction: column !important;
    gap: 24px !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;
    padding: 14px 16px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  .form-submit-btn {
    width: 100% !important;
    padding: 16px !important;
  }

  /* 12. FOOTER MOBILE RESPONSIVE */
  .stoneart-footer-top {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 35px 16px !important;
  }

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

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

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

  /* 14. PHONE MOCKUP MOBILE FIX (Telefon icinde telefon absurtlugunu kaldir) */
  .stoneart-phone-section { padding: 40px 16px !important; }
  .phone-container { display: flex !important; flex-direction: column !important; gap: 30px !important; }
  .phone-col { width: 100% !important; display: flex !important; justify-content: center !important; }
  
  .phone-mockup { 
    border: none !important; 
    border-radius: 20px !important; 
    padding: 0 !important; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.9) !important; 
    background: transparent !important; 
    max-width: 100% !important; 
    width: 100% !important; 
    height: auto !important; 
  }
  .phone-mockup::before, .phone-mockup::after { display: none !important; }
  .phone-notch { display: none !important; }
  
  .phone-screen { 
    border-radius: 20px !important; 
    width: 100% !important; 
    height: auto !important; 
    border: 1px solid rgba(255,255,255,0.15) !important; 
    overflow: hidden !important;
  }
  .phone-video { 
    width: 100% !important; 
    height: auto !important; 
    border-radius: 20px !important; 
    display: block !important;
    object-fit: cover !important;
  }
  
  .phone-content-col { width: 100% !important; text-align: center !important; }
  .phone-title { font-size: clamp(1.4rem, 5vw, 2rem) !important; line-height: 1.2 !important; margin-bottom: 15px !important;}
  .phone-subtitle { font-size: 11px !important; letter-spacing: 4px !important; margin-bottom: 10px !important; display: block !important; }
  .phone-desc, .phone-quote { font-size: 0.95rem !important; line-height: 1.6 !important; }
}

/* 13. EXTRA SMALL PHONES (320px - 374px) */
@media screen and (max-width: 374px) {
  .stoneart-navbar .navbar-brand {
    font-size: 13px !important;
  }

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

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

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

  .banner-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .mobile-showcase-card {
    flex: 0 0 170px !important;
    height: 220px !important;
  }
}

@media screen and (max-width: 1023px) {
  /* Ekibimiz Mobil Bypass Exploit */
  .team-showcase-wrap { margin: 40px auto !important; gap: 50px !important; padding: 0 16px !important; }
  .team-member-row { grid-template-columns: 1fr !important; gap: 20px !important; transform: none !important; opacity: 1 !important; }
  .team-member-row:nth-child(even) .team-text-box { order: 2 !important; }
  .team-member-row:nth-child(even) .team-img-large { order: 1 !important; }
  .team-img-large img { height: auto !important; max-height: 400px !important; }

  /* Blog Mobil Bypass Exploit */
  .blog-grid-section { padding: 40px 16px !important; }
  .blog-container { grid-template-columns: 1fr !important; gap: 30px !important; }
  .blog-card { opacity: 1 !important; transform: none !important; }
  
  /* Blog Detay Mobil Bypass Exploit */
  .blog-detail-wrap { margin: 100px auto 40px !important; padding: 0 16px !important; }
  .blog-detail-title { font-size: 1.8rem !important; }
  .blog-detail-img { max-height: 250px !important; }
}

@media screen and (max-width: 1023px) {
  /* GHOST SHIELD EXPLOIT: Header'in tıklamaları yutmasını engelle (Clickjacking Bypass) */
  header#header, header[data-framer-name='Header'] { pointer-events: none !important; }
  header#header a, header#header button, header#header svg, header#header img, .mobile-hero-showcase { pointer-events: auto !important; }
}

@media screen and (max-width: 1023px) {
  /* GÖZ YANILSAMASI BİTTİ (Boşluk Kapatma - Absolute Bypass) */
  .mobile-hero-showcase {
    position: absolute !important;
    top: 85px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    margin: 0 !important;
  }
}

@media screen and (max-width: 1023px) {
  /* Z-INDEX BYPASS: Yazıların suratına binen Vitrini arkaya (Z-0) it! */
  .mobile-hero-showcase {
    z-index: 0 !important;
  }
}

@media screen and (max-width: 1023px) {
  /* KUSURSUZ PİKSEL EXPLOIT: Butonları ve Badge'i Vitrinin altına şıkça diz! */
  
  /* 1. RANDEVU AL Butonu */
  .framer-1dhjohc-container {
    position: absolute !important;
    top: 515px !important;
    left: 4% !important;
    width: 44% !important;
    z-index: 50 !important;
    transform: none !important;
  }
  
  /* 2. GALERİMİZ Butonu */
  .framer-136nbug-container {
    position: absolute !important;
    top: 515px !important;
    right: 4% !important;
    left: auto !important;
    width: 44% !important;
    z-index: 50 !important;
    transform: none !important;
  }

  /* Buton Linklerini Ebeveyne (Container) Göre Tam Yay */
  .framer-1dhjohc-container a, 
  .framer-136nbug-container a {
    width: 100% !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 3. STÜDYO INFO BADGE (Bilgi Çubuğu) */
  .stoneart-info-badge {
    position: absolute !important;
    top: 590px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 380px !important;
    z-index: 50 !important;
    display: flex !important;
    justify-content: space-around !important;
  }
}

@media screen and (max-width: 1023px) {
  /* GLOBAL BUTON ZAFİYETİ ROLLBACK (Sayfanın Altında Kaybolan Butonları Kurtar) */
  .framer-1dhjohc-container, 
  .framer-136nbug-container,
  .stoneart-info-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    z-index: 1 !important;
    transform: none !important;
  }
}

@media screen and (max-width: 1023px) {
  /* DOM INJECTION EXPLOIT: Yeni Nesil Buton ve Rozet Tasarımı (Sabit Yükseklikten Kurtuluş) */
  .mobile-action-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    padding: 0 5% !important;
  }
  .mobile-buttons-row {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 15px !important;
  }
  .mobile-btn-primary, .mobile-btn-secondary {
    flex: 1 !important;
    height: 48px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
  }
  .mobile-btn-primary {
    background-color: rgb(237, 237, 237) !important;
    color: #000 !important;
    border: 1px solid rgb(227, 227, 227) !important;
  }
  .mobile-btn-secondary {
    background-color: transparent !important;
    color: #fff !important;
    border: 1px solid rgb(84, 84, 84) !important;
  }
  
  /* Rozetin DOM içindeki Flex (Merkezi) Klon Hali */
  .mobile-badge-clone {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 10px !important;
    width: 100% !important;
  }

  /* Eski Framer Zindanlarındaki Orijinal Butonları SADECE MOBİLDE (HERO'da) Gizle */
  .framer-1lnca7s ~ div .framer-1dhjohc-container,
  .framer-1lnca7s ~ div .framer-136nbug-container,
  body > .stoneart-info-badge:not(.mobile-badge-clone) {
    display: none !important;
  }
}

@media screen and (max-width: 1023px) {
  /* GEREKSİZ ORTA FOTOĞRAFI (orta.png) GİZLE (STEALTH EXPLOIT) */
  img.middle-img {
    display: none !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     PREMIUM MOBILE FAQ SECTION (STONEART EXCLUSIVE)
  ========================================================================= */
  .stoneart-faq-section {
    padding: 60px 15px !important;
    background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%) !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  .faq-header {
    text-align: center !important;
    margin-bottom: 40px !important;
  }
  
  .faq-subtitle {
    display: inline-block !important;
    font-size: 11px !important;
    letter-spacing: 4px !important;
    color: #888 !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #333 !important;
    padding-bottom: 6px !important;
  }
  
  .faq-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 15px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
  }
  .faq-title span {
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(255,255,255,0.4) !important;
  }
  
  .faq-desc {
    font-size: 13px !important;
    color: #999 !important;
    max-width: 95% !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
  }

  .faq-accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }

  .faq-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .faq-item.active {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
  }

  .faq-question {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px !important;
    background: transparent !important;
    border: none !important;
    color: #eaeaea !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer !important;
    outline: none !important;
    letter-spacing: 0.5px !important;
  }

  .faq-icon {
    min-width: 20px !important;
    color: #666 !important;
    transition: transform 0.4s ease !important;
  }
  
  .faq-item.active .faq-icon {
    transform: rotate(180deg) !important;
    color: #fff !important;
  }

  .faq-answer {
    padding: 0 20px !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease !important;
    color: #a3a3a3 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
  
  .faq-item.active .faq-answer {
    padding: 0 20px 20px 20px !important;
    max-height: 800px !important;
    opacity: 1 !important;
  }
  
  .faq-answer p {
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     MIDDLE SHOWCASE AESTHETIC UPGRADE & COLLISION FIX (Çakışmayı Önle)
  ========================================================================= */
  .stoneart-middle-showcase {
    /* Vitrin ve Action Panel taştığı için onu aşağıya itiyoruz (Çakışma Kalkanı) */
    margin-top: 400px !important; 
    padding: 20px 15px !important;
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
  }
  
  .showcase-content-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Tags (Realistic Black & Grey vb.) */
  .showcase-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: #888 !important;
    text-transform: uppercase !important;
    margin-bottom: 25px !important;
  }
  .showcase-tags .dot {
    color: #444 !important;
  }

  /* Ana Başlık */
  .showcase-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 25px !important;
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
  }
  .showcase-title span {
    display: block !important;
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(255,255,255,0.5) !important;
    margin-top: 5px !important;
  }

  /* Paragraflar */
  .showcase-desc {
    font-size: 14px !important;
    color: #a3a3a3 !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    max-width: 95% !important;
  }
  
  /* TATTOO • ART Alt Yazısı (İnce Çizgili Lüks Vurgu) */
  .showcase-desc[style*="13px"] {
    font-size: 11px !important;
    color: #666 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 10px 0 !important;
    margin: 20px 0 !important;
    width: 100% !important;
  }

  /* Rozetler (Özel Tasarım vb.) */
  .showcase-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 15px !important;
  }
  
  .showcase-badges .badge {
    padding: 8px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    color: #ccc !important;
    background: rgba(255,255,255,0.03) !important;
    backdrop-filter: blur(5px) !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     GÖRÜNMEZLİK ZAFİYETİ İÇİN HOTFIX OVERRIDE (SCROLL KİLİDİNİ KIR!)
  ========================================================================= */
  
  /* 1. Mobil Kaydırma (Scroll) ve Kapsayıcı Yükseklik Kilitlerini Kır! */
  html, body, [data-framer-root], .framer-pqcZx {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  /* 2. Middle Showcase Görünmezlik Hatasını Düzelt (Margin iptal, Padding ile Kutuyu Uzat!) */
  .stoneart-middle-showcase {
    margin-top: 0 !important; /* Dışarı Taşırma (Overflow) riskini SIFIRLA */
    padding-top: 480px !important; /* Action Panel'in altından temiz boşlukla başlat */
    overflow: visible !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     MUTLAK Z-INDEX EXPLOIT (RESİMLERİ VE BUTONLARI KARANLIKTAN KURTAR!)
  ========================================================================= */
  
  /* 1. Tüm Vitrini ve Butonları En Öne (Zirveye) Taşı */
  .mobile-hero-showcase {
    z-index: 100 !important; /* Karanlık dehlizden kurtar */
    position: absolute !important;
    top: 85px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* 2. Vitrin Resimleri (6'lı Karıştırıcı) Güvenli Akış */
  .mobile-showcase-grid {
    position: relative !important;
    z-index: 101 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 3. Buton ve Rozet Paneli (Action Panel) */
  .mobile-action-panel {
    position: relative !important;
    z-index: 102 !important;
    width: 100% !important;
    margin-top: 25px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     DOM RELOCATION EXPLOIT (ABSOLUTE ZİNCİRLERİNİ KIR VE DOĞAL AKIŞA GEÇ!)
  ========================================================================= */
  
  /* 1. VİTRİN VE BUTONLARI SERBEST BIRAK (Yer Kaplasınlar!) */
  .mobile-hero-showcase {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 30px !important; /* Menüden uzaklaş, kesilmeyi önle */
    z-index: 50 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* 2. SİYAH BOŞLUĞU (KARA DELİĞİ) YOK ET! */
  .stoneart-middle-showcase {
    position: relative !important;
    margin-top: 30px !important; /* Panelden hemen sonra başla */
    padding-top: 0 !important; /* 480px'lik zorlama boşluğu SİL! */
    z-index: 40 !important;
    overflow: visible !important;
  }
  
  /* 3. Ticker'ı Mobilde Temizle (Zaten 6'lı Canlı Vitrinimiz Var) */
  .framer-1lnca7s {
    display: none !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     ANA YAZILARI KURTARMA EXPLOITİ (VİTRİNİ AŞAĞI, GERÇEK YERİNE İT!)
  ========================================================================= */
  
  .mobile-hero-showcase {
    /* Orijinal Framer metinleri (Ana başlık vs) okunsun diye vitrini 450px aşağı (gerçek yerine) itiyoruz! */
    margin-top: 450px !important; 
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     RESET EXPLOIT (BÜYÜK BOŞLUĞU SİL, BUTONLARI DİZ, YAZILARI KARART!)
  ========================================================================= */
  
  /* 1. ÜSTTEKİ 450px BOŞLUĞU YOK ET! (Vitrini menü altına, gerçek yerine çek) */
  /* Ve arkadaki orijinal metinler sızmasın diye SAF KARANLIK (#050505) DUVAR ÖR! */
  .mobile-hero-showcase {
    position: relative !important;
    top: auto !important;
    margin-top: 25px !important; /* Büyük boşluk (kara delik) kapandı! */
    padding-top: 15px !important;
    padding-bottom: 25px !important;
    z-index: 100 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #050505 !important; /* ARKADAKİ YAZILARI YUTACAK DUVAR! */
  }
  
  /* 2. BOZULAN BUTONLARIN ARASINI (FLEX ZIRHIYLA) KUSURSUZLAŞTIR! */
  .mobile-action-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 10px !important;
    background-color: transparent !important;
  }
  
  .mobile-buttons-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 15px !important; /* Butonların arasını mükemmel aç! */
    padding: 0 5% !important;
  }
  
  .mobile-btn-primary, .mobile-btn-secondary {
    flex: 1 !important; /* Butonlar eşit şekilde genişlesin! */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 48px !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     GERÇEK KURTARMA (YAZILARI GERİ GETİR, VİTRİNİ AŞAĞI AL, BUTONLARI ÇELİKLE!)
  ========================================================================= */
  
  /* 1. Siyah Duvarı YIK (Orijinal Yazılar Geri Gelsin)! */
  .mobile-hero-showcase {
    background-color: transparent !important; /* Karanlık duvar iptal, arkası görünsün! */
    margin-top: 420px !important; /* Vitrini yazılardan kurtar, 420px aşağı (Güvenli Bölgeye) it! */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* 2. Butonların Arasını Düzelt (Çelik Kalıp: Kesin Ölçüler) */
  .mobile-buttons-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 4% !important; /* Aralığı %4 olarak stabilledik */
    padding: 0 !important; 
  }
  
  .mobile-btn-primary, .mobile-btn-secondary {
    flex: 0 0 48% !important; /* Her buton tam olarak ekranın %48'ini kaplasın (Bozulma İmkansız!) */
    width: 48% !important;
    max-width: 48% !important;
    height: 48px !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     MİMARİ KIYAMET (BÜYÜK BOŞLUĞU SİL, KENDİ YAZIMIZI AYDINLAT, ÇÖPLERİ GÖM!)
  ========================================================================= */
  
  /* 1. Üstteki Devasa Boşluğu (420px) YOK ET! Menü altına çek ve Karanlık Duvar Ör! */
  .mobile-hero-showcase {
    margin-top: 15px !important; /* Boşluk mağarası sonsuza dek kapandı! */
    padding-top: 15px !important;
    padding-bottom: 25px !important;
    position: relative !important;
    z-index: 100 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #0b0b0b !important; /* Arkadaki Framer Orijinal Metinlerini (Çöpleri) Yutar! */
  }
  
  /* 2. Siyah Duvarın İçinde Kaybolan BİZİM YAZIMIZI (Canlı Vitrin) AYDINLAT! */
  .mobile-showcase-title {
    color: #ffffff !important; /* Karanlıkta kaybolmasın, BEMBEYAZ PARLASIN! */
    text-shadow: 0 0 10px rgba(255,255,255,0.1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    display: block !important;
  }
  
  /* 3. Butonları (Aralıkları bozulmadan) Kusursuz %48 Kalıbında Merkezle! */
  .mobile-action-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 20px !important;
    background-color: transparent !important;
  }
  
  .mobile-buttons-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 4% !important;
    padding: 0 5% !important;
  }
  
  .mobile-btn-primary, .mobile-btn-secondary {
    flex: 0 0 48% !important;
    width: 48% !important;
    max-width: 48% !important;
    height: 48px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     MUTLAK KUSURSUZLUK EXPLOITI (GRİ YAMA YOK, KESİLME YOK, LÜKS AKIŞ!)
  ========================================================================= */
  
  /* 1. GRİ YAMAYI SİL, TAM SİYAH (PITCH BLACK) YAP VE KESİLMEYİ ENGELLE! */
  .mobile-hero-showcase {
    position: absolute !important; /* Menü hapishanesinden kurtar! */
    top: 90px !important; /* Menü biter bitmez başlat, üstten ASLA KESİLMEZ! */
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    min-height: 100vh !important; /* Alttan (Rozetten) kesilmeyi önle! */
    display: flex !important;
    flex-direction: column !important;
    background-color: #000000 !important; /* GRİ DEĞİL! Orijinal zeminle %100 KAYNAŞAN TAM SİYAH! (Çöpleri kusursuz yutar) */
    padding-bottom: 60px !important; /* En alttan nefes alma boşluğu */
    margin-top: 0 !important; /* Marginleri sıfırla */
  }
  
  /* 2. BİZİM YAZIMIZIN ÜSTTEN KESİLMESİNİ VE YAPIŞMASINI BİTİR */
  .mobile-showcase-title {
    color: #ffffff !important; 
    margin-top: 15px !important; /* Menüden uzaklaştır (Kesilmez) */
    margin-bottom: 20px !important; /* Fotolarla arasına mesafe */
    text-align: center !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.1) !important;
  }
  
  /* 3. FOTOLARIN ARASI VE KUSURSUZ HİZALANMASI */
  .mobile-showcase-grid {
    position: relative !important;
    z-index: 101 !important;
    width: 100% !important;
    padding: 0 15px !important; /* Ekran kenarlarından güvenli boşluk */
    gap: 15px !important;
  }
  
  /* 4. BUTONLAR VE ROZET (ALT KAYMA/KESİLME KORUMASI) */
  .mobile-action-panel {
    margin-top: 25px !important; 
    padding: 0 15px !important;
  }
  
  /* Rozetin güvenli alanı */
  .stoneart-info-badge.mobile-badge-clone {
    margin-top: 30px !important;
    margin-bottom: 30px !important; /* Ekranın altından kesilmesini imkansız kılar */
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     TERSİNE ÇEVİRME EXPLOITİ (VİTRİNİ ARKA PLANA AL, YAZILARI ÖNE ÇIKAR!)
  ========================================================================= */
  
  /* 1. Vitrini En Alta (Arka Plan Olarak) İt ve Siyah Duvarı YIK! */
  .mobile-hero-showcase {
    z-index: 1 !important; /* <--- EN ALTTA! (Framer Orijinal yazıları bunun üstüne çıkacak!) */
    background-color: transparent !important; /* Arkası şeffaf, her şey iç içe akacak */
    position: absolute !important;
    top: 90px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 60px !important;
  }
  
  /* 2. Fotoğraflara Lüks Karanlık Filtre Vur (Üzerindeki Yazılar Bembeyaz Okunsun!) */
  .mobile-showcase-grid {
    z-index: 1 !important;
  }
  
  .mobile-showcase-card img {
    /* Fotoları koyulaştır ki, üstüne binen "STONEART GALLERY" ve "Görünenin Ötesinde" metinleri resimdeki gibi şimşek gibi parlasın! */
    filter: brightness(0.3) !important;
    transition: filter 0.5s ease;
  }
  
  /* 3. Butonları (Tıklanabilmeleri İçin) En Öne Çıkar! */
  .mobile-action-panel {
    position: relative !important;
    z-index: 50 !important; /* Butonlar ve alt rozet her şeyin önünde olsun */
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     FİLTRE SIFIRLAMA EXPLOITİ (KARANLIĞI SİL, AYDINLIĞI GERİ GETİR!)
  ========================================================================= */
  
  .mobile-showcase-card img {
    filter: none !important; /* Karanlık (Brightness) filtresini 0'a indir (TAMAMEN SİL)! */
    opacity: 1 !important; /* Tam parlaklık */
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     MUTLAK SİMETRİ VE LÜKS MOBİL DÜZENİ (CENTER-ALIGNED PREMIUM EXPLOIT)
  ========================================================================= */
  
  /* 1. BUTONLAR VE ROZET (ACTION PANEL) KUSURSUZ MERKEZLEME */
  .mobile-action-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 20px !important; /* Yanlardan lüks nefes alma boşluğu */
  }
  
  .mobile-buttons-row {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important; /* İki buton arası temiz boşluk */
  }
  
  .mobile-btn-primary, .mobile-btn-secondary {
    flex: 1 !important; /* Eşit dağılım */
    max-width: 50% !important; 
    text-align: center !important;
  }
  
  /* 1.1 "Her Gün / Stüdyo" Rozeti Kusursuz Sİmetri */
  .stoneart-info-badge.mobile-badge-clone {
    display: flex !important;
    flex-direction: row !important; /* Yan yana asil duruş */
    align-items: center !important;
    justify-content: center !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 400px !important; /* Çok uzayıp bozulmasın */
    margin: 30px auto !important; /* Tam ortaya sabitle! */
  }
  
  .stoneart-info-badge.mobile-badge-clone .info-item {
    display: flex !important;
    flex-direction: column !important; /* İkon üstte, yazı altta daha şık */
    align-items: center !important;
    text-align: center !important;
  }
  
  .stoneart-info-badge.mobile-badge-clone .info-divider {
    height: 40px !important; /* Çizgi boyunu ortala */
  }

  /* 2. ALT BÖLÜM (MAKALELER, BAŞLIK VE ETİKETLER) MUTLAK MERKEZLEME */
  .showcase-content-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Her şeyi ekranın KALBİNE (Ortasına) kilitle! */
    justify-content: center !important;
    text-align: center !important;
    padding: 40px 20px !important; /* Mobilde rahat okuma ve lüks boşluk */
    width: 100% !important;
  }
  
  /* 2.1 Üstteki Küçük Noktalı Etiketler (Realistic Black & Grey vs) */
  .showcase-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Ortala */
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
  }
  
  .showcase-tags span {
    text-align: center !important;
  }
  
  /* 2.2 Ana Başlık */
  .showcase-title {
    text-align: center !important;
    margin-bottom: 25px !important;
    font-size: 26px !important; /* Mobilde biraz daha tok ve asil */
    line-height: 1.3 !important;
  }
  
  /* 2.3 Açıklama Metinleri (Parağraflar) */
  .showcase-desc {
    text-align: center !important;
    padding: 0 10px !important; /* Yazılar kenarlara yapışıp çirkin durmasın */
    margin-bottom: 20px !important;
    line-height: 1.7 !important; /* Okunabilirlik için satır arası açıldı */
  }
  
  /* 2.4 En Alttaki Butonumsu Rozetler (Özel Tasarım, Hijyenik vs) */
  .showcase-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Tüm rozetleri tam ortaya yığ! */
    gap: 12px !important;
    width: 100% !important;
    margin-top: 25px !important;
  }
  
  .showcase-badges .badge {
    text-align: center !important;
    padding: 10px 18px !important; /* Mobilde daha dolgun buton hissiyatı */
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     İNATÇI BAŞLIĞI MERKEZLEME EXPLOITİ (MUTLAK KİLİT)
  ========================================================================= */
  
  .showcase-title {
    display: flex !important;
    flex-direction: column !important; /* STONEART GALLERY ve İSTANBUL kelimelerini alt alta lüks bir mühür gibi diz */
    align-items: center !important; /* Tam ortala */
    justify-content: center !important; /* Tam ortala */
    text-align: center !important;
    width: 100% !important; /* Genişliği full aç ki ortalayabilsin! */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .showcase-title span {
    display: block !important;
    text-align: center !important;
    margin-top: 5px !important; /* İki kelime arasına hafif nefes boşluğu */
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     LÜKS HİZMET KARTLARI (PREMIUM WATERFALL EXPLOIT)
  ========================================================================= */
  
  .services-grid-section {
    padding: 50px 15px !important;
    background-color: #000000 !important; /* Orijinal saf siyah */
  }

  .services-container {
    display: flex !important;
    flex-direction: column !important; /* Yan yana duran (Grid) yapıyı parçala, alt alta (Şelale) diz! */
    gap: 25px !important; /* Kartlar arası ferah lüks boşluk */
    width: 100% !important;
  }

  .service-card {
    position: relative !important;
    background: #080808 !important; /* Tok ve asil bir gri-siyah kutu zemin */
    border: 1px solid #1a1a1a !important; /* Lüks, incecik bir çerçeve */
    padding: 35px 25px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* İçindeki watermark dışarı taşmasın */
    transition: transform 0.3s ease !important;
  }

  /* 01, 02 Rakamlarını Arkada Devasa, Lüks Bir Watermark (Su İzi) Yap! */
  .service-num {
    position: absolute !important;
    top: -10px !important;
    right: 15px !important;
    font-size: 90px !important;
    font-weight: 900 !important;
    color: rgba(255, 255, 255, 0.03) !important; /* Neredeyse görünmez asil dev numara */
    z-index: 0 !important;
    line-height: 1 !important;
    user-select: none !important;
  }

  .service-body {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Yazıları ekranın tam kalbine kitle! */
    text-align: center !important;
  }

  .service-title {
    font-size: 22px !important;
    color: #ffffff !important;
    margin-bottom: 15px !important;
    letter-spacing: 2px !important;
    line-height: 1.3 !important;
  }

  .service-text {
    font-size: 14px !important;
    color: #a0a0a0 !important; /* Okunabilir asil gri */
    line-height: 1.7 !important;
    margin-bottom: 25px !important;
    padding: 0 5px !important; /* Yazılar kenarlara ezilmesin */
  }

  /* Alt Özellik Listesini İnce Çizgili, Lüks Bir Menüye Çevir! */
  .service-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .service-features li {
    font-size: 13.5px !important;
    color: #cccccc !important;
    padding: 12px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important; /* Aralarına ince lüks çizgi */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0.5px !important;
  }
  
  .service-features li:first-child {
    border-top: none !important; /* İlk elemanda çizgi olmasın */
  }

  .service-features li::before {
    content: "•" !important;
    color: #ffffff !important;
    margin-right: 10px !important;
    font-size: 18px !important;
    opacity: 0.3 !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     BOZUK ::BEFORE TEMİZLİĞİ VE MUTLAK LÜKS LİSTE (SPECS BOX) EXPLOITİ
  ========================================================================= */
  
  /* 1. O çirkin ve bozuk noktaları (::before pseudo-elementleri) KÖKÜNDEN YOK ET! */
  .service-features li::before {
    content: none !important;
    display: none !important;
  }

  /* 2. Liste elemanlarını düz metin olmaktan çıkarıp, Lüks Araç Broşürü (Specs) Formatına sok! */
  .service-features li {
    font-size: 13px !important;
    color: #e0e0e0 !important;
    padding: 15px 10px !important; /* Daha dolgun nefes boşluğu */
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    letter-spacing: 1.5px !important; /* Lüks harf aralığı */
    text-transform: uppercase !important; /* Harfleri büyük yaparak ASALET kat */
    font-weight: 500 !important;
    width: 100% !important;
    background: transparent !important;
  }
  
  /* İlk ve son elemana da sınır çizgisi çekerek Mükemmel Simetrik Kutu (Specs Box) yarat */
  .service-features li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important; 
  }
  .service-features li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; 
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     LÜKS MOBİL GALERİ EXPLOITİ (HIGH-END APP GALLERY & GRADIENT OVERLAY)
  ========================================================================= */
  
  .gallery-grid-section {
    padding: 30px 10px !important;
    background-color: #000000 !important;
  }

  /* 1. Yan Yana 2'li (Instagram Keşfet Tarzı) Lüks Dizilim */
  .gallery-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* İki sütuna böl */
    gap: 12px !important; /* Asil, temiz boşluklar */
    width: 100% !important;
    padding: 0 !important;
  }

  /* 2. Apple Standartlarında Kavisli (Radius) Cam Kartlar */
  .gallery-card {
    position: relative !important;
    border-radius: 12px !important; /* Lüks yumuşak kavisler */
    overflow: hidden !important;
    height: 240px !important; /* Mobilde tok ve uzun duran asil boy */
    background: #080808 !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important; /* Derinlik katar */
  }

  .gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Asla bozulmasın, tam dolsun */
  }

  /* 3. MOBİLDE HOVER YOKTUR! (Yazıları Kapatan Zırhı Yık, Alttan Gradient Çek!) */
  .gallery-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important; /* Fotonun tamamını KARARTMASIN! */
    height: 60% !important; /* Sadece en alttan yukarı doğru %60'lık bir alan */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%) !important; /* Siyah Duman Efekti */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Yazıları ekranın en dibine it */
    padding: 15px 12px !important;
    opacity: 1 !important; /* Mobilde her zaman görünür olacak */
    visibility: visible !important;
    transform: none !important; /* Animasyonları iptal et, sabit kalsın */
  }

  /* 4. Minik, Tok ve Lüks Tipografi (Behance / Dribbble Standartı) */
  .gallery-cat {
    font-size: 9.5px !important;
    color: #b0b0b0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important; /* Geniş lüks aralık */
    margin-bottom: 5px !important;
    font-weight: 700 !important;
    display: block !important;
  }

  .gallery-item-title {
    font-size: 13px !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9) !important; /* Okunabilirliği maksimize et */
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     GERÇEK HEDEF (STONEART-NAV-LINKS) İÇİN MUTLAK TAM EKRAN LÜKS MENÜ EXPLOITİ
  ========================================================================= */

  /* 1. Logonun (STONEART GALLERY) Z-Index Gücünü Kır (Menünün Altında Yutulacak) */
  .navbar-brand {
    position: relative !important;
    z-index: 10 !important; 
  }

  /* 2. Gerçek Menüyü Hedef Al: O basit sağdan kayan kutuyu TAM EKRANA KİLİTLE! */
  #stoneart-nav-links,
  .navbar-links {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; /* Ekranın her köşesini yutar! */
    height: 100vh !important;
    z-index: 9999999 !important; /* Mutlak Zirve */
    
    /* 3. SENİN İSTEDİĞİ: "BİR TARAFI BEYAZ/ŞEFFAF, BİR TARAFI SİYAH DESEGRELİ" LÜKS EFEKT! */
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.98) 0%, rgba(65, 65, 65, 0.95) 100%) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    /* Menü Tasarım Akışı */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: center !important; 
    padding: 0 40px !important;
    box-sizing: border-box !important;
    
    /* 4. YENİ PÜRÜZSÜZ ANİMASYON İÇİN HAZIRLIK (Gizli Durum) */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.95) translateY(-15px) !important; /* Zoom ve Opaklık kullanıyoruz (Çok daha asil) */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    pointer-events: none !important;
  }

  /* MENÜ AÇILDIĞINDA (Zarif Fade-in Zoom Şöleni) */
  #stoneart-nav-links.active,
  .navbar-links.active,
  #stoneart-nav-links.show,
  .navbar-links.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
    pointer-events: auto !important;
  }

  /* 5. Yazılar (Apple / Dribbble Kalitesi) */
  #stoneart-nav-links a,
  .navbar-links a {
    font-size: 20px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    text-align: center !important; /* Tüm yazılar tam ortada inci gibi dizilecek */
    width: 100% !important;
    display: block !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
  }

  #stoneart-nav-links a:hover,
  .navbar-links a:hover {
    color: #a0a0a0 !important;
    letter-spacing: 6px !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  }

  /* Hamburger Butonu Her Zaman Zirvede */
  .nav-toggle-btn {
    position: fixed !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 99999999 !important; 
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     ACİL GERİ DÖNÜŞ (ROLLBACK) VE KUSURSUZ SAĞ MENÜ (DARK OVERLAY) EXPLOITİ
  ========================================================================= */

  /* 1. Logonun Gücünü Kırık Tutmaya Devam Et */
  .navbar-brand {
    z-index: 10 !important;
  }

  /* 2. Önceki Hataları Ez! Menüyü KESİNLİKLE SAĞA SABİTLE VE SAF SİYAH YAP! */
  #stoneart-nav-links,
  .navbar-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;  /* SOLU İPTAL ET, TAA SAĞA YAPIŞTIR! */
    left: auto !important; 
    width: 280px !important; /* Lüks, tok bir çekmece genişliği */
    height: 100vh !important;
    z-index: 9999999 !important; /* Zirve */
    
    /* 3. İĞRENÇ GRİ RENGİ SİL! SAF, TOK, LÜKS SİYAH! */
    background: #050505 !important;
    backdrop-filter: none !important; /* Grileşme yapan cam efektini sök at! */
    
    /* 4. EFSANE HİLE (DARK OVERLAY): Menü sağda açılsa bile, 
       sol tarafta sırıtan Logoyu karanlığa gömmek için devasa siyah bir gölge zırhı! */
    box-shadow: -10px 0 50px rgba(0,0,0,0.5), -100px 0 100vw 100vw rgba(0,0,0,0.85) !important;
    
    /* Düzen: Yazıları sola yaslı asil formata döndür */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; 
    align-items: flex-start !important; 
    padding: 90px 30px 40px 30px !important; /* Üstteki buton için güvenli boşluk */
    box-sizing: border-box !important;
    
    /* 5. ANİMASYON DÜZELTMESİ: Soldan veya zoomla değil, SADECE SAĞDAN KAYARAK (Slide-In) gelsin! */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(100%) !important; /* Menü gizliyken tamamen sağda beklesin */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease !important;
    pointer-events: none !important;
  }

  /* Menü Açıldığında (Sağdan içeri mükemmel akış) */
  #stoneart-nav-links.active,
  .navbar-links.active,
  #stoneart-nav-links.show,
  .navbar-links.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important; /* Sağdan tam yerine oturur! */
    pointer-events: auto !important;
  }

  /* 6. Yazılar: Orijinal Lüks Duruş (Temiz, İnce Çizgili) */
  #stoneart-nav-links a,
  .navbar-links a {
    font-size: 17px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-align: left !important; /* Sola yaslı asil duruş */
    width: 100% !important;
    display: block !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
  }

  /* Tıklama (Hover) Vuruşu */
  #stoneart-nav-links a:hover,
  .navbar-links a:hover {
    color: #a0a0a0 !important;
    padding-left: 12px !important; /* Sola yaslıyken hafif sağa kayma (Premium Hissiyat) */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  }

  /* Hamburger Butonu Zirvede Kilitli */
  .nav-toggle-btn {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 99999999 !important; 
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     DİĞER SAYFALARDAKİ LOGO (PENETRASYON) ZAFİYETİ - KESİN İMHA EXPLOITİ
  ========================================================================= */

  /* 1. O inatçı Logonun Z-Index'ini YERİN DİBİNE SOK! (Menü Siyahına Taşmasın!) */
  .stoneart-navbar .navbar-brand {
    z-index: -1 !important; /* Negatif güç! Menünün zeminini delemez! */
  }

  /* 2. Menünün Z-Index'ini HTML EVRENİNİN SINIRINA (Max) ÇIKAR! */
  #stoneart-nav-links,
  .navbar-links {
    z-index: 2147483647 !important; /* Ulaşılabilecek en yüksek Z-Index Sınırı! */
    /* Sol tarafı (Logo alanını) yutan gölgeyi ölümcül yap! */
    box-shadow: -50px 0 100px rgba(0,0,0,0.9), -100vw 0 0 100vw rgba(0,0,0,0.95) !important;
  }

  /* 3. SİHİRLİ KURŞUN (Mutlak İmha): Menü Açıldığı An, Logoyu EKRANDAN SİL! */
  /* Hamburger butonu basılıp '.active' eklendiğinde Logo hayalet gibi yok olur! */
  .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 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     ACİL HOTFIX (CANLANDIRMA): LOGOYU YERİN DİBİNDEN ÇIKAR!
  ========================================================================= */

  /* Az önceki '-1' Z-index ve 'has(.active)' hatalarını ZORLA EZ, Logoyu Hayata Döndür! */
  .stoneart-navbar .navbar-brand,
  .navbar-container .navbar-brand,
  nav .navbar-brand,
  body .navbar-brand {
    z-index: 10 !important; /* Yerin dibinden (Arka planın altından) sök al! */
    opacity: 1 !important;  /* 'has' zafiyetinin yarattığı görünmezliği KESİN olarak ez! */
    visibility: visible !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     MİMARİ Z-INDEX RESTORASYONU (KAYBOLAN LOGOYU KURTAR VE MENÜYE EZDİR!)
  ========================================================================= */

  /* 1. Logonun Gücünü Geri Ver! (Diğer sayfalardaki Hero Bölümleri Logoyu Ezmesin!) */
  .stoneart-navbar .navbar-brand,
  .navbar-container .navbar-brand,
  nav .navbar-brand,
  body .navbar-brand {
    position: relative !important;
    z-index: 999990 !important; /* 999 Bin Gücü! Sitedeki her türlü resim, fotoğraf ve vitrinin üstünde parlayacak! */
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important; 
  }

  /* 2. Menü Kutusu (Siyah Çekmece) Logodan BİLE DAHA GÜÇLÜ OLMALI! */
  #stoneart-nav-links,
  .navbar-links {
    z-index: 9999999 !important; /* 9 MİLYON Gücü! Menü açıldığı an Logoyu (999 Bin) rahatça ezecek! */
  }

  /* 3. Hamburger Butonu Herkesin (Menünün Bile) Üstünde, Dokunulmaz! */
  .nav-toggle-btn {
    z-index: 99999999 !important; /* Mutlak Hükümdar */
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     BOOM GYM ESİNTİLİ (SİYAH-BEYAZ LÜKS KONSEPT) MENÜ TASARIMI EXPLOITİ
  ========================================================================= */

  /* 1. Menü Kutusunu Baştan Yaratıyoruz (Yukarıdan Aşağı Asil Dizilim) */
  #stoneart-nav-links,
  .navbar-links {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Ortalamayı İptal! Linkler yukarıda toplanacak */
    align-items: flex-start !important; 
    padding: 80px 32px 40px 32px !important; /* Üstten ve yanlardan lüks boşluklar (p-8) */
    
    /* Boom GYM Stili: Çok Hafif Şeffaf Koyu Arkaplan + Blur 2xl + Sol İnce Çizgi */
    background: rgba(5, 5, 5, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  /* 2. HTML'i Bozmadan Menünün En Üstüne SAHTE (Sanal) Bir Logo Ekliyoruz! */
  #stoneart-nav-links::before,
  .navbar-links::before {
    content: "STONEART";
    display: block !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 4px !important;
    margin-bottom: 40px !important; /* Logodan sonraki dev boşluk */
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding-bottom: 15px !important;
    width: 100% !important;
  }

  /* 3. Linkler (Border Gitti, Uzay Boşlukları Geldi) */
  #stoneart-nav-links a.nav-link,
  .navbar-links a.nav-link,
  #stoneart-nav-links a:not(:last-child),
  .navbar-links a:not(:last-child) {
    font-size: 18px !important; /* text-lg */
    font-weight: 600 !important; /* font-semibold */
    text-transform: uppercase !important;
    letter-spacing: 2px !important; /* tracking-wider */
    color: #ffffff !important; /* Beyaz Yazı */
    border-bottom: none !important; /* Eski Çizgileri KÖKTEN SİLİYORUZ */
    padding: 0 !important; 
    margin-bottom: 24px !important; /* space-y-6 Efekti */
    width: auto !important;
    text-align: left !important;
    transition: color 0.3s ease !important;
  }

  /* Temiz Siyah/Beyaz Hover */
  #stoneart-nav-links a:not(:last-child):hover,
  .navbar-links a:not(:last-child):hover {
    color: #999999 !important; /* Hafif Gri asalet */
    padding-left: 0 !important; /* Eski Sola Kayma efektini iptal ettik (sadelik) */
  }

  /* 4. EN ÖLÜMCÜL HİLE: Son Linki (İletişim) DİBE İT ve YUVARLAK LÜKS BUTON YAP! */
  #stoneart-nav-links a.nav-btn,
  .navbar-links a.nav-btn,
  #stoneart-nav-links a:last-child,
  .navbar-links a:last-child {
    margin-top: auto !important; /* DİKKAT: Bu sihir butonu menünün EN DİBİNE İTER! */
    margin-bottom: 0 !important;
    display: block !important;
    width: 100% !important; /* w-full */
    
    /* Siyah/Beyaz Konsept: Arkaplan Bembeyaz, Yazı Siyah! */
    background: #ffffff !important; 
    color: #050505 !important; 
    text-align: center !important; 
    font-weight: 700 !important; /* font-bold */
    padding: 12px 0 !important; /* py-3 */
    border-radius: 9999px !important; /* rounded-full (Hap şekli) */
    text-transform: uppercase !important;
    letter-spacing: 2px !important; 
    font-size: 14px !important; /* text-sm */
    transition: background 0.3s ease !important;
    border: none !important;
  }

  /* Lüks Buton Hover */
  #stoneart-nav-links a:last-child:hover,
  .navbar-links a:last-child:hover {
    background: #cccccc !important; /* Gri Zemin */
    color: #000000 !important;
  }

  /* 5. Kapatma Butonu (Hamburger) Rengi */
  .nav-toggle-btn {
    color: rgba(255, 255, 255, 0.7) !important; /* text-white/70 */
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     TERTEMİZ YAPI VE LÜKS HAMBURGER BUTON EXPLOITİ (BÖLÜNME HATASI İMHASI)
  ========================================================================= */

  /* 1. O İğrenç Bölünmüş Ekran Zafiyetini (Gölgeyi) Yok Et! */
  #stoneart-nav-links,
  .navbar-links {
    box-shadow: none !important; /* Karanlık gölgeyi SİLDİK! Sol taraf artık temiz ve normal */
    background: rgba(10, 10, 10, 0.98) !important; /* Sağ sütun kusursuz tek parça Siyah Cam */
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important; /* Jilet ayırıcı çizgi */
  }

  /* 2. Cılız Butonu Lüks Bir Şahesere (Cam Yuvarlak Butona) Dönüştür! */
  .nav-toggle-btn {
    top: 20px !important;
    right: 20px !important;
    width: 46px !important;
    height: 46px !important;
    
    /* Apple / Lüks Standartı Cam Arkaplan */
    background: rgba(255, 255, 255, 0.06) !important; 
    backdrop-filter: blur(15px) !important; /* Kendi cam efekti */
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Asil İnce Çizgi */
    border-radius: 50% !important; /* Kusursuz Yuvarlak! */
    
    /* İçerik Hizalama (Merkez) */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    
    color: #ffffff !important; /* Cılız değil, SAF BEYAZ ve KESKİN! */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 99999999 !important; 
  }

  /* Buton İkonunun Boyutu */
  .nav-toggle-btn svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Tıklama Anında (Hover) Pürüzsüz Lüks Büyüme */
  .nav-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     DARK GLASS (SİYAH ŞEFFAF) HAMBURGER BUTON EXPLOITİ
  ========================================================================= */

  /* Butonun konumunu daha YUKARI çek ve Siyah Şeffaf (Dark Glass) Yap! */
  .nav-toggle-btn {
    top: 10px !important; /* Zirveye (Daha yukarıya) çekildi */
    right: 15px !important; 
    width: 44px !important;
    height: 44px !important;
    
    /* Siyah Şeffaf (Dark Glass) Lüks Zemin */
    background: rgba(0, 0, 0, 0.6) !important; /* Saf siyah ve çok elit bir şeffaflık! */
    backdrop-filter: blur(12px) !important; /* Kendi cam efekti */
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Mikroskobik beyaz/gümüş sınır çizgisi (Siyah arka planda kaybolmasın diye Zırh) */
    border: 1px solid rgba(255, 255, 255, 0.07) !important; 
    border-radius: 50% !important; /* Kusursuz Yuvarlak Hap */
    
    /* İçerik Hizalama */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    
    color: #ffffff !important; /* İkon rengi okunaklı KESKİN BEYAZ */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 99999999 !important; 
  }

  /* Buton İkonunun Daha İnce/Lüks Boyutu */
  .nav-toggle-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Tıklama Anında (Hover) Pürüzsüz Lüks Büyüme ve Toklaşma */
  .nav-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.85) !important; /* Hoverda daha tok bir siyah asalet */
    transform: scale(1.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     SAF SİYAH & HAFİF ŞEFFAF (CAM ETKİSİ İPTAL) BUTON EXPLOITİ
  ========================================================================= */

  .nav-toggle-btn {
    /* 1. Siyahlığı Bozan Cam Efektini ve Beyaz Sınır Çizgisini KÖKÜNDEN SİL! */
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important;
    border: none !important; /* Gümüş/Beyaz zırhı yok ettik, saf siyah kalacak */
    
    /* 2. TAM OLARAK SİYAH VE HAFİF ŞEFFAF! */
    background: rgba(0, 0, 0, 0.75) !important; /* %75 Saf Siyah, %25 Asil Şeffaflık! */
    
    /* Hafif bir derinlik (Arka plandan kopması için) */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; 
  }

  /* Hover (Tıklama) Anında Daha Tok Bir Siyah */
  .nav-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.95) !important; /* Tıklarken neredeyse tam zifiri siyah */
    border: none !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     KOMPAKT FLOATING POPUP MENU (Framer Orijinal Stili)
     Tam ekran sidebar yerine kucuk bir kart/popup aciliyor
  ========================================================================= */

  /* 1. Menu Kutusunu Kucuk Floating Card'a Donustur */
  #stoneart-nav-links,
  .navbar-links {
    position: fixed !important;
    top: 72px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    width: 220px !important;
    max-width: 220px !important;
    height: auto !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;

    /* Glassmorphism Card */
    background: rgba(18, 18, 18, 0.97) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.05) !important;

    /* Flex Layout */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 16px 20px !important;
    gap: 0 !important;

    /* Hide by default */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.92) translateY(-8px) !important;
    transform-origin: top right !important;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.22s !important;
    z-index: 9999999 !important;

    border-left: none !important;
    margin: 0 !important;
  }

  /* 2. Menu Acik Durumu */
  #stoneart-nav-links.active,
  .navbar-links.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) translateY(0) !important;
  }

  /* 3. Sahte Logo/Baslik Kaldir */
  #stoneart-nav-links::before,
  .navbar-links::before {
    display: none !important;
    content: none !important;
  }

  /* 4. Linkler - Kompakt ve Sade */
  #stoneart-nav-links a.nav-link,
  .navbar-links a.nav-link,
  #stoneart-nav-links a:not(:last-child),
  .navbar-links a:not(:last-child) {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 12px 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    text-align: left !important;
    display: block !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
    text-decoration: none !important;
  }

  #stoneart-nav-links a:not(:last-child):last-of-type {
    border-bottom: none !important;
  }

  /* Link Hover */
  #stoneart-nav-links a:not(:last-child):hover,
  .navbar-links a:not(:last-child):hover {
    color: #ffffff !important;
    padding-left: 6px !important;
  }

  /* 5. Iletisim Butonu - Kompakt Pill */
  #stoneart-nav-links a.nav-btn,
  .navbar-links a.nav-btn,
  #stoneart-nav-links a:last-child,
  .navbar-links a:last-child {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    color: #0a0a0a !important;
    text-align: center !important;
    font-weight: 700 !important;
    padding: 10px 0 !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 11px !important;
    transition: background 0.2s ease !important;
    border: none !important;
    text-decoration: none !important;
  }

  #stoneart-nav-links a:last-child:hover,
  .navbar-links a:last-child:hover {
    background: #e0e0e0 !important;
    color: #000000 !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     FRAMER HAMBURGER - MOBILE.CSS NAV-TOGGLE-BTN OVERRIDE NEUTRALIZER
     Mobile.css'teki genel .nav-toggle-btn stilleri Framer butonunu bozuyor.
     Bu blok onlari tamamen eziyoruz.
  ========================================================================= */

  /* Framer header icerisindeki hamburger butonunu mobile.css stillerinden izole et */
  .stoneart-framer-mobile-header .nav-toggle-btn,
  .stoneart-framer-mobile-header .framer-rhq1eu-container,
  .stoneart-framer-mobile-header .framer-rhq1eu-container.nav-toggle-btn {
    /* Konum: Header icinde relative kalsin, fixed/absolute ile firlamasin */
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    /* Boyut */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;

    /* Gorunum */
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;

    /* Hizalama */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;

    /* Tiklanabilirlik */
    cursor: pointer !important;
    z-index: 2147483647 !important;
    color: #ffffff !important;
    transition: background 0.2s ease !important;
    transform: none !important;
  }

  .stoneart-framer-mobile-header .framer-rhq1eu-container:hover {
    background: rgba(255, 255, 255, 0.14) !important;
  }

  /* Inner wrapper - flex column ile cizgileri ortala */
  .stoneart-framer-mobile-header .framer-2Rmi7,
  .stoneart-framer-mobile-header .framer-2Rmi7.framer-15effdl {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
  }

  /* Hamburger cizgileri - absolute IPTAL, flex child olarak ortala */
  .stoneart-framer-mobile-header .framer-1s1udum,
  .stoneart-framer-mobile-header .framer-1qucu0y {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 18px !important;
    height: 2px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
    transform: none !important;
    will-change: auto !important;
  }
}

@media screen and (max-width: 1023px) {
  /* HAMBURGER BUTON + MENU ARKA PLAN: SAF SIYAH */

  /* Hamburger buton container - saf siyah arka plan */
  .stoneart-framer-mobile-header .framer-rhq1eu-container,
  .stoneart-framer-mobile-header .framer-rhq1eu-container.nav-toggle-btn,
  .stoneart-framer-mobile-header .nav-toggle-btn {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .stoneart-framer-mobile-header .framer-rhq1eu-container:hover {
    background: rgba(0, 0, 0, 0.95) !important;
  }

  /* Menu popup - saf siyah arka plan */
  #stoneart-nav-links,
  .navbar-links,
  #stoneart-nav-links.active,
  .navbar-links.active {
    background: rgba(0, 0, 0, 0.96) !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     HEADER SEFFAF + MESAFE AZALT + MENU YARI SEFFAF SIYAH
  ========================================================================= */

  /* 1. Header arka plani SEFFAF */
  .stoneart-framer-mobile-header nav.framer-32ox9,
  .stoneart-framer-mobile-header nav {
    background-color: transparent !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
  }

  /* 2. Header-icerik arasi mesafeyi azalt */
  body {
    padding-top: 50px !important;
  }
  .stoneart-framer-mobile-header {
    min-height: 50px !important;
  }
  .stoneart-framer-mobile-header nav.framer-32ox9 {
    min-height: 50px !important;
    padding: 8px 16px !important;
  }

  /* 3. Acilan menu - siyah ama yari seffaf (cam efekti) */
  #stoneart-nav-links,
  .navbar-links,
  #stoneart-nav-links.active,
  .navbar-links.active {
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     TUM SAYFALARDA TUTARLI HEADER + MENU (index.html gibi)
     Tam seffaf yerine hafif siyah cam efekti - her sayfada duzgun gorunur
  ========================================================================= */

  /* Header - hafif siyah cam (tam seffaf degil, her sayfada tutarli) */
  .stoneart-framer-mobile-header nav.framer-32ox9,
  .stoneart-framer-mobile-header nav {
    background: rgba(5, 5, 5, 0.55) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  /* Acilan menu - daha opak siyah cam */
  #stoneart-nav-links,
  .navbar-links,
  #stoneart-nav-links.active,
  .navbar-links.active {
    background: rgba(5, 5, 5, 0.82) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     MOBILE HERO SHOWCASE - FRAMER TICKER TARZI (2 Sutun, Offset, Mask)
     Sol sutun yukari, sag sutun asagi offset + fade mask efekti
  ========================================================================= */

  .mobile-showcase-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 12%,
      rgba(0,0,0,1) 88%,
      rgba(0,0,0,0) 100%
    ) !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 12%,
      rgba(0,0,0,1) 88%,
      rgba(0,0,0,0) 100%
    ) !important;
    margin: 0 !important;
    min-height: 420px !important;
    align-content: center !important;
  }

  .mobile-showcase-card {
    height: 135px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    border: none !important;
    background: #0a0a0a !important;
    box-shadow: none !important;
    opacity: 0.6 !important;
    transition: opacity 0.4s ease !important;
  }

  .mobile-showcase-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Sol sutun (1, 3, 5) - yukari offset */
  .mobile-showcase-card:nth-child(odd) {
    transform: translateY(-18px) !important;
  }

  /* Sag sutun (2, 4, 6) - asagi offset */
  .mobile-showcase-card:nth-child(even) {
    transform: translateY(18px) !important;
  }

  /* Sol sutun yukari kayan animasyon */
  .mobile-showcase-card:nth-child(1),
  .mobile-showcase-card:nth-child(3),
  .mobile-showcase-card:nth-child(5) {
    animation: tickerUp 12s ease-in-out infinite alternate !important;
  }

  /* Sag sutun asagi kayan animasyon (ters yonde) */
  .mobile-showcase-card:nth-child(2),
  .mobile-showcase-card:nth-child(4),
  .mobile-showcase-card:nth-child(6) {
    animation: tickerDown 12s ease-in-out infinite alternate !important;
  }

  @keyframes tickerUp {
    0%   { transform: translateY(-10px); }
    100% { transform: translateY(-25px); }
  }

  @keyframes tickerDown {
    0%   { transform: translateY(25px); }
    100% { transform: translateY(10px); }
  }
}

@media screen and (max-width: 1023px) {
  /* Fotograf opacity inline style override - tum fotolar gorunur olsun */
  .mobile-showcase-card img[style*="opacity: 0"],
  .mobile-showcase-card img[style*="opacity:0"],
  .mobile-showcase-card img {
    opacity: 1 !important;
  }

  /* Showcase basligini gizle (ticker tarzinda baslik gereksiz) */
  .mobile-showcase-title {
    display: none !important;
  }
}

/* =========================================================================
   MOBILE TICKER CONTAINER - FRAMER STYLE INFINITE SCROLL
   Sol sutun yukari, sag sutun asagi - sonsuz kayan foto galeri
========================================================================= */

/* Desktop'ta gizle */
.mobile-ticker-container {
  display: none !important;
}

@media screen and (max-width: 1023px) {
  .mobile-ticker-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    width: 100% !important;
    height: 400px !important;
    overflow: hidden !important;
    position: relative !important;
    /* Ust ve alt fade-out mask efekti */
    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 10%,
      rgba(0,0,0,1) 90%,
      rgba(0,0,0,0) 100%
    ) !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 10%,
      rgba(0,0,0,1) 90%,
      rgba(0,0,0,0) 100%
    ) !important;
  }

  /* Her sutun */
  .mobile-ticker-col {
    flex: 1 !important;
    overflow: hidden !important;
    position: relative !important;
    height: 100% !important;
  }

  /* Kayan track (fotolari iceren serit) */
  .mobile-ticker-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    position: relative !important;
  }

  /* Yukari kayan sutun */
  .mobile-ticker-up .mobile-ticker-track {
    animation: tickerScrollUp 18s linear infinite !important;
  }

  /* Asagi kayan sutun */
  .mobile-ticker-down .mobile-ticker-track {
    animation: tickerScrollDown 18s linear infinite !important;
  }

  /* Her foto karti */
  .mobile-ticker-item {
    width: 100% !important;
    height: 180px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    opacity: 0.55 !important;
  }

  .mobile-ticker-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Sonsuz yukari scroll animasyonu */
  @keyframes tickerScrollUp {
    0% {
      transform: translateY(0);
    }
    100% {
      /* 3 item x (180px + 4px gap) = 552px */
      transform: translateY(-552px);
    }
  }

  /* Sonsuz asagi scroll animasyonu */
  @keyframes tickerScrollDown {
    0% {
      transform: translateY(-552px);
    }
    100% {
      transform: translateY(0);
    }
  }

  /* Eski showcase grid'i tamamen gizle (artik ticker var) */
  .mobile-showcase-grid {
    display: none !important;
  }
}

@media screen and (max-width: 1023px) {
  /* Bozuk Framer CTA/info bar (butonlarin ustundeki duplicate) - mobilde gizle */
  .framer-9uh6gh-container,
  .framer-9uh6gh-container .ssr-variant {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 1023px) {
  /* =========================================================================
     DESKTOP INFO BADGE MOBILDE GIZLE + MOBILE BADGE DUZELT
  ========================================================================= */

  /* Desktop info badge (bozuk gorunen) - mobilde tamamen gizle */
  .stoneart-info-badge:not(.mobile-badge-clone) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* MOBILE BADGE CLONE - tam mobil uyumlu stiller */
  .stoneart-info-badge.mobile-badge-clone {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    background: rgba(15, 15, 15, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    margin-top: 12px !important;
    overflow: hidden !important;
  }

  .mobile-badge-clone .info-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  .mobile-badge-clone .info-icon {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .mobile-badge-clone .info-icon svg {
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    stroke: rgba(255, 255, 255, 0.5) !important;
  }

  .mobile-badge-clone .info-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
  }

  .mobile-badge-clone .info-label {
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  .mobile-badge-clone .info-val,
  .mobile-badge-clone .info-val.link {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }

  .mobile-badge-clone .info-divider {
    width: 1px !important;
    height: 28px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    flex-shrink: 0 !important;
    margin: 0 12px !important;
  }
}

@media screen and (max-width: 1023px) {
  /* 1. Header ile fotograflar arasindaki boslugu ve yukaridan olan padding'i tamamen kaldir */
  body {
    padding-top: 0px !important;
  }

  .mobile-hero-showcase {
    margin-top: 0px !important;
    padding-top: 50px !important; /* Header'in altindan baslasin */
    position: relative !important;
  }

  /* 2. Ticker fotograflarinin ortasindaki siyah karartmayi kaldir, mask gradient'i hafiflet */
  .mobile-ticker-container {
    height: 480px !important;
    margin-top: -10px !important;
    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0.8) 0%,
      rgba(0,0,0,1) 5%,
      rgba(0,0,0,1) 95%,
      rgba(0,0,0,0.8) 100%
    ) !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0.8) 0%,
      rgba(0,0,0,1) 5%,
      rgba(0,0,0,1) 95%,
      rgba(0,0,0,0.8) 100%
    ) !important;
  }

  /* Fotograflarin opakligini tam yap, karartma olmasin */
  .mobile-ticker-item {
    opacity: 0.9 !important;
  }

  /* 3. STONEART GALLERY ve altindaki yazilari yukari cek ve ortala */
  .framer-1lnca7s, 
  .mobile-hero-showcase .mobile-showcase-title,
  .stoneart-middle-showcase .showcase-title {
    margin-top: -20px !important;
  }
}

@media screen and (max-width: 1023px) {
  /* Header ile foto animasyon arasindaki mesafeyi tamamen sifirla ve fotolari yukari cek */
  .mobile-hero-showcase {
    padding-top: 0px !important;
    margin-top: -30px !important; /* Foto animasyonu tam header'in altina dayamak icin negatif margin */
  }

  .mobile-ticker-container {
    margin-top: -20px !important;
  }

  .framer-lbar7k, #header {
    padding-top: 50px !important;
  }
}

@media screen and (max-width: 1023px) {
  /* Mobile Header arka planini TAMAMEN seffaf yap */
  .stoneart-framer-mobile-header,
  .stoneart-framer-mobile-header nav,
  .stoneart-framer-mobile-header nav.framer-32ox9,
  .stoneart-framer-mobile-header .framer-32ox9 {
    background-color: transparent !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
}

@media screen and (max-width: 1023px) {
  /* Mobile Header - Ustten asagi yumusak siyah gradient gecis */
  .stoneart-framer-mobile-header,
  .stoneart-framer-mobile-header nav,
  .stoneart-framer-mobile-header nav.framer-32ox9,
  .stoneart-framer-mobile-header .framer-32ox9 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 100%) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
}

@media screen and (max-width: 1023px) {
  /* STONEART GALLERY ve altindaki slogan metinlerini yukari kaydir */
  .framer-1lnca7s,
  [data-framer-name="Header"] h1,
  [data-framer-name="Header"] .framer-text,
  header.framer-lbar7k > div:not(.mobile-hero-showcase) {
    transform: translateY(-60px) !important;
    margin-bottom: -50px !important;
  }

  /* Eger flex/absolute layout ise yukari pozisyonla */
  header.framer-lbar7k {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
}

@media screen and (max-width: 1023px) {
  /* 1. Yazilarin ic ice girmesini engelle - Dikey araligi ve line-height'i duzelt */
  .framer-1lnca7s,
  [data-framer-name="Header"] h1,
  [data-framer-name="Header"] .framer-text {
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
    transform: translateY(-40px) !important; /* Cok fazla binmesin */
  }

  [data-framer-name="Header"] p,
  .framer-styles-preset-4ij5qs {
    margin-top: 15px !important;
    line-height: 1.4em !important;
  }

  /* 2. Fotograflarin uzerindeki karartilari TAMAMEN KALDIR */
  .mobile-ticker-container {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    filter: none !important;
    background: transparent !important;
  }

  .mobile-ticker-item {
    opacity: 1 !important; /* Fotograflar %100 net ve parlak */
    filter: none !important;
  }

  .mobile-ticker-item img {
    filter: none !important;
    opacity: 1 !important;
  }
}

@media screen and (max-width: 1023px) {
  /* 1. Bilgi rozeti ile alt bölüm arasindaki buyuk siyah boslugu kapat */
  .stoneart-middle-showcase {
    padding-top: 15px !important;
    margin-top: 0px !important;
  }

  /* 2. Tag'lerin (Realistic Black & Grey...) ic ice girmesini engelle ve hizala */
  .stoneart-middle-showcase .showcase-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px 10px !important;
    margin-bottom: 15px !important;
    margin-top: 10px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .stoneart-middle-showcase .showcase-tags span {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }

  /* 3. STONEART GALLERY ISTANBUL basligini tag'lerden uzaklastir, cakismayi bitir */
  .stoneart-middle-showcase .showcase-title,
  .stoneart-middle-showcase h2,
  .stoneart-middle-showcase h3 {
    margin-top: 10px !important;
    line-height: 1.3 !important;
    position: relative !important;
    z-index: 2 !important;
    clear: both !important;
  }
}

@media screen and (max-width: 1023px) {
  /* Mobil badge clone alt boslugunu daralt */
  .stoneart-info-badge.mobile-badge-clone {
    margin-bottom: 5px !important;
  }

  .mobile-action-panel {
    padding-bottom: 5px !important;
    margin-bottom: 0px !important;
  }

  /* Middle showcase bölümünü yukari cek, aradaki siyah boslugu yok et */
  .stoneart-middle-showcase {
    padding-top: 5px !important;
    margin-top: -15px !important;
  }

  /* Tag'lerin ust boslugunu sifirla */
  .stoneart-middle-showcase .showcase-tags {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
}

@media screen and (max-width: 1023px) {
  /* Mobile Badge Clone - Tam Simetrik ve Dikey Ortalanmis Hizalama */
  .stoneart-info-badge.mobile-badge-clone {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  .mobile-badge-clone .info-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex: 1 1 0% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
  }

  .mobile-badge-clone .info-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
    margin: 0 !important;
  }

  .mobile-badge-clone .info-icon svg {
    display: block !important;
    margin: 0 !important;
  }

  .mobile-badge-clone .info-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-badge-clone .info-label {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .mobile-badge-clone .info-val,
  .mobile-badge-clone .info-val.link {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    display: block !important;
  }

  .mobile-badge-clone .info-divider {
    height: 24px !important;
    align-self: center !important;
    margin: 0 8px !important;
  }
}

@media screen and (max-width: 1023px) {
  /* BADGE KUTUSUNU SIFIRDAN KUSURSUZ MOBIL GRID HIZALAMAYLA YENIDEN KODLUYORUZ */
  .stoneart-info-badge.mobile-badge-clone {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important;
    background: rgba(18, 18, 20, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    margin-top: 10px !important;
  }

  .mobile-badge-clone .info-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .mobile-badge-clone .info-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .mobile-badge-clone .info-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    stroke: #aaaaaa !important;
  }

  .mobile-badge-clone .info-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .mobile-badge-clone .info-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #888888 !important;
    text-transform: uppercase !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }

  .mobile-badge-clone .info-val,
  .mobile-badge-clone .info-val.link {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }

  .mobile-badge-clone .info-divider {
    width: 1px !important;
    height: 26px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    margin: 0 4px !important;
  }
}

@media screen and (max-width: 1023px) {
  /* IKI TARAFIN DA TASARIMINI BIREBIR ORTALI VE SIK YAP */
  .stoneart-info-badge.mobile-badge-clone {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding: 16px 12px !important;
    background: rgba(18, 18, 20, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
  }

  .mobile-badge-clone .info-item {
    display: flex !important;
    flex-direction: column !important; /* IKON USTTE, YAZI ALTTA */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .mobile-badge-clone .info-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .mobile-badge-clone .info-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: rgba(255, 255, 255, 0.6) !important;
    display: block !important;
  }

  .mobile-badge-clone .info-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 2px !important;
  }

  .mobile-badge-clone .info-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .mobile-badge-clone .info-val,
  .mobile-badge-clone .info-val.link {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .mobile-badge-clone .info-divider {
    width: 1px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    align-self: center !important;
  }
}

/* =========================================================================
   MASTER UNIFIED MOBILE HEADER & POPUP MENU ENGINE (ALL PAGES 100% IDENTICAL)
   Tüm HTML sayfalarinda header ve acilir menüyü anasayfa ile birebir esitleyen master CSS
  ========================================================================= */

@media screen and (max-width: 1023px) {
  /* 1. Header Konum & Z-Index Zirhi */
  .stoneart-framer-mobile-header {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 2147483646 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .stoneart-framer-mobile-header nav,
  .stoneart-framer-mobile-header nav.framer-32ox9 {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 60px !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 65%, rgba(0, 0, 0, 0) 100%) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 2. Logo Hizalama */
  .stoneart-framer-mobile-header .framer-text {
    font-size: 26px !important;
    letter-spacing: -0.1em !important;
    color: #ffffff !important;
    font-family: "League Spartan", sans-serif !important;
  }

  /* 3. Hamburger Butonu */
  .stoneart-framer-mobile-header .framer-rhq1eu-container,
  .stoneart-framer-mobile-header .nav-toggle-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    background: rgba(0, 0, 0, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 2147483647 !important;
  }

  /* 4. Acilir Menu Card (Tüm Sayfalarda Birebir Ayni Floating Card) */
  #stoneart-nav-links,
  .navbar-links {
    position: fixed !important;
    top: 68px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    width: 220px !important;
    max-width: 220px !important;
    height: auto !important;
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
    background: rgba(18, 18, 18, 0.97) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 16px 18px !important;
    gap: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.92) translateY(-8px) !important;
    transform-origin: top right !important;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.22s !important;
    z-index: 2147483647 !important;
    margin: 0 !important;
  }

  /* Acik Durum */
  #stoneart-nav-links.active,
  .navbar-links.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) translateY(0) !important;
  }

  /* Menu Linkleri */
  #stoneart-nav-links a.nav-link,
  .navbar-links a.nav-link,
  #stoneart-nav-links a:not(:last-child),
  .navbar-links a:not(:last-child) {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 11px 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    text-align: left !important;
    display: block !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
    text-decoration: none !important;
  }

  #stoneart-nav-links a.nav-link.active,
  .navbar-links a.nav-link.active {
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  /* Iletisim Butonu */
  #stoneart-nav-links a.nav-btn,
  .navbar-links a.nav-btn,
  #stoneart-nav-links a:last-child,
  .navbar-links a:last-child {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    color: #0a0a0a !important;
    text-align: center !important;
    font-weight: 700 !important;
    padding: 10px 0 !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 11px !important;
    border: none !important;
    text-decoration: none !important;
  }

  /* Masaüstü Navbar Kapsayicisi Mobilde Baslik / Buton Gizle */
  .stoneart-navbar > .navbar-container > .navbar-brand,
  .stoneart-navbar > .navbar-container > button.nav-toggle-btn {
    display: none !important;
  }
}

/* =========================================================================
   NAV-LINKS SOLID BACKGROUND OVERRIDE (NO MORE TRANSPARENCY BLEEDING)
   Tüm sayfalarda acilan kartin arkasi tam tok koyu siyah (#0c0c0e) kilitli
  ========================================================================= */

@media screen and (max-width: 1023px) {
  #stoneart-nav-links,
  .navbar-links,
  div[id="stoneart-nav-links"],
  #stoneart-nav-links.active,
  .navbar-links.active {
    background: #0c0c0e !important;
    background-color: #0c0c0e !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    opacity: 1 !important;
  }
}

/* =========================================================================
   HIZMETLER.HTML MOBILE ENGINE FIX (VIDEO SHOWCASE & HERO SECTION)
   320px + 1fr grid bozuklugunu ve yatay kaymayi kokeninden giderir
  ========================================================================= */

@media screen and (max-width: 1023px) {
  /* 1. Services Hero Section Hizalama */
  .services-hero-section {
    padding: 75px 16px 20px 16px !important;
    text-align: center !important;
    margin-top: 0 !important;
  }

  .services-hero-section .hero-title {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  .services-hero-section .hero-desc {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* 2. Video & Felsefe Satirlari (Gerekli Tek Sutun Flex/Grid Yapisi) */
  .services-video-showcase {
    max-width: 100% !important;
    margin: 20px auto 50px auto !important;
    padding: 0 16px !important;
    gap: 50px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .video-philosophy-row {
    display: flex !important;
    flex-direction: column !important; /* Mobilde Tek Sutun Dikey Dizilim */
    align-items: center !important;
    justify-content: center !important;
    gap: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .video-philosophy-row.reverse {
    flex-direction: column !important; /* Reverse siralama da mobilde tek sutun */
  }

  /* 3. Dikey Telefon Video Frame Yapisi */
  .video-custom-frame {
    width: 100% !important;
    max-width: 220px !important; /* Mobilde ideal dikey telefon genisligi */
    height: 480px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8) !important;
    flex-shrink: 0 !important;
  }

  .video-custom-frame video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 4. Video Yanindaki Metin Kolonu */
  .philosophy-text-col {
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .philosophy-text-col .subtitle {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    margin-bottom: 8px !important;
  }

  .philosophy-text-col .title {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  .philosophy-text-col .desc {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }
}

@media screen and (max-width: 1023px) {
  /* Hizmet Kartlari Grid - Mobilde Tek Sutun & Cuk Oturan Kartlar */
  .services-grid-section {
    padding: 30px 16px !important;
  }

  .services-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .service-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 24px 20px !important;
    box-sizing: border-box !important;
    background: rgba(18, 18, 20, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
  }

  .service-num {
    font-size: 2rem !important;
    margin-bottom: 10px !important;
  }

  .service-title {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  .service-text {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 14px !important;
  }

  .service-features li {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
}

/* HERO TITLE SELECTED SPAN GLOWING BORDER-BOTTOM ENHANCEMENT */
.hero-title span,
.services-hero-section .hero-title span,
.gallery-hero-section .hero-title span,
.blog-hero-section .hero-title span {
  color: #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.35) !important;
  display: inline-block !important;
  padding-bottom: 4px !important;
}

/* HERO TITLE SPAN BORDER REMOVAL */
.hero-title span,
.services-hero-section .hero-title span,
.gallery-hero-section .hero-title span,
.blog-hero-section .hero-title span {
  border-bottom: none !important;
  box-shadow: none !important;
  padding-bottom: 0 !important;
}

/* MOBILE NAV POPUP ACTIVE LINK WHITE GLOW & UNDERLINE ENHANCEMENT */
@media screen and (max-width: 1023px) {
  #stoneart-nav-links a.nav-link.active,
  .navbar-links a.nav-link.active {
    color: #ffffff !important;
    font-weight: 800 !important;
    border-bottom: 2px solid #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4) !important;
    padding-bottom: 6px !important;
    margin-bottom: 4px !important;
    width: fit-content !important;
  }
}

/* REMOVE ALL HEAVY BORDER/GLOW EFFORTS FROM ALL PAGES & MENU */
.hero-title span,
.services-hero-section .hero-title span,
.gallery-hero-section .hero-title span,
.blog-hero-section .hero-title span {
  border-bottom: none !important;
  box-shadow: none !important;
  padding-bottom: 0 !important;
}

/* ELEGANT & LUXURIOUS MINIMALIST ACTIVE LINK STYLING IN POPUP MENU */
@media screen and (max-width: 1023px) {
  #stoneart-nav-links a.nav-link.active,
  .navbar-links a.nav-link.active {
    color: #ffffff !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding-left: 12px !important;
    position: relative !important;
    width: 100% !important;
  }

  /* Aktif linkin soluna minimalist luks nokta vurgusu */
  #stoneart-nav-links a.nav-link.active::before,
  .navbar-links a.nav-link.active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
  }
}

/* =========================================================================
   ULTRA-FAST MOBILE PAGE TRANSITION OVERLAY FIX (NO MORE HEADER BLEEDING)
   Loading ekraninda header'in ustte kalip donmasini kokeninden imha eder
  ========================================================================= */

@media screen and (max-width: 1023px) {
  /* Loading ekraninin z-index'ini zirveye kilitliyoruz - Header'i tam kaplasin */
  #stoneart-page-transition,
  .stoneart-transition-overlay {
    z-index: 21474836479 !important; /* Mutlak Hükümdar Z-Index */
    background: #040405 !important;
    background-color: #040405 !important;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s ease !important;
  }

  #stoneart-page-transition.hidden,
  .stoneart-transition-overlay.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }
}

/* CINEMATIC BLUR & FADE-IN PAGE REVEAL ANIMATION (MOBILE UNIFIED) */
@keyframes stoneartCinematicRevealMobile {
  0% {
    opacity: 0 !important;
    filter: blur(16px) brightness(0.75) !important;
    transform: scale(0.985) !important;
  }
  100% {
    opacity: 1 !important;
    filter: blur(0px) brightness(1) !important;
    transform: scale(1) !important;
  }
}

@media screen and (max-width: 1023px) {
  #main,
  .framer-5zruV,
  .services-hero-section,
  .gallery-hero-section,
  .blog-hero-section,
  .contact-hero-section,
  .studio-content-wrap {
    animation: stoneartCinematicRevealMobile 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
}

/* =========================================================================
   EXACT MATCH CINEMATIC PAGE TRANSITION OVERLAY & BLUR REVEAL
   Anasayfadaki sinematik logo overlay & bulanikliktan netleserek acilma efekti
  ========================================================================= */

#stoneart-page-transition {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background-color: #030303 !important;
  z-index: 2147483640 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s, filter 0.45s ease !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  will-change: opacity, transform, filter;
  filter: blur(0px) !important;
}

#stoneart-page-transition.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(1.04) !important;
  filter: blur(12px) !important;
}

.transition-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 120px !important;
  height: 120px !important;
}

.transition-logo {
  width: 90px !important;
  height: auto !important;
  object-fit: contain !important;
  animation: stoneartPulse 1.8s ease-in-out infinite alternate !important;
}

@keyframes stoneartPulse {
  0% { transform: scale(0.95); opacity: 0.7; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); }
  100% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 25px rgba(255,255,255,0.7)); }
}

/* =========================================================================
   ABSOLUTE ZERO-BLEED LOADING OVERLAY Z-INDEX ENGINE (NO HEADER LEAK)
   Loading esnasinda header, yazı ve buton sızıntılarını %100 yok eder
  ========================================================================= */

/* Mutlak En Üst Z-Index (Header'dan daha yüksek) */
#stoneart-page-transition,
.stoneart-transition-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background-color: #030303 !important;
  z-index: 214748364799 !important; /* Header z-index: 2147483646'yi ezmek icin mutlak zirve */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Loading aktifken Header ve Navigasyonu TAMAMEN GIZLE */
/* ABSOLUTE MOBILE & DESKTOP LOGO VISIBILITY OVERRIDE EXPLOIT */
.site-desktop-logo-img,
.site-mobile-logo-img,
.navbar-brand img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-height: 42px !important;
  height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* PERFECT MOBILE LOGO CENTER & ALIGNMENT EXPLOIT */
@media screen and (max-width: 1023px) {
  .stoneart-framer-mobile-header nav,
  .stoneart-framer-mobile-header .framer-32ox9,
  .stoneart-framer-mobile-header .framer-jim66o,
  .stoneart-framer-mobile-header .framer-1iyuhy8,
  .stoneart-framer-mobile-header .framer-uwmsk7,
  .stoneart-navbar .navbar-container {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 56px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .site-mobile-logo-img,
  .site-desktop-logo-img,
  .stoneart-navbar .navbar-brand img,
  .stoneart-framer-mobile-header img,
  .stoneart-framer-mobile-header .framer-uwmsk7 img,
  .stoneart-framer-mobile-header .framer-1iyuhy8 img {
    height: 26px !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: 150px !important;
    object-fit: contain !important;
    display: block !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    vertical-align: middle !important;
    transform: translateY(0px) !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
  }

  .stoneart-navbar .navbar-brand,
  .stoneart-framer-mobile-header .framer-1iyuhy8,
  .stoneart-framer-mobile-header .framer-uwmsk7 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    max-height: 36px !important;
    width: auto !important;
    max-width: 160px !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

.stoneart-navbar .navbar-brand,
.stoneart-framer-mobile-header .framer-uwmsk7,
.stoneart-framer-mobile-header a {
  display: flex !important;
  align-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* STRICT OVERRIDE FOR MOBILE HEADER LOGO PREVENTING CPANEL OVERFLOW */
@media screen and (max-width: 1023px) {
  .stoneart-framer-mobile-header img.site-mobile-logo-img,
  .stoneart-framer-mobile-header nav img,
  .stoneart-framer-mobile-header .framer-uwmsk7 img {
    max-height: 28px !important;
    height: 26px !important;
    max-width: 140px !important;
    width: auto !important;
    object-fit: contain !important;
  }
}

/* ABSOLUTE MOBILE VIDEO AUTOPLAY & NO-CONTROLS EXPLOIT */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.video-custom-frame video {
  pointer-events: none !important;
  object-fit: cover !important;
}

.video-custom-frame .video-play-toggle-btn {
  pointer-events: auto !important;
  z-index: 10 !important;
}

body:has(#stoneart-page-transition:not(.hidden)) .stoneart-framer-mobile-header,
body:has(#stoneart-page-transition:not(.hidden)) .stoneart-navbar,
body:has(#stoneart-page-transition:not(.hidden)) header {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Loading bittiginde perdenin arkasindan header pürüzsüzce belirsin */
#stoneart-page-transition.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================================
   DESKTOP (PC) VS MOBILE NAVBAR BREAKPOINT ISOLATION
   PC versiyonunda navbar'in arkasini tamamen seffaf ve orijinal yapar,
   Mobil versiyonda ise floating koyu kart stilini korur.
  ========================================================================= */

/* PC (DESKTOP) NAVBAR STYLING - REVERT TO ORIGINAL TRANSPARENT */
@media screen and (min-width: 1024px) {
  #stoneart-nav-links,
  .navbar-links {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 32px !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #stoneart-nav-links a.nav-link,
  .navbar-links a.nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  #stoneart-nav-links a.nav-link.active,
  .navbar-links a.nav-link.active {
    color: #ffffff !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
  }

  #stoneart-nav-links a.nav-link.active::before,
  .navbar-links a.nav-link.active::before {
    display: none !important;
  }
}

/* MOBILE POPUP CARD STYLING - ONLY FOR SCREENS <= 1023px */
@media screen and (max-width: 1023px) {
  #stoneart-nav-links,
  .navbar-links {
    background: #0c0c0e !important;
    background-color: #0c0c0e !important;
  }
}

/* STONEART MIDDLE SHOWCASE REAL-MOBILE SAFARI & CHROME FIX */
.showcase-title-mobile-wrapper {
  display: none;
}

@media screen and (max-width: 1023px) {
  /* Fix 1: Ensure showcase-tags and showcase section sit cleanly BELOW mobile-badge-clone */
  .stoneart-info-badge.mobile-badge-clone,
  div.mobile-badge-clone {
    margin-bottom: 15px !important;
    padding-bottom: 0px !important;
  }

  .stoneart-middle-showcase {
    margin-top: 45px !important;
    padding-top: 15px !important;
    clear: both !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .stoneart-middle-showcase .showcase-content-col {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Ensure showcase-tags is fully visible and not hidden under badge */
  .stoneart-middle-showcase .showcase-tags {
    margin-top: 15px !important;
    padding-top: 5px !important;
    justify-content: center !important;
    width: 100% !important;
    clear: both !important;
    position: relative !important;
    z-index: 12 !important;
  }

  .stoneart-middle-showcase .showcase-title {
    display: none !important;
  }

  /* Perfect center alignment for mobile logos */
  .stoneart-middle-showcase .showcase-title-mobile-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    margin: 15px auto 20px auto !important;
    width: 100% !important;
    position: relative !important;
    z-index: 15 !important;
    clear: both !important;
  }

  /* Force absolute centering on kutu.png */
  html body .stoneart-middle-showcase .showcase-title-mobile-wrapper img.showcase-mobile-kutu,
  html body .stoneart-middle-showcase img.showcase-mobile-kutu,
  html body img.showcase-mobile-kutu,
  .showcase-mobile-kutu {
    width: 75px !important;
    max-width: 75px !important;
    min-width: 0 !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.4)) !important;
  }

  /* Force absolute centering on yazi.png */
  html body .stoneart-middle-showcase .showcase-title-mobile-wrapper img.showcase-mobile-yazi,
  html body .stoneart-middle-showcase img.showcase-mobile-yazi,
  html body img.showcase-mobile-yazi,
  .showcase-mobile-yazi {
    width: 240px !important;
    max-width: 85% !important;
    min-width: 0 !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    object-fit: contain !important;
    filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.4)) !important;
  }
}