/* index_style1.css */
:root {
      --neon: #00e5ff;
      --neon-2: #00bcd4;
      --accent: #7c4dff;
      --bg: #071021;
      --panel: rgba(255, 255, 255, 0.04);
      --text: #e6fbff;
      --glass: rgba(255, 255, 255, 0.04);
    }

    html, body { height: 100%; }

    body {
      margin: 0;
      font-family: 'Poppins', sans-serif;
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      transition: background 0.6s ease, color 0.6s ease, filter 0.6s ease;
    }

    /* Navbar */
    .navbar {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.06));
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
    .brand-title {
      font-family: 'Orbitron', sans-serif;
      color: var(--neon);
      letter-spacing: 0.6px;
      text-shadow: 0 0 10px rgba(0, 229, 255, 0.12);
    }
    .navbar-nav { --gap-x: 0.8rem; --gap-y: .35rem; }
    @media (min-width: 992px) {
      .navbar-nav .nav-item { margin: 0 var(--gap-x); }
    }
    @media (max-width: 991.98px) {
      .navbar-collapse { padding: .5rem 0; }
      .navbar-nav .nav-item { margin: var(--gap-y) 0; }
      .navbar-nav .nav-link { padding: .5rem 0; }
    }
    .navbar-nav .nav-link {
      color: var(--text);
      opacity: 0.85;
      transition: all 0.25s ease;
    }
    .navbar-nav .nav-link:hover {
      color: var(--neon);
      opacity: 1;
      text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
    }

    /* Hero */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      text-align: center;
      padding: 8rem 1rem 5rem;
      overflow: hidden;
    }
    #circuitCanvas { position: absolute; inset: 0; z-index: 0; opacity: .55; pointer-events: none; }
    .hero-inner { position: relative; z-index: 2; max-width: 1000px; margin: auto; }
    .hero img.logo {
      width: 150px; height: auto; border-radius: 18px;
      box-shadow: 0 8px 30px rgba(0,0,0,.45), 0 0 20px rgba(0,229,255,.06);
      filter: drop-shadow(0 0 18px var(--neon));
    }
    .hero h1 {
      font-family: 'Orbitron', sans-serif;
      font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.4rem);
      margin-top: .8rem; color: var(--neon);
      text-shadow: 0 0 16px rgba(0,229,255,.08);
    }
    .hero p.lead { color: var(--text); opacity: .9; margin-bottom: 1.4rem; max-width: 760px; margin-inline: auto; }

/* perkecil hero/about illustration tapi tetap proporsional */
.hero .img-fluid.logo,
#about img.img-fluid {
  max-width: 520px;   /* ubah angka sesuai keinginan (px) */
  width: 100%;
  height: auto;       /* penting agar tetap proporsional */
  display: block;
  margin-inline: auto;
}

/* tweak responsif: pada layar kecil, batasi lagi */
@media (max-width: 576px) {
  .hero .img-fluid.logo,
  #about img.img-fluid {
    max-width: 320px;
  }
}

/* jika ingin ukuran dinamis menggunakan clamp */
#about img.img-fluid {
  max-width: clamp(280px, 45vw, 520px);
}


    .btn-primary-custom {
      background: linear-gradient(90deg, var(--neon), var(--neon-2));
      color: var(--bg); border-radius: 999px; padding: .6rem 1.2rem;
      font-weight: 600; box-shadow: 0 8px 30px rgba(0,229,255,.12);
      border: none; transition: all .25s ease;
    }
    .btn-primary-custom:hover { box-shadow: 0 0 25px var(--neon), 0 0 50px var(--neon-2); transform: scale(1.03); }
    .btn-outline-custom {
      background: transparent; color: var(--neon);
      border: 1px solid rgba(255,255,255,.06); margin-left: .6rem; transition: all .25s ease;
    }
    .btn-outline-custom:hover { color: var(--bg); background: var(--neon); box-shadow: 0 0 25px var(--neon); }

    /* Sections */
    section { padding: 4.5rem 0; position: relative; scroll-margin-top: 80px; }
    .section-title {
      text-align: center; font-family: 'Orbitron', sans-serif; color: var(--neon);
      margin-bottom: 1.25rem; letter-spacing: .6px; text-shadow: 0 0 12px rgba(0,229,255,.06);
    }

    .card-panel {
      background: var(--panel); border-radius: 14px; border: 1px solid rgba(255,255,255,.03);
      padding: 1.4rem; transition: transform .3s, box-shadow .3s, border-color .3s;
    }
    .card-panel:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 40px var(--neon); border-color: rgba(0,229,255,.35); }

    /* Projects: icon + caption, glow ala Core Tech */
    .projects-section .project-card {
      background: var(--panel);
      border: 1px solid rgba(255,255,255,.03);
      border-radius: 14px; padding: 1.25rem; height: 100%;
      transition: transform .25s, box-shadow .25s, border-color .25s;
    }
    .projects-section .project-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 24px rgba(0,229,255,.15);
      border-color: rgba(0,229,255,.25);
    }
    .projects-section .project-icon,
    .tile {
      font-size: 2rem;
      display: inline-flex; align-items: center; justify-content: center;
      width: 64px; height: 64px; border-radius: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
      border: 1px solid rgba(255,255,255,.05);
      margin-bottom: .75rem; text-shadow: 0 0 10px rgba(0,229,255,.2);
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      transition: transform .25s, box-shadow .25s, border-color .25s;
    }
    .projects-section .project-icon:hover,
    .tile:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 24px rgba(0,229,255,.15);
      border-color: rgba(0,229,255,.25);
    }
    .tile i.bi { font-size: 1.9rem; }

    /* Core Tech */
    .tech-icon {
      width: 72px; height: 72px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-family: 'Orbitron', sans-serif;
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
      border: 1px solid rgba(255,255,255,.03);
      transition: transform .25s, box-shadow .25s, border-color .25s;
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
    }
    .tech-icon:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 24px rgba(0,229,255,.15); border-color: rgba(0,229,255,.25); }

    /* Team (hover glow area lebih luas) */
    #team .member { text-align: center; }
    #team .member .tile { margin-inline: auto; width: 88px; height: 88px; }
    #team .member:hover .tile { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 24px rgba(0,229,255,.15); border-color: rgba(0,229,255,.25); }
    .tile-avatar { overflow: hidden; padding: 0; }
    .tile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

    /* Projects grid 3×2 */
    #projects .col-md-4 { display: flex; }
    #projects .tile-card {
      background: var(--panel);
      border: 1px solid rgba(255,255,255,.03);
      border-radius: 14px;
      padding: 1.1rem; width: 100%;
    }

    /* Avatar legacy fallback jadi tile-look (kalau ada yang pakai .avatar) */
    #team .avatar {
      width: 88px; height: 88px; border-radius: 12px; display: inline-block;
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
      border: 1px solid rgba(255,255,255,.06);
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      transition: transform .25s, box-shadow .25s, border-color .25s, filter .25s;
      padding: 0; object-fit: cover;
    }
    #team .col-md-3:hover .avatar { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 24px rgba(0,229,255,.15); border-color: rgba(0,229,255,.25); filter: saturate(1.02); }

    /* Techno Panels (contact/map) */
    .neo-panel {
      position: relative; background: var(--glass);
      border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 1.25rem; backdrop-filter: blur(6px);
      box-shadow: inset 0 0 0 1px rgba(0,229,255,.08), 0 8px 28px rgba(0,0,0,.35);
      transition: transform .25s, box-shadow .25s, border-color .25s;
    }
    .neo-panel:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(0,229,255,.16), 0 18px 50px rgba(0,0,0,.45), 0 0 28px rgba(0,229,255,.10); border-color: rgba(0,229,255,.24); }
    .neo-panel::before{
      content:""; position:absolute; inset:0; pointer-events:none; border-radius:14px;
      background:
        linear-gradient(90deg, var(--neon), transparent) top left/20px 1px no-repeat,
        linear-gradient(180deg, var(--neon), transparent) top left/1px 20px no-repeat,
        linear-gradient(270deg, var(--neon), transparent) top right/20px 1px no-repeat,
        linear-gradient(180deg, var(--neon), transparent) top right/1px 20px no-repeat,
        linear-gradient(90deg, var(--neon), transparent) bottom left/20px 1px no-repeat,
        linear-gradient(0deg, var(--neon), transparent) bottom left/1px 20px no-repeat,
        linear-gradient(270deg, var(--neon), transparent) bottom right/20px 1px no-repeat,
        linear-gradient(0deg, var(--neon), transparent) bottom right/1px 20px no-repeat;
      opacity:.55; filter: drop-shadow(0 0 6px rgba(0,229,255,.35));
    }
    .neo-grid { position: relative; overflow: hidden; }
    .neo-grid::after{
      content:""; position:absolute; inset:0; pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 22px 22px, 22px 22px;
      mask: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,1) 35%);
    }

    .map-embed { width: 100%; height: 380px; border: 0; border-radius: 12px; filter: saturate(.9) contrast(1.05) brightness(.9); box-shadow: 0 6px 24px rgba(0,0,0,.35); }

    /* Footer warna = warna menu navbar */
    footer, footer a, footer .text-muted { color: rgba(230,251,255,.85) !important; }
    footer a:hover { color: var(--neon) !important; text-shadow: 0 0 8px rgba(0,229,255,.35); }

    /* Responsif */
    @media (max-width: 768px) {
      .hero { padding-top: 7rem; }
      .projects-section .project-icon { font-size: 1.75rem; width: 56px; height: 56px; }
      .hero .d-flex { flex-wrap: wrap; gap: .75rem; }
      .btn-outline-custom { margin-left: 0; }
    }

    /* Preload */
    #preloader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 9999; transition: opacity .6s ease; }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
      .card-panel:hover, .tech-icon:hover, .projects-section .project-card:hover, .tile:hover, #team .member:hover .tile, .neo-panel:hover { transform: none; }
      html { scroll-behavior: auto; }
    }

    /* === Contact panels plain / polos === */
#contact .neo-panel{
  background: rgba(255,255,255,0.02);  /* polos */
  backdrop-filter: none;               /* hilangkan blur kaca */
  box-shadow: 0 8px 28px rgba(0,0,0,.35); /* tetap ada depth ringan */
}

#contact .neo-panel::before{           /* matikan garis sudut neon */
  content: none !important;
}

#contact .neo-grid::after{             /* matikan pola grid */
  content: none !important;
}

/* Hover tetap halus, tanpa glow neon */
#contact .neo-panel:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.12);
}

/* === Neon Hover Glow Universal (Projects, Core Tech, Team) === */

/* Our Projects tile-card glow */
#projects .tile-card:hover {
  box-shadow:
    0 0 20px rgba(0,229,255,0.25),
    0 0 40px rgba(0,229,255,0.15),
    0 16px 40px rgba(0,0,0,0.4);
  border-color: rgba(0,229,255,0.35);
  transform: translateY(-8px);
}

/* Core Technologies glow */
#tech .tech-icon:hover {
  box-shadow:
    0 0 20px rgba(0,229,255,0.25),
    0 0 40px rgba(0,229,255,0.15),
    0 12px 30px rgba(0,0,0,0.45);
  border-color: rgba(0,229,255,0.35);
  transform: translateY(-6px) scale(1.05);
}

/* Our Team glow (avatar tiles) */
#team .member:hover .tile {
  box-shadow:
    0 0 20px rgba(0,229,255,0.25),
    0 0 40px rgba(0,229,255,0.15),
    0 12px 30px rgba(0,0,0,0.45);
  border-color: rgba(0,229,255,0.35);
  transform: translateY(-6px) scale(1.05);
}
#about img {
  box-shadow: 0 0 30px rgba(0,229,255,.15);
  filter: saturate(1.1) brightness(0.95);
  transition: transform .3s ease, box-shadow .3s ease;
}
#about img:hover {
  transform: scale(1.03);
  box-shadow: 0 0 40px rgba(0,229,255,.25);
}

/* Cursor kedip sebaris dengan teks hero */
#typedText {
  display: inline;               /* pastikan sebaris */
  white-space: nowrap;           /* opsional: cegah pindah baris; hapus kalau mau bisa membungkus */
  position: relative;
}

#typedText::after {
  content: "▍";                  /* bentuk kursor (bisa "|" atau "┃") */
  margin-left: 6px;
  color: var(--neon);
  text-shadow: 0 0 8px rgba(0,229,255,.45);
  animation: heroCaretBlink 1s steps(1, end) infinite;
}

/* Animasi kedip */
@keyframes heroCaretBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ==== Contact & Map: lebih kecil dan rapi ==== */

/* Perkecil lebar maksimal khusus di section contact */
#contact .container {
  max-width: 980px;           /* sebelumnya full; sekarang lebih ramping */
}

/* Kecilkan padding panel + rapikan jarak kolom */
#contact .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
#contact .neo-panel { 
  padding: 0.9rem 1rem; 
  border-radius: 12px;
}

/* Buat kedua panel sama tinggi tanpa ubah HTML */
#contact .col-lg-6 > .neo-panel { height: 100%; }

/* Kecilkan ikon tile di panel kontak */
#contact .tile {
  width: 44px; height: 44px;
  border-radius: 10px;
  font-size: 1.2rem; /* ikon bi- */
  margin-bottom: 0;  /* tak perlu margin bawah di dalam baris */
}

/* Tipografi ringkas */
#contact .fw-semibold { font-size: 0.95rem; }
#contact .text-white-50 { font-size: 0.9rem; }

/* Perkecil map & sudut */
#contact .map-embed {
  height: 300px;          /* sebelumnya 380px */
  border-radius: 10px;
}

/* Mobile tweaks */
@media (max-width: 576px) {
  #contact .container { max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
  #contact .map-embed { height: 260px; }
  #contact .tile { width: 40px; height: 40px; font-size: 1.1rem; }
}

#contact .contact-narrow { max-width: 900px; }

/* ==== CONTACT & MAP spacing & sizing refinement ==== */

/* Batasi lebar kontainer agar lebih ramping */
#contact .container {
  max-width: 920px;
}

/* Tambahkan jarak antar kolom form dan map */
#contact .row.g-4 {
  --bs-gutter-x: 1.5rem; /* jarak horizontal antar panel */
  --bs-gutter-y: 2rem;   /* jarak vertikal di mobile */
}

/* Panel contact dan map lebih tipis dan proporsional */
#contact .neo-panel {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  min-height: auto;       /* biar tinggi adaptif */
  height: auto;           /* hilangkan stretching */
}

/* Map lebih kecil dan serasi */
#contact .map-embed {
  height: 240px;          /* lebih pendek */
  border-radius: 10px;
  margin-top: 0.25rem;
}

/* Rapiin info di bawah map */
#contact .d-flex.align-items-center.gap-2.small {
  font-size: 0.9rem;
}

/* Tambah jarak halus antar item info */
#contact .d-flex.flex-wrap.gap-3 {
  gap: 0.75rem !important;
}

/* Mobile tweak: tetap responsif dan sejajar */
@media (max-width: 768px) {
  #contact .container { max-width: 100%; padding-inline: 1rem; }
  #contact .neo-panel { padding: 0.9rem 1rem; }
  #contact .map-embed { height: 200px; }
}

/* ==== SAMAKAN GAYA OUR TEAM & ABOUT DENGAN OUR PROJECT ==== */

/* === About Image Card === */
#about img {
  display: block;
  width: 100%;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  padding: 0.4rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Hover neon glow seperti tile project */
#about img:hover {
  transform: translateY(-6px);
  border-color: rgba(0,229,255,.3);
  box-shadow:
    0 0 20px rgba(0,229,255,0.25),
    0 0 40px rgba(0,229,255,0.15),
    0 12px 30px rgba(0,0,0,0.45);
}

/* === Our Team === */
#team .tile.tile-avatar {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* efek neon glow & hover mirip project */
#team .tile.tile-avatar:hover {
  transform: translateY(-6px);
  border-color: rgba(0,229,255,.3);
  box-shadow:
    0 0 20px rgba(0,229,255,0.25),
    0 0 40px rgba(0,229,255,0.15),
    0 12px 30px rgba(0,0,0,0.45);
}

/* gambar dalam tile team */
#team .tile.tile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform .3s ease;
}

/* sedikit zoom pas hover */
#team .tile.tile-avatar:hover img {
  transform: scale(1.05);
}

/* teks di bawah foto agar rapi */
#team h6 {
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--text);
}

#team small {
  opacity: 0.9;
  color: rgba(230,251,255,.8);
}

/* grid spacing lebih seragam seperti projects */
#team .row.gy-4 {
  row-gap: 2rem;
}

/* ==== NEON GRADIENT GLOW UNTUK OUR TEAM & ABOUT ==== */

/* === About Image Panel dengan Gradient Neon === */
#about img {
  display: block;
  width: 100%;
  border-radius: 14px;
  padding: 0.35rem;
  background: linear-gradient(135deg, rgba(0,229,255,0.25), rgba(124,77,255,0.25));
  border: 1px solid rgba(255,255,255,.05);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.35),
    0 0 20px rgba(0,229,255,0.08),
    0 0 20px rgba(124,77,255,0.06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Hover glow lebih intens & berdenyut lembut */
#about img:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 0 25px rgba(0,229,255,0.35),
    0 0 40px rgba(124,77,255,0.25),
    0 16px 36px rgba(0,0,0,0.5);
  border-color: rgba(0,229,255,0.35);
  animation: pulseNeon 2.2s ease-in-out infinite;
}

/* === Our Team Tile dengan Neon Gradient === */
#team .tile.tile-avatar {
  position: relative;
  background: linear-gradient(145deg, rgba(0,229,255,0.2), rgba(124,77,255,0.2));
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
  padding: 0.35rem;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.35),
    0 0 20px rgba(0,229,255,0.08),
    0 0 20px rgba(124,77,255,0.06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Hover glow */
#team .tile.tile-avatar:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: rgba(0,229,255,0.35);
  box-shadow:
    0 0 25px rgba(0,229,255,0.35),
    0 0 40px rgba(124,77,255,0.25),
    0 12px 30px rgba(0,0,0,0.45);
  animation: pulseNeon 2.2s ease-in-out infinite;
}

/* gambar di dalam tile team */
#team .tile.tile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform .4s ease;
}
#team .tile.tile-avatar:hover img {
  transform: scale(1.05);
}

/* === Animasi glow berdenyut lembut (universal) === */
@keyframes pulseNeon {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(0,229,255,0.25),
      0 0 30px rgba(124,77,255,0.2),
      0 8px 28px rgba(0,0,0,.35);
  }
  50% {
    box-shadow:
      0 0 30px rgba(0,229,255,0.45),
      0 0 45px rgba(124,77,255,0.35),
      0 12px 36px rgba(0,0,0,.45);
  }
}
/* ==== PERBAIKAN ABOUT IMAGE & JARAK DENGAN PROJECTS ==== */

/* Batasi tinggi gambar About agar proporsional */
#about img {
  max-height: 320px;               /* tinggi maksimum */
  object-fit: cover;               /* isi area dengan cropping halus */
  width: 100%;
}

/* Tambahkan jarak antara About dan Projects */
#about {
  padding-bottom: 3rem;            /* beri ruang bawah */
}

#projects {
  margin-top: 2.5rem;              /* beri jarak atas agar tidak terlalu rapat */
}

/* Mobile responsive adjustment */
@media (max-width: 768px) {
  #about img {
    max-height: 240px;             /* lebih kecil di mobile */
  }
  #about {
    padding-bottom: 2rem;
  }
  #projects {
    margin-top: 2rem;
  }
}
/* ==== SOCIAL MEDIA BAR: sejajar dan techno-style ==== */

/* wrapper baris sosmed */
#contact .social-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;         /* agar tetap rapi di mobile */
  gap: 1rem;               /* jarak antar ikon */
  margin-top: 1rem;
}

/* tombol / ikon */
#contact .social-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
  color: var(--neon);
  font-size: 1.25rem;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* hover glow */
#contact .social-bar a:hover {
  color: var(--bg);
  background: var(--neon);
  box-shadow:
    0 0 18px rgba(0,229,255,0.35),
    0 0 28px rgba(124,77,255,0.25),
    0 8px 24px rgba(0,0,0,0.45);
  transform: translateY(-4px);
  border-color: rgba(0,229,255,0.3);
}

/* responsive spacing */
@media (max-width: 576px) {
  #contact .social-bar { gap: 0.75rem; }
  #contact .social-bar a { width: 38px; height: 38px; font-size: 1.1rem; }
}


/* === Contact: sejajarkan panel & social bar satu baris === */
#contact .row.g-4 { align-items: stretch; }              /* panel sama tinggi */
#contact .neo-panel { height: 100%; }                    /* paksa panel full height col */
#contact .social-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;                           /* kiri, rapi */
  gap: .5rem;
  flex-wrap: nowrap;                                     /* satu baris */
}
#contact .social-bar .btn { 
  white-space: nowrap;                                   /* teks tak pecah */
  padding-inline: .75rem;
}
@media (max-width: 576px) {
  #contact .social-bar { 
    justify-content: center; 
    flex-wrap: wrap;                                     /* boleh wrap di mobile */
  }
}


/* === Contact: sejajarkan panel & social bar satu baris === */
#contact .row.g-4 { align-items: stretch; }              /* panel sama tinggi */
#contact .neo-panel { height: 100%; }                    /* paksa panel full height col */
#contact .social-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;                           /* kiri, rapi */
  gap: .5rem;
  flex-wrap: nowrap;                                     /* satu baris */
}
#contact .social-bar .btn { 
  white-space: nowrap;                                   /* teks tak pecah */
  padding-inline: .75rem;
}
@media (max-width: 576px) {
  #contact .social-bar { 
    justify-content: center; 
    flex-wrap: wrap;                                     /* boleh wrap di mobile */
  }
}
/* pastikan keduanya bisa berdampingan & rapi */
#contact .row.g-4 { align-items: stretch; }
#contact .neo-panel { height: 100%; }
#contact .social-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
}
@media (max-width: 576px){
  /* di mobile boleh wrap */
  #contact .social-bar { flex-wrap: wrap; justify-content: center; }
}

/* Force center social bar */
#contact .social-bar {
  justify-content: center !important;
  flex-wrap: wrap;
}



/* === Footer Pro === */
.site-footer{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  border-top: 1px solid rgba(255,255,255,0.06);
  color: rgba(230,251,255,.9);
}
.site-footer a { color: rgba(230,251,255,.9); text-decoration: none; }
.site-footer a:hover { color: var(--neon); text-shadow: 0 0 8px rgba(0,229,255,.35); }

.footer-heading{
  font-family: 'Orbitron', sans-serif;
  color: var(--neon);
  letter-spacing: .5px;
  margin-bottom: .6rem;
}

.footer-links li + li { margin-top: .35rem; }
.footer-links a{
  opacity: .9;
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}
.footer-links a:hover{ opacity: 1; transform: translateX(3px); }

.footer-contact li{
  display: flex; align-items: center; gap: .5rem;
  opacity: .95; margin-bottom: .35rem;
}
.footer-contact i{ opacity: .9; }

.social-mini .icon{
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  transition: all .25s ease;
  color: var(--neon);
}
.social-mini .icon:hover{
  color: var(--bg); background: var(--neon);
  border-color: rgba(0,229,255,0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0,229,255,0.35), 0 0 28px rgba(124,77,255,0.25), 0 8px 24px rgba(0,0,0,0.45);
}

.footer-sep{
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* Back to top */
.back-to-top{
  display: inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--neon);
  transition: all .25s ease;
}
.back-to-top:hover{
  color: var(--bg); background: var(--neon);
  transform: translateY(-2px);
}

/* Small tweaks */
@media (max-width: 576px){
  .footer-links li + li { margin-top: .25rem; }
}


/* === Welcome Terminal === */
#welcomeTerminal{
  position: fixed; inset: 0; z-index: 10000; /* di atas konten, setelah preloader */
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 50% 10%, rgba(0,229,255,.06), transparent 70%),
              rgba(7,16,33,.96);
  backdrop-filter: blur(2px);
}
#welcomeTerminal.show{ display: flex; animation: wFadeIn .35s ease; }
@keyframes wFadeIn { from{ opacity:0 } to{ opacity:1 } }

#welcomeTerminal .term-frame{
  width: min(920px, 92vw); max-height: min(70vh, 520px);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.14));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,229,255,.15);
  overflow: hidden; display: flex; flex-direction: column;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: #c4f6ff;
}

#welcomeTerminal .term-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: .55rem .75rem;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#welcomeTerminal .dots span{
  display:inline-block; width:12px; height:12px; border-radius:50%;
  margin-right:6px; background: #ff5f57;
  box-shadow: 0 0 10px rgba(255,95,87,.25);
}
#welcomeTerminal .dots span:nth-child(2){ background:#ffbd2e; box-shadow:0 0 10px rgba(255,189,46,.25); }
#welcomeTerminal .dots span:nth-child(3){ background:#28c840; box-shadow:0 0 10px rgba(40,200,64,.25); }
#welcomeTerminal .title{ opacity:.9; letter-spacing:.3px; font-size:.9rem; }

#welcomeTerminal .skip-btn{
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.15));
  color: var(--neon, #00e5ff); border-radius: 10px;
  padding: .25rem .6rem; font-weight:600; font-size:.85rem;
  transition: all .2s ease;
}
#welcomeTerminal .skip-btn:hover{ color:#071021; background: var(--neon, #00e5ff); }

#welcomeTerminal .term-body{
  padding: .9rem 1rem 1.1rem; overflow: auto; line-height: 1.55;
  font-size: .95rem; white-space: pre-wrap;
}
#welcomeTerminal .line{ opacity:.92; }
#welcomeTerminal .cmd{ color:#7ceeff; }
#welcomeTerminal .kwd{ color:#78F5A4; }
#welcomeTerminal .str{ color:#ffee99; }
#welcomeTerminal .num{ color:#a9b3ff; }
#welcomeTerminal .cmt{ color: #7aa0af; opacity:.8; }
#welcomeTerminal .caret{
  display:inline-block; width: .6ch; margin-left: 2px;
  color: var(--neon, #00e5ff);
  animation: caretBlink 1s steps(1,end) infinite;
}
@keyframes caretBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Reduce motion: langsung tampil & close lebih cepat */
@media (prefers-reduced-motion: reduce){
  #welcomeTerminal.show{ animation:none; }
  #welcomeTerminal .caret{ animation:none; opacity:1; }
}

/* ==== CLEAN ABOUT IMAGE (portrait, transparan, tanpa efek) ==== */
#about img {
  display: block;
  width: auto;                  /* biar menyesuaikan tinggi, tidak melar */
  max-width: 100%;              /* tetap responsif */
  height: 420px;                /* portrait, bisa disesuaikan (misal 400–500px) */
  margin-inline: auto;          /* tengah */
  border: none !important;      /* hapus semua border */
  border-radius: 0 !important;  /* tanpa sudut melengkung */
  background: transparent !important; /* tidak ada panel, tidak ada gradient */
  box-shadow: none !important;  /* hilangkan semua efek glow & bayangan */
  padding: 0 !important;        /* bersih dari padding */
  object-fit: contain;          /* tampil utuh tanpa crop */
  transition: none !important;  /* tidak ada animasi hover */
}

/* Hilangkan efek hover sebelumnya sepenuhnya */
#about img:hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  animation: none !important;
}

/* Responsif di layar kecil */
@media (max-width: 768px) {
  #about img {
    height: 300px;
  }
}
/* Matikan semua efek hover pada gambar About */
#about img,
#about img:hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
  cursor: default !important;
}

/* === Anti-save dasar untuk IMG === */
img.no-save{
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}