/* =========================
   Responsive: 1200 → 360px
   ========================= */

/* ≤ 1200px */
@media (max-width: 1200px) {
  .ca-widget { 
    max-width: 360px; 
    top: 420px;
    margin: 16px auto; 
  }
  .ca-item { 
    margin: 10px 24px; 
  }
  .ca-toggle { 
    font-size: 26px; 
    padding: 12px; 
  }
  .ca-masked { 
    font-size: 18px; 
  }
  .ca-copy { 
    padding: 12px; 
  }
  
  .socials-buttons { 
    top: 3110px; 
    gap: 140px; 
  }
  .copyright { 
    top: 3250px; 
    left: 15%; 
    }
  .copyright img { 
    width: 80%; 
    height: auto; 
  }
}

/* ≤ 1024px */
@media (max-width: 1024px) {
  .ca-widget { 
    top: 380px; 
    max-width: 340px; 
    margin: 0 auto;}
  .ca-toggle { 
    font-size: 24px; 
    padding: 12px 14px; 
  }
  .ca-masked { 
    font-size: 17px; 
  }

  .arc1 { 
    top: 720px;  
  }
  .arc2 { 
    top: 1100px;  
  }
  .arc3 { 
    top: 1500px; 
  }
  .arc4 { 
    top: 1860px;  
  }
  .arc5 { 
    top: 2220px;  
  }
  .arc1 img, .arc2 img, .arc3 img, .arc4 img, .arc5 img { 
    max-width: 500px; 
  }

  .socials-buttons { 
    top: 2680px; 
    gap: 120px; 
  }
  .copyright { 
    top: 2750px; 
  }
  .copyright img { 
    width: 80%; 
    height: auto; 
  }
}

/* ≤ 900px */
@media (max-width: 900px) {
  .ca-widget { 
    top: 240px; 
    max-width: 320px; 
    margin: 0 auto; 
  }
  .ca-toggle { 
    font-size: 22px; 
  }
  .ca-masked { 
    font-size: 16px; 
  }


  .socials-buttons { 
    top: 2120px;   
    gap: 100px; 
  }
  .copyright { 
    top: 3340px; 
  }
}

/* ≤ 768px (tablet potrait) */
@media (max-width: 768px) {
  /* Pastikan video & background cover penuh */
  #hero-video { 
    width: 100vw; 
    object-fit: cover; 
  }
  .background .bg-image img { 
    width: 100vw; 
    object-fit: cover; 
  }

  .ca-text { 
    padding: 0 12px; 
  }
  .ca-widget { 
    top: 230px; 
    max-width: 92%; 
  }
  .ca-item { 
    margin: 10px 12px; 
  }
  .ca-toggle { 
    font-size: 21px; 
    padding: 10px 12px; 
  }
  .ca-copy { 
    padding: 10px 12px; 
  }

  /* Pusatkan arc di mobile-ish */
 
  .arc1 { 
    top: 530px;
  }
  .arc2 { 
    top: 820px;
  }
  .arc3 { 
    top: 1120px;
    left: 42%;
  }
  .arc4 { 
    top: 1390px; 
  }
  .arc5 { 
    top: 1660px;
    left: 25%;
  }
  .arc1 img, .arc2 img, .arc3 img, .arc4 img, .arc5 img { 
    max-width: 49vw; 
    height: auto; 
  }

  .socials-buttons { 
    top: 2000px; 
    gap: 80px; 
  }
  .socials-buttons a img { 
    width: auto; 
    height: auto; 
    max-width: 64px; 
  }
  .copyright { 
    top: 2130px; 
    left: 22%; }
}

/* ≤ 640px */
@media (max-width: 640px) {
  .ca-widget { top: 360px; }
  .ca-toggle { font-size: 20px; }
  .ca-masked { font-size: 15px; }

  .arc1 { top: 720px; }
  .arc2 { top: 1040px; }
  .arc3 { top: 1360px; }
  .arc4 { top: 1700px; }
  .arc5 { top: 2040px; }
  .arc1 img, .arc2 img, .arc3 img, .arc4 img, .arc5 img { max-width: 82vw; }

  .socials-buttons { top: 2400px; gap: 64px; }
  .socials-buttons a img { width: 56px; }
  .copyright { top: 2540px; left: 6%; }
}

/* ≤ 480px */
@media (max-width: 480px) {
  .ca-widget { 
    top: 120px;
  }
  .ca-item { 
    margin: 8px 8px; 
  }
  .ca-toggle { 
    font-size: 12px; 
    padding: 10px; 
    border-radius: 8px; 
  }
  .ca-copy { 
    padding: 10px; 
  }
  .ca-badge { 
    font-size: 12px;
  }

  .socials-buttons { 
    top: 1110px; 
    gap: 44px; 
  }
  .socials-buttons a img { 
    width: 25px;
  }
  .copyright { 
    top: 1280px; 
    left: 15%; 
  }
}

@media (max-width: 412px) {
  .ca-widget { 
    top: 110px; 
    max-width: 94%; 
  }
  .ca-toggle { 
    font-size: 15px; 
  }
  .ca-masked { 
    font-size: 12px; 
  }

  .socials-buttons { 
    top: 1060px; 
    gap: 36px; 
  }
  .socials-buttons a img { 
    width: 25px; 
  }
  .copyright { 
    top: 1220px; left: 15%;
  }
}

/* ≤ 390px */
@media (max-width: 390px) {
  .ca-widget { 
    top: 100px; 
    max-width: 94%;
 }
  .ca-toggle { 
    font-size: 12px; 
  }
  .ca-masked { 
    font-size: 12px; 
  }

  .socials-buttons { 
    top: 1010px; 
    gap: 36px; 
  }
  .socials-buttons a img { width: 25px; }
  .copyright { 
    top: 1120px; 
    left: 15%; 
  }
}

/* ≤ 360px */
@media (max-width: 360px) {
  .ca-widget { 
    top: 280px; 
  }
  .ca-toggle { 
    font-size: 17px; 
  }
  .ca-masked { 
    font-size: 13px; 
  }

  .socials-buttons { top: 1660px; gap: 28px; }
  .socials-buttons a img { width: 36px; }
  .copyright { top: 1740px; left: 4%; }
}

/* ≤ 344px */
@media (max-width: 344px) {
  .ca-widget { 
    top: 80px; 
  }
  .ca-toggle { font-size: 12px; }
  .ca-masked { font-size: 11px; }

  .socials-buttons { 
    top: 890px; 
    gap: 28px; 
  }
  .socials-buttons a img { 
    width: 13px; 
  }
}