* {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font: 500 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, Arial;
      }

      /* üst şerit  */
      .mini-nav {
        position: sticky;
        top: 0;
        z-index: 10;
        border-bottom: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(180%) blur(8px);
      }
      .mini-nav .wrap {
        max-width: 1100px;
        margin: 0 auto;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 900;
        letter-spacing: 0.2px;
      }
      .logo {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: conic-gradient(
          from 210deg,
          var(--accent),
          var(--accent-2),
          var(--accent)
        );
        box-shadow: var(--shadow);
      }
      .brand {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      /* Hero */
      .hero {
        min-height: calc(100vh - 50px);
        display: grid;
        place-items: center;
        padding: 28px 16px 40px;
        background: radial-gradient(
            700px 320px at 10% -10%,
            #efe9ff 0%,
            transparent 60%
          ),
          radial-gradient(700px 320px at 90% 0%, #eef7ff 0%, transparent 60%),
          #fff;
      }
      .card {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
        align-items: center;
      }
      @media (min-width: 950px) {
        .card {
          grid-template-columns: 1.05fr 0.95fr;
        }
      }

      .content {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 26px;
        background: #fff;
        box-shadow: var(--shadow);
      }

      .kicker {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        padding: 8px 12px;
        border-radius: 999px;
        font-weight: 800;
        font-size: 13px;
        color: #4a3a77;
        background: #f4edff;
        border: 1px solid #e9e2ff;
      }

      .title {
        margin: 10px 0 6px;
        font-weight: 900;
        line-height: 1.15;
        font-size: clamp(28px, 5vw, 46px);
        letter-spacing: 0.3px;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: shine 3.2s ease-in-out infinite;
        background-size: 200% 100%;
      }
      @keyframes shine {
        0%,
        100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }

      .subtitle {
        margin: 0;
        color: var(--muted);
        font-size: clamp(14px, 2.6vw, 16px);
      }

      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
      }
      .chip {
        padding: 8px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 800;
        color: #5c3baf;
        background: #fff;
        border: 1px solid var(--border);
      }
      .cta {
        margin-top: 16px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .btn {
        appearance: none;
        cursor: pointer;
        padding: 10px 14px;
        border-radius: 12px;
        font-weight: 900;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--accent);
        transition: 0.2s;
      }
      .btn:hover {
        box-shadow: var(--shadow);
      }
      .btn.primary {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        color: #fff;
        border-color: transparent;
        box-shadow: var(--shadow);
      }

      /* Görsel blok */
      .media {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        background: #fff;
        box-shadow: var(--shadow);
        position: relative;
      }
      .media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .badge-float {
        position: absolute;
        right: 12px;
        top: 12px;
        padding: 8px 10px;
        border-radius: 999px;
        font-weight: 900;
        font-size: 12px;
        background: #fff;
        color: #513096;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
      }

      /* Alt küçük not */
      .footnote {
        margin-top: 18px;
        color: #7b7396;
        font-size: 13px;
      }