/* ==========================================================
   PORTAL INTERNAL RS PETUKANGAN
   Layout V2
   Base Layout + Sidebar
========================================================== */

/* ==========================
Kedepannya Buat terpisah agar terstuktur
di laman ini tinggal panggil cth :
@import url("layout/base.css");
@import url("layout/sidebar.css");
@import url("layout/navbar.css");
@import url("layout/responsive.css");
@import url("layout/animation.css");
========================== */


/* ==========================
   GOOGLE FONT
========================== */

/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');*/


/* ==========================
   ROOT
========================== */
:root{
    --awr-warna-body-light:#F4F7FB;
    --awr-warna-body-dark:#212529;
    --awr-warna-gray: #6c757d;
    --awr-warna-gray-100: #f8f9fa;
    --awr-warna-gray-200: #e9ecef;
    --awr-warna-gray-300: #dee2e6;
    --awr-warna-gray-400: #ced4da;
    --awr-warna-gray-500: #adb5bd;
    --awr-warna-gray-600: #6c757d;
    --awr-warna-gray-700: #495057;
    --awr-warna-gray-800: #343a40;
    --awr-warna-gray-900: #212529;
    --awr-warna-black: #000;
    --awr-warna-gray-dark: #343a40;
    --awr-warna-tosca:#22bab0;
    --awr-warna-tosca-dark:#14998f;
    --awr-warna-tosca-light:#7BE0D8;
    --awr-warna-stabilo:#A6D65E;
    --awr-warna-putih:#FFFFFF;
    --awr-warna-dark:#1F2937;
    --awr-warna-text:#475467;
    --awr-sidebar-width:280px;
    --navbar-height:78px;
    --awr-transition:.35s ease;
    --awr-border:#E4E7EC;
    --awr-shadow: 0 15px 40px rgba(0,0,0,.08);
    --awr-radius:22px;
    --awr-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --awr-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --awr-gradient: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
    --awr-body-font-family: Poppins;
    --awr-body-font-size: 1rem;
    --awr-body-font-weight: 400;
    --awr-body-line-height: 1.5;
}

/* ==========================
   FONT
========================== */
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-display: swap;
    font-weight: 100;
    src: url(../font/Poppins/Poppins-Thin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-display: swap;
    font-weight: 200;
    src: url(../font/Poppins/Poppins-ExtraLight.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-display: swap;
    font-weight: 300;
    src: url(../font/Poppins/Poppins-Light.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(../font/Poppins/Poppins-Regular.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url(../font/Poppins/Poppins-Medium.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(../font/Poppins/Poppins-SemiBold.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(../font/Poppins/Poppins-Bold.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-display: swap;
    font-weight: 800;
    src: url(../font/Poppins/Poppins-ExtraBold.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-display: swap;
    font-weight: 900;
    src: url(../font/Poppins/Poppins-Black.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

/* ==========================
   RESET
========================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:var(--awr-body-font-family);
    font-size: var(--awr-body-font-size);
    background:var(--awr-warna-body-light);
    color:var(--awr-warna-text);
    overflow-x:hidden;
}

/* ==========================
   LINK
========================== */
a{
    text-decoration:none;
    color:inherit;
}
ul{
    list-style:none;
    margin:0;
    padding:0;
}

/* ==========================
   APP LAYOUT
========================== */
.app-layout{
    display:flex;
    min-height:100vh;
}

/* ==========================
   CONTENT
========================== */
.content-wrapper{
    flex:1;
    margin-left:var(--awr-sidebar-width);
    display:flex;
    flex-direction:column;
    min-width:0;
    transition:var(--awr-transition);

}

/* ==========================
   MAIN
========================== */
.main-content{
    flex:1;
    padding:25px;
}

/* ==========================================================
                    SIDEBAR
========================================================== */
.sidebar{
    position:fixed;
    left:0;
    top:0;
    width:var(--awr-sidebar-width);
    height:100vh;
    display:flex;
    flex-direction:column;
    background: linear-gradient(180deg, #22bab0 0%, #1DB0A7 35%, #14998f 100%);
    color:#fff;
    transition:var(--awr-transition);
    overflow:hidden;
    z-index:1050;
}

/* ==========================
   HEADER
========================== */
.sidebar-header{
    padding:25px 22px;
    flex-shrink:0;
}

/* ==========================
   LOGO
========================== */
.logo{
    display:flex;
    align-items:center;
    gap:15px;
}
.logo-icon{
    width:62px;
    height:62px;
    border-radius:20px;
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(12px);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    flex-shrink:0;
}
.logo-icon img{
    width:62px;
    height:62px;
}
.logo-text h5{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#fff;
}
.logo-text small{
    opacity:.85;
    font-size:12px;
}
/* ==========================
   BODY
========================== */
.sidebar-body{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:5px 16px 20px;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.35) transparent;
}
/* Scrollbar */
.sidebar-body::-webkit-scrollbar{
    width:5px;
}
.sidebar-body::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.35);
    border-radius:20px;
}
.sidebar-body:hover::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.55);
}

/* ==========================
   MENU TITLE
========================== */
.menu-title{
    display:block;
    margin: 22px 14px 10px;
    font-size:11px;
    font-weight:300;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
    opacity:.7;
}

/* ==========================
   MENU
========================== */
.sidebar-menu{
    display:flex;
    flex-direction:column;
    gap:6px;
}
/* ==========================
   LINK
========================== */
.sidebar-menu a{
    display:flex;
    align-items:center;
    gap:15px;
    padding:13px 16px;
    border-radius:16px;
    transition:.30s;
    font-weight:500;
    color:#fff;
}
/* ICON */
.sidebar-menu i{
    width:22px;
    text-align:center;
    font-size:18px;
}
/* TEXT */
.sidebar-menu span{
    flex:1;
}
/* HOVER */
.sidebar-menu a:hover{
    background:rgba(255,255,255,.12);
    transform:translateX(5px);
}
/* ACTIVE */
.sidebar-menu a.active{
    position: relative;
    background:#fff;
    color:var(--awr-warna-tosca);
    font-weight:600;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}
.sidebar-menu a.active::before{
    content: "";
    position: absolute;
    left: -16px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: #A6D65E;
}

/* ==========================
   FOOTER
========================== */
.sidebar-footer{
    flex-shrink:0;
    padding:18px;
}

/* ==========================
   BANNER
========================== */
.sidebar-banner{
    background: rgba(255,255,255,.12);
    border-radius:20px;
    padding:20px;
    text-align:center;
    backdrop-filter:blur(15px);
}
.sidebar-banner i{
    font-size:42px;
    margin-bottom:10px;
}
.sidebar-banner h6{
    font-weight:700;
    margin-bottom:8px;
}
.sidebar-banner p{
    font-size:13px;
    opacity:.9;
    line-height:1.6;
    margin:0;
}

/* ==========================================================
                DESKTOP HIDE SIDEBAR
========================================================== */
body.sidebar-hide .sidebar{
    transform:translateX(-100%);
}
body.sidebar-hide .content-wrapper{
    margin-left:0;
}

/* ==========================================================
                    NAVBAR
========================================================== */
.top-navbar{
    position:sticky;
    top:20px;
    margin:20px 20px 0;
    background:#fff;
    border-radius:22px;
    min-height:78px;
    padding:8px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-shadow:0 10px 35px rgba(15,23,42,.06);
    border:1px solid rgba(0,0,0,.04);
    z-index:1030;
}
/* ==========================
        LEFT
========================== */
.navbar-left{
    flex:1;
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
}

/* ==========================
        TOGGLE
========================== */
.menu-toggle{
    width:30px;
    height:30px;
    border:none;
    outline:none;
    border-radius:16px;
    background:#ffffff;
    color:#475467;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    cursor:pointer;
    transition:.30s;
}
.menu-toggle:hover{
    color:var(--awr-warna-tosca);
    transform:rotate(45deg);
}

/* ==========================
        MOBILE TITLE
========================== */
.mobile-title{
    display:none;
    font-size:18px;
    font-weight:700;
    color:var(--awr-warna-dark);
    white-space:nowrap;
}


/* ==========================
        RIGHT
========================== */
.navbar-right{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

/* ==========================
        NAV BUTTON
========================== */
.nav-btn{
    position:relative;
    width:48px;
    height:48px;
    border:none;
    border-radius:16px;
    background:#F4F7FB;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    transition:.30s;
    color:#475467;
    font-size:20px;
}

.nav-btn:hover{
    background:var(--awr-warna-tosca);
    color:#fff;
    transform:translateY(-2px);
}

/* ==========================
        BADGE
========================== */
.badge-dot{
    position:absolute;
    top:11px;
    right:12px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#ff4d4f;
    border:2px solid #fff;
}

/* ==========================
        NAVBAR ANIMATION
========================== */
.top-navbar,
.menu-toggle,
.nav-btn{
    transition: background .30s ease, color .30s ease, border .30s ease, transform .30s ease, box-shadow .30s ease;
}
/* ==========================================================
                PROFILE DROPDOWN
========================================================== */
.profile-dropdown{
    position:relative;
}
/* BUTTON */
.profile-btn{
    display:flex;
    align-items:center;
    gap:14px;
    padding:8px 10px;
    border:none;
    background:#fff;
    border-radius:18px;
    cursor:pointer;
    transition:.30s;
}
.profile-btn:hover{
    background:#F5F7FB;
}
/* IMAGE */
.profile-btn img{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid rgba(34,186,176,.18);
}
/* INFO */
.profile-info{
    display:flex;
    flex-direction:column;
    text-align:left;
}
.profile-info span{
    font-size:14px;
    font-weight:600;
    color:#1F2937;
}
.profile-info small{
    color:#98A2B3;
    font-size:12px;
}
/* ARROW */
.profile-btn>.bi{
    font-size:14px;
    color:#98A2B3;
    transition:.30s;
}
.profile-dropdown.show .profile-btn>.bi{
    transform:rotate(180deg);
}

/* ==========================================================
                DROPDOWN MENU
========================================================== */
.profile-menu{
    position:absolute;
    right:0;
    top:72px;
    width:280px;
    background:#fff;
    border-radius:22px;
    box-shadow: 0 20px 45px rgba(0,0,0,.12);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:.30s;
    z-index:1200;
}
/* SHOW */
.profile-dropdown.show .profile-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* ==========================================================
            HEADER
========================================================== */
.profile-header{
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px;
    background: linear-gradient(135deg, #22bab0, #14998f);
    color:#fff;
}
.profile-header img{
    width:58px;
    height:58px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,.3);
}
.profile-header h6{
    margin:0;
    font-weight:700;
}
.profile-header small{
    opacity:.9;
}
/* ==========================================================
            ITEM
========================================================== */
.profile-menu a{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 20px;
    color:#475467;
    transition:.25s;
    font-size:14px;
}
.profile-menu a:hover{
    background:#F7F9FC;
    color:var(--awr-warna-tosca);
    padding-left:26px;
}
.profile-menu a i{
    width:20px;
    text-align:center;
    font-size:18px;
}
/* LINE */
.profile-menu hr{
    margin:8px 0;
}

/* ==========================================================
                NOTIFICATION
========================================================== */
.notification-dot{
    position:absolute;
    top:10px;
    right:10px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ff4d4f;
    border:2px solid #fff;
    animation:pulse 2s infinite;
}

/* PULSE */
@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(255,77,79,.6);
    }
    70%{
        box-shadow:0 0 0 12px rgba(255,77,79,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(255,77,79,0);
    }
}

/* ==========================================================
                OVERLAY
========================================================== */
.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:1040;
}
.sidebar-overlay.show{
    opacity:1;
    visibility:visible;
}

/* ==========================================================
                SIDEBAR SHOW MOBILE
========================================================== */
.sidebar{
    transition: transform .35s ease, width .35s ease;
}
.sidebar.show{
    transform:translateX(0);
}

/* ==========================================================
                CONTENT ANIMATION
========================================================== */
.content-wrapper{
    transition: margin-left .35s ease, width .35s ease;
}
.main-content{
    animation:fadeContent .35s ease;
}
@keyframes fadeContent{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==========================================================
                DESKTOP
========================================================== */
@media(min-width:993px){
    .sidebar{
        transform:translateX(0);
    }
    body.sidebar-hide .sidebar{
        transform:translateX(-100%);
    }
    body.sidebar-hide .content-wrapper{
        margin-left:0;
    }
}
/* ==========================================================
                TABLET
========================================================== */
@media(max-width:992px){
    /* Sidebar */
    .sidebar{
        transform:translateX(-100%);
    }
    /* Sidebar Show */
    .sidebar.show{
        transform:translateX(0);
    }
    /* Content */
    .content-wrapper{
        margin-left:0;
    }
    /* Navbar */
    .top-navbar{
        margin:15px;
    }
}
/* ==========================================================
                HOVER EFFECT
========================================================== */
.sidebar-menu a,
.profile-btn,
.nav-btn,
.menu-toggle{
    transition:all .30s ease;
}
/* ==========================================================
                SELECTION
========================================================== */
::selection{
    background:#22bab0;
    color:#fff;
}

/* ==========================================================
                SMOOTH SCROLL
========================================================== */
html{
    scroll-behavior:smooth;
}
/* =====================================================
   BACK TO TOP
===================================================== */
#btnBackToTop {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    border: none;

    opacity: 0;             /* hidden default */
    visibility: hidden;     /* biar ga bisa diklik saat hidden */
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#btnBackToTop.show {
    opacity: 1;
    visibility: visible;
}

#btnBackToTop:hover {
    transform: scale(1.1);
}
/* =====================================================
   GLOBAL SCROLLBAR
===================================================== */
/*!* Firefox *!
*{
    scrollbar-width: thin;
    scrollbar-color: #22BAB0 #F5F7FB;
}
!* Chrome, Edge *!
*::-webkit-scrollbar{  width:10px;  height:10px;
}
*::-webkit-scrollbar-track{  background:#F5F7FB;  border-radius:20px;
}
*::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, #22BAB0, #14998F);
    border-radius:20px;
    border:2px solid #F5F7FB;
}
*::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg, #2ED3C8, #22BAB0);
}*/

/* =====================================================
   FOOTER CONTENT
===================================================== */
.footer-content{
    background-color: #f1f1f1;
    text-decoration: none;
}
/* =====================================================
   HERO CAROUSAL
===================================================== */

.hero-carousel{
    margin-bottom:35px;
}
.carousel{
    border-radius:25px;
    overflow:hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}
.carousel-item{
    height:300px;
    position:relative;
}
.carousel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
}
/*Overlay Gradient Biar elegan.*/
.carousel-item::before{
    content:"";
    position:absolute;
    inset:0;
    /*background: linear-gradient(90deg, rgba(17,24,39,.80) 0%, rgba(17,24,39,.55) 35%, rgba(17,24,39,.15) 70%, transparent 100%);*/
    background: linear-gradient(90deg, rgba(17,24,39,.35) 0%, rgba(17,24,39,.15) 35%, rgba(17,24,39,.10) 70%, transparent 100%);

    z-index:1;
}
/*Caption*/
.carousel-caption-custom{
    position:absolute;
    left:70px;
    top:50%;
    transform:translateY(-50%);
    z-index:5;
    max-width:500px;
}
.carousel-caption-custom h2{
    font-size:46px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:10px;
}
.carousel-caption-custom p{
    color:#212529;
    font-weight:500;
    font-size:18px;
    opacity:.9;
    margin-bottom:20px;
}
/*Tombol*/
.btn-dashboard{
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .75rem;
    transition:.3s;
    text-decoration:none;
    gap:8px;
    border-radius:7px;
}
.btn-dashboard:hover{
    transform:translateY(-3px);
    box-shadow:0 5px 15px rgba(34,186,176,.35);
}

/*Tombol Prev Next*/
.carousel-control-prev,
.carousel-control-next{
    width:60px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    background-color:rgba(255,255,255,.25);
    backdrop-filter:blur(10px);
    background-size:22px;
    transition:.3s;
}
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover{
    background-color:#22bab0;
}
.carousel-indicators button{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#fff;
    opacity:.5;
}
.carousel-indicators button{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#fff;
    opacity:.5;
}
.carousel-indicators .active{
    opacity:1;
    width:35px;
    border-radius:20px;
    background:#22bab0;
}

.banner-desktop{
    display:block;
}
.banner-mobile{

    display:none;
}
@media(max-width:768px){
    .banner-desktop{
        display:none;
    }
    .banner-mobile{
        display:block;
    }
}
/* =====================================================
   CARD BARCODE
===================================================== */
/* Styling Card Modern */
.card-qr {
    border: none;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Efek Hover pas mouse di atas Card */
.card-qr:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Container QR Code yang Responsif */
.qr-wrapper {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 1rem;
  
  /* Buat container jadi blok & flex center */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* KUNCI: Batasi lebar maksimal container agar pas di Card */
  width: 100%;
  max-width: 220px; /* Sesuaikan batas ukuran tampilan di layar (misal: 200px - 240px) */
  margin: 0 auto;   /* Buat posisi container tepat di tengah card */
  border: 1px dashed #dee2e6;
}

/* Memaksa elemen Gambar/SVG hasil Endroid menyesuaikan container */
.qr-wrapper img, 
.qr-wrapper svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;
}

/* Custom Option Card di dalam Modal */
.download-option-card {
    transition: all 0.25s ease;
    background-color: #ffffff;
}

.download-option-card:hover {
    border-color: #22bab0 !important;
    background-color: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.option-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 1. Modifikasi Transition Base Modal Bootstrap */
.modal.fade .modal-dialog {
    transform: scale(0.92) translateY(15px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* State saat Modal terbuka */
.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 2. Animasi Staggered untuk Opsi Pilihan (PNG & SVG) */
@keyframes fadeInUpOption {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* State awal opsi pilihan (sembunyi dulu sebelum dipicu) */
.download-option-card {
    opacity: 0;
}

/* Pemicu Animasi saat Modal Tampil (.show) */
.modal.show .download-option-card:nth-child(1) {
    animation: fadeInUpOption 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.15s; /* PNG muncul duluan */
}

.modal.show .download-option-card:nth-child(2) {
    animation: fadeInUpOption 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.25s; /* SVG muncul setelahnya */
}

/* Backdrop blur tipis biar konten belakang makin estetik */
.modal-backdrop.show {
    backdrop-filter: blur(4px);
    background-color: rgba(15, 23, 42, 0.5);
    opacity: 1 !important;
    transition: all 0.3s ease;
}
/* =====================================================
   CARD CONTENT DASHBOARD
===================================================== */
.info-card{
    background:#fff;
    border-radius:20px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:18px;
    height:100%;
    border:1px solid #edf2f7;
    transition:.35s;
    box-shadow:0 5px 18px rgba(0,0,0,.05);
}
.info-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.10);
}
.info-icon{
    width:68px;
    height:68px;
    min-width:68px;
    border-radius:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    /*color:#22bab0;
    background:#e8faf8;*/
}
.info-content{
    flex:1;
}
.info-title{
    display:block;
    color:#8c98a4;
    font-size:.9rem;
    margin-bottom:6px;
}
.info-content h5{
    margin:0;
    color:#243447;
}
@media(max-width:768px){
    .info-card{
        flex-direction:column;
        text-align:center;
        gap:12px;
        padding:20px 15px;
    }
    .info-icon{
        width:58px;
        height:58px;
        min-width:58px;
        font-size:24px;
    }
    .info-content h3{
        font-size:1.6rem;
    }
}
/* =====================================================
   LINK CONTENT DASHBOARD
===================================================== */
.category-icon{
    width:48px;
    height:48px;
    border-radius:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
}
.category-title{
    font-weight:700;
    margin:0;
}
.category-title{
    font-weight:700;
    margin:0;
}
.dashboard-card{
    background:#fff;
    border-radius:22px;
    padding:30px 25px;
    position:relative;
    text-align:center;
    transition:.35s;
    border:1px solid #edf2f7;
    height:100%;
}
.dashboard-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}
.dashboard-card h6{
    font-weight:600;
    margin-bottom:8px;
}
.dashboard-card-icon{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:42px;
    margin-bottom:25px;

}
.bg-soft-success{
    background:#dff8e6;
    color:#22b573;
}
.bg-soft-info{
    background:#dff5ff;
    color:#1e88e5;
}
.bg-soft-warning{
    background:#fff3db;
    color:#ff9800;
}
.bg-soft-danger{
    background:#ffe5e5;
    color:#ef5350;
}
.favorite-btn{
    position:absolute;
    top:18px;
    right:18px;
    width:38px;
    height:38px;
    border:none;
    background:#fff;
    color:#212529;
    border-radius:50%;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
    transition:.3s;
}
.favorite-btn:hover{
    color:#ffc107;
    transform:rotate(15deg);
}
@media(max-width:768px){
    .dashboard-card{
        padding:22px;
    }
    .card-icon{
        width:70px;
        height:70px;
        font-size:34px;
    }
    .dashboard-card h5{
        font-size:20px;
    }
    .btn-dashboard{
        justify-content:center;
    }
}
/* =====================================================
   BADGE
===================================================== */
/*1. Purple*/
.badge-warna-purple {
    background-color: rgba(111,66,193,0.31);
    border:1px solid #6f42c1;
    color: #6f42c1;
}
/*1. Safir (Modern Blue - Ganti Primary)*/
.badge-warna-safir {
    background-color: rgba(37,99,235,0.31);
    border:1px solid #2563eb;
    color: #2563eb;
}
/*2. Zamrud (Emerald Green - Ganti Success)*/
.badge-warna-zamrud {
    background-color: rgba(5,150,105,0.31);
    border:1px solid #059669;
    color: #059669;
}
/*3. Ruby (Crimson Red - Ganti Danger)*/
.badge-warna-ruby {
    background-color: rgba(220,38,38,0.31);
    border:1px solid #dc2626;
    color: #dc2626;
}
/*4. Amber (Warm Yellow/Orange - Ganti Warning)*/
.badge-warna-amber {
    background-color: rgba(217,119,6,0.31);
    border:1px solid #d97706;
    color: #d97706;
}
/*5. Sian (Teal/Cyan - Ganti Info)*/
.badge-warna-sian {
    background-color: rgba(13,148,136,0.31);
    border:1px solid #0d9488;
    color: #0d9488;
}
/*6. Arang (Charcoal / Slate Dark)*/
.badge-warna-arang {
    background-color: rgba(51,65,85,0.31);
    border:1px solid #334155;
    color: #334155;
}
/*7. Salmon (Rose/Coral)*/
.badge-warna-salmon {
    background-color: rgba(225,29,72,0.31);
    border:1px solid #e11d48;
    color: #e11d48;
}
/*8. Violet (Lavender Terang)*/
.badge-warna-violet {
    background-color: rgba(139,92,246,0.31);
    border:1px solid #8b5cf6;
    color: #8b5cf6;
}
/*9. Jingga (Sunset Orange)*/
.badge-warna-jingga {
    background-color: rgba(234,88,12,0.31);
    border:1px solid #ea580c;
    color: #ea580c;
}
/*10. Zaitun (Olive Green / Khaki)*/
.badge-warna-zaitun {
    background-color: rgba(101,163,13,0.31);
    border:1px solid #65a30d;
    color: #65a30d;
}
/*11. Sakura (Modern Pink / Rose)*/
.badge-warna-sakura {
    background-color: rgba(236,72,153,0.31);
    border:1px solid #ec4899;
    color: #ec4899;
}
/*12. Kopi (Warm Brown / Sepia)*/
.badge-warna-kopi {
    background-color: rgba(120,53,15,0.31);
    border:1px solid #78350f;
    color: #78350f;
}
/*13. Perak (Neutral Gray / Muted Secondary)*/
.badge-warna-perak {
    background-color: rgba(226,232,240,0.31);
    border:1px solid #e2e8f0;
    color: #e2e8f0;
}
/*14. Flaminggo (Coral Pink / Vibrant Neon)*/
.badge-warna-flaminggo {
    background-color: rgba(244,63,94,0.31);
    border:1px solid #f43f5e;
    color: #f43f5e;
}
/* =====================================================
   TEXT DAN BACKGOUND
===================================================== */
/* --- 0. PURPLE (REVISI) --- */
.text-purple {
    color: #6f42c1 !important;
}
.bg-purple-soft {
    background-color: #f3effb !important;
    color: #6f42c1 !important;
}
/* Soft BG buat alert/card */
.bg-purple {
    background-color: #6f42c1 !important;
}
.text-bg-purple {
    color: #ffffff !important;
    background-color: #6f42c1 !important;
}
/*1. Safir (Modern Blue - Ganti Primary)
Biru korporat yang lebih kalem, teduh di mata, mirip warna tech-brand modern.*/

.text-safir {
    color: #2563eb !important;
}
.bg-safir-soft {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}
.bg-safir {
    background-color: #2563eb !important;
}
.text-bg-safir {
    color: #fff !important;
    background-color: #2563eb !important;
}
/*2. Zamrud (Emerald Green - Ganti Success)
Hijau botol/emerald yang mewah, bukan hijau stabilo. Cocok buat finansial/sukses.*/
.text-zamrud {
    color: #059669 !important;
}
.bg-zamrud-soft {
    background-color: #ecfdf5 !important;
    color: #059669 !important;
}
.bg-zamrud {
    background-color: #059669 !important;
}
.text-bg-zamrud {
    color: #fff !important;
    background-color: #059669 !important;
}
/*3. Ruby (Crimson Red - Ganti Danger)
Merah agak tua/maroon tipis. Terlihat tegas tapi profesional, gak bikin mata sakit.*/
.text-ruby {
    color: #dc2626 !important;
}
.bg-ruby-soft {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}
.bg-ruby {
    background-color: #dc2626 !important;
}
.text-bg-ruby { color: #fff !important;
    background-color: #dc2626 !important;
}
/*4. Amber (Warm Yellow/Orange - Ganti Warning)
Kuning kunyit ke-oranye-an. Teks otomatis hitam (#000) biar kontrasnya dapet (lolos aksesibilitas WCAG).*/
.text-amber {
    color: #b45309 !important;
}
.bg-amber-soft {
    background-color: #fffbeb !important;
    color: #b45309 !important;
}
.bg-amber {
    background-color: #b45309 !important;
}
.text-bg-amber {
    color: #1e293b !important;
    background-color: #d97706 !important;
}
/*5. Sian (Teal/Cyan - Ganti Info)
Warna cyan gelap/teal. Memberikan kesan rileks dan estetik di web modern.*/
.text-sian {
    color: #0d9488 !important;
}
.bg-sian-soft {
    background-color: #f0fdfa !important;
    color: #0d9488 !important;
}
.bg-sian {
    background-color: #0d9488 !important;
}
.text-bg-sian {
    color: #fff !important;
    background-color: #0d9488 !important;
}
/*6. Arang (Charcoal / Slate Dark)
Ganti warna Hitam (.btn-dark) standar yang terlalu pekat. Warna slate/arang ini jauh lebih mewah.*/
.text-arang {
    color: #334155 !important;
}
.bg-arang-soft {
    background-color: #f8fafc !important;
    color: #334155 !important;
}
.bg-arang {
    background-color: #334155 !important;
}
.text-bg-arang {
    color: #fff !important;
    background-color: #334155 !important;
}
/*7. Salmon (Rose/Coral)
Warna pink kemerahan yang kalem. Bagus buat aksen kreatif atau kategori yang sifatnya personal.*/
.text-salmon {
    color: #e11d48 !important;
}
.bg-salmon-soft {
    background-color: #fff1f2 !important;
    color: #e11d48 !important;
}
.bg-salmon {
    background-color: #e11d48 !important;
}
.text-bg-salmon {
    color: #fff !important;
    background-color: #e11d48 !important;
}
/*8. Violet (Lavender Terang)
Kalau si ungu di atas cenderung gelap, Violet ini lebih cerah, fun, tapi tetep solid.*/
.text-violet {
    color: #8b5cf6 !important;
}
.bg-violet-soft {
    background-color: #f5f3ff !important;
    color: #8b5cf6 !important;
}
.bg-violet {
    background-color: #8b5cf6 !important;
}
.text-bg-violet {
    color: #fff !important;
    background-color: #8b5cf6 !important;
}
/*9. Jingga (Sunset Orange)
Bukan oranye menyala, tapi warna oranye senja yang hangat. Kelihatan modern banget buat CTA (Call to Action).*/
.text-jingga {
    color: #ea580c !important;
}
.bg-jingga-soft {
    background-color: #fff7ed !important;
    color: #ea580c !important;
}
.bg-jingga {
    background-color: #ea580c !important;

}
.text-bg-jingga {
    color: #fff !important; background-color: #ea580c !important;
}
/*10. Zaitun (Olive Green / Khaki)
Warna hijau bumi (earthy tone). Sangat cocok buat web yang punya konsep minimalis, natural, atau portofolio indie.*/
.text-zaitun {
    color: #4d7c0f !important;
}
.bg-zaitun-soft {
    background-color: #f7fee7 !important;
    color: #4d7c0f !important;
}
.bg-zaitun {
    background-color: #4d7c0f !important;
}
.text-bg-zaitun {
    color: #fff !important;
    background-color: #65a30d !important;
}
/*11. Sakura (Modern Pink / Rose)
Pink yang modern, tipis ke arah magenta tapi gak norak. Sangat segar buat UI modern.*/
.text-sakura {
    color: #ec4899 !important;
}
.bg-sakura-soft {
    background-color: #fdf2f8 !important;
    color: #ec4899 !important;
}
.bg-sakura {
    background-color: #ec4899 !important;
}
.text-bg-sakura {
    color: #fff !important;
    background-color: #ec4899 !important;
}
/*12. Kopi (Warm Brown / Sepia)
Warna cokelat premium. Memberikan kesan grounded, organik, profesional, dan nyaman di mata.*/
.text-kopi {
    color: #78350f !important;
}
.bg-kopi-soft {
    background-color: #fff7ed !important;
    color: #78350f !important;
}
.bg-kopi {
    background-color: #78350f !important;
}
.text-bg-kopi {
    color: #fff !important;
    background-color: #78350f !important;
}
/*13. Perak (Neutral Gray / Muted Secondary)
Warna abu-abu solid yang pas buat tombol "Cancel/Batal". Teksnya otomatis gelap (#334155) biar kontras dan bersih.*/
.text-perak {
    color: #64748b !important;
}
.bg-perak-soft {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
}
.bg-perak {
    background-color: #64748b !important;
}
.text-bg-perak {
    color: #334155 !important; background-color: #e2e8f0 !important;
}
/*14. Flaminggo (Coral Pink / Vibrant Neon)
Opsi pink kedua yang agak nyebrang ke arah oranye/peach cerah. Ini warna favorit startup teknologi jaman sekarang buat ngasih aksen yang mencolok tapi tetep sedap dilihat.*/
.text-flaminggo {
    color: #f43f5e !important;
}
.bg-flaminggo-soft {
    background-color: #fff1f2 !important;
    color: #f43f5e !important;
}
.bg-flaminggo {
    background-color: #f43f5e !important;
}
.text-bg-flaminggo {
    color: #fff !important;
    background-color: #f43f5e !important;
}
/* =====================================================
   BUTTON DAN OUTLINE BUTTON
===================================================== */
.kostumbtn{
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .75rem;
}

/* --- 0. PURPLE (REVISI) --- */
.btn-purple {
    --bs-btn-font-weight: 500;
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #6f42c1;
    --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #59359a;
    --bs-btn-hover-border-color: #533190;
    --bs-btn-focus-shadow-rgb: 135, 92, 207;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #533190;
    --bs-btn-active-border-color: #4e2e87;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #bfa5e7;
    --bs-btn-disabled-border-color: #bfa5e7;
}
.btn-outline-purple {
    --bs-btn-font-weight: 500;
    --bs-btn-color: #6f42c1;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #6f42c1;
    --bs-btn-hover-border-color: #6f42c1;
    --bs-btn-focus-shadow-rgb: 135, 92, 207;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #59359a;
    --bs-btn-active-border-color: #59359a;
    --bs-btn-disabled-color: #6f42c1;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #bfa5e7;
}
/*0. Violet Pastel (Revisi Ungu)*/
.btn-purple-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #5b21b6; --bs-btn-bg: #ede9fe; --bs-btn-border-color: #ddd6fe;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #7c3aed; --bs-btn-hover-border-color: #6d28d9;
    --bs-btn-focus-shadow-rgb: 139, 92, 246; --bs-btn-active-color: #fff; --bs-btn-active-bg: #6d28d9; --bs-btn-disabled-color: #a78bfa; --bs-btn-disabled-bg: #f5f3ff;
}
/*1. Safir (Modern Blue - Ganti Primary)
Biru korporat yang lebih kalem, teduh di mata, mirip warna tech-brand modern.*/
.btn-safir {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #2563eb; --bs-btn-border-color: #2563eb;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1e40af;
    --bs-btn-focus-shadow-rgb: 37, 99, 235; --bs-btn-active-bg: #1e40af; --bs-btn-disabled-bg: #93c5fd;
}
.btn-outline-safir {
    --bs-btn-color: #2563eb; --bs-btn-border-color: #2563eb; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2563eb; --bs-btn-active-bg: #1d4ed8;
}
/*1. Safir Pastel (Soft Blue)*/
.btn-safir-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #1e40af; --bs-btn-bg: #e0f2fe; --bs-btn-border-color: #bae6fd;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #38bdf8; --bs-btn-hover-border-color: #0ea5e9;
    --bs-btn-focus-shadow-rgb: 56, 189, 248; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0ea5e9; --bs-btn-disabled-color: #7dd3fc; --bs-btn-disabled-bg: #f0f9ff;
}

/*2. Zamrud (Emerald Green - Ganti Success)
Hijau botol/emerald yang mewah, bukan hijau stabilo. Cocok buat finansial/sukses.*/
.btn-zamrud {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #059669; --bs-btn-border-color: #059669;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #047857; --bs-btn-hover-border-color: #065f46;
    --bs-btn-focus-shadow-rgb: 5, 150, 105; --bs-btn-active-bg: #065f46; --bs-btn-disabled-bg: #a7f3d0;
}
.btn-outline-zamrud {
    --bs-btn-color: #059669; --bs-btn-border-color: #059669; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #059669; --bs-btn-active-bg: #047857;
}
/*2. Zamrud Pastel (Soft Emerald)*/
.btn-zamrud-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #065f46; --bs-btn-bg: #d1fae5; --bs-btn-border-color: #a7f3d0;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #10b981; --bs-btn-hover-border-color: #059669;
    --bs-btn-focus-shadow-rgb: 16, 185, 129; --bs-btn-active-color: #fff; --bs-btn-active-bg: #059669; --bs-btn-disabled-color: #6ee7b7; --bs-btn-disabled-bg: #ecfdf5;
}
/*3. Ruby (Crimson Red - Ganti Danger)
Merah agak tua/maroon tipis. Terlihat tegas tapi profesional, gak bikin mata sakit.*/
.btn-ruby {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #991b1b;
    --bs-btn-focus-shadow-rgb: 220, 38, 36; --bs-btn-active-bg: #991b1b; --bs-btn-disabled-bg: #fca5a5;
}
.btn-outline-ruby {
    --bs-btn-color: #dc2626; --bs-btn-border-color: #dc2626; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc2626; --bs-btn-active-bg: #b91c1c;
}
/*3. Ruby Pastel (Soft Red)*/
.btn-ruby-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #991b1b; --bs-btn-bg: #fee2e2; --bs-btn-border-color: #fca5a5;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #f43f5e; --bs-btn-hover-border-color: #e11d48;
    --bs-btn-focus-shadow-rgb: 244, 63, 94; --bs-btn-active-color: #fff; --bs-btn-active-bg: #e11d48; --bs-btn-disabled-color: #fda4af; --bs-btn-disabled-bg: #fff1f2;
}

/*4. Amber (Warm Yellow/Orange - Ganti Warning)
Kuning kunyit ke-oranye-an. Teks otomatis hitam (#000) biar kontrasnya dapet (lolos aksesibilitas WCAG).*/
.btn-amber {
    --bs-btn-font-weight: 500; --bs-btn-color: #1e293b; --bs-btn-bg: #d97706; --bs-btn-border-color: #d97706;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b45309; --bs-btn-hover-border-color: #92400e;
    --bs-btn-focus-shadow-rgb: 217, 119, 6; --bs-btn-active-bg: #92400e; --bs-btn-disabled-bg: #fde68a;
}
.btn-outline-amber {
    --bs-btn-color: #d97706; --bs-btn-border-color: #d97706; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d97706; --bs-btn-active-bg: #b45309;
}
/*4. Amber Pastel (Soft Yellow/Gold)*/
.btn-amber-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #92400e; --bs-btn-bg: #fef3c7; --bs-btn-border-color: #fde68a;
    --bs-btn-hover-color: #1e293b; --bs-btn-hover-bg: #fbbf24; --bs-btn-hover-border-color: #f59e0b;
    --bs-btn-focus-shadow-rgb: 251, 191, 36; --bs-btn-active-color: #fff; --bs-btn-active-bg: #d97706; --bs-btn-disabled-color: #fcd34d; --bs-btn-disabled-bg: #fffbeb;
}

/*5. Sian (Teal/Cyan - Ganti Info)
Warna cyan gelap/teal. Memberikan kesan rileks dan estetik di web modern.*/
.btn-sian {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #0d9488; --bs-btn-border-color: #0d9488;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0f766e; --bs-btn-hover-border-color: #115e59;
    --bs-btn-focus-shadow-rgb: 13, 148, 136; --bs-btn-active-bg: #115e59; --bs-btn-disabled-bg: #99f6e4;
}
.btn-outline-sian {
    --bs-btn-color: #0d9488; --bs-btn-border-color: #0d9488; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d9488; --bs-btn-active-bg: #0f766e;
}
/*5. Sian Pastel (Soft Teal)*/
.btn-sian-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #115e59; --bs-btn-bg: #ccfbf1; --bs-btn-border-color: #99f6e4;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #14b8a6; --bs-btn-hover-border-color: #0d9488;
    --bs-btn-focus-shadow-rgb: 20, 184, 166; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0d9488; --bs-btn-disabled-color: #5eead4; --bs-btn-disabled-bg: #f0fdfa;
}
/*6. Arang (Charcoal / Slate Dark)
Ganti warna Hitam (.btn-dark) standar yang terlalu pekat. Warna slate/arang ini jauh lebih mewah.*/
.btn-arang {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #334155; --bs-btn-border-color: #334155;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1e293b; --bs-btn-hover-border-color: #0f172a;
    --bs-btn-focus-shadow-rgb: 51, 65, 85; --bs-btn-active-bg: #0f172a; --bs-btn-disabled-bg: #cbd5e1;
}
.btn-outline-arang {
    --bs-btn-color: #334155; --bs-btn-border-color: #334155; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #334155; --bs-btn-active-bg: #1e293b;
}
/*6. Arang Pastel (Soft Slate Gray)*/
.btn-arang-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #1e293b; --bs-btn-bg: #f1f5f9; --bs-btn-border-color: #e2e8f0;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #64748b; --bs-btn-hover-border-color: #475569;
    --bs-btn-focus-shadow-rgb: 100, 116, 139; --bs-btn-active-color: #fff; --bs-btn-active-bg: #334155; --bs-btn-disabled-color: #94a3b8; --bs-btn-disabled-bg: #f8fafc;
}
/*7. Salmon (Rose/Coral)
Warna pink kemerahan yang kalem. Bagus buat aksen kreatif atau kategori yang sifatnya personal.*/
.btn-salmon {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #e11d48; --bs-btn-border-color: #e11d48;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #be123c; --bs-btn-hover-border-color: #9f1239;
    --bs-btn-focus-shadow-rgb: 225, 29, 72; --bs-btn-active-bg: #9f1239; --bs-btn-disabled-bg: #fecdd3;
}
.btn-outline-salmon {
    --bs-btn-color: #e11d48; --bs-btn-border-color: #e11d48; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e11d48; --bs-btn-active-bg: #be123c;
}
/*7. Salmon Pastel (Soft Coral Pink)*/
.btn-salmon-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #9f1239; --bs-btn-bg: #ffe4e6; --bs-btn-border-color: #fecdd3;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #fda4af; --bs-btn-hover-border-color: #f43f5e;
    --bs-btn-focus-shadow-rgb: 251, 113, 133; --bs-btn-active-color: #fff; --bs-btn-active-bg: #e11d48; --bs-btn-disabled-color: #ffe4e6; --bs-btn-disabled-bg: #fff1f2;
}
/*8. Violet (Lavender Terang)
Kalau si ungu di atas cenderung gelap, Violet ini lebih cerah, fun, tapi tetep solid.*/
.btn-violet {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #8b5cf6; --bs-btn-border-color: #8b5cf6;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #7c3aed; --bs-btn-hover-border-color: #6d28d9;
    --bs-btn-focus-shadow-rgb: 139, 92, 246; --bs-btn-active-bg: #6d28d9; --bs-btn-disabled-bg: #ddd6fe;
}
.btn-outline-violet {
    --bs-btn-color: #8b5cf6; --bs-btn-border-color: #8b5cf6; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8b5cf6; --bs-btn-active-bg: #7c3aed;
}
/*8. Violet Pastel Cerah (Soft Lavender)*/
.btn-violet-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #6d28d9; --bs-btn-bg: #f5f3ff; --bs-btn-border-color: #e0e7ff;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a78bfa; --bs-btn-hover-border-color: #8b5cf6;
    --bs-btn-focus-shadow-rgb: 167, 139, 250; --bs-btn-active-color: #fff; --bs-btn-active-bg: #7c3aed; --bs-btn-disabled-color: #c084fc; --bs-btn-disabled-bg: #faf5ff;
}

/*9. Jingga (Sunset Orange)
Bukan oranye menyala, tapi warna oranye senja yang hangat. Kelihatan modern banget buat CTA (Call to Action).*/
.btn-jingga {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #ea580c; --bs-btn-border-color: #ea580c;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ca8a04; --bs-btn-hover-border-color: #c2410c;
    --bs-btn-focus-shadow-rgb: 234, 88, 12; --bs-btn-active-bg: #b45309; --bs-btn-disabled-bg: #ffedd5;
}
.btn-outline-jingga {
    --bs-btn-color: #ea580c; --bs-btn-border-color: #ea580c; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ea580c; --bs-btn-active-bg: #ca8a04;
}
/*9. Jingga Pastel (Soft Light Orange)*/
.btn-jingga-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #c2410c; --bs-btn-bg: #ffedd5; --bs-btn-border-color: #fed7aa;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #fb923c; --bs-btn-hover-border-color: #f97316;
    --bs-btn-focus-shadow-rgb: 251, 146, 60; --bs-btn-active-color: #fff; --bs-btn-active-bg: #ea580c; --bs-btn-disabled-color: #ffcc99; --bs-btn-disabled-bg: #fff7ed;
}
/*10. Zaitun (Olive Green / Khaki)
Warna hijau bumi (earthy tone). Sangat cocok buat web yang punya konsep minimalis, natural, atau portofolio indie.*/
.btn-zaitun {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #65a30d; --bs-btn-border-color: #65a30d;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4d7c0f; --bs-btn-hover-border-color: #3f6212;
    --bs-btn-focus-shadow-rgb: 101, 163, 13; --bs-btn-active-bg: #3f6212; --bs-btn-disabled-bg: #d9f99d;
}
.btn-outline-zaitun {
    --bs-btn-color: #65a30d; --bs-btn-border-color: #65a30d; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #65a30d; --bs-btn-active-bg: #4d7c0f;
}
/*10. Zaitun Pastel (Soft Olive)*/
.btn-zaitun-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #3f6212; --bs-btn-bg: #f7fee7; --bs-btn-border-color: #d9f99d;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a3e635; --bs-btn-hover-border-color: #84cc16;
    --bs-btn-focus-shadow-rgb: 163, 230, 53; --bs-btn-active-color: #fff; --bs-btn-active-bg: #65a30d; --bs-btn-disabled-color: #bef264; --bs-btn-disabled-bg: #f7fee7;
}
/*11. Sakura (Modern Pink / Rose)
Pink yang modern, tipis ke arah magenta tapi gak norak. Sangat segar buat UI modern.*/
.btn-sakura {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #ec4899; --bs-btn-border-color: #ec4899;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #db2777; --bs-btn-hover-border-color: #be185d;
    --bs-btn-focus-shadow-rgb: 236, 72, 153; --bs-btn-active-bg: #be185d; --bs-btn-disabled-bg: #fbcfe8;
}
.btn-outline-sakura {
    --bs-btn-color: #ec4899; --bs-btn-border-color: #ec4899; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ec4899; --bs-btn-active-bg: #db2777;
}

/*11. Sakura Pastel (Soft Pink Mint)*/
.btn-sakura-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #be185d; --bs-btn-bg: #fdf2f8; --bs-btn-border-color: #fbcfe8;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #f472b6; --bs-btn-hover-border-color: #ec4899;
    --bs-btn-focus-shadow-rgb: 244, 114, 182; --bs-btn-active-color: #fff; --bs-btn-active-bg: #db2777; --bs-btn-disabled-color: #fbcfe8; --bs-btn-disabled-bg: #fff5f5;
}

/*12. Kopi (Warm Brown / Sepia)
Warna cokelat premium. Memberikan kesan grounded, organik, profesional, dan nyaman di mata.*/
.btn-kopi {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #78350f; --bs-btn-border-color: #78350f;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #451a03; --bs-btn-hover-border-color: #451a03;
    --bs-btn-focus-shadow-rgb: 120, 53, 15; --bs-btn-active-bg: #451a03; --bs-btn-disabled-bg: #fed7aa;
}
.btn-outline-kopi {
    --bs-btn-color: #78350f; --bs-btn-border-color: #78350f; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #78350f; --bs-btn-active-bg: #451a03;
}
/*12. Kopi Pastel (Soft Beige / Cream)*/
.btn-kopi-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #451a03; --bs-btn-bg: #fef3c7; --bs-btn-border-color: #fde68a;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b45309; --bs-btn-hover-border-color: #92400e;
    --bs-btn-focus-shadow-rgb: 180, 83, 9; --bs-btn-active-color: #fff; --bs-btn-active-bg: #78350f; --bs-btn-disabled-color: #fed7aa; --bs-btn-disabled-bg: #fffbeb;
}

/*13. Perak (Neutral Gray / Muted Secondary)
Warna abu-abu solid yang pas buat tombol "Cancel/Batal". Teksnya otomatis gelap (#334155) biar kontras dan bersih.*/
.btn-perak {
    --bs-btn-font-weight: 500; --bs-btn-color: #334155; --bs-btn-bg: #e2e8f0; --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-color: #1e293b; --bs-btn-hover-bg: #cbd5e1; --bs-btn-hover-border-color: #94a3b8;
    --bs-btn-focus-shadow-rgb: 226, 232, 240; --bs-btn-active-bg: #94a3b8; --bs-btn-disabled-bg: #f1f5f9;
}
.btn-outline-perak {
    --bs-btn-color: #64748b; --bs-btn-border-color: #cbd5e1; --bs-btn-hover-color: #1e293b;
    --bs-btn-hover-bg: #f1f5f9; --bs-btn-active-bg: #e2e8f0;
}
/*13. Perak Pastel (Super Light Pearl Gray)*/
.btn-perak-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #475569; --bs-btn-bg: #f8fafc; --bs-btn-border-color: #f1f5f9;
    --bs-btn-hover-color: #1e293b; --bs-btn-hover-bg: #e2e8f0; --bs-btn-hover-border-color: #cbd5e1;
    --bs-btn-focus-shadow-rgb: 226, 232, 240; --bs-btn-active-color: #1e293b; --bs-btn-active-bg: #cbd5e1; --bs-btn-disabled-color: #cbd5e1; --bs-btn-disabled-bg: #f8fafc;
}


/*14. Flaminggo (Coral Pink / Vibrant Neon)
Opsi pink kedua yang agak nyebrang ke arah oranye/peach cerah. Ini warna favorit startup teknologi jaman sekarang buat ngasih aksen yang mencolok tapi tetep sedap dilihat.*/
.btn-flaminggo {
    --bs-btn-font-weight: 500; --bs-btn-color: #fff; --bs-btn-bg: #f43f5e; --bs-btn-border-color: #f43f5e;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #e11d48; --bs-btn-hover-border-color: #be123c;
    --bs-btn-focus-shadow-rgb: 244, 63, 94; --bs-btn-active-bg: #be123c; --bs-btn-disabled-bg: #ffe4e6;
}
.btn-outline-flaminggo {
    --bs-btn-color: #f43f5e; --bs-btn-border-color: #f43f5e; --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f43f5e; --bs-btn-active-bg: #e11d48;
}
/*14. Flaminggo Pastel (Soft Peach Neon)*/
.btn-flaminggo-pastel {
    --bs-btn-font-weight: 500; --bs-btn-color: #be123c; --bs-btn-bg: #fff1f2; --bs-btn-border-color: #ffe4e6;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #fb7185; --bs-btn-hover-border-color: #f43f5e;
    --bs-btn-focus-shadow-rgb: 251, 113, 133; --bs-btn-active-color: #fff; --bs-btn-active-bg: #e11d48; --bs-btn-disabled-color: #ffe4e6; --bs-btn-disabled-bg: #fff1f2;
}
/* =====================================================
   ICON SOSMED FOOTER
===================================================== */


.rsp-sosmed-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 10px;
}

.rsp-sosmed-wrapper a {
    text-decoration: none;
}
.rsp-sosmed-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s, box-shadow 0.4s;
    will-change: transform, box-shadow;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.rsp-sosmed-box:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.rsp-sosmed {
    font-size: 22px;
    transition: color 0.4s ease-in-out;
    color: #fff;
}
.rsp-ig {
    background-color: #e1306c;
}

.rsp-ig:hover {
    background-color: #ffffff;
}

.rsp-ig:hover .rsp-sosmed {
    color: #e1306c;
}

.rsp-ttsatu {
    background-color: #000000;
}

.rsp-ttsatu:hover {
    background-color: #ffffff;
}

.rsp-ttsatu:hover .rsp-sosmed {
    color: #000000;
}

.rs-fbsatu {
    background-color: #1877f2;
}

.rs-fbsatu:hover {
    background-color: #ffffff;
}

.rs-fbsatu:hover .rsp-sosmed {
    color: #1877f2;
}

.rsp-ytsatu {
    background-color: #ff0000;
}

.rsp-ytsatu:hover {
    background-color: #ffffff;
}

.rsp-ytsatu:hover .rsp-sosmed {
    color: #ff0000;
}

.rsp-websatu {
    background-color: #a8d55e;
}

.rsp-websatu:hover {
    background-color: #ffffff;
}

.rsp-websatu:hover .rsp-sosmed {
    color: #a8d55e;
}

.rsp-googlesatu {
    background-color: #28a745;
}

.rsp-googlesatu:hover {
    background-color: #ffffff;
}

.rsp-googlesatu:hover .rsp-sosmed {
    color: #28a745;
}



@media (max-width: 768px) {
    .rsp-sosmed-box {
        width: 45px;
        height: 45px;
    }

    .rsp-sosmed {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .rsp-sosmed-box {
        width: 40px;
        height: 40px;
    }

    .rsp-sosmed {
        font-size: 16px;
    }

    .heading p {
        font-size: 16px;
        margin-bottom: 1px;
    }
}