/* ==========================================================================
   Halaman /link (resources/views/link/show.blade.php)

   Dimuat di atas layout marketing (style.css + maerev-landing.css): navbar
   versi terang, footer ringkas, font dan ikon sudah tersedia. Halamannya
   putih polos: langsung daftar tombol di bawah navbar.
   - tombol = kapsul bergaris + ikon bulat bergaris (gaya ikon sosial footer)
     + lingkaran hitam berpanah (DNA .btn-one)
   - hover/sorot memakai gradien merek #45C4E8 -> #4433E0, bukan oranye
     #FF481F atau gradien pink sisa template.
   style.css memaksa p {line-height:1.85em}, jadi line-height di bawah
   sengaja ditulis eksplisit.
   ========================================================================== */

.mrv-link-page {
    --mrv-link-grad: linear-gradient(135deg, #45C4E8 0%, #4433E0 100%);
    --mrv-link-indigo: #4433E0;
    --mrv-link-ink: #000;
    --mrv-link-line: rgba(0, 0, 0, 0.12);
    --mrv-link-line-soft: rgba(0, 0, 0, 0.1);
    --mrv-link-paper: #fff;
    --mrv-link-ease: 0.3s ease-in-out;
}

/* --- Tata letak --------------------------------------------------------- */

/* Padding atas memberi ruang bar promo + navbar overlay (±108px). */
.mrv-link-page {
    padding: 140px 16px 0;
}

.mrv-link-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
}

/* Kapsul: ikon bulat | label | lingkaran panah. Gradien hover dipasang di
   ::before lalu di-fade lewat opacity (background gradien tidak bisa
   di-transisikan langsung), sama seperti .btn-one. isolation membuat
   z-index:-1 tetap di dalam tombol, tidak jatuh ke belakang halaman. */
.mrv-link-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 8px;
    border: 1px solid var(--mrv-link-line);
    border-radius: 50px;
    background: var(--mrv-link-paper);
    color: var(--mrv-link-ink);
    transition: color var(--mrv-link-ease), border-color var(--mrv-link-ease),
        transform var(--mrv-link-ease), box-shadow var(--mrv-link-ease);
    animation: mrvLinkIn 0.4s ease backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}

.mrv-link-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--mrv-link-grad);
    opacity: 0;
    transition: opacity var(--mrv-link-ease);
}

.mrv-link-ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--mrv-link-line-soft);
    border-radius: 50%;
    font-size: 20px;
    transition: border-color var(--mrv-link-ease), background var(--mrv-link-ease);
}

.mrv-link-label {
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.mrv-link-arrow {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mrv-link-ink);
    color: #fff;
    font-size: 16px;
    transition: background var(--mrv-link-ease), color var(--mrv-link-ease);
}

/* Hover tombol biasa dan keadaan tetap tombol sorot. */
.mrv-link-btn:hover,
.mrv-link-btn.is-highlighted {
    border-color: transparent;
    color: #fff;
}

.mrv-link-btn:hover::before,
.mrv-link-btn.is-highlighted::before {
    opacity: 1;
}

.mrv-link-btn:hover .mrv-link-ico,
.mrv-link-btn.is-highlighted .mrv-link-ico {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
}

.mrv-link-btn:hover .mrv-link-arrow,
.mrv-link-btn.is-highlighted .mrv-link-arrow {
    background: #fff;
    color: var(--mrv-link-indigo);
}

.mrv-link-btn:hover {
    transform: translateY(-2px);
}

.mrv-link-btn.is-highlighted {
    box-shadow: 0 10px 25px rgba(68, 51, 224, 0.25);
}

.mrv-link-btn.is-highlighted:hover {
    box-shadow: 0 14px 30px rgba(68, 51, 224, 0.32);
}

/* style.css mematikan outline a:focus; fokus keyboard tetap harus terlihat. */
.mrv-link-btn:focus-visible {
    outline: 3px solid rgba(68, 51, 224, 0.35);
    outline-offset: 3px;
}

.mrv-link-empty {
    margin: 12px 0;
    text-align: center;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.5);
}

/* --- Mode gelap (tombol tema situs) ----------------------------------------
   Nilai mengikuti style.css gelap: kartu #1B1B1B, garis #303030; panah jadi
   lingkaran putih seperti .btn-one .icon versi gelap. */

html[data-bs-theme=dark] .mrv-link-btn {
    border-color: #303030;
    background: #1B1B1B;
    color: #fff;
}

html[data-bs-theme=dark] .mrv-link-ico {
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-bs-theme=dark] .mrv-link-arrow {
    background: #fff;
    color: #000;
}

html[data-bs-theme=dark] .mrv-link-btn:hover,
html[data-bs-theme=dark] .mrv-link-btn.is-highlighted {
    border-color: transparent;
}

html[data-bs-theme=dark] .mrv-link-btn:hover .mrv-link-arrow,
html[data-bs-theme=dark] .mrv-link-btn.is-highlighted .mrv-link-arrow {
    color: var(--mrv-link-indigo);
}

html[data-bs-theme=dark] .mrv-link-empty {
    color: rgba(255, 255, 255, 0.6);
}

/* --- Gerak ---------------------------------------------------------------- */

/* fill-mode backwards (bukan both): setelah animasi selesai, transform kembali
   dikendalikan :hover. Dengan both, keyframe terakhir mengunci transform. */
@keyframes mrvLinkIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mrv-link-btn,
    .mrv-link-btn::before {
        animation: none;
        transition: none;
    }

    .mrv-link-btn:hover {
        transform: none;
    }
}

/* --- Layar kecil ---------------------------------------------------------- */

@media (max-width: 767px) {
    .mrv-link-page {
        padding-top: 128px;
    }
}

@media (max-width: 575px) {
    .mrv-link-btn {
        min-height: 60px;
        gap: 12px;
    }

    .mrv-link-label {
        font-size: 16px;
    }
}