/* ============================================================
   Mobile-first overrides — Muhammad Ilmi Yahya Portfolio
   Load after style.css
   ============================================================ */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	max-width: 100%;
}

body {
	-webkit-tap-highlight-color: rgba(255, 81, 126, 0.12);
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
	position: relative;
}

/* Cegah geser horizontal di semua section */
.port_bannerbg_wrapper,
.port_banner_wrapper,
.port_sec_warapper,
.port_sidebar_wrapper {
	max-width: 100%;
}

.port_bannerbg_wrapper,
.port_sec_warapper {
	overflow-x: hidden;
}

/* Role line — hanya tampil di mobile (ganti animasi ketik) */
.banner_role {
	display: none;
}

@media (min-width: 768px) {
	.banner_name_mobile {
		display: inline;
	}
}

/* Bottom navigation */
.mobile_bottom_nav {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 -6px 28px rgba(83, 107, 149, 0.12);
}

.mobile_bottom_nav ul {
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile_bottom_nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 1;
	padding: 6px 4px;
	color: #536b95;
	font-size: 10px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 10px;
	transition: color 0.2s ease, background 0.2s ease;
}

.mobile_bottom_nav a i {
	font-size: 17px;
}

.mobile_bottom_nav a.active,
.mobile_bottom_nav a:hover {
	color: #ff517e;
	background: rgba(255, 81, 126, 0.09);
}

/* Certificate filter scroll */
.port_project_gallery .gallery_nav ul {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	justify-content: flex-start;
	gap: 8px;
	padding: 0 4px 10px;
	scrollbar-width: none;
}

.port_project_gallery .gallery_nav ul::-webkit-scrollbar {
	display: none;
}

.port_project_gallery .gallery_nav ul li {
	flex: 0 0 auto;
	margin: 0;
}

.port_project_gallery .gallery_nav ul li a {
	white-space: nowrap;
	padding: 10px 16px;
	border-radius: 30px;
	background: #f0f4fa;
	font-size: 13px;
}

/* ========== Tablet & mobile — perbaiki overflow horizontal ========== */
@media (max-width: 991px) {
	.port_banner_wrapper,
	.port_sec_warapper {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.port_banner_wrapper .banner_content {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 100px !important;
		max-width: 100% !important;
	}

	/* Animasi awal banner tidak boleh dorong layout ke samping */
	.port_banner_wrapper .bannner_leftpart,
	.port_banner_wrapper .bannner_leftpart.mbannner_leftpart {
		transform: none !important;
		-webkit-transform: none !important;
		opacity: 1 !important;
	}

	.port_testimonial_setions .port_test_data,
	.port_testimonial_setions .testimonial_details_box {
		width: 100% !important;
		max-width: 100% !important;
	}

	.row {
		margin-left: 0;
		margin-right: 0;
	}

	.port_heading {
		font-size: 28px;
	}

	.orange_text_section {
		padding: 48px 18px !important;
		overflow: hidden;
	}

	.orange_text_section h2 {
		font-size: clamp(15px, 4.2vw, 20px) !important;
		line-height: 1.45 !important;
		letter-spacing: 0.6px !important;
		padding: 0 !important;
		white-space: normal !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}

	/* Menu hamburger di atas, Unduh CV di bawahnya */
	.port_togglebox {
		top: 12px !important;
		right: 14px !important;
		z-index: 10002 !important;
	}

	.download_cv_fixed {
		top: 46px !important;
		right: 12px !important;
		left: auto !important;
		bottom: auto !important;
		z-index: 10001 !important;
	}

	/* Tombol Unduh CV — ringkas di mobile (bukan ukuran desktop) */
	.download_cv_fixed .portfolio_btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: none !important;
		height: 32px !important;
		min-height: 0 !important;
		line-height: 1 !important;
		padding: 0 12px !important;
		margin: 0 !important;
		font-size: 11px !important;
		border-radius: 6px !important;
		box-shadow: 0 2px 8px rgba(252, 193, 85, 0.4) !important;
		overflow: hidden !important;
	}

	.download_cv_fixed .portfolio_btn span {
		position: static !important;
		display: inline !important;
		line-height: 1 !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		transform: none !important;
	}

	.download_cv_fixed .portfolio_btn span.second_text {
		display: none !important;
	}

	.download_cv_fixed .portfolio_btn:hover span.first_text {
		transform: none !important;
	}
}

/* ========== Desktop — nama & teks hero lebih ke kiri ========== */
@media (min-width: 992px) {
	.port_bannerbg_wrapper .container-fluid > .row {
		justify-content: flex-start !important;
	}

	.port_banner_wrapper .banner_content {
		padding-left: 48px;
		padding-right: 32px;
		max-width: 580px;
	}

	.banner_content_col {
		flex: 0 0 auto;
		width: auto;
		max-width: 580px;
	}

	.bannner_leftpart .banner_name {
		margin-left: 0;
	}

	.bannner_leftpart h2.stranger:after {
		width: 220px;
	}
}

/* ========== Mobile ========== */
@media (max-width: 767px) {
	body {
		padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}

	.mobile_bottom_nav {
		display: block;
	}

	.container,
	.container-fluid {
		padding-left: 18px;
		padding-right: 18px;
		max-width: 100%;
	}

	/* ---- Hero / Banner ---- */
	.port_bannerbg_wrapper {
		background-size: cover;
		background-position: center top;
	}

	.port_banner_wrapper {
		margin-left: 0 !important;
		overflow: hidden;
	}

	.port_banner_wrapper .row {
		margin-left: 0;
		margin-right: 0;
	}

	.port_banner_wrapper .banner_content {
		padding: 96px 0 40px !important;
		text-align: center;
		width: 100%;
		max-width: 100%;
	}

	.port_banner_wrapper .bannner_leftpart,
	.port_banner_wrapper .bannner_leftpart.mbannner_leftpart {
		transform: none !important;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	/* Foto profil dalam kartu hero */
	.banner_mobile_hero {
		display: block;
		margin: 0 auto 22px;
		max-width: 220px;
	}

	.banner_mobile_hero img {
		width: 100%;
		height: auto;
		border-radius: 20px;
		box-shadow: 0 16px 40px rgba(18, 194, 204, 0.2);
		object-fit: cover;
		aspect-ratio: 4 / 5;
	}

	.bannner_leftpart h2.stranger {
		display: inline-block;
		font-size: 15px;
		padding: 10px 20px 8px;
		margin: 0 auto 14px;
		text-align: center;
	}

	.bannner_leftpart h2.stranger:after {
		width: 100%;
		left: 0;
		right: 0;
		transform: none;
	}

	.bannner_leftpart .banner_name {
		font-size: 36px !important;
		line-height: 1.15 !important;
		margin: 0 auto 12px !important;
		text-align: center;
		word-break: break-word;
	}

	.banner_br_desktop {
		display: none;
	}

	.banner_name_mobile {
		display: block;
	}

	p.banner_pera {
		display: none !important;
	}

	.banner_role {
		display: block;
		font-size: 17px;
		font-weight: 600;
		color: #222;
		font-family: 'Josefin Sans', sans-serif;
		margin: 0 auto 8px;
		padding: 0 12px;
		line-height: 1.5;
		max-width: 100%;
	}

	.banner_typingtext {
		display: none !important;
	}

	/* ---- Tentang Saya ---- */
	.port_about_setions {
		padding: 48px 0 !important;
	}

	.selfintro_section .row {
		flex-direction: column;
		align-items: center;
	}

	.about_photo_col {
		width: 100%;
		max-width: 340px;
		margin: 0 auto 28px;
		padding: 0 8px;
	}

	.selfintro_section .about_leftsection {
		max-width: 100%;
		margin: 0 auto;
	}

	.selfintro_section .about_leftsection:after {
		left: 0;
		right: 0;
		width: 92%;
		margin: 0 auto;
		top: 16px;
	}

	.about_leftsection .img_warapper {
		border-radius: 12px;
		overflow: hidden;
		max-height: 360px;
	}

	.about_leftsection .img_warapper img {
		width: 100%;
		height: auto;
		object-fit: cover;
		object-position: top center;
	}

	.selfintro_section .right_section {
		width: 100%;
		text-align: center;
		padding: 0 4px;
	}

	.right_section h2.about_tophead {
		font-size: 24px;
		line-height: 1.35;
	}

	.selfintro_section .right_section p.about_deatils,
	.selfintro_section .right_section p {
		font-size: 15px;
		line-height: 1.75;
		text-align: left;
	}

	.signature_box {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.signature_box .signature {
		margin-left: 0;
	}

	.port_heading_wrapper.text-center,
	.port_sub_heading_wrapper {
		padding-left: 8px;
		padding-right: 8px;
	}

	/* ---- Sections umum ---- */
	.port_sec_warapper {
		margin-left: 0 !important;
		width: 100% !important;
	}

	.education_section,
	.experience_section,
	.services_section,
	.projects_section,
	.blog_section,
	.skill_logo_section {
		padding-left: 0;
		padding-right: 0;
	}

	.education_mright,
	.education_mleft {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* ---- Riwayat Pendidikan — kartu vertikal ---- */
	.education_section {
		padding: 48px 12px 36px !important;
	}

	.education_main_wrapper {
		padding-left: 8px;
		padding-right: 4px;
	}

	.education_main_wrapper:after {
		display: block !important;
		left: 18px !important;
		right: auto !important;
		width: 3px !important;
		margin: 0 !important;
		top: 8px;
		bottom: 40px;
		background: linear-gradient(180deg, #ff517e 0%, #ffc455 50%, #ff754a 100%) !important;
	}

	.education_main_wrapper .education_box {
		margin-bottom: 32px !important;
		padding-left: 8px;
	}

	.education_main_wrapper .education_box .row {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 0;
		margin-right: 0;
	}

	.education_main_wrapper .education_box .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.education_firsrtbox .education_left,
	.education_secondbox .education_left,
	.education_thirdbox .education_left,
	.education_mleft.education_left,
	.education_mleft.education_right {
		float: none !important;
		margin: 0 auto 14px !important;
		text-align: center;
		width: 100%;
	}

	.education_mright,
	.education_mright.education_right,
	.education_mright.education_left {
		float: none !important;
		margin: 0 !important;
		max-width: 100% !important;
		width: 100%;
		transform: none !important;
	}

	.education_mright:hover {
		transform: none !important;
	}

	.education_section .edu_mainyear h1 {
		width: 104px !important;
		height: 104px !important;
		max-width: none;
		line-height: 1.2 !important;
		font-size: 18px !important;
		margin: 0 auto !important;
		border-width: 7px !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.education_section .edu_mainyear .year_text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		line-height: 1.2 !important;
		font-size: 17px !important;
		padding: 8px;
	}

	.education_section .edu_mainyear .year_text small {
		font-size: 11px;
		margin-top: 2px;
	}

	.education_box .edu_mainyear h1:after,
	.education_box .edu_mainyear h1:before,
	.education_box .edu_mainyear:after,
	.education_firsrtbox .edu_mainyear h1:after,
	.education_secondbox .edu_mainyear h1:after,
	.education_thirdbox .edu_mainyear h1:after {
		display: none !important;
	}

	.education_mright .education_rinfo {
		padding: 16px 14px 18px !important;
		border-radius: 14px;
		width: 100%;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
	}

	.education_mright .prt_rightside_title,
	.education_right .prt_rightside_title,
	.education_left .prt_rightside_title,
	.prt_rightside_title {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		width: 100% !important;
		margin: 0 0 12px !important;
		box-shadow: none !important;
		text-align: left;
	}

	.education_mright .left_title_box {
		display: flex;
		align-items: stretch;
		width: 100%;
		border-radius: 8px;
		overflow: hidden;
	}

	.prt_rightside_title .left_title {
		flex: 0 0 44px;
		width: 44px !important;
		max-width: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.prt_rightside_title .right_title {
		flex: 1;
		width: auto !important;
		min-width: 0;
	}

	.prt_rightside_title .right_title h4 {
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
		font-size: 14px;
		line-height: 1.35;
		padding: 10px 12px;
	}

	.prt_rightside_title .left_title h4 {
		padding: 10px 0;
		font-size: 16px;
	}

	.education_mright .left_title_box:before,
	.education_firsrtbox .left_title_box:before,
	.education_secondbox .left_title_box:before {
		display: none !important;
	}

	h3.education_place {
		font-size: 17px !important;
		margin: 10px 0 8px !important;
		line-height: 1.35;
	}

	.education_rinfo p {
		font-size: 14px;
		line-height: 1.7;
		margin-bottom: 0;
		display: block;
		-webkit-line-clamp: unset;
		overflow: visible;
	}

	.education_secondbox .newyork-responsive-screennone {
		display: none !important;
	}

	.education_secondbox .newyork-desktop-screennone {
		display: block !important;
		order: -1;
	}

	.port_experience_setions .exprince_box {
		margin-bottom: 20px;
	}

	.port_services_box_wrapper {
		margin-bottom: 24px;
	}

	.port_blog_setions .port_blog_mainbox {
		margin-bottom: 22px;
	}

	.port_blog_setions .port_blog_contentbox {
		padding: 20px 16px;
	}

	.port_blog_setions .project_activity_img img {
		width: 100%;
		min-height: 200px;
		object-fit: cover;
	}

	.port_blog_setions .left_content .row,
	.port_blog_setions .right_content .row {
		flex-direction: column;
	}

	.port_blog_setions .left_content .col-md-6,
	.port_blog_setions .right_content .col-md-6 {
		order: unset !important;
		max-width: 100%;
		flex: 0 0 100%;
	}

	.certificate_img img {
		height: auto;
		max-height: 260px;
		object-fit: contain;
	}

	.port_project_gallery .grid-item {
		width: 100% !important;
		padding: 0 4px 20px;
	}

	/* ---- Kontak ---- */
	.contact_map_inner {
		min-height: 0 !important;
	}

	.contact_map_background {
		height: 160px !important;
		opacity: 0.25;
	}

	#world-map {
		height: 160px !important;
	}

	.contact_form_front {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		max-width: 100% !important;
		margin: 0;
		padding: 0 0 20px;
	}

	.contact_custom_box {
		padding: 26px 18px !important;
	}

	.contact_info_custom .contact_info_item {
		margin-bottom: 20px;
	}

	.port_togglebox {
		width: 40px;
		height: 28px;
	}

	.port_togglebox span {
		background: #ff517e;
		border-radius: 2px;
		height: 3px;
	}

	.port_sidebar_wrapper {
		width: 82px;
	}

	.port_menu_open .port_sidebar_wrapper {
		box-shadow: 6px 0 32px rgba(0, 0,  0, 0.14);
	}

	.profile_circle {
		width: 52px !important;
		height: 52px !important;
	}

	.bottom_top {
		bottom: calc(82px + env(safe-area-inset-bottom, 0px));
		right: 14px;
		width: 44px;
		height: 44px;
	}

	.preloader_inner {
		padding: 20px;
	}

	.preloader_name {
		font-size: 18px;
	}

	.copy_right_wrapper {
		padding: 0 16px 20px;
	}

	/* Jangan sembunyikan info profil di layar sangat kecil */
	.personal_details h1.ps_name,
	.personal_details p.ps_designation,
	.personal_details ul.social-links {
		display: block !important;
	}

	.selfintro_section .left_deatils {
		padding: 20px 16px;
	}
}

/* ========== Small phones ========== */
@media (max-width: 480px) {
	.port_banner_wrapper .banner_content {
		padding-top: 80px !important;
	}

	.banner_mobile_hero {
		max-width: 200px;
	}

	.bannner_leftpart .banner_name {
		font-size: 30px !important;
	}

	.banner_role {
		font-size: 15px;
	}

	.port_heading {
		font-size: 22px;
	}

	.port_sub_heading {
		font-size: 15px;
	}

	.about_photo_col {
		max-width: 100%;
	}

	.certificate_img img {
		max-height: 220px;
	}

	.mobile_bottom_nav a span {
		font-size: 9px;
	}
}

@media (max-width: 380px) {
	.bannner_leftpart .banner_name {
		font-size: 26px !important;
	}

	.download_cv_fixed .portfolio_btn {
		height: 28px !important;
		padding: 0 10px !important;
		font-size: 10px !important;
	}

	.download_cv_fixed .portfolio_btn span {
		font-size: 10px !important;
	}
}

/* ========== Halaman proyek ========== */
@media (max-width: 767px) {
	.project_page_wrapper {
		padding: 72px 16px 32px;
	}

	.project_header {
		margin-bottom: 36px;
		padding: 0 8px;
	}

	.project_header .small_title::before,
	.project_header .small_title::after {
		width: 24px;
	}

	.project_header h1 {
		font-size: 26px;
	}

	.project_header p {
		font-size: 15px;
	}

	.project_card {
		border-radius: 14px;
		margin-bottom: 24px;
	}

	.project_card .row {
		flex-direction: column;
	}

	.project_card_img {
		height: 210px;
	}

	.project_card_content {
		padding: 20px 18px;
	}

	.project_card_content h2 {
		font-size: 20px;
	}

	.project_page_wrapper .download_cv_fixed {
		top: 12px;
		right: 12px;
	}
}