/* =========================================================
   UW88 RTP - HEADER
   FINAL - CONTENT TENGAH DIPERBESAR

   STRUKTUR:
   header.php

   assets/
      css/
         style.css

   picture/
      bg_rtp_uw88.png
      logo_uw88_new.png
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

html {
    background: #050505;
}

body {
    background: #050505;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

.rtp-header {
    width: 100%;
    aspect-ratio: 2.5 / 1;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #050505;

    background-image:
        url("../../picture/bg_rtp_uw88.png");

    background-repeat: no-repeat;

    background-position:
        center center;

    /*
     * Background tetap proporsional.
     * Tidak stretch dan tidak dibuat gepeng.
     */
    background-size:
        100% auto;

    border-bottom:
        1px solid
        rgba(244, 190, 52, 0.75);
}


/* =========================================================
   BACKGROUND OVERLAY
   ========================================================= */

.rtp-header-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            rgba(0,0,0,0.02) 0%,

            rgba(0,0,0,0.05) 18%,

            rgba(0,0,0,0.12) 30%,

            rgba(0,0,0,0.30) 40%,

            rgba(0,0,0,0.46) 48%,

            rgba(0,0,0,0.48) 50%,

            rgba(0,0,0,0.46) 52%,

            rgba(0,0,0,0.30) 60%,

            rgba(0,0,0,0.12) 70%,

            rgba(0,0,0,0.05) 82%,

            rgba(0,0,0,0.02) 100%
        ),

        linear-gradient(
            180deg,

            rgba(0,0,0,0.02) 0%,

            rgba(0,0,0,0.02) 55%,

            rgba(0,0,0,0.22) 100%
        );
}


/* =========================================================
   HEADER CONTENT
   AREA TENGAH DIPERBESAR
   ========================================================= */

.rtp-header-content {
    position: relative;

    z-index: 2;

    /*
     * Sebelumnya:
     * width: min(760px, 50vw);
     *
     * Sekarang diperbesar.
     */
    width: min(1050px, 68vw);

    margin: 0 auto;

    padding: 20px 25px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   LOGO UW88
   ========================================================= */

.uw88-logo-image {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    line-height: 0;
}


.uw88-logo-img {
    display: block;

    /*
     * Logo diperbesar.
     */
    width:
        clamp(
            230px,
            18vw,
            340px
        );

    max-width: 100%;

    height: auto;

    object-fit: contain;

    filter:

        drop-shadow(
            0 5px 8px
            rgba(0,0,0,0.85)
        )

        drop-shadow(
            0 0 10px
            rgba(255,190,40,0.18)
        );
}


/* =========================================================
   TAGLINE
   ========================================================= */

.uw88-tagline {
    margin-top:
        clamp(
            10px,
            0.9vw,
            16px
        );

    color: #f4cf70;

    font-size:
        clamp(
            11px,
            0.9vw,
            16px
        );

    font-weight: 700;

    letter-spacing:
        clamp(
            3px,
            0.35vw,
            6px
        );

    white-space: nowrap;

    text-shadow:
        0 2px 5px #000000,
        0 0 8px rgba(0,0,0,0.9);
}


.uw88-tagline span {
    color: #ffffff;
}


/* =========================================================
   RTP SLOT GAMES
   ========================================================= */

.rtp-header h1 {
    margin:

        clamp(
            16px,
            1.4vw,
            28px
        )

        0

        clamp(
            9px,
            0.8vw,
            14px
        );

    /*
     * Judul diperbesar.
     */
    font-size:
        clamp(
            48px,
            5vw,
            88px
        );

    line-height: 1;

    letter-spacing: 1px;

    white-space: nowrap;

    background:

        linear-gradient(
            180deg,

            #fff8c5 0%,

            #ffe77a 15%,

            #ffd75c 32%,

            #f0a91f 60%,

            #b76c07 82%,

            #7e4500 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    filter:

        drop-shadow(
            0 5px 4px
            rgba(0,0,0,0.95)
        )

        drop-shadow(
            0 0 10px
            rgba(238,167,31,0.25)
        );
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.rtp-subtitle {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    min-height: 44px;

    padding:
        8px
        30px;

    border-top:
        1px solid
        rgba(200,145,38,0.85);

    border-bottom:
        1px solid
        rgba(200,145,38,0.85);

    background:
        rgba(0,0,0,0.42);

    color: #ffffff;

    font-size:
        clamp(
            11px,
            0.85vw,
            16px
        );

    font-weight: 700;

    letter-spacing: 0.5px;

    box-shadow:
        0 0 20px
        rgba(0,0,0,0.4);
}


.rtp-subtitle strong {
    color: #ffd765;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.rtp-description {
    width: 100%;

    /*
     * Deskripsi dibuat lebih lebar.
     */
    max-width: 900px;

    margin:
        clamp(
            11px,
            0.9vw,
            17px
        )
        auto 0;

    color: #eeeeee;

    font-size:
        clamp(
            11px,
            0.78vw,
            14px
        );

    line-height: 1.5;

    text-shadow:
        0 2px 4px #000000,
        0 0 5px #000000;
}


/* =========================================================
   LIHAT RTP
   ========================================================= */

.header-scroll {
    margin-top:
        clamp(
            9px,
            1vw,
            17px
        );

    color: #e4bd52;

    font-size:
        clamp(
            9px,
            0.65vw,
            11px
        );

    font-weight: 700;

    letter-spacing: 2px;

    text-shadow:
        0 2px 4px
        #000000;
}


.header-scroll .arrow {
    display: block;

    margin-top: 0;

    font-size:
        clamp(
            20px,
            1.5vw,
            27px
        );

    line-height: 1;

    animation:
        uw88Arrow
        1.5s
        infinite;
}


/* =========================================================
   ARROW ANIMATION
   ========================================================= */

@keyframes uw88Arrow {

    0%,
    100% {
        transform:
            translateY(0);

        opacity: 0.5;
    }

    50% {
        transform:
            translateY(5px);

        opacity: 1;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .rtp-header {
        width: 100%;

        aspect-ratio: 2.5 / 1;

        background-size:
            100% auto;

        background-position:
            center center;
    }


    /*
     * Jangan dibuat 55% lagi.
     * Kita pertahankan area tengah lebih besar.
     */
    .rtp-header-content {
        width: 68%;

        padding: 10px;
    }


    .uw88-logo-img {
        width:
            clamp(
                150px,
                19vw,
                220px
            );
    }


    .uw88-tagline {
        font-size:
            clamp(
                8px,
                1.2vw,
                11px
            );

        letter-spacing:
            clamp(
                1.5px,
                0.3vw,
                3px
            );
    }


    .rtp-header h1 {
        font-size:
            clamp(
                30px,
                5.2vw,
                48px
            );
    }


    .rtp-subtitle {
        min-height: 32px;

        padding:
            5px
            14px;

        font-size:
            clamp(
                8px,
                1.1vw,
                11px
            );
    }


    .rtp-description {
        max-width: 95%;

        font-size:
            clamp(
                8px,
                1vw,
                10px
            );
    }


    .header-scroll {
        margin-top: 8px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    /*
     * Mobile tetap dibuat tinggi agar semua
     * tulisan dapat masuk.
     */
    .rtp-header {
        width: 100%;

        min-height: 430px;

        aspect-ratio: auto;

        background-size: cover;

        background-position:
            center center;
    }


    .rtp-header-overlay {
        background:

            linear-gradient(
                90deg,

                rgba(0,0,0,0.20) 0%,

                rgba(0,0,0,0.42) 25%,

                rgba(0,0,0,0.64) 50%,

                rgba(0,0,0,0.42) 75%,

                rgba(0,0,0,0.20) 100%
            ),

            linear-gradient(
                180deg,

                rgba(0,0,0,0.08),

                rgba(0,0,0,0.55)
            );
    }


    .rtp-header-content {
        width: 94%;

        padding:
            25px
            12px;
    }


    /* LOGO */

    .uw88-logo-img {
        width:
            clamp(
                165px,
                48vw,
                215px
            );
    }


    /* TAGLINE */

    .uw88-tagline {
        margin-top: 10px;

        font-size: 9px;

        letter-spacing: 2px;
    }


    /* TITLE */

    .rtp-header h1 {
        margin:
            18px
            0
            12px;

        font-size:
            clamp(
                34px,
                10vw,
                48px
            );

        /*
         * Di HP boleh turun baris jika diperlukan.
         */
        white-space: normal;
    }


    /* SUBTITLE */

    .rtp-subtitle {
        min-height: 34px;

        padding:
            6px
            10px;

        font-size: 10px;

        gap: 5px;
    }


    /* DESCRIPTION */

    .rtp-description {
        width: 92%;

        max-width: 500px;

        margin-top: 13px;

        font-size: 11px;

        line-height: 1.5;
    }


    /* SCROLL */

    .header-scroll {
        margin-top: 14px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .rtp-header {
        min-height: 410px;
    }


    .uw88-logo-img {
        width: 160px;
    }


    .uw88-tagline {
        font-size: 8px;

        letter-spacing: 1.5px;
    }


    .rtp-header h1 {
        font-size: 34px;
    }


    .rtp-subtitle {
        max-width: 96%;

        font-size: 9px;
    }


    .rtp-description {
        font-size: 10px;
    }
}