*{
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}
body {
		background:linear-gradient(135deg, #b3e0d4,#91ccbc);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
		font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', 'sans-serif';
		width: 100%;
		height: auto;
		margin: 0;
	}

.menu-header{
	width:100%;
  	height: 70px;
	z-index:1000;
	background : white;
	padding: 10px 15px 10px;
	margin: 15px 0 0;
	display: flex;	
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.11);
	position:sticky;
	top: 0;
}


.aff-container{
  max-width:1200px;
  margin:auto;
  padding:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* ===== DESKTOP MENU ===== */
.aff-menu{
  display:flex;
  gap:30px;
  align-items:center;
}

.aff-menu a{
  text-decoration:none;
  font-weight:bold;
  font-size:18px;
  color:#03805e;
  position:relative;
  transition:0.3s;
}

.aff-menu a::after{
  content:"";
  position:absolute;
  bottom:-5px;
  left:0;
  width:0;
  height:2px;
  background:#03805e;
  transition:0.3s;
}

.aff-menu a:hover::after{
  width:100%;
}


/* Hover desktop */
@media(min-width:992px){
  .aff-dropdown:hover .aff-submenu{
    display:flex;
  }
}

/* ===== TOGGLE ===== */
.aff-toggle{
  font-size:26px;
  cursor:pointer;
  display:none;
  color:#03805e;
}

.aff-close{
  font-size:22px;
  cursor:pointer;
  display:none;
  color:#03805e;
}

/* ===== OVERLAY ===== */
.aff-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  transition:0.3s;
  z-index:998;
}

.aff-overlay.show{
  opacity:1;
  pointer-events:auto;
}

/* ===== MOBILE ===== */
@media(max-width:991px){

  .aff-toggle{
    display:block;
    position:absolute;
    right:45px;
  }

  /* 🔥 PENTING: paksa rata kiri */
  .aff-menu{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:70%;
    background:#FFF;
    flex-direction:column;
    padding:30px 25px;
    gap:20px;
    transform:translateX(100%);
    transition:0.4s cubic-bezier(.77,0,.18,1);
    z-index:999;

    align-items:flex-start;   /* ⬅️ INI KUNCINYA */
    text-align:left;          /* ⬅️ tambahan pengaman */
  }

  .aff-menu.show{
    transform:translateX(0);
  }

  .aff-menu a{
    color:#03805e;
    font-size:15px;
    width:100%;               /* ⬅️ biar full kiri */
    text-align:left;
  }

  .aff-close{
    display:block;
    align-self:flex-end;
    margin-bottom:20px;
  }

  /* Dropdown container */
  .aff-dropdown{
    width:100%;               /* ⬅️ penting */
  }

  /* Mobile submenu */
  .aff-submenu{
    position:static;
    box-shadow:none;
    background:transparent;
    display:none;
    padding-left:15px;
    width:100%;
  }

  .aff-submenu a{
    color:#03805e;
    font-size:14px;
    padding:8px 0;
    width:100%;
    text-align:left;
  }

  .aff-dropdown.active .aff-submenu{
    display:flex;
  }
}

	#header-menu {
		width: 95%;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		margin: 20px;
		background-color: white;
		border-radius: 15px;
	}
	#header-menu button {
		background: #048b67;
		border-radius: 10px;
		padding: 15px;
		margin: 5px;
		border : none;
		color: white;

	}
	.logo-pengenalan {
		display: flex;
		align-items: center;
		justify-content: start;	
		position:absolute;
		left: 25px;
	}
	.logo-pengenalan img {
		width: 60px;
		object-fit: cover;
		margin-right: 10px;
	}
	.logo-pengenalan span {
		font-size: 25px;
		font-weight: bold;
	}
	.logo-pengenalan a {
		text-decoration: none;
	}
	#section-box {
		background-color: #c2ffef;
		height: auto;
		display: flex;
		flex-direction: column;
		align-content: space-between;
		align-items: start;
		margin: 50px 20px 0;
		width: stretch;
		border-radius: 20px;
	}

	.header-box {
		width: 50%;
		margin: 20px 0 0;
	}
	.content-box {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
		flex-direction: row;
		justify-content: space-between;
		margin-top: -20px;
	}
	.greeting-text {
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: start;
		width: 50%;
		margin: 20px 0 0 40px;
    	z-index: 10;
		height: auto;
	}
	
	.greeting-text h1 {
		font-size: 40px;
	}
	.greeting-text h1,p,h3 {
		color: rgb(65, 64, 64);
	}
	.greeting-text p,h3{
		margin-top: -10px;
	}
	.parent {
		width: auto;
		position:relative;
		height: auto;
		display: flex;
		align-content: end;
		justify-content: flex-end;
		margin : -100px 20px 0px 15px;
		object-fit: cover;
		padding: 0 15px 0;
	}
	.parent img {
		width: 250px;
		height: auto;
		right: 0;
	}
	.download-button {
		display: flex;
		flex-direction: row;
    	flex-wrap: wrap;
		position:relative;
		justify-content: start;
		gap: 10px;
		width: 100%;
	}
	.download-button button {
		background: linear-gradient(135deg, #d26901,#cfc100);
		border: none;
		border-radius: 15px;
		padding: 10px;
		color: white;
		transition: 0.3s;
    	width: auto;
	}
	.download-button button:hover {
		background: linear-gradient(135deg, #d26901,#cfc100);
		border: none;
		border-radius: 15px;
		padding: 10px;
		color: white;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.244);
		transform: translateY(-5px);
		transition: 0.3s;
		cursor: pointer;
    	width: auto;
	}

	.section-box {
		background-color: #c2ffef;
		height: auto;
		display: flex;
		flex-direction: column;
		align-content: space-between;
		align-items: start;
		margin: 50px 20px 20px;
		padding: 0px 20px 20px;
		width: stretch;
		border-radius: 20px;
	}

	.card-box {
		display: flex;
		align-items: center;
		justify-content: center;
		gap : 20px;
	}

	.card-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		text-align: justify;
		gap: 0;
		border-radius: 30px;
		background-color: white;
		padding: 20px 40px 20px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.183);
		transition: 0.3s;
	}

	.card-content h2,i {
		color: #03674c;
		margin-bottom: -10px;
	}
	.card-content h2 {
		font-size: 22px;
	}
	.card-content p {
		color: rgb(27, 27, 27);
		font-size: 14px;
	}
	.card-content i {
		font-size: 40px;
	}

	.card-fitur {
		object-fit: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		gap : 20px;
		width: 100%;
		height: auto;
		overflow-x: auto;

	img {
		width: 200px;
		height: auto;
		border-radius: 20px;
		border: 3px solid rgb(71, 71, 71);
		box-shadow: 0 0 15px rgba(4, 4, 4, 0.468);
	}
	}

	.scroll {
		width: 100%;
		display:flex;
		justify-content: center;
		align-items: center;
		align-content: ;
	}

	@media (max-width : 992px) {
	.greeting-text {
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: start;
		width: auto;
	}
	.content-box {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: end;
		align-content: flex-end;
		position: relative;
	}
	.parent {
		width: auto;
		height: auto;
		display: flex;
		align-content: end;
		justify-content: end;
		align-items: end;
		object-fit: cover;
		align-self: flex-end;
		margin-top: auto;
	}
	#section-box {
		width: stretch;
		padding: 0 20px 0 0 ;
		border-radius: 15px;
		height: auto;
	}
	.header-box {
		width: 100%;
	}
	.card-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap : 20px;
	}
	.scroll {
		width: 100%;
		align-self: center;
	}
	.card-fitur {
		display: flex;
		justify-content: flex-start;
	}
	}