@media (max-width: 1399.98px) {
    :root { --p5-container: 1200px; }
    .primer5-brand__copy small { max-width: 170px; }
    .primer5-header__inner { gap: 22px; }
    .primer5-match-center__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .primer5-table-panel { grid-column: 1 / -1; }
    .primer5-table-panel__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .primer5-table-panel__body .primer5-standings-head { grid-column: 1 / -1; }
}

@media (max-width: 1199.98px) {
    :root { --p5-header-height: 78px; }
    .primer5-brand__logo, .primer5-brand__fallback { width: 50px; height: 50px; flex-basis: 50px; }
    .primer5-brand__copy strong { font-size: 22px; }
    .primer5-hero,
    .primer5-hero-slide__container { min-height: 690px; }
    .primer5-hero-slide__content { width: min(720px, 68vw); }
    .primer5-stat-card { padding: 22px; }
}

@media (max-width: 991.98px) {
    .primer5-section { padding: 76px 0; }
    .primer5-hero,
    .primer5-hero-slide__container { min-height: 650px; }
    .primer5-hero-slide__container { padding-top: 70px; padding-bottom: 120px; }
    .primer5-hero-slide__content { width: min(680px, 82vw); }
    .primer5-hero-slide__shade {
        background:
            linear-gradient(90deg, rgba(0,36,63,.94), rgba(0,36,63,.72) 68%, rgba(0,36,63,.4)),
            linear-gradient(0deg, rgba(0,36,63,.65), transparent 55%);
    }
    .primer5-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .primer5-stat-card:nth-child(2) { border-right: 0; }
    .primer5-stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--p5-line); }
    .primer5-section-heading--split { align-items: flex-start; flex-direction: column; gap: 16px; }
    .primer5-match-center__heading { align-items: stretch; }
    .primer5-match-center__competition { min-width: 0; width: 100%; }
    .primer5-match-center__grid { grid-template-columns: 1fr; }
    .primer5-table-panel { grid-column: auto; }
    .primer5-table-panel__body { display: block; }
    .primer5-about-preview__card { padding: 45px; align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767.98px) {
    :root { --p5-header-height: 72px; }
    .primer5-header__inner { gap: 12px; }
    .primer5-brand { gap: 10px; }
    .primer5-brand__logo, .primer5-brand__fallback { width: 46px; height: 46px; flex-basis: 46px; }
    .primer5-brand__copy strong { font-size: 20px; }
    .primer5-brand__copy small { max-width: 150px; font-size: 8px; }
    .primer5-menu-button { width: 44px; height: 44px; }

    .primer5-hero,
    .primer5-hero-slide__container { min-height: 620px; }
    .primer5-hero-slide__container { padding-top: 58px; padding-bottom: 120px; align-items: flex-end; }
    .primer5-hero-slide__content { width: 100%; }
    .primer5-hero-slide__content h1 { margin-top: 18px; font-size: clamp(42px, 12vw, 62px); }
    .primer5-hero-slide__content > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .primer5-hero-slide__shade {
        background:
            linear-gradient(0deg, rgba(0,36,63,.98) 0%, rgba(0,36,63,.86) 48%, rgba(0,36,63,.3) 100%),
            linear-gradient(90deg, rgba(0,36,63,.72), transparent);
    }
    .primer5-hero__actions { flex-direction: column; }
    .primer5-hero__actions .primer5-button { width: 100%; }
    .primer5-hero__trust { margin-top: 22px; }
    .primer5-hero__navigation { bottom: 25px; gap: 14px; }
    .primer5-hero__counter { min-width: 58px; }
    .primer5-hero__counter strong { font-size: 21px; }
    .primer5-hero__arrows button { width: 40px; height: 40px; }
    .primer5-hero__dots { flex: 1; }
    .primer5-hero__dot { width: 18px; }
    .primer5-hero__dot.is-active { width: 36px; }

    .primer5-stats { margin-top: -20px; }
    .primer5-stats__grid { grid-template-columns: 1fr; }
    .primer5-stat-card { min-height: 94px; border-right: 0 !important; border-bottom: 1px solid var(--p5-line); }
    .primer5-stat-card:last-child { border-bottom: 0; }
    .primer5-section-heading { margin-bottom: 32px; }
    .primer5-match-center { padding-top: 84px; }
    .primer5-score-panel__header { min-height: 82px; padding: 17px 18px; }
    .primer5-score-panel__header h3 { font-size: 20px; }
    .primer5-score-panel__body { padding-left: 16px; padding-right: 16px; }
    .primer5-match-row__teams { grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); gap: 5px; }
    .primer5-match-team { gap: 6px; }
    .primer5-match-team > span { width: 34px; height: 34px; flex-basis: 34px; }
    .primer5-match-team strong { font-size: 12px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .primer5-match-row__score strong { font-size: 18px; }
    .primer5-match-row__meta small { max-width: 48%; }
    .primer5-table-panel__body { padding-left: 15px; padding-right: 15px; }
    .primer5-standings-head,
    .primer5-standings-row { grid-template-columns: minmax(0, 1fr) 29px 34px 31px; gap: 4px; }
    .primer5-standings-logo { width: 28px; height: 28px; flex-basis: 28px; }
    .primer5-standings-team { gap: 5px; }
    .primer5-standings-team > strong { font-size: 11px; }
    .primer5-feature-card { min-height: 330px; padding: 28px; }
    .primer5-news-card--featured .primer5-news-card__media, .primer5-news-card__media { min-height: 245px; }
    .primer5-news-card--featured h3 { font-size: 25px; }
    .primer5-about-preview__card { padding: 34px 27px; border-radius: 22px; }
    .primer5-footer__main { padding-top: 58px; padding-bottom: 50px; }
    .primer5-footer__bottom-inner { padding-top: 22px; padding-bottom: 22px; align-items: flex-start; flex-direction: column; }
    .primer5-footer__bottom-inner > div { flex-wrap: wrap; gap: 10px 18px; }
}

@media (max-width: 480px) {
    .primer5-brand__copy small { display: none; }
    .primer5-hero,
    .primer5-hero-slide__container { min-height: 600px; }
    .primer5-hero-slide__content h1 { font-size: clamp(38px, 11.5vw, 52px); }
    .primer5-hero__trust { display: none; }
    .primer5-hero__navigation { gap: 9px; }
    .primer5-hero__counter { display: none; }
    .primer5-hero__arrows { margin-left: 0; }
    .primer5-section { padding: 64px 0; }
    .primer5-match-center { padding-top: 76px; }
    .primer5-match-row__meta { align-items: flex-start; flex-direction: column; gap: 3px; }
    .primer5-match-row__meta small { max-width: 100%; }
    .primer5-match-row__teams { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); }
    .primer5-match-team { align-items: center; flex-direction: column; text-align: center !important; }
    .primer5-match-team.is-home { flex-direction: column; }
    .primer5-match-team.is-away { flex-direction: column; }
    .primer5-match-team.is-home > strong { order: 2; }
    .primer5-match-team.is-home > span { order: 1; }
    .primer5-match-team strong { font-size: 11px; }
    .primer5-back-to-top { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Primer 5 - Korak 13 responsive */
@media (max-width: 1399.98px) {
    .primer5-table-panel__body {
        display: block;
    }
    .primer5-table-panel__body .primer5-standings-head {
        grid-column: auto;
    }
}

@media (max-width: 991.98px) {
    .primer5-match-center__summary {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }
    .primer5-competition-centers {
        gap: 46px;
    }
    .primer5-competition-center__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .primer5-competition-center__header {
        padding: 20px;
        border-radius: 18px;
    }
    .primer5-competition-center__header .primer5-button {
        width: 100%;
    }
    .primer5-competition-center__header h3 {
        font-size: 25px;
    }
    .primer5-competition-centers {
        gap: 38px;
    }
}
