body {
  margin: 0;
  top: 0;
  padding: 0;
  height: 100vh;

  font-family: Arial, sans-serif;
  background: linear-gradient(90deg,
  black,
  rgb(146, 145, 145),
  grey,
  green,
  /* rgb(250, 8, 8), */
  rgb(199, 199, 10),
  /* red, */
  green,
  grey,
  rgb(122, 122, 122),
  black);
}

.card_container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.card {
  position: relative;
  background: linear-gradient(35deg,
  red,
  blue,
  /* yellow, */
  white,
  red);
  /* background: rgb(172, 170, 170); */
  padding: 100px;
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 5px 20px rgba(8, 8, 8, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.74);
  height: 650px;
  text-align: center;
}

.card h1 {
    color: rgb(228, 9, 228);
    font-size: 1.6rem;
    font-style: italic;
    font-weight: bold;
}

.card h2 {
    color: rgba(245, 245, 245, 0.568);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: bold;
    margin-bottom: 45px;
    padding: 0px 10px;
    width: 100%;
    box-sizing: border-box;
    text-shadow: 0 0 5px blue,
               0 0 10px red,
               0 0 20px red;
}

.card p {
    margin-top: 10px;
    margin-bottom: 5px;
    color:aqua;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: bolder;
    font-weight: lighter;
}

.logo-anthon img {
  background: rgba(5, 25, 206, 0.541);
  /* background: black; */
  width: 20%;
  padding: 2px;
  display: flexbox;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
  border-radius: 200%;
}


img {
  padding: 2%;
  width: 80px;
  border-radius: 150%;
  background:rgb(4, 160, 139);
}

a {
  display: block;
  margin: 10px;
  padding: 30px;
  background: #ff6600;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: 0.2s;
  background: black;
  /* z-index: 999999; */
}

a:hover {
  /* background: #d63781; */
  color: white;
}

a:active {
  transform: scale(0.95);
}

button:hover {
  /* background: #d63781; */
  color: white;
}

.menu {
  position: relative;
  display: block;
  padding: 10px;
  margin: 10px auto;
  width: 200px;
  background: rgb(49, 48, 48);
  color: whitesmoke;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.menu:hover {
    font-style: italic;
    font-weight: bold;
     transform: scale(1.03);
}

/* button aktif */
.menu.active {
   /* background: rgb(49, 48, 48); */
  background: greenyellow;
  color: black;
  font-style: italic;
  font-weight: normal;
  width: 188px;              /* 👉 jadi lebih panjang */
  transform: scale(1.05);
  transition: all 0.25s ease;
}


.btn-exit.active {
  /* background: rgb(49, 48, 48); */
  background: greenyellow;
  color: black;
  font-style: italic;
  font-weight: normal;
  width: 210px;              /* 👉 jadi lebih panjang */
  transform: scale(1.05);
  transition: all 0.25s ease;
}

.menu.active:hover{
    color: black;
    font-style: italic;
    font-weight: normal;
}

/* TULISAN BISA JALAN BOLAK BALIK */
/* ============================== */
.running-text {
  display: block;
  width: 100%;
  overflow: hidden;
}

.running-text span {
  display: inline-block;
  white-space: nowrap;
  animation: jalan 12s linear infinite alternate;
  padding-left: 100%;
  color: whitesmoke !important;
  font-size: 1.2rem;
}

@keyframes jalan {
  0% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(-120%);
  }
}


/* CTA WA MARKETING */
.card-a a {
  display: block;
  margin: 15px auto;
  padding: 12px;
  width: 70%;
  background: none;
  font-weight: bold;
  border-radius: 10px;
  text-align: center;
  border-radius: 1px solid white;
  background: rgba(252, 251, 251, 0.541);
  color: black;
}

.card-a a:hover {
/* .cta-wa:hover { */
  background: #1ebe5d;
}

.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  margin-top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.modal-content {
  position: relative;
  background: rgb(117, 116, 116);
  margin: 5% auto;
  padding: 20px;
  max-width: 85%;
  width: auto;
  height: 90vh;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
  animation: fadeIn 0.3s ease;
}

.close {
  position: absolute;   /* ✅ ini yang benar */
  top: -11px;
  right: 5px;
  font-size: 45px;
  cursor: pointer;
  color: red;
  /* padding: 3px 20px;
  width: 100%; */
  z-index: 10000;
}

.modal-content iframe {
  width: 100%;
  height: 99%;
  border: none;
  border-radius: 12px;
  margin-top: 10px;
  display: block;
}

/* AGAR NOTIFIKASI MUNCUL DI LAYAR HP */
#statusText {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  font-size: 30px;
  font-weight: bold;
  color: red;

  z-index: 9999;
  text-align: center;

  width: 55%;
  /* background: rgba(0,0,0,0.7); */
  padding: 5px 30px;
  border-radius: 10px;
}

/* HILANGKAN SCROLLBAR TAPI MASIH BISA SCROLL */
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  display: none;
}

/* Firefox */
html {
  scrollbar-width: none;
}


/* TOMBOL KELUAR-EXIT DARI APLIKASI  */
.btn-exit {
  margin-top: 15px;
  padding: 10px 5px;
  width: 45%;
  background: rgb(49, 48, 48);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.2rem;
  justify-content: cente;
  align-items: center;
  margin-bottom: 30px;
}

.btn-exit:hover {
  /* background: #d63781; */
  /* background: darkred; */
  color: yellow;
  font-style: italic;
}

/* ========================= */
/* INTRO VIDEO FULLSCREEN    */
/* ========================= */
#introVideo {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  z-index: 9999;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#introVideo.fade-out {
  opacity: 0;
}

#videoIntro {
  align-items: center;
  justify-content: center;

  width: 50%;
  height: 100%;
  object-fit: cover;   /* 🔥 KUNCI */
}


/* ========================= */
/* MAIN CONTENT ANIMATION */
/* ========================= */
#mainContent {
  opacity: 1;
  transform: scale(1);
  transition: all 0.8s ease;
}

#mainContent.hidden {
  opacity: 0;
  transform: scale(0.95); /* sedikit zoom out */
}

#mainContent.show {
  opacity: 1;
  transform: scale(1); /* zoom normal */
  transition: all 0.8s ease;
}


/* --- LOGO ANTHON UNTUK MASUK KE APLIKASI  --- */
/* -------------------------------------------- */
#introScreen {
  position: fixed;
  inset: 0;
  background: linear-gradient(100deg,
  rgb(99, 90, 92),
  rgb(20, 17, 17),
  rgb(84, 87, 87));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.logo-spin {
  width: 50px;
  animation: spin 1.8s linear infinite;
  border-radius: 200px;
  padding: 5px;
  width: 4%;
  background: linear-gradient(90deg,
  grey
  black);
  border: 1px solid rgb(248, 28, 28);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* transisi hilang */
.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease;
}






/* -------------------------- */
/* --- MOBILE RESPONSIVE  --- */
/* -------------------------- */
@media (max-width: 768px) {
  html,
  body{
      overflow-x:hidden;
  }

  #introScreen {
    position: fixed;
    inset: 0;
    background: linear-gradient(100deg,
    black);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
  }


  .logo-spin {
    width: 50px;
    animation: spin 1.8s linear infinite;
    border-radius: 200px;
    padding: 5px;
    width: 8%;
    background: linear-gradient(130deg,
    rgb(12, 12, 12),
    rgb(189, 188, 188),
    rgb(27, 27, 27));
    border: 1px solid rgba(255, 255, 0, 0.699);
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* transisi hilang */
  .fade-In {
    opacity: 0;
    transition: opacity 0.8s ease;
  }

    .container {
        width: 10%;
        padding: 15px;
        display: flex;
        flex-direction: column;
    }

    header {
        flex-direction: column;
        text-align: center;
    }

    nav {
        flex-direction: column;
        width: 100%;
    }

    nav a {
        display: block;
        padding: 10px;
    }

    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero img {
        width: 80%;
        max-width: 300px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero p {
        font-size: 16px;
    }

    /* .card {
        width: 100%;
        margin-bottom: 20px;
    } */

    .project-grid {
        grid-template-columns: 1fr;
    }

    footer {
        text-align: center;
        font-size: 14px;
    }

    .card_container {
      display: flexbox;
      justify-content: space-between;
      align-items: space-between;
    }
    
    .card {
        /* position: relative; */
        display: flexbox;
        background: linear-gradient(90deg,
        rgb(87, 84, 84),
        rgb(4, 160, 139),
        rgb(46, 45, 46));
        color: whitesmoke;
        border: 1px solid rgba(245, 245, 244, 0.938);
        margin: 0 auto;
        max-width: 100%;
        width: auto;
        padding: 95px 0px;
        
        flex-direction: column;
        justify-content: space-between;
        align-items: space-between;
        height: 600px;
    }

    .card h1 {
        color: rgb(245, 236, 111);
        font-style: normal;
        font-size: 1.2rem;
        font-synthesis-weight: strong;
    }

    .card h2 {
        /* background: black; */
        /* color: rgba(245, 245, 245, 0.548); */
        color: rgb(250, 250, 248);
        text-shadow: 0 0 5px white,
               0 0 10px white,
               0 0 15px red,
               0 0 20px blue,
               blue;
        font-size: 1.3rem;
        font-style: italic;
        padding: 5px 8px;
        margin-bottom: 10px;
    }

    .card p {
        color: rgb(246, 244, 247);
    }

    .modal {
      top: 0;
      margin: 0;
      display: none;
      position: fixed;
      z-index: 999;
      left: 0;
      top: 0px;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.342);
    }

    /* CTA WA MARKETING */
    .card-a a {
      display: inline-block;
      margin: 15px auto;
      padding: 9px 20px;
      width: 50%;
      background: none;
      color: whitesmoke;
      font-weight: bold;
      border-radius: 8px;
      text-align: center;
      background: rgba(250, 143, 3, 0.445);
      border-radius: 10px solidrgba(255, 255, 255, 0.253)e;
      /* padding: 4px; */
    }

    .card-a a:hover {
      background: yellow;
      color: black;
      border-radius: 1px solid white;
    }

    .logo-anthon img {
      margin-top: -20px;
      background: rgb(32, 245, 216);
      width: 10%;
      padding: 10px;
      border-radius: 100%;
    }

    #videoIntro {
      width: 100%;
      height: 100%;
    }

    .fixed-text {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: rgba(0,0,0,0.8);
      color: cyan;
      text-align: center;
      padding: 60px 0;
      z-index: 5;
      font-size: 14px;
    }

    .menu-group {
      margin-top: 50px;
      display: flexbox;
      flex-direction: column;
      gap: 0;
    }

    from {
    transform: translateY(-30px);
    opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }


  .logo-spin {
    width: 50px;
    animation: spin 1.8s linear infinite;
    border-radius: 200px;
    padding: 5px;
    width: 8%;
    background: linear-gradient(130deg,
    rgb(12, 12, 12),
    rgb(189, 188, 188),
    rgb(27, 27, 27));
    border: 1px solid rgba(255, 255, 0, 0.699);
  }

  .modal-content {
    position: relative;
    background: rgb(177, 177, 177);
    margin: 5% auto;
    padding: 15px;
    max-width: 100%;
    width: auto;
    height: 93vh;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
    animation: fadeIn 0.3s ease;
  }

  .btn-exit {
    margin-top: 15px;
    width: 220px;
    background: rgb(49, 48, 48);
    color: rgb(250, 3, 3);
    border-radius: 10px;
    font-weight: bold;
    font-size: 1.2rem;
  }

}