/*
 Theme Name:   GP Purity 7 - GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      1.0
*/

:focus-visible {
	outline: 0px dotted ButtonText;
}

/* Header */
body.contained-content .site-header {
	border-bottom:1px solid #f1f1f1;	
}
.nav-float-right #site-navigation {
	order: 2;
}

.main-navigation .main-nav ul li.cta a {
	border-radius:8px;
	border:1px solid #fff;
	line-height:38px;
	background:var(--accent)!Important;
	margin-left:10px;
	color:#fff!important;
}
.main-navigation .main-nav ul li.cta:hover a,
.main-navigation .main-nav ul li.cta.current-menu-item a {
	background:var(--contrast-2)!Important;
}
.dropdown-menu-toggle .gp-icon { display: unset;}
#generate-slideout-menu .slideout-menu > li {
	border-bottom:1px solid #f1f1f1;
	padding:4px 0;
}
.slideout-navigation.main-navigation .main-nav ul > li > a {
	border: 1px solid rgba(255, 255, 255, 0.1);
	background-color: rgba(255, 255, 255, 0.07);
	border-radius:50px;
}

	/* Desktop Sub */
	.main-navigation ul ul {
		padding-top:10px;
		padding-bottom:10px;
		box-shadow:none;
		border-radius:5px;
		box-shadow: 0px 0px 7px 7px rgba(219,219,219,0.18);
	}
	.main-navigation ul ul li {
		border-bottom:1px solid rgba(255,255,255,0.15);;
	}
	.main-navigation ul ul li:last-child { border-bottom:none;}
	.main-navigation ul ul:before {
		content: " ";
		position: absolute;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 9px solid #fff;
		width: 0;
		top: -7px;
		height: 0;
		left: 18%;
	}

	/* Resize Off Canvas Nav */
	#generate-slideout-menu.offside--right.is-open {
	   transform: translate3d(-320px,0,0);
	}

	#generate-slideout-menu.main-navigation.offside {
		width: 320px;
		padding:20px;
	}

	#generate-slideout-menu.offside--right {
		right: -320px;
	}

	.slideout-navigation button.slideout-exit {
		padding-top: 10px!important;
		padding-left: 0!important;
	}

	/* Off Canvas Sub */
	#generate-slideout-menu.main-navigation .main-nav ul ul {
		padding: 10px 0;
		background: none;
		border:none;
	}
	#generate-slideout-menu.main-navigation .main-nav ul ul li {
		border-bottom:none;
	}
	#generate-slideout-menu.main-navigation .main-nav ul ul li a {
		border:none;
		background:none;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#generate-slideout-menu.main-navigation ul ul:before {
		display:none;
	}


/* Home */
.small_gall .wp-block-image:first-child,
.small_gall .eb-gallery-img-content:first-child {
	margin-left:0!important;
}
.small_gall .wp-block-image {
	width:25%!Important;
}
.small_gall .wp-block-image,
.small_gall .eb-gallery-img-content {
	margin-left:-8px!important;
}

.widget-title {
	display: flex;
	flex-direction: column;
	row-gap: 15px;
}
.widget-title:before {
	width: 80px;
	height: 2px;
	background-color: var(--accent);
	content: " ";
}

/* Page */
.page .site-main,
.search .site-main { margin-top:35px; margin-bottom:55px;}
.search-results h1.page-title { text-align:center; font-size:22px;}
.search-results h1.page-title span { color:var(--post-link); border-bottom:2px solid var(--post-link);}
.gb-text.border { position:relative; margin-bottom:30px;}
.gb-text.border:after {
	content:" ";
	height:3px;
	border-radius:4px;
	width:80px;
	left:0;
	right:0;
	bottom:-12px;
	margin:0 auto;
	position:absolute;
	background:var(--accent);
}
.no-results.not-found .inside-article {
	flex-direction: column;
	max-width: 568px;
	margin:65px auto;
	justify-content: center;
	text-align: center;
}
.no-results.not-found input.search-field {
	width:100%;
	border:none;
	height:40px;
}
.no-results.not-found .search-form {
	border:1px solid var(--accent);
	border-radius:50px;
	overflow:hidden;
	position:relative;
}
.no-results.not-found .search-form button.search-submit {
	position: absolute;
	right: 0;
	top: 0;
	height:100%;
}
.page-template-default .site-header {
	border-bottom:1px solid #f1f1f1;
}
.page-template-default.full-width-content .site-header {
	border-bottom:none;
}

/* Home */
.f_width { width:100%!important;}
.itm_sld .itm_sld_l {
	flex-basis: 45px;
	width: 45px;
}
.itm_sld .itm_sld_l svg {
	width: 45px;
	height:45px;
}
.itm_sld h3 {
	font-size:20px;
	margin-bottom:5px;
}
.btnabs {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	opacity:0;
}

ul.info,
ul.check,
ul.line {
	margin-left:0!important;
}
ul.info li,
ul.check li,
ul.line li {
	background-repeat:no-repeat;
	background-position:left 7px;
	background-size: 16px;
	padding-left:23px;
	list-style:none;
	padding-top:3px;
	padding-bottom:3px;
}
ul.line li { background-image:url(images/arrow.svg);}
ul.check li { background-image:url(images/check.svg);}
ul.info li { background-image:url(images/info.svg);}
.dynamic-entry-content iframe {
	width:100%;
}

/* Testi */
.testi_wrapper {
	display: flex;
	flex-direction: column;
	row-gap: 30px;
}
.testi_item {
	background-color: #ffffff;
	border-radius: 8px;
	color: #626262;
	font-size: 14px;
	line-height: 1.5em;
}
.name_box {
	align-items: center;
	column-gap: 10px;
	display: flex;
	margin-bottom: 0px;
	font-size: 0.85em;
}
.name_box p { margin:0;}
.name_box p.lg {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.2em;
	color:var(--contrast);
	margin-bottom: 0px;
}
.nm {
	width: 40px;
}
.nm img {
	border-radius:50%;
	margin-bottom:0!important;
}
.testi_item img {
	width: 75px;
	height:auto;
	margin-bottom:10px;
}
.desc_ts {
	color:#646464;
	margin-bottom:15px;
}

.single_testi .testi_wrapper {
	margin-top: 30px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}
.single_testi  .testi_item {
	padding:20px;
}

/* Horizontal Testi Layout */
.testi_horizon .testi_wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 20px;
	row-gap: 20px;
}
.testi_horizon .testi_item {
	padding:25px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0px 10px 15px 5px rgba(97,97,97,0.07);
}

/* Splide Nav */
.splide__list {
	display:flex!important;
	gap:0!important;
	row-gap: 0!important;
}


/* Contact Page */
.wpforms-container {
	margin:0!Important;
}
.wpforms-container .wpforms-field {
	padding:0 0 10px!Important;
}
.wpforms-submit {
	width: 150px!important;
}
.wpforms-container textarea{
	height:130px!important;
}

/* Search */
.wp-block-search {
	width:100%;
}
.wp-block-search__inside-wrapper {
	width: 100%;
	border: none;
	padding: 0;
	background: #fff;
	padding: 5px;
	border-radius: 50px;
	overflow: hidden;
	border:1px solid var(--accent);
}
.wp-block-search__inside-wrapper input.wp-block-search__input {
	border:none;
}
.wp-block-search__inside-wrapper button {
	background: none;
	color: var(--accent);
	border-left: 1px solid var(--accent);
}

/* Widget */
.wp-block-social-links { margin:0;}

/* Search Modal */
.search-modal-form {
    background: transparent!important;
}
.gp-modal__container input.search-field {
    margin: 0!important;
    border: none !important;
}
.search-modal-fields {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* Archive */
.dynamic-term-description p { margin:0;}
a.more strong {
	padding: 2px 20px;
	display: inline-flex;
	border-radius:50px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-color: rgba(255, 255, 255, 0.07);
}

/* Archive Page Pagination */
.paging-navigation {
    margin: 0;
    background: none!important;
    text-align: center;
    font-size: 14px;
    padding: 25px 0!important;
}
.nav-links {
	display:flex;
	gap:10px;
	justify-content: center;
}
.paging-navigation span, 
.paging-navigation a {
	padding: 5px 10px !important;
	color: var(--contrast)!important;
	border-radius: 0;
	width: 35px;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
}
.paging-navigation span.current {
   border: 1px solid #cccc;
	box-shadow: 0px 0px 7px 5px #f1f1f1;
}
a.prev,
a.next,
a.prev span,
a.next span {
    display: none;
}

/* Limite Title */
.dc_limit {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.round img {
	border-radius:5px;
}

/* Single Post */
.dynamic-entry-content a {
	font-weight:bold;
}
body.single .site-main { margin-bottom:0;}
.dynamic-entry-content ul.wp-block-list,
.dynamic-entry-content ol.wp-block-list {
	margin-left:1.2em;
}
.dynamic-entry-content code {
    background: #f1f1f1;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 95%;
    font-weight: bold;
}
blockquote { 
	line-height:1.5em;
	border-left: 5px solid var(--accent);
}
pre.wp-block-code {
	border-radius:5px;
	border:1px solid #ccc;
	padding:25px;
	font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
}
pre.wp-block-code code {
	line-height:1.75em;
	font-size:0.8em;
	background:none;
	font-weight:normal;
	padding:0;
}
.wp-block-post-author__name {
	font-weight:20px;
	font-weight:bold;
}
.wp-block-post-author__name a { color:var(--contrast);}
.wp-block-post-author__bio { font-size: 15px;}
.wp-block-post-author__avatar { padding-top:3px;}
.wp-block-post-author__avatar img { border-radius:50px;}

/* TOC */
ul.simpletoc-list { margin:0;}
ul.simpletoc-list li { list-style:none;}
ul.simpletoc-list li a {
	padding:12px 0;
	font-size:16px;
	display:block;
	color:var(--accent);
	border-bottom:1px solid #f1f1f1;
}
ul.simpletoc-list li:last-child a {
	border-bottom:none;
}
ul.simpletoc-list li ul {
	margin:15px 0;
}
ul.simpletoc-list li ul li {
	position:relative;
	margin-left:0;
	padding-left:0;
}
ul.simpletoc-list li ul li a {
	color:var(--contrast-2);
}
ul.simpletoc-list li ul li:first-child,
ul.simpletoc-list li ul li:last-child {
}
ul.simpletoc-list li ul li a {
	border:none;
	font-size:0.9em;
	padding:9px 0;
}
ul.simpletoc-list li ul li ul {
	margin:10px 0;
}
ul.simpletoc-list li ul li ul li {
	border:none;
}
ul.simpletoc-list li ul li ul li a {}

/* EZ TOC */
.dynamic-entry-content #ez-toc-container,
.ez-toc-title-container,
.ez-toc-title,
.ez-toc-cssicon-toggle-label {
	display: none!important;
}
#ez-toc-container {
	background: none!important;
	border: none!important;
	border-radius: 0!important;
	box-shadow: 0!important;
	padding: 0!important;
	width: 100%!important;
}
#ez-toc-container a {
	padding:12px 0 12px 20px!important;
	font-size: 16px!important;
	display: block!important;
	position: relative!important;
	color: var(--accent)!important;
	border-bottom:1px solid #f1f1f1!important;
}
#ez-toc-container li:laste-child a {
	border-bottom:0px solid #f1f1f1!important;
} 
#ez-toc-container a:before {
	border-style: solid;
	border-width: 1px 1px 0 0;
	content: '';
	display: inline-block;
	height: 8px;
	width: 8px;
	left: 0;
	position: absolute;
	top: 20px;
	transform: rotate(-45deg);
	vertical-align: top;
	transform: rotate(45deg);
}

/* Post Comments */
h2.wp-block-comments-title {
	font-size:22px;
	border-top:1px solid #f1f1f1;
	padding-top:20px;
}
.wp-block-comments ol { margin-left:0;}
.wp-block-comment-author-name {
	font-size: 16px !important;
	font-weight: bold;
}
.wp-block-comment-date {
	line-height:1.4em;
}
.wp-block-comment-content {
	margin-top:10px;
}
.wp-block-comment-reply-link a {
	border:1px solid #ccc;
	padding:3px 10px;
	border-radius:5px;
}
.wp-block-post-comments-form h3 {
	font-size:18px;
	margin-bottom:15px!Important;
}
.wp-block-post-comments-form input,
.wp-block-post-comments-form textarea {
	border:1px solid #ccc!Important;
	border-radius:5px!Important;
}
.wp-block-post-comments-form .form-submit input[type="submit"] {
	border:none!important;
	font-weight:bold;
}

/* Copy Link Style */
button.copy-url-btn {
	height:40px;
	background:#fff;
	color:#394050;
	border:1px solid #d2d5db;
	border-radius:60px;
	font-size:16px;
	display:flex;
	gap:8px;
	align-items: center;
	font-weight: 700;
	padding: 0 20px;
	box-shadow:0 1px 2px 0 rgba(0,0,0,.05);
}
button.copied {
	background:#ecfdf5;
	color:#059669;
	border:1px solid #ecfdf5;
	box-shadow:none;
}
.copy-icon { display:flex;}
.copied-icon { display:none;}
button.copied .copied-icon { display:flex;}
button.copied .copy-icon { display:none;}

/* Share Button Style */
.addtoany_list { 
	display:flex!important;
	gap: 8px;
}
.addtoany_list.a2a_kit_size_32 a {
	display: flex!important;
	padding: 0!important;
}
.addtoany_list.a2a_kit_size_32 span {
	height:40px!important;
	width:40px!important;
	border-radius:50px!Important;
	border:1px solid #d2d5db;
	padding: 5px;
	box-shadow:0 1px 2px 0 rgba(0,0,0,.05);
	background: none!Important;
}

/* Tag List */
.taxonomy-post_tag {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.taxonomy-post_tag a {
    color: var(--contrast);
    position: relative;
	border:1px solid  var(--contrast);
    padding: 4px 13px;
    font-size: 14px;
	font-weight:bold;
    line-height: 20px;
    border-radius: 5px;
    display: inline-block;
    transition: all .3s ease-in-out;
}
.taxonomy-post_tag a:hover {
    background: var(--contrast);
	color:#fff;
}
.wp-block-post-terms__separator {
    display: none;
}
.ls_terms a { border-bottom:1px solid var(--clr-5); padding-bottom:2px;}
.ls_terms span:nth-child(2) a { border-bottom:1px solid var(--clr-2);}
.ls_terms span:nth-child(3) a { border-bottom:1px solid var(--clr-3);}
.ls_terms span:nth-child(4) a { border-bottom:1px solid var(--clr-4);}
.ls_terms span:nth-child(5) a { border-bottom:1px solid var(--accent);}

/* Breadcrumb */
.rank-math-breadcrumb p { margin-bottom:0; }
.breadcrumb { line-height: 18px; margin-bottom:15px; }
.breadcrumb {
	padding: 0!Important;
	display: -webkit-box !important;
	overflow: hidden;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

/* Sidebar */
.inside-right-sidebar {
	position: sticky;
	top: 0;
}
.list_custom {
    list-style: none;
    counter-reset: my-awesome-counter;
}
.list_custom .gb-loop-item h2 {
    counter-increment: my-awesome-counter;
    position: relative;
	padding-left:35px;
}
.list_custom .gb-loop-item h2:before {
	content: counter(my-awesome-counter) "";
	top: 4px;
	left: 0;
	font-size: 12px;
	font-weight: bold;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-basis: 40px;
	flex-shrink: 0;
	position: absolute;
	top: 4px;
	background-color: var(--contrast-2);
	color:#fff;
	box-shadow: 0px 0px 0 5px #f1f1f1;
}
.lst .gb-loop-item h2:before {
	content: "#" counter(my-awesome-counter);
	background:none;
	color:var(--color-opt3);
	font-size: 20px;
	top: 2px;
}
.rst .gb-loop-item h2:before {
	width: 25px;
	height: 25px;
	border-radius: 3px 3px 10px 3px;
	background-color: var(--color-opt);
}
	
h2.sidebar_loop {
	font-size:16px;
	margin-bottom:0;
	line-height:1.4em;
}

/* Query Loop */
.gb-loop-item.generate-columns  {
	padding:0!Important;
	margin:0!Important;
}

/* Splide Slider Style */
.splide__pagination { 
	bottom:25px;
	position: static;
	display: flex;
	gap: 6px;
	margin-top: 15px;
}
.splide__pagination li {
	justify-content: center;
	align-items: center;
	display:flex;
	opacity:1;
	background:none;
	border-radius:50px;
}
.splide__pagination button { 
	margin:0;
	width:8px;
	background:#ccc!Important;
	height:8px;
	opacity:0.25;
}
.splide__pagination__page.is-active {
	width:8px;
	height:8px;
	border-radius:10px;
	transform: none;
	opacity:0.85;
}
.splide__pagination {
	justify-content:center;
}
.docterslider .splide__pagination {
	position: absolute;
	bottom: -50px;
	right: 0;
	justify-content: flex-end;
}

/* Cari Dokter */
.search-the-docter-container {
	position:relative;
}
.search-the-docter-form {
	margin: 0 auto 35px;
	width:768px;
	display: flex;
	row-gap: 10px;
	column-gap: 10px;
}
.search-the-docter-form label {
	position:absolute;
	z-index:-1;
	opacity:0;
}
.search-the-docter-form input,
.search-the-docter-form select {
	border:1px solid #ccc;
	border-radius:5px;
	width:100%;
}
.search-the-docter-form select {
	width:35%;
	background-image: url(images/arrow-down.svg)!Important;
	background-repeat: no-repeat!Important;
	background-position: 96% center!Important;
	appearance: none;
}
.search-the-docter-form button {
	background:var(--contrast-2);
	border-radius:5px;
	font-weight:bold;
}
.listing-suggestions {
	padding:20px 15px;
	display:none;
	border:1px solid #ccc;
	border-top:none;
	background:#fff;
	border-radius: 0px 0px 5px 5px;
	position: absolute;
	z-index:91;
	width: 100%;
	margin-top: -5px;
}
.listing-suggestions ul {
	margin:0;
}
.listing-suggestions ul li {
	list-style:none;
	font-size:14px;
	border-bottom:1px solid #f1f1f1;
	padding:8px 0;
	cursor:pointer;
}
.listing-suggestions ul li:last-child {
	border:none;
}
.search-the-docter-results {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	row-gap: 20px;
	column-gap: 20px;
}
.wrapper-item {
	overflow-x: hidden;
	overflow-y: hidden;
	position:relative;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0px 10px 15px 5px rgba(97,97,97,0.07);
}
.wrapper-item img {
	height:220px;
	display:block;
	width:100%;
	object-fit:cover;
	object-position:top center;
}
.wrapper-content-header {
	padding:25px;
	font-size:14px;
}
.wrapper-content-header p {
	margin:0;
}
.wrapper-content-header h3,
.wrapper-content-header h2,
.wrapper-content-header .d_name {
	font-size: 19px;
	line-height: 1.2em;
	font-weight: 600;
	margin-bottom: 10px;
}
.wrapper-item a.cta-button {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	opacity:0;
}
.jadwal p.gb-text {
	font-weight:bold;
	margin-bottom:15px;
}
.jadwal ul {
	margin:10px 0!Important;
}
.jadwal ul li {
	list-style: none;
	background-image: url(images/check.svg);
	padding-left: 20px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 14px auto;
	font-size: 14px;
	line-height: 1.8em;
}
.cs_loading {
	width:100%;
	text-align:center;
	font-size:12px;
	position: absolute;
	margin-top: -26px;
}

/* Footer */
.wp-block-categories {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.wp-block-categories li {
	list-style:none;
}
.wp-block-categories li {
	background-color: rgba(255,255,255,0.13);
	border-radius: 50px;
	padding: 3px;
}
.wp-block-categories li:hover {
	background-color: rgba(255,255,255,0.17);
}
.wp-block-categories li a {
	padding: 2px 20px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	display: inline-flex;
	border-radius: 50px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background-color: rgba(255, 255, 255, 0.03);
}

@media only screen and (max-width: 1200px) {
	.inside-header { position:relative;}
	.site-header .header-image { width: 170px;}
	.site-logo.page-hero-logo {
		position:absolute;
		left:20px;
		top:15px;
	}
	.menu-toggle {
		font-size: 24px!Important;
		padding: 10px!Important;
		position:absolute;
		right:20px;
		top: 9px;
		background: none!Important;
	}
	.main-navigation .main-nav ul li a {
		padding-left: 0;
		padding-right: 0;
		line-height: 45px;
	}
	.main-navigation .main-nav ul li.cta {
		margin-top:10px;
		border-bottom:none!important;
	}
	.main-navigation .main-nav ul li.cta a {
		margin-left:0;
		display: inline;
		padding: 10px 30px;
	}
	.toggled .menu-item-has-children .dropdown-menu-toggle {
		padding-right: 15px;
		font-size: 22px;
	}
	.main-navigation ul ul li {
		position:relative;
	}
	.main-navigation ul ul li a:before {
		border-style: solid;
		border-width: 1px 1px 0 0;
		content: '';
		display: inline-block;
		height: 6px;
		width: 6px;
		left: 0;
		position: absolute;
		top: 16px;
		transform: rotate(-45deg);
		vertical-align: top;
		transform: rotate(45deg);
	}
	
	.menu-toggle .gp-icon,
	span.gp-icon.icon-search {
		display:flex;
	}
	.gb_wrapper,
	.site-header,
	.site-content {
		padding-left:70px!important;
		padding-right:70px!important;
	}

	.full-width-content .site-content {
		padding-left:0!important;
		padding-right:0!important;
	}
	
	/* Slide Item */
	.itm_sld {
		font-size:14px;
	}
	
	.testi_wrapper {
		grid-template-columns: 1fr;
	}
	.single_testi .testi_wrapper {
		grid-template-columns: 1fr;
	}
	
	/* Cari Dokter */
	.search-the-docter-form {
		width:100%;
	}
	.search-the-docter-results {
		grid-template-columns: 1fr 1fr;
	}

}

@media only screen and (max-width: 768px) {
	.testi_horizon .testi_wrapper {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 767px) {
	.gb_wrapper,
	.site-header,
	.site-content {
		padding-left:20px!important;
		padding-right:20px!important;
	}
	.wp-block-post-author {
		flex-direction: column;
		gap: 10px;
	}
	.main-navigation .menu-toggle {
		position:absolute;
		right:0;
	}
	.list_cat a { font-size:10px;}
	button.copy-url-btn { font-size:14px; height:35px;}
	.addtoany_list.a2a_kit_size_32 span {
		height: 35px !important;
		width: 35px !important;
		padding: 3px;
	}
	.main-navigation ul ul { box-shadow:none;}
	
	.wp-block-columns {
		gap:10px!Important;
	}
	.splide__slide .slide_wrapp {
		transition: transform 400ms;
		transform: scale(.9);
	}
	.splide__slide.is-active .slide_wrapp {
		transform: scale(1);
	}
	.inner_cs {
		padding-left:0!important;
		padding-right:0!important;
	}
	
	.search-the-docter-results {
		row-gap: 13px;
		column-gap: 13px;
	}
	.search-the-docter-form {
		flex-direction:column;
	}
	.search-the-docter-form select {
		width:100%;
	}
	.wrapper-item img {
		height: 130px;
	}
	.wrapper-content-header h3,
	.wrapper-content-header h2,
	.wrapper-content-header .d_name {
		font-size:14px;
	}
	.wrapper-content-header {
		padding: 15px;
		font-size: 12px;
	}
}

Skip to content
Theme.co.id
Blog
Travel
Woocommerce
Elementor
Landing Page
Instansi
Web Sekolah
Web Desa
Loker
My account
0
Home » Artikel » Cara Convert Gambar Ke Webp Tanpa Plugin WordPress
Cara Convert Gambar Ke Webp Tanpa Plugin WordPress
January 1, 2026


Format gambar WebP adalah format gambar modern yang dikembangkan oleh Google untuk kebutuhan web. Tujuannya utama adalah menghasilkan ukuran file lebih kecil tanpa mengorbankan kualitas gambar.

Apa itu WebP?
WebP adalah format gambar yang mendukung:

Lossy (kompresi dengan sedikit penurunan kualitas)
Lossless (tanpa penurunan kualitas)
Transparansi (alpha channel) seperti PNG
Animasi seperti GIF
Code Snippet
/**
 * Convert Uploaded Images to WebP Format with Custom Quality
 * Source https://key2blogging.com/auto-convert-images-to-webp-in-wordpress/
 */
add_filter('wp_handle_upload', 'wpturbo_handle_upload_convert_to_webp');
function wpturbo_handle_upload_convert_to_webp($upload) {
    if (in_array($upload['type'], ['image/jpeg', 'image/png', 'image/gif'])) {
        $file_path = $upload['file'];
        if (extension_loaded('imagick') || extension_loaded('gd')) {
            $image_editor = wp_get_image_editor($file_path);
            if (!is_wp_error($image_editor)) {
                // Set WebP quality (adjust as needed)
                $quality = 80; // Adjust between 0 (low) to 100 (high)

                $image_editor->set_quality($quality); // Set quality for WebP conversion
                
                $file_info = pathinfo($file_path);
                $dirname = $file_info['dirname'];
                $filename = $file_info['filename'];
                $def_filename = wp_unique_filename($dirname, $filename . '.webp');
                $new_file_path = $dirname . '/' . $def_filename;
                
                $saved_image = $image_editor->save($new_file_path, 'image/webp');

                if (!is_wp_error($saved_image) && file_exists($saved_image['path'])) {
                    // Update the upload data to use the WebP image
                    $upload['file'] = $saved_image['path'];
                    $upload['url'] = str_replace(basename($upload['url']), basename($saved_image['path']), $upload['url']);
                    $upload['type'] = 'image/webp';

                    // Optionally delete the original file
                    @unlink($file_path);
                }
            }
        }
    }

    return $upload;
}
Support Channel
made@zaferinadigital.com

081 8054 22671

dex.ado