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

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #222;
}

/* Utility */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Navigation */
.nav {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav .logo {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

.nav .menu {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav .menu a {
  text-decoration: none;
  color: #444;
  font-weight: 500;
}

/* Hero */
.hero {
  background: #f7f7f7;
  padding: 100px 0;
  text-align: center;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 10px;
}

.hero .highlight {
  color: #000000;
}

.hero p {
  font-size: 18px;
  margin-bottom: 20px;
}

.btn {
  background: #000000;
  color: #fff;
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

/* Work Section */
.work-section {
  padding: 60px 0;
  text-align: center;
}

.work-section h2 {
  margin-bottom: 30px;
  font-size: 28px;
}

.projects {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.project-card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.project-card img {
  width: 100%;
  border-bottom: 1px solid #ddd;
}

.project-card h3 {
  margin: 15px 0 5px;
  color: #333;
}

.project-card p {
  margin-bottom: 15px;
  color: #666;
}

/* Footer */
.footer {
  padding: 20px 0;
  background: #111;
  color: #eee;
  text-align: center;
  font-size: 14px;
}

/* ABOUT PAGE */

.about-hero{
padding:80px 0;
}

.about-grid{
display:grid;
grid-template-columns:1fr 2fr;
gap:50px;
align-items:center;
}

.about-photo img{
width:100%;
border-radius:10px;
}

.about-text h1{
font-size:40px;
margin-bottom:20px;
}

.about-text p{
margin-bottom:15px;
color:#555;
line-height:1.7;
}


/* SKILLS */

.skills{
background:#f7f7f7;
padding:70px 0;
text-align:center;
}

.skills h2{
margin-bottom:40px;
}

.skills-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.skill{
background:white;
padding:25px;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* PORTFOLIO PAGE */

.portfolio-hero{
padding:80px 0;
text-align:center;
}

.portfolio-hero h1{
font-size:42px;
margin-bottom:10px;
}

.portfolio{
padding:60px 0;
}

.portfolio-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.portfolio-item{
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
transition:transform 0.3s;
}

.portfolio-item:hover{
transform:translateY(-5px);
}

.portfolio-item img{
width:100%;
display:block;
}

.portfolio-info{
padding:20px;
}

.portfolio-info h3{
margin-bottom:5px;
}

.portfolio-info p{
color:#666;
font-size:14px;
}

/* BLOG */

.blog-hero{
padding:80px 0;
text-align:center;
}

.blog-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
padding:50px 0;
}

.blog-card{
padding:25px;
border:1px solid #eee;
border-radius:8px;
background:white;
transition:0.3s;
}

.blog-card:hover{
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.blog-card h2{
font-size:20px;
margin-bottom:10px;
}

.blog-card a{
text-decoration:none;
color:#111;
}

.blog-date{
font-size:14px;
color:#777;
margin-bottom:10px;
}

/* CONTACT PAGE */

.contact-hero{
padding:80px 0;
text-align:center;
}

.contact-section{
padding:60px 0;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.contact-info h2{
margin-bottom:15px;
}

.contact-info p{
margin-bottom:10px;
color:#555;
}


/* FORM */

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

.contact-form label{
margin-top:10px;
margin-bottom:5px;
}

.contact-form input,
.contact-form textarea{
padding:10px;
border:1px solid #ddd;
border-radius:5px;
font-size:14px;
}

.contact-form button{
margin-top:15px;
padding:12px;
border:none;
background:#007bff;
color:white;
border-radius:5px;
cursor:pointer;
font-weight:bold;
}

.contact-form button:hover{
background:#0056b3;
}

/* NAVBAR SCROLL */

.nav-scrolled{
background:white;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}


/* SCROLL ANIMATION */

.animate{
opacity:0;
transform:translateY(30px);
transition:all 0.6s ease;
}

.animate.show{
opacity:1;
transform:translateY(0);
}


/* DARK MODE */

.dark-mode{
background:#111;
color:white;
}

.dark-mode .portfolio-item{
background:#1e1e1e;
}

.dark-mode .blog-card{
background:#1e1e1e;
border-color:#333;
}

.hero {  
background:
linear-gradient(135deg, rgba(0,120,255,0.7), rgba(0,230,200,0.7)),
url("images/hero-bg.jpg") center/cover no-repeat;

height: 60vh;
display:flex;
align-items:center;
text-align:center;
color:white;
}

.nav-container{
display:flex;
align-items:center;
}

.nav-left{
flex:1;
}

.menu{
flex:2;
display:flex;
justify-content:center;
gap:40px;
list-style:none;
padding:0;
margin:0;
}

.menu a{
text-decoration:none;
color:#333;
font-weight:500;
}

.nav-social{
flex:1;
display:flex;
justify-content:flex-end;
gap:15px;
}

.nav-social a{
text-decoration:none;
font-size:14px;
color:#333;
}

.logo img{
height:60px;
}

.nav{
position:sticky;
top:0;
background:white;
z-index:1000;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.nav-container{
display:flex;
align-items:center;
padding:15px 0;
}

.nav-left{
flex:1;
}

.logo img{
height:50px;
}

.menu{
flex:1;
display:flex;
justify-content:center;
gap:35px;
list-style:none;
margin:0;
padding:0;
}

.menu a{
text-decoration:none;
color:#333;
font-weight:500;
transition:0.3s;
}

.menu a:hover{
color:#00a8c5;
}

.nav-social{
flex:1;
display:flex;
justify-content:flex-end;
gap:18px;
}

.nav-social a{
color:#333;
transition:0.3s;
}

.nav-social a:hover{
color:#00c6c6;
transform:scale(1.2);
}

.nav{
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.85);
}

.nav .menu a {
  text-decoration: none;
  color: #444;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.5px;
}

.nav .menu {
  list-style: none;
  display: flex;
  gap: 30px; /* sebelumnya 20px */
}

.nav .menu a:hover {
  color: #00a8a8;
}

.nav-social
  .btn {
  background: #e25c04;
  color: #ffffff;
  padding: 1px 5px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: normal;
}

.contact-social{
display:flex;
gap:16px;
margin-top:20px;
}

.social{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
transition:0.3s;
}

.social svg{
width:22px;
height:22px;
fill:white;
}

/* brand colors */

.linkedin{
background:#0077b5;
}

.instagram{
background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

.youtube{
background:#ff0000;
}

/* hover effect */

.social:hover{
transform:translateY(-4px) scale(1.08);
box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

.contact-social{
display:flex;
gap:16px;
margin-top:20px;
margin-bottom:30px;
align-items:center;
}

.portfolio-layout{
display:flex;
gap:40px;
}

/* sidebar */

.portfolio-sidebar{
width:220px;
}

.portfolio-sidebar h3{
margin-bottom:15px;
}

.portfolio-sidebar ul{
list-style:none;
padding:0;
}

.portfolio-sidebar li{
margin-bottom:10px;
}

.portfolio-sidebar button{
width:100%;
padding:10px;
border:none;
background:#f3f3f3;
cursor:pointer;
border-radius:6px;
text-align:left;
transition:0.3s;
}

.portfolio-sidebar button:hover{
background:#ff6600;
color:white;
}


/* content */

.portfolio-content{
flex:1;
}

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

.portfolio-item img{
width:100%;
border-radius:6px;
}

/* more button */

.more-btn{
display:inline-block;
margin-top:25px;
padding:10px 20px;
background:#ff6600;
color:white;
border-radius:6px;
text-decoration:none;
}

.portfolio-category{
display:none;
}

.portfolio-category.active{
display:block;
}

.portfolio-page{
padding-bottom:80px;
}

.portfolio-sidebar button.active{
background:#ff6600;
color:white;
}

.project-hero{
padding:80px 0;
text-align:center;
}

.project-hero img{
width:100%;
max-width:900px;
margin-top:30px;
border-radius:8px;
}

.project-content{
padding:60px 0;
max-width:800px;
margin:auto;
line-height:1.6;
}

.project-content ul{
margin-top:15px;
padding-left:20px;
}

.more-portfolio{
padding:80px 0;
background:#f7f7f7;
}

.more-portfolio h2{
text-align:center;
margin-bottom:40px;
}

/* portfolio card */

.portfolio-item{
display:block;
text-decoration:none;
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 4px 20px rgba(0,0,0,0.05);
transition:all 0.3s ease;
color:#111;
}

.portfolio-item img{
width:100%;
display:block;
}

.portfolio-info{
padding:20px;
}

.portfolio-info h4{
font-size:18px;
margin:0;
}

.portfolio-info p{
font-size:14px;
color:#777;
margin-top:5px;
}

.portfolio-item:hover{
transform:translateY(-6px);
box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.portfolio-item:hover h4{
color:#ff6600;
}

.portfolio-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:30px;
}

.case-study-report{
padding:80px 0;
background:#fafafa;
}

.report-embed{
margin-top:30px;
border-radius:10px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.project-content,
.social-content .container {
  max-width: 1100px;
  margin: 0 auto;
}

.social-content {
  padding-top: 60px;
}

.social-content h2,
.social-content p {
  text-align: left;
}

.social-grid {
  margin-top: 30px;
}

.social-grid img {
  width: 100%;
  max-width: 700px;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

.project-content,
.social-content,
.case-study-report {
  padding: 80px 0;
}