/* ==================================================
   PETANIHOKI
   BLACK + GOLD TESTIMONIAL
================================================== */


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


:root {

    --black: #000000;

    --black-soft: #050505;

    --black-card: #070707;

    --black-light: #111111;

    --gold: #ffd500;

    --gold-light: #fff16a;

    --gold-dark: #dcae00;

    --white: #ffffff;

    --gray: #bdbdbd;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    background: var(--black);

    color: var(--white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


body.menu-open {

    overflow: hidden;

}



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


.site-header {

    width: 100%;

    padding:

        18px
        0
        22px;

    background: #000;

}


.header-top {

    width: min(94%, 1500px);

    min-height: 72px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



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


.logo-image {

    display: flex;

    align-items: center;

    text-decoration: none;

}


.logo-image img {

    width: 235px;

    max-width: 100%;

    height: auto;

    display: block;

    object-fit: contain;

}



/* ==================================================
   HAMBURGER
================================================== */


.hamburger {

    width: 48px;

    height: 48px;

    padding: 8px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 6px;

    border: 0;

    outline: 0;

    background: transparent;

    cursor: pointer;

    position: relative;

    z-index: 10001;

}


.hamburger span {

    width: 28px;

    height: 4px;

    display: block;

    margin: 0 auto;

    border-radius: 5px;

    background: var(--gold);

    box-shadow:

        0 0 6px
        rgba(255, 213, 0, .5);

}



/* ==================================================
   MENU OVERLAY
================================================== */


.menu-overlay {

    position: fixed;

    inset: 0;

    background:

        rgba(
            0,
            0,
            0,
            .72
        );

    opacity: 0;

    visibility: hidden;

    transition:

        opacity .25s ease,
        visibility .25s ease;

    z-index: 9998;

}


.menu-overlay.show {

    opacity: 1;

    visibility: visible;

}



/* ==================================================
   SIDE MENU
================================================== */


.side-menu {

    position: fixed;

    top: 0;

    left: -340px;

    width: 315px;

    max-width: 82%;

    height: 100vh;

    padding-top: 30px;

    background:

        rgba(
            0,
            0,
            0,
            .98
        );

    border-right:

        1px solid
        var(--gold);

    box-shadow:

        5px
        0
        25px
        rgba(
            255,
            213,
            0,
            .18
        );

    transition:

        left .30s ease;

    z-index: 9999;

}


.side-menu.open {

    left: 0;

}


.side-menu-logo {

    padding:

        18px
        23px
        32px;

}


.side-menu-logo img {

    width: 195px;

    max-width: 100%;

    height: auto;

    display: block;

}


.side-menu > a {

    display: block;

    width: 100%;

    padding:

        20px
        25px;

    border-top:

        1px solid
        rgba(
            255,
            213,
            0,
            .10
        );

    border-bottom:

        1px solid
        rgba(
            255,
            213,
            0,
            .10
        );

    color: var(--gold);

    background: #020202;

    text-decoration: none;

    font-size: 20px;

    font-weight: 500;

    transition: .2s ease;

}


.side-menu > a:hover {

    background: var(--gold);

    color: #000;

    padding-left: 31px;

}



/* ==================================================
   RUNNING TEXT
================================================== */


.ticker {

    width: min(90%, 1450px);

    height: 48px;

    margin:

        15px
        auto
        15px;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:

        linear-gradient(
            180deg,
            #080808,
            #000
        );

    border:

        2px solid
        var(--gold);

    border-radius: 11px;

    box-shadow:

        0 0 7px
        var(--gold),

        0 0 18px
        rgba(
            255,
            213,
            0,
            .30
        );

}


.ticker-track {

    width: max-content;

    display: flex;

    white-space: nowrap;

    animation:

        tickerAnimation
        30s
        linear
        infinite;

}


.ticker-track span {

    padding-right: 100px;

    color: var(--gold);

    font-size: 17px;

    font-weight: 900;

    line-height: 1;

    text-transform: uppercase;

}


@keyframes tickerAnimation {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}



/* ==================================================
   SEARCH
================================================== */


.search-box {

    width: 450px;

    max-width: 92%;

    height: 54px;

    margin: auto;

    display: flex;

    overflow: hidden;

    background: #050505;

    border:

        2px solid
        var(--gold);

    border-radius: 12px;

    box-shadow:

        0 0 7px
        var(--gold),

        0 0 20px
        rgba(
            255,
            213,
            0,
            .25
        );

}


.search-box input {

    flex: 1;

    min-width: 0;

    height: 100%;

    padding:

        0
        17px;

    background: transparent;

    border: 0;

    outline: 0;

    color: #fff;

    font-size: 16px;

    text-align: center;

}


.search-box input::placeholder {

    color: #b7b7b7;

}


.search-box button {

    width: 64px;

    height: 100%;

    border: 0;

    border-left:

        1px solid
        rgba(
            255,
            213,
            0,
            .45
        );

    background: #080808;

    color: var(--gold);

    font-size: 20px;

    cursor: pointer;

}


.search-box button:hover {

    background: var(--gold);

    color: #000;

}



/* ==================================================
   MAIN
================================================== */


.main-wrapper {

    width: min(90%, 1450px);

    margin: auto;

    padding:

        12px
        0
        50px;

}



/* ==================================================
   SEARCH INFO
================================================== */


.search-info {

    margin-bottom: 20px;

    padding:

        13px
        16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    background: #050505;

    border:

        1px solid
        var(--gold);

    border-radius: 8px;

    color: #fff;

}


.search-info strong {

    color: var(--gold);

}


.search-info a {

    color: var(--gold);

    text-decoration: none;

    font-weight: 700;

}



/* ==================================================
   GRID
================================================== */


.testimonial-grid {

    display: grid;

    grid-template-columns:

        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 22px;

}



/* ==================================================
   CARD
================================================== */


.testimonial-card {

    min-width: 0;

    overflow: hidden;

    background:

        linear-gradient(
            180deg,
            #080808,
            #000
        );

    border:

        2px solid
        var(--gold);

    border-radius: 9px;

    box-shadow:

        0 0 7px
        rgba(
            255,
            213,
            0,
            .72
        );

    transition:

        transform .2s ease,
        box-shadow .2s ease;

}


.testimonial-card:hover {

    transform:

        translateY(
            -4px
        );

    box-shadow:

        0 0 11px
        var(--gold),

        0 0 26px
        rgba(
            255,
            213,
            0,
            .22
        );

}



/* ==================================================
   CARD IMAGE
================================================== */


.card-image {

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    position: relative;

    background: #111;

    border-bottom:

        1px solid
        rgba(
            255,
            213,
            0,
            .65
        );

}


.card-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


.no-image {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background:

        radial-gradient(
            circle,
            #3c3000,
            #130f00 50%,
            #000 100%
        );

    text-align: center;

}


.no-image-logo {

    color: var(--gold);

    font-size: 27px;

    font-weight: 900;

}


.no-image-title {

    color: white;

    font-size: 14px;

    font-weight: 800;

}



/* ==================================================
   CARD BODY
================================================== */


.card-body {

    padding:

        17px
        18px
        19px;

}


.card-body h2 {

    min-height: 52px;

    margin:

        0
        0
        9px;

    color: var(--gold);

    font-size: 21px;

    line-height: 1.15;

    font-weight: 900;

    text-transform: uppercase;

}


.date {

    margin-bottom: 14px;

    color: var(--gold-light);

    font-size: 14px;

}


.amount {

    margin-bottom: 15px;

    color: var(--gold);

    font-size: 25px;

    line-height: 1;

    font-weight: 900;

}


.description {

    height: 92px;

    margin-bottom: 15px;

    overflow: hidden;

    color: white;

    font-size: 14px;

    line-height: 1.55;

}


.userid {

    margin-bottom: 8px;

    color: white;

    font-size: 13px;

}


.userid strong {

    color: var(--gold);

}


.category {

    display: inline-block;

    margin-bottom: 15px;

    padding:

        5px
        9px;

    background:

        rgba(
            255,
            213,
            0,
            .09
        );

    border:

        1px solid
        rgba(
            255,
            213,
            0,
            .40
        );

    border-radius: 5px;

    color: var(--gold);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

}



/* ==================================================
   BUTTON
================================================== */


.detail-button {

    width: 100%;

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 3px;

    background:

        linear-gradient(
            180deg,
            #fff36a,
            #ffd500
        );

    border-radius: 10px;

    color: #000;

    text-decoration: none;

    font-size: 15px;

    font-weight: 900;

    box-shadow:

        0 0 7px
        rgba(
            255,
            213,
            0,
            .70
        );

    transition:

        transform .15s ease,
        filter .15s ease;

}


.detail-button:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.10);

}



/* ==================================================
   EMPTY DATA
================================================== */


.empty-data {

    padding:

        70px
        20px;

    background: #050505;

    border:

        1px solid
        var(--gold);

    border-radius: 8px;

    color: var(--gold);

    text-align: center;

    font-size: 18px;

    font-weight: 700;

}



/* ==================================================
   PAGINATION
================================================== */


.pagination {

    margin-top: 38px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

}


.pagination a {

    min-width: 42px;

    height: 42px;

    padding:

        0
        11px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #050505;

    border:

        1px solid
        var(--gold);

    border-radius: 6px;

    color: var(--gold);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

}


.pagination a:hover,

.pagination a.active {

    background: var(--gold);

    color: #000;

}



/* ==================================================
   FOOTER
================================================== */


.site-footer {

    min-height: 90px;

    padding:

        22px
        15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    background: #000;

    border-top:

        1px solid
        rgba(
            255,
            213,
            0,
            .30
        );

    color: var(--gold);

    text-align: center;

    font-size: 13px;

}


.site-footer small {

    color: #888;

}



/* ==================================================
   DESKTOP MEDIUM
================================================== */


@media (
    max-width: 1200px
) {

    .testimonial-grid {

        grid-template-columns:

            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }

}



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


@media (
    max-width: 850px
) {

    .header-top {

        width: 94%;

    }


    .logo-image img {

        width: 200px;

    }


    .ticker {

        width: 94%;

    }


    .main-wrapper {

        width: 94%;

    }


    .testimonial-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap: 18px;

    }

}



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


@media (
    max-width: 560px
) {

    .site-header {

        padding-top: 9px;

    }


    .header-top {

        min-height: 60px;

    }


    .logo-image img {

        width: 175px;

    }


    .hamburger {

        width: 42px;

        height: 42px;

    }


    .hamburger span {

        width: 25px;

        height: 3px;

    }


    .ticker {

        width: 94%;

        height: 44px;

        margin-top: 10px;

        margin-bottom: 13px;

    }


    .ticker-track span {

        font-size: 13px;

        padding-right: 65px;

    }


    .search-box {

        width: 94%;

        height: 49px;

    }


    .search-box input {

        font-size: 14px;

    }


    .search-box button {

        width: 55px;

    }


    .main-wrapper {

        width: 94%;

        padding-top: 10px;

    }


    .testimonial-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .card-body {

        padding:

            16px
            17px
            18px;

    }


    .card-body h2 {

        min-height: 0;

        font-size: 20px;

    }


    .amount {

        font-size: 24px;

    }


    .description {

        height: auto;

        max-height: 100px;

    }


    .side-menu {

        width: 315px;

        max-width: 82%;

    }


    .side-menu-logo img {

        width: 180px;

    }


    .side-menu > a {

        font-size: 18px;

        padding:

            19px
            23px;

    }


    .search-info {

        align-items: flex-start;

        flex-direction: column;

    }

}