/* ==========================================================================
   Mia Entertainment — Mobil uyum katmanı
   style.css → studio.css → neon-ui.css'ten SONRA yüklenir; yalnızca
   mobil / tablet taşmalarını ve boşluk sorunlarını düzeltir. Masaüstü
   görünümü (>1328px) değişmez.
   ========================================================================== */

/* ---------- Genel güvenlik ------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }              /* yan kaydırma çıkmasın */
img, video { max-width: 100%; }

/* ---------- Yan boşluklar (gutter) ---------------------------------------
   Kök neden: .hero-inner / .section / .section-tight "padding: X 0" yazdığı
   için .container'ın yan boşluğunu sıfırlıyordu; ekran 1280px'ten dar olunca
   her şey ekran kenarına yapışıyordu. */
@media (max-width: 1328px) {
  body .container,
  body .container-sm,
  body .container-md {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  body .container .container { padding-left: 0; padding-right: 0; }  /* iç içe geçenler */
}
@media (max-width: 640px) {
  body .container,
  body .container-sm,
  body .container-md {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}

/* ---------- Üst menü (açılır menü) ---------------------------------------- */
@media (max-width: 1024px) {
  .mobile-menu {
    max-height: calc(100dvh - 6.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-menu a { min-height: 2.75rem; display: flex; align-items: center; }
  .mobile-menu .mobile-actions a { justify-content: center; }
}

/* ---------- Hero (tablet + mobil) ----------------------------------------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-inner > * { min-width: 0; }
  .hero-visual { margin-top: 0; }
  /* studio.css: position:relative + left:50% kartı yarım genişlik sağa kaydırıyordu */
  .hero-device-card { left: auto; }
}

@media (max-width: 640px) {
  .hero-inner { padding-top: 3.4rem; padding-bottom: 3.6rem; gap: 1.25rem; }

  .hero-kicker {
    max-width: 100%;
    font-size: .68rem;
    white-space: normal;
    padding: .45rem .75rem;
  }

  /* "dünyalara" 390px ekranda taşıyordu */
  .hero h1 {
    font-size: clamp(2.3rem, 12.2vw, 3.6rem);
    line-height: 1.03;
    letter-spacing: -.06em;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  .hero p.lead { font-size: 1rem; line-height: 1.7; margin-top: 1.1rem; }

  /* Butonlar tam genişlik, alt alta */
  .hero-copy .flex { flex-direction: column; align-items: stretch; gap: .7rem; margin-top: 1.5rem; }
  .hero-copy .btn-lg { width: 100%; justify-content: center; text-align: center; padding: .85rem 1.25rem; }

  /* Sürüm / Boyut / Durum: tek satırda 3 sütun */
  .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .15rem;
    margin-top: 1.6rem;
    padding: .7rem .35rem;
  }
  .hero-stats > div { padding: .1rem .55rem; min-width: 0; }
  .hero-stats dt { font-size: .58rem; letter-spacing: .1em; }
  .hero-stats dd { font-size: .92rem; white-space: nowrap; }

  /* Cihaz kartı ekrandan taşıyordu */
  .hero-visual { min-height: 0; margin: .5rem 0 0; padding: 1rem 0 .5rem; }
  .hero-device-card {
    width: 94%;
    max-width: 21rem;
    padding: 1.1rem;
    transform: rotate(-2deg);
  }
  .hero-device-card:hover { transform: rotate(-1deg); }
  .hero-device-logo { width: 3.6rem; height: 3.6rem; margin-bottom: .8rem; }
  .launcher-preview-game > div:nth-child(2) { min-width: 0; }
  .launcher-preview-game strong, .launcher-preview-game small { overflow-wrap: anywhere; }
  .hero-orbit-a { width: 17rem; height: 17rem; }
  .hero-orbit-b { width: 21rem; height: 21rem; }
  .hero-scroll-cue { display: none; }
}

/* ---------- "Mia Evreni" vitrin kartları ---------------------------------- */
@media (max-width: 640px) {
  .discover-section { padding-top: 2.2rem; }
  .discover-head { flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: 1.1rem; }
  .discover-head h2 { font-size: clamp(1.65rem, 8vw, 2.1rem); }
  .spotlight-grid { gap: .85rem; }
  .spotlight-card { min-height: 0; }

  /* Sekizinci Müşteri: logo yazının üstüne biniyordu → görsel üstte, yazı altta */
  .spotlight-game {
    min-height: 0;
    align-items: flex-end;
    padding: 15.25rem 1.35rem 1.4rem;
  }
  .spotlight-game-art { inset: 0 0 auto 0; left: 0; height: 14.25rem; opacity: 1; }
  .spotlight-game-logo {
    left: 50%; right: auto; top: 54%;
    width: 9.6rem; max-width: 60%;
    transform: translate(-50%, -50%);
  }
  .spotlight-ring { right: 50%; transform: translate(50%, -50%) scaleY(.72); width: 22rem; }
  .spotlight-orb { right: 50%; transform: translate(50%, -50%); width: 6rem; }
  .spotlight-content { max-width: none; }
  .spotlight-content h3 { font-size: clamp(2.2rem, 11vw, 3rem); }
  .spotlight-content p { max-width: none; }

  /* Mia Launcher */
  .spotlight-launcher { padding: 1.4rem 1.35rem 1.35rem; gap: 1.25rem; }
  .spotlight-icon-wrap { top: 2.7rem; right: 1.5rem; width: 6rem; }
  .spotlight-launcher .spotlight-content h3 { font-size: clamp(2.1rem, 10.5vw, 2.8rem); }

  /* Topluluk: ikon + başlık yan yana, bağlantı altta */
  .spotlight-community {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.1rem;
    padding: 3rem 1.35rem 1.4rem;
  }
  .community-spark { width: 3.4rem; height: 3.4rem; }
  .spotlight-community .spotlight-link { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
  .spotlight-community h3 { font-size: clamp(1.5rem, 7.5vw, 2rem); }
}

/* ---------- Özellik / haber / alt kartlar --------------------------------- */
@media (max-width: 640px) {
  .section-head { align-items: flex-end; margin-bottom: 1.1rem; }
  .section-head h2 { font-size: clamp(1.55rem, 7.5vw, 2rem) !important; }
  .grid.grid-3 .feature-card { min-height: 0; padding: 1.25rem; }
  .news-body, .content-card-body { padding: 1rem 1.1rem 1.2rem; }
  .news-body h3, .content-card-title { overflow-wrap: anywhere; }
}

/* Kapak görseli yüklenemezse alt metin yerine şık bir yer tutucu göster */
.news-cover.is-broken,
.content-card-cover.is-broken,
.package-card-media.is-broken {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1b1738, #0f1424);
}
.news-cover.is-broken::after,
.content-card-cover.is-broken::after,
.package-card-media.is-broken::after {
  content: ""; width: 3.4rem; height: 3.4rem; opacity: .5;
  background: url('../img/mia-mark.png') center / contain no-repeat;
}
.news-cover img, .content-card-cover img { display: block; }

/* ---------- Alt bilgi (footer) -------------------------------------------- */
@media (max-width: 640px) {
  .footer-brand-block { grid-column: 1 / -1; }
  .footer-grid-modern { gap: 1.75rem 1.25rem; }
  /* Sağ alttaki sabit "Powered by" rozeti metni örtmesin */
  .footer-bottom .container { padding-bottom: 4.75rem; gap: .6rem; }
  .footer-bottom-right { gap: .5rem 1.1rem; }
}

/* ---------- Formlar: iOS'ta odaklanınca yakınlaşmayı önle ---------------- */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 1rem; }
  .btn-sm { min-height: 2.5rem; }
}

/* ---------- Çok dar ekranlar (≤ 360px) ------------------------------------ */
@media (max-width: 360px) {
  body .container, body .container-sm, body .container-md { padding-left: 1rem; padding-right: 1rem; }
  .hero h1 { font-size: clamp(2.1rem, 11.6vw, 2.6rem); }
  .hero-stats dd { font-size: .84rem; }
  .hero-stats > div { padding-inline: .4rem; }
  .site-header .header-login-btn { padding: 0 .9rem; font-size: .8rem; }
}