* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body {
    position: relative;
    width: 100%;
    height: auto;
    background: linear-gradient(to bottom right, #0e0e0e, #131313);
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    width: 5px;
    background: #131313;
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: white;
}

header {
    position: sticky;
    top: 0;
    width: 100%;
    height: max-content;
    padding: 0.3rem 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #242424;
    z-index: 101;
}

header div {
    display: flex;
    align-items: center;
    justify-content: right;
}

.btn-menu {
    position: relative;
    width: max-content;
    height: max-content;
    padding: 0.7rem;
    margin-left: 0.5rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: #161616;
    border-radius: 0.4rem;
    border: none;
}

.btn-menu:hover {
    background: #000000;
}

.btn-menu i {
    position: relative;
    color: #ffffff;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
}

.logo {
    position: relative;
    width: 8rem;
    height: 2.5rem;
    margin-right: 1rem;
}

/* ----------------- SIDEBAR EXISTING ----------------- */
.sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    background: #242424;
    z-index: 102;
    transition: 0.3s ease-in;
}

.sidebar .logo {
    position: relative;
    width: 100%;
    height: 7rem;
    margin: 0;
    padding: 0;
}

/* link item sidebar */
.sidebar-links {
    position: relative;
    top: 0.5rem;
    width: 100%;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: #ffffff;
    height: max-content;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    transition: 0.3s ease;
    margin-bottom: 0.5rem;
}

.fa-gamepad {
    position: relative;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
}

.sidebar-links i {
    position: absolute;
    right: 1rem;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    transition: 0.3s ease;
}

.sidebar-links:hover {
    background: #ffffff1f;
}

.sidebar-links p {
    position: relative;
    font-size: 1rem;
    font-weight: 400;
}

/* search button (tetap disini jika dipakai) */
.btn-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 50%;
    height: 100%;
    cursor: pointer;
    color: white;
    padding: 0;
    font-size: 1rem;
    border: none;
    border-radius: 2rem;
    background: #161616;
    transition: 0.7s cubic-bezier(.2, .9, .2, 1);
}

.btn-search:focus,
.btn-search:focus-within {
    width: 55%;
}

.btn-search i {
    position: absolute;
    padding: 0;
    margin-right: 1rem;
    left: 1rem;
}

/* community-menu agar lebarnya dan padding sama seperti .sidebar-links */
.community-menu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    display: flex;
    flex-direction: column;
    transition: margin-top .28s cubic-bezier(.2, .9, .2, 1), opacity .28s ease;
    margin-top: 0;
    width: 100%;
}

.community-menu.open {
    max-height: max-content;
    margin-top: 0.5rem;
    opacity: 1;
}

/* container-search awal: scale(0) */
.container-search {
    position: fixed;
    z-index: 100;
    top: 90px;
    padding: 1rem;
    background: #242424;
    width: 50%;
    border-radius: 1.5rem;
    border: 1px solid #444444;
    height: max-content;
    display: flex;
    flex-direction: column;
    transform: scale(0);
    transform-origin: top;
    transition: transform 0.7s cubic-bezier(.2, .9, .2, 1);
}

.input-search {
    position: relative;
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 3rem;
    font-size: 0.9rem;
    color: #ffffff;
    outline: none;
    transition: border 0.3s ease;
    background: transparent;
    border: none;
}

/* kelas open -> tampil */
.container-search.open {
    transform: scale(1);
    opacity: 1;
}

/* kecilkan ukuran kontrol seperti yang diminta */
.search-filter-btn {
    padding: 0.28rem 0.8rem;
    font-size: 0.72rem;
    border-radius: 1rem;
    border: none;
    background: #2a2a2a;
    color: #fff;
    cursor: pointer;
}

.search-filter-btn.active {
    background: #fbff00;
    color: #000;
}

.search-sort-btn {
    padding: 0.28rem 0.6rem;
    font-size: 0.72rem;
    border-radius: 0.5rem;
    border: none;
    background: #2a2a2a;
    color: #fff;
    cursor: pointer;
}

.search-sort-menu {
    position: absolute;
    right: 0;
    margin-top: 0.4rem;
    min-width: 140px;
    background: #161616;
    border: 1px solid #333;
    border-radius: 0.4rem;
    padding: 0.25rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.sort-item-sm {
    padding: .45rem .6rem;
    font-size: .85rem;
    background: transparent;
    border: none;
    color: #fff;
    text-align: left;
}

.sort-item-sm.active {
    background: #fbff00;
    color: #000;
    font-weight: 700;
}

/* hasil search area */
.container-search-1 {
    position: relative;
    width: 100%;
    margin-top: 0.5rem;
    padding-right: 1rem;
    max-height: 15.625rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.container-search-1::-webkit-scrollbar {
    background: #242424;
    border-radius: 0.5rem;
    width: 0.5rem;
}

.container-search-1::-webkit-scrollbar-thumb {
    background: #ffffff28;
    border-radius: 0.5rem;
}

.search-links {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    padding: 0.6rem;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    transition: 0.18s ease;
    align-items: center;
    gap: 0.75rem;
}

.search-links:hover {
    background: #ffffff1f;
}

.search-thumb {
    position: relative;
    width: 3.4rem;
    height: 3.4rem;
    overflow: hidden;
    border-radius: 0.3rem;
    flex-shrink: 0;
}

.img-search {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.container-search-2 h3 {
    color: #fff;
    font-size: 0.95rem;
    margin: 0;
    font-weight: 600;
}

.container-search-2 p {
    color: #fbff00;
    font-size: 0.78rem;
    margin: 0;
    margin-top: 0.2rem;
}

/* small typing loader */
.typing-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: auto;
}

.typing-loader span {
    width: 0.4rem;
    height: 0.4rem;
    background: #fff;
    border-radius: 50%;
    opacity: 0.6;
    animation: typingBounce 1s infinite ease-in-out;
}

.typing-loader span:nth-child(1) {
    animation-delay: 0s;
}

.typing-loader span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-loader span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.container-search-2 {
    position: relative;
}

.container-search-2 h3 {
    position: relative;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'poppins' sans-serif;
    letter-spacing: 0.1rem;
}

.container-search-2 p {
    position: relative;
    color: #fbff00;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'poppins' sans-serif;
}

.card-sold-search {
    position: absolute;
    z-index: 15;
    width: 100%;
    height: 100%;
    background: #242424d2;
    display: grid;
    place-items: center;
}

.sold-search {
    background: transparent;
    color: #ffffff;
    padding: 0.2rem 0.6rem;
    border-radius: 0.2rem;
    border: 2px solid #b91c1c;
    font-weight: 700;
    font-size: 0.5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.04em;
    pointer-events: none;
}

main {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.container-banner {
    position: relative;
    width: 100%;
    padding: 2rem 5% 2rem 5%;
    height: max-content;
    display: grid;
    place-items: center;
    background: linear-gradient(to bottom right, #535353, #131313);
    margin-bottom: 1rem;
    z-index: 100;
}

/* ====== Banner slider styles ====== */
.banner-slider {
    position: relative;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    z-index: 2;
}

.banner-slider .slides {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(.2, .9, .2, 1);
    will-change: transform;
    touch-action: pan-y;
    gap: var(--slide-gap, 2rem);
    /* <-- default 2rem gap */
}

/* Pastikan slide ukurannya fleksibel (flex-basis) */
.banner-slider .slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    display: grid;
    place-items: center;
}

/* gambar: transisi transform untuk efek scale */
.banner-slider .slide img {
    width: 100%;
    height: 425px;
    border-radius: 1rem;
    display: block;
    transition: transform 2s cubic-bezier(.2, .9, .2, 1);
    transform-origin: center center;
}

/* Saat slide sedang bergerak -> kecilkan semua gambar */
.banner-slider.moving .slide img {
    transform: scale(0.8);
}

/* Slide aktif agak lebih besar (override moving jika aktif) */
.banner-slider .slide.active img {
    transform: scale(1);
}

/* Controls */
.banner-prev,
.banner-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    border: none;
    color: #fff;
    height: 3rem;
    width: 3rem;
    font-size: 1rem;
    cursor: pointer;
    z-index: 20;
    border-radius: 50%;
    line-height: 1;
    transition: background .15s ease, transform .08s ease;
}

.banner-prev:hover,
.banner-next:hover {
    transform: translateY(-50%) scale(1.04);
    background: rgba(0, 0, 0, 0.6);
}

.banner-prev {
    left: 0.6rem;
}

.banner-next {
    right: 0.6rem;
}

/* Dots */
.banner-dots {
    position: absolute;
    bottom: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
    z-index: 30;
}

.banner-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}

.banner-dots button.active {
    background: #fbff00;
    transform: scale(1.15);
}

#star-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: normal !important;
    border-radius: 1rem;
}

.container-list {
    position: relative;
    width: 100%;
    height: max-content;
    padding: 0.5rem 5%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 2;
}

.container-list-1 {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}

.list-title {
    position: relative;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'poppins' sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    display: flex;
    margin-bottom: 1rem;
}

.list-title img {
    margin-left: 0.5rem;
    margin-top: -0.5rem;
    width: 1.5rem;
    height: 2rem;
}

.container-filter {
    position: relative;
    display: flex;
    gap: 0.5rem;
}

.filter-btn {
    position: relative;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 2rem;
    background: #242424;
    color: white;
    cursor: pointer;
    transition: background 0.25s ease, transform .12s ease;
    font-family: 'Poppins', sans-serif;
}

.filter-btn:hover {
    background: #444;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: #fbff00;
    color: #000;
    box-shadow: 0 6px 18px rgba(251, 255, 0, 0.08);
}

/* dropdown menu */
.sort-menu {
    position: absolute;
    right: 0;
    margin-top: 0.5rem;
    min-width: 160px;
    background: #161616;
    border: 1px solid #333;
    border-radius: 0.5rem;
    padding: 0.4rem;
    z-index: 60;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* items */
.sort-item {
    background: transparent;
    border: none;
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-radius: 0.45rem;
    color: #fff;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: background .12s ease;
}

.sort-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.sort-item.active {
    background: #fbff00;
    color: #000;
    font-weight: 700;
}

.container-list-3 {
    position: relative;
    width: 100%;
    height: max-content;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 3rem;
}

.card-parents {
    position: relative;
    height: max-content;
    background: rgb(32, 32, 32);
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border: 1px solid #494949;
}

.card-parents:hover {
    transform: scale(0.98);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.card {
    position: relative;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-loader {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: #242424d2;
    display: grid;
    place-items: center;
    opacity: 0;
}

.card-parents:hover .card-loader {
    opacity: 1;
}

.loader {
    position: relative;
    width: 2rem;
    height: 2rem;
    background: rgb(255, 255, 255);
    animation: loadingBallPulse 1s ease infinite;
}

@keyframes loadingBallPulse {
    0% {
        transform: scale(0.7) rotate(0deg);
    }

    50% {
        transform: scale(1.3) rotate(180deg);
    }

    100% {
        transform: scale(0.5) rotate(360deg);
    }
}

.card-sold {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 15;
    display: grid;
    place-items: center;
    background: #242424d2;
}

.sold {
    position: relative;
    background: transparent;
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    border: 2px solid #b91c1c;
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.04em;
    pointer-events: none;
    overflow: hidden;
}

[x-cloak] {
    display: none !important;
}

.card-parents:hover .card img {
    transform: scale(1.2);
}

.card img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.3s ease;
}

.card-info-2 {
    position: relative;
    width: 100%;
    height: max-content;
    margin: 0.5rem 0;
}

.card-stock,
.card-h3 {
    position: relative;
    font-size: 1.1rem;
    font-weight: 400;
    left: 0.5rem;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
}

.card-p {
    position: relative;
    left: 0.5rem;
    color: #fbff00;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}

/* ---------- animation classes used by Alpine x-transition ---------- */
.fade-up-enter {
    transition: opacity 360ms ease, transform 360ms cubic-bezier(.2, .9, .2, 1);
}

.fade-up-enter-start {
    opacity: 0;
    transform: translateY(12px) scale(.995);
}

.fade-up-enter-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.fade-up-leave {
    transition: opacity 260ms ease, transform 260ms ease;
}

.fade-up-leave-start {
    opacity: 1;
    transform: translateY(0);
}

.fade-up-leave-end {
    opacity: 0;
    transform: translateY(-8px) scale(.995);
}

.akun-banner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 26rem;
    background: url('https://lzycriwqrcqbiijtiipa.supabase.co/storage/v1/object/public/gambar/banner/banner-akun.webp');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    color: #ffffff;
}

.akun-banner-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 9rem;
    background: url('https://lzycriwqrcqbiijtiipa.supabase.co/storage/v1/object/public/gambar/banner/banner-bottom.webp');
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: left;
    gap: 2rem;
}

/* scene menyediakan perspektif 3D */
.scene {
    position: relative;
    z-index: 0;
    width: 20rem;
    height: 5rem;
}

/* card adalah objek yang dimiringkan di ruang 3D */
.card-roger {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: center center;
    /* rotasi dasar; sesuaikan sudutnya */
    transform: rotateX(-20deg) rotateY(20deg) rotateZ(-5deg);
    transition: transform .35s cubic-bezier(.2, .9, .2, 1);
    will-change: transform;
    position: relative;
}

/* gambarmu — potong rapi, beri kedalaman (translateZ) */
/* Ganti box-shadow di .roger-metrozero dengan ini */
.roger-metrozero {
    position: absolute;
    left: 25%;
    top: -7rem;
    width: 15rem;
    height: 17rem;
    border-radius: 1rem;
    overflow: hidden;
    display: block;
    transform: translateZ(50px);
    will-change: transform;
    backface-visibility: hidden;

    /* Layered shadows: inset highlight + ambient + contact + subtle detail */
    box-shadow:
        /* soft glossy highlight (inside, top) */
        inset 0 8px 24px rgba(255, 255, 255, 0.06),
        /* small inner shadow along bottom for depth */
        inset 0 -6px 18px rgba(0, 0, 0, 0.12),
        /* main soft ambient shadow */
        0 22px 40px rgba(0, 0, 0, 0.52),
        /* smaller, sharper contact shadow closer to the element */
        0 10px 18px rgba(0, 0, 0, 0.38),
        /* subtle outer halo to blend with background */
        0 2px 6px rgba(0, 0, 0, 0.12);

    /* optional additional natural shadow via filter */
    filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.35));
}

/* pseudo-shadow/ground (lebih lembut dan melebar) */
.scene::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -24px;
    /* sedikit lebih rendah */
    height: 44px;
    /* lebih lebar */
    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.18) 18%,
            rgba(0, 0, 0, 0.05) 50%,
            transparent 100%);
    filter: blur(18px);
    transform-origin: center;
    z-index: -1;
    opacity: 0.95;
}

.akun-banner-bottom-1 {
    position: relative;
    width: max-content;
    height: max-content;
}

.akun-banner-bottom-1-2 {
    position: relative;
    margin-top: 1.5rem;
}

.akun-banner-bottom-1-2 h3 {
    color: #e2dcdc;
    font-weight: 700;
    letter-spacing: 0.05rem;
}

.akun-banner-bottom-1-2 p {
    color: #e2dcdc;
    font-weight: 600;
    letter-spacing: 0.05rem;
}

.akun-banner-bottom-2 {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}

.akun-banner-2-1 {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
}

.akun-banner-2-1 img {
    width: 30px;
    height: 30px;
}

.gallery {
    position: relative;
    margin-top: 1.5rem;
    width: 100%;
    margin-bottom: 5rem;
    height: max-content;
    padding: 0.5rem 5%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    z-index: 2;
}

.p-gallery-1 {
    position: relative;
    width: 70%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gallery-1 {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
}

.trigger-gallery-2 {
    position: relative;
    width: 100%;
    padding: 1rem;
    height: max-content;
    display: none;
    cursor: pointer;
    background: #242424;
    border: none;
    border-radius: 0.5rem;
    color: white;
    font-family: 'poppins' sans-serif;
    font-size: 1rem;
    font-weight: 500;
    transition: 0.3s ease;
}

.gallery-2 {
    position: sticky;
    top: 100px;
    width: 30%;
    height: max-content;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    background: #242424;
    backdrop-filter: blur(10px);
    border: 1px solid #444444;
    color: white;
    border-radius: 1rem;
    font-family: 'poppins' sans-serif;
}

.glr-h3 {
    position: relative;
    font-size: 1rem;
}

.glr-p {
    position: relative;
    font-size: 0.9rem;
}

.gallery-1-2 {
    position: relative;
    width: 100%;
    height: max-content;
    padding: 1rem 1rem 0 1rem;
    border-radius: 1rem 1rem 0 0;
    display: flex;
    flex-direction: column;
    background: #242424;
}

.gallery-1-3 {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #80808081;
}

.container-detail {
    position: relative;
    padding: 1rem;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #242424;
    border-radius: 0 0 1rem 1rem;
}

.detail-title {
    position: relative;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'poppins' sans-serif;
    letter-spacing: 0.1rem;
}

.warranty,
.reff,
.deskripsi-akun,
.id-akun,
.rank-tertinggi,
.total-skin,
.total-hero,
.total-winrate,
.total-pertandingan,
.level-emblem,
.akun-pribadi,
.akun-log,
.bind-akun,
.total-magic-core {
    position: relative;
    font-weight: 300;
    font-family: 'poppins' sans-serif;
    color: #ffffffde;
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

#account-name {
    position: relative;
    font-weight: 500;
    font-family: 'poppins' sans-serif;
    color: #ffffff;
    letter-spacing: 0.1rem;
    font-size: 1.2rem;
}

.account-id {
    position: relative;
    font-weight: 500;
    font-family: 'poppins' sans-serif;
    color: #e4e4e4d3;
    font-size: 0.9rem;
    text-decoration: none;
}

#account-price {
    color: #fbff00;
    font-weight: 500;
    font-size: 0.8rem;
}

.not-found-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 1;
}

.not-found {
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: white;
    font-family: 'poppins' sans-serif;
    font-size: 2rem;
    animation: scale 2s infinite linear;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* back home */
.back-home {
    position: relative;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-family: 'poppins' sans-serif;
    color: white;
    background: #242424;
    border: none;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: 0.3s ease;
}

.slider-container {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.slider {
    position: relative;
    display: flex;
    width: max-content;
    height: max-content;
    overflow: hidden;
    border-radius: 1rem;
}

.slider-images {
    position: relative;
    display: flex;
    width: 27rem;
    height: 27rem;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
}

.container-chat {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: center;
}

.btn-rekber {
    position: relative;
    width: 100%;
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-size: 1rem;
    font-family: 'poppins' sans-serif;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: 0.2s ease;
}

.btn-rekber {
    color: rgb(255, 255, 255);
    background: #242424;
    border: 1px solid #242424;
}

.btn-rekber:hover,
.back-home:hover {
    transform: scale(0.95);
    background: #444444;
    color: rgba(212, 212, 212, 0.521);
}

footer {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

footer svg {
    position: relative;
    width: 100%;
    top: 1px;
}

.footer-2 {
    position: relative;
    width: 100%;
    height: max-content;
    padding: 2rem 5% 0 5%;
    background: #242424;
    display: flex;
    gap: 5rem;
    flex-wrap: wrap;
}

.footer-card {
    position: relative;
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: column;
}

.footer-logo {
    position: relative;
    width: 14rem;
    height: 5.5rem;
    margin-bottom: 1rem;
}

.footer-hr {
    position: relative;
    width: 5rem;
    height: 3px;
    background: linear-gradient(to right, white, #11112e);
    border-radius: 3px;
    margin-bottom: 1rem;
}

.footer-deskripsi {
    position: relative;
    width: 24rem;
    font-weight: 400;
    font-family: 'poppins' sans-serif;
    color: #ffffff;
    font-size: 0.9rem;
}

.footer-title {
    position: relative;
    font-weight: bold;
    font-family: 'poppins' sans-serif;
    color: #ffffff;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    font-size: 1rem;
}

.footer-list {
    position: relative;
    display: flex;
    flex-direction: column;
}

.footer-links {
    position: relative;
    font-weight: 300;
    font-family: 'poppins' sans-serif;
    color: #ffffff;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    transition: 0.3s ease;
}

.footer-links:hover {
    color: #fbff00;
}

.coppyright {
    position: relative;
    width: 100%;
    height: 3rem;
    padding: 2rem 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #242424;
    color: #ffffff;
    font-weight: 300;
    font-family: 'poppins' sans-serif;
    font-size: 0.8rem;
}

.container-load-more {
    text-align: center;
    width: 100%;
    margin-bottom: 3rem;
}

.ui-panel-open {
    pointer-events: none;
    filter: blur(10px);
}

.container-unggul-parent {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 10rem;
}

.container-unggul-parent h2 {
    text-transform: uppercase;
    color: white;
    font-family: 'poppins' sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.container-unggul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.container-unggul-child {
    position: relative;
    height: 7rem;
    padding: 2rem;
    border-radius: 1rem;
    background: linear-gradient(to bottom right, #303030, #141414, #000000);
    box-shadow: -3px 3px 3px #000000;
    color: #ffffff;
    transition: 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container-unggul-child:hover {
    transform: scale(0.98);
    box-shadow: 0 0 0 transparent;
}

.container-unggul-child div {
    position: relative;
}

.container-unggul-child div h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.container-unggul-child div p {
    color: #ffffffb2;
    font-size: 0.8rem;
}

.container-unggul-child i {
    color: #fbff00;
    font-size: 2rem;
}

/* 1) Hilangkan overlay biru saat tap pada perangkat sentuh (iOS/Android) */
@media (hover: none) and (pointer: coarse) {

    a,
    button {
        -webkit-tap-highlight-color: transparent;
        /* Chrome/Safari mobile */
    }
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
    /* kalau pakai shadow sebagai fokus */
}

/* 3) Fallback untuk browser lama: deteksi perangkat sentuh dan sembunyikan focus hanya untuk mereka */
html.is-touch a:focus,
html.is-touch button:focus {
    outline: none;
    box-shadow: none;
}

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

    header {
        padding: 0.3rem 2.5%;
    }

    .btn-search {
        width: 65%;
    }

    .btn-search:focus,
    .btn-search:focus-within {
        width: 70%;
    }

    .container-list {
        padding: 1rem 2.5%;
    }

    .container-list-1 {
        margin-bottom: 0;
    }

    .list-title {
        font-size: 1rem;
    }

    .container-list-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .card {
        height: 11rem;
    }

    .card-box {
        height: 4rem;
        width: 4rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }


    .container-search {
        top: 7rem;
        width: 90%;
    }

    .container-load-more {
        margin-bottom: 6rem;
    }

    .footer-2 {
        padding: 2rem 2.5% 0 2.5%;
        gap: 4rem;
    }

    .footer-deskripsi {
        width: 100%;
    }

    .coppyright {
        padding: 1.5rem 2.5%;
        gap: 1.5rem;
    }

    .gallery {
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 5rem;
    }

    .p-gallery-1 {
        width: 100%;
    }

    .gallery-2 {
        width: 100%;
        display: none;
        position: relative;
        top: 0;
    }

    .slider {
        width: 100%;
        max-width: max-content;
    }

    .slider-images {
        width: 100%;
        height: 100%;
    }

    .btn-rekber {
        font-size: 0.8rem;
    }

    .trigger-gallery-2 {
        display: block;
        font-size: 0.8rem;
    }

    .trigger-gallery-2:active {
        transform: scale(0.95);
    }

    .gallery {
        margin-bottom: 10rem;
        padding: 0.5rem 2.5%;
    }

    .not-found {
        font-size: 1.5rem;
    }

    .container-privacy-policy h1,
    .container-terms h1 {
        font-size: 1.5rem;
    }

    .container-privacy-policy h2,
    .container-terms h2 {
        font-size: 1rem;
    }

    .container-privacy-policy p,
    .container-terms p {
        font-size: 0.8rem;
        text-align: left;
    }

    .container-unggul {
        grid-template-columns: repeat(1, 1fr);
        gap: 0.3rem;
    }

    .container-unggul-child {
        height: 6rem;
        padding: 0.5rem 2rem;
        border-radius: 0.5rem;
    }

    .container-unggul-child div h3 {
        font-size: 1rem;
    }

    .container-unggul-child div p {
        font-size: 0.7rem;
    }

    .container-unggul-child i {
        font-size: 1.1rem;
    }

    .container-banner {
        padding: 1rem 5% 1rem 5%;
    }

    .banner-slider .slide img {
        height: 160px;
        background: #24242479;
    }

    .banner-prev,
    .banner-next {
        width: 2rem;
        height: 2rem;
        font-size: 0.85rem;
        display: none;
        visibility: hidden;
    }

    .banner-dots button {
        width: 8px;
        height: 8px;
    }

    .akun-banner {
        width: 100%;
        height: 17rem;
        background-size: cover;
        background-position: left;
    }

    .akun-banner-bottom {
        height: 7rem;
        gap: 0;
    }

    .scene {
        width: 12rem;
        height: 4rem;
    }

    .roger-metrozero {
        left: 5%;
        top: -3.5rem;
        width: 8rem;
        height: 10rem;
        transform: translateZ(40px);
    }

    .akun-banner-bottom-1 {
        width: max-content;
        height: max-content;
    }

    .akun-banner-bottom-1:nth-child(1) {
        margin-left: -1rem;
    }

    .akun-banner-bottom-1:nth-child(2) {
        margin-left: -2rem;
    }

    .akun-banner-bottom-1-2 {
        margin-top: 1rem;
    }

    .akun-banner-bottom-1-2 h3 {
        font-size: 0.9rem;
    }

    .akun-banner-bottom-1-2 p {
        font-size: 0.8rem;
    }

    .akun-banner-bottom-2 {
        gap: 0.5rem;
    }

    .akun-banner-2-1 {
        font-size: 0.6rem;
    }

    .akun-banner-2-1 img {
        width: 20px;
        height: 20px;
    }
}

/* landscape */
@media screen and (min-width: 480px) and (max-width: 1024px) {
    .btn-search {
        width: 40%;
    }

    .btn-search:focus,
    .btn-search:focus-within {
        width: 45%;
    }

    .list-title {
        font-size: 1rem;
    }

    .container-list-3 {
        grid-template-columns: repeat(4, 1fr);
    }

    .card {
        max-height: 12rem;
        width: auto;
    }

    .card-box {
        height: 4rem;
        width: 4rem;
        margin-top: 2rem;
        margin-bottom: 1.5rem;
    }


    .container-search {
        width: 90%;
    }

    .footer-deskripsi {
        width: 100%;
    }

    .gallery {
        margin-bottom: 5rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .p-gallery-1 {
        width: 100%;
    }

    .gallery-2 {
        width: 100%;
    }

    .slider-images {
        width: 22rem;
        height: 22rem;
    }

    .prev,
    .next {
        font-size: 2rem;
    }

    .trigger-gallery-2 {
        display: block;
    }

    .trigger-gallery-2:active {
        transform: scale(0.95);
    }

    .gallery-2 {
        display: none;
    }

    .banner-slider .slide img {
        height: 275px;
    }

    .banner-prev,
    .banner-next {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.95rem;
    }

    .banner-dots button {
        width: 9px;
        height: 9px;
    }

    .container-unggul-child div h3 {
        font-size: 0.9rem;
    }

    .container-unggul-child div p {
        font-size: 0.7rem;
    }

    .container-unggul-child i {
        font-size: 1.2rem;
    }

    .akun-banner {
        height: 22rem;
        background-size: cover;
        background-position: center;
    }

    .scene {
        width: 16rem;
        height: 4rem;
    }

    .roger-metrozero {
        left: 15%;
        top: -5rem;
        width: 12rem;
        height: 14rem;
        transform: translateZ(45px);
    }

    .akun-banner-bottom {
        height: 8rem;
    }

    .akun-banner-bottom-1-2 h3 {
        font-size: 1rem;
    }

    .akun-banner-bottom-1-2 p {
        font-size: 0.9rem;
    }

    .akun-banner-bottom-2 {
        gap: 0.8rem;
    }

    .akun-banner-2-1 {
        font-size: 0.8rem;
    }

    .akun-banner-2-1 img {
        width: 25px;
        height: 25px;
    }
}

@media screen and (min-width: 1500px) and (max-width: 2248px) {
    .container-list-3 {
        grid-template-columns: repeat(5, 1fr);
    }

    .card {
        max-height: 14rem;
        width: auto;
    }

    .banner-slider .slide img {
        height: 470px;
    }
}

/* Falling leaves background */
#bg-leaves {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* tidak mengganggu klik */
    mix-blend-mode: normal;
}

/* Thumbnails (horizontal, bottom-right) */
.slider-thumbs {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: .5rem;
    z-index: 30;
    align-items: center;
    pointer-events: auto;
    background: transparent;
    padding: .2rem;
}

.slider-thumbs .thumb-btn {
    border: none;
    background: transparent;
    padding: 0;
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: .4rem;
    overflow: hidden;
    cursor: pointer;
    transition: all .12s ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.slider-thumbs .thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slider-thumbs .thumb-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.slider-thumbs .thumb-btn.active {
    outline: 2px solid #fbff00;
    transform: scale(1.03);
}

/* Lightbox */
.ranziro-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.92);
    cursor: zoom-out;
}

.ranziro-lightbox .lb-inner {
    max-width: 92%;
    max-height: 92%;
    overflow: hidden;
}

.ranziro-lightbox .lb-img {
    max-width: 100%;
    max-height: 100%;
    transform-origin: center center;
    transition: transform .08s ease;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.ranziro-lightbox .lb-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
}

@media (max-width: 480px) {
    .slider-thumbs {
        right: .6rem;
        bottom: .6rem;
        gap: .35rem;
    }

    .slider-thumbs .thumb-btn {
        width: 44px;
        height: 44px;
    }
}