/* =====================================================================
   HAEI Roadmap / Timeline — RoadMap.css
   Struktur HTML:
     <div id="roadmap" [class="horizontal"]>
        <div class="roadmap-stop left|right">
           <div class="roadmap-year">1977</div>
           <div class="roadmap-item"><div class="roadmap-panel">…</div></div>
        </div>
        …
     </div>
   Mode default = VERTIKAL (garis tengah tegak, panel zigzag kiri-kanan).
   Tambah class .horizontal untuk mode MENDATAR (gaya aigens.com).
   ===================================================================== */

/* ---------- WADAH ---------- */
#roadmap {
	position: relative;
	max-width: 900px;
	margin: 0 auto 20px;
	padding: 10px 0;
}
/* Garis tengah tegak */
#roadmap::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	background: #0D2B6E;
	border-radius: 2px;
	z-index: 0;
}

/* ---------- SATU TONGGAK (year + panel) ---------- */
.roadmap-stop {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	margin: 10px 0;
	min-height: 120px;
}
/* Bulatan tahun tepat di garis tengah */
.roadmap-year {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 92px; height: 92px; line-height: 84px;
	text-align: center;
	background: #fff;
	border: 4px solid #0D2B6E;
	border-radius: 50%;
	color: #0D2B6E;
	font-size: 1.1rem; font-weight: 800;
	z-index: 3;
}
/* Panel: setengah lebar, di sisi kiri atau kanan garis */
.roadmap-item { width: 50%; display: flex; }
.roadmap-stop.left  .roadmap-item { justify-content: flex-end;   padding-right: 70px; }
.roadmap-stop.right .roadmap-item { justify-content: flex-start; padding-left: 70px; margin-left: 50%; }

.roadmap-panel {
	position: relative;
	background: #fff;
	border: 1px solid #e3e8f0;
	padding: 16px 18px;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(13,43,110,.10);
	max-width: 340px;
	text-align: left;
	transition: transform .25s ease, box-shadow .25s ease;
}
.roadmap-panel:has(.roadmap-img) { cursor: pointer; }
.roadmap-panel:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13,43,110,.16); }

/* Konektor mendatar dari panel ke garis tengah */
.roadmap-panel::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 52px; height: 3px;
	background: #0D2B6E;
	transform: translateY(-50%);
	z-index: 0;
	display: none;
}
.roadmap-stop.left  .roadmap-panel::after { right: -52px; display: block; }
.roadmap-stop.right .roadmap-panel::after { left: -52px; display: block; }

.roadmap-panel-title { color: #0D2B6E; font-size: 1.02rem; margin-bottom: 4px; }
.roadmap-panel-text  { display: none; } /* hanya dipakai lightbox */
.img-wraping         { margin-bottom: 10px; border-radius: 6px; overflow: hidden; }
.img-wraping img     { width: 100%; height: auto; display: block; }
#roadmap .causale    { color: #5a6474; }
#roadmap .text-muted { color: #7a808a; }

/* =====================================================================
   MODE HORIZONTAL (kiri → kanan, gaya aigens.com)
   ===================================================================== */
#roadmap.horizontal {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	max-width: 100%;
	min-height: 460px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 20px 12px;
	gap: 0;
	scroll-snap-type: x proximity;
}
/* Garis tengah jadi MENDATAR */
#roadmap.horizontal::before {
	top: 50%; bottom: auto;
	left: 0; right: 0;
	transform: translateY(-50%);
	width: 100%; height: 4px;
}
/* Tiap tonggak jadi kolom vertikal ramping */
#roadmap.horizontal .roadmap-stop {
	flex: 0 0 260px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 260px;
	margin: 0;
	min-height: 420px;
	scroll-snap-align: center;
}
/* Bulatan tahun kembali statis di tengah kolom (pada garis) */
#roadmap.horizontal .roadmap-year {
	position: relative;
	left: auto; top: auto;
	transform: none;
	flex: 0 0 auto;
	z-index: 3;
}
/* Panel penuh lebar kolom, tanpa offset kiri/kanan */
#roadmap.horizontal .roadmap-item {
	width: auto; max-width: 240px;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
/* Ganjil (left) di ATAS garis, genap (right) di BAWAH garis */
#roadmap.horizontal .roadmap-stop.left  .roadmap-item { bottom: calc(50% + 60px); }
#roadmap.horizontal .roadmap-stop.right .roadmap-item { top: calc(50% + 60px); }
#roadmap.horizontal .roadmap-panel { max-width: 230px; }
/* Konektor jadi TEGAK dari panel ke garis tengah */
#roadmap.horizontal .roadmap-panel::after {
	top: auto; left: 50%; right: auto;
	width: 3px; height: 40px;
	transform: translateX(-50%);
}
#roadmap.horizontal .roadmap-stop.left  .roadmap-panel::after { bottom: -40px; top: auto; }
#roadmap.horizontal .roadmap-stop.right .roadmap-panel::after { top: -40px; bottom: auto; }
#roadmap.horizontal::-webkit-scrollbar { height: 8px; }
#roadmap.horizontal::-webkit-scrollbar-thumb { background: #c9d6ee; border-radius: 8px; }

.roadmap-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	overflow: hidden;
	z-index: 9999;
}

body.no-scroll {
	overflow: hidden;
	height: 100vh;
}

.roadmap-modal-body {
	display: flex;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}

.image-area {
	flex-basis: 66.66%;
	position: relative;
	background: #000;
	display: flex;
	justify-content: center;
	align-items: center;
}

.roadmap-modal-image {
	height: 100vh;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
	margin: auto;
	box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.roadmap-modal-content {
	flex-basis: 33.33%;
	height: 100vh;
	background-color: #424a52;
	color: #fff;
	padding: 20px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

.roadmap-modal-title {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
}

.roadmap-modal-text {
	text-align: justify;
}

.close-btn {
	position: absolute;
	left: 30px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
	z-index: 10000;
	opacity: 0.5;
}

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

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  color: white;
  z-index: 10;
  opacity: 0.5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3); /* Tambahkan background agar tombol lebih terlihat */
  border-radius: 50%; /* Membuat tombol bulat */
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.carousel-control-prev {
  left: 10px;
}

.carousel-control-next {
  right: 10px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.6); /* Background lebih gelap saat hover */
}



/* ---------- RESPONSIF ---------- */
@media (max-width: 767px) {
	/* VERTIKAL di mobile: garis pindah ke kiri, panel menumpuk penuh */
	#roadmap:not(.horizontal)::before { left: 24px; }
	#roadmap:not(.horizontal) .roadmap-year {
		left: 24px; width: 60px; height: 60px; line-height: 54px; font-size: .8rem; border-width: 3px;
	}
	#roadmap:not(.horizontal) .roadmap-item,
	#roadmap:not(.horizontal) .roadmap-stop.left .roadmap-item,
	#roadmap:not(.horizontal) .roadmap-stop.right .roadmap-item {
		width: 100%; justify-content: flex-start;
		padding-left: 70px; padding-right: 8px; margin-left: 0;
	}
	#roadmap:not(.horizontal) .roadmap-panel { max-width: 100%; }
	#roadmap:not(.horizontal) .roadmap-stop.left .roadmap-panel::after,
	#roadmap:not(.horizontal) .roadmap-stop.right .roadmap-panel::after {
		left: -46px; right: auto; width: 46px;
	}
	/* HORIZONTAL di mobile: perkecil kolom */
	#roadmap.horizontal .roadmap-stop  { flex-basis: 220px; width: 220px; }
	#roadmap.horizontal .roadmap-panel { max-width: 200px; }
	#roadmap.horizontal .roadmap-year  { width: 74px; height: 74px; line-height: 66px; }
	.roadmap-modal-body {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden; 
	}

	.roadmap-modal-content {
		flex-basis: 100%;
		flex-grow: 1;
		min-height: 0; /* <--- Ini penting dalam flex column */
		overflow-y: auto;
		padding: 20px;
	}

	.image-area {
		height: auto;
		max-height: 40vh; /* Batasi tinggi agar tidak menghabiskan layar */
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.roadmap-modal-image {
		height: 100%;
		max-width: 100%;
		object-fit: contain;
	}
	
	.roadmap-modal-text{
		margin-bottom:20%;		
	}
}