/*
  Theme: Galaxy Startup
  Author: yazDev
*/

:root {
  --bg-dark: #0a0a12;
  --bg-medium: #10101a;
  --primary: #4f46e5; /* Indigo */
  --primary-light: #675ff0;
  --text-light: #f8f9fa;
  --text-medium: #adb5bd;
  --text-dark: #6c757d;
  --border-color: rgba(255, 255, 255, 0.1);
  --glow-color: rgba(79, 70, 229, 0.4);
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 10px; border: 2px solid var(--bg-dark); }
::-webkit-scrollbar-thumb:hover { background-color: var(--primary-light); }
html { scrollbar-color: var(--primary) var(--bg-dark); scrollbar-width: thin; }

/* BASE & TYPOGRAPHY */
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-medium);
  overflow-x: hidden;
  cursor: default;
}
h1, h2, h3, h4, h5, h6 { color: var(--text-light); font-weight: 600; }
a { color: var(--primary); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--primary-light); }

/* NEW: CURSOR GLOW EFFECT */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: opacity 0.3s ease-out;
    opacity: 0;
}
body:hover .cursor-glow {
    opacity: 1;
}

.my-logo {
  width:120px; height:auto;
}


/* NEW: PURE CSS PARALLAX STAR BACKGROUND */
.stars-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transform: rotateZ(45deg); }
@keyframes animStar { from { transform: translateY(0); } to { transform: translateY(-2000px); } }

#stars, #stars2, #stars3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* Helper function for Sass to generate random stars */
/* @function random_range($min, $max) { @return random() * ($max - $min) + $min; }
   @function multiple-box-shadow($n) {
     $value: '#{random_range(0, 2000)}px #{random_range(0, 2000)}px #FFF';
     @for $i from 2 through $n {
       $value: '#{$value} , #{random_range(0, 2000)}px #{random_range(0, 2000)}px #FFF';
     } @return unquote($value);
   }
   $shadows-small:  multiple-box-shadow(700);
   $shadows-medium: multiple-box-shadow(200);
   $shadows-large:  multiple-box-shadow(100);
*/

#stars {
    width: 1px; height: 1px; background: transparent;
    box-shadow: ; 
    animation: animStar 150s linear infinite;
}
#stars2 {
    width: 2px; height: 2px; background: transparent;
    box-shadow: ; 
    animation: animStar 100s linear infinite;
}
#stars3 {
    width: 3px; height: 3px; background: transparent;
    box-shadow: ;
    animation: animStar 50s linear infinite;
}

/* Placeholder for quick use (less stars) */
#stars { box-shadow: 10px 815px #FFF, 1276px 1238px #FFF, 1856px 873px #FFF, 1940px 1483px #FFF, 411px 710px #FFF, 1421px 1195px #FFF, 1109px 1293px #FFF, 1599px 1113px #FFF, 887px 1133px #FFF, 143px 1864px #FFF, 1195px 632px #FFF, 73px 1852px #FFF, 1008px 612px #FFF, 112px 142px #FFF, 1166px 1866px #FFF, 1475px 827px #FFF, 115px 1200px #FFF, 542px 1235px #FFF, 1205px 146px #FFF, 1284px 1017px #FFF, 1374px 1729px #FFF, 1131px 1978px #FFF, 1222px 1335px #FFF, 246px 1438px #FFF, 1928px 1215px #FFF, 22px 1461px #FFF, 110px 1089px #FFF, 613px 1190px #FFF, 1290px 1117px #FFF, 1489px 1932px #FFF; animation: animStar 150s linear infinite; width: 1px; height: 1px; background: transparent;}
#stars2 { box-shadow: 1591px 528px #FFF, 938px 1063px #FFF, 75px 1130px #FFF, 1869px 956px #FFF, 1116px 1604px #FFF, 482px 137px #FFF, 234px 1738px #FFF, 1146px 1665px #FFF, 1664px 621px #FFF, 1495px 1774px #FFF, 1584px 1807px #FFF, 1330px 1279px #FFF, 1149px 1361px #FFF, 1181px 1197px #FFF, 111px 1138px #FFF, 123px 1231px #FFF, 1690px 1658px #FFF, 451px 1334px #FFF, 1152px 66px #FFF, 1716px 1210px #FFF, 1135px 1878px #FFF, 989px 1261px #FFF, 115px 188px #FFF, 1528px 432px #FFF; animation: animStar 100s linear infinite; width: 2px; height: 2px; background: transparent;}
#stars3 { box-shadow: 1024px 746px #FFF, 172px 109px #FFF, 1855px 1209px #FFF, 1431px 1563px #FFF, 1389px 1073px #FFF, 701px 1258px #FFF, 103px 1020px #FFF, 715px 1014px #FFF, 1402px 1056px #FFF, 1251px 1220px #FFF, 1618px 1669px #FFF, 1121px 410px #FFF, 193px 1882px #FFF, 1629px 1891px #FFF, 1205px 632px #FFF, 999px 1098px #FFF, 1211px 1500px #FFF, 1559px 1014px #FFF, 1503px 1750px #FFF, 1071px 953px #FFF; animation: animStar 50s linear infinite; width: 3px; height: 3px; background: transparent;}

/* NAVBAR */
.navbar {
  background: rgba(16, 16, 26, 0.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  transition: background 0.3s, box-shadow 0.3s;
}
.navbar.scrolled {
  background: var(--bg-medium);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.navbar-brand { color: var(--text-light) !important; font-weight: 700; }
.nav-link { color: var(--text-medium) !important; transition: color 0.2s; font-weight: 500; }
.nav-link.active, .nav-link:hover { color: var(--text-light) !important; }

/* HERO */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 4px solid var(--primary);
  box-shadow: 0 0 30px var(--glow-color), 0 0 50px rgba(0,0,0,0.5);
}
#typed { color: var(--primary); }

/* SECTIONS */
.section { padding: 100px 0; }
.section-header { text-align: center; margin-bottom: 50px; }
.section-title { font-size: 2.5rem; font-weight: 700; }
.section-subtitle { font-size: 1.1rem; color: var(--text-medium); }

/* BUTTONS with NEW Gradient Animation */
.btn { border-radius: 50px; padding: 12px 30px; font-weight: 600; transition: all 0.4s ease; }
.btn-primary-custom {
    background: linear-gradient(45deg, var(--primary), var(--primary-light), var(--primary));
    color: var(--text-light);
    border: none;
    box-shadow: 0 0 20px var(--glow-color);
    background-size: 200% auto;
    transition: transform 0.3s, box-shadow 0.3s, background-position 0.5s;
}
.btn-primary-custom:hover {
    background-position: right center; 
    transform: translateY(-3px);
    box-shadow: 0 4px 25px var(--glow-color);
}
.btn-outline-light.btn-custom { border-color: var(--border-color); color: var(--text-light); }
.btn-outline-light.btn-custom:hover { background: var(--primary); border-color: var(--primary); }

/* CARD CUSTOM (Glassmorphism) */
.card-custom {
  background: rgba(20, 20, 30, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.card-custom::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(circle at var(--x) var(--y), var(--primary-light) 0%, transparent 20%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card-custom:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.card-custom:hover::before { opacity: 0.1; }

/* TIMELINE */
.timeline-container { position: relative; max-width: 1000px; margin: 0 auto; }
.timeline-container::after {
  content: '';
  position: absolute;
  width: 3px;
  background: var(--border-color);
  top: 0; bottom: 0; left: 50%;
  margin-left: -1.5px;
}
.timeline-item { padding: 10px 40px; position: relative; width: 50%; }
.timeline-item:nth-child(odd) { left: 0; }
.timeline-item:nth-child(even) { left: 50%; }
.timeline-item:nth-child(odd) .timeline-content { text-align: right; }
.timeline-dot {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  right: -8px;
  background-color: var(--primary);
  border: 3px solid var(--bg-dark);
  top: 32px;
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 10px var(--glow-color);
}
.timeline-item:nth-child(even) .timeline-dot { left: -8px; }
.timeline-content { padding: 20px; position: relative; }
.timeline-date { font-weight: 600; color: var(--primary); margin-bottom: 5px; }
.timeline-title { margin: 0; color: var(--text-light); font-size: 1.25rem; }
.timeline-company { color: var(--text-medium); font-style: italic; }
.timeline-content ul { list-style: none; padding: 0; margin: 10px 0 0 0; font-size: 0.9rem; }

/* PORTFOLIO */
#portfolio-grid .card-custom { padding: 0; cursor: pointer; }
#portfolio-grid .card-custom img { width: 100%; height: 250px; object-fit: cover; border-radius: 16px 16px 0 0; }
.portfolio-card-body { padding: 1.5rem; }
.portfolio-title { margin-bottom: 0.5rem; }
.portfolio-tags span {
  display: inline-block;
  background: rgba(79, 70, 229, 0.2);
  color: var(--primary-light);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  margin-right: 5px;
}

.chip {
  display: inline-block;
  background: rgba(79, 70, 229, 0.2);
  color: var(--primary-light);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  margin-right: 5px;
}

.section-underline {
  width: 72px;
  height: 4px;
  background: var(--primary-light);
  margin: 0 auto 42px;
  border-radius: 3px;
}

/* CONTACT */
.contact-info li { display: flex; align-items: center; margin-bottom: 1rem; }
.contact-info i {
  font-size: 1.2rem;
  color: var(--primary);
  margin-right: 15px;
  width: 30px; text-align: center;
}
.social-links a {
  color: var(--text-medium);
  font-size: 1.5rem;
  margin-right: 20px;
  transition: color 0.3s, transform 0.3s;
}
.social-links a:hover { color: var(--primary); transform: scale(1.2); }
.form-control {
    background: var(--bg-medium);
    border: 1px solid var(--border-color);
    color: var(--text-light); padding: 12px 15px;
    border-radius: 8px;
}
.form-control:focus { background-color: var(--bg-medium); border-color: var(--primary); box-shadow: 0 0 10px var(--glow-color); color: var(--text-light); }
.form-control::placeholder { color: var(--text-dark); opacity: 1; }

/* MODAL ENHANCEMENTS */
.modal-content { background: var(--bg-medium); border: 1px solid var(--border-color); }
.modal-header { border-bottom: 1px solid var(--border-color); }

/* NEW: Scrollable image viewport */
.main-image-viewport {
    max-height: 380px; /* Penting */
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.main-image-viewport img {
    width: 100%;
    height: auto;
    display: block;
}

.thumbnail-container { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.thumbnail { width: 100px; height: 70px; object-fit: cover; border-radius: 5px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.3s; opacity: 0.7; }
.thumbnail.active, .thumbnail:hover { border-color: var(--primary); opacity: 1; }

#portfolio-details h3 { color: var(--primary-light); }
#portfolio-details .tech-stack span {
  background: rgba(79, 70, 229, 0.2); color: var(--primary-light);
  padding: 5px 12px; border-radius: 5px; font-size: 0.8rem;
  display: inline-block; margin: 3px;
}
/* IMPROVED: Key feature text contrast */
#portfolio-details .list-group-item {
    background: transparent;
    border-color: var(--border-color);
    padding-left: 0;
    color: var(--text-medium); 
}
#portfolio-details .list-group-item i { color: var(--primary); margin-right: 10px; }

/* FOOTER */
footer { padding: 20px 0; text-align: center; background: var(--bg-dark); border-top: 1px solid var(--border-color); font-size: 0.9rem; }

/* RESPONSIVE */
@media (max-width: 767px) {
  .timeline-container::after { left: 8px; }
  .timeline-item { width: 100%; padding-left: 40px; padding-right: 0; }
  .timeline-item:nth-child(even) { left: 0; }
  .timeline-item:nth-child(odd) .timeline-content, .timeline-item:nth-child(even) .timeline-content { text-align: left; }
  .timeline-dot { left: 0px; }
}