/* ==========================================================================
   V76 MOBILE ONLY PATCH
   Masaüstüne dokunmaz: sadece 860px ve altı.
   Çözdüğü iki konu:
   1) Mobil hamburger ikon görünür ve menü açılır.
   2) Ana slider mobilde: metin üstte, buton+yayın rozeti aynı satırda,
      görsel altta; oklar görsel altındaki ince gradient bandında.
   ========================================================================== */

@media (max-width: 860px){

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    margin:0 !important;
  }

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

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

  .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:18px !important;
    padding-right:18px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* =========================
     ÜST MENÜ / HAMBURGER
     ========================= */
  .site-header{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
    background:#fff !important;
    position:relative !important;
    z-index:1000 !important;
  }

  .header-inner{
    width:100% !important;
    max-width:100% !important;
    min-height:104px !important;
    padding:14px 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
  }

  .logo-link{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    max-width:72vw !important;
  }

  .brand-logo{
    display:block !important;
    width:min(250px, 70vw) !important;
    max-width:70vw !important;
    height:auto !important;
  }

  .menu-toggle{
    display:flex !important;
    position:absolute !important;
    right:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:1100 !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    padding:8px !important;
    border:1px solid rgba(185,121,37,.55) !important;
    border-radius:6px !important;
    background:#fff !important;
    box-shadow:0 6px 18px rgba(0,0,0,.06) !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:5px !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    font-size:0 !important;
    color:transparent !important;
  }

  .menu-toggle span,
  .menu-toggle::before,
  .menu-toggle::after{
    content:"" !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:3px !important;
    min-height:3px !important;
    border-radius:3px !important;
    background:#111923 !important;
    opacity:1 !important;
    visibility:visible !important;
    flex:0 0 3px !important;
  }

  .menu-toggle span{
    background:#111923 !important;
  }

  .main-nav{
    display:none !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    width:100% !important;
    max-width:100% !important;
    background:#fff !important;
    z-index:1090 !important;
    padding:8px 18px 16px !important;
    flex-direction:column !important;
    gap:0 !important;
    box-shadow:0 18px 28px rgba(0,0,0,.12) !important;
  }

  .site-header.menu-open .main-nav{
    display:flex !important;
  }

  .main-nav a{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    padding:14px 0 !important;
    white-space:normal !important;
    color:#111923 !important;
  }

  /* =========================
     ANA SAYFA MOBİL SLIDER
     ========================= */
  .hero-slider{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    background:#fff !important;
    position:relative !important;
  }

  .hero-slider::before{
    display:none !important;
    content:none !important;
  }

  .hero-content{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
    position:relative !important;
    z-index:2 !important;
    background:#fff !important;
    padding:0 !important;
  }

  .hero-copy{
    width:100% !important;
    max-width:100% !important;
    padding:28px 0 20px !important;
  }

  .hero-copy .eyebrow,
  .eyebrow{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    max-width:100% !important;
    margin:0 0 11px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    letter-spacing:.04em !important;
    white-space:normal !important;
    color:#b87925 !important;
  }

  .hero-copy .eyebrow::before,
  .eyebrow::before{
    width:32px !important;
    flex:0 0 32px !important;
  }

  .hero-copy h1{
    width:100% !important;
    max-width:100% !important;
    font-size:27px !important;
    line-height:1.09 !important;
    margin:0 0 14px !important;
    letter-spacing:.01em !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .hero-copy p{
    width:100% !important;
    max-width:100% !important;
    font-size:14px !important;
    line-height:1.42 !important;
    margin:0 0 16px !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  /* İçeriği Gör + Yayında rozet tek satır */
  .hero-cta-group{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr) !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
  }

  .hero-copy .btn,
  .hero-cta-group .btn{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    height:44px !important;
    padding:9px 10px !important;
    font-size:11.5px !important;
    line-height:1.15 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    background:#fff !important;
  }

  .hero-status-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .hero-status-badge{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:44px !important;
    min-height:44px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }

  .hero-status-badge .label,
  .hero-status-badge .platform{
    min-width:0 !important;
    height:44px !important;
    min-height:44px !important;
    font-size:10.8px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 7px !important;
  }

  .hero-status-badge .label{
    flex:0 0 50% !important;
  }

  .hero-status-badge .platform{
    flex:1 1 50% !important;
  }

  .hero-media{
    order:2 !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    height:245px !important;
    min-height:245px !important;
    max-height:245px !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    opacity:1 !important;
    filter:saturate(1.06) contrast(1.04) !important;
    transform:none !important;
    z-index:1 !important;
  }

  .hero-media::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:48px !important;
    background:linear-gradient(180deg, rgba(9,18,28,0) 0%, rgba(9,18,28,.64) 100%) !important;
    z-index:2 !important;
    pointer-events:none !important;
  }

  /* Oklar yuvarlaksız, görselin alt bandında */
  .slider-arrow{
    top:auto !important;
    bottom:13px !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#d6a257 !important;
    z-index:30 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:42px !important;
    line-height:1 !important;
    opacity:1 !important;
    padding:0 !important;
  }

  .slider-prev{left:18px !important;}
  .slider-next{right:18px !important;}

  .slider-dots{
    bottom:25px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    max-width:calc(100% - 120px) !important;
    display:flex !important;
    justify-content:center !important;
    gap:8px !important;
    z-index:31 !important;
  }

  .slider-dots button{
    width:9px !important;
    height:9px !important;
    flex:0 0 9px !important;
    border-radius:50% !important;
    background:#fff !important;
    border:1px solid rgba(255,255,255,.85) !important;
    opacity:.95 !important;
  }

  .slider-dots button.active{
    background:#d6a257 !important;
    border-color:#d6a257 !important;
  }

  /* Güvenlik: metinler ekran dışına taşmasın */
  p,h1,h2,h3,h4,h5,h6,li,a,span{
    max-width:100% !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
}

@media (max-width:560px){
  .container{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .header-inner{
    min-height:96px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .brand-logo{
    width:min(220px, 66vw) !important;
    max-width:66vw !important;
  }

  .menu-toggle{
    right:14px !important;
    width:40px !important;
    height:40px !important;
  }

  .hero-copy{
    padding-top:24px !important;
    padding-bottom:16px !important;
  }

  .hero-copy h1{
    font-size:25px !important;
    line-height:1.08 !important;
  }

  .hero-copy p{
    font-size:13px !important;
  }

  .hero-cta-group{
    grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap:8px !important;
  }

  .hero-copy .btn,
  .hero-cta-group .btn,
  .hero-status-badge,
  .hero-status-badge .label,
  .hero-status-badge .platform{
    height:42px !important;
    min-height:42px !important;
  }

  .hero-copy .btn,
  .hero-cta-group .btn{
    font-size:10.7px !important;
  }

  .hero-status-badge .label,
  .hero-status-badge .platform{
    font-size:10.2px !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }

  .hero-media{
    height:230px !important;
    min-height:230px !important;
    max-height:230px !important;
  }

  .slider-arrow{
    bottom:11px !important;
    font-size:40px !important;
  }

  .slider-dots{
    bottom:23px !important;
  }
}


/* ==========================================================================
   V79 FINAL MOBILE REFINEMENTS
   Sadece mobil:
   1) Referanslar sayfasında hamburger menüyü görünür/açılır tutar.
   2) Ana sayfa "Neler Yapıyoruz?" kartlarını sıkıştırır, linklerin karışmasını engeller.
   ========================================================================== */

@media (max-width: 860px){

  /* Referanslar dahil tüm sayfalarda üst menü görünürlüğü */
  body .site-header{
    position:relative !important;
    z-index:9999 !important;
    overflow:visible !important;
    background:#fff !important;
  }

  body .site-header .header-inner{
    position:relative !important;
    z-index:10000 !important;
    overflow:visible !important;
  }

  body .site-header .menu-toggle{
    display:flex !important;
    position:absolute !important;
    right:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:10050 !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    padding:8px !important;
    border:1px solid rgba(185,121,37,.58) !important;
    border-radius:6px !important;
    background:#fff !important;
    box-shadow:0 8px 22px rgba(0,0,0,.08) !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:5px !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    font-size:0 !important;
    color:transparent !important;
  }

  body .site-header .menu-toggle span{
    display:block !important;
    width:100% !important;
    height:3px !important;
    min-height:3px !important;
    flex:0 0 3px !important;
    border-radius:3px !important;
    background:#111923 !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body .site-header .main-nav{
    display:none !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    z-index:10040 !important;
    width:100% !important;
    max-width:100% !important;
    background:#fff !important;
    padding:8px 18px 16px !important;
    flex-direction:column !important;
    gap:0 !important;
    box-shadow:0 18px 30px rgba(0,0,0,.13) !important;
  }

  body .site-header.menu-open .main-nav{
    display:flex !important;
  }

  body .site-header .main-nav a{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    padding:14px 0 !important;
    color:#111923 !important;
    white-space:normal !important;
  }

  /* Ana sayfa: Neler Yapıyoruz? kartlarını mobilde kompakt kart sistemine al */
  .services{
    padding-top:34px !important;
    padding-bottom:34px !important;
  }

  .services .section-title{
    margin-bottom:20px !important;
  }

  .services-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
    border-left:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  .service-item{
    min-width:0 !important;
    width:100% !important;
    min-height:210px !important;
    padding:16px 12px 14px !important;
    border:1px solid #e3ddd4 !important;
    border-radius:6px !important;
    background:#fff !important;
    box-shadow:0 10px 26px rgba(20,20,20,.045) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
    overflow:hidden !important;
  }

  .service-icon{
    width:42px !important;
    height:42px !important;
    margin:0 auto 9px !important;
    flex:0 0 42px !important;
  }

  .service-item h3{
    min-height:34px !important;
    margin:0 0 8px !important;
    font-size:10.8px !important;
    line-height:1.18 !important;
    letter-spacing:.015em !important;
  }

  .service-item p{
    min-height:0 !important;
    margin:0 0 11px !important;
    font-size:11.2px !important;
    line-height:1.38 !important;
    font-weight:560 !important;
    color:#303a43 !important;
  }

  .service-item .text-link{
    margin-top:auto !important;
    padding-top:10px !important;
    border-top:1px solid #eee7dd !important;
    width:100% !important;
    display:block !important;
    font-size:10.8px !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:normal !important;
    color:#b97925 !important;
  }
}

@media (max-width: 370px){
  .services-grid{
    grid-template-columns:1fr !important;
  }
  .service-item{
    min-height:0 !important;
  }
}


/* ==========================================================================
   V80 FINAL MOBILE REVISIONS
   - Mobil menü tüm sayfalarda görünür ve açılır.
   - Ana sayfa Yeni Nesil Immersive Deneyimler kartları mobilde gereksiz boşluksuz/kısa.
   - Masaüstü 861px+ etkilenmez.
   ========================================================================== */
@media (max-width:860px){

  body .site-header{
    position:relative !important;
    z-index:99999 !important;
    overflow:visible !important;
    background:#fff !important;
  }

  body .site-header .header-inner{
    position:relative !important;
    z-index:100000 !important;
    overflow:visible !important;
    min-height:96px !important;
  }

  body .site-header .menu-toggle{
    display:flex !important;
    position:absolute !important;
    right:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:100200 !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    padding:8px !important;
    border:1px solid rgba(185,121,37,.62) !important;
    border-radius:6px !important;
    background:#fff !important;
    box-shadow:0 8px 22px rgba(0,0,0,.10) !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:5px !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    font-size:0 !important;
    color:transparent !important;
  }

  body .site-header .menu-toggle span{
    display:block !important;
    width:100% !important;
    height:3px !important;
    min-height:3px !important;
    flex:0 0 3px !important;
    border-radius:3px !important;
    background:#111923 !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body .site-header .main-nav{
    display:none !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    width:100% !important;
    max-width:100% !important;
    z-index:100100 !important;
    background:#fff !important;
    padding:8px 18px 16px !important;
    flex-direction:column !important;
    gap:0 !important;
    box-shadow:0 18px 30px rgba(0,0,0,.14) !important;
  }

  body .site-header.menu-open .main-nav{
    display:flex !important;
  }

  body .site-header .main-nav a{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    padding:14px 0 !important;
    color:#111923 !important;
    white-space:normal !important;
  }

  /* Ana sayfa Yeni Nesil Immersive Deneyimler kartlarını mobilde kısalt */
  .experiences{
    padding-top:28px !important;
    padding-bottom:30px !important;
  }

  .experiences .section-title{
    margin-bottom:20px !important;
  }

  .experience-grid{
    gap:14px !important;
  }

  .experience-card{
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:104px minmax(0, 1fr) !important;
    align-items:stretch !important;
    border-radius:6px !important;
    overflow:hidden !important;
  }

  .experience-card img{
    width:104px !important;
    height:100% !important;
    min-height:138px !important;
    max-height:160px !important;
    object-fit:cover !important;
  }

  .experience-card div{
    min-height:0 !important;
    padding:14px 14px 13px !important;
    text-align:left !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }

  .experience-card h3{
    min-height:0 !important;
    height:auto !important;
    margin:0 0 8px !important;
    font-size:13px !important;
    line-height:1.18 !important;
    text-align:left !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
  }

  .experience-card p{
    min-height:0 !important;
    margin:0 0 10px !important;
    font-size:12px !important;
    line-height:1.38 !important;
    text-align:left !important;
  }

  .experience-card .card-btn,
  .experience-card .text-link,
  .experience-card a:not(.experience-card){
    margin-top:auto !important;
    font-size:11px !important;
    line-height:1.2 !important;
    padding:0 !important;
    width:auto !important;
    max-width:100% !important;
    text-align:left !important;
  }
}

@media (max-width:390px){
  .experience-card{
    grid-template-columns:92px minmax(0,1fr) !important;
  }
  .experience-card img{
    width:92px !important;
    min-height:132px !important;
  }
  .experience-card div{
    padding:12px 12px !important;
  }
}

/* ==========================================================================
   V82 MOBILE FINAL TOUCHES
   1) Yeni Nesil Immersive alt sayfalarında mobil yatay taşmayı keser.
   2) Masaüstünü etkilemez.
   ========================================================================== */
@media (max-width:860px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}

  body:has(.museum-hero),
  body:has(.museum-page),
  body:has(.immersive-page),
  body:has(.digital-museum-page),
  body:has(.hologram-page),
  body:has(.interactive-page){
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body:has(.museum-hero) main,
  body:has(.museum-hero) section,
  body:has(.museum-hero) .container,
  body:has(.museum-hero) .museum-hero,
  body:has(.museum-hero) .museum-intro,
  body:has(.museum-hero) .museum-section,
  body:has(.museum-hero) .museum-related,
  body:has(.museum-hero) .museum-intro-grid,
  body:has(.museum-hero) .museum-related .experience-grid,
  body:has(.museum-hero) .experience-grid,
  body:has(.museum-hero) .tech-grid,
  body:has(.museum-hero) .related-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }

  body:has(.museum-hero) .museum-hero .container,
  body:has(.museum-hero) .museum-intro-grid,
  body:has(.museum-hero) .museum-related .experience-grid,
  body:has(.museum-hero) .experience-grid,
  body:has(.museum-hero) .tech-grid,
  body:has(.museum-hero) .related-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:22px!important;
  }

  body:has(.museum-hero) .museum-hero .container > *,
  body:has(.museum-hero) .museum-intro-grid > *,
  body:has(.museum-hero) .experience-grid > *,
  body:has(.museum-hero) .tech-grid > *,
  body:has(.museum-hero) .related-grid > *,
  body:has(.museum-hero) .museum-visual,
  body:has(.museum-hero) .museum-side-visual,
  body:has(.museum-hero) .experience-card,
  body:has(.museum-hero) .tech-item,
  body:has(.museum-hero) figure{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow:hidden!important;
  }

  body:has(.museum-hero) .museum-visual img,
  body:has(.museum-hero) .museum-side-visual img,
  body:has(.museum-hero) .experience-card img,
  body:has(.museum-hero) .tech-item img,
  body:has(.museum-hero) figure img{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    object-fit:cover!important;
  }

  body:has(.museum-hero) h1,
  body:has(.museum-hero) h2,
  body:has(.museum-hero) h3,
  body:has(.museum-hero) p,
  body:has(.museum-hero) li,
  body:has(.museum-hero) a,
  body:has(.museum-hero) span{
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  body:has(.museum-hero) .visual-techline{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    max-width:100%!important;
  }
}

/* :has desteklemeyen mobil tarayıcılar için fallback */
@media (max-width:860px){
  .museum-hero,
  .museum-intro,
  .museum-section,
  .museum-related,
  .museum-intro-grid,
  .museum-related .experience-grid,
  .tech-grid,
  .related-grid{
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .museum-hero .container,
  .museum-intro-grid,
  .museum-related .experience-grid,
  .tech-grid,
  .related-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }

  .museum-hero .container > *,
  .museum-intro-grid > *,
  .museum-related .experience-grid > *,
  .tech-grid > *,
  .related-grid > *,
  .museum-visual,
  .museum-side-visual,
  .experience-card,
  .tech-item{
    min-width:0!important;
    max-width:100%!important;
  }
}