/* ===================================================================
   SIDEBAR LABELS - Hexagon Style with Arrow (LEFT SIDEBAR)
   =================================================================== */

.sidebar-label-hex {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
    height: 50px;
}

/* Hexagon container on left */
.sidebar-label-hex .label-hex {
    width: 60px;
    height: 60px;
    background: #c0392b;
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.sidebar-label-hex .label-number {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

/* Arrow shape on right */
.sidebar-label-hex .label-arrow {
    background: #e74c3c;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 20px 8px 25px;
    margin-left: -15px;
    position: relative;
    z-index: 1;
    flex-grow: 1;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    letter-spacing: 0.5px;
}

/* Different colors for left sidebar */
.sidebar-label-populer .label-hex {
    background: #7b2d8e;
}

.sidebar-label-populer .label-arrow {
    background: linear-gradient(90deg, #9b59b6 0%, #8e44ad 100%);
}

.sidebar-label-redaksi .label-hex {
    background: #1e7e34;
}

.sidebar-label-redaksi .label-arrow {
    background: linear-gradient(90deg, #27ae60 0%, #229954 100%);
}

.sidebar-label-biro .label-hex {
    background: #1e5a8e;
}

.sidebar-label-biro .label-arrow {
    background: linear-gradient(90deg, #3498db 0%, #2980b9 100%);
}

/* New Green Hexagon Style for Berita Daerah */
.sidebar-label-daerah-hex .label-hex {
    background: #4caf50;
}

.sidebar-label-daerah-hex .label-arrow {
    background: linear-gradient(90deg, #66bb6a 0%, #4caf50 100%);
}

.sidebar-label-trending .label-hex {
    background: #d35400;
}

.sidebar-label-trending .label-arrow {
    background: linear-gradient(90deg, #e67e22 0%, #d35400 100%);
}

.sidebar-label-sosial .label-hex {
    background: #117a8b;
}

.sidebar-label-sosial .label-arrow {
    background: linear-gradient(90deg, #17a2b8 0%, #138496 100%);
}

/* ===================================================================
   RIGHT SIDEBAR LABELS - Numbered Box Style
   =================================================================== */

.sidebar-label-right {
    display: flex;
    align-items: stretch;
    position: relative;
    margin-bottom: 20px;
    height: 50px;
}

/* Numbered box on left */
.sidebar-label-right .label-number-box {
    width: 70px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #fdc830 100%);
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

/* Arrow connector */
.sidebar-label-right .label-connector {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 20px solid #fdc830;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Long gradient text area */
.sidebar-label-right .label-gradient-text {
    flex-grow: 1;
    background: linear-gradient(90deg, #fdc830 0%, #f7931e 50%, #ff6b35 100%);
    border-radius: 0 25px 25px 0;
    padding: 0 25px 0 10px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

/* Different colors for right sidebar */

/* Berita Utama - Orange */
.sidebar-label-utama-right .label-number-box {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #fdc830 100%);
}

.sidebar-label-utama-right .label-connector {
    border-left-color: #fdc830;
}

.sidebar-label-utama-right .label-gradient-text {
    background: linear-gradient(90deg, #fdc830 0%, #f7931e 50%, #ff6b35 100%);
}

/* Galeri Foto - Pink */
.sidebar-label-foto-right .label-number-box {
    background: linear-gradient(135deg, #e91e63 0%, #f06292 50%, #f8bbd0 100%);
}

.sidebar-label-foto-right .label-connector {
    border-left-color: #f8bbd0;
}

.sidebar-label-foto-right .label-gradient-text {
    background: linear-gradient(90deg, #f8bbd0 0%, #f06292 50%, #e91e63 100%);
}

/* Berita Daerah - Green */
.sidebar-label-daerah-right .label-number-box {
    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 50%, #a5d6a7 100%);
}

.sidebar-label-daerah-right .label-connector {
    border-left-color: #a5d6a7;
}

.sidebar-label-daerah-right .label-gradient-text {
    background: linear-gradient(90deg, #a5d6a7 0%, #66bb6a 50%, #4caf50 100%);
}

/* Galeri Video - Purple */
.sidebar-label-video-right .label-number-box {
    background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 50%, #e1bee7 100%);
}

.sidebar-label-video-right .label-connector {
    border-left-color: #e1bee7;
}

.sidebar-label-video-right .label-gradient-text {
    background: linear-gradient(90deg, #e1bee7 0%, #ba68c8 50%, #9c27b0 100%);
}

/* Polling - Blue */
.sidebar-label-polling-right .label-number-box {
    background: linear-gradient(135deg, #2196f3 0%, #64b5f6 50%, #bbdefb 100%);
}

.sidebar-label-polling-right .label-connector {
    border-left-color: #bbdefb;
}

.sidebar-label-polling-right .label-gradient-text {
    background: linear-gradient(90deg, #bbdefb 0%, #64b5f6 50%, #2196f3 100%);
}

/* Kategori - Teal */
.sidebar-label-kategori-right .label-number-box {
    background: linear-gradient(135deg, #009688 0%, #4db6ac 50%, #b2dfdb 100%);
}

.sidebar-label-kategori-right .label-connector {
    border-left-color: #b2dfdb;
}

.sidebar-label-kategori-right .label-gradient-text {
    background: linear-gradient(90deg, #b2dfdb 0%, #4db6ac 50%, #009688 100%);
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar-label-hex {
        height: 45px;
    }

    .sidebar-label-hex .label-hex {
        width: 50px;
        height: 50px;
    }

    .sidebar-label-hex .label-number {
        font-size: 20px;
    }

    .sidebar-label-hex .label-arrow {
        font-size: 11px;
        padding: 6px 15px 6px 20px;
    }

    .sidebar-label-right {
        height: 45px;
    }

    .sidebar-label-right .label-number-box {
        width: 60px;
        font-size: 28px;
    }

    .sidebar-label-right .label-connector {
        border-top-width: 22.5px;
        border-bottom-width: 22.5px;
        border-left-width: 18px;
    }

    .sidebar-label-right .label-gradient-text {
        font-size: 12px;
        padding: 0 20px 0 8px;
    }
}