/* =========================================================
   GLOBAL RESET + BASE STYLE
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: 'Source Code Pro', monospace;
  background-color: #1e1fa3;
}

/* =========================================================
   GLOBAL TEXT COLOR
   ========================================================= */
section {
  padding: 50px;
  text-align: center;
  min-height: 100vh;
  background-color: #1e1fa3;
  color: white;
}

img {
  display: block;
}

/* =========================================================
   SCROLLBAR STYLING (TRANSPARENT)
   ========================================================= */
::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}


/* =========================================================
   NAVBAR — FIXED GLASS
   ========================================================= */
.navbar {
  width: 100%;
  height: 70px;
  padding: 0;
  position: fixed;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px);
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 80px;
  align-items: center;
}

.navbar li {
  font-weight: 600;
  letter-spacing: 1px;
}

.navbar a {
  text-decoration: none;
  color: white;
  transition: .3s;
}

.navbar a:hover {
  color: #d6d6ff;
}

.navbar .logo {
  width: 60px;
  height: auto;
}


/* =======================================================
   HERO SECTION — TITLE, TYPING TEXT & FLOATING TAG CAPSULES
   ======================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  padding-top: 160px; /* atur sesuai selera (120–200px oke) */


  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  background-color: #1e1fa3;

  padding-bottom: 150px;
  width: 100vw;
}

/* --------------------------
   MAIN TITLE & SUBTEXT
   -------------------------- */

.text-content h1,
.text-content h2 {
  color: #fff;
  font-weight: 700;
}

.text-content h1 {
  font-size: 60px;
}

.text-content h2 {
  font-size: 100px;
}

.text-content h1 span {
  font-style: italic;
  font-weight: 400;
}

.text-content h2 span {
  font-weight: 800;
}

#changing-text {
  font-family: 'Source Code Pro', monospace;
  font-size: 22px;
  color: white;
  margin-top: 10px;
  line-height: 1.4;
  animation: colorChange 6s infinite alternate ease-in-out;
}

@keyframes colorChange {
  0%   { color: #ffffff; }
  25%  { color: #ff7ae6; }
  50%  { color: #69e0ff; }
  75%  { color: #a1ff69; }
  100% { color: #ffe869; }
}

/* --------------------------
   TYPING EFFECT (PORTFOLIO)
   -------------------------- */

.typing-wrapper {
  display: inline-block;
  height: 100px;
  line-height: 100px;
  overflow: hidden;
}

.typing-text {
  display: inline-block;
  font-family: 'Source Code Pro', monospace;
  font-weight: 700;
  color: white;

  border-right: 3px solid white;
  white-space: nowrap;
  overflow: hidden;

  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%,100% { border-color: transparent; }
  50%     { border-color: white; }
}

/* =======================================================
   CAPSULE FLOATING ZONE UNDER TEXT
   ======================================================= */

.capsule-zone {
  position: relative;

  width: 100vw;
  height: 30vh;

  margin-top: 20px;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: none;
}

.capsules {
  position: relative;
  width: 100%;
  height: 100%;
}

/* --------------------------
   FLOATING TAG STYLES
   -------------------------- */

.tag {
  position: absolute;
  display: inline-block;

  padding: 10px 25px;
  border-radius: 50px;

  color: white;
  font-size: 14px;
  letter-spacing: 1px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: 0.3s;

  will-change: transform;
  pointer-events: auto;
  cursor: pointer;

  z-index: 5;
}

.tag:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
  filter: brightness(1.3);
  z-index: 10;
}

/* --------------------------
   TAG COLOR SET
   -------------------------- */

.pink  { background: rgba(255, 54, 188, 0.25); }
.blue  { background: rgba(113, 146, 255, 0.25); }
.green { background: rgba(10, 255, 255, 0.25); }
.olive { background: rgba(255, 196, 21, 0.25); }
.teal  { background: rgba(124, 43, 255, 0.25); }

/* --------------------------
   ACTIVE GRADIENT ON HOVER
   -------------------------- */

@keyframes waveGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.pink:hover {
  background: linear-gradient(-45deg,#f472b6,#ec4899,#d946ef,#f9a8d4);
  background-size: 400% 400%;
  animation: waveGradient 3s ease-in-out infinite;
}

.blue:hover {
  background: linear-gradient(-45deg,#60a5fa,#3b82f6,#2563eb,#93c5fd);
  background-size: 400% 400%;
  animation: waveGradient 3s ease-in-out infinite;
}

.green:hover {
  background: linear-gradient(-45deg,#4ade80,#22c55e,#16a34a,#86efac);
  background-size: 400% 400%;
  animation: waveGradient 3s ease-in-out infinite;
}

.olive:hover {
  background: linear-gradient(-45deg,#eab308,#ca8a04,#a16207,#facc15);
  background-size: 400% 400%;
  animation: waveGradient 3s ease-in-out infinite;
}

.teal:hover {
  background: linear-gradient(-45deg,#2dd4bf,#14b8a6,#0d9488,#99f6e4);
  background-size: 400% 400%;
  animation: waveGradient 3s ease-in-out infinite;
}


/* =======================================================
   ABOUT SECTION — PHOTO STACK + TEXT + FLOATING CAPSULES
   ======================================================= */

#about {
  width: 100%;
  min-height: 100vh;

  background-color: #1e1fa3;
  padding: 120px 80px;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* =======================================================
   BACKGROUND CAPSULES (floating decorative)
   ======================================================= */

.about-capsule-zone {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.a-cap {
  position: absolute;
  width: 85px;
  height: 28px;
  border-radius: 999px;

  opacity: 0.35;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.35);

  animation: aboutCapsFloat 9s ease-in-out infinite;
}

/* Random positions — NO STYLE CHANGE, ONLY ORGANIZED */
.cap1  { top: 12%; left: 8%;  transform: rotate(-12deg); }
.cap2  { top: 25%; left: 25%; transform: rotate(8deg); }
.cap3  { top: 40%; left: 10%; transform: rotate(3deg); }
.cap4  { top: 60%; left: 4%;  transform: rotate(-8deg); }
.cap5  { top: 75%; left: 20%; transform: rotate(10deg); }
.cap6  { top: 18%; right: 12%; transform: rotate(7deg); }
.cap7  { top: 35%; right: 6%;  transform: rotate(-14deg); }
.cap8  { top: 55%; right: 18%; transform: rotate(4deg); }
.cap9  { top: 70%; right: 7%;  transform: rotate(12deg); }
.cap10 { top: 82%; right: 15%; transform: rotate(-9deg); }

@keyframes aboutCapsFloat {
  0%   { transform: translateY(0) translateX(0) rotate(var(--r)); }
  50%  { transform: translateY(-12px) translateX(8px) rotate(calc(var(--r) + 6deg)); }
  100% { transform: translateY(0) translateX(0) rotate(var(--r)); }
}

/* =======================================================
   ABOUT WRAPPER (layout)
   ======================================================= */
@media (max-width: 1400px) {

.about-wrapper {
  position: relative;
  z-index: 5; /* above floating capsules */

  display: flex;
  gap: 120px;
  align-items: center;
  justify-content: center;

  max-width: 1300px;
  margin: 0 auto;
}
}
/* =======================================================
   PHOTO STACK — GLASS CARD + RAINBOW GRADIENT + PHOTO
   ======================================================= */

.photo-stack {
  position: relative;
  width: 400px;
  height: 500px;

  margin-top: 40px;
  align-self: flex-start;
}

/* BACK GLASS */
.back-glass {
  position: absolute;
  inset: 0;

  border-radius: 35px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 0 60px rgba(255,255,255,0.18);

  transform: rotate(-6deg) translate(-10px,10px);
  animation: floatingGlass 6s ease-in-out infinite;
}

/* FRONT RAINBOW */
.front-rainbow {
  position: absolute;
  inset: 0;

  border-radius: 35px;

  background: linear-gradient(135deg, #ff7ae6, #7da0ff, #6afff3, #ffe36b);
  background-size: 300% 300%;
  filter: blur(1px);

  transform: rotate(7deg) translate(10px,-10px);
  animation: rainbowFlow 4s ease infinite;
}

/* PROFILE PHOTO */
.about-photo {
  position: absolute;
  z-index: 5;

  width: 500px;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) rotate(3deg);
  filter: drop-shadow(0px 14px 35px rgba(0,0,0,0.35));
}

/* ANIMATIONS */
@keyframes floatingGlass {
  0%   { transform: rotate(-6deg) translate(-10px,10px); }
  50%  { transform: rotate(-6deg) translate(-14px,14px); }
  100% { transform: rotate(-6deg) translate(-10px,10px); }
}

@keyframes rainbowFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating small capsules on photo (yellow + purple) */
.floating-capsule {
  position: absolute;
  width: 120px;
  height: 42px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 4px 18px rgba(0,0,0,0.25);

  animation: floatCaps 5.5s ease-in-out infinite;
  pointer-events: none;
}

.glass.yellow { background: rgba(255,228,112,0.28); }
.glass.purple { background: rgba(172,114,255,0.28); }

.front.yellow { top: 30px; right: -55px; transform: rotate(4deg); }
.front.purple { bottom: -30px; left: -40px; transform: rotate(-4deg); }

@keyframes floatCaps {
  0%   { transform: translateY(0) translateX(0) rotate(-4deg); }
  50%  { transform: translateY(-14px) translateX(10px) rotate(3deg); }
  100% { transform: translateY(-6px) translateX(-6px) rotate(-2deg); }
}

/* =======================================================
   ABOUT TEXT
   ======================================================= */

.about-text {
  max-width: 900px;
  width: 65%;
  text-align: left;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: white;
}

.about-text h3 {
  font-size: 18px;
  opacity: 0.9;
  margin-top: -10px;
}

.about-text h1 {
  font-size: 30px;
  font-weight: 700;
  margin: 6px 0 20px;

  animation: colorChange 6s infinite alternate ease-in-out;
}

.about-description {
  position: relative;
  max-width: 720px;

  padding: 22px 32px;
  font-size: 15px;
  line-height: 1.6;

  color: white;
}

.about-description::after {
  content: "";
  position: absolute;
  inset: 10px;

  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  background: rgba(255,255,255,0.15);

  box-shadow:
    0 4px 12px rgba(255,255,255,0.25) inset,
    0 10px 30px rgba(0,0,0,0.35);

  z-index: -1;
}


/* animasi gradasi */
@keyframes waveGrad {
  0% { background-posistion: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.about-text p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
}


.floating-capsule {
  position: absolute;
  width: 120px;
  height: 42px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  animation: floatCaps 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.glass.yellow { background: rgba(255, 228, 112, 0.28); }
.glass.purple { background: rgba(172, 114, 255, 0.28); }

@keyframes floatCaps {
  0%   { transform: translateY(0px) translateX(0px) rotate(-4deg); }
  50%  { transform: translateY(-14px) translateX(10px) rotate(3deg); }
  100% { transform: translateY(-6px) translateX(-6px) rotate(-2deg); }
}

.front  { z-index: 5; }


/* DEPAN (lebih kecil dan lebih dekat ke frame) */
.floating-capsule.front.yellow  { top: 30px; right: -55px; transform: rotate(4deg); }
.floating-capsule.front.purple  { bottom: -30px; left: -40px; transform: rotate(-4deg); }


/* =======================================================
   TOOLS & SKILLS SECTION
   ======================================================= */

.tools-and-skills {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}

/* =======================================================
   TOOLS SECTION (title + tabs + content)
   ======================================================= */

.tools-section {
  padding: 100px 0;
  width: 100%;
  text-align: left;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  margin-bottom: 6px;
}

.tools-title {
  font-size: 18px;
  opacity: 0.9;
  margin-top: 15px;
  margin-bottom: 10px;
}

/* TABS (container) */
.tools-tabs {
  display: flex;
  gap: 14px;

  justify-content: flex-start;
  flex-wrap: wrap;

  margin-bottom: 25px;
}

/* =======================================================
   TAB BUTTONS
   ======================================================= */

.tab {
  position: relative;
  padding: 10px 28px;

  border-radius: 50px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;

  color: white;
  background: rgba(255,255,255,0.08);

  border: 1.5px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 4px 18px rgba(0,0,0,0.25);

  transition: all 0.35s ease;
  overflow: hidden;
}

/* COLOR VARIABLES */
.tab[data-tab="design"]        { --glow-color: #ff77e9; }
.tab[data-tab="illustration"]  { --glow-color: #7aaaff; }
.tab[data-tab="video"]         { --glow-color: #4ef5b3; }
.tab[data-tab="threeD"]        { --glow-color: #ffe55c; }

/* HOVER */
.tab:hover {
  transform: scale(1.07);

  border-color: var(--glow-color);
  background: rgba(255,255,255,0.12);

  filter: brightness(1.2);
  box-shadow:
    0 0 10px var(--glow-color),
    0 0 25px var(--glow-color);
}

/* ACTIVE */
.tab.active {
  transform: scale(1.08);

  border-color: var(--glow-color);
  background: rgba(255,255,255,0.18);

  box-shadow:
    0 0 18px var(--glow-color),
    0 0 35px var(--glow-color);
}

/* SHINE LAYER */
.tab::before {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: inherit;

  background: linear-gradient(
    120deg,
    transparent 10%,
    var(--glow-color) 40%,
    transparent 90%
  );

  background-size: 300% 300%;

  opacity: 0;
  transition: opacity 0.5s ease, background-position 1.2s ease;

  z-index: 0;
}

.tab:hover::before {
  opacity: 0.5;
  background-position: 100% 0;
}

.tab span {
  position: relative;
  z-index: 1;
}

/* =======================================================
   TAB CONTENT
   ======================================================= */

.tab-content-wrapper { width: 100%; }

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tools-grid {
  display: flex;

  justify-content: flex-start;
  align-items: center;

  flex-wrap: wrap;
  gap: 30px;

  padding-top: 15px;
}

.tools-grid img {
  width: 100px;
  height: 100px;

  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.2));

  transition: 0.3s;
}

.tools-grid img:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
}

/* =======================================================
   SKILLS TITLE
   ======================================================= */

.skills-section {
  display: flex;
  flex-direction: column;

  width: 100%;
  text-align: left;
}

.skills-title {
  font-size: 18px;
  opacity: 0.9;
  color: white;

  margin-top: 30px;
  margin-bottom: 10px;
}


/* =======================================================
   EXPERIENCE SECTION (LEFT + RIGHT)
   ======================================================= */

.experience-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  width: 100%;
  max-width: 1200px;

  gap: 60px;
  margin: 10px auto 0;
  padding: 0 40px;

  margin-top: -130px !important; /* posisi sesuai desain */
}

/* LEFT: Organization */
.exp-left {
  width: 55%;
}

/* RIGHT: Work */
.exp-right {
  width: 45%;
}

/* title */
.experience-section .skills-title,
.exp-left .skills-title,
.exp-right .skills-title {
  margin-top: 40px;
  margin-bottom: 15px;

  font-size: 22px;
  font-weight: 700;
}

/* =======================================================
   ACCORDION RANGE
   ======================================================= */

.glass-box {
  position: relative;

  width: 100%;
  max-width: 720px !important;

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 18px !important;

  overflow: hidden;
  margin-bottom: 12px;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 4px 12px rgba(255,255,255,0.25) inset,
    0 10px 30px rgba(0,0,0,0.35);
}

/* ACCORDION BUTTON */
.accordion-button {
  background: transparent !important;

  width: 100%;
  max-width: 720px !important;

  padding: 1rem 1.2rem;

  font-size: 1rem;
  font-weight: 600;
  color: white;

  border: none;
  border-radius: 18px !important;

  transition: all 0.3s ease;
  box-shadow: none;
}

/* hover */
.accordion-button:hover {
  background: rgba(255,255,255,0.1);
  filter: brightness(1.1);
}

/* active (expanded) */
.accordion-button:not(.collapsed) {
  background: rgba(255,255,255,0.18);

  color: white;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;

  box-shadow:
    inset 0 2px 8px rgba(255,255,255,0.2),
    0 0 8px rgba(255,255,255,0.15);
}

/* arrow */
.accordion-button::after {
  filter: brightness(1.8);
  max-width: 650px;
}

/* ACCORDION BODY */
.accordion-body {
  background: rgba(255,255,255,0.08);

  width: 100%;
  max-width: 720px !important;

  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;

  color: white;

  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom-left-radius: 18px !important;
  border-bottom-right-radius: 18px !important;
}

/* =======================================================
   EXPERIENCE ITEM (date, company, role)
   ======================================================= */

.experience-item {
  display: flex;
  flex-direction: column;

  gap: 6px;
  margin-bottom: 25px;

  padding-left: 5px;
  text-align: left;

  color: white;
}

.exp-date {
  font-size: 1rem;
  opacity: 0.85;
  letter-spacing: 0.4px;
}

.exp-company {
  font-size: 1.17rem;
  font-weight: 700;
  color: white;

  letter-spacing: 0.5px;
  text-shadow: 0 0 6px rgba(255,255,255,0.25);
}

.exp-role {
  font-size: 1.05rem;
  opacity: 0.92;
  margin-bottom: 5px;
}




/* =======================================================
   WORK SECTION
   ======================================================= */

#work {
  position: relative;
  width: 100%;
  text-align: center;

  padding-top: 120px;
  color: white;
}

/* Title */
.art-title {
  font-size: 30px;
  margin-bottom: 40px;

  font-weight: 700;
  letter-spacing: 2px;

  animation: colorChange 6s infinite alternate ease-in-out;
}

/* =======================================================
   CAPSULE FLOATING BACKGROUND (behind carousel)
   ======================================================= */

.work-capsule-zone {
  position: absolute;
  top: 190px;
  left: 0;

  width: 100%;
  height: 500px;

  overflow: hidden;
  pointer-events: none;
  z-index: 0; /* behind carousel + title */
}

.work-capsules {
  position: relative;
  width: 100%;
  height: 100%;
}

/* capsule style */
.work-cap {
  position: absolute;

  width: 180px;
  height: 55px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 4px 20px rgba(0,0,0,0.25);

  cursor: pointer;
  pointer-events: auto;

  transition: 0.4s ease;
}

/* hover → glowing */
.work-cap:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px currentColor;
}

/* capsule colors */
.pink  { background: rgba(255, 54, 188, 0.25); }
.blue  { background: rgba(113, 146, 255, 0.25); }
.green { background: rgba(10, 255, 255, 0.25); }
.olive { background: rgba(255, 196, 21, 0.25); }
.teal  { background: rgba(124, 43, 255, 0.25); }

/* =======================================================
   GLASS BACKGROUND BEHIND CAROUSEL
   ======================================================= */

.art-glass-bg {
  position: absolute;
  top: 54.5%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100vw;
  height: 530px;

  background: linear-gradient(135deg,
    rgba(255,255,255,0.15),
    rgba(200,200,255,0.10)
  );

  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);

  box-shadow:
    0 10px 40px rgba(0,0,0,0.35),
    inset 0 0 40px rgba(255,255,255,0.15);

  animation: glassWave 4s ease-in-out infinite;
  z-index: 0;
}

/* animasi soft bergerak */
@keyframes glassWave {
  0% { background: linear-gradient(130deg, rgba(255,200,255,0.18), rgba(150,200,255,0.12)); }
  50% { background: linear-gradient(230deg, rgba(255,150,240,0.22), rgba(120,170,255,0.12)); }
  100% { background: linear-gradient(130deg, rgba(255,200,255,0.18), rgba(150,200,255,0.12)); }
}

/* =======================================================
   CAROUSEL
   ======================================================= */

#artCarousel {
  width: 100%;
  margin-top: 40px;
  position: relative;
  z-index: 5; /* above glass bg */
}

/* each slide wrapper */
.art-slide {
  width: 800px;
  height: 500px;

  margin: 0 auto;
  position: relative;

  transform: scale(0.55);
  opacity: 0.35;
  filter: blur(1.5px);

  transition: 0.4s ease;
}

/* active slide */
.carousel-item.active .art-slide {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}

/* image */
.art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  border-radius: 22px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.35);
}

/* slide info gradient bottom */
.art-info {
  position: absolute;
  bottom: 0;
  width: 100%;

  padding: 18px;
  text-align: center;

  background: linear-gradient(to top, rgba(255, 99, 188, 0.75), transparent);
  border-radius: 0 0 22px 22px;
}

.art-info h3 {
  font-weight: 700;
  text-shadow: 0 3px 12px rgba(0,0,0,0.35);
}

.art-info p {
  font-size: 22px;
  text-shadow: 0 3px 10px rgba(0,0,0,0.35);
}

/* =======================================================
   ARROWS
   ======================================================= */

.custom-prev,
.custom-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 55px;
  height: 55px;
  border-radius: 50%;

  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.4);

  backdrop-filter: blur(10px);

  z-index: 5;
}

.custom-prev {
  left: 18%;
}
.custom-next {
  right: 18%;
}

.custom-prev:hover,
.custom-next:hover {
  background: rgba(255,255,255,0.4);
}

/* =======================================================
   SHOW BUTTON (open popup)
   ======================================================= */

.show-btn {
  margin-top: 25px;
  padding: 12px 35px;

  border-radius: 50px;

  color: white;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);

  transition: 0.3s ease;
  cursor: pointer;

  position: relative;
  z-index: 5;
}

.show-btn:hover {
  transform: scale(1.07);
}


@keyframes glassWave {
  0% { background: linear-gradient(130deg, rgba(255,200,255,0.18), rgba(150,200,255,0.12)); }
  50% { background: linear-gradient(230deg, rgba(255,150,240,0.22), rgba(120,170,255,0.12)); }
  100% { background: linear-gradient(130deg, rgba(255,200,255,0.18), rgba(150,200,255,0.12)); }
}

/* ===== WORK PAGE CAPSULE ZONE ===== */
/* ZONE CAPULE DI BELAKANG TEKS */
.work-capsule-zone {
  position: absolute;
  top: 190px;         /* Atur posisi kapsul di belakang teks */
  left: 0;
  width: 100%;
  height: 500px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;         /* DI BELAKANG tulisan dan carousel */
}

.work-capsules {
  position: relative;
  width: 100%;
  height: 100%;
}

/* CAPSULE STYLE */
.work-cap {
  position: absolute;
  width: 180px;
  height: 55px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  pointer-events: auto;
  cursor: pointer;
  transition: 0.4s ease;
}

/* HOVER EFFECT */
.work-cap:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px currentColor;
}

/* WARNA */
.pink  { background: rgba(255, 54, 188, 0.25); }
.blue  { background: rgba(113, 146, 255, 0.25); }
.green { background: rgba(10, 255, 255, 0.25); }
.olive { background: rgba(255, 196, 21, 0.25); }
.teal  { background: rgba(124, 43, 255, 0.25); }

/* =======================================================
   POPUP OVERLAY (FULL SCREEN BACKDROP)
   ======================================================= */

.popup-overlay {
  position: fixed;
  inset: 0;

  background: rgba(10, 10, 60, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(18px);

  display: flex;
  justify-content: center;
  align-items: flex-end;

  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease;

  padding-top: 30px;
  z-index: 999;
}

/* ketika muncul */
.popup-overlay.show {
  opacity: 1;
  pointer-events: auto;
}


/* =======================================================
   POPUP CONTENT BOX
   ======================================================= */

.popup-content {
  width: 80%;
  max-width: 900px;

  background: rgba(80, 90, 255, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  padding: 28px;
  border-radius: 22px;
  margin-bottom: 45px;

  box-shadow:
    0 15px 40px rgba(0,0,0,0.45),
    inset 0 0 40px rgba(255,255,255,0.15);

  /* SCROLL INSIDE POPUP */
  max-height: 85vh;
  overflow-y: auto;

  /* animasi muncul */
  transform: translateY(120%);
  transition: transform 0.5s ease;
}

.popup-overlay.show .popup-content {
  transform: translateY(0);
}

/* scrollbar prettier */
.popup-content::-webkit-scrollbar {
  width: 8px;
}
.popup-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 10px;
}
.popup-content::-webkit-scrollbar-track {
  background: transparent;
}


/* =======================================================
   POPUP HEADER (TITLE + CLOSE)
   ======================================================= */

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

  margin-bottom: 15px;
}

/* Title */
#popup-title {
  flex: 1;
  text-align: center;

  color: white;
  font-size: 28px;
  font-weight: 700;

  text-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

/* close button */
.popup-close {
  width: 45px;
  height: 45px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;
  font-size: 22px;

  color: white;
  cursor: pointer;

  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);

  transition: 0.3s ease;
}

.popup-close:hover {
  transform: scale(1.1);
  background: rgba(255,255,255,0.35);
}


/* =======================================================
   POPUP CONTENT (IMAGE + YEAR + DESC + TOOLS)
   ======================================================= */

/* image */
.popup-image {
  width: 100%;
  border-radius: 16px;
  margin-bottom: 20px;
}

/* year */
#popup-year {
  text-align: center;
  color: white;

  font-size: 20px;
  opacity: 0.9;

  margin-bottom: 15px;
}

/* description */
#popup-desc {
  color: white;
  text-align: center;

  font-size: 16px;
  line-height: 1.6;
}

/* tools icon wrapper */
.popup-tools {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 18px;
  margin-top: 20px;
}

/* each tool icon */
.tool-icon {
  width: 70px;
  height: auto;

  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
  transition: 0.3s ease;
}

.tool-icon:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 5px 12px rgba(255,255,255,0.4));
}


/* ============================= */
/*        CONNECT SECTION        */
/* ============================= */

#connect {
  min-height: auto !important;
  padding: 120px 40px 20px;
  text-align: center;

  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-top: 1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 20px 40px rgba(0,0,0,0.25);

  margin-top: 250px;
}

.connect-title {
  font-size: 50px;
  font-weight: 800;
  color: white;
  transform: translateY(-70px); /* lebih kecil, aman */
  animation: colorChange 6s infinite alternate ease-in-out;
}

@keyframes colorChange {
  0%   { color: #ffffff; } 
  25%  { color: #ff7ae6; } 
  50%  { color: #69e0ff; } 
  75%  { color: #a1ff69; } 
  100% { color: #ffe869; } 
}

.connect-subtitle {
  font-size: 26px;
  font-style: italic;
   margin-top: -50px;  /* dekatkan subtitle ke title */
  margin-bottom: 30px; 
  transition: opacity 0.4s ease-in-out;
}

/* Default floating animation tetap ada */
.connect-buttons {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px; /* Jarak antar row */
}

/* Row IG + LinkedIn */
.top-row {
  display: flex;
  justify-content: center;
  gap: 50px;
}

.btn-wrap {
  display: inline-block;
}

.connect-buttons a {
  animation: floatBasic 4s ease-in-out infinite;
}
.ig-btn {
  animation: floatInsta 4s ease-in-out infinite;
}

.li-btn {
  animation: floatLinked 4.5s ease-in-out infinite;
}

.email-btn {
  animation: floatEmail 5s ease-in-out infinite;
}

@keyframes floatBasic {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}


.connect-btn {
  position: relative;       /* WAJIB */
  overflow: hidden;         /* WAJIB supaya glowingnya rapi */

  padding: 15px 45px;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  color: white;

  /* DEFAULT GLASS LOOK */
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: 0.45s ease;
  animation: floatConnect 4s ease-in-out infinite;

}

.connect-btn span {
  position: relative;
  z-index: 2;
}


/* FLOWING GRADIENT LAYER */
.connect-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0; /* dari -1 → jadi 0 supaya kelihatan */

  background: linear-gradient(120deg, var(--c1), var(--c2), var(--c3));
  background-size: 230% 230%;
  opacity: 0.45;
  animation: flowingCaps 5s ease infinite;
}

@keyframes flowingCaps {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hover → full solid + glow */
.connect-btn:hover {
  transform: scale(1.08);
  border-color: rgba(255,255,255,0.8);

  box-shadow:
    0 0 20px var(--c2),
    0 0 45px var(--c2),
    0 0 70px var(--c2);
}

.connect-btn:hover::before {
  opacity: 1;
}



.blue-btn {
  --c1: #7da0ff;
  --c2: #4d7bff;
  --c3: #2a53ff;
}

.pink-btn {
  --c1: #ff7ae6;
  --c2: #ff48c8;
  --c3: #d020a8;
}

.green-btn {
  --c1: #9dff8f;   /* hijau muda */
  --c2: #5dffa3;   /* hijau neon lembut */
  --c3: #2bd96b;   /* hijau lebih gelap */
}


/* ======================================= */
/*       SAFE SCROLL REVEAL ANIMATION      */
/* ======================================= */

/* Semua elemen yang akan muncul */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  will-change: opacity, transform;
}

/* Saat terlihat di layar */
.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* Delay tambahan */
.reveal.delay-1 { transition-delay: .15s; }
.reveal.delay-2 { transition-delay: .30s; }
.reveal.delay-3 { transition-delay: .45s; }
.reveal.delay-4 { transition-delay: .60s; }

.experience-section {
  width: 100%;
  max-width: 900px;
  margin: 60px auto 0;
  padding: 0 20px;
}

.experience-section .skills-title {
  margin-top: 40px;
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 700;
}

.experience-section .glass-box {
  max-width: 100% !important;
}

/* === EXPERIENCE CENTER LAYOUT (rapi & sejajar) === */
.experience-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;   /* batas biar tidak melebar ke pinggir */
  margin: 10px auto 0;   /* center */
  margin-top: -130px !important;
  padding: 0 40px;     /* jarak kiri-kanan */
  gap: 60px;
}

/* kiri (Organization) */
.exp-left {
  width: 55%;
}

/* kanan (Work + School) */
.exp-right {
  width: 45%;
}

/* box biar tidak terlalu panjang */
.exp-left .glass-box,
.exp-right .glass-box {
  max-width: 100%;
}

/* ===== TRANSPARENT SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 8px;               /* ukuran track */
  background: transparent;  /* track transparan */
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15); /* warna scroll tipis */
  border-radius: 10px;
  border: 2px solid transparent; 
  background-clip: padding-box; 
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28); /* hover sedikit kelihatan */
}

/* === RUNNING TEXT ANIMATION === */
.running-text-wrapper {
  width: 100%;
  overflow: hidden;
  position: absolute; 
  top: -40px;  /* atur jarak dari atas glassmorph */
  left: 0;
}

.running-text {
  display: inline-block;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.75);
   text-shadow: 0 0 8px rgba(255,255,255,0.3);
   background: linear-gradient(90deg, #ffe869, #ff7ae6, #69e0ff);
  -webkit-background-clip: text;
  color: transparent;
  animation: scrollText 12s linear infinite;
}

/* ANIMASI */
@keyframes scrollText {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* === GLOBAL STYLES === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
  font-family: 'Source Code Pro', monospace;
  background-color: #1e1fa3; /* Blue background */
}

/* === NAVBAR (GLASSMORPHIC) === */
.navbar {
  width: 100%;
  height: 70px;              
  padding: 0 0;              /* biar tidak nambah tinggi ekstra */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;       /* ← Biar logo & menu sejajar vertikal */
  background: rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 80px;
  align-items: center;
}

.navbar li {
  font-weight: 600;
  letter-spacing: 1px;
}

.navbar .logo {
  width: 60px;   
  height: auto;  
  object-fit: contain;
}

.navbar a {
  text-decoration: none;
  color: white;
  transition: 0.3s;
}

.navbar a:hover {
  color: #d6d6ff;
}

/* === HERO SECTION === */
.hero {
  position: relative;
  min-height: 100vh; /* Full height for hero */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #1e1fa3; /* Same blue background */
  padding-bottom: 150px;
}

.text-content h1, .text-content h2 {
  font-size: 60px;
  font-weight: 700;
  color: #fff;
}

.text-content p {
  font-size: 22px;
  margin-top: 10px;
  color: #dcdcff;
}

.text-content h1 span {
  font-style: italic;
  font-weight: 400;
}

.text-content h2 {
  font-size: 100px;
  font-weight: 700;
}

.text-content h2 span {
  font-style: Bold;
  font-weight: 800;
}

.typing-wrapper {
  display: inline-block;
  height: 100px; /* SESUAI ukuran font h2 kamu */
  line-height: 100px; /* Biar tetap center */
  overflow: hidden;
}

/* Pastikan tinggi teks stabil */
.typing-text {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

.typing-text {
  display: inline-block;
  font-family: 'Source Code Pro', monospace;
  font-weight: 700;
  color: white;
  border-right: 3px solid white;
  white-space: nowrap;
  overflow: hidden;
  animation: blink 0.7s infinite;
}

/* efek kedipan kursor */
@keyframes blink {
  0%, 100% { border-color: transparent; }
  50% { border-color: white; }
}


/* efek blinking pada kursor */
@keyframes blink {
  from { border-color: transparent }
  to { border-color: white }
}

.text-content p {
  font-size: 22px;
  margin-top: 10px;
  color: #dcdcff;
}

#changing-text {
  font-family: 'Source Code Pro', monospace;
  font-size: 22px;
  color: white;
  margin-top: 10px;
  animation: colorChange 6s infinite alternate ease-in-out;
}

@keyframes colorChange {
  0%   { color: #ffffff; } /* putih */
  25%  { color: #ff7ae6; } /* pink */
  50%  { color: #69e0ff; } /* biru muda */
  75%  { color: #a1ff69; } /* hijau muda */
  100% { color: #ffe869; } /* kuning */

}

/* Atur posisi capsule zone di bawah teks */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 1px; /* Jarak antara teks dan capsule zone */
}

 /* === AREA CAPSULE DI BAWAH TULISAN === */
.capsule-zone {
  position: relative;     /* Menggunakan relative untuk lebih fleksibel */
  margin-top: 20px;       /* Sesuaikan margin top untuk menempel di bawah teks */
  width: 100vw;           /* Full width layar */
  height: 30vh;           /* Tentukan tinggi capsule zone */
  overflow: hidden;       /* Agar capsule tidak keluar dari zona */
  pointer-events: none;   /* Biarkan teks bisa dihover */
}

.capsules {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}


/* === CAPSULE / GLASSMORPH TAG === */
.tag {
  position: absolute;
  display: inline-block;
  padding: 10px 25px;
  border-radius: 50px;
  color: white;
  font-size: 14px;
  letter-spacing: 1px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
  will-change: transform;
  pointer-events: auto; /* ini penting! */
  cursor: pointer;       /* biar interaktif */
  z-index: 5;
}

.tag:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
  filter: brightness(1.3);
  z-index: 10;
}


/* Animasi gerak tetap pakai JS nanti */
@keyframes waveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === POSISI & WARNA TRANSPARAN === */
.pink   { background: rgba(255, 54, 188, 0.25); }
.blue   { background: rgba(113, 146, 255, 0.25); }
.green  { background: rgba(10, 255, 255, 0.25); }
.olive  { background: rgba(255, 196, 21, 0.25); }
.teal   { background: rgba(124, 43, 255, 0.25); }

/* === HOVER (Gradient aktif) === */
.pink:hover {
  background: linear-gradient(-45deg, #f472b6, #ec4899, #d946ef, #f9a8d4);
  background-size: 400% 400%;
  animation: waveGradient 3s ease-in-out infinite;
}
.blue:hover {
  background: linear-gradient(-45deg, #60a5fa, #3b82f6, #2563eb, #93c5fd);
  background-size: 400% 400%;
  animation: waveGradient 3s ease-in-out infinite;
}
.green:hover {
  background: linear-gradient(-45deg, #4ade80, #22c55e, #16a34a, #86efac);
  background-size: 400% 400%;
  animation: waveGradient 3s ease-in-out infinite;
}
.olive:hover {
  background: linear-gradient(-45deg, #eab308, #ca8a04, #a16207, #facc15);
  background-size: 400% 400%;
  animation: waveGradient 3s ease-in-out infinite;
}
.teal:hover {
  background: linear-gradient(-45deg, #2dd4bf, #14b8a6, #0d9488, #99f6e4);
  background-size: 400% 400%;
  animation: waveGradient 3s ease-in-out infinite;
}

/* === SECTION STYLES === */
section {
  padding: 50px;
  text-align: center;
  background-color: #1e1fa3; /* Blue background for all sections */
  min-height: 100vh; /* Full height for each section */
  color: white;
}

section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

section .about-content, section .work-content, section .contact-content {
  margin-top: 20px;
}

section img {
  width: 250px;
  height: auto;
  border-radius: 50%;
  margin-bottom: 20px;
}

/* === ABOUT SECTION === */
#about {
  width: 100%;
  min-height: 100vh;
  background-color: #1e1fa3;
  padding: 120px 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  gap: 120px;
  max-width: 1300px;
  margin: 0 auto;
}

.photo-stack {
  position: sticky;
  margin-top: 40px;
  position: relative;
  width: 400px;     
  height: 500px;    
  align-self: flex-start;
}



/* Kotak belakang - GLASSMORPHISM */
.back-glass {
  position: absolute;
  inset: 0;
  border-radius: 35px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.18);
  transform: rotate(-6deg) translate(-10px, 10px);
  animation: floatingGlass 6s ease-in-out infinite;
}

/* Kotak depan - RAINBOW GRADIENT */
.front-rainbow {
  position: absolute;
  inset: 0;
  border-radius: 35px;
  background: linear-gradient(135deg, #ff7ae6, #7da0ff, #6afff3, #ffe36b);
  background-size: 300% 300%;
  animation: rainbowFlow 4s ease infinite;
  transform: rotate(7deg) translate(10px, -10px);
  filter: blur(1px);
}

.about-photo {
  position: absolute;
  width: 500px;
  z-index: 5;
  /* POSISI FOTO */
   top: 50%;       /* dari 48% → biar lebih center */
  left: 50%;      /* dari 52% → lebih ke tengah */
  transform: translate(-50%, -50%) rotate(3deg); /* Dikasih sedikit kemiringan */
  filter: drop-shadow(0px 14px 35px rgba(0,0,0,0.35));
}

/* — Animasi halus biar hidup minimal — */
@keyframes floatingGlass {
  0% { transform: rotate(-6deg) translate(-10px, 10px); }
  50% { transform: rotate(-6deg) translate(-14px, 14px); }
  100% { transform: rotate(-6deg) translate(-10px, 10px); }
}

@keyframes rainbowFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* TEXT AREA */
.about-text {
  display: flex;
  max-width: 900px;   /* lebih lebar */
  width: 65%;         /* kanan jadi lebih luas */
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  color: white;
}

.about-text h3 {
  font-size: 18px;
  opacity: 0.9;
  margin-top: -10px;
}

.about-text h1 {
  font-size: 30px;
  margin: 6px 0 20px;
  font-weight: 700;
  animation: colorChange 6s infinite alternate ease-in-out;
}

@keyframes colorChange {
  0%   { color: #ffffff; } 
  25%  { color: #ff7ae6; } 
  50%  { color: #69e0ff; } 
  75%  { color: #a1ff69; } 
  100% { color: #ffe869; } 
}


.about-description {
  position: relative;
  max-width: 720px;
  padding: 22px 32px;
  color: white;
  font-size: 1px;
  line-height: 1.55;
  z-index: 3;
}



/* LAYER GLASS DI DALAM FRAME */
.about-description::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.15);

  /* SHADOW KACA */
  box-shadow:
    0 4px 12px rgba(255, 255, 255, 0.25) inset, /* highlight dalam */
    0 10px 30px rgba(0, 0, 0, 0.35);            /* shadow luar buat depth */

  z-index: -1;
}

/* animasi gradasi */
@keyframes waveGrad {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.about-text p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
}


.floating-capsule {
  position: absolute;
  width: 120px;
  height: 42px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  animation: floatCaps 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.glass.yellow { background: rgba(255, 228, 112, 0.28); }
.glass.purple { background: rgba(172, 114, 255, 0.28); }

@keyframes floatCaps {
  0%   { transform: translateY(0px) translateX(0px) rotate(-4deg); }
  50%  { transform: translateY(-14px) translateX(10px) rotate(3deg); }
  100% { transform: translateY(-6px) translateX(-6px) rotate(-2deg); }
}

.front  { z-index: 5; }


/* DEPAN (lebih kecil dan lebih dekat ke frame) */
.floating-capsule.front.yellow  { top: 30px; right: -55px; transform: rotate(4deg); }
.floating-capsule.front.purple  { bottom: -30px; left: -40px; transform: rotate(-4deg); }


.tools-and-skills {
  display: flex;
  flex-direction: column;
   width: 100%;
  margin-top: 20px;
}

/* TOOLS I USE */
.tools-section {
  padding: 100px 0;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 6px;
}

.tools-title {
 font-size: 18px;
  opacity: 0.9;
   margin-top: 15px;
  margin-bottom: 10px;
  text-align: left;
}

/* === TOOLS TABS CONTAINER === */
.tools-tabs {
  display: flex;
  gap: 14px;
  margin-bottom: 25px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* === BASE STYLE === */
.tab {
  position: relative;
  padding: 10px 28px;
  border-radius: 50px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all 0.35s ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* === COLOR GLOWS (clear style) === */
.tab[data-tab="design"] {
  --glow-color: #ff77e9;
}
.tab[data-tab="illustration"] {
  --glow-color: #7aaaff;
}
.tab[data-tab="video"] {
  --glow-color: #4ef5b3;
}
.tab[data-tab="threeD"] {
  --glow-color: #ffe55c;
}

/* === HOVER EFFECT === */
.tab:hover {
  color: white;
  transform: scale(1.07);
  border-color: var(--glow-color);
  box-shadow:
    0 0 10px var(--glow-color),
    0 0 25px var(--glow-color);
  background: rgba(255, 255, 255, 0.12);
  filter: brightness(1.2);
}

/* === ACTIVE STATE === */
.tab.active {
  border-color: var(--glow-color);
  box-shadow:
    0 0 18px var(--glow-color),
    0 0 35px var(--glow-color);
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.08);
}

/* === OPTIONAL GRADIENT ANIMATION === */
.tab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent 10%,
    var(--glow-color) 40%,
    transparent 90%
  );
  opacity: 0;
  transition: opacity 0.5s ease, background-position 1.2s ease;
  background-size: 300% 300%;
  z-index: 0;
}

.tab:hover::before {
  opacity: 0.5;
  background-position: 100% 0;
}

.tab span {
  position: relative;
  z-index: 1;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}


.tools-grid {
  display: flex;
  justify-content: flex-start;   /* Pusat secara horizontal */
  align-items: center;       /* Pusat secara vertikal */
  flex-wrap: wrap;
  gap: 30px;                 /* jarak antar icon */
  padding-top: 15px;
}


.tools-grid img {
  width: 100px;         /* tambah ukurannya */
  height: 100px;        /* samakan biar kotak rapi */
  object-fit: contain;
  transition: 0.3s;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.2));
}

.tools-grid img:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
}


/* SKILLS */
.skills-section {
  text-align: left;
  width: 100%;
 display: flex;
  flex-direction: column;
  border-radius: 18px;
}

.skills-title {
 font-size: 18px;
  opacity: 0.9;
  color: white;
  border-radius: 18px;
  text-align: left;
  margin-top: 30px;
  margin-bottom: 10px;
  text-align: left;
}

/* === ORGANIZATION EXPERIENCE STYLE === */
.experience-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 25px;
  padding-left: 5px;
  text-align: left;
  color: white;
}

/* Date */
.exp-date {
  font-size: 1rem;
  opacity: 0.85;
  letter-spacing: 0.4px;
}

/* Organization / Company */
.exp-company {
  font-size: 1.17rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.5px;
  text-shadow: 0 0 6px rgba(255,255,255,0.25);
}

/* Role */
.exp-role {
  font-size: 1.05rem;
  opacity: 0.92;
  margin-bottom: 5px;
}



/* === GLASSMORPH ACCORDION === */
.glass-box {
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px !important;
  overflow: hidden;
  max-width: 720px !important;
  width: 100%;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow:
    0 4px 12px rgba(255, 255, 255, 0.25) inset, /* inner glow */
    0 10px 30px rgba(0, 0, 0, 0.35);             /* outer depth */
}

/* Accordion button styling */
.accordion-button {
  background-color: transparent !important;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 1rem 1.2rem;
  border: none;
    max-width: 720px !important;
  width: 100%;
  box-shadow: none;
  border-radius: 18px !important;
  overflow: hidden;
  transition: all 0.3s ease;
  
}

/* Hover & active effects */
.accordion-button:hover {
  background: rgba(255, 255, 255, 0.1);
  filter: brightness(1.1);
}

.accordion-button:not(.collapsed) {
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.2),
    0 0 8px rgba(255, 255, 255, 0.15);
  color: #ffffff;
   border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}

/* Panah icon */
.accordion-button::after {
  filter: brightness(1.8);
  max-width: 650px; /* sama lebar dengan description box */
}

/* Accordion body style */
.accordion-body {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1rem 1.5rem;
  line-height: 1.6;
  font-size: 0.95rem;
    border-bottom-left-radius: 18px !important;
  border-bottom-right-radius: 18px !important;
   max-width: 720px !important;
  width: 100%;
}

/* WORK SECTION */
#work {
  text-align: center;
  padding-top: 120px;
  position: relative;
}

/* Title */
.art-title {
  font-size: 30px;
  margin-bottom: 40px;
  letter-spacing: 2px;
  font-weight: 700;
  animation: colorChange 6s infinite alternate ease-in-out;
}

@keyframes colorChange {
  0%   { color: #ffffff; } 
  25%  { color: #ff7ae6; } 
  50%  { color: #69e0ff; } 
  75%  { color: #a1ff69; } 
  100% { color: #ffe869; } 
}

/* CAROUSEL WRAP */
#artCarousel {
  width: 100%;
  margin-top: 40px;
  position: relative;
  z-index: 5;
}

/* Slide wrapper */
.art-slide {
  width: 800px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  transition: 0.4s ease;
  transform: scale(0.55);
  opacity: 0.35;
  filter: blur(1.5px);
}

/* Active item = besar */
.carousel-item.active .art-slide {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}

/* Image */
.art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.35);
}

/* Gradient info */
.art-info {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 18px;
  color: white;
  text-align: center;
  background: linear-gradient(to top, rgba(255, 99, 188, 0.75), transparent);
  border-radius: 0 0 22px 22px;
}

.art-info h3 {
  text-shadow: 0 3px 12px rgba(0,0,0,0.35),
               0 0 18px rgba(0,0,0,0.25);
  font-weight: 700; }

  .art-info p {
  text-shadow: 0 3px 10px rgba(0,0,0,0.35),
               0 0 12px rgba(0,0,0,0.25); 
  font-size: 22px }

/* ARROWS dekat slide */
.custom-prev,
.custom-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.4);
  z-index: 5;
}

.custom-prev { left: 18%; }
.custom-next { right: 18%; }

.custom-prev:hover,
.custom-next:hover {
  background: rgba(255,255,255,0.4);
}

/* SHOW BUTTON */
.show-btn {
  margin-top: 25px;
  padding: 12px 35px;
  border-radius: 50px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
  color: white;
  cursor: pointer;
  transition: 0.3s;
  z-index: 5;
  position: relative;
}

.show-btn:hover {
  transform: scale(1.07);
}


/* ===== WORK PAGE CAPSULE ZONE ===== */
/* ZONE CAPULE DI BELAKANG TEKS */
.work-capsule-zone {
  position: absolute;
  top: 190px;         /* Atur posisi kapsul di belakang teks */
  left: 0;
  width: 100%;
  height: 500px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;         /* DI BELAKANG tulisan dan carousel */
}

.work-capsules {
  position: relative;
  width: 100%;
  height: 100%;
}

/* CAPSULE STYLE */
.work-cap {
  position: absolute;
  width: 180px;
  height: 55px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  pointer-events: auto;
  cursor: pointer;
  transition: 0.4s ease;
}

/* HOVER EFFECT */
.work-cap:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px currentColor;
}

/* WARNA */
.pink  { background: rgba(255, 54, 188, 0.25); }
.blue  { background: rgba(113, 146, 255, 0.25); }
.green { background: rgba(10, 255, 255, 0.25); }
.olive { background: rgba(255, 196, 21, 0.25); }
.teal  { background: rgba(124, 43, 255, 0.25); }

/* POPUP BACKDROP */
/* OVERLAY */
.popup-overlay {
  position: fixed;
  position: fixed;
  top: 40px;                
  left: 0;
  inset: 0;
  background: rgba(10, 10, 60, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease;
   padding-top: 30px;
  z-index: 999;
}

/* ketika dibuka */
.popup-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* POPUP BOX */
/* POPUP BOX */
.popup-content {
  width: 80%;
  max-width: 900px;
  background: rgba(80, 90, 255, 0.18);
  box-shadow:
    0 15px 40px rgba(0,0,0,0.45),
    inset 0 0 40px rgba(255,255,255,0.15);
  backdrop-filter: blur(18px);
  padding: 28px;
  border-radius: 22px;
  margin-bottom: 45px;

  /* scroll */
  max-height: 85vh;        /* batas tinggi popup */
  overflow-y: auto;        /* bikin isi popup scroll */

  /* animasi muncul */
  transform: translateY(120%);
  transition: transform 0.5s ease;
}

/* Biar scrollbarnya cantik */
.popup-content::-webkit-scrollbar {
  width: 8px;
}
.popup-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 10px;
}
.popup-content::-webkit-scrollbar-track {
  background: transparent;
}


.popup-overlay.show .popup-content {
  transform: translateY(0);
}

/* HEADER TITLE + CLOSE BUTTON */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  width: 100%;
}


#popup-title {
  flex: 1;
  text-align: center;
  color: white;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 4px 12px rgba(0,0,0,0.45);
}


/* Tombol close */
.popup-close {
  width: 45px;
  height: 45px;
  left: 20px;
  border-radius: 50%;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
  cursor: pointer;
  color: white;

  transition: 0.3s ease;
}


.popup-close:hover {
  transform: scale(1.1);
  background: rgba(255,255,255,0.35);
}


#popup-year {
  color: white;
  font-size: 20px;
  opacity: 0.9;
  text-align: center;
  margin-bottom: 15px;
}

#popup-desc {
  color: white;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}


/* IMAGE */
.popup-image {
  width: 100%;
  border-radius: 16px;
  margin-bottom: 20px;
}

/* WRAPPER ICONS */
.popup-tools {
  display: flex;
  justify-content: center;   /* BIAR TENGAH */
  align-items: center;
  gap: 18px;                 /* Jarak antar icon */
  margin-top: 20px;
}

/* ICON */
.tool-icon {
  width: 70px;               /* perbesar di sini */
  height: auto;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
  transition: 0.3s ease;
}

/* efek hover */
.tool-icon:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 5px 12px rgba(255,255,255,0.4));
}

/* ======================================= */
/*       SAFE SCROLL REVEAL ANIMATION      */
/* ======================================= */

/* Semua elemen yang akan muncul */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  will-change: opacity, transform;
}

/* Saat terlihat di layar */
.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* Delay tambahan */
.reveal.delay-1 { transition-delay: .15s; }
.reveal.delay-2 { transition-delay: .30s; }
.reveal.delay-3 { transition-delay: .45s; }
.reveal.delay-4 { transition-delay: .60s; }


/* === RUNNING TEXT ANIMATION === */
.running-text-wrapper {
  width: 100%;
  overflow: hidden;
  position: absolute; 
  top: -40px;  /* atur jarak dari atas glassmorph */
  left: 0;
}

.running-text {
  display: inline-block;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.75);
   text-shadow: 0 0 8px rgba(255,255,255,0.3);
   background: linear-gradient(90deg, #ffe869, #ff7ae6, #69e0ff);
  -webkit-background-clip: text;
  color: transparent;
  animation: scrollText 12s linear infinite;
}

/* ANIMASI */
@keyframes scrollText {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}


@keyframes floatConnect {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}


/* Instagram: naik & miring kanan */
.insta-btn {
  top: 10px;
  left: 52%;
  transform: rotate(6deg);
  animation: floatInsta 4.2s ease-in-out infinite;
}

/* LinkedIn: turun & miring kiri */
.linked-btn {
  top: 60px;
  left: 38%;
  transform: rotate(-5deg);
  animation: floatLinked 5s ease-in-out infinite;
}

/* =============================== */
/*      FLOATING CAPSULE DECOR     */
/* =============================== */

.connect-floating-left,
.connect-floating-right {
  position: absolute;
  width: 260px;
  height: 80px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 0 25px rgba(255, 255, 255, 0.35),
    0 0 50px rgba(255, 255, 255, 0.25),
    inset 0 0 20px rgba(255, 255, 255, 0.22);

  animation: floatCaps 6s ease-in-out infinite;
  z-index: 0;          /* di belakang tombol */
  pointer-events: none;
}

/* LEFT CAPSULE */
.connect-floating-left {
  top: 180px;
  left: -40px;
  transform: rotate(-12deg);
  background: rgba(124, 110, 255, 0.2);   /* purple glow */
  box-shadow:
    0 0 25px rgba(150, 120, 255, 0.55),
    0 0 60px rgba(150, 120, 255, 0.45),
    inset 0 0 22px rgba(255,255,255,0.22);
}

/* RIGHT CAPSULE */
.connect-floating-right {
  top: 260px;
  right: -40px;
  transform: rotate(10deg);
  background: rgba(255, 150, 220, 0.28);  /* pink glow */
  box-shadow:
    0 0 30px rgba(255, 130, 230, 0.55),
    0 0 70px rgba(255, 130, 230, 0.42),
    inset 0 0 20px rgba(255,255,255,0.22);
}

/* FLOATING ANIMATION */
@keyframes floatCaps {
  0%   { transform: translateY(0) rotate(-4deg); }
  50%  { transform: translateY(-14px) rotate(4deg); }
  100% { transform: translateY(0) rotate(-4deg); }
}