/* Default (dark) theme via CSS variables */
    :root {
      --bg: #141e30;
      --fg: #e0e0e0;
      --bg-alt: rgba(255,255,255,0.05);
      --accent: #00ffc3;
      --font: 'Poppins', sans-serif;
      --bar-bg: rgba(255,255,255,0.1);
    }
    /* Light theme via class */
    html.light {
      --bg: #f5f5f5;
      --fg: #222;
      --bg-alt: rgba(0,0,0,0.05);
      --accent: #0066cc;
    }

    * { box-sizing: border-box; margin:0; padding:0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--bg);
      /* Mesh gradient halus biar nggak sepi */
      background-image: 
        radial-gradient(at 0% 0%, rgba(0, 255, 195, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(0, 102, 204, 0.05) 0px, transparent 50%);
      background-attachment: fixed;
      color: var(--fg);
      line-height:1.6;
      transition: background .3s, color .3s;
    }
    a { text-decoration: none; color: var(--accent); transition: all .3s ease; }
    a:hover { opacity: .8; }

    /* Navbar */
    nav {
      position: sticky; top:0; left:0; right:0;
      background: var(--bg-alt); backdrop-filter: blur(10px);
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 20px; z-index:100;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .brand { font-weight:600; font-size:1.2em; }
    .brand {
    letter-spacing: 1px; /* Bikin kesan lega tapi tegas */
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff 0%, #aaa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: 0.3s ease;
    cursor: pointer;
}

.brand:hover {
    letter-spacing: 6px; /* Efek interaktif pas di-hover */
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

    .nav-links { display: flex; gap: 20px; }
    .nav-links a { font-weight:500; }
    .toggle-btn, .hamburger {
      background:none; border:none; font-size:1.5em;
      cursor:pointer; color: var(--fg);
    }
    .hamburger { display: none; }

    /* Mobile menu */
    @media (max-width:768px) {
      .nav-links { position: absolute; top:60px; left:0; right:0;
                   background: var(--bg-alt); flex-direction: column;
                   gap:0; display: none; }
      .nav-links.show { display: flex; }
      .nav-links a { padding:12px; border-top:1px solid rgba(255,255,255,0.1); }
      .hamburger { display: block; }
    }

    /* Sections & Animations */
    section {
      padding: 80px 20px; max-width: 95%; margin:auto;
      opacity:0; transform:translateY(20px);
      transition: opacity .6s ease-out, transform .6s ease-out;
    }
    section.visible { opacity:1; transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); }
    @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
    @keyframes slideDown { from{transform:translateY(-50px);opacity:0;} to{transform:translateY(0);opacity:1;} }
    /* Container Utama Section */
.scnim {
    position: relative;
    border-radius: 20px;
    background: #0f172a; /* Warna background dalem section lo */
    padding: 40px;
    z-index: 1;
    overflow: hidden; /* Supaya bagian border yang muter gak keluar jalur */
    margin-bottom: 50px;
}

/* Layer Animasi Border */
.scnim::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* Gradient yang disamain sama style H2 lo */
    background: conic-gradient(
        transparent, 
        #00d2ff, 
        #3a7bd5, 
        #fff, 
        transparent 30%
    );
    animation: rotate-border 4s linear infinite;
    z-index: -2;
}

/* Layer Penutup (Biar bordernya kelihatan tipis) */
.scnim::after {
    content: '';
    position: absolute;
    inset: 3px; /* Ketebalan border lo (semakin besar angka, semakin tebal) */
    background: inherit; /* Ngikutin warna background section */
    border-radius: 17px; /* Sedikit lebih kecil dari border-radius utama */
    z-index: -1;
}

/* Animasi Puter */
@keyframes rotate-border {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

    /* Home */
    #home { text-align:center; padding-top:120px; }
    #home img {
      width:160px; height:160px; border-radius:50%;
      object-fit:cover; border:3px solid rgba(255,255,255,0.4);
      box-shadow:0 4px 15px rgba(0,0,0,0.4); margin-bottom:20px;
      animation: slideDown 1s ease-out;
    }
    #home h1 {
      font-size:2.8em; margin-bottom:5px; animation: fadeIn 2s;
    }
    #home .tagline {
      font-size:1.2em; font-weight:300; margin-bottom:20px;
      animation: fadeIn 2s;
    }
    .description {
      max-width: 700px; margin:20px auto 40px;
      background: var(--bg-alt); backdrop-filter: blur(12px);
      border:1px solid rgba(255,255,255,0.1);
      border-radius: 14px; padding: 25px;
      box-shadow:0 8px 20px rgba(0,0,0,0.2);
      font-size:1.05em; line-height:1.8;
      animation: fadeIn 2s ease-in;
    }

/* Social Badges */
.social-links {
    display: flex;             /* Ganti dari inline ke flex */
    flex-wrap: wrap;           /* Biar kalau di HP, tombolnya turun ke bawah (gak kepotong) */
    justify-content: center;   /* Tombol jadi di tengah */
    gap: 16px;                 /* Jarak antar tombol */
    margin-bottom: 60px;
    animation: fadeIn 2s ease-in;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;        /* Tambah padding kanan-kiri biar lebih lega */
    font-weight: 600;
    color: var(--fg);
    background: var(--bg-alt);
    border: 1px solid var(--accent);
    border-radius: 8px;
    transition: all 0.3s ease; /* Transition ke semua property biar smooth */
    text-decoration: none;     /* Ilangin garis bawah link */
}

.social-links a:hover {
    background: var(--accent);
    color: var(--bg);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 210, 255, 0.4); /* Efek glow pas di-hover */
}

.social-links svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;         /* Jarak icon ke teks dikit */
}

    /* About, Skills, Projects, Contact headings */
    #about h2, #skills h2, #projects h2, #contact h2 {
      text-align:center; margin-bottom:20px; font-size:2em;
    }

    /* About */
    #about .bio {
      max-width: 800px; margin: auto;
      background: var(--bg-alt); backdrop-filter: blur(10px);
      border:1px solid rgba(255,255,255,0.1);
      border-radius:12px; padding:25px;
      box-shadow:0 8px 20px rgba(0,0,0,0.2);
      font-size:1.05em; line-height:1.8;
    }

    /* Skills */
    .skill-bar { margin-bottom:15px; }
    .skill-bar span {
      display:block; font-weight:500; margin-bottom:5px;
    }
    .bar-bg {
      width:100%; height:10px; background: var(--bar-bg);
      border-radius:5px; overflow:hidden;
    }
    .bar-fill {
      height:100%; width:0; background: var(--accent);
      border-radius:5px; transition: width 1s ease-out;
    }
/* Modal Background */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}

/* Modal Box */
.modal-content {
  background: var(--bg);
  margin: 5% auto;
  padding: 30px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  width: 80%;
  max-width: 800px;
  color: var(--fg);
  position: relative;
  box-shadow: 0 0 30px rgba(0, 255, 195, 0.2);
}

.close-modal {
  position: absolute;
  top: 15px; right: 25px;
  font-size: 30px; cursor: pointer;
  color: var(--fg);
}

.close-modal:hover { color: var(--accent); }

/* Konten di dalam modal */
.modal-detail-img {
  width: 100%; border-radius: 10px; margin-bottom: 20px;
}

    /* Projects */
.project-list {
  display: flex;
  flex-wrap: nowrap; /* Biar tetap satu baris ke samping */
  overflow-x: auto;  /* Biar bisa di-scroll horizontal */
  gap: 25px;
  padding: 20px 10px 40px 10px; /* Tambah padding bawah biar bayangan/shadow nggak kepotong */
  scroll-snap-type: x mandatory; /* Efek magnet pas nge-scroll */
  -webkit-overflow-scrolling: touch; /* Scroll halus di iOS */
}

/* Sembunyikan Scrollbar biar estetik (Opsional) */
.project-list::-webkit-scrollbar {
  height: 8px;
}
.project-list::-webkit-scrollbar-track {
  background: var(--bg-alt);
  border-radius: 10px;
}
.project-list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
}

.project-item {
  flex: 0 0 320px; /* Lebar kartu fix, jangan menyusut (shrink) */
  scroll-snap-align: center; /* Kartu otomatis nengah pas di-scroll */
  /* Style lainnya tetap sama kayak sebelumnya */
}

.project-item {
  background: var(--bg-alt);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
}

.project-item:hover {
  transform: translateY(-10px);
  border-color: var(--accent);
  box-shadow: 0 15px 35px rgba(0, 255, 195, 0.1);
}

/* Status Label */
.project-status {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 15px;
  font-size: 0.75em;
  font-weight: 600;
  border-bottom-left-radius: 12px;
}
.completed { background: var(--accent); color: var(--bg); }
.dev { background: #ffb800; color: #000; }

.project-item h3 {
  margin: 15px 0 10px;
  font-size: 1.4em;
  color: var(--accent);
}

.project-item p {
  font-size: 0.95em;
  opacity: 0.8;
  flex-grow: 1; /* Biar tombol selalu di bawah */
}

/* Tech Tags */
.project-tech {
  margin: 20px 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.project-tech span {
  font-size: 0.7em;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Link Button */
.project-link {
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg) !important;
  font-weight: 600;
  margin-top: 10px;
}

.project-link.disabled {
  background: var(--bar-bg);
  cursor: not-allowed;
  opacity: 0.5;
}
    /* Contact */
    #contact p {
      text-align:center; font-size:1.05em;
      background: var(--bg-alt); backdrop-filter: blur(10px);
      border:1px solid rgba(255,255,255,0.1);
      border-radius:12px; padding:20px;
      max-width:600px; margin:auto;
      box-shadow:0 8px 20px rgba(0,0,0,0.2);
    }

       /* Footer */
    footer {
    padding: 80px 0 40px;
    background: transparent; /* Biar nyatu sama body */
    font-family: 'Poppins', sans-serif;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

/* Status Badge "Available" */
.status-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #00d2ff;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0, 210, 255, 0.3);
    padding: 6px 15px;
    border-radius: 20px;
}

.status-badge .dot {
    width: 6px;
    height: 6px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 10px #00d2ff;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.footer-line {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.1), rgba(255,255,255,0));
    margin-bottom: 40px;
}

.footer-main {
    display: wrap;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-info .label {
    font-size: 0.65rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.footer-info .value {
    font-size: 0.95rem;
    color: var(--fg);
    font-weight: 400;
}

.underline-hover {
    cursor: pointer;
    transition: 0.3s;
}

.underline-hover:hover {
    color: #00b7ff;
    text-decoration: underline;
}

.footer-bottom {
    margin-top: 60px;
    text-align: center;
    font-size: 0.75rem;
    color: #444;
    letter-spacing: 1px;
}

.footer-bottom span {
    color: #666;
}

/* Responsive */
@media (max-width: 600px) {
    .footer-top { flex-direction: column; gap: 20px; text-align: center; }
    .footer-main { flex-direction: column; text-align: center; gap: 30px; }
}



    /* Back to Top */
    #toTop {
      position: fixed; bottom:30px; right:30px;
      background: var(--accent); color: var(--bg);
      border:none; padding:12px; border-radius:50%;
      font-size:1.2em; cursor:pointer; display:none;
      box-shadow:0 4px 12px rgba(0,0,0,0.3);
      transition: transform .3s;
    }
    #toTop:hover { transform: scale(1.1); }

    /* MOBILE FONT ADJUSTMENTS */
    @media (max-width:480px) {
      #home h1 { font-size:2em; }
      #home .tagline { font-size:1em; }
      .description { font-size:0.95em; padding:20px; }
      .social-links a { padding:8px; font-size:0.9em; }
      #about .bio, #contact p { font-size:0.95em; padding:20px; }
      #about h2, #skills h2, #projects h2, #contact h2 { font-size:1.6em; }
      .skill-bar span { font-size:0.9em; }
      .project-item { width:90%; padding:20px; }
    }

    .loading-project{
      position: relative;
      background: transparent;
      display: flex;
      justify-content: center; /* center horisontal */
      align-items: center;
       flex-direction: column;

    }
    #prjloadtxt {
  margin-top: 10px;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}


/* Container untuk membungkus kategori */
.skills-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.skill-category {
  background: var(--bg-alt);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.3s ease;
}

.skill-category:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}

.skill-category h3 {
  font-size: 1.1em;
  margin-bottom: 15px;
  color: var(--accent);
  border-bottom: 1px solid var(--bar-bg);
  padding-bottom: 5px;
}

/* Styling untuk tag/badge */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tags span {
  background: var(--bar-bg);
  color: var(--fg);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.tags span:hover {
  background: var(--accent);
  color: var(--bg);
  cursor: default;
}

button.project-link {
  background: var(--accent);
  color: var(--bg) !important;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  margin-top: 10px;
  cursor: pointer;
}
/* Efek Container Utama AI Card */
.ai-card {
  color: white;
    position: relative;
    border: 1px solid rgba(0, 255, 195, 0.2) !important; /* Warna accent lebih tegas */
    background: linear-gradient(145deg, rgba(15, 20, 28, 0.8), rgba(5, 7, 10, 0.9));
    z-index: 1;
}

/* 1. Efek Aura Glow di Belakang (Pulse) */
.ai-card::before {
    content: '';
    position: absolute;
    inset: -2px; /* Dikeluarin dikit dari border */
    background: var(--accent);
    filter: blur(15px);
    border-radius: 28px;
    z-index: -1;
    opacity: 0.1;
    animation: neural-pulse 3s infinite ease-in-out;
}

/* 2. Efek Scanning Line (Laser lewat) */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
    z-index: 2;
    animation: scan-move 4s linear infinite;
}

/* 3. Animasi Text Glowing dikit buat Judul AI */
.ai-card h3 {
    text-shadow: 0 0 10px rgba(0, 255, 195, 0.3);
}

/* KEYFRAMES */
@keyframes neural-pulse {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.02); }
}

@keyframes scan-move {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Hover Effect Khusus AI Card */
.ai-card:hover {
    box-shadow: 0 0 30px rgba(0, 255, 195, 0.2);
}

.ai-card:hover .scan-line {
    animation-duration: 2s; /* Pas di-hover scan-nya makin kenceng (kayak lagi mikir keras) */
}

/* Efek Spesial buat WA Card (Stone 2.0) */
/* Efek Gabungan WA + AI (Cyber Green) */
.wa-ai-card {
    color: white;
    border: 1px solid rgba(37, 211, 102, 0.2) !important;
    background: linear-gradient(145deg, rgba(15, 28, 20, 0.9), rgba(5, 10, 7, 0.95));
    position: relative;
    overflow: hidden;
}
.ai-card h3 {
    color: rgb(205, 236, 243);
}
.wa-ai-card h3 {
    color: rgb(205, 236, 243);
}
/* Background pattern halus (Neural-style) */
.neural-network {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#25d366 0.5px, transparent 0.5px);
    background-size: 15px 15px;
    opacity: 0.05;
    z-index: 0;
}

/* Pulse Glow Hijau ala AI */
.wa-ai-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: #25d366;
    filter: blur(20px);
    border-radius: 28px;
    z-index: -1;
    opacity: 0.05;
    animation: wa-ai-pulse 4s infinite ease-in-out;
}

/* Floating Particle Hijau di pojok */
.wa-ai-card::after {
    content: '●';
    position: absolute;
    top: 15px;
    right: 15px;
    color: #25d366;
    font-size: 8px;
    text-shadow: 0 0 10px #25d366;
    animation: floating-blink 2s infinite;
}

@keyframes wa-ai-pulse {
    0%, 100% { opacity: 0.05; transform: scale(1); }
    50% { opacity: 0.15; transform: scale(1.05); }
}

@keyframes floating-blink {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0.3; transform: translateY(-5px); }
}

.wa-ai-card:hover {
    border-color: #25d366 !important;
    box-shadow: 0 0 25px rgba(37, 211, 102, 0.15);
}



h2 {
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 50px; /* Jarak ke konten bawah */
    background: linear-gradient(90deg, #fff, #00d2ff, #3a7bd5);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.3));
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* Layout buat underline */
    position: relative;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Garis Underline Utama */
h2::after {
    content: '';
    position: absolute;
    bottom: -4px;
    /*Jarakgarisdariteks*/left: 50%;
    transform: translateX(-50%);
    width: 70%;
    /*Garisnggakfull,biarelegan*/height: 2px;
    background: linear-gradient(90deg, transparent, #00d2ff, #3a7bd5, transparent);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
    border-radius: 2px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

/* Aksen Titik di Tengah (Opsional - biar makin sangar) */
/* Aksen Titik di Tengah yang Jalan Kanan-Kiri 
h2::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 15px #fff, 0 0 5px #00d2ff;
    z-index: 2;
    
    
    animation: scanner-move 3s ease-in-out infinite alternate;
}


@keyframes scanner-move {
    0% {
        left: 15%; 
        transform: translateX(0);
    }
    100% {
        left: 85%;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
}
}*/



.game-info .game-name {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa;
}

.game-info .game-id {
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
}


.modal-overlay {
    display: none; 
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #0f172a;
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 400px;
    position: relative;
    border: 1px solid rgba(0, 210, 255, 0.3);
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.2);
}

.modal-title {
    color: #00d2ff;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.game-list { display: flex; flex-direction: column; gap: 15px; }

.game-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.game-icon { font-size: 1.5rem; }
.game-label { font-size: 0.7rem; color: #888; text-transform: uppercase; margin: 0; }
.game-val { font-size: 1rem; color: #fff; font-weight: 600; margin: 0; }

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
}
/* Efek Dasar Gaming ID */
#openGamingModal {
    position: relative;
    border-color: #0011ff; /* Warna Neon Pink */
    color: #dbdde4;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efek Cahaya Pas Hover */
#openGamingModal:hover {
    background: #4800ff;
    color: #fff;
    box-shadow: 0 0 20px rgba(81, 0, 255, 0.6),                 0 0 40px rgba(25, 0, 255, 0.4);
    transform: translateY(-5px) scale(1.05);
     /* Naik dikit & membesar */
    -webkit-transform: translateY(-5px) scale(1.05);
    -moz-transform: translateY(-5px) scale(1.05);
    -ms-transform: translateY(-5px) scale(1.05);
    -o-transform: translateY(-5px) scale(1.05);
}

/* Animasi Pulse (Biar kayak tombol 'Press Start') */
@keyframes gaming-pulse {
    0% { box-shadow: 0 0 5px rgba(81, 0, 255, 0.4); }
    50% { box-shadow: 0 0 20px rgba(34, 0, 255, 0.7); }
    100% { box-shadow: 0 0 5px rgba(60, 0, 255, 0.4); }
}

/* Pasang animasinya pas idle biar orang gatel mau klik */
#openGamingModal {
    animation: gaming-pulse 2s infinite ease-in-out;
    -webkit-animation: gaming-pulse 2s infinite ease-in-out;
}

#openGamingModal:hover .social-icon {
    animation: glitch-icon 0.3s infinite;
}

@keyframes glitch-icon {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, 2px); }
    80% { transform: translate(1px, -2px); }
    100% { transform: translate(0); }
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f172a; /* Warna bg web lo */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Pastiin paling atas */
    transition: opacity 0.8s ease, visibility 0.8s;
}

.loader-content {
    text-align: center;
}

.loader-circle {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 210, 255, 0.1);
    border-top: 3px solid #00d2ff;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
}

.loader-text {
    font-size: 0.8rem;
    color: #fff;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.loader-text span {
    animation: blink 1.5s infinite;
}

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

@keyframes blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Class buat ngilangin loader */
.loader-hidden {
    opacity: 0;
    visibility: hidden;
}
#preloader {
    position: fixed;
    inset: 0;
    background: #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: all 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.knight-svg {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.5));
}

.knight-path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawKnight 2.5s ease-out forwards;
}

.plume-path {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: drawKnight 1.5s 1s ease-out forwards; /* Delay dikit */
}

/* Animasi Menggambar Logo */
@keyframes drawKnight {
    to {
        stroke-dashoffset: 0;
    }
}

/* Loader Text Style */
.loader-text {
    font-size: 0.7rem;
    color: #fff;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 400;
    opacity: 0.7;
}

/* Class saat Preloader Hilang */
.loader-hidden {
    clip-path: circle(0% at 50% 50%); /* Efek nutup ke tengah */
    opacity: 0;
}
.loader-status {
    width: 250px;
    margin: 0 auto;
}

#status-msg {
    font-size: 0.6rem;
    color: #00d2ff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    height: 15px; /* Biar teks gak lompat saat ganti */
}

.progress-bar-container {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

#progress-bar {
    width: 0%;
    height: 100%;
    background: #00d2ff;
    box-shadow: 0 0 10px #00d2ff;
    transition: width 0.3s ease;
}

#status-percent {
    font-size: 0.7rem;
    color: #666;
    font-family: monospace;
}