/* ============================================================
   PORTFOLIO — tab segmented, kartu proyek, sertifikat, ikon tech (gaya app iOS)
   ============================================================ */
.portfolio { padding-top: 120px; }

/* segmented control ala iOS */
.seg {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: min(600px, 100%); margin: 0 auto 44px;
  padding: 6px; border-radius: 20px; background: rgba(255,255,255,.035);
}
.seg__thumb {
  position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 3); border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.09)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 20px rgba(0,0,0,.4);
  transition: transform .6s var(--spring);
}
.seg__btn { position: relative; z-index: 1; height: 42px; font: 400 13px/1 var(--font-body); color: var(--fg-3); transition: color .3s, transform .3s var(--spring); }
.seg__btn:hover { color: var(--fg-2); }
.seg__btn:active { transform: scale(.94); }
.seg__btn.is-active { color: #fff; }

/* panel */
.panes { position: relative; }
.pane { display: none; }
.pane.is-active { display: block; animation: paneIn .7s var(--ease); }
@keyframes paneIn { from { opacity: 0; filter: blur(12px); transform: translateY(18px) scale(.985); } }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--fg-3); font: 400 13px/1.7 var(--font-mono); }

/* kartu proyek / sertifikat */
.proj {
  position: relative; display: flex; flex-direction: column; padding: 13px 13px 16px; border-radius: 26px; cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.35);
  transition: transform .55s var(--spring), border-color .3s, box-shadow .3s; transform-style: preserve-3d;
}
.proj:hover { transform: perspective(900px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); border-color: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px rgba(0,0,0,.55); }
.proj:active { transform: scale(.975); }
.proj__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 17px; overflow: hidden; background: #0d0d0d; border: 1px solid var(--line); }
.proj__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.proj:hover .proj__thumb img { transform: scale(1.06); }
.proj__zoom {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: scale(.6); transition: .4s var(--spring);
}
.proj:hover .proj__zoom { opacity: 1; transform: none; }
.proj__body { padding: 16px 8px 0; display: flex; flex-direction: column; flex: 1; }
.proj__title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; }
.proj__desc { margin-top: 8px; font-size: 12.5px; line-height: 1.65; color: var(--fg-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proj__meta { margin-top: 6px; font: 400 10.5px/1.4 var(--font-mono); color: var(--fg-3); letter-spacing: .04em; }
.proj__foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--fg-3); }
.pill-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: 999px; font-size: 12px; color: var(--fg);
  background: rgba(255,255,255,.09); border: 1px solid var(--line); transition: background .25s, transform .35s var(--spring);
}
.proj:hover .pill-btn { background: rgba(255,255,255,.16); }
.pill-btn:active { transform: scale(.93); }
.proj--cert .proj__thumb { aspect-ratio: 4 / 3; background: #fff; }
.proj--cert .proj__thumb img { object-fit: contain; }
.proj--cert .proj__thumb .pdf-badge { position: absolute; inset: 0; display: grid; place-items: center; background: #151515; color: var(--fg-2); font: 500 13px var(--font-mono); letter-spacing: .12em; }

/* tech stack: ikon "app" iOS */
.tech-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; width: min(780px, 100%); margin: 0 auto; }
.tile {
  position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px;
  border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 30px rgba(0,0,0,.35); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: transform .5s var(--spring), border-color .3s, background .3s;
  animation: tileIn .8s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes tileIn { from { opacity: 0; transform: scale(.5) translateY(20px); filter: blur(8px); } }
.tile img { width: 46%; height: 46%; object-fit: contain; pointer-events: none; transition: transform .5s var(--spring); }
.tile span { font: 400 11px/1 var(--font-body); color: var(--fg-2); }
.tile:hover { transform: translateY(-6px) scale(1.06); border-color: rgba(255,255,255,.22); background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); }
.tile:hover img { transform: scale(1.12) rotate(-4deg); }
.tile:active { transform: scale(.92); }
.tech-hint { text-align: center; margin-top: 26px; font: 400 10.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--fg-3); opacity: .7; }

/* mode goyang */
.tech-grid.is-jiggle .tile { animation: jiggle .28s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -37ms); }
.tech-grid.is-jiggle .tile:nth-child(even) { animation-direction: alternate-reverse; }
@keyframes jiggle { from { transform: rotate(-2.2deg) scale(.98); } to { transform: rotate(2.2deg) scale(.98); } }

@media (max-width: 860px) { .tech-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } .grid-cards { grid-template-columns: 1fr; } .seg { margin-bottom: 30px; } }