:root {
  --ai-bg: #0b0d10;
  --ai-ink: #e8ecef;
  --ai-dim: #8a949c;
  --ai-accent: #7cf5c4;
  --ai-line: rgba(124, 245, 196, .07);
  --me-bg: #f8f9fa;
  --me-ink: #202124;
  --me-dim: #5f6368;
  --me-accent: #0b8457;
  --me-soft: #0b8457;
  --me-dot: rgba(32, 33, 36, .08);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --me-font: "Plus Jakarta Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { font-family: var(--mono); background: var(--ai-bg); overflow: hidden; -webkit-font-smoothing: antialiased; }

/* Dua sisi berbagi baris yang sama (subgrid), jadi kicker, kata besar, paragraf, dan tombol
   di ME dan AI selalu sejajar walau panjang tulisannya berbeda. */
.split {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr repeat(4, auto);
  height: 100vh; height: 100dvh; transition: grid-template-columns .7s var(--ease);
}
.split:has(.side-me:is(:hover, :focus-visible)) { grid-template-columns: 1.6fr 1fr; }
.split:has(.side-ai:is(:hover, :focus-visible)) { grid-template-columns: 1fr 1.6fr; }

.side {
  position: relative; min-width: 0; grid-row: 1 / -1;
  display: grid; grid-template-rows: subgrid; row-gap: 18px;
  padding: clamp(24px, 5vw, 64px);
  text-decoration: none; overflow: hidden; isolation: isolate;
}
.side > * { justify-self: start; align-self: start; }
.side .kicker { grid-row: 3; }
.side .word { grid-row: 2; align-self: end; }
.side p { grid-row: 4; }
.side .cta { grid-row: 5; }
.side:focus-visible { outline: none; }
.side:focus-visible .cta { text-decoration: underline; text-underline-offset: 6px; }

.kicker { font: 400 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.word { font-weight: 400; line-height: .78; font-size: clamp(120px, 21vw, 340px); letter-spacing: -.04em; }
.side p { max-width: 34ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; }
.cta { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1 var(--mono); }
.cta i { font-style: normal; transition: transform .4s var(--ease); }
.side:hover .cta i { transform: translateX(6px); }

/* ---- AI ---- */
.side-ai { background: var(--ai-bg); color: var(--ai-ink); }
.side-ai::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--ai-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ai-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 80% 100%, #000 10%, transparent 75%);
}
.side-ai::after {
  content: ""; position: absolute; z-index: -1; width: 60vmax; height: 60vmax;
  right: -20vmax; bottom: -30vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 245, 196, .14), transparent 60%);
  transition: opacity .7s var(--ease); opacity: .6;
}
.side-ai:hover::after { opacity: 1; }
.side-ai .kicker, .side-ai p { color: var(--ai-dim); }
.side-ai .word { font-family: var(--mono); font-weight: 500; letter-spacing: -.06em; }
.side-ai .word span { color: var(--ai-accent); animation: blink 1.1s steps(1) infinite; }
.side-ai .cta { color: var(--ai-accent); }

/* ---- ME ---- */
.side-me { background: var(--me-bg); color: var(--me-ink); }
.side-me::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--me-dot) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 20% 100%, #000 10%, transparent 75%);
}
.side-me .kicker { font-family: var(--me-font); font-weight: 600; color: var(--me-dim); }
.side-me p { font-family: var(--me-font); color: var(--me-dim); }
.side-me .word { font-family: var(--me-font); font-weight: 800; letter-spacing: -.03em; }
.side-me .word span { color: var(--me-soft); }
.side-me .cta { font-family: var(--me-font); font-weight: 600; color: var(--me-accent); }

@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 720px) {
  .split { display: flex; flex-direction: column; }
  .side { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 24px 20px; }
  .side > *, .side .word { align-self: flex-start; }
  .side .word { order: -1; }
  .word { font-size: clamp(96px, 30vw, 160px); }
}

@media (prefers-reduced-motion: reduce) {
  .split, .side-ai::after, .cta i { transition: none; }
  .side-ai .word span { animation: none; }
}