/* ===== RESET & BASE ===== */
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        
         /* ===== DEMO CONTENT ===== */
         .hero {
         min-height: 100vh;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-align: center;
         padding: 2rem;
         background: linear-gradient(135deg, #e8f5e9 0%, #f3e5f5 100%);
         }
         .hero h1 { font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 700; color: #111; margin-bottom: .75rem; }
         .hero p  { font-size: 1rem; color: #555; max-width: 480px; line-height: 1.7; }
         .section {
         padding: 5rem 2rem;
         max-width: 760px;
         margin: 0 auto;
         }
         .section h2 { font-size: 1.5rem; margin-bottom: 1rem; }
         .section p  { color: #444; line-height: 1.8; margin-bottom: 1.2rem; }
         /* ===== CUSTOM CURSOR (desktop only) ===== */
         @media (hover: hover) and (pointer: fine) {
         body { cursor: none; }
         #cursor-dot {
         position: fixed;
         top: 0; left: 0;
         width: 10px; height: 10px;
         background: #0f100f;
         border-radius: 50%;
         pointer-events: none;
         transform: translate(-50%, -50%);
         z-index: 9999;
         transition: transform .1s, width .2s, height .2s, background .2s;
         }
         #cursor-ring {
         position: fixed;
         top: 0; left: 0;
         width: 34px; height: 34px;
         border: 2px solid rgba(9, 9, 9, 0.55);
         border-radius: 50%;
         pointer-events: none;
         transform: translate(-50%, -50%);
         z-index: 9998;
         transition: width .25s, height .25s, border-color .25s;
         }
         /* Hover state — cursor expands on clickable elements */
         body.cursor-hover #cursor-dot  { transform: translate(-50%,-50%) scale(2.2); background: #128C7E; }
         body.cursor-hover #cursor-ring { width: 54px; height: 54px; border-color: rgba(18,140,126,.4); }
         }
         /* ===== WHATSAPP BUTTON (kanan bawah) ===== */
         #wa-btn {
         position: fixed;
         bottom: 28px;
         right: 24px;
         width: 56px; height: 56px;
         background: #25D366;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         z-index: 1000;
         border: none;
         outline: none;
         transition: transform .25s, box-shadow .25s;
         box-shadow: 0 4px 16px rgba(37,211,102,.35);
         text-decoration: none;
         }
         #wa-btn:hover { transform: scale(1.12); box-shadow: 0 6px 22px rgba(37,211,102,.5); }
         #wa-btn:active { transform: scale(.96); }
         #wa-btn svg { width: 28px; height: 28px; fill: #fff; display: block; }
         /* Pulse ring */
         #wa-btn::before {
         content: '';
         position: absolute;
         inset: -2px;
         border-radius: 50%;
         border: 2px solid #494949;
         animation: wa-pulse 2s ease-out infinite;
         }
         @keyframes wa-pulse {
         0%   { transform: scale(1);   opacity: .75; }
         70%  { transform: scale(1.65); opacity: 0; }
         100% { transform: scale(1.65); opacity: 0; }
         }
         /* Tooltip */
         #wa-btn::after {
         content: 'Chat WhatsApp';
         position: absolute;
         right: 66px;
         background: #1a1a1a;
         color: #fff;
         font-size: 12px;
         white-space: nowrap;
         padding: 6px 12px;
         border-radius: 6px;
         opacity: 0;
         pointer-events: none;
         transition: opacity .2s;
         }
         #wa-btn:hover::after { opacity: 1; }
         /* ===== SCROLL-TO-TOP BUTTON (kiri bawah) ===== */
         #scroll-top {
         position: fixed;
         bottom: 28px;
         left: 24px;
         width: 50px; height: 50px;
         background: #fff;
         border: 1.5px solid #ddd;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         z-index: 1000;
         opacity: 0;
         visibility: hidden;
         transform: translateY(16px) scale(.8);
         transition: opacity .3s, transform .3s, visibility .3s, background .2s;
         box-shadow: 0 2px 10px rgba(0,0,0,.1);
         }
         #scroll-top.visible {
         opacity: 1;
         visibility: visible;
         transform: translateY(0) scale(1);
         }
         #scroll-top:hover { background: #f0f0f0; transform: translateY(-2px) scale(1); }
         #scroll-top:active { transform: scale(.93); }
         #scroll-top svg { width: 22px; height: 22px; stroke: #333; stroke-width: 2.2; fill: none; }
         /* ===== RESPONSIVE ===== */
         @media (max-width: 480px) {
         #wa-btn    { bottom: 20px; right: 16px; width: 50px; height: 50px; }
         #scroll-top{ bottom: 20px; left: 16px;  width: 44px; height: 44px; }
         #wa-btn::after { display: none; }
         }
  
     
         .client-slider {
         overflow: hidden;
         position: relative;
         width: 100%;
         }
         .client-slider-track {
         display: flex;
         width: max-content;
         animation: scrollSlider 20s linear infinite;
         }
         .client-item {
         flex: 0 0 auto;
         padding: 0 20px;
         }
         .client-item img {
         width: 137px;
         height: auto;
         display: block;
         transition: 0.3s;
         }
         .client-item img:hover {
         transform: scale(1.05);
         }
         @keyframes scrollSlider {
         0% {
         transform: translateX(0);
         }
         100% {
         transform: translateX(-50%);
         }
         }
  

     

/* Hover text navbar */
.inteco-main-menu .sf-menu > li > a{
    transition: color 0.3s ease;
}

/* Hover effect */
.inteco-main-menu .sf-menu > li > a:hover{
    color: #01c6d7 !important;
}

/* Active menu */
.inteco-main-menu .sf-menu > .current-menu-item > a{
    color: #01c6d7 !important;
}


/* <!-- Footer Social Style --> */

.footer-social-wrapper{
    display:flex;
    flex-direction:column;
    gap:15px;
    margin-top:10px;
}

.social-icon{
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.08);
    transition:all .3s ease;
}

.footer-social-item:hover .social-icon{
    background:#4fd1ff;
    color:#000;
}

.footer-social-item{
    display:flex;
    align-items:center;
    gap:12px;
    color:#cfcfcf;
    text-decoration:none;
    font-size:15px;
    transition:all .3s ease;
}

.footer-social-item i{
    font-size:18px;
    line-height:1;
}

.footer-social-item:hover{
    color:#4fd1ff;
    transform:translateX(5px);
}

.footer-social-item:hover i{
    color:#000;
}

/* Mobile Responsive */
@media only screen and (max-width: 767px){
   .footer-social-wrapper{
      flex-direction:row;
      flex-wrap:wrap;
      gap:12px;
      margin-top:20px;
   }

   .footer-social-item{
      gap:0;
   }

   .footer-social-item span:not(.social-icon):not(.tiktok-icon):not(.wa-icon){
      display:none;
   }

   .footer-social-item:hover{
      transform:none;
   }
}

/* ===========================
   Video Player
=========================== */

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

.player-shell{
    position:relative;
    width:100%;
    max-width:1200px;
    display:flex;
    align-items:center;
    gap:18px;
}

.nav-btn{
    flex:0 0 auto;
    width:56px;
    height:56px;
    border-radius:50%;
    background:rgba(0,0,0,.48);
    border:1px solid rgba(255,255,255,.14);
    color:#f2f2f2;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.2s;
    -webkit-tap-highlight-color:transparent;
}

.nav-btn:hover{
    background:#e2202c;
    border-color:#e2202c;
}

.nav-btn:active{
    transform:scale(.92);
}

.nav-btn:disabled{
    cursor:not-allowed;
    background:#cfcfcf;
    border-color:#fff;
}

.nav-btn svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.player-wrap{
    flex:1;
    min-width:0;
}

.player-frame{
    width:100%;
    aspect-ratio:16 / 9;
    background:#000;
    border-radius:35px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

video-player,
video-skin{
    width:100%;
    height:100%;
    display:block;
}

/* Default */
video-player video{
    width:100%;
    height:100%;
    background:#000;
    transition:object-fit .25s ease;
}

/* Landscape */
video-player video.landscape{
    object-fit:cover;
}

/* Square */
video-player video.square{
    object-fit:contain;
}

/* Portrait */
video-player video.portrait{
    object-fit:contain;
}

.meta-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
}

.video-title{
    font-size:14px;
    font-weight:500;
    color:#000;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.video-counter{
    font-size:12px;
    color:#888;
    margin-left:12px;
}

@media(max-width:640px){

.player-shell{
    gap:8px;
}

.nav-btn{
    width:36px;
    height:36px;
}

.nav-btn svg{
    width:16px;
    height:16px;
}

}