/* 
	Theme Name: ALAMTRI
	Version: 1.0 / 2025
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

body { position: relative; font-family: "Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 18px; line-height: 27px; }

/* custom scroll bar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #EEE; }
::-webkit-scrollbar-thumb { background: #043952; }

a { text-decoration: none; }
h1 { font-weight: 800; margin: 0 0 .5em 0; }

.accent-top { position: absolute; z-index: -1; top: 0; right: 0; width: 40%; transform: scaleY(-1); }
.accent-top img { width: 100%; height: auto; }
.accent-bottom { position: fixed; z-index: 2; bottom: 0; left: 0; width: 25%; }
.accent-bottom img { width: 100%; height: auto; }
.accent-color { position: absolute; z-index: 2; bottom: 0; right: 0; width: 33%; }
.accent-color img { width: 100%; height: 100%; }

.header { position: absolute; width: 100%; padding: 1em 0; text-align: center; background: #043952; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
.header img { width: 200px; height: auto; }

.display { position: relative; background: #043952; color: #FFF; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
.display .text { position: relative; padding: 10em 3em; text-shadow: 0 0 2px rgba(0,0,0,0.6); }
.display .text p { margin:  0 0 1.5em 0;}
.display .image { position: relative; z-index: 1; height: 100%; }
.display .image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

.content { position: relative; z-index: 3; padding: 7em 0 5em 0; overflow: hidden; }
.content h1 { text-align: center; font-size: 2em; margin: 0; font-weight: 800; text-transform: uppercase; color: #043952; }
.content h2 { text-align: center; font-size: 1.15em; margin: 0 0 .5em 0; font-weight: 800; color: #043952; }
.content h3 {  font-size: 1.5em; margin: 0 0 .5em 0; font-weight: 800; color: #043952; }
.content .item { position: relative; overflow: hidden; }
.content a { color: #043952; }

.pass-form { padding-top: 10em; }

a.btn-custom1 { background: #043952; color: #FFF; }
a:hover.btn-custom1 { background: #043952; color: #FFF; }
a.btn-custom2 { background: #EA7F37; color: #FFF; }
a:hover.btn-custom2 { background: #EA7F37; color: #FFF; }

/* 1 POST */
.post1 .buku-container { width: 100%; height: 450px; margin: 1em 0; padding: 0; display: flex; align-items: center; justify-content: center; perspective: 800px; }
.post1 .buku { transform: rotateY(-30deg); position: relative; transform-style: preserve-3d; width: 300px; height: 420px; transition: transform 1s ease; animation: 1s ease 0s 1 initAnimation; }
.post1 .buku:hover { transform: rotate(0deg); }
.post1 .buku > :first-child { position: absolute; background: #043952; width: 300px; height: 420px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
.post1 .buku::before { content: ' '; background: #fff; height: calc(420px - 2 * 3px); width: 50px; top: 3px; position: absolute; transform: translateX(calc(300px - 50px / 2 - 3px)) rotateY(90deg) translateX(calc(50px / 2)); }
.post1 .buku::after { content: ' '; position: absolute; left: 0; width: 300px; height: 420px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background: #043952; transform: translateZ(-50px); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }

/* 2 POST*/
.post2 .buku-container { width: 100%; height: 400px; margin: 1em 0; padding: 0; display: flex; align-items: center; justify-content: center; perspective: 800px; }
.post2 .buku { transform: rotateY(-30deg); position: relative; transform-style: preserve-3d; width: 250px; height: 350px; transition: transform 1s ease; animation: 1s ease 0s 1 initAnimation; }
.post2 .buku:hover { transform: rotate(0deg); }
.post2 .buku > :first-child { position: absolute; background: #043952; width: 250px; height: 350px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
.post2 .buku::before { content: ' '; background: #fff; height: calc(350px - 2 * 3px); width: 50px; top: 3px; position: absolute; transform: translateX(calc(250px - 50px / 2 - 3px)) rotateY(90deg) translateX(calc(50px / 2)); }
.post2 .buku::after { content: ' '; position: absolute; left: 0; width: 250px; height: 350px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background: #043952; transform: translateZ(-50px); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }

/* >2 POST*/
.post3 .buku-container { width: 100%; height: 350px; margin: 1em 0; padding: 0; display: flex; align-items: center; justify-content: center; perspective: 800px; }
.post3 .buku { transform: rotateY(-30deg); position: relative; transform-style: preserve-3d; width: 200px; height: 280px; transition: transform 1s ease; animation: 1s ease 0s 1 initAnimation; }
.post3 .buku:hover { transform: rotate(0deg); }
.post3 .buku > :first-child { position: absolute; background: #043952; width: 200px; height: 280px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
.post3 .buku::before { content: ' '; background: #fff; height: calc(280px - 2 * 3px); width: 50px; top: 3px; position: absolute; transform: translateX(calc(200px - 50px / 2 - 3px)) rotateY(90deg) translateX(calc(50px / 2)); }
.post3 .buku::after { content: ' '; position: absolute; left: 0; width: 200px; height: 280px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background: #043952; transform: translateZ(-50px); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }

@keyframes initAnimation {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-30deg); }
    }

.bottom { position: absolute; width: 100%; left: 0; bottom: 0; z-index: 3; color: #FFF; text-align: left; padding: 2em; font-size: .8em; }

.modal { background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); }
.modal-dialog { height: 90vh; }
.modal-content { border-radius: 0; background: none; border: none; text-align: center; }
.modal-body { padding: 0; }
.modal-img {}
.modal-img img { width: 100%; height: auto; transition: ease all .5s; }
.modal-img span { position: absolute; z-index: 10; width: 80px; height: 80px; line-height: 80px; border-radius: 50%; text-align: center; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(255, 255, 255, 1); font-size: 1.5em; visibility: hidden; opacity: 0; transition: ease all .5s; }
.modal-img:hover>span { visibility: visible; opacity: 1; }
.modal-img:hover img { /*filter: brightness(.25);*/ }

.sdm_post_item{
    width: 90% !important;
    max-width: 700px !important;
    text-align: center !important;
    padding: 5em 0 !important;
    margin: 0 auto !important;
}
.sdm_post_item_top{
    display: block !important;
}
.sdm_post_item_top_left{
    width: 100% !important;
    margin-right: 0 !important;
}
.sdm_post_item_top_right{
    width: 100% !important;
}

@media (min-aspect-ratio: 16/9) {

}

@media (max-aspect-ratio: 16/9) {

}

@media (max-width: 767px) {
    .accent-top { width: 70%; }
    .accent-color { width: 80%; opacity: .5; }
    .header { position: relative; }
    .header img { width: 150px; }
    .display .image { display: none; }
    .display .text { padding: 3em; z-index: 10; }
    .content { padding: 3em 0 10em 0; height: auto; }
    .content h1 { font-size: 1.5em; }

    /* 1 POST */
    .post1 .buku { transform: rotateY(0deg); }
    @keyframes initAnimation {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(0); }
    }

    .bottom { text-align: center; padding: 1em; background: #043952; }
    .bottom span { display: block; }
    .accent-bottom { display: none; position: relative; width: 100%; }
}