.custom-hotspot {
    display: flex;
    gap: 60px;
}

.hotspot-image {
    position: relative;
    width: 60%;
}

.hotspot-image img {
    width: 100%;
}

/* DOT */
.custom-hotspot .dot {
    position: absolute;
    width: var(--dot-size);
    height: var(--dot-size);
    background: var(--dot-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* LIST */
.custom-hotspot .hotspot-list {
    position: relative;
    width: 40%;
}

.custom-hotspot .item {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    font-size: 20px;
    padding-left: 10px;
    text-align: left;
    color: var(--text-color);
}

.custom-hotspot .item a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

.custom-hotspot .item a:hover {
    text-decoration: none; /* optional */
}

/* garis dari kiri item ke arah dot */
.custom-hotspot .item::before {
    content: "";
    position: absolute;
    top: calc(50% + 30px);
    left: var(--line-start, 0);
    width: var(--line-width, 0);
    height: 1px;
    background: transparent;
    transform: translateY(-50%);
}
@media (max-width: 420px) {
    .custom-hotspot .item::before {
        top: 50%;
        left: auto;
        right: 100%;
        width: var(--line-width, 50px);
    }
}
.custom-hotspot .dot, .custom-hotspot .item {
    transition: all 0.3s ease;
}
/* DOT ACTIVE */
.custom-hotspot .dot.active {
    background: var(--dot-active-color);
    box-shadow: 0 0 0 4px var(--dot-color);
    transform: translate(-50%, -50%) scale(1.2);
}

/* TEXT ACTIVE */
.custom-hotspot .item.active {
    color: var(--text-active-color);
    font-weight: 600;
}