/* Mengatasi masalah Celah/Overflow di Mobile yang kamu sebutkan */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Background Kotak (Kertas Milimeter) */
.bg-grid { background-image: linear-gradient(to right, rgba(200, 208, 220, 0.4) 1px, transparent 1px), linear-gradient(to bottom, rgba(200, 208, 220, 0.4) 1px, transparent 1px); background-size: 40px 40px; }
.bg-grid-dark { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 40px 40px; }

/* Style untuk Chips/Pill Skill */
.skill-chip { padding: 6px 14px; background-color: transparent; border: 1px solid #e2e8f0; color: #475569; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; }
.dark .skill-chip { border-color: #334155; color: #cbd5e1; }

/* Style untuk List Skill & Badges */
.skill-list-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; }
.dark .skill-list-item { border-bottom-color: #1e293b; }

.badge-expert { padding: 4px 12px; border-radius: 9999px; font-size: 0.7rem; font-weight: 800; background-color: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.badge-advanced { padding: 4px 12px; border-radius: 9999px; font-size: 0.7rem; font-weight: 800; background-color: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.badge-intermediate { padding: 4px 12px; border-radius: 9999px; font-size: 0.7rem; font-weight: 800; background-color: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.dark .badge-expert { background-color: rgba(217, 119, 6, 0.2); border-color: rgba(217, 119, 6, 0.4); }
.dark .badge-advanced { background-color: rgba(126, 34, 206, 0.2); border-color: rgba(126, 34, 206, 0.4); }
.dark .badge-intermediate { background-color: rgba(3, 105, 161, 0.2); border-color: rgba(3, 105, 161, 0.4); }

/* Form Input Style (Sesuai Referensi Gambar) */
.form-input { width: 100%; padding: 14px 16px; background-color: #e2e8f0; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 0.875rem; font-weight: 600; color: #334155; outline: none; transition: all 0.2s; }
.form-input::placeholder { color: #64748b; font-weight: 500; }
.form-input:focus { background-color: #fff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.dark .form-input { background-color: #1e293b; border-color: #334155; color: #f8fafc; }
.dark .form-input:focus { background-color: #0f172a; }

/* Garis Navigasi Aktif */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: #2563eb; transition: width 0.35s ease-in-out; border-radius: 9999px; }
.nav-link:hover::after { width: 100%; }

/* Animasi Floating Badge */
@keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } }
.floating-badge { animation: floating 4s ease-in-out infinite; }
.delay-100 { animation-delay: 0.5s; }
.delay-300 { animation-delay: 1.5s; }

/* 3D Container */
.perspective-1000 { perspective: 1000px; }


/* ==========================================================
   KITASHOP PREMIUM EXTENSION v1
   Tambahkan di bagian paling bawah
========================================================== */

:root{
  --ks-primary:#2563eb;
  --ks-primary-light:#60a5fa;
  --ks-shadow:0 20px 45px rgba(37,99,235,.15);
  --ks-transition:.35s cubic-bezier(.22,.61,.36,1);
}

header{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:var(--ks-transition);
}

header.scrolled{
  background:rgba(255,255,255,.75)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.dark header.scrolled{
  background:rgba(15,23,42,.75)!important;
}

.nav-link{
  position:relative;
  transition:var(--ks-transition);
}

.nav-link::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:0;
  height:3px;
  transform:translateX(-50%);
  background:var(--ks-primary);
  border-radius:999px;
  transition:var(--ks-transition);
}

.nav-link:hover::after{
  width:80%;
}

#tilt-card{
  transition:transform .4s ease, box-shadow .4s ease;
}

#tilt-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--ks-shadow);
}

#skills .bg-white,
#services .bg-white,
#experience .bg-white,
#about .bg-white,
.dark #skills .dark\:bg-gray-800{
  transition:var(--ks-transition);
  border:1px solid transparent;
}

#skills .bg-white:hover,
#services .bg-white:hover,
#experience .bg-white:hover,
#about .bg-white:hover,
.dark #skills .dark\:bg-gray-800:hover{
  transform:translateY(-10px);
  border-color:#bfdbfe;
  box-shadow:var(--ks-shadow);
}

.skill-chip{
  transition:var(--ks-transition);
}

.skill-chip:hover{
  background:#2563eb;
  color:#fff;
  transform:translateY(-3px);
}

button,
a.bg-brand{
  transition:var(--ks-transition);
}

button:hover,
a.bg-brand:hover{
  transform:translateY(-3px);
}
#ks-cursor{
mix-blend-mode:normal;
box-shadow:0 0 20px rgba(37,99,235,.45);
}

#ks-cursor-box{
backdrop-filter:blur(3px);
background:rgba(37,99,235,.05);
box-shadow:
0 0 30px rgba(37,99,235,.18);
}
/* ===========================
PART 2
===========================*/

.mouse-glow{
    mix-blend-mode:screen;
    filter:blur(10px);
}

.glass-shine{
    opacity:.9;
}

#about .bg-white,
#skills .bg-white,
#services .bg-white,
#experience .bg-white{

transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;

}

#about .bg-white:hover,
#skills .bg-white:hover,
#services .bg-white:hover,
#experience .bg-white:hover{

box-shadow:
0 20px 45px rgba(37,99,235,.18);

border-color:#93c5fd;

}