<style>
    /* CSS untuk efek teks berjalan dan gradien */
    .app-title-container {
        width: 150px;
        /* Sesuaikan lebar container agar teks bisa berjalan di dalamnya */
        overflow: hidden;
        /* Penting untuk menyembunyikan teks di luar area container */
        white-space: nowrap;
        /* Mencegah teks melompat ke baris baru */
        box-sizing: border-box;
        /* Memastikan padding dan border dihitung dalam lebar */
        display: inline-block;
        /* Agar bisa diatur lebarnya */
        vertical-align: middle;
        /* Untuk menyelaraskan dengan elemen lain jika ada */
        margin-left: 1rem;
        /* Sesuaikan margin agar tidak terlalu mepet */
    }

    .app-name-scrolling {
        display: inline-block;
        padding-left: 100%;
        /* Memulai teks dari luar container di sebelah kanan */
        animation: scroll-right 10s linear infinite;
        /* Animasi berjalan */

        /* --- PERUBAHAN DI SINI: UKURAN FONT --- */
        font-size: 24px;
        /* Anda bisa coba nilai lain seperti 1.8rem, 2em, dll. */
        /* ------------------------------------ */

        /* Gradien Warna */
        background: linear-gradient(to right, #007bff, #6f42c1, #fd7e14);
        /* Contoh gradien (biru, ungu, oranye) */
        -webkit-background-clip: text;
        /* Penting untuk menerapkan gradien pada teks di WebKit browsers (Chrome, Safari) */
        background-clip: text;
        /* Menerapkan gradien pada teks */
        -webkit-text-fill-color: transparent;
        /* Membuat warna teks transparan agar gradien terlihat */
        color: transparent;
        /* Fallback for non-webkit browsers */
        font-weight: bold;
        /* Memastikan teks tetap tebal */
    }

    /* Keyframes untuk animasi teks berjalan */
    @keyframes scroll-right {
        0% {
            transform: translate(0, 0);
            /* Posisi awal: teks di luar container sebelah kanan */
        }

        100% {
            transform: translate(-100%, 0);
            /* Posisi akhir: teks bergerak sepenuhnya ke kiri, keluar dari container */
        }
    }
</style>
<aside class="sidenav bg-white navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-4 " id="sidenav-main">
    <div class="sidenav-header">
        <i class="fas fa-times p-3 cursor-pointer text-secondary opacity-5 position-absolute end-0 top-0 d-none d-xl-none" aria-hidden="true" id="iconSidenav"></i>
        <a class="navbar-brand m-1" href=" https://demos.creative-tim.com/argon-dashboard/pages/dashboard.html " target="_blank">
            <div class="app-title-container">
                <span class="ms-1 font-weight-bold app-name-scrolling">KAS REMBAS</span>
            </div>
        </a>
    </div>
    <hr class="horizontal dark mt-0">
    <div class="collapse navbar-collapse w-auto " id="sidenav-collapse-main">
        <div id="sidenav-scrollbar" flex-grow-100">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="collapse" href="#tablesSubmenu" role="button" aria-expanded="false" aria-controls="tablesSubmenu">
                        <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
                            <i class="ni ni-compass-04 text-primary text-sm opacity-10"></i>
                        </div>
                        <span class="nav-link-text ms-1">Dashboard</span>
                    </a>
                    <div class="collapse" id="tablesSubmenu">
                        <ul class="nav flex-column ms-4">
                            <li class="nav-item">
                                <a class="nav-link" href="dashboard_perbulan">
                                    <span class="sidenav-mini-icon">DP</span>
                                    <span class="sidenav-normal">Perbulan</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="dashboard_total">
                                    <span class="sidenav-mini-icon">DT</span>
                                    <span class="sidenav-normal">Total</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="anggota">
                        <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
                            <i class="ni ni-badge text-info text-sm opacity-10"></i>
                        </div>
                        <span class="nav-link-text ms-1">Anggota</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="iuran_bulanan">
                        <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
                            <i class="ni ni-money-coins text-success text-sm opacity-10"></i>
                        </div>
                        <span class="nav-link-text ms-1">Iuran Bulanan</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="pinjaman">
                        <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
                            <i class="ni ni-briefcase-24 text-warning text-sm opacity-10"></i>
                        </div>
                        <span class="nav-link-text ms-1">Pinjaman</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="denda">
                        <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
                            <i class="ni ni-credit-card text-dark text-sm opacity-10"></i>
                        </div>
                        <span class="nav-link-text ms-1">Denda</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="bunga">
                        <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
                            <i class="ni ni-vector text-dark text-sm opacity-10"></i>
                        </div>
                        <span class="nav-link-text ms-1">Catatan Bunga</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="pengeluaran">
                        <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
                            <i class="ni ni-cart text-danger text-sm opacity-10"></i>
                        </div>
                        <span class="nav-link-text ms-1">Pengeluaran</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a data-bs-toggle="collapse" href="#laporanCollapse" class="nav-link collapsed" aria-controls="laporanCollapse" role="button" aria-expanded="false">
                        <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
                            <i class="ni ni-archive-2 text-primary text-sm opacity-10"></i>
                        </div>
                        <span class="nav-link-text ms-1">Laporan</span>
                    </a>
                    <div class="collapse" id="laporanCollapse">
                        <ul class="nav ms-4">
                            <li class="nav-item">
                                <a class="nav-link" href="iuran"> <span class="sidenav-mini-icon"> SI </span>
                                    <span class="sidenav-normal"> Semua Iuran </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="iuran_terpending"> <span class="sidenav-mini-icon"> IT </span>
                                    <span class="sidenav-normal"> Iuran Terpending </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="nav-item mt-3">
                    <h6 class="ps-4 ms-2 text-uppercase text-xs font-weight-bolder opacity-6">Account pages</h6>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="profile">
                        <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
                            <i class="ni ni-single-02 text-dark text-sm opacity-10"></i>
                        </div>
                        <span class="nav-link-text ms-1">Profile</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="logout.php">
                        <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
                            <i class="ni ni-button-power text-dark text-sm opacity-10"></i>
                        </div>
                        <span class="nav-link-text ms-1">Logout</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <br>
    <br>

    <div class="sidenav-footer mx-2 ">
        <div class="card card-plain shadow-none" id="sidenavCard">
            <img class="w-50 mx-auto" src="img/rbs.jpg" alt="sidebar_illustration">
            <div class="card-body text-center p-3 w-100 pt-0">
                <div class="docs-info">
                </div>
            </div>
        </div>
        <div class="footer-text-center">
            <?= date('Y'); ?>@IwanKciwat
        </div>
        <style>
            .footer-text-center {
                text-align: center;
                /* This centers the inline content (text) horizontally */
                padding: 15px 0;
                /* Add some padding above and below for spacing */
                color: rgb(0, 133, 250);
                /* Optional: A subtle grey color for footer text */
                font-size: 0.9em;
                /* Optional: Make the font slightly smaller */
                margin-top: 20px;
                /* Optional: Add some space above the footer */
            }
        </style>
        <style>
            .sidenav-footer .card-plain img {
                border-radius: 50%;
                /* Membuat gambar jadi bulat */
                border: 2px solid #ddd;
                /* Menambahkan border tipis abu-abu */
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                /* Menambahkan bayangan lembut */
                object-fit: cover;
                /* Memastikan gambar mengisi lingkaran dengan baik */
                width: 100px !important;
                /* Menentukan lebar gambar */
                height: 100px !important;
                /* Menentukan tinggi gambar */
            }
        </style>
</aside>