@charset "UTF-8";

/* --- Slick Custom Overrides --- */

/* Move dots to top-left */
.slick-dots {
    position: absolute;
    top: -40px;     /* adjust spacing above slider */
    left: 0;        /* align to left */
    bottom: auto;
    width: auto;    /* shrink to fit content */
    text-align: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Reset default dot style */
.slick-dots li button:before {
    content: "";
}

/* Custom labels with arrows */
.slick-dots li:nth-child(1) button:after {
    content: "NKPA";
}
.slick-dots li:nth-child(2) button:after {
    content: "Realisasi Fisik";
}
.slick-dots li:nth-child(3) button:after {
    content: "Serapan Anggaran";
}
.slick-dots li:nth-child(4) button:after {
    content: "Capaian Perkin";
}

/* Style for labels */
.slick-dots li button:after {
    display: inline-block;
    font-size: 14px;
    color: #666;
    padding: 4px 10px;
    background: #eee;
    border-radius: 4px;
    margin-right: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Active state */
.slick-dots li.slick-active button:after {
    color: #fff;
    background: #FFA500; /* orange highlight */
    font-weight: bold;
}

/* Hover effect */
.slick-dots li button:hover:after {
    background: #ddd;
    color: #333;
}

/* Optional: arrows customization */
.slick-prev:before,
.slick-next:before {
    font-size: 24px;
    color: #007A5E; /* green accent */
    opacity: 0.8;
}
.slick-prev:hover:before,
.slick-next:hover:before {
    opacity: 1;
}