/*----------------------------------------------------------------
|                    MENU TAB BAR                                |
-----------------------------------------------------------------*/
.sidebarTabs {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: center;
    margin: 4px 0;
    width: 80px; 
    height: 80vh;
    gap: 0.2vh;
}
/* Tab Saat DEFAULT */
.tabLink {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    width: 80px;
    min-height: 10vh;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    background-color: #222222;
    box-shadow: -3px 6px 12px rgba(0,0,0,1);    
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    transform: translateX(-5px);
    padding-right: 3px;
    padding-top: clamp(3px, 1.2vh, 15px);
    padding-bottom: clamp(3px, 1.2vh, 15px);
    z-index: 4;
}
/* Tab saat SELECTED */
.tabLink.active {
    background-color: #550303;
    transform: translateX(-13px); 
    box-shadow: 2px 3px 5px rgba(0,0,0,0.5);
    z-index: 3;
}
.tabLink.active a {
    font-weight: 600;
}
.tabLink:hover:not(.active) {
    transform: translateX(0);
    background-color: #8f0b0b;
}
.tabLink a {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    margin-right: 5px;
    width: 100%;
    height: 100%;
    color: #ccc;
    text-decoration: none;
    font-size: clamp(12px, 1.5vh, 20px);
    font-weight: 500;
}
/* Default: tampil teks panjang */
.tabLink a::after {
  content: attr(data-short);
  display: none;
}
/* Kalau layar sempit atau zoom besar TEKS PANJANG GANTI JADI PENDEK*/
@media (max-width: 1000px) {
  .tabLink a {
    font-size: 0; 
  }
  .tabLink a::after {
    display: block;
    font-size: clamp(12px, 1.5vh, 20px);
    color: #ccc;
  }
}

/* SUB MENU */
.innerPageWrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    position: relative;
}
.innerContentArea {
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    border-radius: 25px 0 0 25px;    
    overflow: hidden;
    z-index: 10; 
}
.innerSidebarMobile.mobile-version {
    display: none;
}

.innerSidebarCoffee {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 45px; 
    height: 30vh;
    gap: 0.2vh;
    z-index: 5;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.3s ease,
                transform 0.3s ease,
                visibility 0.3s;
}
.innerSidebarCoffee.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-5px);
    transition: opacity 0.4s ease,
                transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                visibility 0.4s;    
}
.subTabLink {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    background-color: #444;
    box-shadow: 0 5px 10px rgba(0,0,0,0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    transform: translateX(40px);
    padding-right: 5px;
    padding-top: clamp(2px, 1vh, 15px);
    padding-bottom: clamp(2px, 1vh, 15px);
}
.subTabLink a {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    color: #ccc;
    text-decoration: none;
    font-size: clamp(10px, 1.5vh, 20px);
    line-height: 0.9;
    font-weight: 500;
}
.subTabLink.active-sub a {
    color: white;
}
.subTabLink.active-sub {
    background-color: #044e14;
    transform: translateX(37px); 
    box-shadow: 0 3px 5px rgba(0,0,0,1);
}
.subTabLink:hover:not(.active-sub) {
    transform: translateX(45px);
    background-color: #06741e;
    z-index: 6;
}