.zoom {
    transition: transform .5s; /* Animation */
    /*width: 200px;
    height: 200px;*/
    margin: 0 auto;
  }

  .zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }


/* style navbar menu frontend*/
.link-yellow {
  font-weight:bold;
  
}

.link-yellow-li {
  background-color:#F2A007;
  color:#fff;
  font-weight:bold;
}

.link-yellow-header {
  background-color: #F2A007; 
  padding:0px 15px 0px 15px; 
  font-weight:bold;"
}
.link-yellow-header a:hover {
  color:#fff;
  padding:0px 15px 0px 15px;
}
.link-yellow-header:hover {
  background-color: #B2002D;
}


/*.link-yellow:focus {
  background-color:#F24C26;
}*/
/* end */


 @media screen and (min-width: 980px) {

  .icon-bar {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
 /* padding: 16px;*/
  transition: all 0.3s ease;
  color: white;
  font-size: 10px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover { background-color: #000; }
.facebook { background: #3B5998; color: white; }
.twitter { background: #55ACEE; color: white; }
.google { background: #dd4b39; color: white; }
.linkedin { background: #007bb5; color: white; }
.youtube { background: #bb0000; color: white; }

.btn-sosmed-x {
  clear:both;
  white-space:nowrap;
  font-size:.8em;
  display:inline-block;
  border-radius:5px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
  margin:2px;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  overflow:hidden
}

.btn-sosmed-x:hover {
  /*box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.45);*/
}

.btn-sosmed-x:focus {
  /*box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.4);*/
}

.btn-sosmed-x > span,.btn-icon > i {
  float:left;
  padding:13px;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  line-height:1em
}

.btn-sosmed-x > span {
  padding:14px 18px 16px;
  white-space:nowrap;
  color:#FFF;
  /*background:#b8b8b8;*/
}

.btn-sosmed-x:focus > span {
 /*background:#9a9a9a;*/
}




/* sosial media share */
  #social-platforms {
    position:relative;
    top:100px;
    top:25vh;
    font-size:1rem;
    text-align:center;
    height:250px;
    overflow:hidden;
  }

  .btn-sosmed {
    clear:both;
    white-space:nowrap;
    font-size:.8em;
    display:inline-block;
    border-radius:5px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
    margin:2px;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
    overflow:hidden
  }

  .btn-sosmed:hover { box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.45); }
  .btn-sosmed:focus { box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.4); }

  .btn-sosmed > span,.btn-icon > i {
    float:left;
    padding:13px;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
    line-height:1em
  }

  .btn-sosmed > span {
    padding:14px 18px 16px;
    white-space:nowrap;
    color:#FFF;
    background:#b8b8b8
  }

  .btn-sosmed:focus > span { background:#9a9a9a; }

  .btn-icon > i {
    border-radius:5px 0 0 5px;
    position:relative;
    width:13px;
    text-align:center;
    font-size:1.25em;
    color:#fff;
    background:#212121
  }

  .btn-icon > i:after {
    content:"";
    border:8px solid;
    border-color:transparent transparent transparent #222;
    position:absolute;
    top:13px;
    right:-15px
  }

  .btn-icon:hover > i,.btn-icon:focus > i { color:#FFF; }
  .btn-icon > span { border-radius:0 5px 5px 0 }

  /*Facebook*/
  .btn-facebook:hover > i,.btn-facebook:focus > i { color:#3b5998; }
  .btn-facebook > span { background:#3b5998; }

  /*Twitter*/
  .btn-twitter:hover > i,.btn-twitter:focus > i { color:#55acee; }
  .btn-twitter > span { background:#55acee; }

  /*Google*/
  .btn-googleplus:hover > i,.btn-googleplus:focus > i { color:#dd4b39; }
  .btn-googleplus > span { background:#dd4b39; }

  /*Pinterest*/
  .btn-pinterest:hover > i,.btn-pinterest:focus > i { color:#cb2028; }
  .btn-pinterest > span { background:#cb2028; }

  /*LinkedIn*/
  .btn-linkedin:hover > i,.btn-linkedin:focus > i { color:#007bb6; }
  .btn-linkedin > span { background:#007bb6; }

  /*youtube*/
  .btn-youtube:hover > i,.btn-youtube:focus > i { color:#bb0000; }
  .btn-youtube > span { background:#bb0000; }

  /*instagram*/
  .btn-instagram:hover > i,.btn-instagram:focus > i { background: #dc2743; }
  .btn-instagram > span { background: #dc2743; }

  /*instagram*/
  .btn-instagram-x:hover > i,.btn-instagram-x:focus > i {
    background: #f09433; 
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  }

  .btn-instagram-x > span {
    background: #f09433; 
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  }
/* end */

/* Pastikan banner dan running text menempel */
#homepage-slider {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

#homepage-slider img {
  width: 100%;
  height: 100vh; /* penuh tinggi layar */
  object-fit: cover;
  object-position: center;
  display: block;
}

/*Link Pilihan*/

#link-pilihan {
  background-color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 1.8rem;
  color: #002b6b; /* warna biru gelap seperti navbar */
  font-weight: 700;
  margin-bottom: 30px;
}

.link-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.link-wrapper a {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.link-wrapper img {
  width: 130px;
  opacity: 0.85;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.link-wrapper img:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* ===== VISITOR COUNTER ===== */
.visitor-counter-wrap {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(1,36,71,0.09);
    padding: 28px 32px;
    margin-top: 24px;
    overflow: hidden;
    position: relative;
}
.visitor-counter-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #012447, #0a4a8a, #3b82f6, #0a4a8a, #012447);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.visitor-counter-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.visitor-counter-icon-wrap {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #012447, #0a4a8a);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.visitor-counter-icon-wrap i {
    color: #fff; font-size: 20px;
}
.visitor-counter-label {
    font-size: 16px;
    font-weight: 800;
    color: #012447;
}
.visitor-counter-sub {
    font-size: 12px;
    color: #8a9ab0;
    margin-top: 2px;
}
.visitor-counter-live {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
}
.visitor-live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: pulse-dot 1.5s ease-in-out infinite;
    display: inline-block;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.4); }
}
.visitor-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.visitor-stat-card {
    border-radius: 16px;
    padding: 20px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.visitor-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.visitor-stat-card::after {
    content: '';
    position: absolute;
    bottom: -20px; right: -20px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
}
.visitor-today  { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.visitor-week   { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.visitor-month  { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.visitor-total  { background: linear-gradient(135deg, #012447, #0a4a8a); }
.visitor-stat-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.22);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.visitor-stat-icon i { color: #fff; font-size: 16px; }
.visitor-stat-body { flex: 1; min-width: 0; }
.visitor-stat-number {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}
.visitor-stat-label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 3px;
}
.visitor-stat-date {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
}
@media (max-width: 991px) {
    .visitor-counter-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .visitor-counter-grid { grid-template-columns: 1fr; }
    .visitor-counter-wrap { padding: 20px 16px; }
    .visitor-counter-live { margin-left: 0; }
}