/*
Theme Name: Zakra Child
Theme URI: https://zakratheme.com/
Template: zakra
Author: ThemeGrill
Author URI: https://themegrill.com
Description: Zakra is a powerful and versatile multipurpose theme that makes it easy to create beautiful and professional websites. With over free 40 pre-designed starter demo sites to choose from, you can quickly build a unique and functional site that fits your specific needs. Whether you're launching a blog, news site, e-commerce store, showcasing your portfolio, building a business site, LMS, or niche-specific site (such as a cafe, spa, charity, yoga studio, wedding venue, dental practice, photography, restaurant, or educational institution), Zakra has everything you need to succeed. The theme integrates seamlessly with popular page builders like Elementor, Brizy, BlockArt, and the Gutenberg editor, giving you complete freedom to create any layout you can imagine. Importantly, Zakra is optimized for speed, features a mobile-first responsive design, is built with block-based technology, and is optimized for search engines. It is also compatible with a wide range of popular WordPress plugins, allowing you to extend its functionality as needed. Build your next project with Zakra today and see the difference for yourself. Check out all the starter sites at https://zakratheme.com/demos!
Tags: one-column,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-logo,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments,translation-ready,blog,news,e-commerce,rtl-language-support
Version: 4.2.0.1773872704
Updated: 2026-03-18 18:25:04

*/


#zak-masthead {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: Bouncefek 0.9s linear;
   -moz-animation: Bouncefek 0.9s linear;
   -ms-animation: Bouncefek 0.9s linear;
    animation: Bouncefek 0.9s linear;
}
.site-title {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: Bouncefek 1.7s linear;
   -moz-animation: Bouncefek 1.7s linear;
   -ms-animation: Bouncefek 1.7s linear;
    animation: Bouncefek 1.7s linear;
}
.site-title a {
font-size:30px;
}
.site-description {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: Bouncefek 2.7s linear;
   -moz-animation: Bouncefek 2.7s linear;
   -ms-animation: Bouncefek 2.7s linear;
    animation: Bouncefek 2.7s linear;
}
/*--- Animasi --*/
@keyframes Bouncefek {
	0% { transform: translateY(-205px);}
	40% { transform: translateY(-100px);}
	65% { transform: translateY(-52px);}
	82% { transform: translateY(-25px);}
	92% { transform: translateY(-12px);}
	55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes Bouncefek {
	0% { -moz-transform: translateY(-205px);}
	40% { -moz-transform: translateY(-100px);}
	65% { -moz-transform: translateY(-52px);}
	82% { -moz-transform: translateY(-25px);}
	92% { -moz-transform: translateY(-12px);}
	55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes Bouncefek {
	0% { -webkit-transform: translateY(-205px);}
	40% { -webkit-transform: translateY(-100px);}
	65% { -webkit-transform: translateY(-52px);}
	82% { -webkit-transform: translateY(-25px);}
	92% { -webkit-transform: translateY(-12px);}
	55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}


.iksm-terms-tree--children {
font-family: Oswald, sans-serif;
}

.iksm-term .iksm-term__inner {
padding:0;	
	text-shadow: 1px 1px #fff;	
background: linear-gradient(90deg, #fff 1%,transparent 3%,transparent 80%,#fff 82%),
linear-gradient(0deg , #fff 1%,transparent 3%,transparent 80%,#fff 82%);
background-color: #ccc;
background-size: 2.5px 2.5px;
}
/* kotak-pesan */
#kotak-pesan {
    position: absolute;
    top: -1000px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: auto;
    background-color: #174A87;
    border: 10px solid #0A2E58;
    color: white;
    padding: 0;
    -webkit-box-shadow: 0 0 2px 1px black,0 0 10px black;
    -moz-box-shadow: 0 0 2px 1px black,0 0 10px black;
    box-shadow: 0 0 2px 1px black,0 0 10px black;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    z-index: 1000;
}
#kotak-pesan *:focus {
    outline: none;
}
#kotak-pesan .isi-dialog {
    height: auto;
    margin: 15px;
    font: normal 12px Arial,Sans-Serif;
}
#kotak-pesan .close {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #174A87;
    font: bold 16px Arial,Sans-Serif;
    text-decoration: none;
    line-height: 22px;
    width: 22px;
    text-align: center;
    color: #fff;
    border: 4px solid #0A2E58;
    -webkit-box-shadow: 0 0 2px 1px black,0 0 10px black;
    -moz-box-shadow: 0 0 2px 1px black,0 0 10px black;
    box-shadow: 0 0 2px 1px black,0 0 10px black;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    cursor: pointer;
}
#kotak-pesan .close:hover {
    color: yellow;
}
#dialog-overlay {
    position: fixed !important;
    position: absolute;
    z-index: 999;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #111;
    display: none;
}
.content-left {
    width: 230px;
    height: auto;
    padding: 2px;
    margin-bottom: 2px;
    text-align: center;
  border:1px solid #144F69;
  background-color:#067BAF;
  background-image:-webkit-radial-gradient(top,#2493C4,#086A95);
  background-image:-moz-radial-gradient(top,#2493C4,#086A95);
  background-image:-ms-radial-gradient(top,#2493C4,#086A95);
  background-image:-o-radial-gradient(top,#2493C4,#086A95);
  background-image:radial-gradient(top,#2493C4,#086A95);
  -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -webkit-border-radius:0px 0 0 0;
  -moz-border-radius:0px 0 0 0;
  border-radius:0px 0 0 0;
}
.content-right {
    width: 230px;
    height: auto;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 2px;
    text-align: center;
  border:1px solid #144F69;
  background-color:#067BAF;
  background-image:-webkit-radial-gradient(top,#2493C4,#086A95);
  background-image:-moz-radial-gradient(top,#2493C4,#086A95);
  background-image:-ms-radial-gradient(top,#2493C4,#086A95);
  background-image:-o-radial-gradient(top,#2493C4,#086A95);
  background-image:radial-gradient(top,#2493C4,#086A95);
  -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -webkit-border-radius:0px 0 0 0;
  -moz-border-radius:0px 0 0 0;
  border-radius:0px 0 0 0;
}
/* Back to top */
#easy-top {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: fixed;
  bottom: 15px;
  right: 15px;
  cursor: pointer;
  width: 38px;
  height: 38px;
  line-height: 38px;
  border-radius: 4px;
  padding: 4px;
  display: none;
  -webkit-transform: translateZ(0);
  transition: all .3s ease-out;
}
#easy-top:hover {
  background: rgba(0, 0, 0, 0.9);
}
#easy-top:before,
#easy-top:after {
  -webkit-backface-visibility: hidden;
}
#easy-top:before {
  content: '';
  height: 8px;
  width: 8px;
  display: block;
  border: 3px solid #fff;
  border-left-width: 0;
  border-bottom-width: 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  position: absolute;
  top: 15px;
  left: 15px;
}
#easy-top:after {
  content: '';
  height: 16px;
  width: 3px;
  display: block;
  background: #fff;
  position: absolute;
  top: 16px;
  left: 18px;
}
#easy-top:hover:after {
  border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
}
/* --- AudioIgniter Light Theme Customization --- */
/* Fundo do player e cor do texto */
.ai-wrap,
.ai-wrap .ai-tracklist-item {
background: linear-gradient(90deg, #fff 1%,transparent 3%,transparent 80%,#fff 82%),
linear-gradient(0deg , #fff 1%,transparent 3%,transparent 80%,#fff 82%);
background-color: #ccc;
background-size: 3px 3px;	
!important; /* Fundo branco */
    color: #333333 !important; /* Texto escuro */
    border-color: #eeeeee !important; /* Bordas claras */
}

.ai-wrap .ai-volume-bar{float:left;position:relative;width:4px;height:100%;
background-color:#3e3e3e;cursor:pointer;border-right:1px solid #202020}
.ai-wrap .ai-volume-bar.ai-volume-bar-active::before{
	background-color:#fff
}
/* Cor do título da faixa e nome do artista */
.ai-wrap .ai-track-title,
.ai-wrap .ai-artist-name {
font-family: "Prata", serif;	
    color: #000000 !important;
}
.ai-wrap .ai-track-subtitle{
font-family: "Prata", serif;
	color:#000
}
/* Cor dos botões (Play/Pause/Volume) - Ex: Azul ou Cinza Claro */
.ai-wrap .ai-control-wrap-controls .ai-audio-control,
.ai-wrap .ai-track-controls .ai-track-control {
    background-color: #444 !important; /* Fundo do botão claro */
    color: #333333 !important; /* Ícone escuro */
    border-color: #cccccc !important;
}
/* Cor da barra de progresso */
.ai-wrap .ai-audio-controls-progress .ai-track-progress {
    background-color: #ff0000 !important; /* Cor de destaque (ex: Azul) */
}
/* Cor do fundo da barra de progresso */
.ai-wrap .ai-audio-controls-progress {
    background-color: #dddddd !important;
}
/* Faixa ativa */
.ai-wrap .ai-tracklist-item.ai-track-active {
    background-color: #f9f9f9 !important;
}
.ai-track.ai-track-active, 
.ai-track, 
.ai-track:focus {
font-family: "Prata", serif;	
    background-color: #fff !important; /* Exemplo: vermelho */
    color: #000 !important; /* Cor do texto */
}
.ai-track.ai-track-active, 
.ai-track:hover, 
.ai-track:focus {
font-family: "Prata", serif;	
    background-color: #eee !important; /* Exemplo: vermelho */
    color: #000 !important; /* Cor do texto */
}
.ai-wrap .ai-audio-control svg{fill:#fff;height:16px;position:relative;left:2px;top:1px
}
.ai-wrap .ai-track-btn svg{position:relative;fill:#000}
.ai-wrap .ai-track:hover .ai-track-btn svg,.ai-wrap .ai-track.ai-track-active .ai-track-btn svg{fill:#ff7600}
.ai-wrap .ai-track-btn svg {
    display: none !important;
}
.ai-wrap .ai-track-btn::after {
    content: "\f019"; /* Código do ícone FontAwesome, ex: play */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    color: #5588aa; /* Cor do ícone */
}