body {
            font-family: 'EB Garamond', serif;
            background-color: #ffffff;
            color: #4a4a4a;
            font-size: 1.25rem;
            line-height: 1.6;
        }


        .header-title {
            font-family: 'Playfair Display', serif;
            font-weight: 800;
            font-size: 3.5rem;
            letter-spacing: 1px;
            color: #333333;
            text-transform: uppercase;
            margin-bottom: 0;
            line-height: 1;
        }


        .header-tagline {
            font-family: 'EB Garamond', serif;
            font-style: italic;
            font-size: 1.4rem;
            color: #555555;
            margin-top: 5px;
            border-top: 1px solid #ddd;
            display: inline-block;
            padding-top: 2px;
        }


        .sidebar-menu {
            list-style: none;
            padding-left: 0;
            margin-top: 20px;
        }


        .sidebar-menu li {
            margin-bottom: 12px;
            text-align: center;
        }


        .sidebar-menu a {
            font-family: 'EB Garamond', serif;
            font-style: italic;
            color: #777777;
            text-decoration: none;
            font-size: 1.6rem;
            transition: color 0.2s ease-in-out;
        }


        .sidebar-menu a:hover {
            color: #0088cc;
        }


        .article-title {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 1.5rem;
            color: #0077b3;
            margin-bottom: 5px;
        }


        .article-title a {
            color: #0077b3;
            text-decoration: none;
        }


        .article-meta {
            font-family: sans-serif;
            font-size: 0.85rem;
            color: #999999;
            margin-bottom: 0;
        }


        .article-meta a {
            color: #0077b3;
            text-decoration: none;
        }


        .article-content p {
            margin-bottom: 0;
            color: #555555;
            text-align: justify;
        }


        .social-icons {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 30px;
        }


        .social-icon-box {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-family: sans-serif;
            border-radius: 4px;
            text-decoration: none;
            font-size: 1.2rem;
        }


        .icon-fb {
            background-color: #3b5998;
        }


        .icon-tw {
            background-color: #1da1f2;
        }


        .icon-yt {
            background-color: #cd201f;
        }


        .icon-ig {
            background-color: #e1306c;
        }


        .profile-img-container {
            text-align: center;
            margin-bottom: 20px;
        }


        .profile-img-placeholder {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            object-fit: cover;
        }


        /* =========================================================
           FOOTER WEBSITE
           FOOTER HANYA DI AREA KONTEN
        ========================================================== */

        .header-widgets,
        .sidebar-widgets,
        .footer-widgets {
            display: grid;
            gap: 20px;
            margin: 24px 0;
            text-align: left;
        }

        .header-widgets .widget,
        .sidebar-widgets .widget,
        .footer-widgets .widget {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .header-widgets .widget-title,
        .sidebar-widgets .widget-title,
        .footer-widgets .widget-title {
            margin: 0 0 8px;
            font-size: 18px;
        }

        .header-widgets .widget-content,
        .sidebar-widgets .widget-content,
        .footer-widgets .widget-content {
            line-height: 1.7;
        }

        .header-widgets .widget-text .widget-content,
        .sidebar-widgets .widget-text .widget-content,
        .footer-widgets .widget-text .widget-content {
            white-space: pre-wrap;
        }

        .site-footer {
            margin-top: 70px;
            padding: 35px 20px 25px;
            border-top: 1px solid #e5e5e5;
            text-align: center;
            color: #777777;
        }


        .footer-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: #444444;
            margin-bottom: 8px;
        }


        .footer-description {
            max-width: 700px;
            margin: 0 auto 18px;
            font-size: 1.05rem;
            line-height: 1.6;
            color: #888888;
        }


        .footer-menu {
            margin-bottom: 18px;
        }


        .footer-menu a {
            color: #777777;
            text-decoration: none;
            margin: 0 10px;
            font-size: 1rem;
            transition: color 0.2s ease;
        }


        .footer-menu a:hover {
            color: #0077b3;
        }


        .footer-copy {
            padding-top: 18px;
            border-top: 1px solid #eeeeee;
            font-family: sans-serif;
            font-size: 0.8rem;
            color: #999999;
        }


        .footer-copy strong {
            color: #777777;
        }


        @media (max-width: 767px) {

            .site-footer {
                margin-top: 50px;
                padding: 30px 15px 20px;
            }


            .footer-menu a {
                display: inline-block;
                margin: 4px 7px;
            }


            .footer-description {
                font-size: 0.95rem;
            }

        }

    


.img-zoom-wrapper {
    position: relative;
    overflow: hidden;
    height: 180px;
}

.img-zoom-wrapper img {
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-zoom-hover:hover .img-zoom-wrapper img {
    transform: scale(1.15);
}

.card-zoom-hover .card-title a {
    transition: color 0.2s ease-in-out;
}


/* Tombol judul album */

.album-open-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;

    color: #333;
    font-weight: bold;
    text-decoration: none;

    transition: color 0.2s ease-in-out;
}

.album-open-btn:hover {
    color: #0077b3;
}


/* ========================================================= */
/* POPUP GALERI */
/* ========================================================= */

.gallery-modal {

    display: none;

    position: fixed;

    z-index: 99999;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: rgba(0, 0, 0, 0.88);

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

    padding: 15px;
}

.gallery-modal.show {
    display: flex;
}


/* Kotak popup */

.gallery-box {

    position: relative;

    width: 100%;
    max-width: 900px;

    max-height: 95vh;

    background: #111;

    color: #fff;

    border-radius: 8px;

    padding: 20px;

    box-shadow: 0 10px 40px rgba(0,0,0,.5);

    text-align: center;
}


/* Tombol X */

.gallery-close {

    position: absolute;

    right: 10px;
    top: 5px;

    z-index: 10;

    border: none;

    background: transparent;

    color: white;

    font-size: 36px;

    line-height: 1;

    cursor: pointer;
}

.gallery-close:hover {
    color: #ccc;
}


/* Judul album */

#galleryTitle {

    margin: 0 45px 15px 0;

    font-size: 20px;

    font-weight: 500;
}


/* Area foto */

.gallery-image-area {

    position: relative;

    width: 100%;

    height: 65vh;

    min-height: 300px;

    background: #000;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    touch-action: pan-y;
}


/* Foto */

#galleryImage {

    max-width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

    user-select: none;

    -webkit-user-drag: none;
}


/* Tombol kiri kanan */

.gallery-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    background: rgba(0,0,0,.65);

    color: white;

    font-size: 22px;

    cursor: pointer;

    transition: background .2s;
}

.gallery-arrow:hover {
    background: #0077b3;
}

.gallery-prev {
    left: 10px;
}

.gallery-next {
    right: 10px;
}


/* Nomor foto */

#galleryCounter {

    margin-top: 12px;

    color: #aaa;

    font-size: 13px;
}


/* Keterangan */

#galleryCaption {

    padding: 10px 20px 5px;

    color: #eee;

    font-size: 14px;

    line-height: 1.5;

    min-height: 25px;
}


/* Tampilan HP */

@media (max-width: 576px) {

    .gallery-modal {
        padding: 8px;
    }

    .gallery-box {
        padding: 12px;
    }

    .gallery-image-area {

        height: 60vh;

        min-height: 250px;
    }

    .gallery-arrow {

        width: 38px;
        height: 38px;

        font-size: 18px;
    }

    #galleryTitle {
        font-size: 17px;
    }

}


/* Siswanto source styles adapted to this CMS Builder markup. */
html.theme-siswanto-root{overflow-y:scroll;scrollbar-gutter:stable;scroll-behavior:auto}
body.theme-siswanto{overflow-anchor:none}
body.theme-siswanto{font-family:Georgia,'Times New Roman',serif;color:#4a4a4a;font-size:18px;background:#fff}
.theme-siswanto .builder-site{max-width:1000px;padding:0 24px;margin:50px auto;grid-template-columns:280px minmax(0,1fr);gap:0 48px;align-items:start}
.theme-siswanto .homepage-area-header{grid-column:2;grid-row:1}
.theme-siswanto .homepage-area-main{grid-column:2;grid-row:2}
.theme-siswanto .homepage-area-sidebar{grid-column:1;grid-row:1/4}
.theme-siswanto .homepage-area-footer{grid-column:2;grid-row:3}
.theme-siswanto .homepage-block{padding:0 0 24px;border:0}
.theme-siswanto .homepage-area-header h1{font-family:Georgia,serif;font-size:48px;font-weight:800;line-height:1.1;letter-spacing:1px;text-transform:uppercase;color:#333;margin:0 0 8px}
.theme-siswanto .homepage-area-header header>p{font-style:italic;border-top:1px solid #ddd;display:inline-block;margin:0 0 24px;padding-top:5px;font-size:21px;color:#555}
.theme-siswanto .siswanto-profile{display:block;width:240px;height:240px;max-width:100%;object-fit:cover;border-radius:50%;margin:0 auto 20px}
.theme-siswanto .homepage-nav{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 0 30px}
.theme-siswanto .homepage-nav a{font-size:24px;font-style:italic;color:#777;font-weight:400}
.theme-siswanto .homepage-nav a:hover{color:#0077b3}
.theme-siswanto .homepage-area-sidebar .homepage-block{margin-bottom:18px}
.theme-siswanto .homepage-area-sidebar h2{font-size:19px;border-bottom:1px solid #e5e5e5;padding-bottom:8px;margin-bottom:12px}
.theme-siswanto .site-post{border-bottom:1px solid #eee;padding:16px 0!important;margin:0}
.theme-siswanto .site-post h2,.theme-siswanto .site-post h1{font-family:Georgia,serif;font-size:24px;line-height:1.4;margin:0 0 10px;font-weight:700}
.theme-siswanto .site-post h2 a{color:#333}
.theme-siswanto .site-post p,.theme-siswanto .site-content{font-size:18px;line-height:1.7;margin-bottom:12px;color:#555}
.theme-siswanto .site-post>a{font-family:Arial,sans-serif;font-size:12px}
.theme-siswanto .site-featured{width:100%;height:auto;max-height:400px;object-fit:cover;margin:12px 0}
.theme-siswanto .homepage-area-footer{border-top:1px solid #e5e5e5;margin-top:36px;padding-top:26px;text-align:center;color:#777;font-size:13px}
.theme-siswanto .homepage-area-sidebar .cms-calendar table{min-width:0}
.siswanto-menu-toggle{display:none}
@media(max-width:782px){
 .theme-siswanto .builder-site{display:flex;flex-direction:column;margin:24px auto;padding:0 20px;gap:20px}
 .theme-siswanto .homepage-area{width:100%}
 .theme-siswanto .homepage-area-header h1{font-size:34px}
 .theme-siswanto .homepage-area-header header>p{font-size:18px;margin-bottom:0}
 .theme-siswanto .homepage-area-sidebar{order:-1}
 .theme-siswanto .siswanto-profile{width:120px;height:120px;margin-bottom:14px}
 .theme-siswanto .siswanto-menu-toggle{display:block;margin:0 auto 14px;padding:8px 18px;border:1px solid #ddd;border-radius:5px;background:#fff;color:#555;font:14px Arial,sans-serif}
 .theme-siswanto .homepage-area-sidebar .homepage-nav{display:none;gap:8px;margin:0}
 .theme-siswanto.siswanto-menu-open .homepage-area-sidebar .homepage-nav{display:flex}
 .theme-siswanto .homepage-area-sidebar .homepage-block{display:none}
 .theme-siswanto.siswanto-menu-open .homepage-area-sidebar .homepage-block{display:block;margin-top:20px}
 .theme-siswanto .homepage-nav a{font-size:20px}
}
.theme-siswanto .builder-site{grid-template-rows:min-content min-content minmax(0,1fr)}
.theme-siswanto .homepage-area-footer{align-self:start}

/* Classic personal-blog portrait, navigation and masthead. */
.theme-siswanto .siswanto-profile{width:224px;height:289px;border-radius:0;object-fit:cover;object-position:center 35%;margin:0 auto 20px}
.theme-siswanto .homepage-nav{width:224px;max-width:100%;margin:0 auto 32px;gap:0;border-top:1px solid #ddd}
.theme-siswanto .homepage-nav a{display:block;width:100%;text-align:center;font-family:'Segoe UI',Arial,sans-serif;font-size:25px;font-weight:300;font-style:italic;line-height:1.5;color:#777;padding:4px 0;border-bottom:1px solid #ddd}
.theme-siswanto .homepage-nav a:hover{color:#333;background:#fafafa}
.theme-siswanto .homepage-nav .homepage-category-link[aria-current="page"]{color:#333;background:#fafafa;font-weight:500}
.theme-siswanto .homepage-area-header h1{font-family:Georgia,'Times New Roman',serif;font-size:54px;font-weight:600;font-variant:small-caps;text-transform:none;letter-spacing:.5px;line-height:1.12;color:#333;margin:0 0 6px}
.theme-siswanto .homepage-area-header header>p{font-family:'Segoe Script','Brush Script MT',Georgia,cursive;font-size:17px;font-style:italic;line-height:1.6;color:#666;border-top:1px dotted #ddd;padding-top:4px;margin-bottom:28px}
.theme-siswanto .homepage-area-header header>p::after{content:'';display:block;width:100%;height:2px;margin-top:14px;border-radius:2px;background:linear-gradient(90deg,#548092 0%,#a9bec7 45%,#e7edef 85%,transparent 100%)}
@media(max-width:782px){
 .theme-siswanto .siswanto-profile{width:160px;height:206px;margin-bottom:16px}
 .theme-siswanto .homepage-area-header h1{font-size:clamp(30px,8vw,42px);overflow-wrap:anywhere}
 .theme-siswanto .homepage-area-header header>p{font-size:15px;margin-bottom:8px}
 .theme-siswanto .homepage-nav a{font-size:22px}
}

/* Align portrait and blog navigation with the sidebar widgets. */
.theme-siswanto .siswanto-profile{width:100%;height:auto;aspect-ratio:224/289;max-width:100%}
.theme-siswanto .homepage-nav{width:100%;max-width:100%}
@media(max-width:782px){.theme-siswanto .siswanto-profile{width:100%;height:auto;max-height:360px;aspect-ratio:auto;object-fit:contain}.theme-siswanto .homepage-nav{width:100%}}

/* Article typography matched to the requested blog reference. */
.theme-siswanto .site-post h1,.theme-siswanto .site-post h2,.theme-siswanto .site-post h2 a{font-family:'Montserrat','Segoe UI',Arial,sans-serif;font-size:23px;font-weight:700;line-height:32px;color:#007bb6;font-variant:normal;letter-spacing:normal}
.theme-siswanto .site-post p,.theme-siswanto .site-content,.theme-siswanto .site-content p,.theme-siswanto .site-content li,.theme-siswanto .site-content blockquote{font-family:'Source Sans Pro','Segoe UI',Arial,sans-serif;font-size:19px;font-weight:400;line-height:28.5px;color:#222}

/* Softer, lighter editorial typography. */
.theme-siswanto .site-post h1,.theme-siswanto .site-post h2,.theme-siswanto .site-post h2 a{font-weight:500;color:#548092;line-height:1.45}
.theme-siswanto .site-post h2 a:hover{color:#3e697a}
.theme-siswanto .site-post p,.theme-siswanto .site-content,.theme-siswanto .site-content p,.theme-siswanto .site-content li,.theme-siswanto .site-content blockquote{font-weight:300;color:#777;line-height:1.5}
.theme-siswanto .site-content strong,.theme-siswanto .site-content b{font-weight:600;color:#626262}

.siswanto-back-top{position:fixed;right:24px;bottom:24px;width:44px;height:44px;border:1px solid #d4dfe3;border-radius:50%;background:#fff;color:#548092;box-shadow:0 4px 16px #24364b16;font:24px Georgia,serif;cursor:pointer;z-index:100;transition:background .18s,color .18s}
.siswanto-back-top:hover{background:#548092;color:#fff}
.siswanto-back-top:focus-visible{outline:2px solid #548092;outline-offset:4px}
.siswanto-back-top[hidden]{display:none}
@media(max-width:782px){.siswanto-back-top{right:16px;bottom:20px}}
@media(prefers-reduced-motion:reduce){.siswanto-back-top{transition:none}}
@media(max-width:782px){.siswanto-back-top{bottom:calc(20px + env(safe-area-inset-bottom,0px));right:16px;z-index:1000}}

.theme-siswanto.is-homepage .site-post h2,.theme-siswanto.is-homepage .site-post h2 a{font-size:27px;line-height:1.4}

.theme-siswanto.is-homepage .site-post h2{border-bottom:1px solid #e4e4e4;padding-bottom:10px;margin-bottom:7px}
.theme-siswanto.is-homepage .site-post .siswanto-article-meta{margin-bottom:3px}
.theme-siswanto.is-homepage .site-post .siswanto-article-meta+p{margin-top:0}
.theme-siswanto.is-homepage .homepage-area-header .homepage-block{padding-bottom:0}
.theme-siswanto.is-homepage .homepage-area-header header>p{margin-bottom:6px}
.theme-siswanto.is-homepage .homepage-area-main .site-post:first-of-type{padding-top:8px!important}
.theme-siswanto.is-homepage .cms-pagination{border-top:0;margin-top:12px}
.theme-siswanto.is-detail .homepage-area-header .homepage-block{padding-bottom:0}
.theme-siswanto.is-detail .homepage-area-header header>p{margin-bottom:6px}
.theme-siswanto.is-detail .homepage-area-main .site-post:first-of-type{padding-top:8px!important}
.theme-siswanto .homepage-area-footer footer>p{margin-bottom:0}
.theme-siswanto .siswanto-footer-ornament{display:block;width:220px;max-width:100%;height:36px;object-fit:cover;object-position:center;margin:2px auto 0}
.siswanto-article-meta{font-family:'Source Sans Pro','Segoe UI',Arial,sans-serif;font-size:13px;font-weight:300;line-height:1.7;color:#929292;margin-bottom:18px;overflow-wrap:anywhere}
.siswanto-article-meta span{margin:0 4px;color:#b5b5b5}
.theme-siswanto .siswanto-article-meta a{color:#548092}

.siswanto-ajax-loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:8px 18px;border:1px solid #eee;border-radius:20px;background:rgba(255,255,255,.96);color:#777;box-shadow:0 3px 16px #00000012;font:14px 'Segoe UI',sans-serif;z-index:2100;pointer-events:none}
.siswanto-ajax-loading[hidden]{display:none}
.siswanto-reading-progress{position:fixed;inset:0 0 auto;height:16px;background:rgba(51,51,51,.35);transform:scaleX(0);transform-origin:left center;pointer-events:none;z-index:2000}

/* Transparent classic portrait: retain the full cutout without cropping. */
.theme-siswanto .siswanto-profile{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:transparent}
@media(max-width:782px){.theme-siswanto .siswanto-profile{height:auto;max-height:360px;object-fit:contain}}

/* Match the original Resume cards: zoom-in, 600ms, once per navigation. */
.theme-siswanto .siswanto-home-reveal{opacity:1;transform:scale(1);transition:opacity 600ms ease-in-out var(--reveal-delay,100ms),transform 600ms ease-in-out var(--reveal-delay,100ms)}
.theme-siswanto .siswanto-home-reveal.siswanto-reveal-pending{opacity:0;transform:scale(.6);transition:none}
@media(prefers-reduced-motion:reduce){.theme-siswanto .siswanto-home-reveal{transition:none;transform:none;opacity:1}}

.theme-siswanto .siswanto-qris-preview{margin:24px 0 0;padding:12px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;text-align:center}
.theme-siswanto .siswanto-qris-preview img{display:block;width:100%;max-width:240px;height:auto;margin:0 auto}
/* QRIS follows the collapsed navigation on small screens. */
@media(max-width:782px){.theme-siswanto .siswanto-qris-preview{display:none}.theme-siswanto.siswanto-menu-open .siswanto-qris-preview{display:block}}