:root {
	--soft-red: #B54545;
	--soft-black: #1A1A1A;
	--soft-black-light: #2A2A2A;
	--primary: #9B1C1C;
	--primary-light: #D45E5E;
	--footer-dark: #101010;
}

body {
	background: #ffffff;
	color: #000000;
}

/* NAVBAR */
.navbar {
	background: var(--primary);
}

.navbar .nav-link {
	color: white !important;
	font-weight: 500;
}

/* DROPDOWN DESKTOP */
.navbar .dropdown-menu {
	background: white;
	border: none;
}

.navbar .dropdown-item {
	color: #000 !important;
	font-weight: 500;
}

.navbar .dropdown-item:hover {
	background: var(--primary-light);
	color: white !important;
}

/* OFFCANVAS DROPDOWN */
.offcanvas .dropdown-menu-dark {
	background: #1A1A1A !important;
	border: none;
}

.offcanvas .dropdown-menu-dark .dropdown-item {
	color: white !important;
}

.offcanvas .dropdown-menu-dark .dropdown-item:hover {
	background: var(--primary-light) !important;
	color: white !important;
}

/* SECTION COLORS */
.soft-red-solid {
	background: var(--soft-red);
	color: white;
}

.soft-black-bg {
	background: linear-gradient(135deg, var(--soft-black), var(--soft-black-light));
	color: white;
}

.card {
	border: none;
	background: white;
	color: black;
}

/* BUTTONS */
.btn-primary {
	background: var(--primary);
	border-color: var(--primary);
	color: white;
	font-weight: 600;
}

.btn-primary:hover {
	background: var(--primary-light);
	border-color: var(--primary-light);
}

.btn-outline-primary {
	border-color: var(--primary);
	color: var(--primary);
}

.btn-outline-primary:hover {
	background: var(--primary);
	color: white !important;
}

/* UPDATE: Hover Tombol Profil Lengkap */
#tentang .btn-light {
	background: #ffffff;
	color: var(--primary);
	font-weight: 600;
	border: 2px solid white;
	transition: all .25s ease-in-out;
}

#tentang .btn-light:hover {
	background: #4d4d4d;
	color: #ffffff;
	border-color: #4d4d4d;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

/* hilangkan focus ring bootstrap */
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active {
	outline: none !important;
	box-shadow: none !important;
}

/* PRIMARY BUTTON */
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
	color: #fff !important;
}

/* PRIMARY HOVER */
.btn-primary:hover {
	background-color: var(--primary-light) !important;
	border-color: var(--primary-light) !important;
}

/* OUTLINE PRIMARY */
.btn-outline-primary,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:focus-visible {
	color: var(--primary) !important;
	border-color: var(--primary) !important;
	box-shadow: none !important;
}

.btn-outline-primary:hover {
	background-color: var(--primary) !important;
	color: white !important;
}

/* bootstrap btn-check fix */
.btn-check:focus + .btn,
.btn-check:active + .btn {
	box-shadow: none !important;
}

/* FOOTER */
.footer-main {
	background: var(--footer-dark);
	color: white;
}

.footer-social-title {
	font-weight: 600;
	margin-top: 15px;
	margin-bottom: 10px;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	color: #fff;
	font-size: 1.2rem;
	margin-right: 10px;
	transition: all .25s ease;
	text-decoration: none;
}

.footer-social a:hover {
	background: var(--primary-light);
	color: #fff;
	transform: translateY(-3px);
}

/* SIZE GAMBAR */
.custom-card-img {
    width: 100%;
    height: 400px; /* Sesuai keinginanmu */
    object-fit: cover; /* Menjaga proporsi agar tidak gepeng */
    object-position: center;
}

.article-card-img {
    width: 100%;
    height: 275px; /* Sesuai keinginanmu */
    object-fit: cover; /* Menjaga proporsi agar tidak gepeng */
    object-position: center;
}