/* Import Font & Reset CSS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Poppins', sans-serif;
 scroll-behavior: smooth;
}

/* === THEME VARIABLES === */
/* Variabel untuk Tema Gelap dan Terang */
:root {
 --dark-bg: #0F172A;
 --dark-container-bg: #1E293B;
 --dark-text: #F8FAFC;
 --dark-text-secondary: #94A3B8;
 --accent-color: #00A9FF;
 --accent-hover: #0088cc;
 --dark-border: #334155;

 --light-bg: #F1F5F9;
 --light-container-bg: #FFFFFF;
 --light-text: #0F172A;
 --light-text-secondary: #475569;
 --light-border: #CBD5E1;
}

body {
 transition: background-color 0.3s, color 0.3s;
}

body.dark-theme {
 background-color: var(--dark-bg);
 color: var(--dark-text);
}

body.light-theme {
 background-color: var(--light-bg);
 color: var(--light-text);
}

/* === MAIN CONTAINER === */
.portfolio-container {
 max-width: 1200px;
 margin: 2rem auto;
 padding: 2rem 3rem;
 border-radius: 20px;
 transition: background-color 0.3s, border 0.3s;
 border: 1px solid transparent;
}

.dark-theme .portfolio-container {
 background-color: var(--dark-container-bg);
 border-color: var(--dark-border);
}

.light-theme .portfolio-container {
 background-color: var(--light-container-bg);
 border-color: var(--light-border);
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* === HEADER / NAVBAR === */
.header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-bottom: 2rem;
}

.logo {
 font-size: 1.8rem;
 font-weight: 700;
 text-decoration: none;
 color: inherit;
}

.navbar a {
 font-size: 1rem;
 font-weight: 500;
 margin-left: 2.5rem;
 text-decoration: none;
 transition: color 0.3s;
}

.dark-theme .navbar a {
 color: var(--dark-text-secondary);
}

.light-theme .navbar a {
 color: var(--light-text-secondary);
}

.navbar a:hover,
.navbar a.active {
 color: var(--accent-color);
}

#theme-toggle {
 font-size: 1.5rem;
 cursor: pointer;
 color: var(--dark-text-secondary);
}

.light-theme #theme-toggle {
 color: var(--light-text-secondary);
}

#theme-toggle:hover {
 color: var(--accent-color);
}

/* === HERO SECTION === */
section {
 padding: 4rem 0;
 border-top: 1px solid;
}

.dark-theme section {
 border-color: var(--dark-border);
}

.light-theme section {
 border-color: var(--light-border);
}

.header+.hero {
 border-top: none;
 padding-top: 2rem;
}

/* Hapus border di atas hero */

.hero {
 /* display: flex;
 align-items: center; */
 gap: 2rem;
}

.hero-content {
 flex: 1.2;
}

.hero-content h1 {
 text-align: center;
 font-size: 3.5rem;
 font-weight: 700;
 line-height: 1.2;
}

.hero-content h3 {
 text-align: center;
 font-size: 1.7rem;
 font-weight: 600;
 color: var(--accent-color);
 margin: 0.5rem 0 1.5rem;
}

.hero-content p {
 text-align: center;
 font-size: 1rem;
 line-height: 1.7;
 margin-bottom: 2rem;
 /* max-width: 500px; */
}

.dark-theme .hero-content p {
 color: var(--dark-text-secondary);
}

.light-theme .hero-content p {
 color: var(--light-text-secondary);
}


.button-group {
 align-items: center;
 text-align: center;
 display: flex;
 gap: 1rem;
 margin-bottom: 2.5rem;
 flex-direction: row;
 justify-content: center;
}

.btn {
 display: inline-block;
 padding: 12px 28px;
 border: 2px solid var(--accent-color);
 background-color: var(--accent-color);
 color: #fff;
 border-radius: 8px;
 font-size: 1rem;
 font-weight: 600;
 text-decoration: none;
 transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

.btn:hover {
 background-color: var(--accent-hover);
 border-color: var(--accent-hover);
 transform: translateY(-2px);
}

.btn.btn-outline {
 background-color: transparent;
}

.dark-theme .btn.btn-outline {
 color: var(--accent-color);
}

.light-theme .btn.btn-outline {
 color: var(--accent-color);
}

.btn.btn-outline:hover {
 background-color: var(--accent-color);
 color: #fff;
}

.social-media a {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 width: 40px;
 height: 40px;
 border: 2px solid;
 border-radius: 50%;
 font-size: 1.2rem;
 text-decoration: none;
 margin-right: 1rem;
 transition: all 0.3s;
}

.dark-theme .social-media a {
 color: var(--dark-text-secondary);
 border-color: var(--dark-text-secondary);
}

.light-theme .social-media a {
 color: var(--light-text-secondary);
 border-color: var(--light-text-secondary);
}

.social-media a:hover {
 background-color: var(--accent-color);
 color: #fff;
 border-color: var(--accent-color);
 transform: translateY(-3px);
}


.hero-image {
 flex: 1;
 text-align: center;
}

.hero-image img {
 max-width: 100%;
 width: 380px;
 height: auto;
 object-fit: cover;
 filter: saturate(1.1);
 /* Sedikit menaikkan saturasi gambar */
}

/* === OTHER SECTIONS (PROJECTS, STORY, CONTACT) === */
.section-title {
 text-align: center;
 font-size: 2.5rem;
 margin-bottom: 3rem;
}

.section-title::after {
 content: '';
 display: block;
 width: 60px;
 height: 4px;
 background-color: var(--accent-color);
 margin: 0.5rem auto 0;
 border-radius: 2px;
}

.projects-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 1.5rem;
}

.project-card {
 padding: 1.5rem;
 border-radius: 12px;
 transition: all 0.3s;
 border: 1px solid;
}

.dark-theme .project-card {
 background-color: var(--dark-bg);
 border-color: var(--dark-border);
}

.light-theme .project-card {
 background-color: var(--light-bg);
 border-color: var(--light-border);
}

.project-card:hover {
 transform: translateY(-5px);
 border-color: var(--accent-color);
}

.project-card h3 {
 font-size: 1.25rem;
 margin-bottom: 0.5rem;
}

.dark-theme .project-card p {
 color: var(--dark-text-secondary);
}

.light-theme .project-card p {
 color: var(--light-text-secondary);
}

.project-card .btn-link {
 display: inline-block;
 margin-top: 1rem;
 font-weight: 500;
 text-decoration: none;
 color: var(--accent-color);
}

.project-card .btn-link i {
 vertical-align: middle;
 transition: transform 0.3s;
}

.project-card .btn-link:hover i {
 transform: translateX(5px);
}


.my-story,
.contact {
 text-align: center;
 max-width: 700px;
 margin-left: auto;
 margin-right: auto;
}

.story-content,
.contact p {
 font-size: 1.1rem;
 line-height: 1.8;
}

.dark-theme .story-content,
.dark-theme .contact p {
 color: var(--dark-text-secondary);
}

.light-theme .story-content,
.light-theme .contact p {
 color: var(--light-text-secondary);
}


.btn-whatsapp {
 margin-top: 2rem;
 background-color: #25D366;
 border-color: #25D366;
 color: #fff;
}

.btn-whatsapp:hover {
 background-color: #1DAA50;
 border-color: #1DAA50;
}

.btn-whatsapp i {
 font-size: 1.5rem;
 vertical-align: middle;
 margin-right: 0.5rem;
}


/* === RESPONSIVE DESIGN === */
@media (max-width: 992px) {
 .portfolio-container {
  margin: 1rem;
  padding: 1.5rem;
 }

 .hero {
  flex-direction: column-reverse;
  text-align: center;
 }

 .hero-content p {
  margin-left: auto;
  margin-right: auto;
 }

 .button-group {
  justify-content: center;
 }

 .social-media {
  text-align: center;
 }

 .hero-image img {
  width: 300px;
  margin-top: 2rem;
 }
}

@media (max-width: 768px) {
 .header {
  flex-direction: column;
  gap: 1.5rem;
 }

 .navbar a {
  margin: 0 1rem;
 }

 .hero-content h1 {
  font-size: 2.8rem;
 }

 .hero-content h3 {
  font-size: 1.5rem;
 }

 .section-title {
  font-size: 2rem;
 }
}

@media (max-width: 480px) {
 .navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
 }

 .navbar a {
  margin: 0 0.8rem;
 }

 .button-group {
  flex-direction: column;
 }
}