/***** DESKTOP VERSION *****/
	.header-primary {
		position            : fixed; /* agar posisi header tetap di atas*/
		background-color    : var(--color-brand-3);
		--font-color        : var(--color-brand-1);
		width               : 100%;
		z-index             : 1000;
		transition          : background-color 500ms; /* gunakan sesuai kebutuhan */
		/* box-shadow          : 0 2px 5px rgba(0, 0, 0, 0.1); gunakan sesuai kebutuhan */
	}
	.header-primary-admin{
		/*position            : fixed;  agar posisi header tetap di atas
		background-color    : var(--color-brand-3);*/
		--font-color        : var(--color-brand-1);
		width               : 100%;
		z-index             : 1000;
		transition          : background-color 500ms; /* gunakan sesuai kebutuhan */
		/* box-shadow          : 0 2px 5px rgba(0, 0, 0, 0.1); gunakan sesuai kebutuhan */
	}

	.header-wrapper,.header-wrapper-admin{
		display        : flex;
		align-items		: center;
	}
	.header-wrapper{
		justify-content	: space-between;
		padding-block		: var(--size-500);
	}
	.header-wrapper-admin{
		justify-content	: center;
		padding-block		: var(--size-700);
	}
	
	.header-logo{
		position	: relative;
		width		: 10rem;
		fill		: var(--color-grey-light);
	}
	.header-logo:hover{
		fill		: var(--color-brand-2);
	}

	.header-navigation{
		display     : flex;
		align-items : center;
		/* flex-wrap   : wrap; */
		/* gap         : 0 2rem; */
		/*height		: 100%; mengatur tinggi navigasi */
	}
	.header-mobile{
		display : none;
	}

	.header-mobile-logo{
		opacity			: 0;
		pointer-events	: none;  /* mencegah gambar bisa di klik */
	}
	.nav-list {
		display		: flex;
		align-items	: center;
		position		: relative; /* posisi berpengaruh pada megamenu atau singlemenu */
		height		: 100%;
	}
	@media(min-width:965px){
			.nav-list-megamenu{
			position	: static;
		}
	}
	
	.nav-link {
		display		: flex;
		align-items	: center;
		gap			: 0.3rem;
		padding		: 0 1rem;
		height		: 100%;
		transition	: background-color 0.3s ease, color 0.3s ease;
	}
	.nav-link.active-link{
		color					: var(--color-grey-modern);
	}
	.mobile-copyright{
		display	: none;
	}
	.arrow-icon {
		transition	: transform 0.3s ease;
      stroke		: white;
	}
	.arrow-icon.open{
		transform	: rotate(-180deg);
	}

	.megamenu{
		display				: block;
		position				: absolute;
		top					: 100%; 	/* posisi ada dibawah navigasi utama */
		left					: 0; 		/* posisi dibawa ke sisi kiri layar */
		width					: 100%; 	 /*lebar dibuat 100% memenuhi layar */
		background-color	: var(--color-grey-light);
      box-shadow			: 0 8px 16px rgba(0,0,0,0.2);
		z-index				: 100;
		overflow				: hidden;

		opacity				: 	0;
		visibility			: 	hidden;
		max-height			: 	0; 
      padding-top			: 	0;
      padding-bottom		: 	0;
      transition			:	max-height 0.6s cubic-bezier(0.23, 1, 0.32, 1),
									padding-top 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
									padding-bottom 0.6s cubic-bezier(0.23, 1, 0.32, 1),
									opacity 0.4s ease, 
									visibility 0s linear 0.6s; 						
	}
	.megamenu.active{
		opacity				: 	1;
		visibility			: 	visible;
		max-height			: 	max-content; 
		transition			:	max-height 0.6s cubic-bezier(0.23, 1, 0.32, 1),
									padding-top 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
									padding-bottom 0.6s cubic-bezier(0.23, 1, 0.32, 1),
									opacity 0.4s ease,
									visibility 0s linear 0s; 
	}
	.megamenu-content{
		display				: flex;
		flex-wrap			: wrap;
		/* justify-content	: center; PAKAI CLASS TERAPAN di variable.css 
		gap 					: 1rem;*/
	}

	.singlemenu{
		display				: block;
		position				: absolute;
		top					: 51px;
		right					: 0;
		min-width			: max-content;
		background-color	: var(--color-grey-light);
		box-shadow			: 0 8px 16px rgba(0,0,0,0.2);
		z-index				: 100;
		overflow				: hidden;
		
		line-height			: 2;

		opacity				: 	0;
		visibility			: 	hidden;
		max-height			: 	0; 
      padding-top			: 	0;
      padding-bottom		: 	0;
		transition			: 	max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        	padding-top 0.4s ease, padding-bottom 0.4s ease,
                        	opacity 0.3s ease,
                        	visibility 0s linear 0.4s; 
	}
	.singlemenu.active{
		opacity				: 	1;
		visibility			: 	visible;
		max-height			: 	max-content; 
		transition			: 	max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        	padding-top 0.4s ease, padding-bottom 0.4s ease,
                        	opacity 0.3s ease,
                        	visibility 0s linear 0s; 
	}
	.singlemenu .nav-link{
		display	: block;	
	}

	.search-bar{
	--size              : 3rem;
	--padding           : 0.18rem;
	--expanded-width    : 10rem;

	display				: flex;
	justify-content	: flex-end;

	background-color	: var(--color-aksen-3);
	border-radius		: var(--capsul);
	outline				: 1px solid transparent;
	overflow				: hidden;
	/* box-shadow: 0 10px 10px 0 var(--color-grey75); */

	padding: var(--padding);
	margin-inline	: auto;
	width				: var(--size);
	height			: var(--size);
	max-width		: 100%;
	transition		: width 0.5s;/*, outline 0.5s; */
}
.search-bar:focus-within{
   width:var(--expanded-width);
   /* outline: 1px solid red; */
}
.search-input{
	font-size			: 18px;
	color					: var(--color-grey25);
	background-color	: transparent;
	border				: none;
	outline				: none;
	flex					: auto;
	margin-inline		: 1rem;
	padding-left		: 5rem;
	opacity				: 0;
	transition			: opacity 0.5s;
}
.search-input::placeholder{
	padding-left:250px;
}
.search-bar:focus-within .search-input{
   opacity	: 1;
}
.search-submit{
	flex					: none;
	display				: flex;
	justify-content	: center;
	align-items			: center;
	font-size			: 18px;
	color					: var(--color-white);
	background-color	: var(--color-brand-1);
	border-radius		: 50%;
	border				: none;
	width					: calc(var(--size) - var(--padding) - var(--padding));
	cursor 				: pointer;
	aspect-ratio		: 1;
   transition  		: all 0.5s;
}
.search-submit:hover{
   background-color	: var(--color-brand-2);
}
.icon-search-expand{
	aspect-ratio    : 1;
	transition      : all 0.5s;
	transform       : translateX(0% );
	fill            : var(--color-white);
	height          : 1rem;
}
/***** DESKTOP VERSION *****/

/***** MOBILE VERSION *****/
@media(width < 965px){

	.header-mobile-logo{
		padding: 1rem;
	}
	/* navigasi mobile saat diklik */
	.header-navigation{
		position        	: fixed;
		top					: 0;
		left					: 0;
		width					: 100svw;
		height				: 100svh;
		background-color	: var(--color-grey-light);
		flex-direction  	: column;
		align-items			: center;
		justify-content	: flex-start;
		text-align			: left;
		inset					: 0 0 0 0%; /* untuk mengatur lebar menu 0% = full atau 30% terbuka sedikit*/
		clip-path			: circle(10px at 120%-10%);
		-webkit-clip-path	: circle(10px at 120%-10%); 
		transition			: all 0.50s ease-out;
		pointer-events		: none;
		/* z-index				: 1001; */
	}
	.header-navigation .nav-link{
		padding				: 1rem;
		width					: 100%;
		height				: auto;
		/* justify-content	: flex-start; SENGAJA DI TUTUP SUPAYA ICON PANAH RATA KANAN LAYAR */
		text-align			: left;
	}

	/* efek lingkaran keluar menutupi layar */
	.header-navigation[data-visible="true"]{
		clip-path			: circle(3500px at 120%-10%); 
		-webkit-clip-path	: circle(3500px at 120%-10%);
		pointer-events		: auto;
		scrollbar-width	: none;
		overflow-y			: scroll;
	}

	/* link navigasi terbuka */
	.header-navigation[data-visible="true"] .nav-list{
		opacity			: 0; /* aturan awal sengaja tidak ditampilkan */
		animation		: fadeIn var(--bezier) 750ms forwards; /* teks ditampilkan perlahan */
	}
	@keyframes fadeIn {
		0%  {   opacity : 0;    transform: translateX(200px);}
		75% {   opacity : 0.2;}
		100%{   opacity : 1;    transform: translateX(0%);}
	}
	.header-navigation[data-visible="true"] li:nth-child(1){
		animation-delay	: 0ms;
		border				: none;
		margin-top			: -0.25rem;
	}
	.header-navigation[data-visible="true"] li:nth-child(2){animation-delay: 100ms;}
	.header-navigation[data-visible="true"] li:nth-child(3){animation-delay: 200ms;}
	.header-navigation[data-visible="true"] li:nth-child(4){animation-delay: 300ms;}
	.header-navigation[data-visible="true"] li:nth-child(5){animation-delay: 400ms;}
	.header-navigation[data-visible="true"] li:nth-child(6){animation-delay: 500ms;}
	.header-navigation[data-visible="true"] li:nth-child(7){animation-delay: 600ms;}
	.header-navigation[data-visible="true"] li:nth-child(8){animation-delay: 700ms;}
	.header-navigation[data-visible="true"] li:last-child{
		animation-delay	: 800ms;
		border				: none;
		margin-top			: auto;
	}
	
	/* link navigasi tertutup */
	.header-navigation[data-visible="false"] .nav-list{
		opacity		: 1; /* aturan awal sengaja ditampilkan */
		animation	: fadeOut var(--bezier) 500ms forwards; /* teks dihilangkan perlahan */
	}
	@keyframes fadeOut {
		0%  {   opacity : 1;    transform: translateX(0%);}
		75% {   opacity : 0;}
		100%{   opacity : 0;    transform: translateX(500px);}
	} 
	.header-navigation[data-visible="false"] li:last-child{
		animation-delay	: 0ms;
		border				: none;
		margin-top			: auto;
	}
	.header-navigation[data-visible="false"] li:nth-child(8){animation-delay: 0ms;}
	.header-navigation[data-visible="false"] li:nth-child(7){animation-delay: 50ms;}
	.header-navigation[data-visible="false"] li:nth-child(6){animation-delay: 100ms;}
	.header-navigation[data-visible="false"] li:nth-child(5){animation-delay: 200ms;}
	.header-navigation[data-visible="false"] li:nth-child(4){animation-delay: 400ms;}
	.header-navigation[data-visible="false"] li:nth-child(3){animation-delay: 600ms;}
	.header-navigation[data-visible="false"] li:nth-child(2){animation-delay: 800ms;}
	.header-navigation[data-visible="false"] li:nth-child(1){
		animation-delay	: 1000ms;
		border				: none;
		margin-top			: -0.25rem;
	}
	
	/* delay untuk menutup navigasi */
	.header-navigation[data-visible="false"]{
		transition-delay: 350ms; 
	}

	.header-navigation .nav-list-megamenu,
	.header-navigation .nav-list-singlemenu{
		position	: relative; /* PERHATIKAN POSITION */
	}

	/* Saat megamenu & singlemenu diklik - GANTI position jadi static supaya bisa dorong ke bawah layar */
	.header-navigation .megamenu,
	.header-navigation .singlemenu{
		display				: block;
		position				: static; /* PERHATIKAN POSITION */
		width					: 100%;
		box-shadow			: none;
		background-color	: var(--color-brand-3);
		max-height			: 0;
		overflow				: hidden;
		transition			: 	max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
									padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
									padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
		padding-left		: 0; 
		padding-right		: 0; 
		padding-top			: 0;    
		padding-bottom		: 0; 
	}

	.header-navigation .megamenu.active,
	.header-navigation .singlemenu.active {
		max-height		: max-content;
		padding-top		: 20px;
		padding-bottom	: 20px;
	}

	.header-navigation .singlemenu .nav-link{
		padding-left	: 2rem;
		line-height		: 0.5;
	}

	.header-navigation .megamenu-content{
		/*display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 100%;*/

		display						: grid;
		grid-template-columns	: repeat(auto-fit, minmax(200px, 1fr));
		padding-inline				: 2rem;
		gap							: 2rem;
	}

	.nav-list {
		width				: 100%;
		border-bottom	: 1px solid var(--color-aksen-2);
		height			: auto;
		display			: flex;
		flex-direction	: column;
		align-items		: stretch;
	}
	
	.nav-link{
		display				: flex;
		justify-content	: space-between;
		align-items			: center;
	}
	.nav-link.active-link{
		background-color	: var(--color-grey75);
	}
	
	.header-mobile{
		display     : block;
		cursor      : pointer;
		position    : relative;
	}
	.mobile-copyright{
		font-size: var(--font-size-100);
	}
	.header-mobile div {transition  : all 0.3s ease-out;}

	.header-mobile[aria-expanded="true"] .bar:nth-child(1){
		border-top-left-radius  : var(--radius-100);
		border-top-right-radius : var(--radius-100);
		transform               : rotate(45deg) translate(-3px,-5px);
		background-color        : var(--color-brand-1);
	}
	.header-mobile[aria-expanded="true"] .bar:nth-child(2){
		/* opacity: 0;
		transform: all 0.1s ease-in; PAKAI INI JIKA WARNA BACKGROUND BERBEDA*/
		display : none;
	}
	.header-mobile[aria-expanded="true"] .bar:nth-child(3){
		border-bottom-left-radius   : var(--radius-100);
		border-bottom-right-radius  : var(--radius-100);
		transform                   : rotate(-45deg) translate(-2px,5px);
		background-color            : var(--color-brand-1);
	}
	.header-mobile[aria-expanded="true"] .header-mobile-wrapper{
		transform   : scale(0.69);
	}
	.bar{
		background-color    : var(--color-grey-light);
		margin              : 0.2rem auto;
		height              : 0.35rem;
		width               : 2rem;
	}
	.bar:nth-child(1){border-top-left-radius      : var(--radius-100);}
	.bar:nth-child(2){background-color            : var(--color-grey-light);}
	.bar:nth-child(3){border-bottom-right-radius  : var(--radius-100);}
}
/***** MOBILE VERSION *****/