/*--------------------------------------------------------------
# General (ULTIMATE LOCK)
--------------------------------------------------------------*/
html, body {
  background-color: #010e1b;
  height: 100%;
  /* Kunci 1: 'none' memaksa WebKit/Blink untuk mengabaikan OS scaling */
  -webkit-text-size-adjust: none !important;
  -moz-text-size-adjust: none !important;
  -ms-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

* {
  /* Terapkan secara universal ke semua elemen */
  -webkit-text-size-adjust: none !important;
  -moz-text-size-adjust: none !important;
  -ms-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

/* Kunci 2: Hack Font Boosting untuk Android (tambahkan 'div') */
p, h1, h2, h3, h4, h5, h6, a, span, li, div {
  max-height: 999999px;
}

/* ==========================================================
   KODE PENJINAK iOS & ANDROID JADUL (CROSS-BROWSER FIX)
   ========================================================== */

/* 1. Matikan gaya bawaan Apple (iOS) pada tombol dan form */
input, textarea, button, select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border-radius: 0; /* Reset border radius bawaan iOS */
}

/* 2. Hilangkan kotak biru/abu-abu saat tombol atau link diklik di HP */
a, button, .portfolio-wrap, .icon-box, .scroll-arrow {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important; /* Cegah pop-up menu di iOS saat ditekan lama */
}

/* 3. "Terjemahan" Flexbox untuk Android Jadul (Biar layout tidak numpuk) */
/* Tambahkan class pembungkus utama Anda di sini */
#header .container, #home, .nav-menu ul, .social-links, .hello-text, .custom-scrollbar-container {
  display: -webkit-box !important;      /* Android 4.4 ke bawah & iOS jadul */
  display: -ms-flexbox !important;      /* Internet Explorer 10 */
  display: -webkit-flex !important;     /* Chrome & Safari versi pertengahan */
  display: flex !important;             /* Standar Modern */
}

/* 4. Pastikan kelancaran Scroll Menyamping (Project) di iPhone */
.horizontal-portfolio {
  -webkit-overflow-scrolling: touch !important; /* Wajib agar scroll di iOS tidak kaku/seret */
}

/* 5. Cegah teks keluar jalur di browser jadul */
p, h1, h2, h3, h4, h5, h6, span {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

body {
  font-family: "Open Sans", sans-serif;
  color: #fff;
  position: relative;
  /* Kembali ke 'transparent' atau warna background sesuai kode asli Anda */
  background-color: #010e1b; 
  overflow-x: hidden;
  overflow-y: auto;
}

body::before {
  content: "";
  position: fixed;
  background: #010e1b;
  background-size: cover;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

@media (min-width: 1024px) {
  body::before {
    background-attachment: fixed;
  }
}

a {
  color: #12d640;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: #15bb62;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
}

/*--------------------------------------------------------------
# Header (FIXED TOP BAR)
--------------------------------------------------------------*/
#header {
  transition: all 0.5s;
  z-index: 997;
  padding: 0 15px;
  background: rgba(1, 14, 27, 0.95);
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(18, 214, 64, 0.3);
}

#header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Styling Logo Variasi (Mixed Case) */
#header .logo {
  font-size: 28px;
  margin: 0;      /* Hapus margin bawaan browser */
  padding: 0;     /* Hapus padding */
  line-height: 1; /* Rapatkan baris */
  display: flex;  /* Pastikan isinya mudah diatur */
  align-items: center; /* Center vertikal anak elemennya */
}

#header .logo a {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px; 
  text-transform: none; 
  transition: all 0.3s ease-in-out;
  display: inline-block;
  line-height: 1; /* Pastikan tinggi baris teks pas */
}

/* Efek Hover pada Logo */
#header .logo a:hover {
  color: #12d640; 
  transform: scale(1.05);
  text-shadow: 0px 0px 10px rgba(18, 214, 64, 0.6);
}

#header .logo a:hover span {
  color: #fff !important; 
}

#header h2, #header .social-links {
  display: none;
}

@media (max-width: 992px) {
  #header {
    height: 70px;
    padding: 10px 0;
  }
  #header h1 {
    font-size: 22px;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.nav-menu { margin: 0; }
.nav-menu ul { display: flex; margin: 0; padding: 0; list-style: none; align-items: center; }
.nav-menu li { margin-left: 25px; }
.nav-menu a {
  color: #fff; font-size: 15px; font-family: "Poppins", sans-serif;
  font-weight: 500; padding: 0 2px; position: relative; display: block;
}
.nav-menu a::before {
  content: ""; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0;
  background-color: #12d640; visibility: hidden; transition: all 0.3s ease-in-out 0s;
}
.nav-menu a:hover::before, .nav-menu li:hover > a::before, .nav-menu .active > a::before {
  visibility: visible; width: 100%;
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a { color: #12d640; }

/* Mobile Nav */
.mobile-nav-toggle {
  position: fixed; right: 15px; top: 20px; z-index: 9998; border: 0;
  background: none; font-size: 28px; transition: all 0.4s; outline: none !important;
  line-height: 1; cursor: pointer; text-align: right; color: #fff;
}
.mobile-nav {
  position: fixed;
  top: 70px;
  right: 15px;
  left: 15px;
  bottom: auto; 
  max-height: 70vh; 
  z-index: 9999;
  overflow-y: auto;
  background: rgba(1, 14, 27, 0.98); 
  border: 1px solid rgba(18, 214, 64, 0.3); 
  transition: ease-in-out 0.2s;
  opacity: 0;
  visibility: hidden;
  border-radius: 10px;
  padding: 10px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}
.mobile-nav * { margin: 0; padding: 0; list-style: none; }
.mobile-nav a {
  display: block; position: relative; color: #fff; padding: 12px 20px;
  font-weight: 500; outline: none; font-family: "Poppins", sans-serif;
}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
  color: #12d640; background: rgba(255, 255, 255, 0.05); text-decoration: none;
}
.mobile-nav-overly {
  width: 100%; height: 100%; z-index: 9997; top: 0; left: 0;
  position: fixed; background: rgba(0, 0, 0, 0.7); overflow: hidden; display: none;
}
.mobile-nav-active { overflow: hidden; }
.mobile-nav-active .mobile-nav { opacity: 1; visibility: visible; }

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  position: relative; width: 100%; top: auto; bottom: auto; opacity: 1; z-index: 1;
  padding: 100px 0 60px 0; overflow: visible;
}
.section-title { padding-bottom: 30px; }
.section-title h2 {
  font-size: 14px; font-weight: 500; padding: 0; line-height: 1px; margin: 0 0 20px 0;
  letter-spacing: 2px; text-transform: uppercase; color: #aaaaaa; font-family: "Poppins", sans-serif;
}
.section-title h2::after {
  content: ""; width: 120px; height: 1px; display: inline-block; background: #fff; margin: 4px 10px;
}
.section-title p {
  margin: 0; margin: -15px 0 15px 0; font-size: 36px; font-weight: 700;
  text-transform: uppercase; font-family: "Poppins", sans-serif; color: #fff;
}

/*--------------------------------------------------------------
# HOME
--------------------------------------------------------------*/
#home {
  height: 100vh; padding: 0; display: flex; align-items: center;
  justify-content: center; flex-direction: column;
}
#home h1 {
  font-size: 48px; margin: 0; line-height: 1; font-weight: 700; font-family: "Poppins", sans-serif;
}
#home h1 a { color: #fff; }
#home h2 {
  font-size: 24px; margin-top: 20px; color: #eee; text-align: center;
}
#home h2 span {
  border-bottom: 2px solid #12d640; padding-bottom: 6px; color: #12d640;
}
#home .social-links { margin-top: 40px; display: flex; }
#home .social-links a {
  font-size: 20px; display: flex; justify-content: center; align-items: center;
  background: rgba(255, 255, 255, 0.1); color: #fff; line-height: 1; margin: 0 10px;
  border-radius: 50%; width: 45px; height: 45px; transition: 0.3s;
}
#home .social-links a:hover { background: #12d640; }
@media (max-width: 768px) {
  #home h1 { font-size: 32px; }
  #home h2 { font-size: 18px; }
}

/* Menarik teks utama Home sedikit ke atas */
.main-content-home {
  margin-top: -100px; 
  position: relative;
  z-index: 10;
}

/* Responsif untuk Mobile agar tidak terlalu naik */
@media (max-width: 768px) {
  .main-content-home {
    margin-top: -60px; 
  }
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
/* ========================================================
   ENHANCED ABOUT SECTION (MODERN CYBER STYLE)
   ======================================================== */
.about-section-wrapper {
  position: relative;
  z-index: 5;
}

/* --- Bingkai Foto Profil --- */
.about-img-wrapper {
  position: relative;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(18, 214, 64, 0.1) 0%, rgba(1, 14, 27, 0) 100%);
  border: 1px solid rgba(18, 214, 64, 0.2);
  display: flex;
  justify-content: center;
  transition: all 0.4s ease;
}

.about-img-wrapper:hover {
  box-shadow: 0 0 25px rgba(18, 214, 64, 0.15);
  transform: translateY(-5px);
  border-color: rgba(18, 214, 64, 0.5);
}

.profile-glow {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
  filter: grayscale(15%); /* Sedikit dibuat dramatis */
  transition: all 0.4s ease;
}

.about-img-wrapper:hover .profile-glow {
  filter: grayscale(0%); /* Warna kembali normal saat di-hover */
}

/* Dekorasi Siku ala Cyberpunk */
.img-decor {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid transparent;
  transition: 0.3s;
  z-index: 3;
}
.img-decor.top-left {
  top: -1px; left: -1px;
  border-top-color: #12d640;
  border-left-color: #12d640;
}
.img-decor.bottom-right {
  bottom: -1px; right: -1px;
  border-bottom-color: #12d640;
  border-right-color: #12d640;
}

/* --- Kotak Deskripsi Teks --- */
.about-text-box {
  background: rgba(9, 32, 58, 0.5);
  border-left: 4px solid #12d640;
  padding: 20px 25px;
  border-radius: 0 8px 8px 0;
}

.about-desc {
  font-size: 15px;
  line-height: 1.8;
  color: #ddd;
  margin: 0;
  text-align: justify;
  font-family: "Open Sans", sans-serif;
}

/* --- Info Grid (Desain Kotak Pengganti List) --- */
.about-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 Kolom di Desktop */
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

/* Interaksi Hover (Sedikit bergeser ke kanan) */
.info-item:hover {
  background: rgba(18, 214, 64, 0.05);
  border-color: rgba(18, 214, 64, 0.3);
  transform: translateX(5px); 
}

.info-item .icon-box {
  width: 45px;
  height: 45px;
  background: #09203a;
  border-radius: 8px; /* Dibuat agak kotak menyesuaikan tema technical */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  color: #12d640;
  font-size: 22px;
  border: 1px solid rgba(18, 214, 64, 0.2);
}

.info-item:hover .icon-box {
  background: #12d640;
  color: #fff;
}

.info-content {
  display: flex;
  flex-direction: column;
}

.info-content strong {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
  font-family: "Poppins", sans-serif;
}

.info-content span {
  color: #bbb;
  font-size: 14px;
}

.btn-more {
  color: #12d640 !important;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: 0.3s;
}

.btn-more:hover {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(18, 214, 64, 0.8);
}

/* --- Penyesuaian Responsif Layar Mobile --- */
@media (max-width: 768px) {
  .about-info-grid {
    grid-template-columns: 1fr; /* Memaksa 1 kolom turun ke bawah di HP */
    gap: 15px;
  }
  
  .about-img-wrapper {
    margin-bottom: 10px;
  }
  
  .about-text-box {
    padding: 15px;
    border-left-width: 3px;
  }
  
  .about-desc {
    text-align: left; /* Justify kurang enak dibaca di layar HP */
  }
}

.about-me .content h3 { font-weight: 700; font-size: 26px; color: #12d640; }
.about-me .content ul { list-style: none; padding: 0; }
.about-me .content ul li { padding-bottom: 10px; }
.about-me .content ul i { font-size: 20px; padding-right: 2px; color: #12d640; }
.about-me .content p:last-child { margin-bottom: 0; }

/*--------------------------------------------------------------
# Interests
--------------------------------------------------------------*/
.interests { margin-top: 60px; }
.interests .icon-box {
  display: flex; align-items: center; padding: 20px; background: #09203a;
  transition: ease-in-out 0.3s; border: 1px solid transparent;
}
.interests .icon-box i { font-size: 32px; padding-right: 10px; line-height: 1; color: #ffbb2c; }
.interests .icon-box h3 { font-weight: 700; margin: 0; padding: 0; line-height: 1; font-size: 16px; color: #fff; }

/*--------------------------------------------------------------
# Services & Skills Box
--------------------------------------------------------------*/
.services .icon-box {
  text-align: center;
  background: #09203a;
  padding: 40px 30px;
  transition: all ease-in-out 0.3s;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}

.services .icon-box .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: #12d640; 
  border-radius: 5px;
  transition: all .3s ease-out 0s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.services .icon-box .icon i {
  color: #fff;
  font-size: 28px;
  transition: 0.3s;
}

.services .icon-box h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.services .icon-box h4 a {
  color: #fff;
  transition: 0.3s;
}

.services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
  color: #ddd;
}

.services .icon-box:hover {
  background: #0c2b4b;
  transform: translateY(-5px);
}

.services .icon-box:hover .icon {
  background: #fff !important; 
}

/* ========================================================
   SERVICE BOX STYLING (NEW ACCESSORIES)
   ======================================================== */

/* Container Relative agar aksesoris bisa diatur posisinya */
.icon-box {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}

/* 1. GAYA STATUS BADGE ("Available") */
.service-status {
  position: absolute;
  top: 15px;
  left: 15px;          /* ⬅ pindah ke kiri */
  /* right: 15px; */   /* ❌ hapus / nonaktifkan */

  background: rgba(255, 255, 255, 0.1);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
}

/* Titik Hijau Berkedip */
.service-status .dot {
  width: 8px;
  height: 8px;
  background-color: #12d640;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 10px #12d640;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}


/* 2. GAYA WATERMARK ICON (Icon Raksasa di Belakang) */
.watermark-icon {
  position: absolute;
  bottom: -20px;   /* Muncul dari bawah */
  right: -20px;    /* Muncul dari kanan */
  font-size: 9rem; /* Ukuran RAKSASA */
  opacity: 0.07;   /* Sangat transparan */
  z-index: -1;
  transform: rotate(-15deg); /* Sedikit miring agar artistik */
  transition: all 0.5s ease;
}

/* Efek saat Hover: Icon Watermark berputar sedikit dan mendekat */
.icon-box:hover .watermark-icon {
  transform: rotate(0deg) scale(1.1);
  opacity: 0.15;   /* Sedikit lebih terlihat */
  bottom: -10px;
  right: -10px;
}

/* ========================================================
   COLOR CONFIGURATION (Warna-warni sesuai Box)
   ======================================================== */

/* --- BOX 1: WEB DEVELOPMENT (BIRU MUDA) --- */
.services .row > div:nth-of-type(1) .icon-box .icon { background: #00b0ff; border-color: #00b0ff; }
.services .row > div:nth-of-type(1) .icon-box:hover { border-color: #00b0ff !important; }
.services .row > div:nth-of-type(1) .icon-box:hover h4 a,
.services .row > div:nth-of-type(1) .icon-box:hover h4 { color: #00b0ff !important; }
.services .row > div:nth-of-type(1) .icon-box:hover .icon i { color: #00b0ff !important; }
/* Watermark ikut Biru */
.services .row > div:nth-of-type(1) .icon-box .watermark-icon { color: #00b0ff; }

/* --- BOX 2: MOBILE APP (MERAH) --- */
.services .row > div:nth-of-type(2) .icon-box .icon { background: #ff5252; border-color: #ff5252; }
.services .row > div:nth-of-type(2) .icon-box:hover { border-color: #ff5252 !important; }
.services .row > div:nth-of-type(2) .icon-box:hover h4 a,
.services .row > div:nth-of-type(2) .icon-box:hover h4 { color: #ff5252 !important; }
.services .row > div:nth-of-type(2) .icon-box:hover .icon i { color: #ff5252 !important; }
/* Watermark ikut Merah */
.services .row > div:nth-of-type(2) .icon-box .watermark-icon { color: #ff5252; }

/* --- BOX 3: API & DATABASE (KUNING) --- */
.services .row > div:nth-of-type(3) .icon-box .icon { background: #ffd740; border-color: #ffd740; }
.services .row > div:nth-of-type(3) .icon-box:hover { border-color: #ffd740 !important; }
.services .row > div:nth-of-type(3) .icon-box:hover h4 a,
.services .row > div:nth-of-type(3) .icon-box:hover h4 { color: #ffd740 !important; }
.services .row > div:nth-of-type(3) .icon-box:hover .icon i { color: #ffd740 !important; }
/* Watermark ikut Kuning */
.services .row > div:nth-of-type(3) .icon-box .watermark-icon { color: #ffd740; }

/* --- BOX 4: AI & AUTOMATION (UNGU) --- */
.services .row > div:nth-of-type(4) .icon-box .icon { background: #7c4dff; border-color: #7c4dff; }
.services .row > div:nth-of-type(4) .icon-box:hover { border-color: #7c4dff !important; }
.services .row > div:nth-of-type(4) .icon-box:hover h4 a,
.services .row > div:nth-of-type(4) .icon-box:hover h4 { color: #7c4dff !important; }
.services .row > div:nth-of-type(4) .icon-box:hover .icon i { color: #7c4dff !important; }
/* Watermark ikut Ungu */
.services .row > div:nth-of-type(4) .icon-box .watermark-icon { color: #7c4dff; }

/* --- BOX 5: TECHNICAL SUPPORT (ORANYE) --- */
.services .row > div:nth-of-type(5) .icon-box .icon { background: #ff6f00; border-color: #ff6f00; }
.services .row > div:nth-of-type(5) .icon-box:hover { border-color: #ff6f00 !important; }
.services .row > div:nth-of-type(5) .icon-box:hover h4 a,
.services .row > div:nth-of-type(5) .icon-box:hover h4 { color: #ff6f00 !important; }
.services .row > div:nth-of-type(5) .icon-box:hover .icon i { color: #ff6f00 !important; }
/* Watermark ikut Oranye */
.services .row > div:nth-of-type(5) .icon-box .watermark-icon { color: #ff6f00; }

/* Container Tombol: Mengatur posisi tombol di kanan bawah */
.service-cta {
  margin-top: 25px;
  text-align: right; /* Posisi tombol di kanan */
  border-top: 1px solid rgba(255, 255, 255, 0.05); /* Garis pemisah sangat halus */
  padding-top: 15px;
}

/* Gaya Tombol Kapsul (Pill) */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  background: rgba(18, 214, 64, 0.05); /* Background hijau sangat transparan */
  border: 1px solid rgba(18, 214, 64, 0.4); /* Border hijau tipis */
  border-radius: 50px; /* Membuat bentuk kapsul bulat */
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

/* Gaya Icon di dalam tombol */
.cta-btn i {
  margin-right: 8px;
  font-size: 18px;
  color: #12d640; /* Icon warna hijau branding */
  transition: 0.3s;
}

/* EFEK HOVER (Saat kursor menyentuh tombol) */
.cta-btn:hover {
  background: #12d640; /* Tombol jadi hijau penuh */
  border-color: #12d640;
  color: #fff; /* Teks jadi putih */
  transform: translateY(-3px); /* Tombol sedikit naik ke atas (efek melayang) */
  box-shadow: 0 5px 15px rgba(18, 214, 64, 0.3); /* Ada bayangan hijau (glow) */
}

.cta-btn:hover i {
  color: #fff; /* Icon berubah jadi putih saat hover */
}

/* ========================================================
   FIX FINAL: NON-TECHNICAL (FORCE GREEN IDENTITY)
   Memaksa bagian ini agar TIDAK mengikuti warna-warni Service
   ======================================================== */

/* 1. RESET: Paksa Border & Background Icon kembali ke Hijau (Normal State) */
.services .row.non-tech > div .icon-box {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #09203a !important;
  transform: translateY(0);
}

.services .row.non-tech > div .icon-box .icon { 
  background: #12d640 !important; 
  border: 1px solid #12d640 !important;
}

.services .row.non-tech > div .icon-box .icon i { 
  color: #fff !important; 
}

/* 2. HOVER: Paksa Interaksi menjadi Hijau & Putih (Override Rainbow) */

/* Border Kotak saat Hover -> HIJAU */
.services .row.non-tech > div .icon-box:hover { 
  border-color: #12d640 !important; 
  transform: translateY(-8px) !important; /* Efek naik */
  box-shadow: 0 10px 40px -10px rgba(18, 214, 64, 0.35) !important;
}

/* Background Icon saat Hover -> PUTIH */
.services .row.non-tech > div .icon-box:hover .icon { 
  background: #fff !important; 
  border-color: #12d640 !important;
  transform: scale(1.1) rotate(3deg) !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important;
}

/* Warna Simbol Icon saat Hover -> HIJAU */
.services .row.non-tech > div .icon-box:hover .icon i { 
  color: #12d640 !important; 
}

/* Judul (H4) saat Hover -> HIJAU */
.services .row.non-tech > div .icon-box:hover h4,
.services .row.non-tech > div .icon-box:hover h4 a { 
  color: #12d640 !important; 
}

/* Garis Bawah (::after) saat Hover -> HIJAU */
.services .row.non-tech > div .icon-box:hover::after { 
  background: #12d640 !important; 
  width: 100% !important;
}

/* 3. CLEANUP: Hapus Aksesoris Service (Angka/Badge) di bagian ini */
.services .row.non-tech > div .icon-box .bg-number,
.services .row.non-tech > div .icon-box .watermark-icon,
.services .row.non-tech > div .icon-box .service-status,
.services .row.non-tech > div .icon-box .service-cta { 
  display: none !important; 
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item { margin-bottom: 30px; }
.portfolio #portfolio-flters {
  padding: 0; margin: 0 auto 20px auto; list-style: none; text-align: center;
}
.portfolio #portfolio-flters li {
  cursor: pointer; display: inline-block; padding: 8px 16px; font-size: 14px;
  font-weight: 600; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, 0.1); margin: 0 3px 10px 3px;
  transition: all 0.3s; border-radius: 4px;
}
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active { background: #12d640; }
.portfolio .portfolio-wrap {
  transition: 0.3s; position: relative; overflow: hidden; z-index: 1;
  background: rgba(0, 0, 0, 0.6); border-radius: 5px;
}
.portfolio .portfolio-wrap::before {
  content: ""; background: rgba(0, 0, 0, 0.6); position: absolute;
  left: 0; right: 0; top: 0; bottom: 0; transition: 0.3s; z-index: 2; opacity: 0;
}
.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  text-align: center; z-index: 3; transition: 0.3s;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.portfolio .portfolio-wrap .portfolio-info h4 { font-size: 20px; color: #fff; font-weight: 600; }
.portfolio .portfolio-wrap .portfolio-info p { color: #fff; font-size: 14px; text-transform: uppercase; }
.portfolio .portfolio-wrap .portfolio-links a {
  color: #fff; margin: 0 4px; font-size: 28px; display: inline-block; transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a:hover { color: #12d640; }
.portfolio .portfolio-wrap:hover::before { opacity: 1; }
.portfolio .portfolio-wrap:hover .portfolio-info { opacity: 1; }

#education .portfolio {
  margin-top: 30px !important; padding-top: 10px; border-top: none;
}

@media (min-width: 992px) {
  .portfolio .portfolio-container {
    min-height: 800px; 
    transition: min-height 0.4s ease;
  }
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  color: #444; padding: 20px; width: 100%; background: #09203a; border-radius: 5px;
}
.contact .info-box i.bx {
  font-size: 24px; color: #12d640; border-radius: 50%; padding: 14px;
  float: left; background: rgba(255, 255, 255, 0.1);
}
.contact .info-box h3 { font-size: 20px; color: #fff; font-weight: 700; margin: 10px 0 8px 68px; }
.contact .info-box p { padding: 0; color: #ddd; line-height: 24px; font-size: 14px; margin: 0 0 0 68px; }
.contact .info-box .social-links { margin: 5px 0 0 68px; display: flex; }
.contact .info-box .social-links a {
  font-size: 18px; display: inline-block; color: #fff; line-height: 1; margin-right: 12px; transition: 0.3s;
}
.contact .info-box .social-links a:hover { color: #12d640; }
.contact .php-email-form { padding: 30px; background: rgba(255, 255, 255, 0.08); border-radius: 5px; }
.contact .php-email-form input, .contact .php-email-form textarea {
  border-radius: 0; box-shadow: none; font-size: 14px;
  background: rgba(255, 255, 255, 0.08); border: 0; transition: 0.3s; color: #fff;
}
.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
  background-color: rgba(255, 255, 255, 0.15);
}
.contact .php-email-form button[type="submit"] {
  background: #12d640; border: 0; padding: 10px 30px; color: #fff; transition: 0.4s; border-radius: 4px;
}
.contact .php-email-form button[type="submit"]:hover { background: #15bb62; }

/*--------------------------------------------------------------
# Credits
--------------------------------------------------------------*/
.credits {
  position: fixed; right: 15px; bottom: 15px; font-size: 13px; color: #fff; z-index: 996; opacity: 0.8;
}
.credits a { color: #12d640; transition: 0.3s; }
.credits a:hover { color: #fff; }

/* ========================================================
   CUSTOM STYLE: Mobile Nav Animation
   ======================================================== */
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (min-width: 992px) {
  body .mobile-nav-toggle { display: none !important; }
}
@media (max-width: 991px) {
  body .mobile-nav-toggle {
    width: 45px !important; height: 45px !important; border-radius: 50% !important;
    padding: 0 !important; display: flex !important; align-items: center !important;
    justify-content: center !important; position: fixed !important; right: 15px !important;
    top: 13px !important; z-index: 9999 !important; background: transparent !important;
    border: none !important; transition: all 0.3s ease;
  }
  body .mobile-nav-toggle i { color: #fff !important; font-size: 24px !important; }
  body .mobile-nav-toggle.home-active {
    background: rgba(18, 214, 64, 0.2) !important; border: 1px solid rgba(18, 214, 64, 0.5) !important;
  }
  body .mobile-nav-toggle.home-active::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%; border: 2px solid rgba(18, 214, 64, 0.8); z-index: -1;
    animation: pulse-ring 2s infinite;
  }
  body.mobile-nav-active .mobile-nav-toggle { background: transparent !important; border: none !important; }
  body.mobile-nav-active .mobile-nav-toggle::before { display: none !important; }
}

/* ========================================================
   CUSTOM STYLE: EDUCATION BOX (Split Layout)
   ======================================================== */
.edu-box {
  padding: 0 !important; 
  border-radius: 4px; 
  overflow: hidden; 
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%; 
  background-color: transparent; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
}

.edu-img {
  background-color: #ffffff; 
  width: 100%;
  height: 160px; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px; 
  border-bottom: 1px solid rgba(0,0,0,0.1); 
}

.edu-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; 
}

.edu-content {
  background-color: #0b1829; 
  padding: 25px;
  text-align: left; 
  flex-grow: 1; 
  color: #fff;
}

.edu-degree {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-style: italic;
  color: #d1d1d1; 
  margin-bottom: 5px;
}

.edu-date {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 20px; 
}

.edu-details h6 {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 10px;
}

.edu-details ul {
  padding-left: 20px; 
  margin-bottom: 0;
  list-style-type: disc;
}

.edu-details ul li {
  font-size: 14px;
  color: #f0f0f0;
  margin-bottom: 5px;
  line-height: 1.5;
}

#education .portfolio {
  margin-top: 40px !important;
  border: none !important;
}

/* ========================================================
   MODERN HOME SECTION (Glitch, Particles, Scroll)
   ======================================================== */
#home {
  width: 100%;
  height: 100vh;
  position: relative;
  background: radial-gradient(circle at center, #0b1829 0%, #010e1b 100%);
  overflow: hidden;
}

/* --- 1. Hello Text --- */
.hello-text {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff; 
  margin-bottom: 15px; 
  font-family: "Poppins", sans-serif;
  letter-spacing: 4px; 
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px; 
  animation: fadeInDown 1s ease-out;
}

.hello-text::before,
.hello-text::after {
  content: "";
  display: inline-block;
  height: 2px; 
  width: 40px; 
  background-color: #12d640; 
  border-radius: 2px;
}

/* --- 4. Posisi Social Links --- */
#home .social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 35px; 
}

#home .social-links a {
  font-size: 24px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  line-height: 1;
  padding: 10px;
  margin: 0 10px;
  border-radius: 50%;
  text-align: center;
  width: 45px;
  height: 45px;
  transition: 0.3s;
  display: flex; 
  align-items: center;
  justify-content: center;
}

#home .social-links a:hover {
  background: #12d640;
  color: #fff;
  transform: translateY(-3px); 
}

/* --- 2. Glitch Name Effect --- */
.glitch-name {
  font-size: 70px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 3px;
  position: relative;
  display: inline-block;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
  
  /* PERBAIKAN: Masukkan di dalam kurung kurawal */
  white-space: nowrap; 
}

.glitch-name::before,
.glitch-name::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #010e1b; 
}

.glitch-name::before {
  left: 2px;
  text-shadow: -1px 0 #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch-name::after {
  left: -2px;
  text-shadow: -1px 0 #00fff9;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(30px, 9999px, 10px, 0); }
  20% { clip: rect(80px, 9999px, 90px, 0); }
  40% { clip: rect(10px, 9999px, 50px, 0); }
  60% { clip: rect(60px, 9999px, 20px, 0); }
  80% { clip: rect(20px, 9999px, 70px, 0); }
  100% { clip: rect(90px, 9999px, 30px, 0); }
}

@keyframes glitch-anim2 {
  0% { clip: rect(10px, 9999px, 80px, 0); }
  20% { clip: rect(50px, 9999px, 10px, 0); }
  40% { clip: rect(20px, 9999px, 60px, 0); }
  60% { clip: rect(90px, 9999px, 30px, 0); }
  80% { clip: rect(30px, 9999px, 90px, 0); }
  100% { clip: rect(70px, 9999px, 20px, 0); }
}

/* RESPONSIF: Pastikan 1 baris di HP */
@media (max-width: 768px) {
  .glitch-name { 
    /* Saya ubah ke 32px agar muat 1 baris di HP kecil (iPhone SE/Galaxy S) */
    /* Jika 40px, teks "Rizkha Tegar" mungkin terpotong di layar sempit */
    font-size: 32px !important; 
    
    /* PERBAIKAN: Masukkan nowrap di dalam sini juga */
    white-space: nowrap !important; 
  }
  
  .hello-text { font-size: 18px; }
}

/* --- 3. Role Text --- */
.role-text {
  margin-top: 15px;
  font-size: 24px;
  color: #ddd;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  
  /* TAMBAHKAN INI: Paksa teks tetap 1 baris agar kursor tidak turun */
  white-space: nowrap; 
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

/* --- 4. Background Animated Squares --- */
#home {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #010e1b; 
  overflow: hidden;
}

#matrix-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; 
  opacity: 0.25; 
}

.main-content-home {
    position: relative;
    z-index: 10;
}

/* --- 5. Scroll Down Animation (Default / Desktop) --- */
.scroll-down-container {
  position: absolute;
  bottom: 120px; /* Jarak untuk Desktop */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
}

/* --- Khusus untuk Layar Mobile (Lebar maksimal 768px) --- */
@media (max-width: 768px) {
  .scroll-down-container {
    /* Dinaikkan sedikit dari 12% menjadi 16% (bisa disesuaikan jika masih kurang pas) */
    bottom: 16% !important; 
    /* Hapus 'scale' agar ukuran mouse kembali standar / 100% */
    transform: translateX(-50%) !important; 
  }
  
  /* Kurangi sedikit font H1 agar aman di setting layar ekstrem */
  .glitch-name {
    font-size: 28px !important;
  }
}

.mouse {
  width: 26px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 20px;
  margin: 0 auto 10px auto;
  position: relative;
}

.wheel {
  width: 4px;
  height: 8px;
  background: #12d640;
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: wheel-scroll 1.5s infinite;
}

@keyframes wheel-scroll {
  0% { opacity: 1; top: 6px; }
  100% { opacity: 0; top: 20px; }
}

.arrow-scroll span {
  display: block;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin: -5px auto 0 auto;
  animation: arrow-scroll 2s infinite;
}

.arrow-scroll span:nth-child(2) { animation-delay: -0.2s; }
.arrow-scroll span:nth-child(3) { animation-delay: -0.4s; }

@keyframes arrow-scroll {
  0% { opacity: 0; transform: rotate(45deg) translate(-5px, -5px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: rotate(45deg) translate(5px, 5px); }
}

/* ========================================================
   RESPONSIVE FIXES (Mobile)
   ======================================================== */
@media (max-width: 768px) {
  
  /* 1. CONTAINER UTAMA: Otak dari segala posisi */
  .main-content-home {
    display: flex !important;
    flex-direction: column !important; /* Susun ke bawah */
    align-items: center !important;    /* PAKSA RATA TENGAH (Kanan-Kiri) */
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    
    /* --- PERBAIKAN: Menarik Konten ke Atas --- */
    padding-top: 0 !important;       /* Hapus padding yang tadinya mendorong ke bawah */
    margin-top: -120px !important;   /* Tarik ke atas menggunakan margin negatif */
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2. HELLO TEXT (Baris 1) */
  .hello-text { 
    font-size: 16px !important; 
    
    /* Agar garis dan teks "Hello" ada di tengah */
    display: flex !important;
    justify-content: center !important; 
    width: 100% !important;
    
    /* Jarak ke Nama (15px) */
    margin-bottom: 15px !important; 
  }

  /* 3. NAMA RIZKHA TEGAR (Baris 2) */
  .glitch-name { 
    font-size: 30px !important; /* Ukuran aman */
    white-space: nowrap !important; /* 1 Baris */
    
    /* Trik Jitu Center: Blok penuh, teks di tengah */
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    
    /* Reset margin kiri-kanan agar tidak geser */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    
    /* Jarak ke Role (15px) */
    margin-bottom: 15px !important; 
  }
  
  /* 4. ROLE TEXT (Baris 3) */
  .role-text {
    font-size: 20px !important;
    
    /* Trik Jitu Center */
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    
    /* Reset margin agar jarak murni 15px dari nama */
    margin-top: 0 !important; 
  }

  /* ========================================================
     FIX INTERESTS SECTION (FONT BESAR TAPI TETAP 1 BARIS)
     ======================================================== */
  .interests .icon-box {
    /* Padding diperkecil (10px) agar ada ruang lebih untuk teks font besar */
    padding: 10px 12px !important; 
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    overflow: hidden !important; 
  }

  /* Kunci Ikon */
  .interests .icon-box i {
    font-size: 32px !important; /* Ukuran ikon dikembalikan besar */
    margin-right: 10px !important;
    flex-shrink: 0 !important; /* Ikon dilarang mengecil/gepeng */
  }

  /* Kunci Teks */
  .interests .icon-box h3 {
    font-size: 16px !important; /* DIKEMBALIKAN KE 16PX (UKURAN NORMAL) */
    white-space: nowrap !important; /* Tetap dipaksa 1 baris */
    margin: 0 !important;
    line-height: 1.2 !important;
    
    /* Agar aman jika layar sangat kecil */
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }
  
  .portfolio .portfolio-container {
    min-height: 300px !important; 
    transition: none !important; 
    overflow: visible !important; 
  }

  .isotope,
  .isotope .isotope-item {
      -webkit-transition-duration: 0s !important;
      -moz-transition-duration: 0s !important;
      -ms-transition-duration: 0s !important;
      -o-transition-duration: 0s !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
  }

  #portfolio {
    padding-bottom: 10px !important; 
    margin-bottom: 0px !important;
  }

  .interests {
    margin-top: 53px !important; 
    padding-top: 0 !important;
  }
  
  #education {
    padding-bottom: 20px !important; 
    margin-bottom: 0px !important;
  }
  
  #education .portfolio {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
    border: none !important;
  }

  #experience {
    padding-top: 80px !important; 
    margin-top: 0px !important;
  }
  
  #experience .section-title {
    padding-bottom: 10px !important; 
  }

  .portfolio-item { 
    margin-bottom: 30px !important; 
    width: 100%; 
  }
  
  .portfolio .portfolio-wrap .portfolio-info { 
    padding: 10px !important; 
    background: rgba(0, 0, 0, 0.7) !important;
  }
  
  .portfolio .portfolio-wrap .portfolio-info h4 { 
    font-size: 18px !important; 
    margin-bottom: 5px;
  }
  
  .portfolio .portfolio-wrap .portfolio-links a { 
    font-size: 20px !important; 
    width: 35px !important; 
    height: 35px !important; 
  }
  
  .portfolio-info h4[style] {
    font-size: 14px !important;
  }
  
  .portfolio-wrap::before, 
  .portfolio-wrap::after {
    width: 20px !important;
    height: 20px !important;
    border-width: 2px !important; 
  }
  .portfolio-wrap::before { top: 10px !important; left: 10px !important; }
  .portfolio-wrap::after { bottom: 10px !important; right: 10px !important; }
}

/* ========================================================
   FIX FINAL: BRACKETS [ ]
   ======================================================== */
.portfolio-wrap {
  cursor: pointer;
  position: relative; 
  z-index: 1;
}

.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7) !important; 
  z-index: 10; 
  transition: all 0.4s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-wrap::before,
.portfolio .portfolio-wrap::after {
  content: "" !important;
  position: absolute !important;
  width: 30px !important;
  height: 30px !important;
  border-color: #ffffff !important;
  border-style: solid !important;
  background: transparent !important; 
  opacity: 0;
  transition: all 0.4s ease-in-out;
  z-index: 20 !important; 
  pointer-events: none;
}

/* --- SETTING SIKU KIRI ATAS [ --- */
.portfolio .portfolio-wrap::before {
  top: 15px !important;
  left: 15px !important;
  right: auto !important; 
  bottom: auto !important;
  border-width: 0 !important; 
  border-top-width: 3px !important;
  border-left-width: 3px !important;
  transform: translate(10px, 10px); 
}

/* --- SETTING SIKU KANAN BAWAH ] --- */
.portfolio .portfolio-wrap::after {
  bottom: 15px !important;
  right: 15px !important;
  top: auto !important;
  left: auto !important;
  border-width: 0 !important; 
  border-bottom-width: 3px !important;
  border-right-width: 3px !important;
  transform: translate(-10px, -10px); 
}

.portfolio .portfolio-wrap:hover::before,
.portfolio .portfolio-wrap:active::before {
  opacity: 1;
  transform: translate(0, 0);
}

.portfolio .portfolio-wrap:hover::after,
.portfolio .portfolio-wrap:active::after {
  opacity: 1;
  transform: translate(0, 0);
}

@media (max-width: 768px) {
  .portfolio .portfolio-wrap::before,
  .portfolio .portfolio-wrap::after {
    width: 20px !important;
    height: 20px !important;
  }
}

#education .portfolio-item:last-child .portfolio-info {
   background: transparent !important;
   opacity: 1 !important; 
}

/* ========================================================
   CUSTOM: PERBESAR ICON INFO (i) DI PROJECTS
   ======================================================== */
.portfolio .portfolio-wrap .portfolio-links a {
  font-size: 22px !important;   
  width: 44px !important;       
  height: 44px !important;      
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.6) !important; 
  border-radius: 50%;
  margin: 0 5px;
  transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  background: #12d640 !important; 
  color: #fff !important;
}

@media (max-width: 768px) {
  .portfolio .portfolio-wrap .portfolio-links a {
    font-size: 22px !important; 
    width: 36px !important;     
    height: 36px !important;    
  }
}

/* ========================================================
   KHUSUS HEADER: STRONG GLITCH
   ======================================================== */
#header .logo a.header-glitch {
  position: relative;
  display: inline-block;
  font-weight: 700;
  text-decoration: none !important;
  z-index: 10; 
  
  /* Background Gradient */
  background-image: linear-gradient(
    110deg,
    #12d640 0%,    
    #00fff2 25%,   
    #ffffff 50%,   
    #00fff2 75%,   
    #12d640 100%   
  ) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  
  animation: shineMove 5s linear infinite;
  
  /* PERBAIKAN: Beri ruang untuk kaki 'g' tapi tarik balik agar center */
  line-height: 1.2 !important;    /* Sedikit dilonggarkan */
  padding-bottom: 10px !important; /* Ruang aman agar 'g' tidak kepotong */
  margin-bottom: -5px !important;  /* Kompensasi: Tarik balik ke bawah agar tetap Center */
  vertical-align: middle;
}

#header .logo a.header-glitch::before,
#header .logo a.header-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none !important;
  z-index: -1; 
  -webkit-text-fill-color: initial !important; 
  text-decoration: none !important;
}

#header .logo a.header-glitch::before,
#header .logo a.header-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none !important;
  z-index: -1; 
  -webkit-text-fill-color: initial !important; 
  text-decoration: none !important;
}

#header .logo a.header-glitch::before {
  color: #ff00ff !important;
  animation: glitch-strong-1 4s infinite linear alternate-reverse;
}

#header .logo a.header-glitch::after {
  color: #00ffff !important;
  animation: glitch-strong-2 3.5s infinite linear alternate-reverse;
}

@keyframes shineMove {
  0% { background-position: 0% center; }
  100% { background-position: -300% center; }
}

@keyframes glitch-strong-1 {
  0% { opacity: 0; -webkit-clip-path: inset(50% 0 50% 0); transform: translate(0); }
  3% { opacity: 1; -webkit-clip-path: inset(10% 0 60% 0); transform: translate(-3px, 0); }
  6% { -webkit-clip-path: inset(80% 0 5% 0); transform: translate(3px, 0); }
  9% { opacity: 0; transform: translate(0); }
  100% { opacity: 0; }
}

@keyframes glitch-strong-2 {
  0% { opacity: 0; transform: translate(0); }
  50% { opacity: 0; transform: translate(0); }
  52% { opacity: 1; -webkit-clip-path: inset(0 0 80% 0); transform: translate(3px, 0); }
  55% { -webkit-clip-path: inset(40% 0 40% 0); transform: translate(-3px, 0); }
  58% { opacity: 0; transform: translate(0); }
  100% { opacity: 0; }
}

#header .logo a.header-glitch:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 5px rgba(18, 214, 64, 0.8));
  transition: 0.2s;
}
#header .logo a.header-glitch:hover::before,
#header .logo a.header-glitch:hover::after {
  animation: none;
  opacity: 0;
  display: none;
}

/* --- CUSTOM CAROUSEL STYLE FOR PORTFOLIO --- */
.portfolio-wrap .carousel-item img {
  width: 100%;
  height: auto !important; 
  object-fit: contain;     
  max-height: 500px;       
}

.portfolio-wrap .carousel-control-prev,
.portfolio-wrap .carousel-control-next {
  width: 15%; 
  opacity: 0; 
  transition: 0.3s;
  z-index: 20; 
}

.portfolio-wrap:hover .carousel-control-prev,
.portfolio-wrap:hover .carousel-control-next {
  opacity: 1;
}

.portfolio-wrap .carousel-control-prev-icon,
.portfolio-wrap .carousel-control-next-icon {
  width: 36px;  
  height: 36px;
  background-color: rgba(0, 0, 0, 0.6); 
  border-radius: 50%;
  background-size: 55% 55%; 
}

.portfolio-wrap .portfolio-info {
  pointer-events: none; 
}
.portfolio-wrap .portfolio-info .portfolio-links a {
  pointer-events: auto;
}

@media (max-width: 768px) {
  .portfolio-wrap .carousel-control-prev-icon,
  .portfolio-wrap .carousel-control-next-icon {
    width: 32px;  
    height: 32px; 
    background-size: 50% 50%;
  }
  
  .portfolio-wrap .carousel-control-prev,
  .portfolio-wrap .carousel-control-next {
    width: 15%; 
  }
}

/* ========================================================
   ANIMASI MUNCUL SATU PER SATU (SLOW & SMOOTH)
   ======================================================== */
.reveal-item {
  opacity: 0;
  transform: translateY(70px); 
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  will-change: opacity, transform;
}

.reveal-item.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .reveal-item {
    transform: translateY(40px);
    transition: all 1s ease-out; 
  }
}

/* ========================================================
   DESKTOP SPACING FIX (Khusus Layar Laptop/PC)
   Mengatasi jarak terlalu jauh antara Certificate & Experience
   ======================================================== */

@media (min-width: 992px) {
  
  /* 1. Rapatkan bagian bawah Certificate (Education) */
  #education {
    padding-bottom: 10px !important; /* Hapus padding bawah berlebih */
    margin-bottom: 0 !important;
  }

  /* 2. Rapatkan bagian atas Experience */
  /* Defaultnya 100px, kita paksa jadi 20px saja */
  #experience {
    padding-top: 20px !important; 
    margin-top: 0 !important;
  }
  
  /* Opsional: Jika judul Experience mepet banget ke atas, tambah sedikit disini */
  #experience .section-title {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }
}

/* ========================================================
   FIX FINAL: JARAK DAN TUMPANG TINDIH (SAFE MODE)
   Memperbaiki layout agar tidak menumpuk tapi jarak tetap pas.
   ======================================================== */

@media (min-width: 992px) {

  /* 1. PERBAIKAN UTAMA (ANTI-MENUMPUK) */
  /* Kita ubah min-height dari 800px (terlalu besar) menjadi 400px (sedang) */
  /* Ini mencegah Experience naik ke atas menutupi sertifikat */
  #education .portfolio .portfolio-container {
    min-height: 400px !important; 
    height: auto !important;      /* Biarkan memanjang sesuai isi */
    margin-bottom: 30px !important; /* Jarak aman di bawah kotak sertifikat */
  }

  /* 2. Mengatur Jarak Bawah Section Education */
  /* Jangan 0px, beri sedikit ruang agar enak dilihat */
  #education {
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
  }
  
  /* 3. Mengatur Jarak Atas Section Experience */
  /* Kita tarik ke atas sedikit agar menyatu */
  #experience {
    padding-top: 20px !important; 
    margin-top: 0 !important;
  }

  /* Opsional: Merapikan Judul Experience */
  #experience .section-title {
    padding-top: 10px !important;
    padding-bottom: 30px !important;
  }
}

/* ========================================================
   FIX FINAL V2: PROJECTS SPACING (TIGHTER)
   Mengurangi jarak secara agresif tapi tetap menjaga agar tidak menumpuk
   ======================================================== */

@media (min-width: 992px) {

  /* 1. KURANGI TINGGI MINIMAL DRASTIS */
  /* Kita ubah dari 500px ke 250px-300px. 
     Ini akan memaksa Skills naik ke atas mengisi ruang kosong. */
  #portfolio .portfolio-container {
    min-height: 450px !important; /* Cukup pendek untuk merapatkan */
    margin-bottom: 0px !important; 
    height: auto !important;
    overflow: visible !important; 
  }

  /* 2. Hapus total padding bawah Projects */
  #portfolio {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
  }

  /* 3. Tarik Skills lebih agresif ke atas */
  /* Gunakan margin-top 0 atau bahkan minus jika perlu */
  .interests, #skills {
    margin-top: 0px !important;
    padding-top: 10px !important; /* Jarak murni antar elemen saja */
  }
  
  /* Opsional: Jika masih terasa jauh, potong padding judul Skills */
  .interests .section-title, #skills .section-title {
    padding-bottom: 15px !important;
  }
}

/* ========================================================
   FIX FINAL V5: PERFECT GAP & SCROLL (ULTIMATE FIX)
   Jarak lega di Desktop, Scroll pas di bawah Header
   ======================================================== */

@media (min-width: 992px) {

  /* 1. PROJECTS (PORTFOLIO) */
  /* Kita beri batas bawah yang jelas */
  #portfolio {
    position: relative;
    z-index: 5; 
    padding-bottom: 50px !important; /* Jarak fisik dari Projects */
    margin-bottom: 0px !important;
  }
  
  /* Pastikan container tingginya fleksibel tapi tidak 0 */
  #portfolio .portfolio-container {
    min-height: 300px !important; 
    margin-bottom: 0px !important; 
    height: auto !important;
    overflow: visible !important;
  }

  /* 2. SKILLS (INTERESTS) */
  .interests, #skills {
    position: relative;
    z-index: 4;
    
    /* A. PENGATURAN SCROLL (Agar judul tidak ketutup Header) */
    /* Header ~80px. Kita beri bantalan 130px agar judul turun enak dilihat */
    padding-top: 100px !important; 
    
    /* B. PENGATURAN JARAK VISUAL (GAP) */
    /* Kita hanya tarik sedikit (-50px) dari 130px bantalan tadi. */
    /* Sisa Matematika: 130px (Padding) - 50px (Tarik) = 80px (Jarak Bersih) */
    /* Ditambah padding portfolio 50px tadi, total jarak = 130px (LEGA) */
    margin-top: -50px !important; 
    
    background-clip: content-box; 
  }
  
  /* Reset padding judul */
  .interests .section-title, #skills .section-title {
    padding-bottom: 20px !important;
    margin-bottom: 0px !important;
  }
}

/* ========================================================
   HORIZONTAL PROJECTS & BOXY NEON NUMBERS (TIGHT & EXPLORABLE)
   ======================================================== */

/* 1. Reset jarak section agar kembali rapat */
#portfolio {
  padding-top: 80px; 
  padding-bottom: 20px; 
  position: relative;
  z-index: 5;
}

/* 2. Indikator Geser (Teks & Panah Animasi Tetap) */
.swipe-indicator {
  text-align: center;
  color: #12d640;
  font-size: 13px;
  font-family: "Poppins", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0.8;
  animation: pulse-glow 2s infinite;
}

.swipe-indicator i { font-size: 20px; animation: slide-x 1.5s infinite alternate ease-in-out; }

@keyframes pulse-glow { 0%, 100% { opacity: 0.5; text-shadow: 0 0 5px rgba(18, 214, 64, 0); } 50% { opacity: 1; text-shadow: 0 0 15px rgba(18, 214, 64, 0.8); } }
@keyframes slide-x { 0% { transform: translateX(-4px); } 100% { transform: translateX(4px); } }

/* 3. WRAPPER UNTUK EFEK BAYANGAN MEMUDAR (Gradients) */
.horizontal-scroll-wrapper {
  position: relative;
  width: 100%;
}

.horizontal-scroll-wrapper::before,
.horizontal-scroll-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 10;
  pointer-events: none;
}

.horizontal-scroll-wrapper::before { left: 0; background: linear-gradient(to right, #010e1b, rgba(1, 14, 27, 0)); }
.horizontal-scroll-wrapper::after { right: 0; background: linear-gradient(to left, #010e1b, rgba(1, 14, 27, 0)); }

/* 4. CONTAINER SCROLL MENYAMPING */
.horizontal-portfolio {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 30px;
  padding-bottom: 20px;
  
  /* KUNCI 1: Paksa semua kotak berbaris rata dari atas (Sangat penting untuk Android) */
  align-items: flex-start !important; 
  
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  position: relative;
  
  /* BUNUH SCROLLBAR BAWAAN BROWSER */
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
.horizontal-portfolio::-webkit-scrollbar {
  display: none !important;
}

/* 5. CUSTOM SCROLLBAR DENGAN PANAH (PERMANEN) */
.custom-scrollbar-container {
  width: 100%;
  padding: 10px 0 5px 0;
  display: flex;
  justify-content: center;
  align-items: center; /* Sejajarkan panah & bar */
  gap: 15px;
  position: relative;
  z-index: 10;
}

.scroll-arrow {
  background: rgba(1, 14, 27, 0.9);
  border: 1px solid #12d640;
  color: #12d640;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-size: 24px;
  box-shadow: 0 0 10px rgba(18, 214, 64, 0.2);
  transition: all 0.3s ease;
  outline: none;
}

.scroll-arrow:hover {
  background: #12d640;
  color: #010e1b;
  box-shadow: 0 0 15px #12d640;
  transform: scale(1.1);
}

.scroll-arrow:active { transform: scale(0.9); }

.custom-scrollbar-track {
  width: 50%;
  height: 10px;
  background: rgba(1, 14, 27, 0.9);
  border: 1px solid rgba(18, 214, 64, 0.3);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.custom-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, #12d640 50%, transparent 50%);
  background-size: 15px 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(18, 214, 64, 0.4);
  transition: background 0.3s ease;
}

.custom-scrollbar-track:hover .custom-scrollbar-thumb {
  background: #12d640;
  box-shadow: 0 0 20px #12d640;
}

/* 6. ATUR ITEM AGAR SEJAJAR */
.horizontal-portfolio .portfolio-item {
  flex: 0 0 auto;
  width: calc(85% - 20px); 
  max-width: 450px;
  scroll-snap-align: center;
  margin-bottom: 0;
  position: relative;
}

/* KUNCI GAMBAR: Menampilkan utuh tanpa dipotong, tapi tetap sejajar lurus */
.horizontal-portfolio .portfolio-wrap img {
  width: 100%;
  height: 100% !important; /* Kunci tinggi secara mutlak */
  aspect-ratio: 3 / 2 !important; /* Kunci rasio agar sejajar */
  object-fit: contain !important; /* KUNCI PERBAIKAN: Menampilkan gambar seutuhnya tanpa terpotong */
  border-radius: 5px;
}

/* 7. PENOMORAN KOTAK NEON */
.project-number-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  position: relative;
  z-index: 2;
}

.project-number {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 14, 27, 0.9);
  border: 2px solid #12d640;
  color: #12d640;
  font-size: 20px;
  font-weight: bold;
  font-family: "Consolas", "Courier New", monospace;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(18, 214, 64, 0.3), inset 0 0 8px rgba(18, 214, 64, 0.2);
  transition: all 0.3s ease;
}

.project-number::before {
  content: '';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 25px;
  background: linear-gradient(to bottom, rgba(18, 214, 64, 0), rgba(18, 214, 64, 0.8));
  z-index: -1;
}

.project-number:hover {
  background: #12d640;
  color: #010e1b;
  box-shadow: 0 0 20px rgba(18, 214, 64, 0.6);
  transform: scale(1.1);
}

/* 8. Responsif Mobile Layout */
@media (max-width: 768px) {
  #portfolio { padding-top: 60px; }
  
  .horizontal-portfolio { 
    gap: 15px; 
    /* Beri jarak padding agar item pertama/terakhir bisa digeser ke tengah layar HP */
    padding-left: 10vw !important;
    padding-right: 10vw !important;
  }
  
  .horizontal-portfolio .portfolio-item {
    width: 80vw !important; /* Lebar kartu pasti di HP */
  }

  /* ========================================================
   KUNCI GAMBAR (FOKUS TENGAH & TIDAK TERPOTONG ANEH)
   ======================================================== */
.horizontal-portfolio .portfolio-wrap img {
  width: 100% !important;
  height: auto !important; 
  aspect-ratio: 3 / 2 !important; /* Paksa semua gambar seragam */
  object-fit: cover !important; /* Mengisi kotak dengan sempurna */
  object-position: center !important; /* KUNCI: Kembalikan fokus ke tengah agar sisi kanan tidak terpotong */
  border-radius: 5px;
}

/* =========================================
   UKURAN MATEMATIS (MOBILE) - FULL TEMBUS BATAS (BLEED)
   ========================================= */
@media (max-width: 768px) {
  
  /* KUNCI 1: Tetap biarkan dia tembus batas layar */
  .horizontal-scroll-wrapper {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    position: relative;
  }

  .horizontal-portfolio {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px; /* Jarak antar kartu sedikit diperlebar agar rapi */
    padding-top: 20px;
    padding-bottom: 40px;

    /* KUNCI 2: Padding kiri disesuaikan (sekitar 30px-40px) 
       agar lurus dengan huruf 'R' pada logo Rizkha Tegar */
    padding-left: 10px !important; 
    padding-right: 10px !important;

    /* KUNCI 3: REM SNAP (Wajib ada agar tidak bablas ke kiri 0px) */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 35px !important; 
    
    -webkit-overflow-scrolling: touch;
  }

  .horizontal-portfolio .portfolio-item {
    flex: 0 0 auto;
    /* Lebar kartu diatur agar proyek kedua sedikit terlihat (mengundang swipe) */
    width: 75vw !important; 
    max-width: 300px !important;
    scroll-snap-align: start !important; /* SNAP BERHENTI DI TITIK PADDING */
    transform: none !important;
  }

  /* Perbaikan Posisi Progress Bar & Panah di bawah agar ikut sejajar */
  .custom-scrollbar-container {
    padding-left: 35px !important;
    padding-right: 35px !important;
    margin-top: 10px;
  }
}
  
  .project-number-wrapper { margin-top: 15px; }
  .project-number { width: 40px; height: 40px; font-size: 16px; }
  .project-number::before { top: -15px; height: 15px; }
  .swipe-indicator { font-size: 11px; }
  .custom-scrollbar-track { width: 60%; height: 8px; }
  .scroll-arrow { width: 30px; height: 30px; font-size: 20px; }
  .custom-scrollbar-container { gap: 10px; }
}
  
  .horizontal-scroll-wrapper::before, .horizontal-scroll-wrapper::after { width: 50px; }
  .project-number { width: 40px; height: 40px; font-size: 16px; }
  .project-number::before { top: -20px; height: 20px; }
  .swipe-indicator { font-size: 11px; }
  
  /* Bar & Panah Mobile */
  .custom-scrollbar-track { width: 60%; height: 8px; }
  .scroll-arrow { width: 30px; height: 30px; font-size: 20px; }
  .custom-scrollbar-container { gap: 10px; }


/* ========================================================
   COMPACT & SHARP: MERAPATKAN JARAK (TIGHTER GAP)
   ======================================================== */

/* 1. Rapatkan Section Utama */
#portfolio {
  padding-top: 40px !important;  /* Dikompres dari 80px */
  padding-bottom: 0px !important;
}

/* 2. Rapatkan Indikator Swipe */
.swipe-indicator {
  margin-top: 0px !important;
  margin-bottom: 15px !important; /* Jarak pendek ke Project */
}

/* 3. Container Scroll: Kurangi 'Langit-langit' */
.horizontal-portfolio {
  /* Padding 30px sudah cukup aman untuk menampung kenaikan kartu -20px */
  padding-top: 30px !important; 
  padding-bottom: 25px !important;
  gap: 15px !important;
  overflow-y: visible !important;
  align-items: flex-start !important;
}

/* 4. Rapatkan Jarak Judul ke Gambar */
.horizontal-portfolio .portfolio-item center {
  height: auto !important;
  min-height: 35px !important; /* Diperpendek agar lebih mepet ke gambar */
  margin-bottom: 8px !important; /* Jarak judul ke gambar lebih rapat */
  display: block !important;
  overflow: visible !important;
}

.horizontal-portfolio .portfolio-item h4 {
  font-size: 17px !important; /* Perkecil sedikit agar proporsional */
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* 5. Tetap Pertahankan Super Lift */
.horizontal-portfolio .portfolio-item {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease !important;
  overflow: visible !important;
}

.horizontal-portfolio .portfolio-item:hover,
.horizontal-portfolio .portfolio-item.is-center {
  transform: translateY(-18px) scale(1.02) !important; /* Kenaikan disesuaikan sedikit */
  z-index: 100 !important;
  filter: drop-shadow(0 15px 30px rgba(18, 214, 64, 0.35));
}

/* 6. Rapatkan Posisi Nomor Proyek di Bawah */
.project-number-wrapper {
  margin-top: 10px !important; /* Jarak lebih rapat dari gambar */
}

/* 7. Rapatkan Progress Bar */
.custom-scrollbar-container {
  margin-top: 5px !important;
  padding-top: 5px !important;
}

/*--------------------------------------------------------------
# Footer Simple dengan Efek Glitch pada Nama
--------------------------------------------------------------*/
#footer {
  background: #010e1b;
  padding: 50px 0;
  border-top: 1px solid rgba(18, 214, 64, 0.2);
  position: relative;
  overflow: hidden; /* Mencegah luapan efek glitch */
}

#footer .footer-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Base Styling untuk Nama */
#footer .footer-name {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #fff;
  margin-bottom: 10px;
  text-transform: uppercase;
  display: inline-block;
}

/* =========================================
   LOGIKA EFEK GLITCH (Hanya pada Nama)
   ========================================= */
.footer-glitch {
  position: relative;
  /* Warna bayangan teks saat hover agar terlihat menyala */
  transition: text-shadow 0.3s ease;
}

.footer-glitch:hover {
  text-shadow: 0 0 10px rgba(18, 214, 64, 0.8);
}

/* Duplikasi Teks Menggunakan Pseudo-elements */
.footer-glitch::before,
.footer-glitch::after {
  content: attr(data-text); /* Mengambil teks dari HTML data-text */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #010e1b; /* Harus sama dengan background footer untuk menutupi teks asli */
}

/* Lapisan Glitch 1 (Warna Cyan) */
.footer-glitch::before {
  left: 2px;
  text-shadow: -2px 0 #00fff9; /* Warna Cyan */
  /* Efek robekan vertikal acak */
  clip: rect(44px, 450px, 56px, 0);
  /* Jalankan animasi glitch 1 */
  animation: footer-glitch-anim-1 2s infinite linear alternate-reverse;
}

/* Lapisan Glitch 2 (Warna Magenta) */
.footer-glitch::after {
  left: -2px;
  text-shadow: -2px 0 #ff00c1; /* Warna Magenta */
  clip: rect(85px, 450px, 140px, 0);
  /* Jalankan animasi glitch 2 dengan durasi berbeda agar acak */
  animation: footer-glitch-anim-2 3s infinite linear alternate-reverse;
}

/* Sisa Footer (Statis) */
#footer .footer-copyright {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #888;
  margin: 0;
  letter-spacing: 0.5px;
  
  /* KUNCI: Memaksa teks tidak turun baris (wrap) */
  white-space: nowrap; 
}

#footer .footer-copyright span {
  color: #12d640;
  font-weight: 600;
}

#footer .footer-line {
  width: 40px;
  height: 2px;
  background: #12d640;
  margin: 20px auto 0;
  opacity: 0.6;
}

/* =========================================
   ANIMASI KEYFRAMES (Robekan Acak)
   ========================================= */
@keyframes footer-glitch-anim-1 {
  0% { clip: rect(10px, 9999px, 9px, 0); }
  5% { clip: rect(82px, 9999px, 30px, 0); }
  10% { clip: rect(45px, 9999px, 80px, 0); }
  15% { clip: rect(98px, 9999px, 12px, 0); }
  20% { clip: rect(14px, 9999px, 55px, 0); }
  25% { clip: rect(61px, 9999px, 92px, 0); }
  30% { clip: rect(33px, 9999px, 67px, 0); }
  35% { clip: rect(78px, 9999px, 20px, 0); }
  40% { clip: rect(10px, 9999px, 98px, 0); }
  45% { clip: rect(52px, 9999px, 41px, 0); }
  50% { clip: rect(90px, 9999px, 15px, 0); }
  55% { clip: rect(22px, 9999px, 73px, 0); }
  60% { clip: rect(65px, 9999px, 88px, 0); }
  65% { clip: rect(38px, 9999px, 50px, 0); }
  70% { clip: rect(71px, 9999px, 29px, 0); }
  75% { clip: rect(15px, 9999px, 95px, 0); }
  80% { clip: rect(57px, 9999px, 44px, 0); }
  85% { clip: rect(93px, 9999px, 19px, 0); }
  90% { clip: rect(26px, 9999px, 76px, 0); }
  95% { clip: rect(69px, 9999px, 83px, 0); }
  100% { clip: rect(40px, 9999px, 60px, 0); }
}

@keyframes footer-glitch-anim-2 {
  0% { clip: rect(60px, 9999px, 50px, 0); }
  5% { clip: rect(12px, 9999px, 80px, 0); }
  10% { clip: rect(75px, 9999px, 20px, 0); }
  15% { clip: rect(30px, 9999px, 95px, 0); }
  20% { clip: rect(88px, 9999px, 40px, 0); }
  25% { clip: rect(44px, 9999px, 65px, 0); }
  30% { clip: rect(92px, 9999px, 15px, 0); }
  35% { clip: rect(18px, 9999px, 70px, 0); }
  40% { clip: rect(66px, 9999px, 85px, 0); }
  45% { clip: rect(35px, 9999px, 48px, 0); }
  50% { clip: rect(70px, 9999px, 25px, 0); }
  55% { clip: rect(10px, 9999px, 90px, 0); }
  60% { clip: rect(55px, 9999px, 42px, 0); }
  65% { clip: rect(90px, 9999px, 18px, 0); }
  70% { clip: rect(24px, 9999px, 74px, 0); }
  75% { clip: rect(62px, 9999px, 89px, 0); }
  80% { clip: rect(39px, 9999px, 51px, 0); }
  85% { clip: rect(72px, 9999px, 31px, 0); }
  90% { clip: rect(16px, 9999px, 96px, 0); }
  95% { clip: rect(58px, 9999px, 46px, 0); }
  100% { clip: rect(85px, 9999px, 22px, 0); }
}

/* =========================================
   RESPONSIVE (Mobile Mode)
   ========================================= */
@media (max-width: 768px) {
  #footer .footer-name { 
    font-size: 18px; 
    letter-spacing: 2px; 
    white-space: nowrap; /* Mencegah teks turun ke bawah saat glitch */
  }

  /* Mengaktifkan kembali efek glitch di Mobile */
  .footer-glitch::before, 
  .footer-glitch::after { 
    display: block !important; 
    background: #010e1b; /* Pastikan background tetap solid agar tidak tumpang tindih */
  }

  /* KUNCI: Turunkan sedikit ukuran font khusus di Mobile agar aman dan tidak luber */
  #footer .footer-copyright {
    font-size: 11px !important; /* Diperkecil sedikit agar muat dalam 1 baris */
  }
}

/* ========================================================
   FORCE PORTRAIT MODE (OVERLAY UNTUK MOBILE LANDSCAPE)
   ======================================================== */

/* Sembunyikan overlay secara default */
#rotate-message {
  display: none;
}

/* Deteksi jika perangkat adalah HP/Tablet dan sedang dalam posisi Miring (Landscape) */
@media only screen and (max-device-width: 900px) and (orientation: landscape) {
  
  /* 1. Munculkan Layar Penutup dengan efek gelap radial */
  #rotate-message {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, #0b1829 0%, #010e1b 100%);
    z-index: 9999999;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
  }

  /* 2. Sembunyikan seluruh isi website utama */
  #header, section, footer, .mobile-nav-toggle {
    display: none !important;
  }
  
  /* 3. Kunci body agar tidak bisa di-scroll */
  body {
    overflow: hidden !important;
  }

  /* --- STYLING ANIMASI BARU --- */
  .phone-icon-wrapper {
    margin-bottom: 25px;
  }

  .phone-icon-wrapper i {
    font-size: 80px;
    display: inline-block;
    /* Animasi menggunakan cubic-bezier untuk efek "mantul" (bouncy/jelly) */
    animation: smartRotate 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  }

  .rotate-title {
    color: #fff; 
    font-family: 'Poppins', sans-serif; 
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }

  .rotate-text {
    color: #aaa; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 15px;
  }

  /* Keyframes Animasi: Merah (Miring) -> Hijau Menyala (Berdiri) */
  @keyframes smartRotate {
    0%, 15% {
      transform: rotate(-90deg) scale(1);
      color: #ff5a5a; /* Merah = Posisi Salah */
      filter: drop-shadow(0 0 15px rgba(255, 90, 90, 0.6));
    }
    45%, 65% {
      transform: rotate(0deg) scale(1.15); /* Membesar sedikit seperti popup saat benar */
      color: #12d640; /* Hijau = Posisi Benar */
      filter: drop-shadow(0 0 35px rgba(18, 214, 64, 0.9));
    }
    85%, 100% {
      transform: rotate(0deg) scale(1);
      color: #12d640;
      filter: drop-shadow(0 0 10px rgba(18, 214, 64, 0.3));
      opacity: 0; /* Menghilang secara halus (fade-out) sebelum animasi diulang */
    }
  }
}

/* ========================================================
   ULTIMATE FIX: KONSISTENSI JARAK SEMUA SECTION
   ======================================================== */

/* 1. Reset Jarak Pembungkus Section (Atas & Bawah) */
section#about,
section#education,
section#experience,
section#portfolio,
section#skills,
section#service,
section#contacts {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 100px !important; /* Jarak klik navigasi dari header desktop */
    padding-bottom: 60px !important; /* Menyamakan jarak spasi ke section berikutnya */
    background-clip: border-box !important;
}

/* 2. Reset Jarak Posisi Judul (Title) di Masing-masing Section */
section#about .section-title,
section#education .section-title,
section#experience .section-title,
section#portfolio .section-title,
section#skills .section-title,
section#service .section-title,
section#contacts .section-title {
    padding-top: 0 !important;
    padding-bottom: 30px !important; /* Jarak seragam dari judul ke konten isi */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. Penyesuaian Responsif untuk Mobile & Tablet */
@media (max-width: 991px) {
    section#about,
    section#education,
    section#experience,
    section#portfolio,
    section#skills,
    section#service,
    section#contacts {
        padding-top: 80px !important; /* Jarak aman dari header mobile */
        padding-bottom: 40px !important; /* Jarak antar section mobile */
    }
    
    section#about .section-title,
    section#education .section-title,
    section#experience .section-title,
    section#portfolio .section-title,
    section#skills .section-title,
    section#service .section-title,
    section#contacts .section-title {
        padding-bottom: 25px !important;
    }
}

/* ========================================================
   FIX KHUSUS: MERAPATKAN JARAK BAWAH CERTIFICATE
   ======================================================== */

/* Menghapus tinggi buatan (ruang kosong) dan margin berlebih di area Certificate */
#education .portfolio .portfolio-container {
    min-height: auto !important; /* Membatalkan paksaan tinggi 400px/800px */
    height: auto !important;
    margin-bottom: 0 !important; /* Menghapus dorongan margin ke bawah */
    padding-bottom: 0 !important;
}

#education .portfolio {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ========================================================
   FIX KHUSUS: JARAK SUB-JUDUL "NON-TECHNICAL"
   ======================================================== */

/* Mengembalikan jarak pemisah antara kotak "Tools" dengan judul "Non-Technical" */
#skills .section-title.mt-4 {
    margin-top: 40px !important; /* Memberikan jarak lega dari kotak atasnya */
    padding-bottom: 20px !important; /* Menyesuaikan jarak ke kotak-kotak bawahnya */
}

/* Penyesuaian jarak untuk layar Mobile */
@media (max-width: 991px) {
    #skills .section-title.mt-4 {
        margin-top: 40px !important;
    }
}

/* ========================================================
   FIX KHUSUS: MENCEGAH TEKS JUDUL TERPOTONG (HYPHENATION)
   ======================================================== */

.services .icon-box h4,
.services .icon-box h4 a {
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
    word-break: normal !important; /* Memaksa satu kata utuh turun ke bawah */
}

/* ========================================================
   CUSTOM STYLING: TOMBOL INFO (VENOBOX) PROJECT
   ======================================================== */

/* 1. Desain Dasar Tombol (Neon Cyber Style) */
.portfolio .portfolio-wrap .portfolio-links a {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: rgba(18, 214, 64, 0.1) !important; /* Latar belakang hijau sangat transparan */
    border: 2px solid #12d640 !important; /* Garis pinggir neon */
    color: #12d640 !important;
    font-size: 24px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Animasi memantul (bouncy) */
    z-index: 100;
}

/* 2. Tooltip Teks "View Details" (Tersembunyi secara default) */
.portfolio .portfolio-wrap .portfolio-links a::after {
    content: "View Details";
    position: absolute;
    bottom: -35px; /* Jarak teks di bawah tombol */
    font-size: 11px !important;
    font-family: "Poppins", sans-serif;
    letter-spacing: 1px;
    font-weight: 500;
    color: #fff;
    background: rgba(1, 14, 27, 0.95);
    border: 1px solid rgba(18, 214, 64, 0.5);
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px); /* Teks sedikit naik ke atas */
    transition: all 0.3s ease;
    pointer-events: none; /* Agar teks tidak mengganggu klik */
}

/* 3. Animasi Gelombang (Pulse) saat gambar project disorot */
@keyframes radar-pulse {
    0% { box-shadow: 0 0 0 0 rgba(18, 214, 64, 0.6); }
    70% { box-shadow: 0 0 0 15px rgba(18, 214, 64, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 214, 64, 0); }
}

/* Memanggil animasi pulse saat pembungkus hitam muncul */
.portfolio .portfolio-wrap:hover .portfolio-links a {
    animation: radar-pulse 2s infinite;
}

/* 4. Efek saat Tombol Info itu sendiri di-hover */
.portfolio .portfolio-wrap .portfolio-links a:hover {
    background: #12d640 !important; /* Tombol jadi hijau penuh */
    color: #010e1b !important; /* Icon di dalam tombol jadi gelap */
    transform: scale(1.15) !important; /* Tombol membesar */
    box-shadow: 0 0 20px rgba(18, 214, 64, 0.8) !important; /* Cahaya menyebar (Glow) */
    animation: none; /* Matikan efek pulse saat kursor menempel di tombol */
}

/* Memunculkan teks "View Details" saat tombol di-hover */
.portfolio .portfolio-wrap .portfolio-links a:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Teks turun ke posisi aslinya */
}

/* 5. Responsif untuk Mobile (Perkecil sedikit agar tidak kebesaran di HP) */
@media (max-width: 768px) {
    .portfolio .portfolio-wrap .portfolio-links a {
        width: 42px !important;
        height: 42px !important;
        font-size: 22px !important;
    }
    
    .portfolio .portfolio-wrap .portfolio-links a::after {
        display: none !important; /* Sembunyikan tulisan View Details di HP agar layar tidak penuh */
    }
}

/* ========================================================
   CUSTOM STYLING: VENOBOX CLOSE BUTTON (TANDA 'X')
   ======================================================== */

/* 1. Desain Tanda X (Lingkaran Neon) & Tarik Posisi Mendekat */
.vbox-close {
    top: 30px !important; /* Ditarik turun menjauh dari atap layar */
    right: 30px !important; /* Ditarik ke kiri menjauh dari pojok layar */
    width: 45px !important;
    height: 45px !important;
    background: #09203a !important; /* Background biru gelap seperti kotak info */
    border: 2px solid #12d640 !important; /* Garis pinggir neon */
    border-radius: 50% !important; /* Membentuk lingkaran sempurna */
    color: #12d640 !important; /* Warna tanda X hijau neon */
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 0 15px rgba(18, 214, 64, 0.2) !important;
    z-index: 99999 !important;
}

/* 2. Efek Hover (Berputar, Menyala, Tukar Warna) */
.vbox-close:hover {
    background: #12d640 !important; /* Kotak jadi hijau penuh */
    color: #010e1b !important; /* Tanda X jadi gelap */
    transform: scale(1.15) rotate(90deg) !important; /* Membesar & Berputar 90 derajat */
    box-shadow: 0 0 25px rgba(18, 214, 64, 0.8) !important; /* Glow lebih terang */
    border-color: #fff !important; /* Garis pinggir jadi putih */
}

/* 3. Penyesuaian di layar HP agar proporsional */
@media (max-width: 768px) {
    .vbox-close {
        top: 15px !important;
        right: 15px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 22px !important;
        border-width: 1px !important;
    }
}

/* ========================================================
   MEMATIKAN TANDA HUBUNG (HYPHENS) DI ABOUT DESC
   ======================================================== */
.about-desc {
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  word-wrap: normal !important;
}

/* ========================================================
   MERAPATKAN JARAK FOTO PROFIL DAN KETERANGAN
   ======================================================== */

/* 1. Pengaturan untuk layar Mobile / HP (Gambar di atas teks) */
@media (max-width: 991px) {
  /* Memaksa margin-bottom bawaan Bootstrap (mb-5) menjadi lebih kecil */
  .about-section-wrapper .col-lg-4 {
    margin-bottom: 15px !important; /* Ubah angka ini jika ingin lebih mepet (misal: 10px) */
  }
}

/* 2. Pengaturan untuk layar Desktop / Laptop (Gambar di kiri, teks di kanan) */
@media (min-width: 992px) {
  /* Mengurangi jarak ruang kosong di sebelah kanan gambar */
  .about-section-wrapper .col-lg-4 {
    padding-right: 15px !important; 
  }
  
  /* Mengurangi jarak ruang kosong di sebelah kiri teks keterangan */
  .about-section-wrapper .col-lg-8 {
    padding-left: 15px !important; 
  }
}

/* ========================================================
   STYLING ICON PADA NAVBAR
   ======================================================== */

/* Pastikan a menjadi flex container agar icon & teks lurus */
.nav-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 8px; /* Jarak antara icon dan teks */
}

/* Styling dasar untuk icon */
.nav-menu a i {
  font-size: 18px !important;
  color: #12d640; /* Icon berwarna hijau neon secara default */
  transition: all 0.3s ease-in-out;
}

/* Efek saat menu di-hover atau aktif */
.nav-menu a:hover i, 
.nav-menu .active > a i, 
.nav-menu li:hover > a i {
  color: #fff !important; /* Icon berubah jadi putih */
  transform: scale(1.1) rotate(5deg); /* Sedikit membesar dan miring */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* ========================================================
   ULTIMATE CYBER MOBILE NAV (OVERRIDE)
   ======================================================== */

/* 1. Panel Kotak Menu Utama */
.mobile-nav {
  background: rgba(1, 14, 27, 0.85) !important; /* Sedikit lebih transparan */
  backdrop-filter: blur(12px) !important; /* Efek kaca frosted glass */
  -webkit-backdrop-filter: blur(12px) !important; /* Support untuk Safari/iOS */
  border: 1px solid rgba(18, 214, 64, 0.4) !important; /* Border neon */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(18, 214, 64, 0.1) !important;
  border-radius: 12px !important;
  padding: 15px 10px !important;
}

/* 2. Styling Dasar Link & Jarak */
.mobile-nav a {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important; /* Jarak icon dan teks */
  padding: 12px 20px !important;
  border-radius: 8px !important;
  margin-bottom: 5px !important;
  position: relative;
  overflow: hidden;
  font-family: "Poppins", sans-serif !important;
  letter-spacing: 1px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Animasi memantul */
}

/* 3. Icon Bawaan (Hijau) */
.mobile-nav a i {
  font-size: 22px !important;
  color: #12d640 !important;
  transition: all 0.3s ease !important;
}

/* 4. Efek Saat Menu Aktif / Disentuh (Tap) */
.mobile-nav a:hover, 
.mobile-nav .active > a, 
.mobile-nav li:hover > a {
  background: rgba(18, 214, 64, 0.1) !important;
  color: #fff !important;
  transform: translateX(8px); /* Menu bergeser sedikit ke kanan saat disentuh */
  box-shadow: -4px 0 0 #12d640 !important; /* Memunculkan garis neon tebal di sebelah kiri */
}

/* Mengubah warna Icon saat aktif menjadi putih bersinar */
.mobile-nav a:hover i, 
.mobile-nav .active > a i {
  color: #fff !important;
  transform: scale(1.15) !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.8) !important;
}

/* 5. Tambahan Aksen Kurung Siku Kanan "]" */
.mobile-nav a::after {
  content: "]" !important;
  position: absolute;
  right: 15px;
  color: #12d640;
  font-size: 18px;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-15px); /* Tersembunyi agak ke kiri */
  transition: all 0.3s ease !important;
}

/* Kurung siku meluncur keluar saat menu aktif */
.mobile-nav a:hover::after,
.mobile-nav .active > a::after {
  opacity: 1;
  transform: translateX(0);
}

/* 6. Efek Tombol Close (Tanda 'X' di kanan atas) */
body.mobile-nav-active .mobile-nav-toggle i {
  color: #12d640 !important; /* Berubah jadi hijau neon saat menu terbuka */
  text-shadow: 0 0 15px rgba(18, 214, 64, 0.8) !important;
  transform: rotate(90deg) scale(1.1); /* Berputar dramatis saat diklik */
  transition: all 0.4s ease !important;
}

/* ========================================================
   ULTIMATE CYBER SKILLS MODULES (ISOLATED / AMAN)
   ======================================================== */

/* 1. Merapatkan Jarak Antar Kotak (Hanya di area ini) */
.interests .reveal-item.mb-4 {
  margin-bottom: 18px !important; 
}

/* 2. Desain Dasar Panel Kotak */
.interests .icon-box {
  display: flex !important;
  align-items: center !important;
  padding: 15px 20px !important;
  background: linear-gradient(135deg, rgba(9, 32, 58, 0.8) 0%, rgba(1, 14, 27, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-left: 3px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  cursor: pointer;
  height: 100%;
}

/* Efek Kilap (Scanline) Bersiap di Luar Kotak */
.interests .icon-box::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
  transition: all 0.5s ease;
}

/* 3. Desain Dasar Icon */
.interests .icon-box i {
  font-size: 28px !important; 
  margin-right: 15px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  text-shadow: 0 0 15px currentColor !important; 
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.02) !important;
  flex-shrink: 0 !important; 
  transition: all 0.3s ease !important;
}

/* 4. Desain Dasar Teks */
.interests .icon-box h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: #e0e0e0 !important;
  font-family: "Poppins", sans-serif !important;
  letter-spacing: 0.5px !important;
  line-height: 1.4 !important;
  text-align: left !important;
  white-space: normal !important;
  transition: color 0.3s ease !important;
}

/* =========================================
   INTERAKSI DESKTOP (HOVER MOUSE)
   ========================================= */
@media (min-width: 769px) {
  .interests .icon-box:hover {
    transform: translateY(-8px) scale(1.02) !important;
    background: rgba(18, 214, 64, 0.05) !important;
    border-left-color: #12d640 !important;
    box-shadow: 0 15px 25px rgba(18, 214, 64, 0.15) !important;
  }
  
  .interests .icon-box:hover::after {
    animation: cyber-scan 1.2s infinite linear;
  }
  
  .interests .icon-box:hover i {
    transform: scale(1.15) rotate(8deg) !important;
    text-shadow: 0 0 25px currentColor !important;
    background: rgba(0, 0, 0, 0.7) !important;
  }

  .interests .icon-box:hover h3 {
    color: #fff !important;
  }
}

/* =========================================
   PENYESUAIAN MOBILE (LAYAR SENTUH)
   ========================================= */
@media (max-width: 768px) {
  .interests .reveal-item.mb-4 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  .interests .icon-box { padding: 12px 15px !important; }
  .interests .icon-box i { font-size: 22px !important; padding: 10px !important; }
  .interests .icon-box h3 { font-size: 14px !important; }

  .interests .icon-box::after {
    animation: cyber-scan 4s infinite linear;
  }

}

/* Animasi Sapuan Cahaya (Global) */
@keyframes cyber-scan {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ========================================================
   FIX: ALIGNMENT TEKS "I'm a" & TYPING EFFECT
   ======================================================== */

/* 1. Kembalikan ke Inline Text (Jangan gunakan Flex agar kursor menyatu) */
.role-text, #home h2 {
  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: 24px !important;
  color: #ddd !important;
  margin-top: 15px !important;
}

/* 2. Atur teks hijau yang diketik */
/* Menggunakan :not(.typed-cursor) agar garis bawah tidak bocor ke kursor */
.role-text span:not(.typed-cursor), 
#home h2 span:not(.typed-cursor) {
  color: #12d640 !important;
  border-bottom: 2px solid #12d640 !important;
  padding-bottom: 3px !important;
  display: inline-block !important; /* Menjaga garis bawah tetap rata */
  line-height: 1.2 !important;
}

/* 3. Atur posisi dan bentuk kursor agar sejajar sempurna dengan teks */
.typed-cursor {
  display: inline-block !important;
  color: #12d640 !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  border-bottom: none !important; /* Hapus garis bawah nyasar di kursor */
  padding-bottom: 0 !important;
  vertical-align: baseline !important; /* Paksa kursor sejajar dengan dasar huruf */
  margin-left: 2px !important;
}

/* 4. Responsif untuk Layar Mobile */
@media (max-width: 768px) {
  .role-text, #home h2 {
    font-size: 20px !important;
    margin-top: 5px !important;
  }
  .typed-cursor {
    font-size: 22px !important;
  }
}

.role-text {
    /* Sesuaikan angka ini dengan tinggi font h2 kamu. 
       Coba dari 60px atau 80px sampai tidak ada pergerakan saat di-test */
    min-height: 70px; 
    
    /* Opsional: Memastikan pergerakan tetap smooth */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================================================
   MEMATIKAN TANDA HUBUNG (HYPHENS) DI NON-TECHNICAL & SERVICE
   ======================================================== */
.row.non-tech .icon-box p,
.services .icon-box p {
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}