/* =========================================
   PORTFOLIO — STYLE.CSS
   Complete stylesheet for Alex Moren portfolio
   Author: Alex Moren
   
   TABLE OF CONTENTS:
   1.  CSS Variables & Design Tokens
   2.  CSS Reset & Base Styles
   3.  Custom Cursor
   4.  Reusable Utilities
   5.  Glass Button System
   6.  Dynamic Island Navbar
   7.  Mobile Navigation
   8.  Hero Section
   9.  Brands / Marquee
   10. About Section
   11. Projects Section
   12. Services Section
   13. Workflow Section
   14. Testimonials Section
   15. Contact CTA Section
   16. Footer
   17. Scroll Reveal Animations
   18. Floating Animation
   19. Responsive Breakpoints
========================================= */


/* =========================================
   1. CSS VARIABLES & DESIGN TOKENS
========================================= */
:root {
  /* --- Color Palette (Updated) --- */
  --bone-white: #D9D9D9;       /* Alabaster Grey - Primary background */
  --sky-blue: #DD0200;         /* Racing Red - Primary accent */
  --sky-blue-light: #FF3333;   /* Lighter Red for hovers */
  --sky-blue-dark: #55100D;    /* Black Cherry - Darker accent */
  --soft-navy: #1A0706;        /* Coffee Bean - Primary text color */
  --light-gray: #BDBDBD;       /* Borders, dividers */
  --bg-secondary: #EBEBEB;     /* Secondary section backgrounds */
  --text-muted: #6B5B5A;       /* Muted Coffee Bean text */
  --white: #FFFFFF;            /* Pure white */

  /* --- Glassmorphism Tokens --- */
  --glass-bg: rgba(217, 217, 217, 0.55);          
  --glass-bg-strong: rgba(217, 217, 217, 0.75);   
  --glass-border: rgba(255, 255, 255, 0.6);        
  --glass-shadow: 0 8px 32px rgba(26, 7, 6, 0.08); /* Coffee bean shadow */
  --glass-blur: blur(18px);                        
  --glass-blue-glow: 0 0 24px rgba(221, 2, 0, 0.18); /* Racing red glow */

  --font-display: 'Poppins', sans-serif;  
  --font-body: 'Poppins', sans-serif;     

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;       

  --transition-fast: 0.2s ease;
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

  --container-max: 1200px;
  --container-padding: clamp(20px, 5vw, 60px);
}


/* =========================================
   2. CSS RESET & BASE STYLES
========================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--bone-white);
  color: var(--soft-navy);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;   
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;                    
  cursor: auto;                          
}

ul { list-style: none; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--sky-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

a {
  color: inherit;
  text-decoration: none;
}


/* =========================================
   4. REUSABLE UTILITIES
========================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-blue);
  margin-bottom: var(--space-sm);
  padding: 6px 14px;
  background: rgba(221, 2, 0, 0.08);
  border: 1px solid rgba(221, 2, 0, 0.2);
  border-radius: var(--radius-pill);
}

.section-label.light {
  color: rgba(217, 217, 217, 0.85);
  background: rgba(217, 217, 217, 0.1);
  border-color: rgba(217, 217, 217, 0.2);
}

.section-headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--soft-navy);
  letter-spacing: -0.05em;
}

.section-headline.centered {
  text-align: center;
}

.section-headline em {
  font-style: italic;
  color: var(--sky-blue);
  font-weight: 400;
}

.section-subtext {
  margin-top: var(--space-sm);
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 1.7;
}

/* --- Tag Chips (Pill) dengan Glare Effect Dinamis --- */
.tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sky-blue);
  background: rgba(221, 2, 0, 0.08);
  border: 1px solid rgba(221, 2, 0, 0.18);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  letter-spacing: 0.02em;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  position: relative; 
  overflow: hidden;   
  --x: 50%;
  --y: 50%;
}

.tag:hover {
  background-color: #cf1616 !important; 
  color: #FFFFFF !important;            
  border-color: transparent !important; 
  transform: translateY(-4px); 
  box-shadow: 0 8px 20px rgba(221, 2, 0, 0.4); 
}

.tag::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.tag:hover::before {
  opacity: 1;
}

/* =========================================
   5. GLASS BUTTON SYSTEM
========================================= */
.glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  cursor: pointer;
  border: none;
  position: relative;
  text-decoration: none;
  transition:
    transform var(--transition-spring),
    box-shadow var(--transition-smooth),
    background var(--transition-smooth),
    border-color var(--transition-smooth);
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.glass-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.glass-btn:active {
  transform: translateY(0) scale(0.98);
}

/* --- Primary Glass Button (Liquid Gradient Slide Effect - FIX ROUNDED GAP) --- */
.glass-btn-primary {
  background: linear-gradient(
    to right, 
    var(--sky-blue-dark), 
    var(--sky-blue), 
    var(--sky-blue-light), 
    var(--sky-blue), 
    var(--sky-blue-dark)
  ) no-repeat;
  
  background-size: 300% 100%;
  background-position: 0% 50%; /* Pakai angka agar lebih akurat dari 'left center' */
  
  color: var(--white);
  border-radius: var(--radius-pill); 
  
  /* Hapus border fisik untuk menghilangkan celah/gap di ujung lengkungan */
  border: none; 
  
  /* Pindahkan garis putihnya ke dalam box-shadow biar menyatu sempurna */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2), /* Garis putih tipis (pengganti border) */
    0 4px 16px rgba(239, 91, 91, 0.3), /* Bayangan biru bawaan tema semula */
    inset 0 1px 0 rgba(255, 255, 255, 0.15); /* Cahaya atas */
    
  /* Memaksa rendering ujungnya jadi super mulus di semua browser */
  transform: translateZ(0); 
  
  transition:
    background-position 0.5s ease-in-out,
    transform var(--transition-spring),
    box-shadow var(--transition-smooth);
}

.glass-btn-primary:hover {
  background-position: 100% 50%;
  
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3), /* Garis putih lebih terang saat di-hover */
    0 8px 28px rgba(239, 91, 91, 0.45), /* Bayangan biru hover bawaan tema semula */
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
  transform: translateY(-2px) scale(1.02) translateZ(0);
}

.glass-btn-outline {
  background: rgba(217, 217, 217, 0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--soft-navy);
  border: 1px solid var(--light-gray);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.glass-btn-outline:hover {
  background: rgba(217, 217, 217, 0.8);
  border-color: var(--sky-blue);
  color: var(--sky-blue);
  box-shadow:
    var(--glass-blue-glow),
    0 8px 24px rgba(26, 7, 6, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}


/* =========================================
   6. DYNAMIC ISLAND NAVBAR
========================================= */
.navbar-wrapper {
  position: fixed;
  top: 22px;
  left: 0;
  right: 0;
  z-index: 1000;             
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;      
}

.navbar-island {
  display: flex;
  align-items: center;
  gap: 20px; 
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  background: rgba(217, 217, 217, 0.7);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 4px 24px rgba(26, 7, 6, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  pointer-events: all;       
  transition:
    background var(--transition-smooth),
    box-shadow var(--transition-smooth),
    padding var(--transition-smooth);
}

.navbar-island.scrolled {
  background: rgba(217, 217, 217, 0.88);
  box-shadow:
    0 8px 40px rgba(26, 7, 6, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    var(--glass-blue-glow);
}

.nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  width: 40px;   
  height: 40px; 
  border-radius: 50%; 
  background: linear-gradient(135deg, var(--sky-blue) 0%, var(--sky-blue-dark) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 4px 16px rgba(221, 2, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.nav-logo .logo-img {
  height: 16px; 
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  object-fit: contain; 
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--soft-navy);
  background: rgba(26, 7, 6, 0.06);
}

.nav-cta {
  padding: 9px 20px;
  font-size: 0.85rem;
}

/* --- THEME TOGGLE BUTTON (MATAHARI & BULAN) --- */
.theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%; 
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #D9D9D9;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.theme-icon {
  position: absolute;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}

.theme-icon.icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-icon.icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.theme-toggle-btn.animating {
  animation: popRotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popRotate {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(0.8) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/* --- LIGHT MODE GLOBAL OVERRIDES --- */
body.light-mode {
  background-color: #F2F2F2 !important;
  color: #1A0706 !important;
}

body.light-mode .theme-icon.icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

body.light-mode .theme-icon.icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

body.light-mode .theme-toggle-btn {
  background: #FFFFFF; 
  border-color: rgba(0, 0, 0, 0.1); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
  color: #1A0706 !important;
}

body.light-mode .theme-toggle-btn .theme-icon {
  stroke: #DD0200 !important; 
}


.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
}

.ham-line {
  width: 22px;
  height: 1.5px;
  background: var(--soft-navy);
  border-radius: 2px;
  transition:
    transform var(--transition-smooth),
    opacity var(--transition-smooth);
  display: block;
}

.hamburger.open .ham-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger.open .ham-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.open .ham-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* =========================================
   7. MOBILE NAVIGATION
========================================= */
.mobile-menu {
  display: none;             
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: min(calc(100vw - 40px), 360px);
  margin-top: 12px;
  padding: 24px 20px;
  background: rgba(217, 217, 217, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: 0 12px 48px rgba(26, 7, 6, 0.14);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transition:
    opacity var(--transition-smooth),
    transform var(--transition-smooth);
}

.mobile-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.mobile-link {
  width: 100%;
  text-align: center;
  padding: 12px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--soft-navy);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.mobile-link:hover {
  background: rgba(221, 2, 0, 0.08);
  color: var(--sky-blue);
}

.mobile-cta {
  width: 100%;
  text-align: center;
  margin-top: 8px;
}


/* =========================================
   8. HERO SECTION
========================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  overflow: hidden;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);        
  pointer-events: none;
  z-index: 0;
}

.blob-1 {
  width: 500px;
  height: 500px;
  top: -100px;
  right: -100px;
  background: radial-gradient(circle, rgba(221, 2, 0, 0.14) 0%, transparent 70%);
}

.blob-2 {
  width: 350px;
  height: 350px;
  bottom: 50px;
  left: -80px;
  background: radial-gradient(circle, rgba(221, 2, 0, 0.09) 0%, transparent 70%);
}

.blob-3 {
  width: 250px;
  height: 250px;
  top: 40%;
  left: 45%;
  background: radial-gradient(circle, rgba(217, 217, 217, 0.6) 0%, transparent 70%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(221, 2, 0, 0.07);
  border: 1px solid rgba(221, 2, 0, 0.18);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  width: fit-content;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: #52C97E;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82, 201, 126, 0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(82, 201, 126, 0); }
}

@font-face {
  font-family: 'Tempting';
  src: url('fonts/tempting.regular.ttf') format('truetype'); 
}

.hero-headline {
  line-height: 1.1;
  display: flex;
  flex-direction: column; 
}

.hero-headline .title-sub {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 1000;
  color: var(--soft-navy);
  letter-spacing: 3px;
  text-transform: uppercase;
  position: relative;
  z-index: 2;           
  margin-left: clamp(70px, 20vw, 245px);   
  margin-bottom: clamp(-25px, -4vw, -60px); 
}

/* Styling Baris Utama (Portfolio) dengan Efek Kilau Infinity (Soft & Kiri ke Kanan) */
/* Styling Baris Utama (Portfolio) dengan Efek Kilau Infinity (Soft & Kiri ke Kanan) */
.hero-headline .title-main {
  font-family: 'Tempting', serif;
  font-size: clamp(6rem, 8vw, 7.5rem); 
  
  /* --- SETUP GRADIENT & ANIMASI SHINE SUPER SOFT --- */
  background: linear-gradient(
    110deg, 
    var(--sky-blue) 0%, 
    var(--sky-blue-dark) 45%, 
    rgba(255, 255, 255, 0.12) 50%, /* Putih sangat transparan dan dijepit tipis di tengah */
    var(--sky-blue-dark) 55%, 
    var(--sky-blue) 100%
  );
  background-size: 200% auto;
  
  /* Animasi bergerak dari kiri ke kanan */
  animation: shineInfinity 4s linear infinite; 
  /* -------------------------------------- */
  
  -webkit-background-clip: text;
  background-clip: text; 
  -webkit-text-fill-color: transparent;
  font-style: normal; 
  line-height: 1.8;         
  padding-bottom: -10px;     
  padding-right: -50px;      
  padding-left: 20px;       
  margin-left: -20px;       
}

/* Keyframes dibalik: dari 200% turun ke 0% agar bergerak murni dari KIRI ke KANAN */
@keyframes shineInfinity {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: 0% center;
  }
}

.hero-subtext {
  font-size: 1.08rem;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 480px;
  text-align: justify; 
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 8px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--soft-navy);
}

.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.stat-divider {
  width: 1px;
  height: 36px;
  background: var(--light-gray);
}

.hero-popout-wrapper {
  position: relative;
  width: 100%;
  max-width: 440px; 
}

.hero-img-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 32px;
  overflow: hidden; 
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 24px 64px rgba(26, 7, 6, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.img-base {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.img-cutout {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  transform: scale(1.41) translate(-8px, -24.3%); 
}

.hero-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #EBEBEB 0%, #D9D9D9 60%, #BDBDBD 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.img-inner-design {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.design-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(221, 2, 0, 0.2);
}

.c1 { width: 260px; height: 260px; background: rgba(221, 2, 0, 0.06); }
.c2 { width: 160px; height: 160px; background: rgba(221, 2, 0, 0.1); border-color: rgba(221, 2, 0, 0.3); }

.design-line { position: absolute; background: rgba(221, 2, 0, 0.15); }
.l1 { width: 100%; height: 1px; top: 40%; }
.l2 { width: 1px; height: 100%; left: 50%; }

.design-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(221, 2, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(221, 2, 0, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

.center-mark {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--sky-blue), var(--sky-blue-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 12px 32px rgba(221, 2, 0, 0.35);
}

.center-mark span {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: white;
}

.hero-float-badge {
  position: absolute;
  background: rgba(217, 217, 217, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--soft-navy);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(26, 7, 6, 0.1);
  white-space: nowrap;
  z-index: 2;
}

.badge-top {
  top: 28px;
  right: -24px;
  background: rgba(217, 217, 217, 0.55) !important; 
  backdrop-filter: blur(12px) !important; 
  -webkit-backdrop-filter: blur(12px) !important; 
  border: 1px solid rgba(255, 255, 255, 0.6) !important; 
  box-shadow: 0 8px 32px rgba(26, 7, 6, 0.08) !important; 
}

.badge-bottom {
  bottom: 60px;
  left: -24px;
  background: rgba(217, 217, 217, 0.55) !important; 
  backdrop-filter: blur(12px) !important; 
  -webkit-backdrop-filter: blur(12px) !important; 
  border: 1px solid rgba(255, 255, 255, 0.6) !important; 
  box-shadow: 0 8px 32px rgba(26, 7, 6, 0.08) !important; 
}

.badge-icon {
  color: var(--sky-blue);
  font-size: 0.9rem;
}

.hero-side-tag {
  position: absolute;
  right: -20px;
  bottom: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.08em;
}

.hero-side-tag strong {
  color: var(--soft-navy);
  font-weight: 600;
  display: block;
  margin-top: 6px;
  writing-mode: vertical-rl;
}

@keyframes scroll-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

@keyframes scroll-line-anim {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* =========================================
   9. BRANDS / MARQUEE SECTION
========================================= */
.brands {
  padding: 48px 0;
  background: var(--sky-blue-dark);
  border-top: 1px solid var(--sky-blue-dark);
  border-bottom: 1px solid var(--sky-blue-dark);
  overflow: hidden;
}

.brands-label {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 28px;
}

.marquee-wrapper {
  position: relative;
  overflow: hidden;
}

.marquee-wrapper::before,
.marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.marquee-wrapper::before { background: linear-gradient(to right, var(--sky-blue-dark), transparent); left: 0; }
.marquee-wrapper::after { background: linear-gradient(to left, var(--sky-blue-dark), transparent); right: 0; }

.marquee-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

.brand-logo {
  height: 200px; 
  width: auto;
  object-fit: contain; 
  filter: grayscale(100%) opacity(70%); 
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.brand-logo:hover {
  filter: grayscale(0%) opacity(100%); 
  transform: scale(1.05); 
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* =========================================
   10. ABOUT SECTION
========================================= */
.about { padding: var(--space-2xl) 0; }

.about-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr; 
  gap: 100px; 
  align-items: center;
}

.about-visual { position: relative; }

.about-img-wrap {
  position: relative;
  width: 100%;
}

.about-real-img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover; 
  border-radius: 28px;
  box-shadow: 0 16px 48px rgba(26, 7, 6, 0.1);
  display: block;
}

.about-img-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  background: linear-gradient(160deg, var(--bg-secondary) 0%, var(--light-gray) 100%);
  border: 1px solid var(--light-gray);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(26, 7, 6, 0.1);
}

.about-inner-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(221, 2, 0, 0.2);
}

.r1 { width: 280px; height: 280px; }
.r2 { width: 180px; height: 180px; border-color: rgba(221, 2, 0, 0.3); background: rgba(221, 2, 0, 0.04); }

.art-dot-cluster {
  position: absolute;
  top: 30px;
  right: 40px;
  display: grid;
  grid-template-columns: repeat(3, 6px);
  gap: 6px;
}

.art-dot-cluster span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(221, 2, 0, 0.3);
}

.art-initials {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 600;
  color: rgba(26, 7, 6, 0.15);
  letter-spacing: -0.02em;
  z-index: 1;
}

.about-float-card {
  position: absolute;
  background: rgba(217, 217, 217, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 8px 28px rgba(26, 7, 6, 0.1);
}

.card-exp {
  bottom: -24px;
  right: -24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.float-card-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--soft-navy);
  line-height: 1;
}

.float-card-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }

.card-avail {
  top: 28px;
  left: -24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--soft-navy);
  white-space: nowrap;
}

.avail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #52C97E;
  flex-shrink: 0;
  animation: pulse-dot 2s infinite;
}

.about-side-text {
  position: absolute;
  left: -48px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--light-gray);
  white-space: nowrap;
  transform-origin: center;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.about-bio {
  font-size: 1.02rem;
  color: var(--soft-navy);
  line-height: 1.8;
  text-align: justify;
}

.about-bio strong { color: var(--soft-navy); font-weight: 600; }

.philosophy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.skill-item {
  display: flex;
  align-items: center;
  gap: 12px; 
  font-size: 0.9rem;
  color: var(--soft-navy);
  font-weight: 500;
}

.skill-logo {
  width: 30px; 
  height: 30px;
  object-fit: contain;
}


/* =========================================
   11. PROJECTS SECTION
========================================= */
.projects {
  padding: var(--space-2xl) 0;
  background: var(--bg-secondary);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 24px;
  margin-top: var(--space-md);
}

/* Styling untuk gambar & video project asli biar gak gepeng */
.real-project-img,
.real-project-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Biar video/gambar otomatis menuhin kotak */
  display: block;
  transition: transform 0.5s ease;
}

/* Efek zoom tipis pas card-nya kena kursor */
.project-card:hover .real-project-img,
.project-card:hover .real-project-video {
  transform: scale(1.05);
}

.project-card:hover .real-project-img {
  transform: scale(1.05);
}

.project-card {
  background: var(--bone-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--light-gray);
  transition:
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth);
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(26, 7, 6, 0.12);
}

.project-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.project-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 7, 6, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.project-card:hover .project-img-overlay { opacity: 1; }

.view-btn {
  background: rgba(217, 217, 217, 0.85);
  color: var(--soft-navy);
  border-color: rgba(255, 255, 255, 0.6);
}

.project-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
}

.project-card:hover .project-img-placeholder { transform: scale(1.04); }

.p1 { background: linear-gradient(135deg, #FDEEEA 0%, #F5C8C8 100%); }
.p2 { background: linear-gradient(135deg, #EBEBEB 0%, #D0D0D0 100%); }
.p3 { background: linear-gradient(135deg, #F4EAE6 0%, #E3CDA4 100%); }
.p4 { background: linear-gradient(135deg, #EAEAEA 0%, #BDBDBD 100%); }
.p5 { background: linear-gradient(135deg, #F9EEEE 0%, #EAC6C6 100%); }
.p6 { background: linear-gradient(135deg, #E8E8E8 0%, #C4C4C4 100%); }

.proj-art {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proj-art-bar {
  position: absolute;
  bottom: 20%;
  border-radius: 3px;
  background: rgba(221, 2, 0, 0.3);
}

.b1 { width: 18px; height: 60%; left: 30%; }
.b2 { width: 18px; height: 80%; left: 44%; background: rgba(221, 2, 0, 0.5); }
.b3 { width: 18px; height: 45%; left: 58%; }

.proj-art-circle {
  position: absolute;
  top: 20%;
  right: 25%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(221, 2, 0, 0.25);
  border: 2px solid rgba(221, 2, 0, 0.4);
}

.proj-art-phone {
  width: 60px;
  height: 100px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(100, 80, 200, 0.3);
  box-shadow: 0 8px 24px rgba(100, 80, 200, 0.15);
}

.proj-art-dots {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(100, 80, 200, 0.2);
}

.proj-art-logo-mark {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, rgba(180, 150, 100, 0.6), rgba(140, 110, 60, 0.6));
  border-radius: 18px;
  transform: rotate(15deg);
}

.proj-art-type-lines {
  position: absolute;
  bottom: 28%;
  left: 25%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proj-art-type-lines span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(140, 110, 60, 0.3);
}

.proj-art-type-lines span:nth-child(1) { width: 80px; }
.proj-art-type-lines span:nth-child(2) { width: 55px; }
.proj-art-type-lines span:nth-child(3) { width: 68px; }

.proj-art-browser {
  width: 140px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  border: 1.5px solid rgba(82, 150, 100, 0.3);
  overflow: hidden;
}

.browser-dots {
  padding: 6px 8px;
  display: flex;
  gap: 5px;
  background: rgba(82, 150, 100, 0.1);
}

.browser-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(82, 150, 100, 0.4);
}

.browser-body { height: 50px; padding: 8px; background: rgba(255, 255, 255, 0.4); }

.proj-art-ui-elements {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ui-card-mock {
  width: 130px;
  height: 36px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  border: 1.5px solid rgba(200, 80, 80, 0.2);
}

.ui-card-mock.sm { width: 100px; height: 26px; }

.proj-art-motion {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 120px;
  height: 120px;
}

.motion-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(80, 80, 180, 0.3);
}

.mr1 { width: 100px; height: 100px; }
.mr2 { width: 66px; height: 66px; border-color: rgba(80, 80, 180, 0.5); }
.mr3 { width: 34px; height: 34px; background: rgba(80, 80, 180, 0.2); }

.project-info { padding: 20px 22px 24px; }

.project-tag {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-blue);
}

.project-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--soft-navy);
  margin: 8px 0;
  line-height: 1.25;
}

.project-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.projects-footer {
  margin-top: var(--space-lg);
  text-align: center;
}


/* =========================================
   12. SERVICES SECTION
========================================= */
.services { padding: var(--space-2xl) 0; }

.services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px
}

@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px }
}

@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr !important; gap: 20px }
}

.service-card {
  background: var(--glass-bg-strong);
  background-color: var(--sky-blue-dark) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--glass-shadow);
  transition:
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth),
    border-color var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow:
    var(--glass-blue-glow),
    0 16px 48px rgba(26, 7, 6, 0.1);
  border-color: rgba(221, 2, 0, 0.3);
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(250, 250, 250, 0.418);
  border: 1px solid rgb(251, 252, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-white);
  transition: background var(--transition-smooth);
}

.service-card:hover .service-icon svg {
    animation: icon-pop 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.service-icon svg {
    width: 24px !important; 
    height: 24px !important;
    overflow: visible !important; 
    transform: scale(0.85); 
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-icon svg, 
.service-icon svg * {
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-card:hover .icon-branding .circle-1 { transform: translateX(3px); }
.service-card:hover .icon-branding .circle-2 { transform: translateX(-3px); }
.service-card:hover .icon-creative { transform: rotate(90deg) scale(1.15); }
.service-card:hover .icon-frontend .bracket-left { transform: translateX(-3px); }
.service-card:hover .icon-frontend .bracket-right { transform: translateX(3px); }
.service-card:hover .icon-frontend .slash { transform: rotate(15deg); transform-origin: center; }
.service-card:hover .icon-system rect { rx: 3px; } 
.service-card:hover .icon-system .box-1 { transform: translate(1.5px, 1.5px); }
.service-card:hover .icon-system .box-2 { transform: translate(-1.5px, 1.5px); }
.service-card:hover .icon-system .box-3 { transform: translate(-1.5px, -1.5px); }
.service-card:hover .icon-system .box-4 { transform: translate(1.5px, -1.5px); }

.service-card:hover .service-icon {
  background: rgba(221, 4, 0, 0.664);
}

.service-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--bone-white);
}

.service-desc {
  font-size: 0.9rem;
  color: var(--bone-white);
  line-height: 1.7;
  flex: 1;
}

.service-footer {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--bone-white);
}

.service-tag {
  font-size: 0.74rem;
  color: var(--bone-white);
  letter-spacing: 0.04em;
}


/* =========================================
   14. TESTIMONIALS SECTION
========================================= */
.testimonials {
  padding: var(--space-2xl) 0;
  background: var(--bg-secondary);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testimonial-card {
  background: var(--bone-white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg);
  padding: 36px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth);
  box-shadow: 0 4px 20px rgba(26, 7, 6, 0.05);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(26, 7, 6, 0.1);
}

.quote-mark {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: rgba(221, 2, 0, 0.12);
  position: absolute;
  top: 12px;
  right: 24px;
  pointer-events: none;
}

.testimonial-text {
  font-size: 0.97rem;
  color: var(--soft-navy);
  line-height: 1.75;
  font-weight: 400;
  font-style: italic;
  font-family: var(--font-display);
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--light-gray);
  padding-top: 20px;
}

.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.av1 { background: linear-gradient(135deg, var(--sky-blue), var(--sky-blue-dark)); }
.av2 { background: linear-gradient(135deg, #A63A3A, #7A1A1A); }
.av3 { background: linear-gradient(135deg, #D4A373, #A67B4A); }

.author-info { flex: 1; }
.author-name { display: block; font-size: 0.9rem; font-weight: 600; color: var(--soft-navy); }
.author-role { font-size: 0.78rem; color: var(--text-muted); }
.star-rating { font-size: 0.82rem; color: #F5A623; letter-spacing: 2px; flex-shrink: 0; }


/* =========================================
   15. CONTACT CTA SECTION
========================================= */
.contact-cta {
  position: relative;
  padding: var(--space-2xl) 0;
  background: linear-gradient(160deg, var(--soft-navy) 0%, #0A0302 100%);
  overflow: hidden;
  text-align: center;
}

.cta-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.cb1 { width: 600px; height: 600px; top: -200px; left: -200px; background: radial-gradient(circle, rgba(221, 2, 0, 0.18) 0%, transparent 70%); }
.cb2 { width: 400px; height: 400px; bottom: -100px; right: -100px; background: radial-gradient(circle, rgba(221, 2, 0, 0.12) 0%, transparent 70%); }

.cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cta-headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 680px;
}

.cta-headline em { font-style: italic; font-weight: 400; color: var(--sky-blue-light); }

.cta-subtext {
  font-size: 1.05rem;
  color: rgba(217, 217, 217, 0.6);
  max-width: 500px;
  line-height: 1.75;
}

.cta-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.cta-main-btn { padding: 16px 36px; font-size: 1rem; }

.cta-email-link {
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(217, 217, 217, 0.7);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--transition-fast);
}

.cta-email-link:hover { color: var(--bone-white); }

/* --- STYLING LOGO SOSMED (LIQUID GLASS EFFECT - ROUNDED SQUARE) --- */
    .cta-socials {
        display: flex;
        align-items: center;
        gap: 16px; 
    }

    .social-link.magnetic-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;  
        height: 48px;
        border-radius: 12px; 
        cursor: pointer;
        
        background: rgba(255, 255, 255, 0.05); 
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.15); 
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.2), 
            inset 0 0 12px rgba(255, 255, 255, 0.05); 
        
        transition: background 0.3s ease, border-color 0.3s ease;
        will-change: transform; 
    }

    .social-icon-img {
        width: 24px; 
        height: 24px;
        object-fit: contain;
        
        opacity: 0.9; 
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .social-link.magnetic-icon:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .social-link.magnetic-icon:hover .social-icon-img {
        opacity: 1; 
        transform: scale(1.15); 
    }


/* =========================================
   16. FOOTER
========================================= */
.footer { background: #0A0302; padding: var(--space-xl) 0 0; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bone-white);
  display: block;
  margin-bottom: 16px;
  text-decoration: none;
}

.footer-tagline { font-size: 0.88rem; color: rgba(217, 217, 217, 0.45); line-height: 1.7; }

.footer-nav-title {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(217, 217, 217, 0.35);
  margin-bottom: 20px;
}

.footer-nav ul { display: flex; flex-direction: column; gap: 12px; }
.footer-link { font-size: 0.88rem; color: rgba(217, 217, 217, 0.55); transition: color var(--transition-fast); }
.footer-link:hover { color: var(--bone-white); }
.footer-socials { display: flex; flex-direction: column; gap: 12px; }

.footer-bottom { padding: 20px 0; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; }
.footer-copy, .footer-made { font-size: 0.8rem; color: rgba(217, 217, 217, 0.3); }


/* =========================================
   17. SCROLL REVEAL ANIMATIONS
========================================= */
.reveal-up, .reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--delay, 0s);  
}

.reveal-up { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed {
  opacity: 1;
  transform: translate(0);
}


/* =========================================
   18. FLOATING ANIMATION
========================================= */
.float-anim { animation: float-gentle 6s ease-in-out infinite; }
@keyframes float-gentle {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}


/* =========================================
   19. RESPONSIVE BREAKPOINTS
========================================= */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-visual { max-width: 420px; margin: 0 auto; }
  .about-side-text { display: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 768px) {
  :root { --space-2xl: 80px; --space-xl: 60px; }
  
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }
  
  .hero-grid { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .hero-text { display: contents !important; }
  .hero-badge { order: 1 !important; margin-bottom: -20px !important; }
  .hero-headline { order: 2 !important; margin-bottom: 25px !important; }
  .hero-headline .title-sub { font-size: 0.90rem; margin-left: 40 !important; padding-left: 75px; margin-bottom: -20px !important; text-align: center; }
  .hero-headline .title-main { font-size: 4.6rem !important; margin-left: 0 !important; padding-left: 0 !important; text-align: center; line-height: 1.5 !important; padding-top: 20px !important; }
  .hero-visual { order: 3 !important; display: flex !important; justify-content: center !important; width: 100% !important; margin-bottom: -10px !important; margin-top: -30px; margin-left: 15px; visibility: visible !important; opacity: 1 !important; }
  .hero-popout-wrapper { max-width: 280px !important; margin: 0 auto !important; }
  .hero-side-tag { display: none !important; }
  .hero-subtext { order: 4 !important; text-align: justify !important; margin-left: 17px; margin-right: 17px; margin-bottom: -30px !important; }
  .hero-actions { order: 5 !important; justify-content: center !important; margin-bottom: -15px !important; }
  .hero-stats { order: 6 !important; justify-content: center !important; margin-bottom: -20px; }

  .badge-top { top: 40px !important; right: -30px !important; transform: scale(1.0); }
  .badge-bottom { bottom: 30px !important; left: -50px !important; transform: scale(1.0); }

  .about-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .about-content { display: contents !important; }
  .about-content .section-label { order: 1 !important; width: 98% !important; display: block !important; text-align: center !important; margin-bottom: 40px !important; margin-top: -55px; font-weight: 1000 !important; }
  .about-content .section-headline { order: 2 !important; text-align: center !important; margin-bottom: 30px !important; }
  .about-visual { order: 3 !important; width: 90% !important; max-width: 400px !important; margin: 0 auto 35px auto !important; }
  .about-content .about-bio { order: 4 !important; margin-right: 15px; margin-left: 15px; margin-bottom: 25px !important; }
  .about-content .philosophy-tags { order: 5 !important; justify-content: justify !important; margin-right: 15px; margin-left: 15px; margin-bottom: 35px !important; }
  .about-content .skills-grid { order: 6 !important; margin-bottom: 40px !important; margin-right: 15px; margin-left: 15px; grid-template-columns: 1.2fr 1fr !important; }
  .about-content > .glass-btn { order: 7 !important; width: 91% !important; display: block !important; text-align: center !important; align-self: center !important; margin-bottom: -20px !important; }
  .card-exp { bottom: -20px; right: -30px; transform: scale(0.85); }
  .card-avail { top: 15px; left: -30px; transform: scale(0.85); }
  .skills-grid { grid-template-columns: 1fr 1fr; }

  .services-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  
  .workflow-steps { flex-direction: column; gap: 24px; }
  .step-connector { display: none; }
  .step-desc { max-width: 100%; }

  .testimonials-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom-inner { flex-direction: column; gap: 8px; text-align: center; }
  .cta-actions { flex-direction: column; }
  .cursor-dot, .cursor-ring { display: none; }
  body { cursor: auto; }
}

@media (max-width: 480px) {
  .hero-stats { gap: 18px; }
  .hero-float-badge { font-size: 0.74rem; padding: 8px 14px; }
  .about-img-placeholder { aspect-ratio: 4 / 3; }
  .skills-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   EFEK MENGKILAP PADA LOGO TOOLS (ABOUT SECTION)
   ================================================================ */
.tool-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;    
  border-radius: 6px;  
  cursor: pointer;
  width: 30px;         
  height: 30px;        
}

.tool-icon-wrap img {
  transition: transform 0.3s ease;
}

.tool-icon-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%; 
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  transform: skewX(-25deg); 
  z-index: 2;
  pointer-events: none; 
  transition: left 0.5s ease-in-out;
}

.tool-icon-wrap:hover::before {
  left: 150%; 
}

.tool-icon-wrap:hover img {
  transform: scale(1.15);
}


/* ================================================================
   STYLE UNTUK FLOATING LANGUAGE SWITCHER
   ================================================================ */

.lang-float-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    
    background-color: rgba(26, 7, 6, 0.85); 
    backdrop-filter: blur(16px) saturate(180%); 
    -webkit-backdrop-filter: blur(16px) saturate(180%); 
    
    border: 1px solid rgba(255, 255, 255, 0.15); 
    box-shadow: 0 8px 32px rgba(26, 7, 6, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05); 
    
    color: #D9D9D9; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-float-btn:hover {
    transform: translateY(-3px) scale(1.02);
    background-color: rgba(26, 7, 6, 0.95);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 40px rgba(26, 7, 6, 0.3);
}

.lang-icon { 
    font-size: 18px; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lang-fade-out {
    opacity: 0 !important;
    transform: translateY(4px); 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; 
}

.lang-fade-in {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.flip-icon {
    animation: smooth3DFlip 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes smooth3DFlip {
    0% { transform: perspective(400px) rotateY(0deg) scale(1); }
    50% { transform: perspective(400px) rotateY(180deg) scale(1.2); }
    100% { transform: perspective(400px) rotateY(360deg) scale(1); }
}

/* ================================================================
   UIVERSE BUTTON - VIEW ALL PROJECTS
   ================================================================ */
.uiverse-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    overflow: hidden;
    letter-spacing: -0.02em;
    color: var(--white);
    background-color: var(--soft-navy); 
    border-radius: var(--radius-pill); 
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(26, 7, 6, 0.15);
    z-index: 1;
}

.uiverse-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(221, 2, 0, 0.3);
}

.uiverse-btn .hover-circle {
    position: absolute;
    width: 0;
    height: 0;
    transition: all 0.5s ease-out;
    background-color: var(--sky-blue); 
    border-radius: 50%;
    z-index: -1;
}

.uiverse-btn:hover .hover-circle {
    width: 320px; 
    height: 320px;
}

.uiverse-btn .svg-left {
    position: absolute;
    bottom: 0;
    left: -8px;
    height: 100%;
    z-index: -1;
}

.uiverse-btn .svg-left svg {
    width: auto;
    height: 100%;
    opacity: 1;
}

.uiverse-btn .svg-right {
    position: absolute;
    top: 0;
    right: -12px;
    width: 48px;
    height: 100%;
    z-index: -1;
}

.uiverse-btn .svg-right svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uiverse-btn .btn-glare {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin-top: -4px;
    border-radius: var(--radius-pill);
    opacity: 0.3;
    background: linear-gradient(to bottom, transparent, transparent, rgba(255, 255, 255, 0.5));
    z-index: -1;
    pointer-events: none;
}

.uiverse-btn .btn-text {
    position: relative;
    font-size: 0.95rem;
    font-weight: 600;
    z-index: 2;
}

/* ================================================================
   PRELOADER OVERLAY & ANIMATION (SPEEDING ROCKET)
   ================================================================ */
.preloader-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bone-white); 
  z-index: 99999; 
  transition: opacity 0.6s ease, visibility 0.6s ease;
  overflow: hidden; /* Wajib ada biar awan & garis yang keluar layar nggak bikin scrollbar */
}

.preloader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

/* --- ROKET --- */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  animation: speeder 0.4s linear infinite;
  z-index: 10;
}

/* Api roket */
.loader > span {
  height: 5px;
  width: 35px;
  background: var(--sky-blue); /* Warna Oranye */
  position: absolute;
  top: -19px;
  left: 60px;
  border-radius: 2px 10px 1px 0;
}

/* Garis-garis di dalam api */
.loader > span > span {
  width: 30px;
  height: 1px;
  background: var(--bone-white); /* Warna putih background */
  position: absolute;
}

.loader > span > span:nth-child(1) { animation: fazer1 0.2s linear infinite; }
.loader > span > span:nth-child(2) { top: 3px; animation: fazer2 0.4s linear infinite; }
.loader > span > span:nth-child(3) { top: 1px; animation: fazer3 0.4s linear infinite; animation-delay: -1s; }
.loader > span > span:nth-child(4) { top: 4px; animation: fazer4 1s linear infinite; animation-delay: -1s; }

/* Badan Roket */
.base span {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 100px solid var(--soft-navy); /* Hitam */
  border-bottom: 6px solid transparent;
}

/* Bagian belakang badan roket */
.base span:before {
  content: "";
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: var(--soft-navy); /* Hitam */
  position: absolute;
  right: -110px;
  top: -16px;
}

/* Sayap Roket */
.base span:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-right: 55px solid var(--soft-navy); /* Hitam */
  border-bottom: 16px solid transparent;
  top: -16px;
  right: -98px;
}

/* Kepala/Kaca Roket */
.face {
  position: absolute;
  height: 12px;
  width: 20px;
  background: var(--soft-navy); /* Hitam */
  border-radius: 20px 20px 0 0;
  transform: rotate(-40deg);
  right: -125px;
  top: -15px;
}

/* Ujung Roket */
.face:after {
  content: "";
  height: 12px;
  width: 12px;
  background: var(--sky-blue); /* Oranye */
  right: 4px;
  top: 7px;
  position: absolute;
  transform: rotate(40deg);
  transform-origin: 50% 50%;
  border-radius: 0 0 2px 2px;
}

/* --- EFEK GARIS KECEPATAN (LONG FAZERS) --- */
.longfazers {
  position: absolute;
  width: 100%;
  height: 100%;
}

.longfazers span {
  position: absolute;
  height: 2px;
  width: 20%;
  background: rgba(0, 0, 0, 0.15); /* Abu-abu tipis biar keliatan di background putih */
}

.longfazers span:nth-child(1) { top: 20%; animation: lf 0.6s linear infinite; animation-delay: -5s; }
.longfazers span:nth-child(2) { top: 40%; animation: lf2 0.8s linear infinite; animation-delay: -1s; }
.longfazers span:nth-child(3) { top: 60%; animation: lf3 0.6s linear infinite; }
.longfazers span:nth-child(4) { top: 80%; animation: lf4 0.5s linear infinite; animation-delay: -3s; }

/* --- AWAN BERGERAK (CLOUDS) --- */
.clouds {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.cloud {
  position: absolute;
  background: rgba(0, 0, 0, 0.04); /* Hitam sangat transparan untuk siluet awan */
  border-radius: 50%;
  animation: moveClouds linear infinite;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 50%;
}

.cloud::before {
  width: 60%;
  height: 60%;
  top: -30%;
  left: 10%;
}

.cloud::after {
  width: 40%;
  height: 40%;
  top: -20%;
  left: 50%;
}

.cloud1 { width: 100px; height: 60px; top: 15%; left: 1400px; animation-duration: 2s; }
.cloud2 { width: 150px; height: 80px; top: 35%; left: 1600px; animation-duration: 3s; }
.cloud3 { width: 80px; height: 50px; top: 20%; left: 2000px; animation-duration: 4s; }
.cloud4 { width: 100px; height: 80px; top: 70%; left: 1100px; animation-duration: 3s; }
.cloud5 { width: 170px; height: 50px; top: 80%; left: 1500px; animation-duration: 2s; }


/* --- KEYFRAMES ANIMASI --- */
@keyframes fazer1 { 0% { left: 0; } 100% { left: -80px; opacity: 0; } }
@keyframes fazer2 { 0% { left: 0; } 100% { left: -100px; opacity: 0; } }
@keyframes fazer3 { 0% { left: 0; } 100% { left: -50px; opacity: 0; } }
@keyframes fazer4 { 0% { left: 0; } 100% { left: -150px; opacity: 0; } }

@keyframes lf { 0% { left: 200%; } 100% { left: -200%; opacity: 0; } }
@keyframes lf2 { 0% { left: 200%; } 100% { left: -200%; opacity: 0; } }
@keyframes lf3 { 0% { left: 200%; } 100% { left: -100%; opacity: 0; } }
@keyframes lf4 { 0% { left: 200%; } 100% { left: -100%; opacity: 0; } }

@keyframes moveClouds {
  0% { transform: translateX(0); }
  100% { transform: translateX(-2000px); }
}

@keyframes speeder {
  0% { transform: translate(2px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -3px) rotate(-1deg); }
  20% { transform: translate(-2px, 0px) rotate(1deg); }
  30% { transform: translate(1px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 3px) rotate(-1deg); }
  60% { transform: translate(-1px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-2px, -1px) rotate(1deg); }
  90% { transform: translate(2px, 1px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* --- TEKS LOADING DI BAWAH ROKET (CENTER ALIGNED) --- */
.loader-text-rocket {
  position: absolute;
  top: calc(50% + 45px); 
  /* Geser titik awal 15px ke kanan biar pas dengan titik tengah visual badan roket */
  left: calc(50% + 15px); 
  transform: translateX(-50%); 
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--soft-navy); 
  z-index: 10;
  white-space: nowrap; /* Biar kalimat panjang nggak turun ke bawah */
}

/* ================================================================
   VIDEO MODAL SYSTEM
   ================================================================ */
/* Background gelap di belakang Pop-up */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100000; /* Di atas navbar & preloader */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Saat aktif, modal akan muncul */
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Kotak putih Pop-up */
.modal-content {
  background: var(--bone-white);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 90%;
  max-width: 800px;
  position: relative;
  /* Animasi melompat sedikit dari bawah ke atas */
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.modal-overlay.active .modal-content {
  transform: translateY(0) scale(1);
}

/* Tombol X (Close) */
.modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--soft-navy);
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease;
}

.modal-close:hover {
  transform: scale(1.2) rotate(90deg);
  color: var(--sky-blue);
}

/* Container untuk 2 Video */
.modal-videos {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.modal-video {
  width: 50%;
  border-radius: var(--radius-sm);
  background: #000; /* Background hitam biar estetik */
  outline: none;
  max-height: 60vh; /* Agar video vertikal nggak kepanjangan di layar */
  object-fit: contain;
}

/* --- RESPONSIVE MODAL UNTUK HP --- */
@media (max-width: 768px) {
  .modal-content {
    padding: 24px 16px;
  }
  .modal-videos {
    flex-direction: column; /* Kalau di HP videonya numpuk ke bawah */
  }
  .modal-video {
    width: 100%;
    max-height: 40vh;
  }
}

/* --- FITUR HIDE/SHOW PROJECTS --- */
.hidden-project {
  display: none !important;
}