/* ═══════════════════════════════════════════════════════
     BANTUAN LAYANAN — Page Styles
  ═══════════════════════════════════════════════════════ */

  .bl-root {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-12);
    max-width: 960px;
  }

  /* ── Page header ── */
  .bl-header {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--surface-muted);
  }
  .bl-header__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 4px;
  }
  .bl-header__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    line-height: var(--leading-tight);
  }
  .bl-header__subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-relaxed);
  }
  .bl-header__sla {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    background: var(--surface-subtle);
    border: 1px solid var(--surface-muted);
    border-radius: var(--radius-full);
    padding: 3px var(--space-3);
  }

  /* ── Three-column zone grid ── */
  .bl-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
  }
  @media (max-width: 900px) {
    .bl-main-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .bl-main-grid { grid-template-columns: 1fr; }
  }

  /* ── Zone card ── */
  .bl-zone {
    background: var(--surface-card);
    border: 1px solid var(--surface-muted);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .bl-zone__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--surface-muted);
    background: var(--surface-subtle);
  }
  .bl-zone__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
  }
  .bl-zone__icon--search  { background: var(--status-info-bg);    color: var(--status-info); }
  .bl-zone__icon--ticket  { background: var(--brand-primary-subtle); color: var(--brand-primary); }
  .bl-zone__icon--contact { background: var(--status-success-bg); color: var(--status-success); }
  .bl-zone__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
    flex: 1;
  }
  .bl-zone__meta {
    font-size: 10px;
    color: var(--text-tertiary);
    white-space: nowrap;
  }
  .bl-zone__body {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
  }
  .bl-zone__footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--surface-muted);
    background: var(--surface-subtle);
  }

  /* ── FAQ search ── */
  .bl-search-wrap {
    position: relative;
  }
  .bl-search-wrap svg {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
  }
  .bl-search-input {
    width: 100%;
    height: 34px;
    padding: 0 var(--space-3) 0 calc(var(--space-3) + 18px);
    background: var(--surface-subtle);
    border: 1px solid var(--surface-muted);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition-fast);
  }
  .bl-search-input:focus { border-color: var(--brand-primary); }

  /* ── FAQ categories ── */
  .bl-faq-cats {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
  }
  .bl-faq-cat {
    padding: 2px var(--space-2);
    font-size: 10px;
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    border: 1px solid var(--surface-muted);
    background: var(--surface-subtle);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  }
  .bl-faq-cat:hover,
  .bl-faq-cat--active {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
  }

  .bl-faq-section-label {
    font-size: 10px;
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0;
  }

  /* ── FAQ list ── */
  .bl-faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .bl-faq-item {
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .bl-faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-primary);
    cursor: pointer;
    background: var(--surface-subtle);
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-sans);
    transition: background var(--transition-fast);
    border-radius: var(--radius-md);
  }
  .bl-faq-item__q:hover { background: var(--surface-muted); }
  .bl-faq-item__q-chevron {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform var(--transition-fast);
  }
  .bl-faq-item--open .bl-faq-item__q-chevron { transform: rotate(180deg); }
  .bl-faq-item__a {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: 1px solid var(--surface-muted);
    background: var(--surface-card);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
  .bl-faq-item__a code {
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--surface-subtle);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
  }

  /* ── No results ── */
  .bl-faq-empty {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-align: center;
    padding: var(--space-4) 0;
    display: none;
  }

  /* ── Ticket form ── */
  .bl-ticket-success {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--status-success);
    background: var(--status-success-bg);
    border: 1px solid var(--status-success);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
  }
  .bl-ticket-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .bl-ticket-history {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--space-2);
  }
  .bl-ticket-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-subtle);
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-muted);
  }
  .bl-ticket-id {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    flex-shrink: 0;
  }
  .bl-ticket-status {
    font-size: 9px;
    font-weight: var(--font-bold);
    padding: 1px 5px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }
  .bl-ticket-status--open { background: var(--status-warning-bg); color: var(--status-warning); }
  .bl-ticket-status--done { background: var(--status-success-bg); color: var(--status-success); }
  .bl-ticket-desc { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── Contact cards ── */
  .bl-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .bl-contact-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-subtle);
    border: 1px solid var(--surface-muted);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
  }
  .bl-contact-card:hover { border-color: var(--brand-primary); }
  .bl-contact-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    flex-shrink: 0;
  }
  .bl-contact-info { flex: 1; min-width: 0; }
  .bl-contact-name { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-primary); }
  .bl-contact-role { font-size: 10px; color: var(--text-tertiary); margin: 1px 0; }
  .bl-contact-avail {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--status-success);
    font-weight: var(--font-medium);
  }
  .bl-contact-avail--away { color: var(--text-tertiary); }
  .bl-avail-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-success);
    flex-shrink: 0;
  }
  .bl-contact-action {
    display: flex;
    gap: var(--space-1);
  }
  .bl-contact-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-card);
    border: 1px solid var(--surface-muted);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
  }
  .bl-contact-btn:hover { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }

  /* ── Escalation button ── */
  .bl-escalate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    background: var(--status-danger-bg);
    border: 1.5px solid var(--status-danger);
    border-radius: var(--radius-lg);
    color: var(--status-danger);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--transition-fast);
    margin-top: auto;
  }
  .bl-escalate-btn:hover { background: var(--status-danger); color: white; }

  /* ── Second row: Resources + SLA guide ── */
  .bl-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
  }
  @media (max-width: 640px) { .bl-secondary-grid { grid-template-columns: 1fr; } }

  /* ── Resource links ── */
  .bl-resource-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .bl-resource-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-subtle);
    border: 1px solid var(--surface-muted);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }
  .bl-resource-item:hover { border-color: var(--brand-primary); background: var(--brand-primary-subtle); }
  .bl-resource-item__icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--surface-card);
    border: 1px solid var(--surface-muted);
    flex-shrink: 0;
    color: var(--brand-primary);
  }
  .bl-resource-item__meta { flex: 1; min-width: 0; }
  .bl-resource-item__name { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 1px; }
  .bl-resource-item__desc { font-size: 10px; color: var(--text-tertiary); margin: 0; }
  .bl-resource-item__arrow { color: var(--text-tertiary); flex-shrink: 0; }

  /* ── SLA guide ── */
  .bl-sla-table { width: 100%; border-collapse: collapse; }
  .bl-sla-table th, .bl-sla-table td {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--surface-muted);
    text-align: left;
  }
  .bl-sla-table th {
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--surface-subtle);
  }
  .bl-sla-table td { color: var(--text-secondary); }
  .bl-sla-table tr:last-child td { border-bottom: none; }
  .bl-priority-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
  }

  /* Sidebar section label compat */
  .sidebar__section-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    padding: 0 var(--space-4) var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.075em;
    display: block;
  }