*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb
}
.container-sinta {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    color: #444444;
    background-color: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    gap: 1rem;
}
.profile-sinta {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    gap: 1rem;
}
.profile-sinta-wrap {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1.2rem;
}
.profile-sinta-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(255 255 255 / 10%);
    width: 100px;
    border: 2px solid #1b8415;
    border-radius: 50%;
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 6px rgba(32, 33, 36, .28);
    overflow: hidden;
}
.profile-sinta-image img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.profile-sint-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - (1.2rem + 100px));
    gap: .25rem;
}
.profile-sint-content h3 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
}
.profile-sint-content .profile-info{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5rem;
    color: #333;
    fill: #333;
}
.profile-sint-content .profile-info span {
    font-size: .75rem;
    font-weight: 500;
}
.profile-sint-content .profile-info svg {
    width: 1.2rem;
    height: 1.2rem;
}
.sinta-subject {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: .75rem;
}
.sinta-subject {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: .75rem;
}
.sinta-subject a {
    position: relative;
    background-color: #1b8415 !important;
    color: #ffffff;
    font-size: .85rem;
    padding: .25rem .5rem;
    text-decoration: none;
    border-radius: .75rem;
}
.sinta-subject a:hover{
    background-color: #176f12 !important;
    color: #ffffff;
}
.content-sinta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    gap: 1rem;
}
.content-sinta-button {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
    margin: 1rem 0;
    gap: .75rem;
}
.content-sinta-button .btn-sinta {
    position: relative;
    background-color: #eee;
    color: #444444;
    padding: .5rem 1rem;
    font-weight: 500;
    border-radius: .5rem;
    cursor: pointer;
}
.content-sinta-button .btn-sinta:hover {
    background-color: #ddd;
}
.content-sinta-button .btn-sinta.active {
    background-color: #1b8415;
    color: #ffffff;
}
.content-sinta-list {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.content-sinta-item {
    width: 0;
    opacity: 0;
    transition: width 0.5s ease-out, opacity 0.5s ease-out;
    position: absolute;
    display: flex;
    flex-direction: column;
    white-space: wrap;
    overflow: hidden;
    padding: 0;
    gap: 1rem;
}
.content-sinta-item.active {
    width: 100%;
    opacity: 1;
    position: relative;
}
.content-sinta-info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 1.2rem;
    gap: .5rem;
    border: 2px solid #eee;
    border-radius: .75rem;
}
.content-sinta-info h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}
.content-sinta-info a {
    color: #444;
    text-decoration: none;
}
.content-sinta-info-detail {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
}
.content-sinta-info-detail p {
    margin: 0
}
.box-menu{
    position:relative;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    align-items:center;
    justify-content:center;
    background-color:#fff;
    color:#444;
    padding:1rem;
    margin:1.2rem 0;border-radius:.75rem;
    box-shadow:0 1px 11px rgb(32 33 36 / .28);
    gap:1rem
}
.box-menu .menu-wrap{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background-color:#fff;
    padding:0;width:100%;
    gap:1rem
}
.box-menu .menu-wrap p{
    font-size:24px;
    font-weight:600;
    margin:0;
    color:#000000;
}
.box-menu .menu-wrap span{
    font-size:.75rem;
    font-weight:500
}
.more-button{
    position:relative;
    display:flex;
    flex-direction:row;
    background-color:#ddd;
    color:#444;
    max-width:180px;
    align-items:center;
    justify-content:center;
    padding:.25rem 1rem;
    margin:1.2rem auto;
    border-radius:1rem
}
@media screen and (max-width:460px)
{
    .profile-sinta-wrap{flex-direction:column}
    .profile-sint-content{width:100%;align-items:center;margin-bottom:1.2rem}
    .sinta-subject{justify-content:center}
}