body {
	background: #F5F1EE;
	color: #2b2b2b;
}

/* HERO */
.direktori-detail-hero {
	height: 120px;
	background: linear-gradient(rgba(90,55,40,0.direktori-detail-9), rgba(90,55,40,0.direktori-detail-9)),
              repeating-linear-gradient(
                0deg,
                rgba(255,255,255,0.direktori-detail-05) 0,
                rgba(255,255,255,0.direktori-detail-05) 1px,
                transparent 1px,
                transparent 20px
              ),
              repeating-linear-gradient(
                90deg,
                rgba(255,255,255,0.direktori-detail-05) 0,
                rgba(255,255,255,0.direktori-detail-05) 1px,
                transparent 1px,
                transparent 20px
              );
}

/* CONTAINER */
.direktori-detail-container {
	margin: auto;
	padding-left: 115px;
	padding-right: 115px;
	padding-bottom: 80px;
}

/* HEADER INFO */
.direktori-detail-header {
	margin-top: -60px;
	background: white;
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 6px 14px rgba(0,0,0,0.direktori-detail-06);
}

.direktori-detail-breadcrumb {
	font-size: 12px;
	color: #999;
	margin-bottom: 10px;
}

.direktori-detail-top-info {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.direktori-detail-left-head {
	display: flex;
	gap: 12px;
}

.direktori-detail-avatar {
	width: 50px;
	height: 50px;
	border-radius: 10px;
	background: #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
}

.direktori-detail-title h2 {
	font-family: 'Archivo Black', sans-serif;
	font-size: 20px;
}

.direktori-detail-meta {
	font-size: 13px;
	color: #777;
}

.direktori-detail-tags {
	margin-bottom: 4px;
}

.direktori-detail-tag {
	display: inline-block;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 20px;
	background: #e9f3ea;
	color: #2e7d32;
	margin-right: 5px;
}

/* ACTION BUTTON */
.direktori-detail-actions {
	display: flex;
	gap: 8px;
}

.direktori-detail-btn {
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
	border: 1px solid #ddd;
	background: white;
	cursor: pointer;
}

/* LAYOUT */
.direktori-detail-layout {
	display: flex;
	gap: 20px;
	margin-top: 20px;
}

/* LEFT CONTENT */
.direktori-detail-left {
	flex: 2;
}

.direktori-detail-card {
	background: white;
	padding: 16px;
	border-radius: 12px;
	margin-bottom: 15px;
}

.direktori-detail-card h3 {
	font-size: 15px;
	margin-bottom: 10px;
}

.direktori-detail-card p {
	font-size: 13px;
	color: #555;
	line-height: 1.direktori-detail-6;
}

.direktori-detail-thumb {
	height: 200px;
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
}

.direktori-detail-thumb .direktori-detail-image {
    width: 100%;
    height: 300px; /* tentukan tinggi agar bisa efek crop */
    background: #e6d6cf;
    overflow: hidden;
}

.direktori-detail-thumb .direktori-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ini kunci crop otomatis */
    display: block;
	object-position: bottom; /* bisa: center, top, bottom, left, right */
}

/* TAG LIST */
.direktori-detail-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.direktori-detail-tag2 {
	font-size: 12px;
	background: #eee;
	padding: 6px 10px;
	border-radius: 20px;
}

/* RIGHT SIDEBAR */
.direktori-detail-right {
	flex: 1;
}

.direktori-detail-side-card {
	background: white;
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 15px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.direktori-detail-05);
}

.direktori-detail-side-header {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.direktori-detail-side-header .direktori-detail-avatar {
	width: 40px;
	height: 40px;
}

.direktori-detail-side-title {
	font-size: 14px;
	font-weight: 600;
}

.direktori-detail-badge {
	font-size: 11px;
	background: #e9f3ea;
	padding: 3px 7px;
	border-radius: 6px;
	color: #2e7d32;
}

/* INFO LIST */
.direktori-detail-info {
	font-size: 12px;
	color: #666;
	margin-bottom: 6px;
}

/* BUTTON PRIMARY */
.direktori-detail-btn-primary {
	width: 100%;
	padding: 10px;
	border: none;
	border-radius: 8px;
	background: #8B5E4A;
	color: white;
	margin-top: 8px;
	cursor: pointer;
}

.direktori-detail-btn-outline {
	width: 100%;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #ccc;
	background: white;
	margin-top: 6px;
}

/* SMALL CARD */
.direktori-detail-mini-card {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
}

/* RESPONSIVE */
@media(max-width: 900px) {
	/* CONTAINER */
	.direktori-detail-container {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.direktori-detail-layout {
		flex-direction: column;
	}
	
	.direktori-detail-top-info {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.direktori-detail-actions {
		width: 100%;
	}
}