/* ==================================================
   RESPONSIVE — SADECE MENÜ / BUTON
   Paneller PC görünümünü korur (ölçekli 1920×1080 sahne).
================================================== */

@media (max-width: 1024px) and (orientation: portrait) {
    html.has-open-panel .mobile-menu-stack,
    html.has-open-panel .hero-info,
    html.has-open-panel .lang-switch {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
}

/* ==================================================
   MOBİL / TABLET DİKEY — BUTON GÖRÜNÜMÜ
================================================== */

html.is-mobile.is-portrait .hero-info,
html.is-tablet.is-portrait .hero-info {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  top: calc(36px / var(--canvas-scale, 1)) !important;
  scale: calc(0.58 / var(--canvas-scale, 1)) !important;
  translate: -50% 0 !important;
  transform-origin: top center !important;
  z-index: 910 !important;
  background: rgba(5, 5, 10, 0.55) !important;
  padding: 6px 12px 6px 10px !important;
  min-width: 0 !important;
  width: max-content !important;
  max-width: calc(100vw / var(--canvas-scale, 1) - 48px) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(6px) !important;
  text-align: left !important;
  gap: 0 !important;
}

html.is-mobile.is-portrait .hero-info__icon img,
html.is-tablet.is-portrait .hero-info__icon img {
  width: 96px !important;
}

html.is-mobile.is-portrait .hero-info__text,
html.is-tablet.is-portrait .hero-info__text {
  margin-left: -52px !important;
  transform: translateY(-2px) !important;
  gap: 2px !important;
}

html.is-mobile.is-portrait .hero-info__text h1,
html.is-tablet.is-portrait .hero-info__text h1 {
  font-size: 28px !important;
}

html.is-mobile.is-portrait .hero-info__text p,
html.is-tablet.is-portrait .hero-info__text p {
  font-size: 16px !important;
}

html.is-mobile.is-portrait .mobile-menu-stack {
  top: 118px !important;
}

html.is-mobile.is-portrait.is-compact-height .mobile-menu-stack {
  top: 108px !important;
}

html.is-tablet.is-portrait .mobile-menu-stack {
  top: 132px !important;
}

html.is-mobile.is-portrait .mobile-menu-stack :is(.experience-trigger, .prologue-trigger, .foundation-trigger),
html.is-tablet.is-portrait .mobile-menu-stack :is(.experience-trigger, .prologue-trigger, .foundation-trigger) {
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 0 16px 0 18px !important;
}

/* Mobilde Foundation: ikon solda, başlık sağda */
html.is-mobile.is-portrait .mobile-menu-stack .foundation-trigger__icon,
html.is-tablet.is-portrait .mobile-menu-stack .foundation-trigger__icon {
  order: -1 !important;
}

html.is-mobile.is-portrait .mobile-menu-stack .experience-trigger__dot,
html.is-tablet.is-portrait .mobile-menu-stack .experience-trigger__dot {
  display: none !important;
}

html.is-mobile.is-portrait .mobile-menu-stack :is(.experience-trigger__mark, .prologue-trigger__icon, .foundation-trigger__icon),
html.is-tablet.is-portrait .mobile-menu-stack :is(.experience-trigger__mark, .prologue-trigger__icon, .foundation-trigger__icon) {
  flex: 0 0 27px !important;
  width: 27px !important;
  height: 27px !important;
  margin: 0 !important;
}

html.is-mobile.is-portrait .mobile-menu-stack :is(.experience-trigger__label, .prologue-trigger__label, .foundation-trigger__label),
html.is-tablet.is-portrait .mobile-menu-stack :is(.experience-trigger__label, .prologue-trigger__label, .foundation-trigger__label) {
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
}

/* Modül dışına taşınınca var(--*-cyan) kopuyor — PC ile aynı yazı renkleri */
html.has-mobile-menu-stack .mobile-menu-stack .experience-trigger,
html.has-mobile-menu-stack .mobile-menu-stack .experience-trigger__label {
  color: #ff4c4a !important;
  text-shadow:
    0 0 3px rgba(255, 76, 74, 0.38),
    0 0 6px rgba(255, 76, 74, 0.14) !important;
}

html.has-mobile-menu-stack .mobile-menu-stack .prologue-trigger,
html.has-mobile-menu-stack .mobile-menu-stack .prologue-trigger__label {
  color: #00ffff !important;
  text-shadow:
    0 0 3px rgba(0, 247, 255, 0.25),
    0 0 6px rgba(0, 247, 255, 0.08) !important;
}

html.has-mobile-menu-stack .mobile-menu-stack .foundation-trigger,
html.has-mobile-menu-stack .mobile-menu-stack .foundation-trigger__label {
  color: #e0fe5f !important;
  text-shadow:
    0 0 3px rgba(224, 254, 95, 0.38),
    0 0 6px rgba(224, 254, 95, 0.14) !important;
}

html.is-mobile.is-portrait .mobile-menu-stack :is(.experience-trigger, .prologue-trigger, .foundation-trigger):hover,
html.is-tablet.is-portrait .mobile-menu-stack :is(.experience-trigger, .prologue-trigger, .foundation-trigger):hover {
  transform: translateX(5px) !important;
}

html.is-mobile.is-portrait .mobile-menu-stack :is(.experience-trigger, .prologue-trigger, .foundation-trigger):active,
html.is-tablet.is-portrait .mobile-menu-stack :is(.experience-trigger, .prologue-trigger, .foundation-trigger):active {
  transform: translateX(5px) translateY(1px) scale(0.98) !important;
  background: rgba(0, 247, 255, 0.22) !important;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.72),
    inset 0 -1px 0 rgba(0, 247, 255, 0.12) !important;
}