<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <!-- FULL MOBILE -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>
      Faisal Fachrureza
    </title>
    <link rel="icon" href="data:image/svg+xml,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22&gt;&lt;rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%2300c96b%22/&gt;&lt;text x=%2250%22 y=%2268%22 font-size=%2260%22 text-anchor=%22middle%22 fill=%22white%22 font-family=%22Arial%22 font-weight=%22bold%22&gt;F&lt;/text&gt;&lt;/svg&gt;" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet" />
    <style>
      * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      overflow-x: hidden;
      font-family: &#39;Inter&#39;, sans-serif;
      background: #f4f7f6;
    }

    body {
      max-width: 100vw;
    }

    .app {
      width: 100%;
      min-height: 100vh;
      background: #f4f7f6;
    }

    .hero {
      width: 100%;
      background: linear-gradient(135deg, #00c96b, #1ed760);
      padding: 42px 20px 110px;
      border-bottom-left-radius: 34px;
      border-bottom-right-radius: 34px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: &#34;&#34;;
      position: absolute;
      width: 220px;
      height: 220px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      top: -70px;
      right: -70px;
    }

    .hero::after {
      content: &#34;&#34;;
      position: absolute;
      width: 160px;
      height: 160px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 50%;
      bottom: -80px;
      left: -60px;
    }

    .profile {
      position: relative;
      z-index: 2;
      text-align: center;
    }

    .title {
      color: white;
      font-size: 32px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -1px;
    }

    .content {
      width: 100%;
      margin-top: -72px;
      padding: 0 16px 28px;
      position: relative;
      z-index: 5;
    }

    .card {
      width: 100%;
      background: white;
      border-radius: 24px;
      padding: 18px;
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
      box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.03);
      transition: 0.15s ease;
    }

    .card:active {
      transform: scale(0.98);
    }

    .icon-box {
      min-width: 68px;
      width: 68px;
      height: 68px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .green {
      background: #ebfff3;
      color: #00b85c;
    }

    .icon-box svg {
      width: 32px;
      height: 32px;
      stroke-width: 2;
    }

    .card-text {
      flex: 1;
      min-width: 0;
    }

    .card-title {
      font-size: 16px;
      font-weight: 700;
      color: #111827;
      line-height: 1.4;
    }

    .card-subtitle {
      font-size: 14px;
      color: #6b7280;
      margin-top: 4px;
      line-height: 1.4;
    }

    /* KHUSUS MOBILE */
    @media (min-width: 768px) {
      body {
        background: #e5e7eb;
      }

      .app {
        max-width: 430px;
        margin: auto;
        min-height: 100vh;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
      }
    }
    </style>
  </head>
  <body>
    <div class="app">
      <section class="hero">
        <div class="profile">
          <h1 class="title">
            Faisal Fachrureza
          </h1>
        </div>
      </section>
      <main class="content">
        <div class="card">
          <div class="icon-box green">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              </path>
              <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2">
              </circle>
            </svg>
          </div>
          <div class="card-text">
            <div class="card-title">
              Catat jurnal harian
            </div>
            <div class="card-subtitle">
              setiap hari sejak 2022
            </div>
          </div>
        </div>
        <div class="card">
          <div class="icon-box green">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              </path>
              <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2">
              </circle>
            </svg>
          </div>
          <div class="card-text">
            <div class="card-title">
              Catat jurnal syukur
            </div>
            <div class="card-subtitle">
              setiap hari sejak 2022
            </div>
          </div>
        </div>
        <div class="card">
          <div class="icon-box green">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              </path>
              <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2">
              </circle>
            </svg>
          </div>
          <div class="card-text">
            <div class="card-title">
              Catat kebiasaan
            </div>
            <div class="card-subtitle">
              setiap hari sejak 2022
            </div>
          </div>
        </div>
        <div class="card">
          <div class="icon-box green">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              </path>
              <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2">
              </circle>
            </svg>
          </div>
          <div class="card-text">
            <div class="card-title">
              Catat pengeluaran
            </div>
            <div class="card-subtitle">
              setiap hari sejak 2018
            </div>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>
