/* ========================
       COLOR PALETTE
       ======================== */
    :root {
      --primary-blue: #2B92E4;
      --health-green: #4EC9A5;
      --calm-navy: #284860;

      --bg-light: #F7F9FA;
      --card-white: #FFFFFF;
      --soft-gray: #6C7A86;
      --border-light: #E2E8EC;

      --status-available: #4EC9A5;
      --status-not: #E05E5E;
      --status-warn: #EABF3C;
    }

    body {
      background-color: var(--bg-light);
      color: var(--calm-navy);
    }

    /* Hero */
    .hero-section {
      background: url('../img/hero-banner.jpg ') center/cover no-repeat;
      height: 450px;
      display: flex;
      align-items: center;
      color: white;
      position: relative;
    }
    .hero-overlay {
      background: rgba(40, 70, 96, 0.55);
      position: absolute;
      inset: 0;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 500px;
      margin-left: 50px;
    }

    /* Dokter Card */
    .doctor-card {
      border: 1px solid var(--border-light);
      border-radius: 15px;
      background: var(--card-white);
      transition: .2s;
    }
    .doctor-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    }
    .status-badge {
      font-size: .75rem;
      padding: 4px 8px;
      border-radius: 8px;
      color: white;
    }

    /* Artikel */
    .article-card {
      border-radius: 15px;
      border: 1px solid var(--border-light);
      background: var(--card-white);
    }

    /* Footer */
    .footer {
      background: var(--calm-navy);
      color: #fff;
      padding: 40px 0;
    }