:root {

	--primary-color: #d35400;

	--secondary-color: #f39c12;

	--text-color: #2c3e50;

	--bg-color: #f9f9f9;

	--nav-btn-bg: rgb(15, 23, 43);

}

body {

	font-family: 'Poppins', sans-serif;

	margin: 0;

	padding: 0;

	background-color: var(--bg-color);

	color: var(--text-color);

	line-height: 1.6;

	text-align: center;

}

header {

	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

	color: white;

	padding: 60px 20px;

	border-bottom-left-radius: 50% 20px;

	border-bottom-right-radius: 50% 20px;

}

.profile-img {

	width: 150px;

	height: 150px;

	border-radius: 50%;

	object-fit: cover;

	border: 5px solid white;

	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

	margin-bottom: 20px;

}

h1 {
	margin: 10px 0;
	font-size: 2.2em;
}

.tagline {
	font-style: italic;
	opacity: 0.9;
}

.container {

	max-width: 800px;

	margin: -30px auto 40px;

	background: white;

	padding: 30px;

	border-radius: 15px;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}

.section-title {

	color: var(--primary-color);

	border-bottom: 2px solid var(--secondary-color);

	display: inline-block;

	margin-bottom: 20px;

	text-transform: uppercase;

	font-size: 1.2em;

	font-weight: 600;

}

/* --- CAROUSEL STYLES --- */

.carousel-wrapper {

	position: relative;

	margin: 20px 0;

	width: 100%;

	overflow: visible;

}

.carousel {

	display: grid;

	grid-auto-flow: column;

	grid-auto-columns: 220px;

	gap: 15px;

	overflow-x: auto;

	scroll-snap-type: x mandatory;

	scroll-behavior: smooth;

	scrollbar-width: none;

	padding-block: 20px;

}

.carousel::-webkit-scrollbar {
	display: none;
}

/* Fake padding for centering */

.carousel::before,
.carousel::after {
	content: '';
	width: 30%;
}

.carousel-item {

	scroll-snap-align: center;

	transition: all 0.3s ease;

	opacity: 0.4;

	transform: scale(0.8);

	pointer-events: none;

}

.carousel-item.active {

	opacity: 1;

	transform: scale(1);

	pointer-events: auto;

}

.carousel-item .img-box {

	width: 100%;

	aspect-ratio: 1/1;

	border-radius: 15px;

	overflow: hidden;

	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}

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

.carousel-item h3 {
	font-size: 14px;
	margin: 10px 0 0;
	color: var(--primary-color);
}

.nav-btn {

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	width: 35px;

	height: 35px;

	background: var(--nav-btn-bg);

	color: white;

	border: none;

	border-radius: 50%;

	cursor: pointer;

	z-index: 5;

	display: flex;

	align-items: center;

	justify-content: center;

	opacity: 0.5;

}

.nav-btn:hover {
	opacity: 1;
}

.prev {
	left: -15px;
}

.next {
	right: -15px;
}

.dots-container {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--primary-color);
	opacity: 0.2;
	cursor: pointer;
}

.dot.active {
	opacity: 1;
	transform: scale(1.2);
}

/* --- END CAROUSEL --- */

/* --- SOCIAL LINKS HORIZONTAL DENGAN KOTAK --- */

header .social-links {

	display: flex;

	flex-direction: row;
	/* Berderet ke samping */

	justify-content: center;
	/* Tetap di tengah secara horizontal */

	align-items: center;

	gap: 20px;
	/* Jarak antar kotak ikon */

	margin-top: 40px;
	/* Jarak dari teks tagline */

}

header .social-links a {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 36px;
	/* Lebar kotak */

	height: 36px;
	/* Tinggi kotak */

	border: 1.2px solid #ffffff;
	/* Garis kotak putih tajam */

	border-radius: 8px;
	/* Sudut kotak agar modern */

	background: rgba(255, 255, 255, 0.1);
	/* Efek kaca transparan */

	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

	text-decoration: none;

}

header .social-links svg {

	width: 26px;

	height: 26px;

	fill: #ffffff;
	/* Warna ikon putih */

}

/* --- EFEK HOVER --- */

header .social-links a:hover {

	background: #ffffff;
	/* Kotak berubah jadi putih solid */

	transform: translateY(-0.1px);
	/* Melompat ke atas sedikit saat hover */

	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}

header .social-links a:hover svg {

	fill: var(--primary-color);
	/* Ikon berubah warna saat kotak jadi putih */

}

.hobbies {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
}

.hobby {
	background: #f1f2f6;
	padding: 6px 12px;
	border-radius: 15px;
	font-size: 13px;
	border: 1px solid #dfe4ea;
}

footer {
	padding: 40px 20px;
	font-size: 0.85em;
	color: #7f8c8d;
}

hr {
	border: 0;
	border-top: 1px solid #eee;
	margin: 20px 0;
}