.elementor-377 .elementor-element.elementor-element-e5afc48{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-377 .elementor-element.elementor-element-8adc93c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--overlay-opacity:0.76;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-377 .elementor-element.elementor-element-8adc93c:not(.elementor-motion-effects-element-type-background), .elementor-377 .elementor-element.elementor-element-8adc93c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#C2DFC4;background-image:url("https://ysab.org/wp-content/uploads/2026/01/IMG2-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-377 .elementor-element.elementor-element-8adc93c::before, .elementor-377 .elementor-element.elementor-element-8adc93c > .elementor-background-video-container::before, .elementor-377 .elementor-element.elementor-element-8adc93c > .e-con-inner > .elementor-background-video-container::before, .elementor-377 .elementor-element.elementor-element-8adc93c > .elementor-background-slideshow::before, .elementor-377 .elementor-element.elementor-element-8adc93c > .e-con-inner > .elementor-background-slideshow::before, .elementor-377 .elementor-element.elementor-element-8adc93c > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(90deg, #0E509C 40%, #62D1DC 100%);}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-377 .elementor-element.elementor-element-46b2569{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-377 .elementor-element.elementor-element-46b2569 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:45px;font-weight:700;color:#FFFFFF;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-377 .elementor-element.elementor-element-a21e322{--divider-border-style:solid;--divider-color:#FDD835;--divider-border-width:7px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 50px) 0px;padding:0px 0px 0px 0px;}.elementor-377 .elementor-element.elementor-element-a21e322 .elementor-divider-separator{width:20%;margin:0 auto;margin-center:0;}.elementor-377 .elementor-element.elementor-element-a21e322 .elementor-divider{text-align:center;padding-block-start:7px;padding-block-end:7px;}.elementor-377 .elementor-element.elementor-element-9fa0a09{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}@media(max-width:1024px){.elementor-377 .elementor-element.elementor-element-46b2569 .elementor-heading-title{font-size:39px;}}@media(max-width:767px){.elementor-377 .elementor-element.elementor-element-46b2569 .elementor-heading-title{font-size:30px;}}/* Start custom CSS for theme-post-content, class: .elementor-element-ab9d941 *//*
 * MODERN GALLERY TRANSFORMATION
 * Created by Jackson for https://ysab.org/galeri-page/
 * Target: Menghapus style default Gutenberg & menerapkan modern grid.
 */

/* 1. Reset & Membuat Grid Utama */
.elementor-377 .elementor-element.elementor-element-ab9d941 .elementor-widget-theme-post-content .wp-block-gallery {
    display: grid !important;
    /* Membuat grid responsif: gambar akan mengisi ruang minimum 280px */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important; /* Spacing antar foto yang pas */
    padding: 1rem 0 !important;
    margin: 0 !important;
}

/* Menghapus style bawaan Gutenberg yang kaku */
.elementor-377 .elementor-element.elementor-element-ab9d941 .elementor-widget-theme-post-content .wp-block-gallery::before,
.elementor-377 .elementor-element.elementor-element-ab9d941 .elementor-widget-theme-post-content .wp-block-gallery .blocks-gallery-item {
    display: none !important;
}

/* 2. Styling Container Gambar & Link */
.elementor-377 .elementor-element.elementor-element-ab9d941 .elementor-widget-theme-post-content .wp-block-gallery figure {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 75% !important; /* Membuat Rasio Aspek 4:3 yang seragam */
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important; /* Sudut tumpul yang modern */
    background: #f0f0f0; /* Fallback warna background saat loading */
    margin: 0 !important;
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 3. Styling Gambar di Dalam Container */
.elementor-377 .elementor-element.elementor-element-ab9d941 .elementor-widget-theme-post-content .wp-block-gallery img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Gambar terpotong rapi, tidak gepeng */
    border-radius: 0 !important; /* Reset border radius bawaan img */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    cursor: pointer;
}

/* 4. Efek Hover Mikro (Polish Profesional) */
/* Saat card di-hover: angkat sedikit, tambah bayangan halus */
.elementor-377 .elementor-element.elementor-element-ab9d941 .elementor-widget-theme-post-content .wp-block-gallery figure:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
}

/* Saat card di-hover: zoom gambar di dalamnya sedikit */
.elementor-377 .elementor-element.elementor-element-ab9d941 .elementor-widget-theme-post-content .wp-block-gallery figure:hover img {
    transform: scale(1.08) !important;
}

/* 5. Styling Caption (Opsional - Jika ada) */
.elementor-377 .elementor-element.elementor-element-ab9d941 .elementor-widget-theme-post-content .wp-block-gallery figcaption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important;
    color: #fff !important;
    padding: 1.5rem 1rem 1rem !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    opacity: 0 !important; /* Sembunyikan secara default */
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

/* Tampilkan caption saat container di-hover */
.elementor-377 .elementor-element.elementor-element-ab9d941 .elementor-widget-theme-post-content .wp-block-gallery figure:hover figcaption {
    opacity: 1 !important;
}/* End custom CSS */