/* Font Kustom Satoshi */
@font-face {
    font-family: 'Satoshi';
    src: url('../font/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../font/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

	/* ===== VARIABLES & RESET ===== */
	:root {
		--primary-text: #292929;
		--secondary-text: #757575;
		--accent: #006666; /*#1a8917;*/
		--background: #ffffff;
		--border: #e6e6e6;
		--highlight: #fff9db;
		--sidebar-bg: #f8f8f8;
		--lp-font-satoshi: 'Satoshi', -apple-system, BlinkMacSystemFont, 
                           'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
                           'Open Sans', sans-serif;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
		font-family: var(--lp-font-satoshi); 
		line-height: 1.6;
		color: var(--primary-text);
		background-color: var(--background);
		max-width: 1000px;
		width: 80vw; /* Menggunakan vw yang lebih besar untuk fleksibilitas di layar kecil */
		margin: 0 auto;
		padding: 0 20px;
	}

	a {
		text-decoration: none;
		color: var(--primary-text);
		transition: color 0.2s ease;
	}

	a:hover {
		color: var(--accent);
	}

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

	/* Fallback untuk layar sangat lebar */
	@media (min-width: 1600px) {
	  body {
		max-width: 1000px;      /* Batas atas agar tidak terlalu lebar */
	  }
	}

	/* Responsif untuk layar kecil */
	@media (max-width: 768px) {
	  body {
		max-width: 98vw;
		width: 100%; /* Tambahkan ini agar lebar penuh di mobile */
	    }
	}

	/* ===== LAYOUT ===== */
	.container {
		display: grid;
		grid-template-columns: 1fr 320px;
		gap: 40px;
		margin-top: 30px;
	}

	/* ===== HEADER & NAVIGATION ===== */
	header {
		padding: 1.5rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid var(--border);
		margin-bottom: 2rem;
	}

	.logo {
		font-family: var(--lp-font-satoshi);
		font-size: 2.2rem;
		font-weight: 700;
		color: var(--accent);
	}

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

	nav ul {
		display: flex;
		list-style: none;
		gap: 1.8rem;
	}

	nav a {
		font-size: 1rem;
		font-weight: 500;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 1.5rem;
	}

	.search-box {
		display: flex;
		align-items: center;
		background: #f5f5f5;
		border-radius: 20px;
		padding: 0.3rem 1rem;
	}

	.search-box input[type="text"] {
		border: none;
		background: transparent;
		padding: 0.3rem 0.5rem;
		font-family: var(--lp-font-satoshi);
		width: 180px;
		outline: none;
	}

	.search-box button {
		background: none;
		border: none;
		cursor: pointer;
	}

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

	.auth-buttons a {
		font-size: 0.95rem;
		font-weight: 500;
	}

	.auth-buttons a.get-started {
		background-color: var(--accent);
		color: white;
		padding: 0.5rem 1.2rem;
		border-radius: 20px;
	}

	/* ===== BREADCRUMB ===== */
	.breadcrumb {
		margin-bottom: 2rem;
		font-size: 0.9rem;
		color: var(--secondary-text);
	}

	.breadcrumb a {
		color: var(--secondary-text);
	}

	.breadcrumb span {
		margin: 0 0.5rem;
	}

	/* ===== HERO SECTION ===== */
	.hero {
		text-align: center;
		margin-bottom: 3rem;
		padding: 0 1rem;
	}

	.hero h1 {
		font-family: var(--lp-font-satoshi);
		font-size: 2.8rem;
		margin-bottom: 1rem;
		line-height: 1.2;
	}

	.hero p {
		font-size: 1.2rem;
		color: var(--secondary-text);
		max-width: 700px;
		margin: 0 auto;
	}

	/* ===== CONTENT SECTIONS ===== */
	.page-content, .article-detail {
		margin-bottom: 4rem;
	}

	.page-header, .article-header {
		margin-bottom: 2rem;
	}

	.page-title, .article-title {
		font-family: var(--lp-font-satoshi);
		font-size: 2.5rem;
		margin-bottom: 1rem;
		line-height: 1.3;
	}

	.page-intro {
		font-size: 1.2rem;
		color: var(--secondary-text);
		max-width: 800px;
		margin-bottom: 2rem;
	}

	.section {
		margin-bottom: 3rem;
	}

	.section-title {
		font-family: var(--lp-font-satoshi);
		font-size: 1.8rem;
		margin-bottom: 1.5rem;
		padding-bottom: 0.5rem;
		border-bottom: 2px solid var(--accent);
		display: inline-block;
	}

	.section-content, .article-content {
		font-size: 1.1rem;
		line-height: 1.8;
		color: var(--primary-text);
	}

	.section-content p, .article-content p {
		margin-bottom: 1.5rem;
	}

	.section-content ul, .section-content ol, .article-content ul, .article-content ol {
		/*margin-left: 1.5rem;
		margin-bottom: 1.5rem;*/
		line-height: 1.5rem;
		font-size: 1.05rem;
		color: var(--secondary-text);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.section-content li, .article-content li {
		margin-bottom: 0.8rem;
	}

	.article-content h2 {
		font-family: var(--lp-font-satoshi);
		font-size: 1.8rem;
		margin: 2.5rem 0 1rem;
		color: var(--primary-text);
	}

	.article-content h3 {
		font-family: var(--lp-font-satoshi);
		font-size: 1.5rem;
		margin: 2rem 0 1rem;
		color: var(--primary-text);
	}

	.article-content blockquote {
		border-left: 4px solid var(--accent);
		padding-left: 1.5rem;
		margin: 2rem 0;
		font-style: italic;
		color: var(--secondary-text);
	}

	/* ===== ARTICLE META ===== */
	.article-meta {
		display: flex;
		align-items: center;
		margin-bottom: 0.8rem;
		font-size: 0.9rem;
		color: var(--secondary-text);
	}

	.author-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 0.8rem;
		object-fit: cover;
	}

	.author-info {
		display: flex;
		flex-direction: column;
	}

	.author-name {
		font-weight: 600;
		color: var(--primary-text);
	}

	.article-date {
		font-size: 0.85rem;
	}

	/* ===== ARTICLE IMAGE ===== */
	.article-image {
		margin: 2rem 0;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.article-image img {
		width: 100%;
		height: auto;
		display: block;
	}

	.article-image figcaption {
		text-align: center;
		font-size: 0.9rem;
		color: var(--secondary-text);
		margin-top: 0.5rem;
	}

	/* ===== ARTICLE TAGS ===== */
	.article-tags {
		display: flex;
		gap: 0.5rem;
		margin: 2rem 0;
		font-size: 0.9rem;
	}

	.article-tags a, .article-tags span {
		background-color: #f2f2f2;
		padding: 0.4rem 0.8rem;
		border-radius: 4px;
		color: var(--secondary-text);
		transition: all 0.2s ease;
	}

	.article-tags a:hover {
		background-color: var(--accent);
		color: white;
	}

	/* ===== ARTICLE ACTIONS ===== */
	.article-actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1.5rem 0;
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		margin: 2rem 0;
	}

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

	.action-btn {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		background: none;
		border: 1px solid var(--border);
		padding: 0.5rem 1rem;
		border-radius: 4px;
		cursor: pointer;
		font-family: var(--lp-font-satoshi);
		font-size: 0.9rem;
		color: var(--secondary-text);
		transition: all 0.2s ease;
	}

	.action-btn:hover {
		background-color: #f9f9f9;
	}

	.action-btn.like-btn.active {
		background-color: #fff0f0;
		border-color: #ff6b6b;
		color: #ff6b6b;
	}

	.action-btn.bookmark-btn.active {
		background-color: var(--highlight);
		border-color: var(--accent);
		color: var(--accent);
	}

	.share-options {
		display: flex;
		gap: 0.8rem;
	}

	.share-btn {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
		color: var(--secondary-text);
		transition: all 0.2s ease;
	}

	.share-btn:hover {
		background-color: var(--accent);
		color: white;
	}

	/* ===== AUTHOR BIO ===== */
	.author-bio {
		background-color: var(--sidebar-bg);
		padding: 1.5rem;
		border-radius: 8px;
		margin: 3rem 0;
		display: flex;
		gap: 1.5rem;
		align-items: center;
	}

	.author-bio .author-avatar {
		width: 80px;
		height: 80px;
		margin-right: 0;
	}

	.author-bio-content h3 {
		font-family: var(--lp-font-satoshi);
		margin-bottom: 0.5rem;
	}

	.author-bio-content p {
		color: var(--secondary-text);
		margin-bottom: 1rem;
		font-size: 0.95rem;
	}

	.author-social {
		display: flex;
		gap: 0.8rem;
	}

	.author-social a {
		color: var(--secondary-text);
		font-size: 1.1rem;
	}

	/* ===== ARTICLES GRID ===== */
	.articles {
		margin-bottom: 4rem;
	}

	.article-card {
		margin-bottom: 2.5rem;
		padding-bottom: 2.5rem;
		border-bottom: 1px solid var(--border);
	}

	.article-content h2 {
		font-family: var(--lp-font-satoshi);
		font-size: 1.8rem;
		margin-bottom: 0.8rem;
		line-height: 1.3;
	}

	.article-content p {
		color: var(--secondary-text);
		margin-bottom: 1.2rem;
		font-size: 1.05rem;
		line-height: 1.7;
	}

	.article-stats {
		display: flex;
		gap: 1rem;
		margin-top: 1rem;
		font-size: 0.9rem;
		color: var(--secondary-text);
	}

	/* ===== RELATED ARTICLES ===== */
	.related-articles {
		margin: 4rem 0;
	}

	.articles-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	.related-article {
		border: 1px solid var(--border);
		border-radius: 8px;
		overflow: hidden;
		transition: transform 0.2s ease;
	}

	.related-article:hover {
		transform: translateY(-5px);
	}

	.related-article-image {
		height: 180px;
		overflow: hidden;
	}

	.related-article-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	.related-article:hover .related-article-image img {
		transform: scale(1.05);
	}

	.related-article-content {
		padding: 1.2rem;
	}

	.related-article-content h3 {
		font-family: var(--lp-font-satoshi);
		font-size: 1.1rem;
		margin-bottom: 0.5rem;
		line-height: 1.4;
	}

	.related-article-content p {
		color: var(--secondary-text);
		font-size: 0.9rem;
		margin-bottom: 1rem;
	}

	.related-article-meta {
		display: flex;
		justify-content: space-between;
		font-size: 0.8rem;
		color: var(--secondary-text);
	}

	/* ===== FAQ STYLES ===== */
	.faq-item {
		margin-bottom: 1.5rem;
		border-bottom: 1px solid var(--border);
		padding-bottom: 1.5rem;
	}

	.faq-question {
		font-family: var(--lp-font-satoshi);
		font-size: 1.3rem;
		margin-bottom: 0.8rem;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.faq-answer {
		color: var(--secondary-text);
		display: none;
	}

	.faq-answer.active {
		display: block;
	}

	/* ===== CONTACT FORM ===== */
	.contact-form {
		background-color: var(--sidebar-bg);
		padding: 2rem;
		border-radius: 8px;
		margin-top: 2rem;
	}

	.form-group {
		margin-bottom: 1.5rem;
	}

	.form-group label {
		display: block;
		margin-bottom: 0.5rem;
		font-weight: 500;
	}

	.form-group input,
	.form-group textarea,
	.form-group select {
		width: 100%;
		padding: 0.8rem;
		border: 1px solid var(--border);
		border-radius: 4px;
		font-family: var(--lp-font-satoshi);
	}

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

	.submit-btn {
		background-color: var(--accent);
		color: white;
		border: none;
		padding: 0.8rem 1.5rem;
		border-radius: 4px;
		cursor: pointer;
		font-family: var(--lp-font-satoshi);
		font-weight: 600;
		font-size: 1rem;
	}

	/* ===== TEAM SECTION ===== */
	.team-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
		margin-top: 2rem;
	}

	.team-member {
		text-align: center;
	}

	.team-member img {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		object-fit: cover;
		margin-bottom: 1rem;
	}

	.team-member h3 {
		font-family: var(--lp-font-satoshi);
		margin-bottom: 0.5rem;
	}

	.team-member p {
		color: var(--secondary-text);
		margin-bottom: 1rem;
	}

	.team-social {
		display: flex;
		justify-content: center;
		gap: 0.8rem;
	}

	.team-social a {
		color: var(--secondary-text);
		font-size: 1.1rem;
	}

	/* ===== PAGINATION ===== */
	.pagination {
		display: flex;
		justify-content: center;
		margin: 3rem 0;
		gap: 0.5rem;
	}

	.pagination a, .pagination span {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 4px;
		font-weight: 500;
	}

	.pagination a {
		border: 1px solid var(--border);
		color: var(--primary-text);
	}

	.pagination a:hover {
		background-color: #f9f9f9;
	}

	.pagination a.active {
		background-color: var(--accent);
		color: white;
		border-color: var(--accent);
	}

	.pagination .disabled {
		color: #ccc;
		cursor: not-allowed;
	}

	/* ===== SIDEBAR ===== */
	.sidebar {
		background-color: var(--sidebar-bg);
		padding: 1.8rem;
		border-radius: 8px;
		height: fit-content;
		position: sticky;
		top: 20px;
	}

	.sidebar-section {
		margin-bottom: 2.5rem;
	}

	.sidebar-section h3 {
		font-family: var(--lp-font-satoshi);
		font-size: 1.3rem;
		margin-bottom: 1.2rem;
		padding-bottom: 0.5rem;
		border-bottom: 2px solid var(--accent);
		display: inline-block;
	}

	.sidebar-section ul {
		list-style: none;
	}

	.sidebar-section li {
		margin-bottom: 0.9rem;
		padding-bottom: 0.9rem;
		border-bottom: 1px solid #eee;
	}

	.sidebar-section a {
		color: var(--secondary-text);
		font-size: 0.95rem;
		display: flex;
		justify-content: space-between;
	}

	.sidebar-section a .count {
		background-color: #e6e6e6;
		padding: 0.1rem 0.5rem;
		border-radius: 10px;
		font-size: 0.8rem;
	}

	.popular-articles .article-item {
		display: flex;
		gap: 12px;
		margin-bottom: 1rem;
	}

	.popular-articles .number {
		font-size: 1.5rem;
		font-weight: 700;
		color: #e6e6e6;
	}

	.popular-articles .content {
		flex: 1;
	}
	
	.popular-articles .content .meta {
		font-size: 0.9rem;
	}

	.popular-articles h4 {
		font-size: 0.95rem;
		margin-bottom: 0.3rem;
	}

	.popular-articles .author {
		font-size: 0.8rem;
		color: var(--secondary-text);
	}

	.newsletter-form {
		background-color: var(--highlight);
		padding: 1.5rem;
		border-radius: 8px;
		margin-top: 2rem;
	}

	.newsletter-form h3 {
		font-family: var(--lp-font-satoshi);
		margin-bottom: 1rem;
	}

	.newsletter-form p {
		font-size: 0.9rem;
		color: var(--secondary-text);
		margin-bottom: 1.2rem;
	}

	.newsletter-form input {
		width: 100%;
		padding: 0.8rem;
		border: 1px solid var(--border);
		border-radius: 4px;
		margin-bottom: 0.8rem;
		font-family: var(--lp-font-satoshi);
	}

	.newsletter-form button {
		background-color: var(--accent);
		color: white;
		border: none;
		padding: 0.8rem;
		border-radius: 4px;
		width: 100%;
		cursor: pointer;
		font-family: var(--lp-font-satoshi);
		font-weight: 600;
	}

	/* ===== FOOTER ===== */
	footer {
		border-top: 1px solid var(--border);
		padding: 2.5rem 0;
		margin-top: 3rem;
		font-size: 0.9rem;
		color: var(--secondary-text);
		grid-column: 1 / -1;
	}

	.footer-content {
		display: flex;
		justify-content: space-between;
		align-items: left;
	}

	.footer-logo {
		font-family: var(--lp-font-satoshi);
		font-size: 1.8rem;
		font-weight: 700;
		color: var(--accent);
	}

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

	.footer-links a {
		color: var(--secondary-text);
	}

	.social-links {
		display: flex;
		gap: 1rem;
	}

	.social-links a {
		color: var(--secondary-text);
		font-size: 1.2rem;
	}

	/* ===== RESPONSIVE DESIGN ===== */
	@media (max-width: 900px) {
		.container {
			grid-template-columns: 1fr;
		}
		
		.sidebar {
			position: relative;
			top: 0;
		}
		
		header {
			flex-direction: column;
			text-align: center;
			gap: 1rem;
			padding: 1rem 0;
		}
		
		nav ul {
			gap: 1rem;
		}
		
		.header-right {
			flex-direction: column;
			gap: 1rem;
		}
		
		.page-title, .article-title {
			font-size: 2rem;
		}
		
		.hero {
			text-align: left;
		}

		.hero h1 {
			font-size: 2.2rem;
		}
		
		.team-grid, .articles-grid {
			grid-template-columns: 1fr;
		}
		
		.article-actions {
			flex-direction: column;
			gap: 1rem;
			align-items: flex-start;
		}
		
		.author-bio {
			flex-direction: column;
			text-align: center;
		}
		
		.author-bio .author-avatar {
			margin-right: 0;
		}
		
		.author-social {
			justify-content: center;
		}
		
		.footer-content {
			flex-direction: column;
			gap: 1.5rem;
			text-align: left;
		}

		.social-links {
			text-align: left;
		}
	}

	@media (max-width: 480px) {
		.article-image, .article-card {
			margin: 1rem 0;
		}
		
		.article-content, .section-content {
			font-size: 1rem;
		}
		
		.article-title, .page-title {
			font-size: 1.8rem;
		}
		
		.section-title {
			font-size: 1.5rem;
		}
	}
	
	
	
	/* Logo styles */
.site-logo {
    z-index: 1001;
    min-width: 180px;
}

.logo-link {
    text-decoration: none;
    display: inline-block;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.logo-image {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.logo-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 100px;
    line-height: 1.1;
}

.logo-main-text {
    color: var(--primary-text);
    font-family: "Open Sans", sans-serif; /*var(--lp-font-satoshi);*/
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 1.1;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.logo-main-text sup {
    font-size: 0.55em;
    vertical-align: super;
    margin-left: 2px;
}

.logo-tagline {
    color: var(--primary-text);
    font-family: "Open Sans", sans-serif; /*var(--lp-font-satoshi);*/
    font-size: 0.70rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    /*margin-top: 2px;*/
    white-space: nowrap;
    opacity: 0.8;
}


/* --artikel--*/
/* Mengganti tata letak kontainer hanya untuk halaman artikel */
.article-page .container {
    grid-template-columns: 1fr; /* Mengubah dari 2 kolom menjadi 1 kolom */
}

/* Menyembunyikan sidebar di halaman artikel */
.article-page .sidebar {
    display: none;
}


/* Landing Page Full Article */
.article-full {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--border);
}

.article-full .article-meta {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-full .article-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    color: var(--primary-text);
}

.article-full .article-image {
    margin: 1.5rem 0;
    border-radius: 6px;
    overflow: hidden;
}

.article-full .article-content p {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
    color: var(--primary-text);
}

.article-full .article-tags {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.6rem;
}

.article-full .article-tags span {
    background-color: #f2f2f2;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--secondary-text);
}

.article-full .article-stats {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--secondary-text);
    display: flex;
    gap: 1.5rem;
}

.article-image {
margin: 0 -16px 32px;
}
.article-image img {
width: 100%;
height: auto;
display: block;
}

/* Styling Tabel clean*/
.article-table-container {
	width: 100%;
	overflow-x: auto;
	margin: 2em 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	border-radius: 8px;
}

.article-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-size: 16px;
}

.article-table caption {
	font-size: 1.5em;
	font-weight: 600;
	text-align: left;
	padding: 15px 0;
	color: #333;
	caption-side: top;
}

.article-table th {
	background-color: #f8f9fa;
	font-weight: 600;
	text-align: left;
	padding: 16px;
	border-bottom: 2px solid #e9ecef;
	color: #495057;
}

.article-table td {
	padding: 16px;
	border-bottom: 1px solid #e9ecef;
	vertical-align: top;
}

.article-table tbody tr {
	transition: background-color 0.2s ease;
}

.article-table tbody tr:hover {
	background-color: #f8f9fa;
}

/* Warna khusus untuk jenis lebah */
.article-type {
	font-weight: 600;
	color: #2c5aa0;
}

/* Responsive design untuk mobile */
@media screen and (max-width: 768px) {
	.article-container {
		padding: 20px 15px;
	}
	
	.article-table {
		font-size: 14px;
	}
	
	.article-table th,
	.article-table td {
		padding: 12px 10px;
	}
	
	.article-table-container {
		box-shadow: none;
		border: 1px solid #e9ecef;
		border-radius: 8px;
	}
}

@media screen and (max-width: 480px) {
	.article-table {
		font-size: 13px;
	}
	
	.article-table th,
	.article-table td {
		padding: 10px 8px;
	}
}

/*===MENU-BAR===*/
.main-nav {
  /*background-color: #fff;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);*/
  font-family: sans-serif;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-item {
  margin: 0;
}

.nav-link {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #333;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.nav-link:hover {
  background-color: #f0f0f0;
  color: #000;
}

/* === RESPONSIVE (HP & Tablet) === */
@media (max-width: 768px) {
  .nav-link {
    padding: 8px 0px;
    font-size: 14px; /* lebih kecil dari default */
  }

  .nav-list {
    justify-content: space-around; /* biar lega di layar kecil */
  }
}

/*==closing-cta===*/
.closing-cta {
  background-color: #fef9f4;
  border-top: 1px solid #eee;
  padding: 32px 16px;
  text-align: center;
  font-family: sans-serif;
}

.cta-container h2 {
  font-size: 22px;
  margin-bottom: 12px;
  color: #b36b00;
}

.cta-container p {
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto 20px;
  color: #444;
}

.cta-button {
  display: inline-block;
  background-color: #ff9900;
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.cta-button:hover {
  background-color: #e68a00;
}

@media (max-width: 600px) {
  .cta-container h2 {
    font-size: 18px;
  }
  .cta-container p {
    font-size: 14px;
  }
  .cta-button {
    padding: 10px 16px;
    font-size: 14px;
  }
}

section p a, i a {
  /*font-family: Georgia, "Times New Roman", serif;*/
  font-size: 1rem;
  color: #1a0dab; /* biru khas link */
  text-decoration: none; /* tanpa underline default */
  border-bottom: 1px solid rgba(26, 13, 171, 0.3); /* garis tipis ala Medium */
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

section p a:hover {
  color: #000; /* berubah jadi hitam saat hover */
  border-bottom-color: #000; /* garis ikut gelap */
}

section p i {
  font-style: normal; /* hilangkan italic default <i> agar lebih bersih */
}