/* Tema */
.theme-white { background-color: white; color: black; }
.theme-contrast { background-color: black; color: yellow; }
.theme-primary { background-color: #ffeb3b; color: #333; }
.theme-secondary { background-color: #000; color: white; }

/* Zoom Layout */
.zoomed * { transform: scale(1.05); transform-origin: top left; }

/* Transisi lembut (opsional) */
body, html {
    transition: all 0.3s ease-in-out;
}

/* RANDOM */
.border-bottom { border-bottom: 1px solid rgb(222, 226, 230) !important; }

.btn-actions {display: grid; grid-template-columns: repeat(2, auto); gap: .25rem; justify-content: flex-start;}

.divider { display: flex; align-items: center; text-align: center; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #000; }
.divider.divider-with-text::before { margin-right: 10px; }
.divider.divider-with-text::after { margin-left: 10px; }

/* Utility */
.pre-wrap {white-space: pre-wrap;}
.max-w-200 { max-width: 200px; }
.t-underline { text-decoration: underline !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.clearfix::after { display: block; clear: both; content: ""; }

/* Alert Bootstrap */
.alert { position: relative; padding: .75rem 1.25rem; border: 1px solid transparent; border-radius: .25rem; }
.alert-dismissible { padding-right: 4rem; }
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; }
button.close { padding: 0; background-color: transparent; border: 0; }
.alert-dismissible .close { position: absolute; top: 0; right: 0; z-index: 2; padding: .75rem 1.25rem; color: inherit; }

/* Badge Bootstrap */
.badge { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; }
.badge-warning { color: #212529; background-color: #ffc107; }
.badge-danger { color: #fff; background-color: #dc3545; }
.badge-success { color: #fff; background-color: #28a745; }
.badge-info { color: #fff; background-color: #17a2b8; }

.btn-badge { position: relative; }
.btn-badge .badge { position: absolute; top: -4px; right: -2px;}

/* AdmintLTE Bootstrap widget chat */
.direct-chat-messages { -webkit-transform: translate(0, 0); transform: translate(0, 0); height: 250px; overflow: auto; padding: 10px; }
.direct-chat-contacts, .direct-chat-messages { transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out; }
.direct-chat-msg, .direct-chat-text { display: block; }
.direct-chat-msg { margin-bottom: 10px; }
.direct-chat-msg::after { display: block; clear: both; content: ""; }
.direct-chat-infos { display: block; font-size: .875rem; margin-bottom: 2px; }
.direct-chat-name { font-weight: 600; }
.direct-chat-timestamp { color: #697582; }
.direct-chat-img { border-radius: 50%; float: left; height: 40px; width: 40px; }
.right .direct-chat-img { float: right; }
.direct-chat-text { border-radius: .3rem; background-color: #d2d6de; border: 1px solid #d2d6de; color: #444; margin: 5px 0 0 50px; padding: 5px 10px; position: relative; }
.direct-chat-text::after, .direct-chat-text::before { border: solid transparent; border-right-color: #d2d6de; content: " "; height: 0; pointer-events: none; position: absolute; right: 100%; top: 15px; width: 0; }
.direct-chat-text::after { border-width: 5px; margin-top: -5px; }
.direct-chat-text::before { border-width: 6px; margin-top: -6px; }
.right .direct-chat-text { margin-left: 0; margin-right: 50px; }
.right .direct-chat-text::after, .right .direct-chat-text::before { border-left-color: #d2d6de; border-right-color: transparent; left: 100%; right: auto; }
.direct-chat-primary .right>.direct-chat-text { background-color: #007bff; border-color: #007bff; color: #fff; }
.direct-chat-primary .right>.direct-chat-text::after, .direct-chat-primary .right>.direct-chat-text::before { border-left-color: #007bff; }

.layanan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* default desktop */
  gap: 20px;
}

.layanan-item {
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontal center */
  justify-content: center; /* vertical center */
  text-align: center;
}

.layanan-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.layanan-item img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.layanan-item img:hover {
  transform: scale(1.1);
}

.layanan-item p {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}

.row-divider {
  grid-column: 1 / -1;
  height: 2px;
  background: #ddd;
  margin: 20px 0;
}


@media (max-width: 1024px) {
  .layanan-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .layanan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) { /* versi mobile */
  .layanan-grid {
    grid-template-columns: 1fr; 
  }

  .layanan-item img {
    width: 180px;  
    height: 180px;
  }
}