#clickHotline {
     width: 56px;
     height: 56px;
     position: fixed;
     bottom: 20px;
     right: 15px;
     cursor: pointer;
     z-index: 999;
     background: var(--primary) url(../../../images/frontend/2/hotline.png) center center no-repeat;
     background-size: 24px;
     border: none;
     border-radius: 50%;
     box-shadow: var(--shadow-lg);
     transition: var(--transition);
     animation: pulseHotline 2s infinite;
}

#clickHotline:hover {
     background-color: var(--primary-hover);
     transform: scale(1.1) rotate(15deg);
}

@keyframes pulseHotline {
     0% {
          box-shadow: 0 0 0 0 rgba(205, 162, 116, 0.7);
     }
     70% {
          box-shadow: 0 0 0 20px rgba(205, 162, 116, 0);
     }
     100% {
          box-shadow: 0 0 0 0 rgba(205, 162, 116, 0);
     }
}

#semuaHotlineCaption {
     position: fixed;
     bottom: 85px;
     right: 15px;
     z-index: 998;
     background: var(--secondary-dark);
     color: #ffffff;
     padding: 10px 20px;
     font-size: 12px;
     font-weight: 700;
     font-family: var(--font-headings);
     border-radius: 20px;
     box-shadow: var(--shadow-lg);
     border: 1px solid rgba(205, 162, 116, 0.2);
     pointer-events: none;
     letter-spacing: 0.5px;
}

#semuaHotline {
     position: fixed;
     bottom: -100px;
     right: 15px;
     z-index: 999;
     opacity: 0;
     background: rgba(15, 23, 42, 0.92);
     backdrop-filter: blur(16px);
     padding: 26px;
     border-radius: var(--radius-lg);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
     border: 1px solid rgba(205, 162, 116, 0.25);
     color: #ffffff;
     font-size: 18px;
     transition: var(--transition);
     width: 330px;
}

#semuaHotline li {
     display: grid;
     grid-template-columns: 1fr 30px;
     align-items: center;
     justify-content: center;
     margin-bottom: 12px;
     grid-gap: 12px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     padding-bottom: 8px;
}

#semuaHotline li:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
}

#semuaHotline img {
     height: 22px;
     width: 22px;
     object-fit: contain;
     filter: brightness(0) invert(1);
}

#semuaHotline a {
     font-size: 16px;
     font-weight: 500;
     color: #ffffff;
     font-family: var(--font-body);
     transition: var(--transition);
}

#semuaHotline a:hover {
     color: var(--primary);
     padding-left: 5px;
}

.kliklangsung {
     font-size: 10px;
     color: var(--primary);
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 18px;
     font-weight: 700;
     border-bottom: 1px solid rgba(205, 162, 116, 0.15);
     padding-bottom: 6px;
}

/* hotline-atas */
.hotline-atas a {
     color: #ffffff;
     font-size: 14px;
     font-weight: 600;
     transition: var(--transition);
}

.hotline-atas a:hover {
     color: var(--primary) !important;
}

.hotline-atas img {
     height: 18px;
     margin-right: 5px;
     vertical-align: middle;
     filter: brightness(0) invert(1);
}

/* hotline-bawah */
.hotline-bawah li {
     border-bottom: 1px solid #334155;
     display: grid;
     grid-template-columns: 1fr 1fr;
     padding-bottom: 12px;
     margin-bottom: 12px;
}

.hotline-bawah li:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
}

.hotline-bawah strong {
     justify-content: flex-start;
     align-content: center;
     display: grid;
     font-size: 13px;
     color: #94a3b8;
     font-weight: 500;
}

.hotline-bawah span {
     justify-content: flex-end;
     align-content: flex-end;
     display: grid;
}

.hotline-bawah a {
     padding: 8px 16px;
     font-size: 13px;
     font-weight: 600;
     color: #ffffff;
     display: inline-block;
     text-align: center;
     background: #334155;
     border-radius: var(--radius-sm);
     transition: var(--transition);
}

.hotline-bawah a:hover {
     background: var(--primary);
     color: #ffffff;
}

.hotline-bawah img {
     height: 16px;
     margin-right: 6px;
     vertical-align: middle;
     filter: brightness(0) invert(1);
}

@media (max-width: 740px) {
     .hotline-atas-container {
          margin-top: 20px;
     }
     
     .hotline-atas li {
          display: grid;
          align-items: center;
          grid-template-columns: 1fr auto;
          padding-bottom: 12px;
          margin-bottom: 12px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     }
     
     .hotline-atas strong {
          color: #cbd5e1;
          font-weight: 500;
     }
     
     .hotline-atas a {
          color: #ffffff;
          padding: 8px 16px;
          background: #1e293b;
          font-size: 13px;
          display: inline-block;
          text-align: center;
          border-radius: var(--radius-sm);
          border: 1px solid rgba(255, 255, 255, 0.1);
     }
     
     .hotline-atas span {
          justify-content: flex-end;
          align-content: flex-end;
          display: grid;
     }
}

@media (min-width: 741px) {
     .hotline-atas {
          margin-right: 20px;
          display: flex;
          align-items: center;
     }
     
     .hotline-atas li {
          margin-left: 20px;
          margin-bottom: 0px;
     }
}