/* Reset & Base Styles */
* {margin:0;padding:0;box-sizing:border-box;}

:root {--bg-primary: #0a0a14;--bg-secondary: #12121e;--bg-accent: #1a1a2e;--text-primary: #ffffff;--text-secondary: #a0a0b0;--accent-primary: #00f3ff;--accent-secondary: #ff00c8;--accent-tertiary: #9600ff;--neon-glow: 0 0 10px rgba(0, 243, 255, 0.7),0 0 20px rgba(0, 243, 255, 0.5),0 0 30px rgba(0, 243, 255, 0.3);--font-primary: 'Exo 2', sans-serif;--font-heading: 'Orbitron', sans-serif;--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}

html {scroll-behavior:smooth;}

body {font-family:var(--font-primary);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;position:relative;}

body::before {content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 50%, rgba(26, 26, 46, 0.8) 0%, rgba(10, 10, 20, 0.9) 100%);z-index:-1;}

/* Loading Screen */
.loading-screen {position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--bg-primary);display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity 0.5s ease-out, visibility 0.5s;}

.loading-screen.hidden {opacity:0;visibility:hidden;}

.loading-spinner {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;}

.spinner-ring {width:60px;height:60px;border:3px solid transparent;border-top:3px solid var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite;box-shadow:var(--neon-glow);}

.spinner-text {margin-top:20px;font-family:var(--font-heading);font-size:14px;letter-spacing:2px;color:var(--accent-primary);animation:pulse 2s infinite;}

@keyframes spin {0% {transform:rotate(0deg);}100% {transform:rotate(360deg);}}

@keyframes pulse {0%,100% {opacity:1;}50% {opacity:0.5;}}

/* Navigation */
.navbar {position:fixed;top:0;left:0;width:100%;padding:1.5rem 0;z-index:1000;transition:var(--transition);background:rgba(10, 10, 20, 0.8);backdrop-filter:blur(10px);}

.nav-container {max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;}

.nav-logo {display:flex;align-items:center;font-family:var(--font-heading);font-weight:700;font-size:1.5rem;}

.logo-text {color:var(--accent-primary);}

.logo-name {margin:0 0.25rem;background:linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

.nav-menu {display:flex;gap:2rem;}

.nav-link {color:var(--text-primary);text-decoration:none;font-weight:500;position:relative;padding:0.5rem 0;transition:var(--transition);}

.nav-link::after {content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));transition:var(--transition);}

.nav-link:hover {color:var(--accent-primary);}

.nav-link:hover::after {width:100%;}

.nav-toggle {display:none;flex-direction:column;cursor:pointer;z-index:1001;}

.toggle-bar {width:25px;height:3px;background-color:var(--text-primary);margin:3px 0;transition:var(--transition);border-radius:2px;}

/* Hero Section */
.hero {min-height:100vh;display:flex;align-items:center;position:relative;padding:6rem 2rem 4rem;overflow:hidden;}

.hero-container {max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}

.hero-content {z-index:2;}

.hero-title {font-family:var(--font-heading);font-size:clamp(2.5rem, 5vw, 4.5rem);line-height:1.1;margin-bottom:1.5rem;}

.title-line {display:block;}

.title-line.accent {background:linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative;}

.hero-description {font-size:1.1rem;color:var(--text-secondary);margin-bottom:2.5rem;max-width:500px;}

.hero-buttons {display:flex;gap:1rem;}

.btn {display:inline-block;padding:0.8rem 2rem;border-radius:50px;font-weight:600;text-decoration:none;transition:var(--transition);border:none;cursor:pointer;font-family:var(--font-primary);font-size:1rem;position:relative;overflow:hidden;z-index:1;}

.btn::before {content:'';position:absolute;top:0;left:0;width:0%;height:100%;background:linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));transition:var(--transition);z-index:-1;}

.btn:hover::before {width:100%;}

.btn-primary {background:linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));color:var(--bg-primary);}

.btn-primary::before {background:linear-gradient(45deg, var(--accent-secondary), var(--accent-primary));}

.btn-secondary {background:transparent;color:var(--text-primary);border:2px solid var(--accent-primary);}

.btn-secondary::before {background:var(--accent-primary);}

.btn-secondary:hover {color:var(--bg-primary);}

.hero-visual {position:relative;height:500px;}

.hero-canvas {width:100%;height:100%;border-radius:20px;overflow:hidden;box-shadow:var(--neon-glow);}

.scroll-indicator {position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;color:var(--text-secondary);z-index:10;}

.scroll-text {font-size:0.8rem;margin-bottom:0.5rem;letter-spacing:2px;opacity:0.8;}

.scroll-line {width:2px;height:40px;background:linear-gradient(to bottom, var(--accent-primary), transparent);animation:scroll-line 2s infinite;}

@keyframes scroll-line {0% {height:0;opacity:0;}50% {height:40px;opacity:1;}100% {height:0;opacity:0;}}

/* Sections Common Styles */
section {padding:6rem 2rem;position:relative;}

.section-header {text-align:center;margin-bottom:4rem;}

.section-title {font-family:var(--font-heading);font-size:clamp(2rem, 5vw, 3.5rem);margin-bottom:1rem;}

.section-title .accent {background:linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

.section-subtitle {color:var(--text-secondary);font-size:1.1rem;max-width:600px;margin:0 auto;}

/* Projects Section */
.projects {background-color:var(--bg-secondary);}

.projects-container {max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));gap:2rem;}

/* Projects Filter Styles */
.projects-filters {display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:3rem;padding:0 1rem;}

.filter-btn {padding:0.7rem 1.5rem;background:transparent;color:var(--text-secondary);border:1px solid var(--accent-primary);border-radius:50px;cursor:pointer;transition:var(--transition);font-family:var(--font-primary);font-size:0.9rem;position:relative;overflow:hidden;}

.filter-btn::before {content:'';position:absolute;top:0;left:0;width:0%;height:100%;background:linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));transition:var(--transition);z-index:-1;}

.filter-btn:hover {color:var(--bg-primary);border-color:transparent;}

.filter-btn:hover::before {width:100%;}

.filter-btn.active {color:var(--bg-primary);background:linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));border-color:transparent;box-shadow:var(--neon-glow);}

/* Project Cards */
.project-card {background:var(--bg-accent);border-radius:15px;overflow:hidden;transition:var(--transition);position:relative;transform-style:preserve-3d;perspective:1000px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);}

.project-card:hover {transform:translateY(-10px) rotateX(5deg);box-shadow:0 15px 35px rgba(0, 243, 255, 0.2);}

.project-image {height:200px;overflow:hidden;position:relative;}

.project-image img {width:100%;height:100%;object-fit:cover;transition:var(--transition);}

.project-card:hover .project-image img {transform:scale(1.1);}

.project-content {padding:1.5rem;}

.project-title {font-family:var(--font-heading);font-size:1.5rem;margin-bottom:0.5rem;color:var(--text-primary);}

.project-category {color:var(--accent-primary);font-size:0.9rem;margin-bottom:1rem;display:block;}

.project-description {color:var(--text-secondary);margin-bottom:1.5rem;font-size:0.95rem;}

.project-tags {display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.5rem;}

.project-tag {background:rgba(0, 243, 255, 0.1);color:var(--accent-primary);padding:0.3rem 0.8rem;border-radius:20px;font-size:0.8rem;}

.project-link {display:inline-flex;align-items:center;color:var(--accent-primary);text-decoration:none;font-weight:600;transition:var(--transition);}

.project-link:hover {color:var(--accent-secondary);transform:translateX(5px);}

/* About Section */
.about {background-color:var(--bg-primary);}

.about-container {max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}

.about-text {margin-bottom:2rem;}

.about-text p {margin-bottom:1.5rem;color:var(--text-secondary);line-height:1.8;}

.skills-container {margin-top:2rem;}

.skill-item {margin-bottom:1.5rem;}

.skill-header {display:flex;justify-content:space-between;margin-bottom:0.5rem;}

.skill-name {font-weight:600;}

.skill-percent {color:var(--accent-primary);}

.skill-bar {height:6px;background:rgba(255, 255, 255, 0.1);border-radius:10px;overflow:hidden;}

.skill-progress {height:100%;background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));border-radius:10px;width:0;transition:width 1.5s ease-in-out;}

.about-visual {position:relative;height:500px;}

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

.floating-shapes {position:absolute;width:100%;height:100%;}

.shape {position:absolute;border-radius:50%;opacity:0.5;filter:blur(10px);}

.shape-1 {width:150px;height:150px;background:var(--accent-primary);top:20%;left:10%;animation:float 8s ease-in-out infinite;}

.shape-2 {width:100px;height:100px;background:var(--accent-secondary);bottom:20%;right:10%;animation:float 10s ease-in-out infinite 1s;}

.shape-3 {width:80px;height:80px;background:var(--accent-tertiary);top:50%;right:20%;animation:float 12s ease-in-out infinite 2s;}

@keyframes float {0%,100% {transform:translateY(0) rotate(0deg);}50% {transform:translateY(-20px) rotate(180deg);}}

.profile-image {position:relative;width:300px;height:300px;border-radius:50%;overflow:hidden;z-index:2;box-shadow:var(--neon-glow);}

.image-placeholder {width:100%;height:100%;background:linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));display:flex;justify-content:center;align-items:center;color:var(--bg-primary);font-size:5rem;}

/* Contact Section */
.contact {background-color:var(--bg-secondary);}

.contact-container {max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;}

.contact-info {display:flex;flex-direction:column;gap:2rem;}

.contact-item {display:flex;align-items:flex-start;gap:1rem;}

.contact-icon {font-size:1.5rem;color:var(--accent-primary);min-width:40px;}

.contact-details h3 {margin-bottom:0.5rem;font-family:var(--font-heading);}

.contact-details p {color:var(--text-secondary);}

.contact-form {display:flex;flex-direction:column;gap:1.5rem;}

.form-group {position:relative;}

.form-group input,.form-group textarea {width:100%;padding:1rem;background:transparent;border:2px solid rgba(255, 255, 255, 0.1);border-radius:8px;color:var(--text-primary);font-family:var(--font-primary);transition:var(--transition);}

.form-group textarea {resize:vertical;min-height:150px;}

.form-group label {position:absolute;top:1rem;left:1rem;color:var(--text-secondary);pointer-events:none;transition:var(--transition);}

.form-group input:focus,.form-group textarea:focus {border-color:var(--accent-primary);outline:none;box-shadow:0 0 10px rgba(0, 243, 255, 0.3);}

.form-group input:focus+label,.form-group textarea:focus+label,.form-group input:not(:placeholder-shown)+label,.form-group textarea:not(:placeholder-shown)+label {top:-0.5rem;left:0.8rem;font-size:0.8rem;background:var(--bg-secondary);padding:0 0.5rem;color:var(--accent-primary);}

/* Footer */
.footer {background-color:var(--bg-primary);padding:4rem 2rem 2rem;}

.footer-container {max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;}

.footer-content {max-width:400px;}

.footer-text {color:var(--text-secondary);margin-top:1rem;}

.footer-social {display:flex;gap:1.5rem;}

.social-link {color:var(--text-primary);text-decoration:none;transition:var(--transition);position:relative;}

.social-link::after {content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));transition:var(--transition);}

.social-link:hover {color:var(--accent-primary);}

.social-link:hover::after {width:100%;}

.footer-bottom {text-align:center;padding-top:2rem;border-top:1px solid rgba(255, 255, 255, 0.1);color:var(--text-secondary);font-size:0.9rem;}

/* Chat Widget */
.chat-widget {position:fixed;bottom:2rem;right:2rem;z-index:1000;}

.chat-button {width:60px;height:60px;border-radius:50%;background:linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:var(--neon-glow);transition:var(--transition);}

.chat-button:hover {transform:scale(1.1);}

.chat-icon {font-size:1.5rem;}

.chat-container {position:absolute;bottom:70px;right:0;width:350px;height:450px;background:var(--bg-accent);border-radius:15px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px);transition:var(--transition);}

.chat-container.active {opacity:1;visibility:visible;transform:translateY(0);}

.chat-header {padding:1rem;background:var(--bg-secondary);display:flex;justify-content:space-between;align-items:center;}

.chat-header h3 {font-family:var(--font-heading);font-size:1.2rem;}

.chat-close {background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;transition:var(--transition);}

.chat-close:hover {color:var(--accent-primary);}

.chat-messages {flex:1;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;}

.message {max-width:80%;padding:0.8rem 1rem;border-radius:15px;font-size:0.9rem;line-height:1.4;}

.message.bot {background:rgba(0, 243, 255, 0.1);align-self:flex-start;border-bottom-left-radius:5px;}

.message.user {background:rgba(255, 0, 200, 0.1);align-self:flex-end;border-bottom-right-radius:5px;}

.chat-input {display:flex;padding:1rem;background:var(--bg-secondary);gap:0.5rem;}

.chat-input input {flex:1;padding:0.8rem;border-radius:50px;border:none;background:var(--bg-primary);color:var(--text-primary);outline:none;}

.chat-input button {padding:0.8rem 1.2rem;border-radius:50px;border:none;background:var(--accent-primary);color:var(--bg-primary);font-weight:600;cursor:pointer;transition:var(--transition);}

.chat-input button:hover {background:var(--accent-secondary);}

/* Responsive Design */
@media (max-width:992px) {.hero-container,.about-container,.contact-container {grid-template-columns:1fr;gap:3rem;}.hero-visual,.about-visual {height:400px;}.footer-container {flex-direction:column;gap:2rem;text-align:center;}}

@media (max-width:768px) {.nav-menu {position:fixed;top:0;right:-100%;width:70%;height:100vh;background:var(--bg-accent);flex-direction:column;justify-content:center;align-items:center;transition:var(--transition);z-index:1000;padding:2rem;}.nav-menu.active {right:0;box-shadow:-5px 0 25px rgba(0, 0, 0, 0.5);}.nav-toggle {display:flex;}.nav-toggle.active .toggle-bar:nth-child(1) {transform:rotate(45deg) translate(5px, 8px);}.nav-toggle.active .toggle-bar:nth-child(2) {opacity:0;}.nav-toggle.active .toggle-bar:nth-child(3) {transform:rotate(-45deg) translate(5px, -8px);}.hero {padding:5rem 1rem 3rem;min-height:auto;}.hero-container {grid-template-columns:1fr;gap:2rem;}.hero-visual {height:300px;order:-1;}.hero-title {font-size:2rem;}.hero-buttons {flex-direction:column;width:100%;}.btn {width:100%;text-align:center;}.projects-container {grid-template-columns:1fr;}.project-card {margin-bottom:1.5rem;}.about-container {grid-template-columns:1fr;gap:2rem;}.about-visual {height:300px;}.profile-image {width:200px;height:200px;}.contact-container {grid-template-columns:1fr;gap:2rem;}.chat-container {width:90%;right:5%;bottom:80px;}.chat-button {width:50px;height:50px;bottom:1rem;right:1rem;}.footer-container {flex-direction:column;text-align:center;gap:1.5rem;}.footer-social {justify-content:center;}.scroll-indicator {bottom:5rem;}.chat-widget~.hero .scroll-indicator {bottom:6rem;}.projects-filters {gap:0.5rem;}.filter-btn {padding:0.5rem 1rem;font-size:0.8rem;}}

@media (min-width:769px) and (max-width:1024px) {.projects-container {grid-template-columns:repeat(2, 1fr);}.hero-container,.about-container,.contact-container {gap:2rem;padding:0 1rem;}.hero-title {font-size:3rem;}}

@media (max-width:480px) {.loading-spinner {transform:scale(0.8);}.spinner-text {font-size:12px;}section {padding:3rem 1rem;}.section-header {margin-bottom:2rem;}.floating-shapes .shape {display:none;}.projects-filters {flex-direction:column;align-items:center;}.filter-btn {width:200px;text-align:center;}}

/* Touch device improvements */
@media (hover:none) and (pointer:coarse) {.project-card:hover {transform:none;}.nav-link::after {display:none;}.nav-link, .btn, .project-card {min-height:44px;display:flex;align-items:center;}}

/* Landscape mode improvements */
@media (max-height:500px) and (orientation:landscape) {.hero {min-height:100vh;padding-top:7rem;}.hero-visual {height:250px;}.scroll-indicator {bottom:3rem;}}

/* High resolution displays */
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {.nav-logo,.hero-title,.section-title {-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}.spinner-ring {animation:none;border:3px solid var(--accent-primary);}}

/* Dark mode support */
@media (prefers-color-scheme:dark) {:root {--bg-primary: #0a0a14;--bg-secondary: #12121e;--bg-accent: #1a1a2e;}}

/* Print styles */
@media print {.navbar,.hero-visual,.chat-widget,.scroll-indicator,.floating-shapes {display:none !important;}body {background:white !important;color:black !important;}.hero,section {padding:1rem !important;}a {color:blue !important;text-decoration:underline !important;}}

/* Untuk perangkat mobile dengan notch (iPhone X, dll) */
@supports(padding:max(0px)) {.scroll-indicator {bottom:max(2rem, env(safe-area-inset-bottom));}@media (max-width:768px) {.scroll-indicator {bottom:max(5rem, calc(env(safe-area-inset-bottom) + 2rem));}}}