:root {

    --first-color: #0a0f2c;        /* Warna latar belakang utama: biru sangat gelap */

    --second-color: #ffffff;       /* Warna teks: putih */

    --third-color: #0267cb;        /* Aksen utama: Dodger Blue */

    --fourth-color: #3363ff;       /* Hover: biru muda */

}



body {

    background: var(--first-color);

    color: var(--second-color);

}

/* === Grid Layout (5 → 3 → 2 kolom) ============================== */

#champion-container {

  display: grid;

  gap: 1rem;

}

@media (min-width: 1200px) {

  #champion-container { grid-template-columns: repeat(5, 1fr); }

}

@media (min-width: 768px) and (max-width: 1199.98px) {

  #champion-container { grid-template-columns: repeat(3, 1fr); }

}

@media (max-width: 767.98px) {

  #champion-container { grid-template-columns: repeat(2, 1fr); }

}

/* === Card ======================================================== */

.time-post {

    font-size: 0.7rem;

    padding: 0;

    margin: 0;

    font-weight: 700;

}



.card-post {

    background: var(--third-color);

    color: var(--second-color);

}



.img-post {

    width: 30rem;

    max-width: 100%;

}

/* === Pagination ================================================== */

.page.active {

    color: var(--second-color) !important;

    background: var(--third-color);

}

/* === Buttons ===================================================== */

.btn-info {

    background-color: var(--third-color);

    border-color: var(--third-color) !important;

    color: var(--second-color);

}



.btn-info:hover {

    background-color: var(--fourth-color);

}

/* === Running Text (marquee strip) ================================ */

.teks-berjaalan {
    
    display:block;
    padding:0.3rem 0;
    background-color: linear-gradient(to bottom, #014c69 0%, #034fa6 50%, #012c69 100%);
    border-top: 2px solid #00aaff;
    border-bottom: 2px solid #00aaff;
    box-shadow: inset 0px 0px 12px rgba(0, 140, 255, 0.908);
    color: #ffffff;
    text-shadow: 0 0 3px #00aaff;

}



.teks-berjaalan h1, .teks-berjaalan h2, .teks-berjaalan h3, .teks-berjaalan h4, .teks-berjaalan h5, .teks-berjaalan h6, .teks-berjaalan p, .teks-berjaalan strong {

    padding: 0;

    margin: 0;

    font-size: 0.8rem;

    text-transform: uppercase;

}

/* === Footer ====================================================== */

.copyright {

    text-transform: uppercase;

    font-size: 0.7rem;

    text-align: center;

}



/* For Mobile Portrait View */

@media screen and (max-device-width: 480px)

    and (orientation: portrait) {

       .title-home {

        font-size: 1rem;

       }



       .logo {

        width: 9rem;

        max-width: 100%;

       }



       .search-bar {

        width: 10rem;

        max-width: 100%;

       }

}