:root {
  --tzw-blue: #1e40af;
  --tzw-gold: #c8a64b;
  --tzw-text: #333;
  --tzw-bg: #fff;
}

.tzw-praktisi-container {
  text-align: center;
  margin: 40px auto;
  max-width: 1100px;
  padding: 0 20px;
}
.tzw-heading {
  font-size: 28px;
  color: var(--tzw-blue);
  margin-bottom: 8px;
}
.tzw-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}
.tzw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.tzw-card {
  display: flex;
  gap: 16px;
  background: var(--tzw-bg);
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  text-align: left;
  transition: background .2s;
}
.tzw-card:hover {
  background: #f3f6ff;
}
.tzw-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
}
.tzw-content { flex:1; }
.tzw-name { margin:0; font-size:18px; font-weight:700; color: var(--tzw-blue); }
.tzw-title { margin:6px 0; font-size:14px; font-weight:600; color: var(--tzw-gold); }
.tzw-desc { margin:0; font-size:14px; color:#555; }
.tzw-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 16px;
}
.tzw-modal-backdrop[aria-hidden="false"] {
  display: flex;
}
.tzw-modal {
  background: var(--tzw-bg);
  color: var(--tzw-text);
  border-radius: 12px;
  padding: 24px;
  max-width: 500px;
  text-align: left;
  border: 1px solid #e0e0e0;
}
.tzw-modal-title {
  margin-top: 0;
  font-size: 20px;
  color: var(--tzw-blue);
}
.tzw-close {
  float: right;
  font-size: 22px;
  border: none;
  background: transparent;
  color: var(--tzw-blue);
  cursor: pointer;
}