/**
 * Mobil içerik genişliği — /kategori/ekonomi referans düzeni.
 *
 * Ekonomi: .page-top-stack / .kat-shell (gutter) → .container (yatay pad 0)
 * → kart tam genişlik.
 *
 * Not: HomeLcpPreload veya inline CSS 28px container padding basarsa
 * aşağıdaki !important kuralları devreye girer.
 */
@media (max-width: 720px) {
  :root {
    --gutter: 8px;
    --card-inset-x: 16px;
  }

  /* Tüm sayfalar — .container tek gutter kaynağı (inline 28px override) */
  .container {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box;
  }

  /* ── Shell tabanlı sayfalar (ekonomi ile aynı yapı) ── */
  .page-top-stack,
  .kat-shell,
  .galeri-shell,
  .sd-shell,
  .bn-shell,
  .vi-shell,
  .yp-shell {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    box-sizing: border-box;
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
  }

  /* Piyasa kartları — tam genişlik bant; gutter .container içinde */
  .ih-mkt-cards > .container {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  .kat-page .container,
  .galeri-page .container,
  .sd-page .container,
  .bn-page .container,
  .vi-page .container,
  .yp-page .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  /* ── Shell kullanmayan sayfalar: dış sarmalayıcı gutter, container sıfır ── */
  .hd-wrap,
  .gd-page,
  .auth-page,
  .yy-page {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    box-sizing: border-box;
  }

  .hd-wrap > .container,
  .gd-page > .container,
  .auth-page > .container,
  .yy-page > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  /* Anasayfa manşet — tam sütun genişliği */
  .hys-main {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
  }

  /* ── Kartlar: içerik sütununun tam genişliği (.km-card referansı) ── */
  .km-card,
  .km-list-card,
  .hd-article,
  .gd-article,
  .shb-card,
  .fs-main,
  .tr-list,
  .galeri-cat-card,
  .bn-lead,
  .bn-row,
  .sd-cluster,
  .kat-card,
  .auth-panel,
  .yy-sheet,
  .yz-dir-card,
  .arv-card,
  .vi-card,
  .op-ys-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hd-article,
  .gd-article {
    padding: 20px var(--card-inset-x) 24px;
  }

  .auth-panel,
  .yy-sheet {
    padding-left: var(--card-inset-x);
    padding-right: var(--card-inset-x);
  }

  .km-list-card {
    padding-left: var(--card-inset-x);
    padding-right: var(--card-inset-x);
  }

  .kat-card {
    padding: var(--card-inset-x);
  }

  .galeri-cat-body {
    padding-left: var(--card-inset-x);
    padding-right: var(--card-inset-x);
  }

  .shb-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Manşet pagination — oklar rakamlarla aynı hizada (28×28) */
  .hys-main .poster-controls {
    display: flex !important;
    align-items: center;
    gap: 2px;
    height: 28px !important;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    grid-template-columns: unset;
  }
  .hys-main .poster-pages {
    flex: 1 1 auto;
    min-width: 0;
  }
  .hys-main .poster-arrows {
    flex: 0 0 auto;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: transparent;
    border-radius: 0;
    padding: 0;
  }
  .hys-main .parr {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    background: var(--ink);
    border-radius: 2px;
  }
  .hys-main .parr svg {
    width: 14px;
    height: 14px;
  }
  .hys-main .parr-dot {
    display: none !important;
  }

  /* Anasayfa hero — kutu / yan manşet kartları üst üste binmesin */
  .home-top .home-kutu-mobile .hys-kutu {
    position: relative;
    overflow: hidden;
    min-width: 0;
    height: auto !important;
  }
  .home-top .home-kutu-mobile .hys-kutu-compact .hys-kutu-media {
    flex: 0 0 auto !important;
    aspect-ratio: 16 / 10;
    max-height: none;
    min-height: 0;
    position: relative;
    overflow: hidden;
  }
  .home-top .hys-spor .poster-frame {
    position: relative !important;
    flex: 0 0 auto !important;
    aspect-ratio: 4 / 4.5 !important;
    border-radius: 12px !important;
    overflow: clip !important;
    touch-action: pan-y pinch-zoom;
    contain: layout size style !important;
    overscroll-behavior-x: contain !important;
    overflow-anchor: none;
  }
  .home-top .hys-main .poster-frame {
    border-radius: 12px !important;
  }
  .home-top .hys-spor .poster-slide {
    position: absolute;
    inset: 0;
  }
}