/* Steps */
.steps-container {
    width: 100%;
    /* max-width: 900px; */
    margin: 0 auto;
    padding: 12px 0px;
    box-sizing: border-box;
    border: 1px solid grey;
    border-radius: 30px;
    background: linear-gradient(275deg, rgba(0, 0, 0, 0.49) 0%, rgb(0 0 0 / 29%) 52%, rgb(87 199 152 / 33%) 100%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.gold-border {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    border-radius: 40px;
    padding: 20px;
    border: 2px solid transparent;
    /* background:
        linear-gradient(#000, #000) padding-box,
        linear-gradient(78deg, #f0c623 0%, #1a1301 50%, #ffd700 100%) border-box; */
}

.gold-border::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 40px;
    border: 2px solid transparent;
    background: linear-gradient(78deg, #f0c623 0%, #1a1301 50%, #ffd700 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}

/* .gold-border::before {
      content: "";
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      bottom: 20px;
      border-radius: 22px;
      border: 2px solid transparent;
      background: linear-gradient(78deg, #f0c623 0%, #1a1301 50%, #ffd700 100%) border-box;
      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: destination-out;
    } */

.steps {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    flex: 1;
    position: relative;
    text-align: center;
}

/* Garis Penghubung antar Step (Kanthi Jarak / Gap) */
.step:not(:last-child):before,
.step:not(:last-child):after {
    display: block;
    position: absolute;
    top: 1.8rem;
    left: calc(50% + 2.5rem);
    /* Jarak saka sisih tengen angka */
    height: 2px;
    content: "";
    transform: translateY(-50%);
    z-index: 1;
}

/* 1. Garis Dasar / Jalur (Abu-abu Pudar / Putih Transparan) */
.step:not(:last-child):before {
    width: calc(100% - 5rem);
    /* Lebar garis dasar digawe wis full antar angka */
    background-color: rgba(255, 255, 255, 0.2);
    /* Werna putih pudar / abu-abu transparan */
}

/* 2. Garis Progress (Emas sing Animasi Mlaku) */
.step:not(:last-child):after {
    width: 0px;
    /* Diwiwiti saka 0px supaya katon proses mlakune */
    background: linear-gradient(90deg, #ffd700, #b8860b);
    transition: width 0.8s ease-in-out;
    z-index: 2;
    /* Dideleh ing ndhuwur garis abu-abu */
}

/* Nalika Step Complete, Garis Emas Penuh Menyang Tengen */
.step--complete:after {
    width: calc(100% - 5rem) !important;
}

/* Angka Step (Tanpa Box/Rounded) */
.step__number {
    position: relative;
    z-index: 2;
    font-size: 3.5rem;
    font-weight: 800;
    color: #555a66;
    /* Warna angka mati/inactive */
    line-height: 1;
    transition: color 0.4s ease;
    padding: 0 10px;
}

/* Step Aktif & Complete (Angka dadi Putih Padhang) */
.step--active .step__number,
.step--complete .step__number {
    color: #ffffff;
}

/* Caption (Judul & Deskripsi) */
.step__content {
    margin-top: 1.5rem;
    padding: 0 50px;
}

.step__content h5 {
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    color: #00e64d;
    line-height: 1.3;
}

/* .step__content p {
      margin: 0;
      font-size: 0.85rem;
      line-height: 1.4;
      color: #a0a5b1;
    } */

/* Caption katon rada buram pas inactive */
.step--inactive .step__content {
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.step--active .step__content,
.step--complete .step__content {
    opacity: 1;
}

/* Class sementara kanggo mateni animasi garis pas reset */
.no-transition:after {
    transition: none !important;
}

/* --- RESPONSIVE MOBILE VIEW (Beneran Rapi) --- */

@media (max-width: 1366px) {
    .step__content {
        padding: 0 10px;
    }
}
@media (max-width: 768px) {
    .steps-container {
        padding: 20px;
    }

    .gold-border {
        padding: 15px;
        /* Ngelongi padding njero kothak emas */
        border-radius: 24px;
    }

    .steps {
        flex-direction: column;
        align-items: flex-start;
    }

    .step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        margin-bottom: 1.8rem;
        width: 100%;
        position: relative;
    }

    .step:last-child {
        margin-bottom: 0;
    }

    /* Garis Vertikal (Dasar & Progress) */
    .step:not(:last-child):before,
    .step:not(:last-child):after {
        top: 42px;
        left: 16px;
        width: 2px !important;
        height: calc(100% - 1rem);
        transform: translateX(-50%);
    }

    /* Garis Progress Pas Complete (Arah Mudhun) */
    .step--complete:after {
        height: calc(100% - 1rem) !important;
        width: 2px !important;
    }

    /* Ukuran Angka ing HP */
    .step__number {
        font-size: 2.5rem;
        /* Diciutake sethithik supaya pas ing HP */
        padding: 0;
        min-width: 2.2rem;
        /* Jaga ukuran kothak angka tetep konsisten */
        text-align: center;
    }

    /* Konten Caption (Judul & Teks) */
    .step__content {
        margin-top: 0.2rem;
        margin-left: 1.2rem;
        padding: 0;
        /* Mbusak padding 50px desktop sing nggawe teks kempetan */
    }

    .step__content h5 {
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }
}

/* Card Random */
.parent-ib {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* GANTI repeat(6, 1fr) dadi auto supaya dhuwur baris ngetutake isi card */
    grid-template-rows: auto;
    gap: 40px;
    /* Nggawe card ora peksa ke-stretch mandhuwur/mangisor */
    align-items: start;
}

.card-grid {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 8px;
    /* Tambahkan tinggi otomatis */
    height: 100%;
}


@media (max-width: 768px) {

    .parent-ib .card-grid:nth-child(2) img,
    .parent-ib .card-grid:nth-child(4) img,
    .parent-ib .card-grid:nth-child(5) img {
        transform: scale(.9);
    }
}


.card-grid1 {
    grid-area: 1 / 2 / 2 / 3;
    height: fit-content;
}

.card-grid2 {
    grid-area: 1 / 1 / 3 / 2;
    background: url('../images/bg-card-grid-1.webp') no-repeat center center;
    background-size: cover;
}

.card-grid3 {
    grid-area: 2 / 2 / 4 / 3;
    background: url('../images/bg-card-grid-2.webp') no-repeat center center;
    background-size: cover;
}

.card-grid4 {
    grid-area: 3 / 1 / 6 / 2;
    background: url('../images/bg-card-grid-3.webp') no-repeat center center;
    background-size: cover;
}

.card-grid5 {
    grid-area: 4 / 2 / 6 / 3;
    background: url('../images/bg-card-grid-4.webp') no-repeat center center;
    background-size: cover;
}

.card-grid6 {
    grid-area: 6 / 1 / 7 / 3;
    background: url('../images/bg-card-grid-5.webp') no-repeat center center;
    background-size: cover;
}

.card-grid5 img {
    max-width: 340px;
}

.card-border {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

.card-border::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border-radius: 22px;
    border: 2px solid transparent;
    background: linear-gradient(78deg, #f0c623 0%, #1a1301 50%, #ffd700 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
}

.card-border img {
    width: 100%;
}

/* Box Animasi */

.box {
    width: 320px;
    height: 340px;
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.box-glass img {
    max-width: 300px;
}

/* Container Teks Counter (Gaya Asli Panjenengan) */
.counter-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7rem;
    /* Tetep 7rem manut kode asli */
    font-weight: 900;
    color: #2bd966;
    height: 200px;
    /* Tetep 200px manut kode asli */
    letter-spacing: -4px;
    /* Dikitirake sethithik supaya rong digit lan % muat */
}

/* Slot Digit */
.digit-slot {
    position: relative;
    height: 100%;
    width: 0.58em;
    /* Disesuaiake titik jembar angka 7rem */
    overflow: hidden;
    display: inline-block;
}

.digit-item {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: 0;
    line-height: 200px;
    /* Di-samakan karo height wrapper supaya pas ing tengah */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Status Normal */
/* Status Posisi Normal (Katut Terang) */
.digit-item.curr {
    transform: translateY(0);
    opacity: 1;
    /* Paling cetha nalika ing tengah */
}

/* --- ANIMASI MUNGGAH (LUWIH GEDHE) --- */
.digit-item.next-up {
    transform: translateY(60%);
    /* Mlebu saka ngisor rada cedhak */
    opacity: 0;
    /* Transparan pas mlebu */
}

.digit-item.leave-up {
    transform: translateY(-60%);
    /* Metu menyang dhuwur */
    opacity: 0;
    /* Transparan pas metu */
}

/* --- ANIMASI MUDHUN (LUWIH CILIK) --- */
.digit-item.next-down {
    transform: translateY(-60%);
    /* Mlebu saka dhuwur */
    opacity: 0;
    /* Transparan pas mlebu */
}

.digit-item.leave-down {
    transform: translateY(60%);
    /* Metu menyang ngisor */
    opacity: 0;
    /* Transparan pas metu */
}

/* Counter diwenehi z-index luwih dhuwur supaya ing ngarep banyu */
.counter {
    position: relative;
    z-index: 10;
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes fill {
    from {
        top: 180px;
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        top: -100px;
        transform: translateX(-50%) rotate(360deg);
    }
}

@media (max-width: 991px) {

    .box-glass img {
        max-width: 200px;
    }

    .counter-wrapper {
        font-size: 5rem;
    }
}

@media (max-width: 768px) {

    .box-glass img {
        max-width: 200px;
    }

    .parent-ib {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
    }

    /* Reset kabeh grid-area supaya card ketata urut mangisor */
    .card-grid1,
    .card-grid2,
    .card-grid3,
    .card-grid4,
    .card-grid5,
    .card-grid6 {
        grid-area: auto;
    }
}


/* Card Flip */
.grid-wrapper-card-flip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: stretch;
    /* Dhuwure kabeh card sak baris bakal melu sing paling dawa */
}

.card-flip {
    width: 100%;
    perspective: 1000px;
    display: flex;
}

.card-inner {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-areas: "card-content";
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    border-radius: 32px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
    min-height: 380px;
}

/* Animasi Flip pas Hover */
.card-flip:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    grid-area: card-content;
    width: 100%;
    height: 100%;
    min-height: 150px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 32px;
    box-sizing: border-box;
    width: 100%;
    padding: 30px 40px 0px;
}

.card-front {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(45, 51, 66, 1) 100%);
    color: #ffffff;
}

.card-front img {
    width: 100%;
    max-width: 250px;
}

.card-front p {
    /* font-size: 48px; */
    /* font-weight: bold; */
}

.grid-wrapper-card-flip .card-flip:nth-child(1) img {
    transform: scale(1.36);
}

.grid-wrapper-card-flip .card-flip:nth-child(2) img {
    transform: scale(1.7) translate(4px, 8px);
}

.grid-wrapper-card-flip .card-flip:nth-child(3) img {
    transform: scale(1.46) translate(40px, -52px);
}

.grid-wrapper-card-flip .card-flip:nth-child(3) img {
    transform: scale(1.5) translate(40px, -52px);
    -webkit-transform: scale(1.5) translate(40px, -52px);
    -moz-transform: scale(1.5) translate(40px, -52px);
    -ms-transform: scale(1.5) translate(40px, -52px);
    -o-transform: scale(1.5) translate(40px, -52px);
}

.grid-wrapper-card-flip .card-flip:nth-child(4) img {
    transform: scale(1.1) translate(0px, 8px);
}

.grid-wrapper-card-flip .card-flip:nth-child(6) img {
    transform: scale(1.5) translate(0px, -12px);
}

.card-back {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(45, 51, 66, 1) 100%);
    color: #ffffff;
    transform: rotateY(180deg);
    justify-content: center;
    gap: 26px;
}

.card-front::before,
.card-back::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border-radius: 22px;
    border: 2px solid transparent;
    background: linear-gradient(78deg, #f0c623 0%, #1a1301 50%, #ffd700 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
}

/* .card-back h3 {
      font-size: 20px;
      margin-bottom: 8px;
    }

    .card-back p {
      font-size: 14px;
      color: #cccccc;
      line-height: 1.5;
    } */

@media (max-width: 991px) {

    .card-front,
    .card-back {
        padding: 30px 40px;
    }

    .card-front img {
        width: 100%;
        max-width: 200px;
    }

    .grid-wrapper-card-flip {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-wrapper-card-flip .card-flip:nth-child(1) img {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }

    .grid-wrapper-card-flip .card-flip:nth-child(2) img {
        transform: scale(1.3) translate(4px, 8px);
        -webkit-transform: scale(1.3) translate(4px, 8px);
        -moz-transform: scale(1.3) translate(4px, 8px);
        -ms-transform: scale(1.3) translate(4px, 8px);
        -o-transform: scale(1.3) translate(4px, 8px);
    }

    .grid-wrapper-card-flip .card-flip:nth-child(3) img {
        transform: scale(1.16) translate(40px, -32px);
        -webkit-transform: scale(1.16) translate(40px, -32px);
        -moz-transform: scale(1.16) translate(40px, -32px);
        -ms-transform: scale(1.16) translate(40px, -32px);
        -o-transform: scale(1.16) translate(40px, -32px);
    }

    .grid-wrapper-card-flip .card-flip:nth-child(4) img {
        transform: scale(1) translate(0px, 8px);
        -webkit-transform: scale(1) translate(0px, 8px);
        -moz-transform: scale(1) translate(0px, 8px);
        -ms-transform: scale(1) translate(0px, 8px);
        -o-transform: scale(1) translate(0px, 8px);
    }

    .grid-wrapper-card-flip .card-flip:nth-child(6) img {
        transform: scale(1) translate(0px, -12px);
        -webkit-transform: scale(1) translate(0px, -12px);
        -moz-transform: scale(1) translate(0px, -12px);
        -ms-transform: scale(1) translate(0px, -12px);
        -o-transform: scale(1) translate(0px, -12px);
    }
}

@media (max-width: 768px) {
    .grid-wrapper-card-flip {
        grid-template-columns: 1fr;
        /* Dadi 1 baris/kolom munggah medhun */
    }
}

.iti--separate-dial-code .iti__selected-flag {
    min-width: 116px;
}