.status-bar {
  text-align: right;
  margin: 5px 10px;
}

.status-badge1 {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  animation: blink 1.2s infinite;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Warna status Admin */
.status-badge1.online { background-color: #28a745; }   /* hijau */
.status-badge1.standby { background-color: #ffc107; color:#000; } /* kuning */
.status-badge1.off { background-color: #dc3545; }      /* merah */

/* Warna status Ibadah */
.status-badge1.ibadah.sholat { background-color: #007bff; } /* biru */
.status-badge1.ibadah.free { background-color: #6c757d; } /* abu */


.badge-new {
  background-color: red; /* biru */
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: bold;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

.mini-btn-babi {
  display: inline-block;
  font-size: 11px;           /* kecil */
  padding: 3px 8px;         /* tipis */
  border-radius: 6px;        /* rounded mini */
  background: linear-gradient(135deg, #0077cc, #00bfff);
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  transition: all 0.25s ease;
}

.mini-btn-babi:hover {
  background: linear-gradient(135deg, #00bfff, #0077cc);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.mini-btn-babi:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

@media (max-width: 640px) {
  .info-card {
    max-width: 95%;   /* otomatis ngepas layar kecil */
  }
}
.info-card {
  display: inline-block;
  background: linear-gradient(135deg, #f9ffca, #b0b163);
  border-radius: 3px;
  padding: 6px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  margin: 5px;
  max-width: 100%;
  width:100%;  /* ✅ full ikut lebar container */
  text-align: center;
  white-space: normal;    
  word-break: break-word; 
}

#typewriter {
  font-family: monospace;
  font-size: 12px;
  color: red;
  overflow: hidden;
  display: inline-block;
  border-right: 2px solid #fff57b; /* kursor */
  animation: blink 0.7s steps(1) infinite;
}

/* Animasi kedip */
@keyframes blink {
  50% { border-color: transparent; }
}

.alert-info {
  background: #fef4a7;
  color: #0c5460;
  padding: 10px;
  border: 1px solid gold;
  border-radius: 6px;
  font-weight: bold;
  margin: 10px auto;
  max-width: 100%;   /* ✅ full ikut lebar container */
  width: 100%;
  overflow: hidden;
  position: relative;
}

#marqueeText {
  display: block;
  opacity: 1;
  transition: opacity 0.8s ease;
}
#marqueeText.fade-out {
  opacity: 0;
}

/* header.php */
.mrq-wrap {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: #204f33; /* background hitam */
}
.mrq-inner {
    display: inline-block;
    white-space: nowrap;
    box-sizing: border-box;
padding: 2px 2px;
}
.mrq-item b { 
    margin-right:3px;  /* jarak rapat */
    font-size:11px; 
    color:gold; /* font putih */
}
.mrq-item strong { 
    margin-right:2px; 
    font-size:11px; 
    color:#fff; /* font putih */
    text-transform:uppercase; 
}
.mrq-balls { 
 margin-left:2px; /* lebih rapat */
}
.mrq-ball { border-radius:17px; width:17px; height:17px; line-height:17px; font-size:11px; font-weight:bold; text-align:center; display:inline-block; margin:0;color:white; }
.mrq-ball.gray  { background:#777; }
.mrq-ball.green { background:#2e9e4d; }
.mrq-ball.red   { background:#c93030; }

/* Separator | warna kuning */
.mrq-separator { color:#f7f06b; margin:3 3px; }

/* Optional: responsive */
@media (max-width:420px){
    .mrq-ball { width:16px; height:16px; line-height:16px; font-size:9px; }
    .mrq-item { margin-right:4px; font-size:7px; }
}


.gradient-divider {
  height: 3px;
  background: linear-gradient(to right, #f5b799, #e6fba9);
  margin: 1px 0;
  border-radius: 3px;
}

.iklan-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px;
  margin: 0 auto;
  max-width: 100%;
}



.iklan-item {
  background: transparent;
  border: 1px ridge #d9d5d5;
  border-radius: 0;
  padding: 2px;
  text-align: center;
  margin: 0;
}

.iklan-title {
  font-size: 10px;
  font-weight: bold;
  background: #fbff43;
  padding: 2px;
  margin: 0;
  border-radius: 0;
}

.iklan-img {
  width: 100%;
  height: 70px;
  object-fit: fill;
  display: block;
  margin: 0;
  border-radius: 0;
  background: #fff;
}

.iklan-btn {
  font-size: 10px;
  padding: 2px 4px;
  background-color: #00b894;
  color: white;
  text-decoration: none;
  display: inline-block;
  margin: 2px 0 3px;
  border-radius: 3px;
}

.iklan-btn:hover {
  background-color: #0984e3;
}

@media screen and (max-width: 480px) {
  .iklan-wrap {
grid-template-columns: repeat(2, 1fr);
  }
  .iklan-img {
    height: 50px;
  }
}
/* Floating banner tambahan */

.floating-banner {
  position: fixed;
  bottom: 10px;
  left: 10px; /* ganti jadi left: 10px; jika ingin di kiri */
  width: 80px;
  height:80px
  background: #fffce0;
  border: 1px solid #ccc;
  text-align: center;
  padding: 5px;
  z-index: 9999;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  border-radius: 6px;
}
.floating-banner img {
  width: 100%;
  height: auto;
}

.floating-banner a.iklan-btn {
  display: block;
  margin-top: 5px;
  font-size: 10px;
}



.floating-banner-top-center {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  background: #fffce0;
  border: 1px solid #ccc;
  text-align: center;
  padding: 5px;
  z-index: 9999;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  border-radius: 6px;
}

.floating-banner-top-center img {
  width: 100%;
  height: auto;
}

.floating-banner-top-center a.iklan-btn {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  padding: 2px 4px;
  background-color: #00b894;
  color: white;
  text-decoration: none;
  border-radius: 3px;
}

.floating-banner-top-center a.iklan-btn:hover {
  background-color: #0984e3;
}


.menu-btn {
  display: inline-block;
  padding: 4px 6px;     
  font-size: 12px;      
  border: 1px solid #333;
  border-radius: 3px;
  background-color: #ff0000;
  color: #FFF;
  text-align: center;
  text-decoration: none; /* penting untuk <a> */
  min-width: 24px;      
  transition: all 0.2s ease;
}

.menu-btn:hover {
  background-color: #333;
  color: #fff;
}

.menu-btn1 {
  display: inline-block;
  padding: 4px 6px;     
  font-size: 12px;      
  border: 1px solid #333;
  border-radius: 3px;
  background-color: #0100ff;
  color: #FFF;
  text-align: center;
  text-decoration: none; /* penting untuk <a> */
  min-width: 20px;      
  transition: all 0.2s ease;
}

.menu-btn1:hover {
  background-color: #333;
  color: #fff;
}

.menu-btn2 {
  display: inline-block;
  padding: 4px 6px;     
  font-size: 12px;      
  border: 1px solid #333;
  border-radius: 3px;
  background-color: #00a2c7;
  color: #FFF;
  text-align: center;
  text-decoration: none; /* penting untuk <a> */
  min-width: 20px;      
  transition: all 0.2s ease;
}

.menu-btn2:hover {
  background-color: yellowgreen;
  color: #fff;
}

/* Container center */
.mini-btn-menu-container {
  display: flex;
  justify-content: center; /* center horizontal */
  margin: 3px 0;
}

/* Menu tombol horizontal */
.mini-btn-menu {
  display: flex;
  gap: 4px; /* jarak antar tombol */
  flex-wrap: wrap;
  justify-content: center;
}

/* Tombol mini banget */
.menu-btn {
  padding: 4px 6px;      /* sangat kecil */
  font-size: 12px;       /* ukuran font mini */
  border: 1px solid #333;
  border-radius: 3px;
  background-color: #ff0000;
  color: #fff;
  cursor: pointer;
  min-width: 24px;       /* lebar minimum supaya tombol terlihat */
  text-align: center;
  transition: all 0.2s ease;
}

/* Hover effect */
.menu-btn:hover {
  background-color: #333;
  color: #fff;
}

/* Mobile-friendly */
@media (max-width: 480px) {
  .menu-btn {
    padding: 3px 5px;
    font-size: 11px;
    min-width: 20px;
  }
}