/* =========================================================
   PPID SLIDER
   Enhancement Visual
   Tidak mengubah susunan, ukuran dan fungsi slider
   ========================================================= */


/* =========================================================
   1. WRAPPER SLIDER
   ========================================================= */

   .ppid-slider,
   .ppid-slider * {
       box-sizing: border-box;
   }
   
   .ppid-slider {
       position: relative;
   }
   
   
   /* =========================================================
      2. ITEM / CARD SLIDER
      ========================================================= */
   
   .ppid-slider .slider-item,
   .ppid-slider .swiper-slide,
   .ppid-slider .splide__slide {
       position: relative;
       overflow: hidden;
   }
   
   
   /* =========================================================
      3. EFEK GRADIENT HALUS
      ========================================================= */
   
   .ppid-slider .slider-item::before,
   .ppid-slider .swiper-slide::before,
   .ppid-slider .splide__slide::before {
       content: "";
       position: absolute;
       inset: 0;
       z-index: 1;
       pointer-events: none;
   
       background:
           linear-gradient(
               115deg,
               rgba(255, 252, 244, 0) 0%,
               rgba(211, 166, 72, 0.05) 35%,
               rgba(255, 247, 225, 0.10) 50%,
               rgba(211, 166, 72, 0.04) 65%,
               rgba(255, 255, 255, 0) 100%
           );
   
       background-size: 250% 250%;
   
       opacity: 0;
   
       transition:
           opacity 0.5s ease,
           background-position 1.2s ease;
   }
   
   
   /* =========================================================
      4. HANGOVER / SHIMMER BERGERAK
      ========================================================= */
   
   .ppid-slider .slider-item::after,
   .ppid-slider .swiper-slide::after,
   .ppid-slider .splide__slide::after {
       content: "";
       position: absolute;
       top: -60%;
       left: -45%;
   
       width: 45%;
       height: 220%;
   
       z-index: 2;
       pointer-events: none;
   
       background: linear-gradient(
           90deg,
           transparent 0%,
           rgba(255, 248, 225, 0.02) 20%,
           rgba(238, 194, 91, 0.13) 48%,
           rgba(255, 252, 240, 0.18) 50%,
           rgba(238, 194, 91, 0.08) 55%,
           transparent 100%
       );
   
       transform: rotate(18deg) translateX(-180%);
   
       opacity: 0;
   
       transition:
           transform 1.2s cubic-bezier(.22,.61,.36,1),
           opacity 0.5s ease;
   }
   
   
   /* =========================================================
      5. HOVER ELEGANT
      ========================================================= */
   
   .ppid-slider .slider-item:hover::before,
   .ppid-slider .swiper-slide:hover::before,
   .ppid-slider .splide__slide:hover::before {
       opacity: 1;
   
       background-position: 100% 50%;
   }
   
   
   .ppid-slider .slider-item:hover::after,
   .ppid-slider .swiper-slide:hover::after,
   .ppid-slider .splide__slide:hover::after {
       opacity: 1;
   
       transform: rotate(18deg) translateX(480%);
   }
   
   
   /* =========================================================
      6. ANIMASI HOVER UNTUK GAMBAR
      Tidak mengubah ukuran layout
      ========================================================= */
   
   .ppid-slider img {
       transition:
           transform 0.8s cubic-bezier(.22,.61,.36,1),
           filter 0.8s ease;
   }
   
   .ppid-slider .slider-item:hover img,
   .ppid-slider .swiper-slide:hover img,
   .ppid-slider .splide__slide:hover img {
       transform: scale(1.025);
   
       filter:
           saturate(1.04)
           contrast(1.01)
           brightness(1.02);
   }
   
   
   /* =========================================================
      7. OVERLAY GRADIENT GOLD – IVORY
      ========================================================= */
   
   .ppid-slider .slider-item .slider-content,
   .ppid-slider .swiper-slide .slider-content,
   .ppid-slider .splide__slide .slider-content {
       position: relative;
       z-index: 3;
   }
   
   
   /* =========================================================
      8. EFEK HOVER PADA JUDUL
      ========================================================= */
   
   .ppid-slider h1,
   .ppid-slider h2,
   .ppid-slider h3,
   .ppid-slider h4,
   .ppid-slider .slider-title {
       position: relative;
   
       transition:
           color 0.35s ease,
           text-shadow 0.35s ease;
   }
   
   
   .ppid-slider .slider-item:hover h1,
   .ppid-slider .slider-item:hover h2,
   .ppid-slider .slider-item:hover h3,
   .ppid-slider .slider-item:hover h4,
   .ppid-slider .slider-item:hover .slider-title,
   .ppid-slider .swiper-slide:hover h1,
   .ppid-slider .swiper-slide:hover h2,
   .ppid-slider .swiper-slide:hover h3,
   .ppid-slider .swiper-slide:hover h4,
   .ppid-slider .swiper-slide:hover .slider-title,
   .ppid-slider .splide__slide:hover h1,
   .ppid-slider .splide__slide:hover h2,
   .ppid-slider .splide__slide:hover h3,
   .ppid-slider .splide__slide:hover h4,
   .ppid-slider .splide__slide:hover .slider-title {
       text-shadow:
           0 0 16px rgba(211, 166, 72, 0.14);
   }
   
   
   /* =========================================================
      9. EFEK TOMBOL
      ========================================================= */
   
   .ppid-slider a.btn,
   .ppid-slider .btn,
   .ppid-slider .slider-button {
       position: relative;
       overflow: hidden;
   
       transition:
           transform 0.3s ease,
           box-shadow 0.3s ease,
           background 0.3s ease,
           color 0.3s ease;
   }
   
   
   /* KILAU PADA TOMBOL */
   
   .ppid-slider a.btn::before,
   .ppid-slider .btn::before,
   .ppid-slider .slider-button::before {
       content: "";
   
       position: absolute;
       top: 0;
       left: -130%;
   
       width: 80%;
       height: 100%;
   
       background: linear-gradient(
           90deg,
           transparent,
           rgba(255, 255, 255, 0.28),
           transparent
       );
   
       transform: skewX(-22deg);
   
       transition: left 0.7s ease;
   
       pointer-events: none;
   }
   
   
   .ppid-slider a.btn:hover,
   .ppid-slider .btn:hover,
   .ppid-slider .slider-button:hover {
       transform: translateY(-2px);
   
       box-shadow:
           0 8px 20px rgba(135, 99, 28, 0.16);
   }
   
   
   .ppid-slider a.btn:hover::before,
   .ppid-slider .btn:hover::before,
   .ppid-slider .slider-button:hover::before {
       left: 140%;
   }
   
   
   /* =========================================================
      10. DOT / NAVIGATION INDICATOR
      ========================================================= */
   
   .ppid-slider .swiper-pagination-bullet,
   .ppid-slider .splide__pagination__page {
       transition:
           width 0.35s ease,
           transform 0.35s ease,
           background-color 0.35s ease,
           opacity 0.35s ease;
   }
   
   
   .ppid-slider .swiper-pagination-bullet-active,
   .ppid-slider .splide__pagination__page.is-active {
       transform: scale(1.15);
   
       box-shadow:
           0 0 10px rgba(211, 166, 72, 0.30);
   }
   
   
   /* =========================================================
      11. TOMBOL PREV / NEXT
      ========================================================= */
   
   .ppid-slider .swiper-button-prev,
   .ppid-slider .swiper-button-next,
   .ppid-slider .splide__arrow {
       transition:
           transform 0.3s ease,
           box-shadow 0.3s ease,
           background-color 0.3s ease;
   }
   
   
   .ppid-slider .swiper-button-prev:hover,
   .ppid-slider .swiper-button-next:hover,
   .ppid-slider .splide__arrow:hover {
       transform: scale(1.08);
   
       box-shadow:
           0 5px 18px rgba(135, 99, 28, 0.18);
   }
   
   
   /* =========================================================
      12. HANGOVER GRADIENT ANIMATION
      ========================================================= */
   
   @keyframes ppidSliderHangover {
       0% {
           background-position: 0% 50%;
       }
   
       50% {
           background-position: 100% 50%;
       }
   
       100% {
           background-position: 0% 50%;
       }
   }
   
   
   /* =========================================================
      13. SLIDE AKTIF
      Efek sangat halus agar tidak mengganggu desain
      ========================================================= */
   
   .ppid-slider .swiper-slide-active {
       animation: ppidSliderActive 0.8s ease both;
   }
   
   
   @keyframes ppidSliderActive {
       from {
           opacity: 0.96;
       }
   
       to {
           opacity: 1;
       }
   }
   
   
   /* =========================================================
      14. RESPONSIVE / MOBILE
      Tidak mengubah ukuran bawaan slider
      ========================================================= */
   
   @media (max-width: 768px) {
   
       .ppid-slider .slider-item::after,
       .ppid-slider .swiper-slide::after,
       .ppid-slider .splide__slide::after {
           width: 55%;
   
           opacity: 0.08;
   
           transform: rotate(18deg) translateX(-100%);
       }
   
       .ppid-slider .slider-item:hover img,
       .ppid-slider .swiper-slide:hover img,
       .ppid-slider .splide__slide:hover img {
           transform: scale(1.015);
       }
   
   }
   
   
   /* =========================================================
      15. AKSESIBILITAS
      ========================================================= */
   
   @media (prefers-reduced-motion: reduce) {
   
       .ppid-slider *,
       .ppid-slider *::before,
       .ppid-slider *::after {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: 0.01ms !important;
       }
   
   }
   /* =========================================================
   PTA PPID - HEADER MENU & DROPDOWN
   NAVY • TEAL • GOLD • IVORY • SOFT GREY
   Submenu turun ke bawah
========================================================= */

/* ---------------------------------------------------------
   1. HEADER DASAR
--------------------------------------------------------- */

#sp-header {
    position: relative;
    z-index: 9999;
    background:
        linear-gradient(
            100deg,
            #173b3a 0%,
            #204847 38%,
            #35413f 72%,
            #e8e5dc 100%
        );
    border-bottom: 1px solid rgba(201, 160, 74, .55);
    box-shadow: 0 6px 25px rgba(10, 35, 34, .12);
}

#sp-header .container-inner {
    position: relative;
}


/* ---------------------------------------------------------
   2. MENU UTAMA
--------------------------------------------------------- */

#sp-header .sp-megamenu-parent {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin: 0;
    padding: 0;
}

#sp-header .sp-megamenu-parent > li {
    position: relative !important;
    margin: 0;
    padding: 0;
}

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 7px;
    min-height: 76px;
    padding: 0 16px !important;

    color: #f4efe5 !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1px;
    white-space: nowrap;

    background: transparent;
    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}


/* ---------------------------------------------------------
   3. GARIS GOLD ANIMASI MENU
--------------------------------------------------------- */

#sp-header .sp-megamenu-parent > li > a::after,
#sp-header .sp-megamenu-parent > li > span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d7aa45,
            #ffe09a,
            #d7aa45,
            transparent
        );

    transform: translateX(-50%);
    transition:
        width .35s cubic-bezier(.22,.61,.36,1);
}


/* ---------------------------------------------------------
   4. HOVER MENU UTAMA
--------------------------------------------------------- */

#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li:hover > span,
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.active > span {
    color: #f4d98d !important;

    background:
        linear-gradient(
            135deg,
            rgba(18, 54, 52, .92),
            rgba(48, 65, 62, .82)
        );

    transform: translateY(-1px);
}

#sp-header .sp-megamenu-parent > li:hover > a::after,
#sp-header .sp-megamenu-parent > li:hover > span::after,
#sp-header .sp-megamenu-parent > li.active > a::after,
#sp-header .sp-megamenu-parent > li.active > span::after {
    width: 72%;
}


/* ---------------------------------------------------------
   5. ICON MENU UTAMA
--------------------------------------------------------- */

#sp-header .sp-megamenu-parent > li > a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #d8ad4d;
    font-size: 11px;

    transition:
        color .3s ease,
        transform .35s ease;
}

/* Beranda */
#sp-header .sp-megamenu-parent > li:nth-child(1) > a::before {
    content: "\f015";
}

/* PPID */
#sp-header .sp-megamenu-parent > li:nth-child(2) > a::before {
    content: "\f1ad";
}

/* Layanan Informasi */
#sp-header .sp-megamenu-parent > li:nth-child(3) > a::before {
    content: "\f0c0";
}

/* Informasi Publik */
#sp-header .sp-megamenu-parent > li:nth-child(4) > a::before {
    content: "\f05a";
}

/* SOP & Regulasi */
#sp-header .sp-megamenu-parent > li:nth-child(5) > a::before {
    content: "\f02d";
}

#sp-header .sp-megamenu-parent > li:hover > a::before {
    color: #ffe29a;
    transform: rotate(-8deg) scale(1.12);
}


/* =========================================================
   6. SUBMENU - PAKSA TURUN KE BAWAH
========================================================= */

#sp-header .sp-megamenu-parent > li > .sp-dropdown,
#sp-header .sp-megamenu-parent > li > .sp-dropdown-main {
    position: absolute !important;

    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;

    width: 280px !important;
    min-width: 280px !important;

    margin: 0 !important;
    padding: 10px !important;

    background:
        linear-gradient(
            145deg,
            rgba(18, 55, 53, .98),
            rgba(29, 67, 65, .98) 58%,
            rgba(59, 67, 64, .98)
        ) !important;

    border: 1px solid rgba(213, 171, 75, .38);
    border-top: 2px solid #d7aa45;

    border-radius: 0 0 12px 12px;

    box-shadow:
        0 18px 40px rgba(7, 25, 24, .25),
        0 4px 12px rgba(0, 0, 0, .15);

    overflow: hidden;

    transform:
        translateY(-12px) !important;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .28s ease,
        transform .35s cubic-bezier(.22,.61,.36,1),
        visibility .28s ease;
}


/* Submenu tampil ke bawah */

#sp-header .sp-megamenu-parent > li:hover > .sp-dropdown,
#sp-header .sp-megamenu-parent > li:hover > .sp-dropdown-main,
#sp-header .sp-megamenu-parent > li.open > .sp-dropdown,
#sp-header .sp-megamenu-parent > li.open > .sp-dropdown-main {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0) !important;
}


/* ---------------------------------------------------------
   7. HILANGKAN STRUKTUR MEGA HORIZONTAL
--------------------------------------------------------- */

#sp-header .sp-dropdown .sp-dropdown-items,
#sp-header .sp-dropdown-main .sp-dropdown-items {
    display: block !important;
    width: 100% !important;
}

#sp-header .sp-dropdown .sp-dropdown-items > li,
#sp-header .sp-dropdown-main .sp-dropdown-items > li {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   8. ITEM SUBMENU
--------------------------------------------------------- */

#sp-header .sp-dropdown .sp-dropdown-items > li > a,
#sp-header .sp-dropdown-main .sp-dropdown-items > li > a {
    position: relative;

    display: flex !important;
    align-items: center;

    width: 100% !important;
    min-height: 46px;

    padding: 12px 15px 12px 38px !important;

    color: #ece8dd !important;
    font-size: 13px;
    font-weight: 500;

    border-radius: 7px;

    transition:
        color .25s ease,
        background .25s ease,
        padding-left .3s ease,
        transform .3s ease;
}


/* Icon kecil submenu */

#sp-header .sp-dropdown .sp-dropdown-items > li > a::before,
#sp-header .sp-dropdown-main .sp-dropdown-items > li > a::before {
    content: "◆";

    position: absolute;
    left: 16px;

    color: #d8ad4d;
    font-size: 7px;

    transition:
        transform .3s ease,
        color .3s ease;
}


/* Hover submenu */

#sp-header .sp-dropdown .sp-dropdown-items > li > a:hover,
#sp-header .sp-dropdown-main .sp-dropdown-items > li > a:hover {
    color: #fff4d7 !important;

    padding-left: 44px !important;

    background:
        linear-gradient(
            90deg,
            rgba(213, 171, 75, .20),
            rgba(255, 245, 218, .06)
        );

    transform: translateX(3px);
}

#sp-header .sp-dropdown .sp-dropdown-items > li > a:hover::before,
#sp-header .sp-dropdown-main .sp-dropdown-items > li > a:hover::before {
    color: #ffe39a;
    transform: rotate(45deg) scale(1.35);
}


/* ---------------------------------------------------------
   9. PEMISAH SUBMENU
--------------------------------------------------------- */

#sp-header .sp-dropdown .sp-dropdown-items > li:not(:last-child),
#sp-header .sp-dropdown-main .sp-dropdown-items > li:not(:last-child) {
    border-bottom: 1px solid rgba(235, 225, 200, .07);
}


/* ---------------------------------------------------------
   10. SUBMENU LEVEL BERIKUTNYA
   Tetap turun ke bawah, bukan ke samping
--------------------------------------------------------- */

#sp-header .sp-dropdown .sp-dropdown-sub,
#sp-header .sp-dropdown-main .sp-dropdown-sub {
    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;
    min-width: 100% !important;

    margin: 0 !important;

    background:
        rgba(8, 37, 36, .38) !important;

    border: none !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   11. ARROW DROPDOWN
--------------------------------------------------------- */

#sp-header .sp-megamenu-parent > li.menu-item-has-children > a::after {
    content: "\f107";

    position: static;

    width: auto;
    height: auto;

    margin-left: 2px;

    background: none;

    font-family: "Font Awesome 5 Free";
    font-weight: 900;

    color: #d8ad4d;

    transform: none;

    transition:
        transform .3s ease;
}

#sp-header .sp-megamenu-parent > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}


/* =========================================================
   12. RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 12px;
    }

}


@media (max-width: 991px) {

    /* Desktop dropdown tidak dipaksakan pada mode mobile */
    #sp-header .sp-megamenu-parent > li > .sp-dropdown,
    #sp-header .sp-megamenu-parent > li > .sp-dropdown-main {
        position: static !important;

        width: 100% !important;
        min-width: 100% !important;

        opacity: 1;
        visibility: visible;

        transform: none !important;

        box-shadow: none;

        border-radius: 0;

        display: none;
    }

    #sp-header .sp-megamenu-parent > li.open > .sp-dropdown,
    #sp-header .sp-megamenu-parent > li.open > .sp-dropdown-main {
        display: block;
    }

}


/* =========================================================
   13. GOLD SHIMMER ANIMATION
========================================================= */

#sp-header .sp-megamenu-parent > li:hover > a {
    background-size: 200% 100%;

    animation: ppidMenuShimmer 2.8s linear infinite;
}

@keyframes ppidMenuShimmer {

    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }

}
/* =========================================================
   FIX SUBMENU FONT – KONTRAS LEBIH JELAS
========================================================= */

/* Background dropdown */
#sp-header .sp-dropdown,
#sp-header .sp-dropdown-inner,
#sp-header ul.sp-dropdown {
    background: linear-gradient(
        145deg,
        #fffdf7 0%,
        #f2f0ea 55%,
        #e7e4dd 100%
    ) !important;

    border: 1px solid rgba(184, 137, 42, .28) !important;
    box-shadow:
        0 18px 45px rgba(8, 45, 46, .22),
        0 2px 8px rgba(184, 137, 42, .10) !important;
}


/* =========================================================
   SUBMENU TEXT – HIGH CONTRAST
========================================================= */

#sp-header .sp-dropdown li > a,
#sp-header .sp-dropdown li > a:link,
#sp-header .sp-dropdown li > a:visited,
#sp-header .sp-dropdown li > span {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    padding: 14px 22px !important;

    /* WARNA TEKS NORMAL */
    color: #243f40 !important;

    opacity: 1 !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    text-shadow: none !important;
    filter: none !important;

    transition:
        color 0.3s ease,
        padding-left 0.35s cubic-bezier(.22,.61,.36,1),
        background 0.35s ease,
        transform 0.35s ease !important;
}


/* Pastikan seluruh elemen teks di submenu tidak menjadi putih */
#sp-header .sp-dropdown li > a *,
#sp-header .sp-dropdown li > span * {
    color: inherit !important;
    opacity: 1 !important;
}

/* Link submenu */
#sp-header .sp-dropdown li a {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 46px;

    padding: 11px 20px 11px 30px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    letter-spacing: .1px;

    background: transparent !important;

    transition:
        color .28s ease,
        background .28s ease,
        padding-left .28s ease,
        transform .28s ease !important;
}


/* Bullet gold */
#sp-header .sp-dropdown li a::before {
    content: "◆";
    position: absolute;
    left: 14px;

    font-size: 7px;
    color: #bd8b2e !important;

    opacity: .9;

    transition:
        transform .28s ease,
        color .28s ease !important;
}


/* Hover submenu */
#sp-header .sp-dropdown li:hover > a,
#sp-header .sp-dropdown li a:hover,
#sp-header .sp-dropdown li.active > a,
#sp-header .sp-dropdown li.current-item > a {
    color: #ffffff !important;

    background: linear-gradient(
        90deg,
        #123f40 0%,
        #1d5555 58%,
        #8c692b 100%
    ) !important;

    padding-left: 36px !important;

    transform: translateX(3px);
}


/* Bullet saat hover */
#sp-header .sp-dropdown li:hover > a::before,
#sp-header .sp-dropdown li a:hover::before,
#sp-header .sp-dropdown li.active > a::before {
    color: #f6ce70 !important;
    transform: rotate(45deg) scale(1.15);
}


/* Garis pemisah antar submenu */
#sp-header .sp-dropdown li:not(:last-child) {
    border-bottom: 1px solid rgba(32, 62, 64, .08);
}


/* Hilangkan warna teks transparan dari CSS sebelumnya */
#sp-header .sp-dropdown *,
#sp-header .sp-dropdown a,
#sp-header .sp-dropdown span {
    text-shadow: none !important;
}


/* =========================================================
   SUBMENU MOBILE
========================================================= */

@media (max-width: 991px) {

    #sp-header .sp-dropdown,
    #sp-header ul.sp-dropdown {
        background: #f7f5ef !important;
    }

    #sp-header .sp-dropdown li a {
        color: #263d3f !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    #sp-header .sp-dropdown li a::before {
        color: #bd8b2e !important;
    }

}
/* =========================================================
   HEADER PPID – PUTIH / IVORY
   MENU KOMPAK – SOP & REGULASI TETAP MUNCUL
========================================================= */

/* ---------------------------------------------------------
   1. HEADER UTAMA
--------------------------------------------------------- */
#sp-header {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    background: #ffffff !important;
    border-bottom: 1px solid rgba(190, 145, 55, 0.28) !important;

    box-shadow:
        0 4px 18px rgba(20, 45, 47, 0.07) !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   2. CONTAINER HEADER
--------------------------------------------------------- */
#sp-header > .container-fluid {
    width: 100% !important;
    max-width: none !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Samakan area konten dengan PPID Hero */
#sp-header .container-inner {
    width: calc(100% - 40px) !important;
    max-width: 1210px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ---------------------------------------------------------
   3. ROW HEADER
   Kurangi padding agar SOP & Regulasi mendapat ruang
--------------------------------------------------------- */
#sp-header .row {
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 10px !important;
    padding-right: 10px !important;

    min-height: 76px !important;
}


/* ---------------------------------------------------------
   4. LOGO
--------------------------------------------------------- */
#sp-logo {
    padding-right: 12px !important;
}

#sp-logo .sp-column {
    display: flex !important;
    align-items: center !important;
}


/* ---------------------------------------------------------
   5. AREA MENU
--------------------------------------------------------- */
#sp-menu {
    min-width: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

#sp-menu .sp-column,
#sp-menu .menu-with-offcanvas {
    width: 100% !important;

    min-width: 0 !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;

    flex-wrap: nowrap !important;
}


/* ---------------------------------------------------------
   6. MENU UTAMA
   Diperkecil sedikit agar SOP & Regulasi tidak hilang
--------------------------------------------------------- */
#sp-header .sp-megamenu-parent {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    flex-wrap: nowrap !important;

    white-space: nowrap !important;
}


/* Item menu */
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
    color: #254446 !important;

    font-size: 12.5px !important;
    font-weight: 600 !important;

    padding: 28px 10px !important;

    letter-spacing: 0.1px !important;

    transition:
        color 0.25s ease,
        background 0.25s ease !important;
}


/* Jarak antar menu */
#sp-header .sp-megamenu-parent > li {
    margin: 0 !important;
}


/* ---------------------------------------------------------
   7. HOVER MENU
--------------------------------------------------------- */
#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li:hover > span,
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.active > span {
    color: #a8791d !important;
}


/* Garis gold saat hover */
#sp-header .sp-megamenu-parent > li > a::after,
#sp-header .sp-megamenu-parent > li > span::after {
    background: linear-gradient(
        90deg,
        #bd8b2e,
        #e6c36a,
        #bd8b2e
    ) !important;
}


/* ---------------------------------------------------------
   8. IKON / ARROW DROPDOWN
--------------------------------------------------------- */
#sp-header .sp-megamenu-parent > li > a .menu-toggler,
#sp-header .sp-megamenu-parent > li > span .menu-toggler {
    color: #a8791d !important;

    margin-left: 4px !important;
}


/* ---------------------------------------------------------
   9. SUBMENU
--------------------------------------------------------- */
#sp-header .sp-dropdown {
    background: #ffffff !important;

    border: 1px solid rgba(190, 145, 55, 0.28) !important;

    border-top: 3px solid #bd8b2e !important;

    border-radius: 0 0 10px 10px !important;

    box-shadow:
        0 14px 35px rgba(19, 55, 57, 0.16) !important;

    overflow: hidden !important;
}


/* Link submenu */
#sp-header .sp-dropdown li a {
    color: #2f4142 !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    padding: 13px 18px !important;

    background: transparent !important;

    transition:
        color 0.22s ease,
        background 0.22s ease,
        padding-left 0.22s ease !important;
}


/* Hover submenu */
#sp-header .sp-dropdown li:hover > a,
#sp-header .sp-dropdown li.active > a {
    color: #8d6518 !important;

    background:
        linear-gradient(
            90deg,
            rgba(226, 194, 118, 0.20),
            rgba(255, 255, 255, 0)
        ) !important;

    padding-left: 24px !important;
}


/* ---------------------------------------------------------
   10. MENU KANAN / HAMBURGER
--------------------------------------------------------- */
#menu-right {
    margin-left: 4px !important;

    padding-left: 6px !important;

    flex-shrink: 0 !important;
}

#offcanvas-toggler {
    color: #254446 !important;

    padding: 8px !important;
}

#offcanvas-toggler:hover {
    color: #bd8b2e !important;
}

#offcanvas-toggler .burger-icon > span {
    background-color: #254446 !important;
}

#offcanvas-toggler:hover .burger-icon > span {
    background-color: #bd8b2e !important;
}


/* ---------------------------------------------------------
   11. HEADER STICKY
--------------------------------------------------------- */
#sp-header.header-sticky,
#sp-header.sticky-header {
    background: rgba(255, 255, 255, 0.97) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    box-shadow:
        0 6px 24px rgba(20, 45, 47, 0.10) !important;
}


/* ---------------------------------------------------------
   12. RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1399px) {

    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span {
        font-size: 12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

}


@media (max-width: 1199px) {

    #sp-header .container-inner {
        width: calc(100% - 30px) !important;
    }

}


@media (max-width: 991.98px) {

    #sp-header .container-inner {
        width: 100% !important;
        max-width: none !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }

}
/* =========================================================
   PENYEMPURNAAN HOVER MENU & SUBMENU PPID
   Tambahkan PALING BAWAH custom.css
========================================================= */


/* ---------------------------------------------------------
   1. PERKECIL AREA HIJAU SAAT MENU UTAMA HOVER / AKTIF
--------------------------------------------------------- */

/* Jangan biarkan background memenuhi seluruh tinggi header */
#sp-header .sp-megamenu-parent > li {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 76px !important;
}


/* Area link tetap lebih kecil dan proporsional */
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;
    height: 44px !important;

    padding: 0 12px !important;

    border-radius: 7px !important;

    background: transparent !important;

    transition:
        color 0.30s ease,
        background 0.30s ease,
        transform 0.30s ease,
        box-shadow 0.30s ease !important;
}


/* Hilangkan background besar bawaan Helix pada LI */
#sp-header .sp-megamenu-parent > li:hover,
#sp-header .sp-megamenu-parent > li.active,
#sp-header .sp-megamenu-parent > li.sp-has-child:hover {
    background: transparent !important;
}


/* Kotak hijau dibuat lebih kecil saat hover */
#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li:hover > span,
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.active > span {
    color: #c6973f !important;

    background:
        linear-gradient(
            135deg,
            #163f3d 0%,
            #214d49 52%,
            #315a53 100%
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(220, 181, 90, 0.18),
        0 5px 14px rgba(17, 58, 55, 0.14) !important;

    transform: translateY(-1px) !important;
}


/* Garis gold kecil di bawah menu */
#sp-header .sp-megamenu-parent > li > a::after,
#sp-header .sp-megamenu-parent > li > span::after {
    content: "" !important;

    position: absolute !important;

    left: 18% !important;
    right: 18% !important;
    bottom: 5px !important;

    height: 2px !important;

    border-radius: 10px !important;

    opacity: 0 !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b88931,
            #f0d48b,
            #b88931,
            transparent
        ) !important;

    transform: scaleX(0.5) !important;

    transition:
        opacity 0.30s ease,
        transform 0.30s ease !important;
}


/* Tampilkan garis saat hover */
#sp-header .sp-megamenu-parent > li:hover > a::after,
#sp-header .sp-megamenu-parent > li:hover > span::after,
#sp-header .sp-megamenu-parent > li.active > a::after,
#sp-header .sp-megamenu-parent > li.active > span::after {
    opacity: 1 !important;

    transform: scaleX(1) !important;
}


/* ---------------------------------------------------------
   2. SUBMENU – WARNA DASAR IVORY
--------------------------------------------------------- */

#sp-header .sp-dropdown {
    padding: 8px !important;

    background:
        linear-gradient(
            135deg,
            #fffdf7 0%,
            #f5f1e7 55%,
            #eee8da 100%
        ) !important;

    border: 1px solid rgba(183, 139, 49, 0.30) !important;

    border-top: 3px solid #b88931 !important;

    border-radius: 0 0 10px 10px !important;

    box-shadow:
        0 15px 35px rgba(19, 55, 57, 0.18),
        0 2px 6px rgba(183, 139, 49, 0.08) !important;
}


/* ---------------------------------------------------------
   3. LINK SUBMENU – WARNA NORMAL
--------------------------------------------------------- */

#sp-header .sp-dropdown li {
    margin: 2px 0 !important;

    background: transparent !important;
}


#sp-header .sp-dropdown li a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    min-height: 42px !important;

    padding: 11px 16px 11px 24px !important;

    color: #31494a !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1.35 !important;

    border-radius: 7px !important;

    background: transparent !important;

    transition:
        color 0.28s ease,
        background 0.28s ease,
        transform 0.28s ease,
        padding-left 0.28s ease,
        box-shadow 0.28s ease !important;
}


/* Bullet gold */
#sp-header .sp-dropdown li > a::before {
    content: "◆" !important;

    position: absolute !important;

    left: 9px !important;

    color: #bd9138 !important;

    font-size: 6px !important;

    transition:
        color 0.28s ease,
        transform 0.28s ease !important;
}


/* ---------------------------------------------------------
   4. HOVER SUBMENU
   TEAL + IVORY + GOLD
--------------------------------------------------------- */

#sp-header .sp-dropdown li:hover > a,
#sp-header .sp-dropdown li.active > a {
    color: #fffaf0 !important;

    padding-left: 28px !important;

    transform: translateX(3px) !important;

    background:
        linear-gradient(
            100deg,
            #123b39 0%,
            #1d504a 45%,
            #3b6258 72%,
            #a37b35 100%
        ) !important;

    box-shadow:
        0 5px 14px rgba(20, 62, 59, 0.18),
        inset 0 0 0 1px rgba(244, 215, 142, 0.18) !important;
}


/* Bullet berubah menjadi ivory/gold */
#sp-header .sp-dropdown li:hover > a::before,
#sp-header .sp-dropdown li.active > a::before {
    color: #f3d486 !important;

    transform: rotate(45deg) scale(1.15) !important;
}


/* Efek kilau gold dari kanan */
#sp-header .sp-dropdown li > a::after {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 35% !important;

    pointer-events: none !important;

    opacity: 0 !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(244, 215, 142, 0.18),
            rgba(255, 250, 240, 0.10)
        ) !important;

    transition: opacity 0.30s ease !important;
}


#sp-header .sp-dropdown li:hover > a::after,
#sp-header .sp-dropdown li.active > a::after {
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   5. ANIMASI HALUS SUBMENU
--------------------------------------------------------- */

#sp-header .sp-dropdown li {
    animation: ppidSubmenuItemIn 0.35s ease both;
}


#sp-header .sp-dropdown li:nth-child(1) {
    animation-delay: 0.02s;
}

#sp-header .sp-dropdown li:nth-child(2) {
    animation-delay: 0.05s;
}

#sp-header .sp-dropdown li:nth-child(3) {
    animation-delay: 0.08s;
}

#sp-header .sp-dropdown li:nth-child(4) {
    animation-delay: 0.11s;
}

#sp-header .sp-dropdown li:nth-child(5) {
    animation-delay: 0.14s;
}

#sp-header .sp-dropdown li:nth-child(6) {
    animation-delay: 0.17s;
}

#sp-header .sp-dropdown li:nth-child(7) {
    animation-delay: 0.20s;
}

#sp-header .sp-dropdown li:nth-child(8) {
    animation-delay: 0.23s;
}


@keyframes ppidSubmenuItemIn {

    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ---------------------------------------------------------
   6. RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1399px) {

    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span {
        padding-left: 9px !important;
        padding-right: 9px !important;

        font-size: 12px !important;
    }

}


@media (max-width: 991.98px) {

    #sp-header .sp-megamenu-parent > li {
        height: auto !important;
    }

    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span {
        min-height: auto !important;
        height: auto !important;
    }

}
/* =========================================================
   FIX SUBMENU:
   - Geser submenu sedikit ke kiri
   - Teks panjang tidak terpotong
   - Otomatis menjadi beberapa baris
========================================================= */

/* Pastikan dropdown memiliki ruang yang cukup */
.sp-megamenu-parent .sp-dropdown,
.sp-megamenu-parent .sp-dropdown-inner {
    overflow: visible !important;
}

/* Lebar submenu */
.sp-megamenu-parent > li > .sp-dropdown {
    min-width: 300px !important;
    width: 300px !important;
}

/* Jika submenu berada terlalu dekat sisi kanan */
.sp-megamenu-parent > li:last-child > .sp-dropdown,
.sp-megamenu-parent > li:nth-last-child(2) > .sp-dropdown {
    left: auto !important;
    right: 0 !important;
}

/* Item submenu */
.sp-megamenu-parent .sp-dropdown li > a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;

    display: block !important;
    width: 100% !important;

    line-height: 1.45 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;

    padding-top: 13px !important;
    padding-bottom: 13px !important;
}

/* Khusus submenu yang panjang */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-items li {
    width: 100% !important;
}

/* Pastikan teks tidak keluar dari kotak submenu */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-items {
    width: 100% !important;
    overflow: visible !important;
}

/* Area teks submenu */
.sp-megamenu-parent .sp-dropdown li > a span {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

/* Sedikit ruang aman agar teks tidak menempel kanan */
.sp-megamenu-parent .sp-dropdown li > a {
    padding-right: 22px !important;
}
/* =========================================================
   LOGO HEADER
   - Lebih ke kiri
   - Ukuran lebih proporsional
   - Sejajar dengan PPID HERO
========================================================= */

@media (min-width: 1200px) {

    /* Posisi keseluruhan area logo */
    #sp-header #sp-logo {
        margin-left: -70px !important;
        position: relative;
        z-index: 5;
    }

    /* Perkecil gambar/logo */
    #sp-header #sp-logo img {
        max-height: 72px !important;
        width: auto !important;
        max-width: none !important;
        object-fit: contain;
    }

    /* Perkecil tinggi area logo */
    #sp-header #sp-logo,
    #sp-header #sp-logo .sp-column {
        display: flex !important;
        align-items: center !important;
    }

    /* Jika logo menggunakan link */
    #sp-header #sp-logo a {
        display: flex !important;
        align-items: center !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    #sp-header #sp-logo {
        margin-left: 0 !important;
    }

    #sp-header #sp-logo img {
        max-height: 62px !important;
        width: auto !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    #sp-header #sp-logo {
        margin-left: 0 !important;
    }

    #sp-header #sp-logo img {
        max-height: 52px !important;
        width: auto !important;
    }

}
/* =========================================================
   E-LID WELCOME FINAL — BAGIAN 1
   Container + Layout + Background + Content + Slider Panel
   ========================================================= */


/* =========================================================
   1. RESET AREA E-LID
========================================================= */

.elid-welcome-section,
.elid-welcome-section * {
    box-sizing: border-box;
}

.elid-welcome-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}


/* =========================================================
   2. WRAPPER
   Lebar 100% mengikuti container PPID HERO
   ========================================================= */

   .elid-welcome-wrap {
    position: relative !important;

    /* SAMAKAN LEBAR DENGAN PPID HERO */
    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;
    height: 260px !important;

    /* TIDAK ADA PENGURANGAN 60PX KIRI/KANAN */
    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 1px solid rgba(190, 143, 42, 0.48) !important;
    border-radius: 18px !important;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(246, 242, 231, 0.92) 24%,
            rgba(226, 226, 215, 0.82) 48%,
            rgba(37, 74, 75, 0.88) 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(16, 46, 47, 0.12),
        0 2px 8px rgba(179, 130, 29, 0.08) !important;
}
/* =========================================================
   3. ORNAMEN BACKGROUND
========================================================= */

.elid-bg-glow {
    position: absolute !important;
    z-index: 1 !important;

    width: 430px !important;
    height: 430px !important;

    top: -190px !important;
    left: -80px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 247, 219, 0.42) 35%,
            rgba(203, 159, 65, 0.10) 60%,
            transparent 74%
        ) !important;

    pointer-events: none !important;
}


.elid-bg-orbit {
    position: absolute !important;
    z-index: 1 !important;

    width: 560px !important;
    height: 560px !important;

    right: -250px !important;
    bottom: -430px !important;

    border: 2px solid rgba(203, 159, 65, 0.60) !important;
    border-radius: 50% !important;

    box-shadow:
        0 0 0 18px rgba(255, 255, 255, 0.05),
        0 0 0 38px rgba(203, 159, 65, 0.05) !important;

    pointer-events: none !important;
}


.elid-bg-pattern {
    position: absolute !important;
    z-index: 1 !important;

    top: 0 !important;
    right: 0 !important;

    width: 310px !important;
    height: 100% !important;

    opacity: 0.35 !important;

    background:
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 42%,
            rgba(255, 255, 255, 0.10) 42.5%,
            transparent 43%,
            transparent 100%
        ) !important;

    pointer-events: none !important;
}


/* =========================================================
   4. CONTAINER ISI
========================================================= */

.elid-welcome-container {
    position: relative !important;
    z-index: 5 !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 40px !important;

    padding: 30px 58px !important;
}


/* =========================================================
   5. KONTEN KIRI
========================================================= */

.elid-content {
    width: 64% !important;
    max-width: 760px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 1 64% !important;
}


.elid-title {
    margin: 0 !important;
    padding: 0 !important;

    color: #29484b !important;

    font-size: 36px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;

    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) !important;
}


/* =========================================================
   6. SUBTITLE
========================================================= */

.elid-subtitle {
    margin-top: 8px !important;

    color: #365257 !important;

    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;

    max-width: 720px !important;
}

.elid-subtitle span {
    color: #1c3f43 !important;
    font-weight: 800 !important;
}


/* =========================================================
   7. GOLD LINE
========================================================= */

.elid-gold-line {
    position: relative !important;

    width: 110px !important;
    height: 12px !important;

    margin: 12px 0 10px !important;
}

.elid-gold-line::before {
    content: "" !important;

    position: absolute !important;

    top: 5px !important;
    left: 0 !important;

    width: 100% !important;
    height: 2px !important;

    border-radius: 20px !important;

    background:
        linear-gradient(
            90deg,
            #c58d24 0%,
            #f7d67b 50%,
            rgba(197, 141, 36, 0.10) 100%
        ) !important;
}

.elid-gold-line::after {
    content: "" !important;

    position: absolute !important;

    top: 1px !important;
    left: 0 !important;

    width: 8px !important;
    height: 8px !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            135deg,
            #f6dc85,
            #b77b16
        ) !important;

    box-shadow:
        0 0 8px rgba(209, 157, 38, 0.45) !important;
}


/* =========================================================
   8. TOMBOL
========================================================= */

.elid-actions {
    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    margin: 10px 0 8px !important;
}


.elid-btn {
    min-height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    padding: 8px 13px !important;

    border-radius: 6px !important;

    text-decoration: none !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}


.elid-btn:hover {
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}


.elid-btn-primary {
    color: #294448 !important;

    border: 1px solid #d6ad50 !important;

    background:
        linear-gradient(
            135deg,
            #f6df99 0%,
            #e5b94f 50%,
            #d29a2d 100%
        ) !important;

    box-shadow:
        0 5px 12px rgba(167, 113, 18, 0.18) !important;
}


.elid-btn-primary:hover {
    color: #17383c !important;

    background:
        linear-gradient(
            135deg,
            #fff0b5 0%,
            #efc965 55%,
            #d89d2c 100%
        ) !important;

    box-shadow:
        0 7px 16px rgba(167, 113, 18, 0.26) !important;
}


.elid-btn-secondary {
    color: #29484b !important;

    border: 1px solid rgba(46, 81, 82, 0.28) !important;

    background:
        rgba(255, 255, 255, 0.42) !important;

    box-shadow:
        0 4px 10px rgba(27, 59, 61, 0.08) !important;
}


.elid-btn-secondary:hover {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #31595b,
            #193e42
        ) !important;

    box-shadow:
        0 7px 16px rgba(20, 54, 56, 0.20) !important;
}


.elid-btn-icon {
    font-size: 13px !important;
    line-height: 1 !important;
}


.elid-btn-arrow {
    margin-left: 3px !important;

    font-size: 15px !important;
    line-height: 1 !important;
}


/* =========================================================
   9. KOMITMEN
========================================================= */

.elid-commitment {
    max-width: 690px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #56666a !important;

    font-size: 10px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

.elid-commitment strong {
    color: #9b6f20 !important;
    font-weight: 800 !important;
}


/* =========================================================
   10. AREA SLIDER KANAN
========================================================= */

.elid-slider-area {
    width: 260px !important;

    flex: 0 0 260px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =========================================================
   11. KARTU SLIDER
========================================================= */

.elid-info-slider {
    position: relative !important;

    width: 210px !important;
    height: 150px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    border: 1px solid rgba(232, 194, 98, 0.58) !important;
    border-radius: 12px !important;

    background:
        linear-gradient(
            145deg,
            rgba(32, 74, 76, 0.98) 0%,
            rgba(18, 54, 58, 0.98) 58%,
            rgba(12, 44, 48, 0.98) 100%
        ) !important;

    box-shadow:
        0 10px 24px rgba(18, 52, 54, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}


/* =========================================================
   12. GLOW DALAM KARTU
========================================================= */

.elid-card-glow {
    position: absolute !important;

    width: 140px !important;
    height: 140px !important;

    top: -65px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(242, 198, 82, 0.18),
            transparent 68%
        ) !important;

    pointer-events: none !important;
}


/* =========================================================
   13. ISI KARTU
========================================================= */

.elid-slide-content {
    position: relative !important;
    z-index: 3 !important;

    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 15px 30px 28px !important;

    text-align: center !important;
}


.elid-slide-title {
    margin-top: 8px !important;

    color: #f8e7af !important;

    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}


/* =========================================================
   14. NAVIGASI SLIDER
========================================================= */

.elid-slide-nav {
    position: absolute !important;
    z-index: 10 !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 24px !important;
    height: 34px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    color: #f1ce70 !important;

    background: transparent !important;

    font-size: 28px !important;
    line-height: 1 !important;

    cursor: pointer !important;

    opacity: 0.85 !important;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease !important;
}


.elid-slide-nav:hover {
    opacity: 1 !important;

    transform:
        translateY(-50%)
        scale(1.12) !important;
}


.elid-slide-prev {
    left: 5px !important;
}


.elid-slide-next {
    right: 5px !important;
}


/* =========================================================
   15. DOT SLIDER
========================================================= */

.elid-slider-dots {
    position: absolute !important;
    z-index: 10 !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 13px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;
}


/* DOT SLIDER BARU */
.elid-slider-dot {
    width: 7px !important;
    height: 7px !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.45) !important;

    cursor: pointer !important;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease !important;
}

.elid-slider-dot.active {
    background: #e5ba53 !important;

    transform: scale(1.35) !important;

    box-shadow:
        0 0 7px rgba(229, 186, 83, 0.65) !important;
}/* =========================================================
   E-LID WELCOME — FINAL ALIGNMENT & BACKGROUND MOTION
   Letakkan PALING BAWAH custom.css

   - Tidak memperkecil lebar banner
   - Tidak menggunakan max-width
   - Sudut tetap siku
   - Tidak mengubah tinggi desain
   - Background bergerak halus
   ========================================================= */


/* =========================================================
   1. RESET E-LID
   ========================================================= */

   .elid-welcome-section,
   .elid-welcome-section *,
   .elid-welcome-wrap,
   .elid-welcome-container {
       box-sizing: border-box !important;
   }
   
   
   /* =========================================================
      2. SECTION
      Jangan beri pengurangan lebar
      ========================================================= */
   
   .elid-welcome-section {
       position: relative !important;
   
       width: 100% !important;
       max-width: none !important;
   
       padding: 0 !important;
   
       margin-top: 28px !important;
       margin-bottom: 28px !important;
   
       background: transparent !important;
   }
   
   
   /* =========================================================
      3. WRAPPER BANNER
      PERTAHANKAN LEBAR ASLI DARI AREA MODUL
      ========================================================= */
   
   .elid-welcome-section .elid-welcome-wrap {
       position: relative !important;
   
       width: 100% !important;
       max-width: none !important;
       min-width: 0 !important;
   
       margin: 0 !important;
       padding: 0 !important;
   
       /* TINGGI DESAIN */
       height: 260px !important;
       min-height: 260px !important;
   
       /* SUDUT SIKU */
       border-radius: 0 !important;
   
       overflow: hidden !important;
   }
   
   
   /* =========================================================
      4. PASTIKAN SELURUH LAPISAN TETAP SIKU
      ========================================================= */
   
   .elid-welcome-section .elid-welcome-wrap,
   .elid-welcome-section .elid-welcome-wrap::before,
   .elid-welcome-section .elid-welcome-wrap::after,
   .elid-welcome-section .elid-bg-glow,
   .elid-welcome-section .elid-bg-orbit,
   .elid-welcome-section .elid-bg-pattern,
   .elid-welcome-section .elid-welcome-container {
       border-radius: 0 !important;
   }
   
   
   /* =========================================================
      5. CONTAINER INTERNAL
      ========================================================= */
   
   .elid-welcome-section .elid-welcome-container {
       position: relative !important;
   
       width: 100% !important;
       max-width: none !important;
   
       height: 100% !important;
       min-height: 0 !important;
   
       margin: 0 !important;
   }
   
   
   /* =========================================================
      6. HILANGKAN SPASI INTERNAL YANG TIDAK DIINGINKAN
      ========================================================= */
   
   .elid-welcome-section > div,
   .elid-welcome-section .elid-welcome-wrap,
   .elid-welcome-section .elid-welcome-container {
       padding-top: 0 !important;
       padding-bottom: 0 !important;
   }
   
   
   /* =========================================================
      7. ANIMASI BACKGROUND UTAMA
      Kilau ivory-gold bergerak sangat halus
      ========================================================= */
   
   .elid-welcome-section .elid-welcome-wrap::before {
       content: "" !important;
   
       position: absolute !important;
       z-index: 1 !important;
   
       inset: -40% !important;
   
       pointer-events: none !important;
   
       background:
           linear-gradient(
               115deg,
               transparent 28%,
               rgba(255, 255, 255, 0.16) 42%,
               rgba(238, 202, 119, 0.08) 48%,
               rgba(255, 255, 255, 0.20) 52%,
               rgba(205, 163, 75, 0.06) 58%,
               transparent 72%
           ) !important;
   
       background-size: 220% 220% !important;
   
       opacity: 0.8 !important;
   
       animation: elidBackgroundFlow 16s ease-in-out infinite !important;
   }
   
   
   /* =========================================================
      8. GLOW BERGERAK
      ========================================================= */
   
   .elid-welcome-section .elid-bg-glow {
       animation: elidGlowFloat 12s ease-in-out infinite !important;
       will-change: transform !important;
   }
   
   
   /* =========================================================
      9. ORBIT BERGERAK
      ========================================================= */
   
   .elid-welcome-section .elid-bg-orbit {
       animation: elidOrbitFloat 18s ease-in-out infinite !important;
       will-change: transform !important;
   }
   
   
   /* =========================================================
      10. PATTERN BERGERAK HALUS
      ========================================================= */
   
   .elid-welcome-section .elid-bg-pattern {
       animation: elidPatternFlow 20s ease-in-out infinite !important;
       will-change: transform, opacity !important;
   }
   
   
   /* =========================================================
      11. KONTEN TETAP DI ATAS BACKGROUND
      ========================================================= */
   
   .elid-welcome-section .elid-welcome-container,
   .elid-welcome-section .elid-content,
   .elid-welcome-section .elid-slider-area,
   .elid-welcome-section .elid-info-slider {
       position: relative !important;
       z-index: 5 !important;
   }
   
   
   /* =========================================================
      12. ANIMASI BACKGROUND FLOW
      ========================================================= */
   
   @keyframes elidBackgroundFlow {
   
       0% {
           background-position: 0% 50%;
           transform: translate3d(-1%, -1%, 0);
       }
   
       50% {
           background-position: 100% 50%;
           transform: translate3d(1%, 1%, 0);
       }
   
       100% {
           background-position: 0% 50%;
           transform: translate3d(-1%, -1%, 0);
       }
   
   }
   
   
   /* =========================================================
      13. ANIMASI GLOW
      ========================================================= */
   
   @keyframes elidGlowFloat {
   
       0%,
       100% {
           transform: translate3d(0, 0, 0) scale(1);
       }
   
       50% {
           transform: translate3d(18px, 10px, 0) scale(1.05);
       }
   
   }
   
   
   /* =========================================================
      14. ANIMASI ORBIT
      ========================================================= */
   
   @keyframes elidOrbitFloat {
   
       0%,
       100% {
           transform: translate3d(0, 0, 0) rotate(0deg);
       }
   
       50% {
           transform: translate3d(-16px, 10px, 0) rotate(2deg);
       }
   
   }
   
   
   /* =========================================================
      15. ANIMASI PATTERN
      ========================================================= */
   
   @keyframes elidPatternFlow {
   
       0%,
       100% {
           transform: translate3d(0, 0, 0);
           opacity: 0.72;
       }
   
       50% {
           transform: translate3d(12px, -8px, 0);
           opacity: 0.92;
       }
   
   }
   
   
   /* =========================================================
      16. RESPONSIVE
      ========================================================= */
   
   @media (max-width: 991px) {
   
       .elid-welcome-section {
           margin-top: 22px !important;
           margin-bottom: 22px !important;
       }
   
       .elid-welcome-section .elid-welcome-wrap {
           height: auto !important;
           min-height: 320px !important;
       }
   
   }
   
   
   @media (max-width: 767px) {
   
       .elid-welcome-section {
           margin-top: 18px !important;
           margin-bottom: 18px !important;
       }
   
       .elid-welcome-section .elid-welcome-wrap {
           height: auto !important;
           min-height: 430px !important;
       }
   
   }
   
   
   /* =========================================================
      17. AKSESIBILITAS
      ========================================================= */
   
   @media (prefers-reduced-motion: reduce) {
   
       .elid-welcome-section .elid-welcome-wrap::before,
       .elid-welcome-section .elid-bg-glow,
       .elid-welcome-section .elid-bg-orbit,
       .elid-welcome-section .elid-bg-pattern {
           animation: none !important;
       }
   
   }
   /* =========================================================
   E-LID SLIDER — ICON DINAMIS
   ========================================================= */

.elid-info-slider .elid-dynamic-icon {
    width: 58px !important;
    height: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto 12px !important;

    color: #f1ce70 !important;

    line-height: 1 !important;
    opacity: 1 !important;
}

.elid-info-slider .elid-dynamic-icon svg {
    display: block !important;

    width: 58px !important;
    height: 58px !important;

    max-width: 100% !important;
    max-height: 100% !important;

    color: #f1ce70 !important;

    fill: none !important;

    filter:
        drop-shadow(0 0 5px rgba(241, 206, 112, 0.28)) !important;

    animation: elidDynamicIconFloat 3.5s ease-in-out infinite !important;
}

@keyframes elidDynamicIconFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-4px) scale(1.04);
    }
}
 /* =========================================================
   PPID QUICK ACCESS
   PREMIUM IVORY • GREY • GOLD
   SELARAS DENGAN PPID WELCOME
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.ppid-quick-access {
    position: relative;
    width: 100%;
    padding: 75px 30px 80px;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(211, 177, 94, 0.10) 0%,
            rgba(211, 177, 94, 0.025) 24%,
            transparent 48%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(39, 63, 67, 0.055) 0%,
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #f8f7f3 0%,
            #f1f2f1 48%,
            #f7f5ef 100%
        );

    overflow: hidden;
}


/* GRADIENT LEMBUT BERGERAK */

.ppid-quick-access::before {
    content: "";

    position: absolute;
    inset: -35%;

    background:
        linear-gradient(
            120deg,
            transparent 30%,
            rgba(213, 180, 98, 0.045) 45%,
            rgba(255, 255, 255, 0.40) 50%,
            rgba(213, 180, 98, 0.04) 55%,
            transparent 70%
        );

    background-size: 220% 220%;

    animation: ppidQuickSectionFlow 15s ease-in-out infinite;

    pointer-events: none;
}


/* ORNAMEN LINGKARAN HALUS */

.ppid-quick-access::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -170px;
    top: -150px;

    border: 1px solid rgba(184, 143, 55, 0.10);
    border-radius: 50%;

    box-shadow:
        0 0 0 45px rgba(184, 143, 55, 0.025),
        0 0 0 90px rgba(184, 143, 55, 0.015);

    pointer-events: none;

    animation: ppidQuickCircleFloat 12s ease-in-out infinite;
}


/* CONTENT DI ATAS DEKORASI */

.ppid-quick-access > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.ppid-quick-access-header {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}


/* EYEBROW */

.ppid-quick-access-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 18px;
    margin-bottom: 16px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;

    color: #8a6a2b;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.95),
            rgba(247, 243, 233, 0.90)
        );

    border: 1px solid rgba(184, 143, 55, 0.24);
    border-radius: 30px;

    box-shadow:
        0 5px 16px rgba(36, 50, 51, 0.035);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.ppid-quick-access-eyebrow:hover {
    transform: translateY(-2px);

    border-color: rgba(184, 143, 55, 0.45);

    box-shadow:
        0 9px 22px rgba(184, 143, 55, 0.10);
}


/* TITLE */

.ppid-quick-access-header h2 {
    margin: 0 0 14px;
    padding: 0;

    color: #304347;

    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.2px;
}


/* DESCRIPTION */

.ppid-quick-access-header p {
    margin: 0;

    color: #718083;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   GRID
========================================================= */

.ppid-quick-grid {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* =========================================================
   CARD
========================================================= */

.ppid-quick-card {
    position: relative;

    display: block;

    min-height: 230px;
    padding: 30px;

    text-decoration: none !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(252, 251, 247, 0.96) 100%
        );

    border: 1px solid rgba(48, 67, 71, 0.12);
    border-radius: 16px;

    box-shadow:
        0 10px 28px rgba(39, 55, 57, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);

    overflow: hidden;

    transition:
        transform 0.38s ease,
        box-shadow 0.38s ease,
        border-color 0.38s ease,
        background 0.38s ease;
}


/* =========================================================
   DEKORASI SUDUT
========================================================= */

.ppid-quick-card::before {
    content: "";

    position: absolute;

    width: 155px;
    height: 155px;

    top: -88px;
    right: -88px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(190, 151, 62, 0.12) 0%,
            rgba(211, 177, 94, 0.05) 42%,
            transparent 70%
        );

    opacity: 0.55;

    transition:
        transform 0.60s ease,
        opacity 0.40s ease;

    pointer-events: none;
}


/* GARIS GOLD DI BAWAH */

.ppid-quick-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #b48632 20%,
            #e2c16e 50%,
            #b48632 80%,
            transparent 100%
        );

    background-size: 200% 100%;
    background-position: 100% 0;

    opacity: 0;

    transition:
        opacity 0.35s ease,
        background-position 0.65s ease;

    pointer-events: none;
}


/* =========================================================
   ICON
========================================================= */

.ppid-quick-icon {
    position: relative;
    z-index: 2;

    width: 60px;
    height: 60px;

    margin-bottom: 24px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #35595a 0%,
            #24494a 100%
        );

    box-shadow:
        0 8px 18px rgba(30, 70, 71, 0.15);

    transition:
        transform 0.38s ease,
        background 0.38s ease,
        box-shadow 0.38s ease;
}


/* =========================================================
   TEXT
========================================================= */

.ppid-quick-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    color: #33484c;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;

    transition:
        color 0.30s ease,
        transform 0.30s ease;
}


.ppid-quick-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #718083;

    font-size: 14px;
    line-height: 1.7;

    transition:
        color 0.30s ease;
}


/* =========================================================
   HOVER EFFECT
   ELEGANT GOLD SHIMMER
========================================================= */

.ppid-quick-card:hover {
    transform: translateY(-7px);

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fcfaf4 100%
        );

    border-color: rgba(184, 143, 55, 0.55);

    box-shadow:
        0 20px 42px rgba(36, 73, 74, 0.09),
        0 7px 22px rgba(184, 143, 55, 0.10);
}


/* DEKORASI MEMBESAR HALUS */

.ppid-quick-card:hover::before {
    transform: scale(1.35);
    opacity: 1;
}


/* GOLD SHIMMER BERJALAN */

.ppid-quick-card:hover::after {
    opacity: 1;

    background-position: 0 0;
}


/* ICON MENJADI GOLD */

.ppid-quick-card:hover .ppid-quick-icon {
    transform:
        translateY(-4px)
        scale(1.05);

    background:
        linear-gradient(
            135deg,
            #aa7a25 0%,
            #e0bf69 52%,
            #b7862f 100%
        );

    background-size: 180% 180%;

    box-shadow:
        0 13px 27px rgba(184, 143, 55, 0.25);

    animation: ppidQuickIconGlow 2.5s ease-in-out infinite;
}


/* TEXT HOVER */

.ppid-quick-card:hover h3 {
    color: #24494a;

    transform: translateX(2px);
}


.ppid-quick-card:hover p {
    color: #647276;
}


/* =========================================================
   ANIMASI MASUK
========================================================= */

@keyframes ppidQuickFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.ppid-quick-card {
    animation:
        ppidQuickFadeUp 0.65s ease both;
}


.ppid-quick-card:nth-child(1) {
    animation-delay: 0.05s;
}

.ppid-quick-card:nth-child(2) {
    animation-delay: 0.12s;
}

.ppid-quick-card:nth-child(3) {
    animation-delay: 0.19s;
}

.ppid-quick-card:nth-child(4) {
    animation-delay: 0.26s;
}

.ppid-quick-card:nth-child(5) {
    animation-delay: 0.33s;
}

.ppid-quick-card:nth-child(6) {
    animation-delay: 0.40s;
}


/* =========================================================
   ANIMASI GRADIENT SECTION
========================================================= */

@keyframes ppidQuickSectionFlow {

    0% {
        background-position: 0% 50%;
        transform: translate3d(-1%, -1%, 0);
    }

    50% {
        background-position: 100% 50%;
        transform: translate3d(1%, 1%, 0);
    }

    100% {
        background-position: 0% 50%;
        transform: translate3d(-1%, -1%, 0);
    }

}


/* =========================================================
   ANIMASI ORNAMEN SECTION
========================================================= */

@keyframes ppidQuickCircleFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-14px, 12px);
    }

}


/* =========================================================
   ANIMASI GOLD ICON
========================================================= */

@keyframes ppidQuickIconGlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .ppid-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ppid-quick-access {
        padding: 55px 20px 60px;
    }


    .ppid-quick-access-header {
        margin-bottom: 32px;
    }


    .ppid-quick-access-header h2 {
        font-size: 27px;
    }


    .ppid-quick-access-header p {
        font-size: 14px;
        line-height: 1.7;
    }


    .ppid-quick-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }


    .ppid-quick-card {
        min-height: auto;
        padding: 26px;
    }


    .ppid-quick-access::after {
        width: 220px;
        height: 220px;

        right: -125px;
        top: -110px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .ppid-quick-access::before,
    .ppid-quick-access::after,
    .ppid-quick-card,
    .ppid-quick-card:hover .ppid-quick-icon {
        animation: none !important;
    }

}
/* =========================================================
   PPID QUICK ACCESS
   SVG ICON GARIS - CSS BACKGROUND
========================================================= */

.ppid-quick-access .ppid-quick-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background-color: #294b4e !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 38px 38px !important;
}


/* =========================================================
   1. PERMOHONAN INFORMASI
   DOKUMEN / FORMULIR
========================================================= */

.ppid-quick-access .ppid-icon-permohonan {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 8H38L48 18V56H18Z' fill='none' stroke='%23f4d071' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M38 8V18H48' fill='none' stroke='%23f4d071' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M25 28H41M25 37H41M25 46H35' fill='none' stroke='%23f4d071' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}


/* =========================================================
   2. DAFTAR INFORMASI PUBLIK
   DOKUMEN / LIST
========================================================= */

.ppid-quick-access .ppid-icon-daftar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='14' y='8' width='36' height='48' rx='3' fill='none' stroke='%23f4d071' stroke-width='3.5'/%3E%3Ccircle cx='24' cy='23' r='2.5' fill='%23f4d071'/%3E%3Ccircle cx='24' cy='34' r='2.5' fill='%23f4d071'/%3E%3Ccircle cx='24' cy='45' r='2.5' fill='%23f4d071'/%3E%3Cpath d='M31 23H42M31 34H42M31 45H42' fill='none' stroke='%23f4d071' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}


/* =========================================================
   3. INFORMASI DIKECUALIKAN
   DOKUMEN / TERKUNCI
========================================================= */

.ppid-quick-access .ppid-icon-dikecualikan {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M16 8H38L48 18V56H16Z' fill='none' stroke='%23f4d071' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M38 8V18H48' fill='none' stroke='%23f4d071' stroke-width='3.5'/%3E%3Crect x='23' y='35' width='20' height='14' rx='2' fill='none' stroke='%23f4d071' stroke-width='3.5'/%3E%3Cpath d='M27 35V30C27 24 39 24 39 30V35' fill='none' stroke='%23f4d071' stroke-width='3.5' stroke-linecap='round'/%3E%3Ccircle cx='33' cy='42' r='2' fill='%23f4d071'/%3E%3C/svg%3E") !important;
}


/* =========================================================
   4. PENGAJUAN KEBERATAN
   DOKUMEN / LAPORAN
========================================================= */

.ppid-quick-access .ppid-icon-keberatan {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 8H38L48 18V56H18Z' fill='none' stroke='%23f4d071' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M38 8V18H48' fill='none' stroke='%23f4d071' stroke-width='3.5'/%3E%3Cpath d='M33 27V40' fill='none' stroke='%23f4d071' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='33' cy='47' r='2.5' fill='%23f4d071'/%3E%3C/svg%3E") !important;
}


/* =========================================================
   5. PENYELESAIAN SENGKETA
   DOKUMEN / CHECKLIST
========================================================= */

.ppid-quick-access .ppid-icon-sengketa {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='15' y='8' width='34' height='48' rx='3' fill='none' stroke='%23f4d071' stroke-width='3.5'/%3E%3Cpath d='M22 24L26 28L32 20M22 36L26 40L32 32M22 48L26 52L32 44' fill='none' stroke='%23f4d071' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M37 24H43M37 36H43M37 48H43' fill='none' stroke='%23f4d071' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}


/* =========================================================
   6. DOKUMEN & REGULASI
   BERKAS / LAPORAN
========================================================= */

.ppid-quick-access .ppid-icon-dokumen {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='19' y='10' width='30' height='42' rx='3' fill='none' stroke='%23f4d071' stroke-width='3.5'/%3E%3Cpath d='M15 16V54H43' fill='none' stroke='%23f4d071' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M26 24H42M26 33H42M26 42H37' fill='none' stroke='%23f4d071' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}


/* ANIMASI HOVER */
.ppid-quick-access .ppid-quick-card:hover .ppid-quick-icon {
    background-size: 42px 42px !important;
}
/* =========================================================
   PPID / E-LID FOOTER
   ========================================================= */

   .ppid-footer-text{
    width:100%;
    text-align:center;
    padding:28px 20px 24px;
    box-sizing:border-box;
    color:#ffffff;
}

.ppid-footer-tagline{
    color:#d8b55b;
    font-size:18px;
    font-weight:700;
    line-height:1.5;
    margin-bottom:7px;
    letter-spacing:.2px;
}

.ppid-footer-description{
    color:rgba(255,255,255,.78);
    font-size:14px;
    line-height:1.7;
    margin-bottom:15px;
}

.ppid-footer-copy{
    display:inline-block;
    color:rgba(255,255,255,.55);
    font-size:12px;
    padding-top:13px;
    border-top:1px solid rgba(216,181,91,.28);
}