/* =====================================================================
   FEATURED PROJECTS (HIGHLIGHT)
   ===================================================================== */
#prtcln-achievements, .prtcln-hdr-wrapper, .prtcln-lb-overlay {
  --prtcln-purple: var(--primary);
  --prtcln-purple-dark: var(--primary-hover);
  --prtcln-bg-card: var(--surface);
  --prtcln-border: var(--border);
  --prtcln-border-hover: var(--border-hover);
  --prtcln-neu-out: var(--shadow-lg);
  --prtcln-neu-out-sm: var(--shadow-sm);
  --prtcln-neu-in: var(--shadow-inset);
  --prtcln-text: var(--text);
  --prtcln-text-body: var(--text-secondary);
  --prtcln-text-muted: var(--text-secondary);
  --prtcln-fs-desc: var(--fs-text1);
  --prtcln-fs-stat: var(--fs-text4);
}
.prtcln-hdr-wrapper *, .prtcln-lb-overlay *, #prtcln-achievements * { box-sizing: border-box; }

@keyframes prtcln-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes prtcln-lb-bg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes prtcln-lb-card-in { from { opacity: 0; transform: scale(0.9) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.prtcln-hdr-wrapper { font-family: var(--font-body); width: 100%; background: transparent; }
.prtcln-hdr-section { width: 100%; background: transparent; padding: 20px 0 0; margin: 0; }
.prtcln-hdr-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); display: flex; flex-direction: column; align-items: center; width: 100%; }
.prtcln-hdr-content { text-align: center; max-width: 800px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.prtcln-hdr-judul { font-family: var(--font-body); font-size: var(--fs-judul1); font-weight: var(--fw-black); color: var(--prtcln-purple); margin: 0; padding: 0; text-align: center; display: block; width: 100%; line-height: var(--lh-tight); }
.prtcln-hdr-judul::after { content: ''; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--prtcln-border-hover) 20%, var(--prtcln-purple) 50%, var(--prtcln-border-hover) 80%, transparent 100%); width: 120px; margin: 6px auto; display: block; }
.prtcln-hdr-desc { font-family: var(--font-body); font-size: var(--fs-text1); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--prtcln-text-body); margin: 0; padding: 0; text-align: center; }

.prtcln-lb-overlay { display: none; position: fixed; inset: 0; z-index: 999999; align-items: center; justify-content: center; cursor: zoom-out; font-family: var(--font-body); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.prtcln-lb-overlay.prtcln-active { display: flex; }
.prtcln-lb-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.55); animation: prtcln-lb-bg-in 0.25s ease; z-index: 0; }
.prtcln-lb-card { position: relative; z-index: 1; width: min(340px, 88vw); background: var(--prtcln-bg-card); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-float); animation: prtcln-lb-card-in 0.3s var(--ease-spring); cursor: default; }
.prtcln-lb-card img { width: 100%; display: block; object-fit: cover; object-position: center top; }
.prtcln-lb-footer { padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-shrink: 0; }
.prtcln-lb-iglink { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-btn); font-weight: var(--fw-bold); color: var(--prtcln-purple); text-decoration: none; text-transform: uppercase; letter-spacing: var(--ls-wide); background: var(--prtcln-bg-card); border-radius: var(--radius-lg); padding: 6px 14px 6px 10px; box-shadow: var(--prtcln-neu-out-sm); transition: box-shadow var(--transition-fast); white-space: nowrap; }
.prtcln-lb-iglink:hover { box-shadow: var(--prtcln-neu-in); }
.prtcln-lb-iglink svg { width: 15px; height: 15px; flex-shrink: 0; }
.prtcln-lb-close { width: 30px; height: 30px; background: var(--prtcln-bg-card); border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--prtcln-neu-out-sm); transition: box-shadow var(--transition-fast); flex-shrink: 0; color: var(--prtcln-purple); border: none; }
.prtcln-lb-close:hover { box-shadow: var(--prtcln-neu-in); }
.prtcln-lb-close svg { width: 14px; height: 14px; }

.prtcln-wrapper { color: var(--prtcln-text); overflow-x: hidden; overflow-y: clip; width: 100%; background: transparent; font-family: var(--font-body); }
.prtcln-container { max-width: var(--max-width); margin: 0 auto; padding: 40px 20px 56px; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); width: 100%; }
.prtcln-rows { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.prtcln-card { background: var(--prtcln-bg-card); border-radius: var(--card-radius); overflow: hidden; position: relative; transition: box-shadow 0.3s ease, transform 0.3s ease; box-shadow: var(--card-shadow); animation: prtcln-fade-up 0.6s var(--ease-standard) both; display: flex; align-items: stretch; cursor: default; }
.prtcln-card:nth-child(1) { animation-delay: 0.05s; }
.prtcln-card:nth-child(2) { animation-delay: 0.15s; }
.prtcln-card:nth-child(3) { animation-delay: 0.25s; }
.prtcln-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(var(--card-lift)); }
.prtcln-card.prtcln-reverse { flex-direction: row-reverse; }
.prtcln-phone-panel { flex: 0 0 auto; width: 220px; background: transparent; display: flex; align-items: center; justify-content: center; padding: 28px 24px; border-right: 1px solid var(--prtcln-border); position: relative; overflow: hidden; }
.prtcln-card.prtcln-reverse .prtcln-phone-panel { border-right: none; border-left: 1px solid var(--prtcln-border); }
.prtcln-phone-panel::before { content: attr(data-num); position: absolute; font-size: 120px; font-weight: var(--fw-black); color: var(--prtcln-border); opacity: 0.3; right: -8px; bottom: -8px; line-height: var(--lh-tight); pointer-events: none; user-select: none; }
.prtcln-phone-frame { width: 130px; height: 231px; background: var(--bg-shadow-dark); border-radius: 22px; border: 2px solid var(--prtcln-border); box-shadow: var(--prtcln-neu-out-sm); overflow: hidden; position: relative; z-index: 1; flex-shrink: 0; cursor: zoom-in; transition: box-shadow var(--transition-fade), transform var(--transition-fade); }
.prtcln-phone-frame:hover { box-shadow: var(--prtcln-neu-in); transform: scale(1.04); }
.prtcln-zoom-hint { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity var(--transition-fast); pointer-events: none; }
.prtcln-phone-frame:hover .prtcln-zoom-hint { opacity: 1; }
.prtcln-zoom-hint svg { width: 28px; height: 28px; color: var(--prtcln-purple); }
.prtcln-phone-screen { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.prtcln-phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; pointer-events: none; }
.prtcln-body { flex: 1 1 0; padding: 28px 32px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--space-3); position: relative; z-index: 1; min-width: 0; overflow: hidden; }
.prtcln-brand { font-family: var(--font-body); font-size: var(--fs-judul2); font-weight: var(--fw-bold); color: var(--prtcln-purple); line-height: var(--lh-snug); }
.prtcln-desc { font-size: var(--fs-text1); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--prtcln-text-body); text-align: left; }
.prtcln-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; max-width: 100%; }
.prtcln-stat, .prtcln-tag { display: flex; flex-direction: row; align-items: center; gap: 5px; background: var(--prtcln-bg-card); box-shadow: var(--shadow-inset-sm); border-radius: var(--radius-lg); padding: 5px 11px; font-size: var(--prtcln-fs-stat); font-weight: var(--fw-medium); color: var(--prtcln-purple); white-space: nowrap; flex-shrink: 0; max-width: 100%; }
.prtcln-stat-val, .prtcln-stat-lbl { font-size: var(--prtcln-fs-stat); font-weight: var(--fw-medium); color: var(--prtcln-purple); line-height: var(--lh-tight); }
.prtcln-highlight { background: var(--prtcln-bg-card); box-shadow: var(--prtcln-neu-in); border-left: 3px solid var(--prtcln-purple); border-radius: var(--radius-md); padding: 12px 20px; width: 100%; }
.prtcln-highlight p { font-style: italic; font-size: var(--fs-text3); font-weight: var(--fw-light); color: var(--prtcln-text-muted); line-height: var(--lh-normal); }

@media (min-width: 1441px) {
  .prtcln-container { padding: 40px 100px; }
  .prtcln-hdr-container { padding: 0 100px; }
  .prtcln-lb-card { width: 400px; }
}
@media (max-width: 1024px) {
  .prtcln-container { padding: var(--space-6) var(--space-6); gap: var(--space-5); }
  .prtcln-hdr-container { padding: 0 var(--space-6); }
}
@media (max-width: 599px) {
  .prtcln-container { padding: var(--space-6) 20px; gap: var(--space-5); }
  .prtcln-hdr-container { padding: 0 20px; }
  .prtcln-card, .prtcln-card.prtcln-reverse { flex-direction: column; }
  .prtcln-phone-panel { width: 100%; border-right: none !important; border-left: none !important; border-bottom: 1px solid var(--prtcln-border); padding: var(--space-6) 20px; }
  .prtcln-body { align-items: center; text-align: center; padding: 22px 18px var(--space-6); }
  .prtcln-stats { justify-content: center; flex-wrap: wrap; }
  .prtcln-desc { text-align: center; }
  .prtcln-body { flex: 1 1 auto; }
  .prtcln-lb-card { width: 290px; }
}
@media (max-width: 480px) {
  .prtcln-container { padding: 20px 20px; gap: var(--space-5); }
  .prtcln-lb-card { width: 270px; }
}