/* =====================================================================
   BERANDA V3 - lapisan animasi & tata letak hero
   ---------------------------------------------------------------------
   File TAMBAHAN. style.css tidak diubah sama sekali, jadi kalau tampilan
   ini tidak cocok, cukup hapus satu baris <link> di index.php dan
   halaman kembali seperti semula.

   Seluruh gaya di sini dikurung di dalam .v3 supaya tidak bocor ke
   halaman lain yang memakai kelas yang sama (.section, .card, dst).

   Token warna mengikuti style.css: navy, ocean, orange. Satu warna baru
   (--trace) hanya dipakai untuk jalur data di latar hero.
   ===================================================================== */

.v3 {
    --trace: #5B93B8;          /* jalur data di kanvas - navy yang diterangkan */
    --glass: rgba(255, 255, 255, .92);
    --hairline: rgba(255, 255, 255, .16);
}

/* ---------- garis kemajuan gulir ---------- */
.v3 .scroll-rail {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 999;
    background: transparent;
    pointer-events: none;
}
.v3 .scroll-rail i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--orange);
    transition: width .12s linear;
}

/* ---------- HERO ---------- */
.v3 .hero-v2 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Panel navy di kanan menjadi wadah: kartu sertifikat di tengah,
   rel angka di bawahnya. Padding kiri dibesarkan supaya isi tidak
   terpotong oleh clip-path diagonal milik style.css. */
.v3 .hero-v2-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    padding: 56px 34px 56px 19%;
}

/* Kanvas jalur data - hanya di dalam panel navy, tidak menutupi
   sisi kiri hero yang berlatar putih. */
.v3 .hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .75;
}
.v3 .hero-v2-grid { position: relative; z-index: 2; }

/* Judul: skala dinaikkan, tracking dirapatkan */
.v3 .hero-v2 h1 {
    font-size: clamp(2.3rem, 5.4vw, 3.9rem);
    letter-spacing: -.022em;
    font-weight: 800;
}

/* Baris berjalan berisi nama skema asli dari database */
.v3 .hero-ticker {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 6px 0 18px;
    min-height: 2em;                 /* cegah teks di bawahnya melompat */
    font-size: clamp(1rem, 2vw, 1.18rem);
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
}
.v3 .hero-ticker .label {
    color: rgba(255, 255, 255, .5);
    font-size: .85rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.v3 .hero-ticker .typed { color: #fff; font-weight: 600; }
.v3 .hero-ticker .caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: var(--orange);
    transform: translateY(2px);
    animation: v3caret 1s steps(1) infinite;
}
@keyframes v3caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ---------- PANEL KANAN: KARTU SERTIFIKAT ---------- */
.v3 .cred {
    position: relative;
    z-index: 2;
    width: min(360px, 86%);
    margin: 0 auto;
    background: var(--glass);
    border-radius: 18px;
    padding: 22px 22px 18px;
    box-shadow: 0 26px 60px rgba(8, 22, 38, .38);
    backdrop-filter: blur(6px);
    overflow: hidden;
}
.v3 .cred::after {                    /* garis pindai */
    content: '';
    position: absolute;
    left: 0; right: 0; top: -40%;
    height: 38%;
    background: linear-gradient(180deg, transparent, rgba(232, 121, 46, .22), transparent);
    animation: v3scan 3.6s cubic-bezier(.4, 0, .2, 1) infinite;
    pointer-events: none;
}
@keyframes v3scan {
    0%   { top: -40%; }
    70%  { top: 105%; }
    100% { top: 105%; }
}

.v3 .cred-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid #E3E9ED;
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.v3 .cred-head h3 {
    margin: 0;
    font-size: .96rem;
    line-height: 1.35;
    color: var(--navy);
}
.v3 .cred-head p {
    margin: 3px 0 0;
    font-size: .74rem;
    color: var(--ink-soft);
}

/* Kisi QR - tiap kotak muncul bergantian, dirakit oleh JS */
.v3 .qr {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 2px;
    width: 92px;
    flex-shrink: 0;
}
.v3 .qr i {
    aspect-ratio: 1;
    border-radius: 1px;
    background: var(--navy);
    opacity: 0;
    transform: scale(.4);
}
.v3 .qr i.on { animation: v3cell .4s ease-out forwards; }
.v3 .qr i.off { background: transparent; }
@keyframes v3cell { to { opacity: 1; transform: scale(1); } }

.v3 .cred-rows { display: grid; gap: 9px; }
.v3 .cred-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .8rem;
}
.v3 .cred-row span { color: var(--ink-soft); }
.v3 .cred-row b { color: var(--navy); font-weight: 600; text-align: right; }

.v3 .cred-stamp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(30, 138, 90, .1);
    color: var(--success);
    font-size: .78rem;
    font-weight: 600;
    opacity: 0;
    transform: scale(.86) rotate(-4deg);
}
.v3 .cred-stamp.land { animation: v3stamp .5s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes v3stamp { to { opacity: 1; transform: scale(1) rotate(0); } }
.v3 .cred-stamp svg { width: 14px; height: 14px; }

/* ---------- REL ANGKA ---------- */
.v3 .stat-rail {
    position: relative;
    z-index: 2;
    width: min(360px, 86%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 26px;
    background: var(--hairline);
    border-radius: 14px;
    overflow: hidden;
}
.v3 .stat-rail div {
    background: rgba(11, 30, 50, .55);
    padding: 15px 16px;
}
.v3 .stat-rail b {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}
.v3 .stat-rail span {
    font-size: .74rem;
    color: rgba(255, 255, 255, .62);
    line-height: 1.35;
    display: block;
    margin-top: 3px;
}

/* ---------- KARTU SKEMA: kemiringan mengikuti kursor ---------- */
.v3 .bento-item {
    transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
    transform-style: preserve-3d;
    will-change: transform;
}
.v3 .bento-item:hover { box-shadow: var(--shadow-lg); }
.v3 .bento-item .icon-wrap { transition: transform .35s ease; }
.v3 .bento-item:hover .icon-wrap { transform: translateZ(26px) scale(1.06); }

/* ---------- ALUR: garis terisi saat digulir ---------- */
.v3 .flow-line { position: relative; }
.v3 .flow-progress {
    position: absolute;
    left: 0; right: 0;
    top: 26px;
    height: 2px;
    background: #DCE4EA;
    z-index: 0;
}
.v3 .flow-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--orange);
    transition: width .5s ease-out;
}
.v3 .flow-step { position: relative; z-index: 1; }
.v3 .flow-num { transition: background .4s ease, color .4s ease, transform .4s ease; }
.v3 .flow-step.reached .flow-num {
    background: var(--orange);
    color: #fff;
    transform: scale(1.08);
}
@media (max-width: 860px) { .v3 .flow-progress { display: none; } }

/* ---------- MASUKNYA SECTION ---------- */
.v3 [data-rise] {
    opacity: 0;
    transform: translateY(18px);
}
.v3 [data-rise].in {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1);
}

/* ---------- LAYAR KECIL ---------- */
@media (max-width: 860px) {
    .v3 .hero-v2-panel { padding: 34px 20px; }
    .v3 .cred { width: 100%; }
    .v3 .stat-rail { width: 100%; grid-template-columns: repeat(3, 1fr); }
    .v3 .stat-rail b { font-size: 1.25rem; }
    .v3 .stat-rail div { padding: 12px 10px; }
    .v3 .hero-canvas { opacity: .5; }
}
@media (max-width: 460px) {
    .v3 .stat-rail { grid-template-columns: 1fr; }
}

/* ---------- HORMATI PREFERENSI KURANGI GERAK ---------- */
@media (prefers-reduced-motion: reduce) {
    .v3 .hero-canvas { display: none; }
    .v3 .cred::after,
    .v3 .hero-ticker .caret { animation: none; }
    .v3 .qr i { opacity: 1; transform: none; animation: none; }
    .v3 .cred-stamp { opacity: 1; transform: none; animation: none; }
    .v3 [data-rise] { opacity: 1; transform: none; }
    .v3 .bento-item { transition: none; }
    .v3 .scroll-rail { display: none; }
}