body{
    background-image: url('../../../assets/web/subdermal_bg_loop.jpg');
    background-repeat:  repeat;
    background-position: top center;
    background-size: cover;
    /*font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
    /*font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;*/
    /*font-family: "Open Sans", sans-serif !important;*/
}

.bg_global{
    background-image: url('../../../assets/web/subdermal_bg_loop.jpg');
    background-repeat:  repeat;
    background-position: top center;
    background-size: cover;
}

.subdermal-hero-muted {
    /*width: 100%;*/
    aspect-ratio: 1920 / 800;
    background-image: url('../../../assets/web/landingweb4.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.subdermal-hero-muted::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

/*//content*/
/* ======================================
   Content Pages (Summernote / T&C)
   Scope: .content_pages
   ====================================== */

.content_pages {
    line-height: 1.75;
    color: #1f2937;
    font-size: 0.95rem;
}

/* Headings */
.content_pages h1,
.content_pages h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1.75rem 0 0.75rem;
}

.content_pages h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

/* Paragraph */
.content_pages p {
    margin-bottom: 0.75rem;
}

/* Ordered list (1, 1.1, a) */
.content_pages ol {
    list-style: decimal;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.content_pages ol ol {
    list-style: lower-alpha;
    margin-left: 1.25rem;
}

.content_pages ol ol ol {
    list-style: lower-roman;
    margin-left: 1.25rem;
}

/* Unordered list (bullet) */
.content_pages ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.content_pages li {
    margin-bottom: 0.4rem;
}

/* Strong / emphasis */
.content_pages strong {
    font-weight: 600;
}

/* Links */
.content_pages a {
    color: #b91c1c; /* aruna red-ish */
    text-decoration: underline;
}



.main-menu ul a, .main-menu ul li a {
    color:black !important;
    font-weight: bold;
}

li a i {
    font-size: 20px;
    color: #000;
}
li a:hover i {
    color: #e1306c; /* IG vibe */
}

#page-loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 99999;

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

    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#page-loader.hide {
    opacity: 0;
    visibility: hidden;
}



/*banner_splash*/
#arunaSplash {
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}



.boxlist {
    /*background-color: #fff;*/
    display: block;
    /*position: relative;*/
    /*margin: 0 15px 30px 15px;*/
    /*padding: clamp(20px, 5vw, 50px);*/
    /*padding:20px;*/
    /*margin: 20px;*/
    min-height: 150px;
    /*-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);*/
    /*-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);*/
    /*box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);*/

    /* TRANSITION */
    transition:
            box-shadow 0.4s ease,
            transform 0.4s ease,
            opacity 0.4s ease;
}

/* Hover effect */
/*.boxlist:hover {*/
/*    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);*/
/*    transform: translateY(-6px);*/
/*    opacity: 0.95;*/
/*}*/

.required{
    color:red;
}

/*//home*/
/*.subdermal-hero {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    overflow: hidden;*/
/*}*/

/*!* Background image layer *!*/
/*.subdermal-hero-bg {*/
/*    width: 100%;*/
/*    aspect-ratio: 1920 / 800; !* rasio banner koreaderma *!*/
/*    background-image: url('../../../assets/web/landing1.jpg');*/
/*    background-repeat: no-repeat;*/
/*    background-position: top center;*/
/*    !*background-size: cover;*!*/
/*    !*position:relative;*!*/
/*}*/

/* Untuk form dan field di mobile + tablet */
@media (max-width: 900px) {
    .subdermal-form .form-group,
    .subdermal-form .form-row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
    }

    .subdermal-form .form-control,
    .subdermal-form select.form-control {
        width: 100%;
        max-width: 100%;
        display: block;
    }
}



.subdermal-hero {
    position: relative;
    width: 100%;
    z-index: 1;
}
.subdermal-hero-user {
    width: 100%;
    background-image: url('../../../assets/web/bg.svg');
    /*background-image: url('../../../assets/web/subdermal_bg.jpg');*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.subdermal-hero-bg {
    width: 100%;
    aspect-ratio: 1920 / 800;
    background-image: url('../../../assets/web/bg.svg');
    /*background-image: url('../../../assets/web/landing_subdermal.jpg');*/
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.subdermal-footer-bg {
    position: relative;
    width: 100%;
    margin-top: 5rem;

    background-image: url('../../../assets/web/bg.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff !important;
    /* fallback color */
    background-color: #fff;
}
.subdermal-footer-bg > * {
    position: relative;
    z-index: 1;
}

.subdermal-footer-bg::before {
    content: "";
    position: absolute;
    inset: 0;

    /* muted warm overlay */
    /*background: #081C2D ;*/
    background: #081C2D ;
    opacity: 0.75;


    pointer-events: none;
    z-index: 0;
}

 

.subdermal-custom-bg {
    background-image: url('../../../assets/web/landingweb3.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

/* Tablet */
@media (max-width: 1024px) {
    .subdermal-hero-bg {
        aspect-ratio: 16 / 9;
        background-size: cover;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .subdermal-hero-bg {
        aspect-ratio: 4 / 5;
        background-size: contain;
        background-position: top center;
    }
}
/* Default Desktop */
.subdermal-content-overlap {
    position: relative;
    z-index: 2;
    margin-top: clamp(-180px, -12vw, -120px);
    padding-top: 40px;
}

/* Tablet besar (768–1024) → sudah OK */
@media (max-width: 1024px) {
    .subdermal-content-overlap {
        margin-top: clamp(-200px, -18vw, -140px);
        padding-top: 30px;
    }
}

/* Tablet → phablet (600–768) */
@media (max-width: 768px) {
    .subdermal-content-overlap {
        margin-top: clamp(-440px, -24vw, -560px);
        padding-top: 20px;
    }
}

/* Zona KRITIS: 450–600 (tetap dekat, jangan jatuh) */
@media (max-width: 600px) {
    .subdermal-content-overlap {
        margin-top: clamp(-340px, -22vw, -400px);
        padding-top: 20px;
    }
}

/* Mobile kecil (≤450) → boleh lebih dalam */
@media (max-width: 450px) {
    .subdermal-content-overlap {
        margin-top: clamp(-260px, -38vw, -210px);
        padding-top: 20px;
    }
}





/*//footer*/
.subdermal-footer {
    /*background-color: #c6b089;*/
    color: #ffffff;
}

.subdermal-footer a {
    color: #ffffff;
    text-decoration: none;
}

.subdermal-footer a:hover {
    text-decoration: underline;
}

.footer-social {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0.9;
}

.footer-social:hover {
    opacity: 1;
}

.subdermal-footer img.footer-logo {
    max-height: 42px;     /* desktop */
    width: auto;
}

.loader-logo {
    width: 400px;
    max-width: 580px;
}

.web-logo {
    /*width: 320px; */
    height: 30px;
    max-width: 320px;
}

@media (max-width: 768px) {
    .subdermal-footer img.footer-logo {
        max-height: 34px; /* mobile */
    }

    .loader-logo {
        /*width: 200px;*/
        max-width: 290px;
    }

    .web-logo {
        /*width: 220px; */
        height: 24px;
        max-width: 240px;
    }

}


.welcome-headline {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.5px;

    /* warna biru gradien khas akademik */
    background: #081C2D ;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    margin-bottom: 24px;
}

/* Tablet */
@media (max-width: 1024px) {
    .welcome-headline {
        /*font-size: 17px;*/
    }
}

/* Mobile */
@media (max-width: 640px) {
    .welcome-headline {
        /*font-size: 13px;*/
        line-height: 1.3;
        letter-spacing: -0.3px;
    }
}


.welcome_section {
    padding: 40px 0;
}

.welcome-photo {
    max-width: 220px;
    margin-bottom: 25px;
}

.welcome_text h4 {
    font-weight: 600;
    margin-bottom: 15px;
}

.welcome_text p {
    margin-bottom: 16px;
    line-height: 1.7;
    color: #555;
}
/* SIGNATURE */
.welcome_signature {
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.signature_photo {
    flex-shrink: 0;
    margin-right: 12px;
}

.signature_photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #EEEEEE;
    object-fit: cover;
}

.signature_text {
    line-height: 1.4;
}

.signature_text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.signature_text span {
    display: block;
    font-size: 14px;
    color: #666;
}

/* MOBILE */
@media (max-width: 576px) {
    .welcome_signature {
        flex-direction: column;      /* foto di atas */
        align-items: center;
        text-align: center;
    }

    .signature_photo {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .signature_photo img {
        width: 72px;
        height: 72px;
    }

    .signature_text strong {
        font-size: 14px;
    }

    .signature_text span {
        font-size: 13px;
    }
}



/*//modalhome*/




/* Modal Wrapper */
 .subdermal-modal {
     position: fixed;
     inset: 0;
     display: none;
     z-index: 9999;
 }

.subdermal-modal.active {
    display: block;
}

/* Overlay */
.subdermal-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

/* Modal Box */
.subdermal-modal-content {
    position: relative;
    max-width: 900px;
    height: 85vh;
    margin: 5vh auto;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Close Button */
.subdermal-modal-close {
    position: absolute;
    top: 12px;
    right: 15px;
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
}

/* Title */
.subdermal-modal-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #081C2D;
}


.btnCommittee{
    background-color: #081C2D;
    color: white;
}

/* Body Scroll */
.subdermal-modal-body {
    overflow-y: auto;
    padding-right: 10px;
}

/*//splash*/
/* Splash Modal Wrapper */
.subdermal-splash-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.subdermal-splash-modal.active {
    display: block;
}

/* Overlay */
.subdermal-splash-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

/* Modal Box */
.subdermal-splash-content {
    position: relative;
    max-width: 420px;
    margin: 8vh auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

/* Close Button */
.subdermal-splash-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    z-index: 2;
}

/* Body */
.subdermal-splash-body {
    background: #f3f3f3;
}

.subdermal-splash-image {
    width: 100%;
    display: block;
}

/* Footer */
.subdermal-splash-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-size: 13px;
    border-top: 1px solid #eee;
    background: #fff;
}

.subdermal-splash-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/*//tabs*/

.tab-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.tab-btn {
    padding: 10px 18px;
    border: 1px solid #081C2D;
    background: #ffffff;
    color: #081C2D;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
}

.tab-btn.active {
    background: #081C2D;
    color: #ffffff;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-image {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
}


/* Section */
.committee-section {
    margin-bottom: 20px;
}

.committee-header {
    background: #eef2ff;
    padding: 8px 12px;
    font-weight: 600;
    color: #081C2D;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase !important;
}

/* Grid for paired sections */
.committee-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 768px) {
    .committee-grid {
        grid-template-columns: 1fr;
    }
}

.committee-list {
    padding-left: 15px;
    padding-right: 10px;
}

/*//custom swal*/

/* Di template CSS */
.swal2-bottom-center {
    bottom: 1rem !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
}

.swal2-toast.swal2-bottom-center .swal2-container {
    flex-direction: row !important;
}

/*//animate*/

/* ===== Animate on Scroll ===== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition:
            opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* Saat sudah terlihat */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Optional variasi arah */
.fade-up { transform: translateY(20px); }
.fade-down { transform: translateY(-20px); }
.fade-left { transform: translateX(20px); }
.fade-right { transform: translateX(-20px); }
.animate-delay-1 { transition-delay: .1s; }
.animate-delay-2 { transition-delay: .2s; }
.fade-in {
    transform: none;
}

/* CONTENT TOGGLE */
.content-preview,
.content-full {
    transition: opacity .4s ease, transform .4s ease;
}

.content-preview {
    opacity: 1;
    transform: translateY(0);
}

.content-full {
    display: none;
    opacity: 0;
    transform: translateY(10px);
}

.content-full.is-visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.content-preview.is-hidden {
    opacity: 0;
    transform: translateY(-10px);
    display: none;
}

/* CTA */
.read-more-btn,
.read-less-btn {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    color: #081C2D;
    cursor: pointer;
}


/*//cta*/
/* CTA Sub Footer */
.cta-box {
    background: transparent;
}

.cta-title,
.cta-desc {
    color: #2a1f14; /* dark warm brown */
}

.cta-actions .kt-btn-primary {
    background-color: #081C2D;
    border-color: #081C2D;
}


.cta-content {
    padding: 10px 0;
}

.cta-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.cta-desc {
    font-size: 0.95rem;
    margin-bottom: 16px;
    color: #333;
    max-width: 520px;
}

.cta-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-btn {
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Primary */
.cta-btn.primary {
    color: #081C2D;
}

/* Secondary */
.cta-btn.secondary {
    color: #000;
}

.subdermal-footer {
    color: #ffffff !important;
}

.subdermal-footer *,
.subdermal-footer p,
.subdermal-footer span,
.subdermal-footer li,
.subdermal-footer strong,
.subdermal-footer i {
    color: #ffffff !important;
}

.subdermal-footer a {
    color: #ffffff !important;
}

.subdermal-footer a:hover {
    text-decoration: underline;
}

.msg_1 { margin-top: 4rem; }
.msg_2 { margin-top: 3rem; }
.msg_3 { padding-top: 5rem;padding-bottom: 2rem; }
.msg_4 { padding-top: 3rem; padding-bottom: 2rem;  }

.section-divider {
    height: 1px;
    width: 80px;
    background: #081C2D;
    margin: 3rem 0;
}

.bg-aaf2027
{
    background: #081C2D;
    color: #fff;
}

.welcome_signature {
    margin-top: 2rem;
}
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #081C2D;
    border-radius: 50%;
    margin-right: 10px;
}

/*//hero new*/
 .hero {
     position: relative;
     margin-bottom: 5rem;
     min-height: 120vh;
     width: 100%;
     /*background-image: url('../../../assets/web/bg.svg');*/
     background-image: url('../../../assets/web/cover.svg');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     /*overflow: hidden;*/
 }

/* Mobile */
@media (max-width: 768px) {
    .hero {
        background-image: url('../../../assets/web/cover.svg');
        /*background-image: url('../../../assets/web/landing_subdermal_mobile1.jpg');*/
        min-height: 65vh; /* bisa 60vh / 65vh sesuai kebutuhan */
        margin-bottom: 2rem;
        background-position: center top; /* optional biar fokus gambar lebih bagus di HP */
    }
}


/* overlay warna merah transparan */
.hero-overlay {
    /*background: linear-gradient(*/
    /*		90deg,*/
    /*		rgba(120, 20, 40, 0.88) 0%,*/
    /*		rgba(120, 20, 40, 0.75) 55%,*/
    /*		rgba(120, 20, 40, 0.4) 100%*/
    /*);*/
    z-index: 1;
    content: "";
    position: absolute;
    inset: 0;
    /*background: rgba(0, 0, 0, 0.5);*/
}

/* konten kiri */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: 120px 60px;
    color: #fff;

    opacity: 0;
    /*transform: translateY(-40px);*/
    /*animation: heroTextIn 1s ease-out forwards;*/
}

/* typography */
.hero-title {
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.15;
    margin-bottom: 20px;
}

.hero-date {
    font-size: 16px;
    letter-spacing: .08em;
    margin-bottom: 20px;
}

.hero-desc {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 32px;
    opacity: .95;
}

/* button */
.hero-btn {
    display: inline-block;
    background: #081C2D;
    color: #fff;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
}

/* latest news */
.hero-news {
    margin-top: 32px;
    padding: 14px 20px;
    background: rgba(255,255,255,.15);
    border-radius: 12px;
    font-size: 15px;
}





/*//content data*/

/* Restore list style for DB content */
.content-data ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 1rem 0;
}

.content-data li {
    margin-bottom: 0.5rem;
}

/*//modal*/


/* Participant Modal Wrapper */
.subdermal-participant-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.subdermal-participant-modal.active {
    display: block;
}

/* Overlay */
.subdermal-participant-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

/* Modal Box */
.subdermal-participant-content {
    position: relative;
    width: 500px; padding: 1rem;
    margin: 8vh auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

/* Close Button */
.subdermal-participant-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    z-index: 2;
}

/* Body */
.subdermal-participant-body {
    background: #f3f3f3;
}

.subdermal-participant-image {
    width: 100%;
    display: block;
}