* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      color: #1e3a3f;
      background-color: #fefef9;
      line-height: 1.6;
    }

    h1, h2, h3, h4, .display-5 {
      font-weight: 650;
      letter-spacing: -0.02em;
    }
    

    .badge-soft {
      background: #d3e6df !important;
      color: #1e564b;
      padding: 0.6rem 1.4rem;
      border-radius: 50px;
      font-weight: 500;
    }

    /* Warna latar lembut */
    .bg-soft-sage {
      background-color: #f2f9f5;
    }

    .bg-soft-cream {
      background-color: #fcf8f0;
    }

    /* Navbar */
    .navbar-custom {
      background: rgba(255, 255, 245, 0.8);
      backdrop-filter: blur(12px);
      padding: 0.8rem 0;
      box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    }

    .navbar-brand {
      font-weight: 700;
      font-size: 1.6rem;
      color: #1e4a4d !important;
      letter-spacing: -0.03em;
    }

    .brand-tagline {
      font-size: 0.8rem;
      font-weight: 400;
      color: #58807b;
      margin-left: 6px;
    }

    .nav-link {
      font-weight: 500;
      color: #2b5b57 !important;
      margin: 0 0.2rem;
      border-radius: 40px;
      transition: 0.2s;
    }

    .nav-link:hover,
    .nav-link.active {
      background-color: #e0efe9;
      color: #1a4a44 !important;
    }

    /* Header halaman yang tegas */
    .page-header {
      padding: 4rem 0 3rem 0;
      background-color: #fcf8f0; /* cream lembut */
      border-bottom: 1px solid rgba(172, 197, 182, 0.2);
    }

    /* Search & filter */
    .search-wrapper {
      max-width: 600px;
      margin: 0 auto;
    }

    .search-input {
      border-radius: 60px;
      padding: 0.9rem 1.8rem;
      border: 1px solid #d0ded7;
      background: white;
      font-size: 1.1rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.02);
      transition: 0.2s;
    }

    .search-input:focus {
      border-color: #8fb5aa;
      box-shadow: 0 8px 18px rgba(82, 128, 114, 0.1);
      outline: none;
    }

    .filter-badge {
      display: inline-block;
      background: white;
      border: 1px solid #cbdad3;
      border-radius: 40px;
      padding: 0.5rem 1.4rem;
      margin: 0.25rem;
      font-weight: 500;
      color: #37635e;
      transition: 0.2s;
      cursor: pointer;
    }

    .filter-badge:hover,
    .filter-badge.active {
      background: #2a6057;
      border-color: #2a6057;
      color: white;
    }

    /* Card kategori - lebih kaya deskripsi */
    .reflection-card {
      background: white;
      border: none;
      border-radius: 32px;
      padding: 2rem 1.8rem;
      height: 100%;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.02);
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .reflection-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 35px rgba(65, 105, 90, 0.12);
    }

    .icon-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #deede8;
      color: #2a6057;
      width: 68px;
      height: 68px;
      border-radius: 24px;
      margin-bottom: 1.5rem;
      font-size: 2rem;
    }

    .btn-refleksi-card {
      background: transparent;
      border: 1.5px solid #2a6057;
      border-radius: 50px;
      padding: 0.6rem 1.5rem;
      font-weight: 600;
      color: #2a6057;
      transition: 0.2s;
      margin-top: 1.2rem;
      align-self: flex-start;
    }

    .btn-refleksi-card:hover {
      background: #2a6057;
      color: white;
    }

     /* Kartu artikel */
    .article-card {
      background: white;
      border: none;
      border-radius: 32px;
      padding: 2rem 1.8rem;
      height: 100%;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.02);
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .article-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 35px rgba(65, 105, 90, 0.12);
    }

    .article-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #deede8;
      color: #2a6057;
      width: 60px;
      height: 60px;
      border-radius: 20px;
      margin-bottom: 1.2rem;
      font-size: 1.8rem;
    }

    .article-title {
      font-size: 1.5rem;
      font-weight: 650;
      color: #21574b;
      margin-bottom: 0.75rem;
      line-height: 1.3;
    }

    .article-excerpt {
      color: #4f6f68;
      margin-bottom: 1.5rem;
      flex-grow: 1;
    }

    .read-more {
      font-weight: 600;
      color: #2a6057;
      text-decoration: none;
      border-bottom: 2px solid #b8d5c5;
      padding-bottom: 2px;
      align-self: flex-start;
      transition: 0.2s;
    }

    .read-more:hover {
      color: #1d4941;
      border-bottom-color: #1d4941;
    }

    .icon-square {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #deede8;
      color: #2a6057;
      width: 56px;
      height: 56px;
      border-radius: 18px;
      font-size: 1.6rem;
    }

    .divider {
      width: 60px;
      height: 4px;
      background: #9bc0b2;
      border-radius: 4px;
      margin: 1.5rem 0;
    }

    .emergency-box {
      background: #fff4e5;
      border-left: 8px solid #d97747;
      border-radius: 24px;
      padding: 2rem;
    }


    /* Card nilai / pernyataan */
    .value-card {
      background: white;
      border: none;
      border-radius: 32px;
      padding: 2rem 1.8rem;
      height: 100%;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.02);
      transition: 0.3s ease;
    }

    .value-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 35px rgba(65, 105, 90, 0.12);
    }

    /* Cards kategori */
    .card-category {
      border: none;
      border-radius: 32px;
      background: white;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.02);
      transition: all 0.3s cubic-bezier(0.05, 0.8, 0.2, 1);
      height: 100%;
    }

    .card-category:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 35px rgba(65, 105, 90, 0.12);
      background: white;
    }

    .card-category .card-body {
      padding: 2rem 1.4rem;
    }

    .icon-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #deede8;
      color: #2a6057;
      width: 68px;
      height: 68px;
      border-radius: 24px;
      margin-bottom: 1.5rem;
      font-size: 2rem;
    }

    /* Step cards */
    .step-card {
      background: white;
      border: 1px solid rgba(172, 197, 182, 0.3);
      border-radius: 36px;
      padding: 2rem 1.4rem;
      height: 100%;
      transition: 0.25s ease;
    }

    .step-card:hover {
      background: #fefcf7;
      border-color: #acc5b6;
    }

    .step-number {
      font-size: 2.6rem;
      font-weight: 700;
      color: #c8ddd2;
      line-height: 1;
      margin-bottom: 0.8rem;
    }

    /* Buttons */
    .btn-refleksi {
      background: #2a6057;
      border: none;
      border-radius: 50px;
      padding: 0.8rem 2.2rem;
      font-weight: 600;
      color: white;
      transition: 0.2s;
      box-shadow: 0 8px 15px rgba(42,96,87,0.1);
    }

    .btn-refleksi:hover {
      background: #1d4941;
      color: white;
      transform: scale(1.02);
    }

    .btn-insight {
      background: transparent;
      border: 1.8px solid #2a6057;
      border-radius: 50px;
      padding: 0.8rem 2.2rem;
      font-weight: 600;
      color: #2a6057;
      transition: 0.2s;
    }

    .btn-insight:hover {
      background: #2a6057;
      color: white;
    }

    /* disclaimer elegan */
    .disclaimer-elegant {
      background: #f0f7f2;
      border-radius: 28px;
      padding: 2.2rem 2.8rem;
      border: 1px solid #c2d9cf;
      box-shadow: 0 5px 0 #b1ccc1;
    }

    .content-card {
      background: white;
      border: none;
      border-radius: 32px;
      padding: 2rem 2rem;
      height: 100%;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.02);
      transition: 0.2s;
    }

    .content-card:hover {
      box-shadow: 0 20px 35px rgba(65, 105, 90, 0.08);
    }

    /* footer premium */
    .footer-custom {
      background: #e9f1ed;
      color: #28554e;
      padding-top: 3rem;
      padding-bottom: 1.8rem;
      margin-top: 3rem;
      border-radius: 3rem 3rem 0 0;
    }

    .footer-custom a {
      color: #37635e;
      text-decoration: none;
      font-weight: 450;
    }

    .footer-custom a:hover {
      text-decoration: underline;
      color: #1b423d;
    }

    .copyright {
      border-top: 1px solid #b6d0c5;
      padding-top: 1.8rem;
      margin-top: 2rem;
      color: #3d6b63;
      font-size: 0.9rem;
    }

    /* hero image styling */
    .hero-img {
      border-radius: 30px;
      box-shadow: 0 25px 35px -10px rgba(50, 80, 70, 0.15);
      width: 100%;
      height: auto;
      object-fit: cover;
      aspect-ratio: 4/3;
    }

    section {
      padding: 4.5rem 0;
    }

    .section-title {
      position: relative;
      display: inline-block;
      margin-bottom: 1.5rem;
    }

    .section-title:after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 0;
      width: 70px;
      height: 4px;
      background: #9bc0b2;
      border-radius: 4px;
    }

    .text-center .section-title:after {
      left: 50%;
      transform: translateX(-50%);
    }

    @media (max-width: 768px) {
      section { padding: 3rem 0; }
      .hero-img { margin-top: 2rem; }
    }