/* google font monstserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img, i, a, h2{display: block;}

:root{
    --COLOR1: #1f9398;
    --STURCTURECOLOR: #39807e;
    --FONTCOLOR: #048080;
    --BGCOLOR: #FFFFFF;
    --LINECOLOR: #b8c3c3;
    --MONTSERRAT: 'Montserrat', sans-serif;
}

body, html {
    width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
    font-family: var(--MONTSERRAT);
}

/* * NAVBAR STYLE */
nav {
    width: 100%;
    height: clamp(3.5rem, calc(20vh - 10vh), 4rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: min(2rem, 4vw);
    background-color: var(--BGCOLOR);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999999;
    box-shadow: 0 .4vw 1vw rgba(0, 0, 0, 0.2);
}
/* gambar logo kelas */
.logo-container {
    width: min(10%, 3rem);
    display: grid;
    place-items: center;
}
#logo-kelas {
    width: min(98%, 4rem);
}
/* nav title */
.title-container a {
    color: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
#nav-title {
    color: var(--FONTCOLOR);
    font-size: clamp(1rem, 5vw, 1.4rem);
}
/* nav burger icon */
.nav-icon-container {
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 999;
    border-radius: min(1vw, .4rem);
    padding: .2rem;
    transition: all .2s ease;
    -webkit-tap-highlight-color: transparent;
}
/* memberian efek hover kepada nav burger icon dan tidak akan berefek he touch device */
@media (hover: hover) {
    .nav-icon-container:hover {
        background-color: var(--LINECOLOR);
    }
    .nav-icon-container:hover #nav-icon {
        color: white;
    }
}
#nav-icon {
    font-size: clamp(1rem, 6vw, 2rem);
    vertical-align: middle;
    line-height: 0;
    color: var(--LINECOLOR);
    z-index: 999999;
    transition: all .2s ease;
}
/* nav menu design */
.nav-menu-container {
    position: absolute;
    width: min(46%, 14rem);
    height: 100svh;
    bottom: -100svh;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px .4vw 1vw -.6vw rgba(0,0,0,0.45) inset;
    z-index: 999999999;
    transition: all .8s ease;
}
.nav-menu-container li {
    width: 100%;
    list-style: none;
    display: flex;
    justify-self: center;
    flex-flow: column;
    padding-top: 3vh;
    gap: 3vh;
    font-size: clamp(.6rem, 3.5vw, 1.2rem);
}
.nav-menu-container li ul a {
    display: flex;
    width: 100%;
    color: black;
    text-decoration: none;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    transition: all .12s ease-in-out;
    -webkit-transition: all .12s ease-in-out;
    -moz-transition: all .12s ease-in-out;
    -ms-transition: all .12s ease-in-out;
    -o-transition: all .12s ease-in-out;
}
.nav-menu-container li ul a i {
    flex: 1;
    text-align: center;
}
.nav-menu-container li ul a span {
    flex: 2;
}
.nondisplay { /* untuk class ketika navbar mobile tidak muncul */
    right: -300px;
}
.display { /* untuk class ketika navbar mobile muncul */
    right: 0;
}
/* membuat warna body ketika nav muncul menjadi sedikit lebih gelap */
.background-darker {
    position: absolute;
    width: 100%;
    height: 100svh;
    bottom: -100svh;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -99999;
    transition: visibility 1s ease, opacity 1s ease;
    opacity: 0;
    pointer-events: none;
}


/* *HEADER ATAU BAGIAN HOME PAGE PALING ATAS */
header {
    height: 92svh;
    scroll-margin-top: 300px;
    z-index: 999;
}
/* --bagian foto kelas berisi logo besar dan title besar-- */
#main-img-container {
    background-image: url(../assets/images/Foto\ Backgroud.webp);
    width: 100%;
    height: 20svh;
    background-size: cover;
    background-position: center 48%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    position: relative;
}
/* gradient property untuk memberi efek gradient pada backgrond */
#gradient {
    position: absolute;
    width: 100%;
    height: 16rem;
    bottom: -5px;
}
/* logo besar */
.logo-besar-container {
    width: min(22%, 6rem);
    z-index: 999;
}
#logo-besar {
    width: 100%;
    filter: drop-shadow(0 0 1.6vw rgba(0, 0, 0, 0.8));
}
/* title besar */
.title-besar-container {
    width: min-content;
    color: #ffffff;
    z-index: 999;
}
#title-besar {
    text-align: center;
    text-shadow: 0 0 min(1.6vw, 8px) rgba(0, 0, 0, 1);
}
/* --selection menu-- */
#desktop-selection-menu {display: none;}
#selection-menu {
    width: 100%;
    height: 72svh;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: min(48%, 1.4rem);
    position: absolute;
}
/* box selection design */
#selection-menu a {
    width: min(75%, 24rem);
    height: min(18svh, 7rem);
    text-decoration: none;
    cursor: pointer;
    border-radius: .6rem;
    background-color: var(--COLOR1);
    overflow: hidden;
    box-shadow: .7vw .7vw 1vw rgba(0, 0, 0, 0.2);
    transition: all .6s ease;
    position: relative;
}
.box-selection {
    width: 100%;
    height: 100%;
    display: flex;
    padding-inline: min(4vw, 2rem);
    position: relative;
}
/* box selection icon design */
.icon-box-selection {
    height: 100%;
    flex: 1;
    display: grid;
    place-items: center;
}
.icon-box-selection i {
    color: #ffffff;
    font-size: clamp(1rem, 12vw, 3rem);
}
/* box selection detail text design */
.detail-box-selection {
    height: 100%;
    flex: 2;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: min(1.4vw, .25rem);
}
.detail-big {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(1rem, 5vw, 1.6rem);
}
.detail-small {
    color: #ffffff;
    font-size: clamp(.2rem, 3vw, .94rem);
    text-align: center;
    width: 80%;
}
/* mengambahkan fitur pada device phone ketike box stories di ketike, box tersebut akan melebar dan memperlihatkan content di dalamnya  */
#stories {
    display: grid;
    place-items: center;
    scrollbar-gutter: stable;
}
.small-box-stories {
    width: 88%;
    position: absolute;
    display: flex;
    align-items: center;
    transition: all .4s ease;
}
/* design untuk stories big box */
#selection-menu .big-stories-container {
    width: 90% !important;
    height: 30svh !important;
    transition: all .3s ease;
    transition-delay: .4s !important;
    padding-block: min(6vw, 1.8rem);
    cursor: default;
}
@media screen and (min-width: 516px) {
    #selection-menu .big-stories-container {
        height: 50svh !important;
    }
}

#stories::-webkit-scrollbar { /* design untuk scroll */
    width: 1em;
    background: var(--FONTCOLOR);
}
#stories::-webkit-scrollbar-track { /* design untuk scroll */
    background: var(--FONTCOLOR);
    margin-block: -6vw;
    border-radius: min(6vw, 2rem);
}
#stories::-webkit-scrollbar-thumb { /* design untuk scroll */
    background-color: var(--LINECOLOR);
    border-radius: min(6vw, 2rem);
    border: .36em solid var(--FONTCOLOR);
}
.big-box-stories {
    visibility: hidden;
    display: flex;
    flex-flow: column;
    gap: min(4vw, 2rem);
    width: 100%;
    opacity: 0;
    transition: all .6s ease;
    transition-delay: .3s;
}
#big-box-stories-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: .45rem;
    box-shadow: .7vw .7vw 1vw rgba(0, 0, 0, 0.2);
}
.big-box-stories-text {
    color: #ffffff;
    text-align: justify;
    word-spacing: normal;
    line-height: 1.4rem;
    hyphens: auto;
    font-size: clamp(.8rem, 3.4vw, 1rem);
}


/* *HALAMAN UTAMA BERISIKAN STRUCTURE DAN GALLERY */
main {
    margin: 0 7vw;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.main-container {
    width: 100%;
}

.pemisah {  /* pemisah antara home page dengan main page */
    width: 100%;
    height: .1rem;
    background-color: var(--LINECOLOR);
    margin: 0 auto;
    border: none;
    border-radius: 1rem;
}

/* *Desktop Stories */
#desktop-stories-image {
    width: min(100vw, 700px);
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: .45rem;
    box-shadow: .3vw .3vw 1.8vw rgba(0, 0, 0, 0.3);
}
.desktop-stories-text {
    width: min(100%, 850px);
    text-align: justify;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    -ms-hyphens: auto !important;
}

/* *Structure */
.main-container-section-title {  /* Judul bagian Structure Kelas */
    text-align: center;
}

#structure-container { /* Container miliki struktur kelas*/
    display: grid;
    gap: 1rem;
}

#structure-title {
    margin-bottom: 1rem;
}

/* Flip Card Start Line Code */
.profile-box-container { /*untuk mengatur border radius dari semua profile pada structure dan untuk mengatur flip card*/
    position: relative;
    /* overflow: hidden; */
    /* border-radius: .4rem;
    -webkit-border-radius: .4rem;
    -moz-border-radius: .4rem;
    -ms-border-radius: .4rem;
    -o-border-radius: .4rem; */
    /* box-shadow:  1.95px 1.95px 5px rgba(0, 0, 0, 0.45); */
    perspective: 1000px;
}
.inner-profile-box-container {
    position: relative;
    width: 100%;
    height: 100%;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -ms-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transform-style: preserve-3d;
}
.profile-box-container-clicked {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}
.frontSide, .backSide {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: .4rem;
    -webkit-border-radius: .4rem;
    -moz-border-radius: .4rem;
    -ms-border-radius: .4rem;
    -o-border-radius: .4rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow:  1.95px 1.95px 5px rgba(0, 0, 0, 0.45);
}
.backSide {
    width: 100%;
    position: absolute;
    top: 0;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    background-color: var(--COLOR1);
    color: white;
    padding: min(3vw, 1rem);
}
/* design for back side */
.backSide .info-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .6vh;
    position: relative;
}
.backSide .info-detail-container span::after {
    content: '';
    display: block;
    background-color: white;
    width: 100%;
    height: .1vh;
    margin-bottom: .1rem;
}
.backSide a {
    width: max-content;
    color: white;
    text-decoration: none;
    display: flex;
    gap: .2rem;
}
.backSide .info-detail-title {
    font-weight: 700;
    position: relative;
}
/* Flip Card End Line Code */

/* Style For Pengurus Kelas */
.main-container #pengurus-kelas { 
    display: grid;
    width: min(80%, 340px);
    margin: 0 auto;
    gap: min(.6rem, 2vw);
    grid-template-areas: 'wali wali'
                        'ketua wakil'
                        'seker1 seker2'
                        'ben1 ben2';
}
#pengurus-kelas .profile-box-img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center bottom;
    scale: 1.16;
}
#wali {
    /* width: 85%; */
    width: 100%;
    aspect-ratio: 3/4;
    grid-area: wali; 
    z-index: 9;
}
#wali .profile-box-img {
    scale: 1;
    object-position: center top;
}
#wali .inner-profile-box-container .backSide {
    /* font-size: clamp(1rem, 10svw, 2rem); */
    font-size: clamp(.6rem, 4svw, 1.2rem);
}
#ketua {
    /* width: 120%; */
    grid-area: ketua;
}
#wakil {
    /* width: 120%; */
    grid-area: wakil;
}
#seker1 {
    grid-area: seker1;
}
#seker2 {
    grid-area: seker2;
}
#ben1 {
    grid-area: ben1;
}
#ben2 {
    grid-area: ben2;
}
#pengurus-kelas .profile-box-container .backSide {
    font-size: clamp(.4rem, 3svw, .9rem);
}

/* Style For Anggota Kelas */
#anggota-kelas {
    width: min(100%, 900px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: min(.6rem, 2vw);
}
#anggota-kelas figure {
    width: clamp(4rem, 26vw, 10.5rem);
}
#anggota-kelas .profile-box-img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center bottom;
    scale: 1.16;
}
#anggota-kelas .profile-box-container .backSide {
    font-size: clamp(.2rem, 2.28svw, .9rem);
}

/* *Gallery */
#gallery-title {
    margin-bottom: 2rem;
}

.gallery {
    width: 100%;
}
.gallery .image {
    width: 100%;
    border-radius: .4rem;
    -webkit-border-radius: .4rem;
    -moz-border-radius: .4rem;
    -ms-border-radius: .4rem;
    -o-border-radius: .4rem;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 3px 0px;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    display: none;
    height: fit-content;
}
.gallery .image:hover {
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
}
.gallery .image img {
    width: 100%;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}
.gallery .image:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
/* Tombol Load More */
#load-more {
    gap: .4rem;
    margin-top: 2rem;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
}
@media screen and (min-width: 768px) {
    #load-more:hover {
        color: var(--LINECOLOR);
    }
}

/* *FOOTER / BAGIAN SOCIAL MEDIA DAN LOKASI SEKOLAH */
footer {
    margin: min(6svh, calc(6rem - 2svh)) 7vw;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-us-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* design untuk sosmed */
.sosmed-container{
    display: flex;
    flex-direction: column;
    gap: 2svh;
}
.sosmed-icon-container {
    display: flex;
    gap: min(4vw, 1rem);
}
.sosmed-icon-container a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(12vw, 3.4rem);
    aspect-ratio: 1/1;
    color: white;
    text-decoration: none;
    font-size: clamp(.8rem, 5vw, 1.4rem);
    background-color: var(--COLOR1);
    padding: .6rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

/* design untuk lokasi sekolah */
.lokasi-sekolah-container {
    display: grid;
    gap: 2svh;
}
.lokasi-sekolah-container p {
    font-size: clamp(.6rem, 3vw, 1rem);
}


/* design copyright footer*/
.copyright-container {
    width: 100%;
    background-color: var(--COLOR1);
}
#copyright-title {
    color: white;
    font-weight: 500;
    text-align: center;
}


/* *MEDIA QUERY SCREEN WIDTH >= 768px */
@media screen and (min-width: 768px) {
    /* *NAVBAR STYLE */
    nav {
        justify-content: start;
        align-items: center;
    }
    #nav-icon, .nav-icon-container {
        display: none;
    }
    .nav-menu-container {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        bottom: 0;
        background-color: transparent;
        box-shadow: none;
    }
    .nav-menu-container li {
        width: 100%;
        justify-content: end;
        align-items: center;
        padding: 0;
        flex-direction: row;
        height: 100%;
        gap: 2.4vw;
    }
    .nav-menu-container li ul a:hover {
        color: var(--LINECOLOR);
    }
    .nav-menu-container li ul a i {
        display: none;
    }

    /* *HEADER ATAU BAGIAN HOME */
    #main-img-container {
        height: 100%;
        flex-direction: column;
        /* background position relative with tailwind */
    }
    #gradient {
        height: 25rem;
    }

    .logo-besar-container {
        width: min(22%, 12rem);
    }
     /* title besar responsive with tailwind */

    #selection-menu {
        display: none;
    }

    #desktop-selection-menu {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 6rem;
    }
    #desktop-selection-menu a {
        width: min(30%, 18rem);
        height: min(19svh, 8rem);
        text-decoration: none;
        cursor: pointer;
        border-radius: .6rem;
        -webkit-border-radius: .6rem;
        -moz-border-radius: .6rem;
        -ms-border-radius: .6rem;
        -o-border-radius: .6rem;
        background-color: var(--COLOR1);
        overflow: hidden;
        box-shadow: .7vw .7vw 1vw rgba(0, 0, 0, 0.2);
    }
    .box-selection {
        padding: 0;
    }
    .icon-box-selection {
        flex: 1.1;
    }
    .detail-box-selection {
        flex: 2.4;
    }

    .backSide .info-container {
        gap: .8rem;
    }
}