/* PRATİKBEP | 27.10.2026 | Ortak ekran genişliği: PC %80, mobil uyumlu.
 * Etkileşimli HTML ekranlarına _router.php tarafından eklenir.
 * Yalnızca yerleşim: buton, tema, işlev ve A4 evrak boyutları değişmez.
 */
@media screen and (min-width: 1024px) {
  /* Modüllerin ana içerik kapları: ekran genişliğinin tam %80'i. */
  body > :is(main, .wrap, .container, .content, .page, #app):not(.panel):not(.card) {
    width: 80vw !important;
    max-width: 80vw !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  /* Ana sayfa, kayıt ve diğer sayfalarda kullanılan ortak .shell. */
  body .shell {
    width: 80vw !important;
    max-width: 80vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  /* Ana içerik zaten %80 ise içindeki kabı ikinci kez daraltma. */
  body > main .shell {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Ana sayfadaki alt çağrı alanı kendi %100 kuralını kullanır. */
  body .cta-wrap > .shell {
    width: 80vw !important;
    max-width: 80vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Üyelik formunun açılır pencere içindeki görünümüne dokunma. */
  html.pb-in-modal body .shell {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 1023px) {
  /* Küçük ekranlarda %80 kuralı yok; mevcut mobil düzen korunur. */
  body > :is(main, .wrap, .container, .content, .page, #app):not(.panel):not(.card) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  body .shell {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  body > main .shell {
    width: 100% !important;
    max-width: 100% !important;
  }
  body .cta-wrap > .shell {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html.pb-in-modal body .shell {
    width: 100% !important;
    max-width: 100% !important;
  }
}