#clickHotline {
     width: 56px;
     height: 56px;
     position: fixed;
     bottom: 20px;
     right: 20px;
     cursor: pointer;
     z-index: 999;
     background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.387a12.035 12.035 0 01-7.108-7.108c-.155-.44.011-.928.387-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z'/%3E%3C/svg%3E") 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);
     box-shadow: 0 10px 25px rgba(205, 162, 116, 0.4);
}

@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: 32px;
     right: 85px;
     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: 20px;
     z-index: 999;
     opacity: 0;
     background: rgba(15, 23, 42, 0.95);
     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 rgba(255, 255, 255, 0.05) !important;
     display: flex !important;
     justify-content: space-between !important;
     align-items: center !important;
     padding-bottom: 10px !important;
     margin-bottom: 10px !important;
}

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

.hotline-bawah strong {
     font-size: 13px !important;
     color: #94a3b8 !important;
     font-weight: 500 !important;
     display: flex !important;
     align-items: center !important;
     gap: 8px !important;
}

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

.hotline-bawah a {
     padding: 6px 14px !important;
     font-size: 13px !important;
     font-weight: 600 !important;
     color: #ffffff !important;
     background: rgba(255, 255, 255, 0.05) !important;
     border: 1px solid rgba(255, 255, 255, 0.08) !important;
     border-radius: var(--radius-sm) !important;
     transition: var(--transition) !important;
     text-decoration: none !important;
     display: inline-block;
     text-align: center;
}

.hotline-bawah a:hover {
     background: var(--primary) !important;
     border-color: var(--primary) !important;
     color: #0f172a !important;
}

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

@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;
     }
}