/* ============================================================
     TOKEN SYSTEM
     Palet: Cherry Cola (#9A0002) x Cream Vanilla (#EFE6DE)
     Konsep: layar edit video — timeline, playhead, timecode, REC.
  ============================================================ */
  :root{
    --cherry:        #9A0002;
    --cherry-light:  #D3272C;
    --cherry-glow:   rgba(154,0,2,.45);
    --cream:         #EFE6DE;
    --cream-dim:     #b6ab9f;
    --cream-faint:   #8a7f74;
    --ink:           #0a0504;
    --ink-2:         #120907;
    --card:          #170e0b;
    --card-hover:    #1f1310;
    --line:          rgba(239,230,222,.12);
    --line-strong:   rgba(239,230,222,.22);

    --font-display: 'Anton', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    --ease: cubic-bezier(.16,.84,.44,1);
  }

  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{
    background:var(--ink);
    scroll-behavior:smooth;
    scroll-snap-type: y proximity;
  }
  body{
    background:var(--ink);
    color:var(--cream);
    font-family:var(--font-body);
    line-height:1.55;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  body.is-locked{ overflow:hidden; height:100vh; }

  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
  ::selection{ background:var(--cherry); color:var(--cream); }

  h1,h2,h3{ font-family:var(--font-display); font-weight:400; letter-spacing:.01em; text-transform:uppercase; line-height:.98; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:12px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--cherry-light);
  }
  .eyebrow::before{
    content:""; width:22px; height:1px; background:var(--cherry-light);
  }

  .container{ max-width:1180px; margin:0 auto; padding:0 32px; }

  /* ---------- Grain overlay (static texture, not animation) ---------- */
  .grain{
    position:fixed; inset:0; z-index:2; pointer-events:none;
    opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ---------- Placeholder for your OWN background animation ----------
     Silakan tambahkan animasi background kamu di sini (canvas/Three.js/
     Lottie/particle script/dll). Div ini sudah full-screen, fixed, dan
     ditaruh di belakang semua konten (z-index:0). Tinggal isi #bgAnimation
     lewat JS kamu sendiri, atau ganti jadi <canvas id="bgAnimation">.
  ------------------------------------------------------------------- */
  .bg-animation-layer{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 60% 45% at 18% 8%, rgba(154,0,2,.16), transparent 60%),
      radial-gradient(ellipse 50% 40% at 85% 92%, rgba(154,0,2,.10), transparent 60%);
  }

  /* ============================================================
     PRELOADER — simulasi "loading reel" sebelum situs tampil
  ============================================================ */
  .preloader{
    position:fixed; inset:0; z-index:100;
    background:var(--ink);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:22px;
    transition:opacity .7s var(--ease), visibility .7s var(--ease);
  }
  .preloader.is-hidden{ opacity:0; visibility:hidden; }
  .preloader__mark{
    font-family:var(--font-display); font-size:15vw; line-height:.9; color:var(--cream);
    letter-spacing:.02em;
  }
  .preloader__bar{
    width:220px; height:2px; background:var(--line); position:relative; overflow:hidden;
  }
  .preloader__bar::after{
    content:""; position:absolute; left:0; top:0; bottom:0; width:0%;
    background:var(--cherry-light);
    animation:loadfill 1.1s var(--ease) forwards;
  }
  @keyframes loadfill{ to{ width:100%; } }
  .preloader__label{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.25em;
    color:var(--cream-dim); text-transform:uppercase;
    display:flex; align-items:center; gap:8px;
  }
  .rec-dot{
    width:7px; height:7px; border-radius:50%; background:var(--cherry-light);
    animation:blink 1s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity:.15; } }

  /* ============================================================
     TOP NAV
  ============================================================ */
  .topnav{
    position:fixed; top:0; left:0; right:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 32px;
    background:linear-gradient(to bottom, rgba(10,5,4,.85), transparent);
    backdrop-filter:blur(2px);
  }
  .topnav__logo{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-weight:700; font-size:14px; letter-spacing:.05em;
    white-space:nowrap; overflow:hidden; min-width:0;
  }
  .topnav__logo-badge{ flex:none; }
  .topnav__logo-badge{
    width:32px; height:32px; border:1px solid var(--line-strong); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:13px; color:var(--cherry-light);
  }
  .topnav__links{
    display:flex; gap:36px; font-family:var(--font-mono); font-size:12px;
    letter-spacing:.14em; text-transform:uppercase;
  }
  .topnav__links a{
    position:relative; color:var(--cream-dim); transition:color .3s var(--ease);
    padding:4px 0;
  }
  .topnav__links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
    background:var(--cherry-light); transition:right .35s var(--ease);
  }
  .topnav__links a:hover{ color:var(--cream); }
  .topnav__links a.is-active{ color:var(--cream); }
  .topnav__links a.is-active::after{ right:0; }

  .topnav__toggle{
    display:none; flex-direction:column; gap:5px; z-index:60;
  }
  .topnav__toggle span{ width:22px; height:1px; background:var(--cream); transition:.3s var(--ease); }

  .mobile-menu{
    position:fixed; inset:0; z-index:50; background:var(--ink);
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:32px 40px;
    transform:translateY(-100%); transition:transform .5s var(--ease);
  }
  .mobile-menu.is-open{ transform:translateY(0); }
  .mobile-menu a{
    font-family:var(--font-display); font-size:38px; text-transform:uppercase; color:var(--cream);
  }
  .mobile-menu__num{ font-family:var(--font-mono); font-size:12px; color:var(--cherry-light); margin-right:14px; }

  /* ============================================================
     TIMELINE SCRUBBER — elemen signature (playhead di sisi layar)
  ============================================================ */
  .scrubber{
    position:fixed; right:28px; top:50%; transform:translateY(-50%);
    z-index:35; display:flex; flex-direction:column; align-items:center; gap:14px;
  }
  .scrubber__timecode{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--cream-dim);
    writing-mode:vertical-rl; margin-bottom:6px;
  }
  .scrubber__track{
    position:relative; width:1px; height:220px; background:var(--line-strong);
  }
  .scrubber__fill{
    position:absolute; top:0; left:0; width:100%; height:0%;
    background:var(--cherry-light); transition:height .15s linear;
  }
  .scrubber__ticks{
    position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  }
  .scrubber__tick{
    position:relative; transform:translateX(-50%);
    width:9px; height:9px; border-radius:50%;
    background:var(--ink); border:1px solid var(--line-strong);
    cursor:pointer; transition:.3s var(--ease);
  }
  .scrubber__tick.is-active{
    background:var(--cherry-light); border-color:var(--cherry-light);
    box-shadow:0 0 0 4px var(--cherry-glow);
  }
  .scrubber__tick-label{
    position:absolute; right:22px; top:50%; transform:translateY(-50%);
    font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--cream-dim); white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity .25s var(--ease), right .25s var(--ease);
  }
  .scrubber__tick:hover .scrubber__tick-label{ opacity:1; right:18px; }
  .scrubber__fps{
    font-family:var(--font-mono); font-size:10px; color:var(--cream-faint); letter-spacing:.14em;
  }
  @media (max-width:900px){ .scrubber{ display:none; } }

  /* ============================================================
     SCENE (section) base
  ============================================================ */
  .scene{
    position:relative; z-index:5;
    min-height:100svh; min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:120px 0 90px;
    scroll-snap-align:start;
    border-bottom:1px solid var(--line);
  }

  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  .reveal-d1{ transition-delay:.08s; }
  .reveal-d2{ transition-delay:.16s; }
  .reveal-d3{ transition-delay:.24s; }
  .reveal-d4{ transition-delay:.32s; }

  .next-btn{
    position:absolute; left:50%; bottom:38px; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--cream-dim); transition:color .3s var(--ease);
  }
  .next-btn:hover{ color:var(--cream); }
  .next-btn__ring{
    width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    animation:pulsering 2.6s var(--ease) infinite;
  }
  .next-btn:hover .next-btn__ring{ border-color:var(--cherry-light); }
  @keyframes pulsering{
    0%,100%{ box-shadow:0 0 0 0 var(--cherry-glow); }
    50%{ box-shadow:0 0 0 8px transparent; }
  }
  .next-btn svg{ width:12px; height:12px; fill:currentColor; }

  /* ============================================================
     01 — HERO / BERANDA
  ============================================================ */
  .hero{ padding-top:150px; }
  .hero__grid{
    display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
  }
  .hero__name{
    font-size:clamp(46px,7.4vw,96px); color:var(--cream);
  }
  .hero__name span{ color:var(--cherry-light); }
  .hero__role{
    display:flex; align-items:center; gap:12px; margin-top:18px;
    font-family:var(--font-mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--cream-dim);
  }
  .hero__tagline{
    font-family:var(--font-display); text-transform:none; font-size:clamp(20px,2.2vw,28px);
    color:var(--cream); margin-top:26px; max-width:520px; line-height:1.25;
  }
  .hero__about{
    margin-top:22px; max-width:520px; color:var(--cream-dim); font-size:15.5px;
  }
  .hero__cta{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 26px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; border-radius:999px; transition:.3s var(--ease);
  }
  .btn--solid{ background:var(--cherry); color:var(--cream); }
  .btn--solid:hover{ background:var(--cherry-light); transform:translateY(-2px); box-shadow:0 10px 26px var(--cherry-glow); }
  .btn--ghost{ border:1px solid var(--line-strong); color:var(--cream-dim); }
  .btn--ghost:hover{ border-color:var(--cream); color:var(--cream); transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.3); }

  .hero__frame{
    position:relative; aspect-ratio:4/5; width:100%;
    background:linear-gradient(155deg,#2a0f0d,var(--ink-2) 60%);
    border:1px solid var(--line-strong); overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 90px -20px var(--cherry-glow);
  }
  /* GANTI ISI .hero__frame DENGAN FOTO ASLI KAMU:
     <img src="foto-kamu.jpg" alt="Dava Fajar Al'valah"> mengisi penuh frame ini. */
  .hero__frame img.real-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
  .hero__frame-mono{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:min(30vw,180px); color:rgba(239,230,222,.06);
  }
  .hero__frame-corner{ position:absolute; width:22px; height:22px; border-color:var(--cream-faint); }
  .hero__frame-corner.tl{ top:16px; left:16px; border-top:1px solid; border-left:1px solid; }
  .hero__frame-corner.tr{ top:16px; right:16px; border-top:1px solid; border-right:1px solid; }
  .hero__frame-corner.bl{ bottom:16px; left:16px; border-bottom:1px solid; border-left:1px solid; }
  .hero__frame-corner.br{ bottom:16px; right:16px; border-bottom:1px solid; border-right:1px solid; }
  .hero__frame-tag{
    position:absolute; top:16px; left:16px; margin-left:26px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--cream-faint);
    display:flex; align-items:center; gap:6px;
  }
  .hero__frame-caption{
    position:absolute; bottom:16px; left:16px; right:16px; margin-bottom:26px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--cream-faint);
    text-align:center;
  }

  @media (max-width:860px){
    .hero__grid{ grid-template-columns:1fr; gap:44px; }
    .hero{ padding-top:130px; }
    .hero__frame{ order:-1; max-width:340px; margin:0 auto; }
  }

  /* ============================================================
     02 — PROYEK
  ============================================================ */
  .section-head{ margin-bottom:56px; max-width:640px; }
  .section-head h2{ font-size:clamp(34px,5vw,58px); margin-top:14px; }
  .section-head p{ color:var(--cream-dim); margin-top:16px; font-size:15px; }


  .project-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  }

  /* ✏️ DIUBAH: dua grup baru (Potret & Landscape) — tiap grup dapat label
     kecil bergaya "sub-eyebrow" biar konsisten sama bahasa desain situs
     (font mono, huruf besar, jarak antar huruf lebar) */
  .project-group{ margin-bottom:52px; }
  .project-group:last-child{ margin-bottom:0; }
  .project-group__head{
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
    margin-bottom:22px; padding-bottom:12px; border-bottom:1px solid var(--line);
  }
  .project-group__label{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--cream);
  }
  .project-group__hint{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
    color:var(--cream-faint);
  }

  .project-card{
    position:relative; border:1px solid var(--line); background:var(--card);
    overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.28);
    transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
  }
  .project-card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:0 22px 46px rgba(0,0,0,.4); }

  /* ✏️ DIUBAH: rasio dasar sekarang landscape (16/9), dan ada modifier
     ".is-portrait" (9/16) untuk video yang formatnya potret/vertikal —
     jadi video asli kamu tidak lagi dipaksa gepeng ke 16:9. */
  .project-card__media{
      position:relative;
      aspect-ratio:16/9;
      background:linear-gradient(150deg,#26100d,var(--ink-2));
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
  }
  .project-card__media.is-portrait{ aspect-ratio:9/16; }
  .project-card__media.is-landscape{ aspect-ratio:16/9; }
  /* kartu potret berdampingan 3 di satu baris jadi cukup tinggi — batasi
     supaya tidak terlalu menjulang di layar besar */
  .project-card__media.is-portrait{ max-height:70vh; }

  /* ✏️ DIUBAH: strip lubang film (sprocket) di tepi atas — sentuhan kecil
     bertema "editor video" yang menyatu dengan elemen REC/timecode lain */
  .project-card__media::after{
      content:"";
      position:absolute; top:0; left:0; right:0; height:8px; z-index:3;
      background-image:radial-gradient(circle, rgba(10,5,4,.9) 2.5px, transparent 2.6px);
      background-size:16px 8px;
      background-position:6px 2px;
      opacity:.55;
  }

  .project-card__media[data-video-card]{ cursor:pointer; }
  .project-card__media video{
      width:100%;
      height:100%;
      object-fit:cover;
      position:relative;
      z-index:1;
      transition:transform .6s var(--ease);
  }
  .project-card:hover .project-card__media video{ transform:scale(1.05); }

  /* ✏️ DIUBAH: tanda "REC" merah kecil di pojok kiri atas tiap video asli,
     senada dengan tag REC yang sudah ada di foto Hero */
  .project-card__rec{
      position:absolute; top:10px; left:12px; z-index:3;
      display:flex; align-items:center; gap:6px;
      font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
      color:var(--cream); background:rgba(10,5,4,.55); padding:4px 8px;
  }

  /* ✏️ DIUBAH: tombol bisu/bunyi kustom, gantinya kontrol video bawaan
     browser yang terlihat generik dan tidak senada dengan tema situs */
  .project-card__mute{
      position:absolute; bottom:10px; left:12px; z-index:3;
      width:28px; height:28px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      background:rgba(10,5,4,.55); border:1px solid var(--line-strong);
      color:var(--cream); transition:.3s var(--ease);
  }
  .project-card__mute:hover{ background:var(--cherry); border-color:var(--cherry); }
  .project-card__mute svg{ width:13px; height:13px; fill:currentColor; }

  /* ✏️ DIUBAH: penanda slot kosong untuk kartu yang belum diisi video asli */
  .project-card__media.is-placeholder{ background:linear-gradient(150deg,#26100d 0%,var(--ink-2) 70%); }
  .project-card__slot{
      position:absolute; top:10px; left:12px; z-index:3;
      font-family:var(--font-mono); font-size:9px; letter-spacing:.16em;
      color:var(--cream-faint); border:1px dashed var(--line-strong);
      padding:4px 8px; text-transform:uppercase;
  }

  .project-card__media::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:repeating-linear-gradient(
          115deg,
          rgba(239,230,222,.035) 0 2px,
          transparent 2px 26px
      );
      pointer-events:none;
  }

  /* ✏️ DIUBAH: bingkai sudut tipis yang muncul saat hover — elemen ini
     "meminjam" bahasa visual bingkai foto di Hero (.hero__frame-corner)
     supaya kartu proyek terasa satu keluarga desain dengan bagian atas. */
  .project-card__corner{
      position:absolute; width:14px; height:14px; z-index:3;
      border-color:var(--cherry-light); opacity:0; transition:opacity .3s var(--ease);
  }
  .project-card__corner.tl{ top:8px; left:8px; border-top:1px solid; border-left:1px solid; }
  .project-card__corner.tr{ top:8px; right:8px; border-top:1px solid; border-right:1px solid; }
  .project-card__corner.bl{ bottom:8px; left:8px; border-bottom:1px solid; border-left:1px solid; }
  .project-card__corner.br{ bottom:8px; right:8px; border-bottom:1px solid; border-right:1px solid; }
  .project-card:hover .project-card__corner{ opacity:1; }

  .project-card__play{
    width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; position:relative; z-index:2;
    transition:.35s var(--ease); background:rgba(10,5,4,.4);
  }
  .project-card:hover .project-card__play{ background:var(--cherry); border-color:var(--cherry); transform:scale(1.08); }
  .project-card__play svg{ width:13px; height:13px; fill:var(--cream); margin-left:2px; }
  /* ✏️ DIUBAH: ring berdenyut halus di sekitar tombol play placeholder,
     pakai animasi @keyframes pulsering yang sudah ada di next-btn */
  .project-card__media.is-placeholder .project-card__play::after{
      content:""; position:absolute; inset:-1px; border-radius:50%;
      animation:pulsering 2.6s var(--ease) infinite;
  }
  /* ✏️ DIUBAH: bar progress mini di tepi bawah video — mirip motif
     .scrubber__fill / .skill-row__fill yang sudah ada, jadi kelihatan
     seperti "playhead" mini di tiap klip. Terisi otomatis lewat script.js
     berdasarkan waktu tonton video (bukan angka manual). */
  .project-card__progress{
      position:absolute; left:0; right:0; bottom:0; height:3px; z-index:5;
      background:rgba(239,230,222,.14);
  }
  .project-card__progress-fill{
      display:block; height:100%; width:0%;
      background:linear-gradient(90deg,var(--cherry),var(--cherry-light));
      transition:width .12s linear;
  }

  .project-card__dur{
    position:absolute; bottom:10px; right:12px; z-index:5; font-family:var(--font-mono); font-size:10px;
    color:var(--cream-dim); background:rgba(10,5,4,.55); padding:3px 7px; letter-spacing:.05em;
  }
  /* ✏️ DIUBAH: body sekarang jadi caption tipis yang menempel di atas video
     (bukan blok teks + deskripsi di bawah kartu) — video jadi fokus utama,
     tampilan lebih "pure video", senada dengan gaya galeri reel/portofolio. */
  .project-card__body{
    position:absolute; left:0; right:0; bottom:0; z-index:4;
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    padding:26px 16px 14px;
    background:linear-gradient(to top, rgba(6,3,2,.92) 0%, rgba(6,3,2,.55) 55%, transparent 100%);
    pointer-events:none;
  }
  .project-card__cat{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; color:var(--cherry-light); text-transform:uppercase; }
  .project-card__title{ font-family:var(--font-display); font-size:15px; text-transform:none; color:var(--cream); letter-spacing:.01em; }

  @media (max-width:1000px){ .project-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .project-grid{ grid-template-columns:1fr; } }

  /* ============================================================
     03 — SKILL / SOFTWARE
  ============================================================ */
  .skills__layout{ display:grid; grid-template-columns:1.1fr .9fr; gap:70px; }
  .skill-row{ margin-bottom:22px; }
  .skill-row__top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
  .skill-row__name{ font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; color:var(--cream); display:inline-flex; align-items:center; gap:9px; }
  .skill-row__logo{ width:16px; height:16px; flex:none; filter:brightness(0) invert(1); opacity:.92; }
  .skill-row__logo--capcut{ filter:none; }
  .skill-row__pct{ font-family:var(--font-mono); font-size:11px; color:var(--cream-faint); }
  .skill-row__track{ height:3px; background:var(--line); position:relative; overflow:hidden; }
  .skill-row__fill{
    position:absolute; top:0; left:0; height:100%; width:0%;
    background:linear-gradient(90deg,var(--cherry),var(--cherry-light));
    transition:width 1.3s var(--ease);
  }

  .chip-cloud{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
  .chip{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
    padding:9px 16px; border:1px solid var(--line-strong); border-radius:999px; color:var(--cream-dim);
    transition:.3s var(--ease);
  }
  .chip:hover{ color:var(--cream); border-color:var(--cherry-light); background:rgba(154,0,2,.12); transform:translateY(-2px); }

  .skills__side-label{ margin-bottom:24px; }
  .skills__side-label h3{ font-size:26px; color:var(--cream); }
  .skills__side-label p{ color:var(--cream-dim); font-size:14px; margin-top:10px; max-width:380px; }

  @media (max-width:860px){ .skills__layout{ grid-template-columns:1fr; gap:40px; } }

  /* ============================================================
     04 — KARIER (timeline bergaya keyframe editor)
  ============================================================ */
  .career-track{ position:relative; max-width:760px; }
  .career-track::before{
    content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1px; background:var(--line-strong);
  }
  .career-item{ position:relative; padding-left:50px; padding-bottom:52px; }
  .career-item:last-child{ padding-bottom:0; }
  .career-item__key{
    position:absolute; left:0; top:2px; width:19px; height:19px;
    background:var(--ink); border:1px solid var(--cherry-light);
    transform:rotate(45deg);
  }
  .career-item.is-current .career-item__key{ background:var(--cherry-light); box-shadow:0 0 0 5px var(--cherry-glow); }
  .career-item__meta{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
  .career-item__stage{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; color:var(--cherry-light); text-transform:uppercase; }
  .career-item__year{ font-family:var(--font-mono); font-size:11px; color:var(--cream-faint); }
  .career-item__title{ font-family:var(--font-display); font-size:24px; text-transform:none; color:var(--cream); margin-top:8px; }
  .career-item__desc{ color:var(--cream-dim); font-size:14.5px; margin-top:10px; max-width:520px; }

  /* ============================================================
     05 — KONTAK
  ============================================================ */
  .contact{ text-align:center; align-items:center; border-bottom:none; }
  .contact__inner{ max-width:640px; margin:0 auto; }
  .contact h2{ font-size:clamp(38px,6.5vw,72px); margin-top:16px; color:var(--cream); }
  .contact p.lead{ color:var(--cream-dim); margin-top:18px; font-size:15.5px; }
  .contact__actions{ display:flex; justify-content:center; gap:16px; margin-top:38px; flex-wrap:wrap; }
  .contact__direct{
    margin-top:46px; display:flex; justify-content:center; gap:40px; flex-wrap:wrap;
    font-family:var(--font-mono); font-size:13px; color:var(--cream-dim);
  }
  .contact__direct a{ transition:color .3s var(--ease); }
  .contact__direct a:hover{ color:var(--cherry-light); }
  .contact__social{ display:flex; justify-content:center; gap:22px; margin-top:40px; }
  /* ✏️ DIUBAH: ikon sosial sekarang SVG (fill), bukan teks — tambah sedikit
     transform saat hover biar terasa hidup, warna ikon ikut warna teks */
  .contact__social a{
    width:38px; height:38px; border:1px solid var(--line-strong); border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:var(--cream-dim);
    transition:.3s var(--ease); font-family:var(--font-mono); font-size:11px;
  }
  .contact__social a svg{ fill:currentColor; }
  .contact__social a:hover{ border-color:var(--cherry-light); color:var(--cream); transform:translateY(-3px); box-shadow:0 10px 22px var(--cherry-glow); }
  .footer{
    margin-top:80px; padding-top:26px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    font-family:var(--font-mono); font-size:11px; color:var(--cream-faint); letter-spacing:.06em;
  }

  /* ✏️ DIUBAH: notifikasi kecil "Email disalin" — muncul dari bawah,
     dipicu oleh script.js saat tombol/link email diklik */
  .toast{
    position:fixed; left:50%; bottom:28px; z-index:90;
    transform:translate(-50%,20px); opacity:0; pointer-events:none;
    background:var(--cream); color:var(--ink); font-family:var(--font-mono);
    font-size:12px; letter-spacing:.05em; padding:12px 20px; border-radius:999px;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .toast.is-visible{ opacity:1; transform:translate(-50%,0); }

  @media (max-width:640px){
    .container{ padding:0 20px; }
    .scene{ padding:100px 0 70px; }
    .topnav{ padding:16px 18px; }
    .topnav__logo{ font-size:12px; gap:8px; max-width:calc(100% - 60px); }
    .topnav__logo-badge{ width:28px; height:28px; font-size:11px; }
    .topnav__links{ display:none; }
    .topnav__toggle{ display:flex; }

    .hero{ padding-top:108px; }
    .hero__tagline{ font-size:19px; }
    .hero__about{ font-size:14.5px; }
    .hero__cta{ flex-direction:column; gap:12px; }
    .hero__cta .btn{ width:100%; justify-content:center; }

    .mobile-menu a{ font-size:32px; }
    .mobile-menu{ padding:28px 26px; gap:20px; }

    .section-head{ margin-bottom:40px; }

    .project-card__media.is-portrait{ max-height:60vh; }

    .career-item{ padding-left:40px; padding-bottom:40px; }

    .contact__actions{ flex-direction:column; align-items:stretch; }
    .contact__actions .btn{ justify-content:center; }
    .contact__direct{ flex-direction:column; gap:14px; margin-top:34px; }
    .contact__social{ gap:16px; }

    .footer{ flex-direction:column; align-items:flex-start; text-align:left; gap:8px; margin-top:56px; }

    .toast{ left:20px; right:20px; transform:translateY(20px); text-align:center; }
    .toast.is-visible{ transform:translateY(0); }
  }

  /* ✏️ DIUBAH: layar HP kecil (contoh: iPhone SE, Android low-end ~360-390px)
     — beberapa ukuran font di atas masih terlalu besar / mepet, jadi
     diperkecil lagi khusus di lebar ini supaya tidak overflow/kepotong. */
  @media (max-width:400px){
    .container{ padding:0 16px; }
    .topnav{ padding:14px 16px; }
    .topnav__logo{ font-size:10.5px; max-width:calc(100% - 52px); }
    .topnav__logo-badge{ width:26px; height:26px; font-size:10px; }

    .preloader__mark{ font-size:22vw; }

    .hero{ padding-top:98px; }
    .hero__name{ font-size:clamp(34px,11.5vw,44px); }
    .hero__tagline{ font-size:17px; }

    .btn{ padding:13px 20px; font-size:11px; }

    .mobile-menu a{ font-size:27px; }
    .mobile-menu__num{ font-size:10px; margin-right:10px; }

    .section-head h2{ font-size:clamp(28px,8vw,40px); }

    .next-btn{ bottom:24px; }
    .next-btn__ring{ width:38px; height:38px; }
  }

  /* ✏️ DIUBAH: tambah state focus yang jelas kelihatan untuk aksesibilitas
     (navigasi keyboard) — sebelumnya tidak ada style focus sama sekali */
  a:focus-visible, button:focus-visible{
    outline:1px solid var(--cherry-light);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion:reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }