{
    "id": 245626,
    "date": "2025-06-23T17:00:50",
    "date_gmt": "2025-06-23T10:00:50",
    "guid": {
        "rendered": "https:\/\/mte.usk.ac.id\/?page_id=245626"
    },
    "modified": "2026-08-26T10:51:14",
    "modified_gmt": "2026-08-26T03:51:14",
    "slug": "alumni-mte",
    "status": "publish",
    "type": "page",
    "link": "https:\/\/mte.usk.ac.id\/en\/?page_id=245626",
    "title": {
        "rendered": "ALUMNI MTE"
    },
    "content": {
        "rendered": "<!--\n  MTE USK \u2014 DIREKTORI ALUMNI\n  Tempel SELURUH kode ini ke blok \"Custom HTML\" pada halaman WordPress.\n  Seluruh gaya diisolasi pada .mte-alumni-archive agar tidak mengubah tema WordPress.\n-->\n<section class=\"mte-alumni-archive\" id=\"mte-alumni-archive\">\n  <style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');\n\n    \/* Arsip Sirkuit Aceh \u2014 desain editorial civic-tech, scoped khusus untuk blok ini. *\/\n    #mte-alumni-archive {\n      --mte-green: #163b33;\n      --mte-petrol: #092e2d;\n      --mte-paper: #fbfaf4;\n      --mte-canvas: #f6f3ea;\n      --mte-copper: #b56b45;\n      --mte-muted: #66736c;\n      --mte-border: #d5ddd1;\n      --mte-ease: cubic-bezier(.23,1,.32,1);\n      isolation: isolate;\n      display: block;\n      box-sizing: border-box;\n      max-width: 1280px;\n      margin: 0 auto;\n      color: var(--mte-green);\n      background: var(--mte-canvas);\n      font-family: 'Manrope', Arial, sans-serif;\n      line-height: 1.5;\n      overflow: hidden;\n    }\n    #mte-alumni-archive *, #mte-alumni-archive *::before, #mte-alumni-archive *::after { box-sizing: border-box; }\n    #mte-alumni-archive button, #mte-alumni-archive input, #mte-alumni-archive select { font: inherit; }\n    #mte-alumni-archive button, #mte-alumni-archive select { cursor: pointer; }\n    #mte-alumni-archive button:focus-visible, #mte-alumni-archive input:focus-visible, #mte-alumni-archive select:focus-visible { outline: 3px solid rgba(181,107,69,.48); outline-offset: 3px; }\n\n    #mte-alumni-archive .mte-hero {\n      position: relative;\n      min-height: 396px;\n      display: grid;\n      grid-template-columns: minmax(0, 1.3fr) minmax(230px, .7fr);\n      gap: 2rem;\n      align-items: end;\n      padding: clamp(2.5rem, 7vw, 5.75rem) clamp(1.3rem, 5.5vw, 5.5rem) clamp(2.1rem, 4vw, 3.75rem);\n      color: #f6f9f2;\n      background: radial-gradient(circle at 80% 30%, rgba(181,107,69,.22), transparent 23%), linear-gradient(115deg, #052725 0%, #0a3934 63%, #0b302f 100%);\n      overflow: hidden;\n    }\n    #mte-alumni-archive .mte-hero::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      z-index: 0;\n      opacity: .55;\n      background-image: linear-gradient(90deg, rgba(217,239,223,.14) 1px, transparent 1px), linear-gradient(rgba(217,239,223,.11) 1px, transparent 1px), radial-gradient(circle at 74% 44%, rgba(234,180,144,.9) 0 3px, transparent 4px), radial-gradient(circle at 88% 65%, rgba(234,180,144,.8) 0 3px, transparent 4px), radial-gradient(circle at 60% 78%, rgba(234,180,144,.7) 0 3px, transparent 4px);\n      background-size: 110px 110px, 110px 110px, 110px 110px, 150px 150px, 180px 180px;\n      mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%);\n    }\n    #mte-alumni-archive .mte-hero::after {\n      content: '';\n      position: absolute;\n      right: -7%; bottom: -12%; z-index: 0;\n      width: 48%; height: 84%;\n      border: 1px solid rgba(234,180,144,.38);\n      border-left: 0;\n      transform: skewX(-22deg);\n      box-shadow: -55px 0 0 -54px rgba(234,180,144,.38), -110px 0 0 -109px rgba(234,180,144,.25);\n    }\n    #mte-alumni-archive .mte-hero-copy, #mte-alumni-archive .mte-stats { position: relative; z-index: 1; }\n    #mte-alumni-archive .mte-kicker, #mte-alumni-archive .mte-eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0 0 .85rem; color: #edb490; font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }\n    #mte-alumni-archive .mte-kicker svg { width: 15px; height: 15px; }\n    #mte-alumni-archive h1, #mte-alumni-archive h2, #mte-alumni-archive h3, #mte-alumni-archive p { margin-top: 0; }\n    #mte-alumni-archive h1, #mte-alumni-archive h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }\n    #mte-alumni-archive h1 { max-width: 680px; margin-bottom: 1.2rem; color: #f8fbf4; font-size: clamp(2.65rem, 6.2vw, 5.7rem); line-height: .91; letter-spacing: -.052em; }\n    #mte-alumni-archive h1 em, #mte-alumni-archive h2 em { color: #edb490; font-style: italic; }\n    #mte-alumni-archive .mte-hero-copy > p { max-width: 550px; margin-bottom: 1.5rem; color: #d8e2da; font-size: .89rem; line-height: 1.78; }\n    #mte-alumni-archive .mte-scroll-link { display: inline-flex; align-items: center; gap: .6rem; padding-bottom: .38rem; border-bottom: 1px solid var(--mte-copper); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; transition: gap .2s var(--mte-ease), color .2s var(--mte-ease); }\n    #mte-alumni-archive .mte-scroll-link:hover { gap: .95rem; color: #edb490; }\n    #mte-alumni-archive .mte-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; max-width: 360px; justify-self: end; }\n    #mte-alumni-archive .mte-stat { min-height: 118px; display: flex; flex-wrap: wrap; align-content: space-between; padding: 1rem; border: 1px solid rgba(246,249,242,.3); background: rgba(6,39,37,.5); }\n    #mte-alumni-archive .mte-stat.is-copper { border-color: rgba(237,180,144,.6); background: rgba(181,107,69,.16); }\n    #mte-alumni-archive .mte-stat-label { width: 100%; color: #d3ded5; font-size: .57rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }\n    #mte-alumni-archive .mte-stat strong { font-family: 'DM Serif Display', Georgia, serif; font-size: 2.7rem; font-weight: 400; line-height: .85; letter-spacing: -.05em; }\n    #mte-alumni-archive .mte-stat small { align-self: flex-end; margin: 0 0 .1rem .3rem; color: #d5ded8; font-size: .62rem; }\n    #mte-alumni-archive .mte-source { grid-column: 1 \/ -1; margin: 0; color: #b7c8be; font-size: .57rem; letter-spacing: .05em; text-align: right; }\n\n    #mte-alumni-archive .mte-directory { padding: clamp(3.4rem, 6vw, 5.7rem) clamp(1.25rem, 5.5vw, 5.5rem) clamp(4rem, 7vw, 6.7rem); }\n    #mte-alumni-archive .mte-heading { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(220px,.62fr); gap: 1.25rem; align-items: end; margin-bottom: 1.7rem; }\n    #mte-alumni-archive .mte-section-no { color: var(--mte-copper); font-size: .67rem; font-weight: 800; letter-spacing: .1em; }\n    #mte-alumni-archive .mte-eyebrow { margin-bottom: .4rem; color: var(--mte-copper); font-size: .58rem; }\n    #mte-alumni-archive h2 { color: var(--mte-green); font-size: clamp(2.2rem, 4vw, 3.9rem); line-height: .94; letter-spacing: -.045em; }\n    #mte-alumni-archive .mte-heading > p { margin-bottom: .2rem; color: var(--mte-muted); font-size: .78rem; line-height: 1.7; }\n\n    #mte-alumni-archive .mte-search-panel { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 175px 175px; gap: .6rem; padding: 1.05rem .65rem .65rem; border: 1px solid #c6d0c4; border-top: 3px solid var(--mte-green); background: var(--mte-paper); box-shadow: 0 13px 27px rgba(20,52,44,.08); }\n    #mte-alumni-archive .mte-search-panel::after { content: ''; position: absolute; right: 0; bottom: -5px; left: 29%; height: 4px; background: linear-gradient(90deg, var(--mte-copper) 0 23%, #cdd8ca 23% 55%, transparent 55%); }\n    #mte-alumni-archive .mte-desk-index { position: absolute; top: .2rem; left: .65rem; color: var(--mte-copper); font-size: .46rem; font-weight: 800; letter-spacing: .14em; }\n    #mte-alumni-archive .mte-search-input { min-height: 52px; display: flex; align-items: center; gap: .7rem; padding: 0 .9rem; border: 1px solid #cbd4c9; background: #fffefa; color: var(--mte-green); }\n    #mte-alumni-archive .mte-search-input svg { width: 18px; height: 18px; flex: 0 0 auto; }\n    #mte-alumni-archive .mte-search-input input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--mte-green); background: transparent; font-size: .8rem; }\n    #mte-alumni-archive .mte-search-input input::placeholder { color: #89958d; }\n    #mte-alumni-archive .mte-filter { position: relative; display: block; }\n    #mte-alumni-archive .mte-filter label { position: absolute; z-index: 1; top: .42rem; left: .8rem; color: #738078; font-size: .52rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; pointer-events: none; }\n    #mte-alumni-archive .mte-filter select { width: 100%; min-height: 52px; appearance: none; padding: 1.12rem 2.1rem .35rem .8rem; border: 1px solid #cbd4c9; border-radius: 0; outline: 0; color: var(--mte-green); background: #fffefa url(\"data:image\/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M1 1.25 6 6.25l5-5' stroke='%23163b33' stroke-width='1.5' stroke-linecap='round'\/%3E%3C\/svg%3E\") no-repeat right .8rem center; font-size: .68rem; font-weight: 800; }\n    #mte-alumni-archive .mte-filter select:hover, #mte-alumni-archive .mte-filter select:focus { border-color: var(--mte-copper); }\n\n    #mte-alumni-archive .mte-results-layout { margin-top: 2rem; }\n    #mte-alumni-archive .mte-result-head { display: flex; align-items: center; gap: .75rem; min-height: 35px; margin-bottom: .8rem; padding-bottom: .6rem; border-bottom: 1px solid var(--mte-border); }\n    #mte-alumni-archive .mte-result-count { display: flex; align-items: center; gap: .45rem; margin: 0; color: #607068; font-size: .68rem; font-weight: 800; }\n    #mte-alumni-archive .mte-dot { width: 7px; height: 7px; border-radius: 50%; background: #75a48d; box-shadow: 0 0 0 3px #e2ece3; }\n    #mte-alumni-archive .mte-result-summary { margin-left: auto; color: #6e7a73; font-size: .65rem; font-weight: 700; }\n    #mte-alumni-archive .mte-reset { padding: 0; border: 0; border-bottom: 1px solid currentColor; color: var(--mte-copper); background: none; font-size: .62rem; font-weight: 800; }\n    #mte-alumni-archive .mte-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }\n    #mte-alumni-archive .mte-card { position: relative; width: 100%; min-height: 270px; display: flex; flex-direction: column; padding: 1.25rem 1.3rem 1.15rem; border: 1px solid #d8ded3; border-top: 3px solid var(--mte-green); color: inherit; background: #fffefa; box-shadow: 0 2px 0 rgba(28,59,50,.03); text-align: left; transition: transform .2s var(--mte-ease), box-shadow .2s var(--mte-ease), border-color .2s var(--mte-ease); }\n    #mte-alumni-archive .mte-card::before { content: ''; position: absolute; top: 20px; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--mte-copper); box-shadow: 0 0 0 3px var(--mte-canvas); }\n    #mte-alumni-archive .mte-card:hover { transform: translateY(-3px); border-color: var(--mte-copper); box-shadow: 0 13px 24px rgba(20,52,44,.11); }\n    #mte-alumni-archive .mte-card-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }\n    #mte-alumni-archive .mte-card-index { color: #7b8a80; font-size: .62rem; font-weight: 800; letter-spacing: .08em; }\n    #mte-alumni-archive .mte-year { padding: .28rem .48rem; border: 1px solid #cbd7ce; color: var(--mte-green); background: #edf3ec; font-size: .64rem; font-weight: 800; }\n    #mte-alumni-archive .mte-card h3 { margin: .92rem 0 .42rem; color: var(--mte-green); font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(1.55rem, 2vw, 1.9rem); font-weight: 400; line-height: 1.05; letter-spacing: -.025em; }\n    #mte-alumni-archive .mte-npm { margin: 0; color: #77847c; font-size: .63rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }\n    #mte-alumni-archive .mte-npm strong { color: #5d6c64; letter-spacing: .035em; }\n    #mte-alumni-archive .mte-thesis { margin-top: .95rem; padding-top: .78rem; border-top: 1px solid #e1e6dc; }\n    #mte-alumni-archive .mte-field-label { display: block; margin-bottom: .32rem; color: var(--mte-copper); font-size: .52rem; font-weight: 800; letter-spacing: .115em; text-transform: uppercase; }\n    #mte-alumni-archive .mte-thesis p { display: -webkit-box; overflow: hidden; margin: 0; color: #4b5d54; font-size: .74rem; font-style: italic; line-height: 1.58; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }\n    #mte-alumni-archive .mte-supervisors { margin-top: auto; padding-top: .92rem; }\n    #mte-alumni-archive .mte-supervisors .mte-field-label { color: #839087; }\n    #mte-alumni-archive .mte-supervisors ul { display: grid; gap: .3rem; margin: 0; padding: 0; color: #53645b; font-size: .71rem; font-weight: 700; line-height: 1.45; list-style: none; }\n    #mte-alumni-archive .mte-supervisors li { display: flex; align-items: flex-start; gap: .42rem; }\n    #mte-alumni-archive .mte-supervisors li::before { content: '\u2022'; color: var(--mte-copper); line-height: 1.1; }\n    #mte-alumni-archive .mte-card-action { display: inline-flex; align-items: center; gap: .42rem; margin-top: .9rem; color: var(--mte-copper); font-size: .64rem; font-weight: 800; }\n    #mte-alumni-archive .mte-card-action span { font-size: .9rem; line-height: 1; }\n    #mte-alumni-archive .mte-load-more { width: 100%; margin-top: 1.15rem; padding: .92rem 1rem; border: 1px solid var(--mte-green); color: var(--mte-green); background: transparent; font-size: .68rem; font-weight: 800; text-align: left; transition: color .18s var(--mte-ease), background .18s var(--mte-ease); }\n    #mte-alumni-archive .mte-load-more:hover { color: #fffefa; background: var(--mte-green); }\n    #mte-alumni-archive .mte-load-more small { float: right; color: var(--mte-copper); font-size: .55rem; letter-spacing: .04em; text-transform: uppercase; }\n    #mte-alumni-archive .mte-message { display: flex; align-items: flex-start; gap: .8rem; padding: 1.2rem; border-left: 3px solid var(--mte-copper); background: #eef1e9; color: #55645b; }\n    #mte-alumni-archive .mte-message strong { display: block; margin-bottom: .25rem; color: var(--mte-green); font-size: .78rem; }\n    #mte-alumni-archive .mte-message p { margin: 0; font-size: .68rem; line-height: 1.6; }\n    #mte-alumni-archive .mte-message button { margin-top: .8rem; padding: 0; border: 0; border-bottom: 1px solid currentColor; color: var(--mte-copper); background: transparent; font-size: .64rem; font-weight: 800; }\n    #mte-alumni-archive .mte-detail-backdrop { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 1rem; background: rgba(5,39,37,.72); backdrop-filter: blur(5px); }\n    #mte-alumni-archive .mte-detail-backdrop[hidden] { display: none; }\n    #mte-alumni-archive .mte-detail-panel { position: relative; width: min(100%, 670px); max-height: min(82vh, 760px); overflow: auto; padding: clamp(1.4rem,4vw,2.4rem); border-top: 4px solid var(--mte-copper); color: var(--mte-green); background: #fffefa; box-shadow: 0 26px 70px rgba(0,0,0,.28); }\n    #mte-alumni-archive .mte-detail-close { position: absolute; top: .8rem; right: .8rem; width: 35px; height: 35px; border: 1px solid #d2dbd0; color: var(--mte-green); background: #f3f5ef; font-size: 1.35rem; line-height: 1; }\n    #mte-alumni-archive .mte-detail-kicker { margin: 0 0 .75rem; color: var(--mte-copper); font-size: .6rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }\n    #mte-alumni-archive .mte-detail-panel h2 { max-width: 530px; margin: 0 2rem .55rem 0; font-size: clamp(2rem,5vw,3.2rem); }\n    #mte-alumni-archive .mte-detail-npm { margin: 0; color: #64736a; font-size: .73rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }\n    #mte-alumni-archive .mte-detail-block { margin-top: 1.7rem; padding-top: 1rem; border-top: 1px solid #dce2d8; }\n    #mte-alumni-archive .mte-detail-block h3 { margin: 0 0 .48rem; color: var(--mte-copper); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }\n    #mte-alumni-archive .mte-detail-block p { margin: 0; color: #40554b; font-size: .9rem; line-height: 1.75; }\n    #mte-alumni-archive .mte-detail-block ul { display: grid; gap: .65rem; margin: 0; padding: 0; color: #40554b; font-size: .84rem; font-weight: 700; line-height: 1.55; list-style: none; }\n    #mte-alumni-archive .mte-detail-block li { display: flex; gap: .55rem; } #mte-alumni-archive .mte-detail-block li::before { content: '\u2022'; color: var(--mte-copper); }\n    #mte-alumni-archive .mte-footer { display: flex; align-items: center; gap: .8rem; min-height: 62px; padding: 1rem clamp(1.25rem,5.5vw,5.5rem); border-top: 1px solid #d9e0d5; color: #7b8a81; background: #eef1e9; font-size: .61rem; font-weight: 700; letter-spacing: .04em; }\n    #mte-alumni-archive .mte-owl { position: relative; margin-left: auto; color: #202020; filter: grayscale(1) contrast(1.4); font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 1.35rem; line-height: 1; opacity: .46; }\n    #mte-alumni-archive .mte-owl::after { content: attr(data-tooltip); position: absolute; right: 0; bottom: calc(100% + .5rem); padding: .32rem .48rem; color: #fffefa; background: #1e342e; box-shadow: 0 5px 12px rgba(0,0,0,.14); font-family: 'Manrope', Arial, sans-serif; font-size: .58rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .16s var(--mte-ease), transform .16s var(--mte-ease); }\n    #mte-alumni-archive .mte-owl:hover::after, #mte-alumni-archive .mte-owl:focus-visible::after { opacity: 1; transform: translateY(0); }\n    #mte-alumni-archive .mte-skeleton { min-height: 255px; padding: 1.2rem; border: 1px solid #dce2d7; border-top: 3px solid #d2d9cf; background: #fffefa; }\n    #mte-alumni-archive .mte-skeleton span { display: block; position: relative; overflow: hidden; border-radius: 2px; background: #e7ebe4; }\n    #mte-alumni-archive .mte-skeleton span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: mte-shimmer 1.3s infinite; transform: translateX(-100%); }\n    #mte-alumni-archive .mte-s1 { width: 33px; height: 8px; } #mte-alumni-archive .mte-s2 { width: 62%; height: 22px; margin-top: 1rem; } #mte-alumni-archive .mte-s3 { width: 35%; height: 8px; margin-top: .6rem; } #mte-alumni-archive .mte-s4 { width: 94%; height: 9px; margin-top: 2rem; } #mte-alumni-archive .mte-s5 { width: 72%; height: 9px; margin-top: .45rem; } #mte-alumni-archive .mte-s6 { width: 57%; height: 8px; margin-top: 2.25rem; }\n    @keyframes mte-shimmer { to { transform: translateX(100%); } }\n\n    @media (max-width: 780px) {\n      \/* Menembus container tema pada ponsel tanpa mengubah pengaturan WordPress\/Divi. *\/\n      #mte-alumni-archive { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }\n      #mte-alumni-archive .mte-hero { grid-template-columns: 1fr; min-height: 500px; padding: 3.8rem 1.25rem 2rem; }\n      #mte-alumni-archive .mte-stats { width: min(100%, 395px); justify-self: start; }\n      #mte-alumni-archive .mte-heading { grid-template-columns: auto 1fr; gap: .7rem 1rem; }\n      #mte-alumni-archive .mte-heading > p { grid-column: 1\/-1; margin-left: 1.85rem; }\n      #mte-alumni-archive .mte-search-panel { grid-template-columns: 1fr; padding: 1.05rem .55rem .55rem; }\n      #mte-alumni-archive .mte-search-panel::after { left: 42%; }\n      #mte-alumni-archive .mte-results-layout { margin-top: 1.35rem; }\n      #mte-alumni-archive .mte-grid { grid-template-columns: 1fr; }\n    }\n    @media (prefers-reduced-motion: reduce) { #mte-alumni-archive *, #mte-alumni-archive *::before, #mte-alumni-archive *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }\n  <\/style>\n\n  <header class=\"mte-hero\">\n    <div class=\"mte-hero-copy\">\n      <p class=\"mte-kicker\">\n        <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" aria-hidden=\"true\"><path d=\"M4 5h16v14H4z\"\/><path d=\"M8 9h8M8 13h5M12 5v4M17 13v3M7 16v3\"\/><\/svg>\n        MTE USK Alumni Database\n      <\/p>\n      <h1>Academic Journey<br><em>Connected<\/em><\/h1>\n      <p>A directory of Master of Electrical Engineering alumni at Universitas Syiah Kuala, featuring alumni profiles, thesis works, and academic journeys.<\/p>\n      <a class=\"mte-scroll-link\" href=\"#mte-directory\">Browse Directory <span aria-hidden=\"true\">\u2193<\/span><\/a>\n    <\/div>\n    <div class=\"mte-stats\" aria-label=\"Ringkasan direktori\">\n      <div class=\"mte-stat is-copper\"><span class=\"mte-stat-label\">Total alumni<\/span><strong id=\"mte-total\">\u2014<\/strong><small>orang<\/small><\/div>\n      <div class=\"mte-stat\"><span class=\"mte-stat-label\">Graduation Year Range<\/span><strong id=\"mte-years\">\u2014<\/strong><small>tahun<\/small><\/div>\n      <p class=\"mte-source\">Sumber data: Program Studi MTE USK<\/p>\n    <\/div>\n  <\/header>\n\n  <div class=\"mte-directory\" id=\"mte-directory\">\n    <div class=\"mte-heading\">\n      <span class=\"mte-section-no\">01<\/span>\n      <div><p class=\"mte-eyebrow\">Data alumni<\/p><h2>Find <em>alumni<\/em><\/h2><\/div>\n      <p>Use a name, student ID number, thesis keyword, or advisor\u2019s name to search for alumni.<\/p>\n    <\/div>\n\n    <div class=\"mte-search-panel\">\n      <span class=\"mte-desk-index\">PENCARIAN ALUMNI<\/span>\n      <label class=\"mte-search-input\" for=\"mte-search\">\n        <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"m20 20-4.1-4.1\"\/><\/svg>\n        <input id=\"mte-search\" type=\"search\" autocomplete=\"off\" placeholder=\"Cari nama, NPM, tesis, pembimbing\u2026\">\n      <\/label>\n      <div class=\"mte-filter\"><label for=\"mte-year\">Angkatan<\/label><select id=\"mte-year\"><option value=\"all\">Semua angkatan<\/option><\/select><\/div>\n      <div class=\"mte-filter\"><label for=\"mte-sort\">Urutkan<\/label><select id=\"mte-sort\"><option value=\"year-desc\">Angkatan terbaru<\/option><option value=\"year-asc\">Angkatan terlama<\/option><option value=\"name-asc\">Nama A\u2013Z<\/option><option value=\"name-desc\">Nama Z\u2013A<\/option><option value=\"npm\">NPM<\/option><\/select><\/div>\n    <\/div>\n\n    <div class=\"mte-results-layout\">\n      <div class=\"mte-main-results\" aria-live=\"polite\">\n        <div class=\"mte-result-head\"><p class=\"mte-result-count\"><span class=\"mte-dot\" aria-hidden=\"true\"><\/span><span id=\"mte-result-text\">Menghubungkan data\u2026<\/span><\/p><span class=\"mte-result-summary\" id=\"mte-result-summary\">Memuat data\u2026<\/span><button class=\"mte-reset\" id=\"mte-reset\" type=\"button\" hidden>Reset<\/button><\/div>\n        <div class=\"mte-grid\" id=\"mte-grid\"><\/div>\n        <button class=\"mte-load-more\" id=\"mte-load-more\" type=\"button\" hidden>Muat entri berikutnya <small id=\"mte-remaining\"><\/small><\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <footer class=\"mte-footer\">\n    <span>Direktori Alumni Magister Teknik Elektro USK<\/span>\n    <span class=\"mte-owl\" data-tooltip=\"\u00a9 syah\" title=\"\u00a9 syah\" tabindex=\"0\" role=\"img\" aria-label=\"Burung hantu, \u00a9 syah\">\ud83e\udd89<\/span>\n  <\/footer>\n\n  <div class=\"mte-detail-backdrop\" id=\"mte-detail-backdrop\" hidden>\n    <section class=\"mte-detail-panel\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"mte-detail-name\">\n      <button class=\"mte-detail-close\" id=\"mte-detail-close\" type=\"button\" aria-label=\"Tutup detail alumni\">\u00d7<\/button>\n      <p class=\"mte-detail-kicker\"><span id=\"mte-detail-year\">\u2014<\/span> \u00b7 Detail alumni<\/p>\n      <h2 id=\"mte-detail-name\">\u2014<\/h2>\n      <p class=\"mte-detail-npm\">NPM <span id=\"mte-detail-npm\">\u2014<\/span><\/p>\n      <div class=\"mte-detail-block\"><h3>Judul tesis<\/h3><p id=\"mte-detail-thesis\">\u2014<\/p><\/div>\n      <div class=\"mte-detail-block\"><h3>Advisor<\/h3><ul id=\"mte-detail-supervisors\"><\/ul><\/div>\n    <\/section>\n  <\/div>\n\n  <script>\n    (function () {\n      'use strict';\n      var root = document.getElementById('mte-alumni-archive');\n      if (!root || root.dataset.ready === 'true') return;\n      root.dataset.ready = 'true';\n\n      var BASE_URL = '\/wp-content\/uploads\/data-alumni\/';\n      var PER_PAGE = 12;\n      var allData = [];\n      var filteredData = [];\n      var metadata = null;\n      var currentPage = 1;\n      var searchTimer;\n      var collator = new Intl.Collator('id-ID', { sensitivity: 'base' });\n\n      var $ = function (selector) { return root.querySelector(selector); };\n      var grid = $('#mte-grid');\n      var search = $('#mte-search');\n      var yearSelect = $('#mte-year');\n      var sortSelect = $('#mte-sort');\n      var resultText = $('#mte-result-text');\n      var resultSummary = $('#mte-result-summary');\n      var loadMore = $('#mte-load-more');\n      var remaining = $('#mte-remaining');\n      var reset = $('#mte-reset');\n      var detailBackdrop = $('#mte-detail-backdrop');\n      var detailClose = $('#mte-detail-close');\n      var lastTrigger = null;\n\n      function escapeHTML(value) {\n        return String(value == null ? '\u2014' : value).replace(\/[&<>\"]\/g, function (char) {\n          return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;' })[char];\n        });\n      }\n\n      function normalize(item) {\n        item.graduationYear = Number(item.graduationYear) || null;\n        item.supervisors = Array.isArray(item.supervisors) ? item.supervisors.filter(Boolean) : [];\n        item.searchText = (item.searchText || [item.name, item.npm, item.thesis].concat(item.supervisors).join(' ')).toLowerCase();\n        return item;\n      }\n\n      function parseJSONL(text) {\n        return text.split(\/\\r?\\n\/).map(function (line) { return line.trim(); }).filter(Boolean).map(function (line) {\n          try { return normalize(JSON.parse(line)); } catch (error) { return null; }\n        }).filter(Boolean);\n      }\n\n      function setSkeletons() {\n        grid.innerHTML = Array.from({ length: 6 }, function () {\n          return '<div class=\"mte-skeleton\" aria-hidden=\"true\"><span class=\"mte-s1\"><\/span><span class=\"mte-s2\"><\/span><span class=\"mte-s3\"><\/span><span class=\"mte-s4\"><\/span><span class=\"mte-s5\"><\/span><span class=\"mte-s6\"><\/span><\/div>';\n        }).join('');\n      }\n\n      function sortData(data, by) {\n        var clone = data.slice();\n        var yearOf = function (a) { return Number(a.graduationYear) || 0; };\n        if (by === 'name-asc') return clone.sort(function (a, b) { return collator.compare(a.name || '', b.name || ''); });\n        if (by === 'name-desc') return clone.sort(function (a, b) { return collator.compare(b.name || '', a.name || ''); });\n        if (by === 'year-asc') return clone.sort(function (a, b) { return yearOf(a) - yearOf(b); });\n        if (by === 'npm') return clone.sort(function (a, b) { return collator.compare(a.npm || '', b.npm || ''); });\n        return clone.sort(function (a, b) { return yearOf(b) - yearOf(a) || collator.compare(a.name || '', b.name || ''); });\n      }\n\n      function cardHTML(alumni, index) {\n        var supervisors = alumni.supervisors || [];\n        var supervisorList = supervisors.length ? '<div class=\"mte-supervisors\"><span class=\"mte-field-label\">Pembimbing<\/span><ul>' + supervisors.slice(0, 2).map(function (name) { return '<li>' + escapeHTML(name) + '<\/li>'; }).join('') + '<\/ul><\/div>' : '';\n        return '<button class=\"mte-card\" type=\"button\" data-alumni-index=\"' + index + '\" aria-haspopup=\"dialog\" aria-label=\"Buka detail ' + escapeHTML(alumni.name || 'alumni') + '\">' +\n          '<div class=\"mte-card-top\"><span class=\"mte-card-index\">Klik untuk detail<\/span><span class=\"mte-year\">' + escapeHTML(alumni.graduationYear) + '<\/span><\/div>' +\n          '<h3>' + escapeHTML(alumni.name || 'Nama belum tersedia') + '<\/h3>' +\n          '<p class=\"mte-npm\">NPM <strong>' + escapeHTML(alumni.npm) + '<\/strong><\/p>' +\n          '<div class=\"mte-thesis\"><span class=\"mte-field-label\">Tesis<\/span><p>' + escapeHTML(alumni.thesis || 'Judul tesis belum terdokumentasi.') + '<\/p><\/div>' +\n          supervisorList +\n          '<span class=\"mte-card-action\">Lihat detail lengkap <span aria-hidden=\"true\">\u2192<\/span><\/span>' +\n        '<\/button>';\n      }\n\n      function render() {\n        var end = currentPage * PER_PAGE;\n        var visible = filteredData.slice(0, end);\n        var activeFilters = search.value.trim() || yearSelect.value !== 'all' || sortSelect.value !== 'year-desc';\n        resultText.textContent = filteredData.length + ' alumni ditemukan';\n        resultSummary.textContent = filteredData.length ? 'Menampilkan ' + Math.min(visible.length, filteredData.length) + ' dari ' + filteredData.length : 'Ubah kata kunci atau filter';\n        reset.hidden = !activeFilters;\n\n        if (!filteredData.length) {\n          grid.innerHTML = '<div class=\"mte-message\" style=\"grid-column:1\/-1\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"m20 20-4-4\"\/><\/svg><div><strong>Belum ada kecocokan<\/strong><p>Coba gunakan kata kunci lain atau kembalikan pilihan angkatan.<\/p><button type=\"button\" id=\"mte-empty-reset\">Tampilkan semua alumni<\/button><\/div><\/div>';\n          loadMore.hidden = true;\n          var emptyReset = $('#mte-empty-reset');\n          if (emptyReset) emptyReset.addEventListener('click', resetFilters);\n          return;\n        }\n        grid.innerHTML = visible.map(cardHTML).join('');\n        loadMore.hidden = end >= filteredData.length;\n        remaining.textContent = Math.max(filteredData.length - end, 0) + ' tersisa';\n      }\n\n      function applyFilters() {\n        var q = search.value.trim().toLowerCase();\n        var byYear = yearSelect.value === 'all' ? allData : allData.filter(function (item) { return Number(item.graduationYear) === Number(yearSelect.value); });\n        var byQuery = q.length < 2 ? byYear : byYear.filter(function (item) { return item.searchText.indexOf(q) !== -1; });\n        filteredData = sortData(byQuery, sortSelect.value);\n        currentPage = 1;\n        render();\n      }\n\n      function resetFilters() {\n        search.value = '';\n        yearSelect.value = 'all';\n        sortSelect.value = 'year-desc';\n        applyFilters();\n      }\n\n      function openDetail(alumni, trigger) {\n        if (!alumni) return;\n        lastTrigger = trigger || null;\n        $('#mte-detail-year').textContent = alumni.graduationYear || '\u2014';\n        $('#mte-detail-name').textContent = alumni.name || 'Nama belum tersedia';\n        $('#mte-detail-npm').textContent = alumni.npm || '\u2014';\n        $('#mte-detail-thesis').textContent = alumni.thesis || 'Judul tesis belum terdokumentasi.';\n        $('#mte-detail-supervisors').innerHTML = (alumni.supervisors || []).length ? (alumni.supervisors || []).map(function (name) { return '<li>' + escapeHTML(name) + '<\/li>'; }).join('') : '<li>Data pembimbing belum terdokumentasi.<\/li>';\n        detailBackdrop.hidden = false;\n        detailClose.focus();\n      }\n\n      function closeDetail() {\n        detailBackdrop.hidden = true;\n        if (lastTrigger) lastTrigger.focus();\n      }\n\n      function showFailure(message) {\n        $('#mte-total').textContent = '\u2014';\n        $('#mte-years').textContent = '\u2014';\n        resultText.textContent = 'Data belum dapat dimuat';\n        resultSummary.textContent = 'Periksa lokasi berkas atau konfigurasi data.';\n        grid.innerHTML = '<div class=\"mte-message\" style=\"grid-column:1\/-1\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><path d=\"M12 8v5M12 17h.01\"\/><path d=\"m10.4 4.4-7 12.1A2 2 0 0 0 5.1 19h13.8a2 2 0 0 0 1.7-2.5l-7-12.1a2 2 0 0 0-3.2 0Z\"\/><\/svg><div><strong>Direktori belum terhubung<\/strong><p>' + escapeHTML(message) + '<\/p><button type=\"button\" id=\"mte-retry\">Coba muat ulang<\/button><\/div><\/div>';\n        var retry = $('#mte-retry');\n        if (retry) retry.addEventListener('click', loadData);\n      }\n\n      function populateYears() {\n        metadata.years.slice().sort(function (a, b) { return b - a; }).forEach(function (year) {\n          var option = document.createElement('option');\n          option.value = String(year);\n          option.textContent = year + ' \u00b7 ' + (metadata.counts && metadata.counts[year] || '\u2014') + ' alumni';\n          yearSelect.appendChild(option);\n        });\n      }\n\n      function loadData() {\n        setSkeletons();\n        resultText.textContent = 'Menghubungkan data\u2026';\n        fetch(BASE_URL + 'alumni-metadata.json').then(function (response) {\n          if (!response.ok) throw new Error('Berkas alumni-metadata.json tidak ditemukan.');\n          return response.json();\n        }).then(function (meta) {\n          metadata = { years: meta.years || [], counts: meta.counts || {}, total: meta.totalAlumni || 0 };\n          return Promise.all(metadata.years.map(function (year) {\n            return fetch(BASE_URL + year + '.jsonl').then(function (response) {\n              if (!response.ok) throw new Error('Data angkatan ' + year + ' belum tersedia.');\n              return response.text();\n            }).then(parseJSONL);\n          }));\n        }).then(function (batches) {\n          allData = [].concat.apply([], batches);\n          $('#mte-total').textContent = metadata.total || allData.length;\n          $('#mte-years').textContent = metadata.years.length;\n          yearSelect.innerHTML = '<option value=\"all\">Semua angkatan<\/option>';\n          populateYears();\n          applyFilters();\n        }).catch(function (error) {\n          showFailure(error && error.message ? error.message : 'Silakan periksa koneksi dan URL data alumni.');\n        });\n      }\n\n      search.addEventListener('input', function () { clearTimeout(searchTimer); searchTimer = setTimeout(applyFilters, 220); });\n      yearSelect.addEventListener('change', applyFilters);\n      sortSelect.addEventListener('change', applyFilters);\n      reset.addEventListener('click', resetFilters);\n      loadMore.addEventListener('click', function () { currentPage += 1; render(); });\n      grid.addEventListener('click', function (event) {\n        var card = event.target.closest('.mte-card');\n        if (!card) return;\n        openDetail(filteredData[Number(card.getAttribute('data-alumni-index'))], card);\n      });\n      detailClose.addEventListener('click', closeDetail);\n      detailBackdrop.addEventListener('click', function (event) { if (event.target === detailBackdrop) closeDetail(); });\n      document.addEventListener('keydown', function (event) { if (event.key === 'Escape' && !detailBackdrop.hidden) closeDetail(); });\n      loadData();\n    })();\n  <\/script>\n<\/section>",
        "protected": false
    },
    "excerpt": {
        "rendered": "<p>Data Alumni MTE USK Jejak akademik.Terhubung. Direktori alumni Magister Teknik Elektro Universitas Syiah Kuala untuk menemukan nama, karya tesis, dan perjalanan akademik. Telusuri direktori \u2193 Total alumni\u2014orang Rentang angkatan\u2014tahun Sumber data: Program Studi MTE USK 01 Data alumni Cari alumni. Gunakan nama, NPM, kata kunci tesis, atau nama pembimbing untuk mencari alumni. PENCARIAN ALUMNI AngkatanSemua [&hellip;]<\/p>",
        "protected": false
    },
    "author": 2,
    "featured_media": 0,
    "parent": 0,
    "menu_order": 0,
    "comment_status": "closed",
    "ping_status": "closed",
    "template": "",
    "meta": {
        "_et_pb_use_builder": "off",
        "_et_pb_old_content": "<!-- wp:html -->\n<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Alumni Magister Teknik Elektro USK<\/title>\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CSS RESET & VARIABLES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\n\n:root {\n  --primary: #4f46e5;\n  --primary-light: #818cf8;\n  --primary-dark: #3730a3;\n  --accent: #f59e0b;\n  --bg: #f8fafc;\n  --surface: #ffffff;\n  --text: #1e293b;\n  --text-muted: #64748b;\n  --border: #e2e8f0;\n  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);\n  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);\n  --shadow-lg: 0 10px 25px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);\n  --shadow-xl: 0 20px 40px -5px rgba(0,0,0,.1);\n  --radius: 16px;\n  --radius-sm: 10px;\n  --transition: .25s cubic-bezier(.4,0,.2,1);\n  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\nhtml { scroll-behavior: smooth; }\n@media (prefers-reduced-motion: reduce) {\n  html { scroll-behavior: auto; }\n  .card.animate-in { animation: none; }\n}\n\nbody {\n  font-family: var(--font);\n  background: var(--bg);\n  color: var(--text);\n  line-height: 1.6;\n  -webkit-font-smoothing: antialiased;\n  \/* Hint browser: scroll is native, no JS blocking *\/\n  touch-action: pan-y;\n  overscroll-behavior-y: contain;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   HEADER \/ HERO\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.hero {\n  position: relative;\n  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);\n  color: #fff;\n  padding: 3rem 1.5rem 2.5rem;\n  text-align: center;\n  overflow: hidden;\n}\n.hero::before {\n  content: '';\n  position: absolute; inset: 0;\n  background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\n  opacity: .4;\n}\n.hero-content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }\n.hero h1 {\n  font-size: clamp(1.6rem, 4vw, 2.5rem);\n  font-weight: 800;\n  letter-spacing: -.02em;\n  margin-bottom: .35rem;\n}\n.hero p { opacity: .85; font-size: 1.05rem; margin-bottom: 1.5rem; }\n\n\/* Stats row *\/\n.stats-row {\n  display: flex;\n  gap: 1rem;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n.stat-chip {\n  background: rgba(255,255,255,.2);\n  border: 1px solid rgba(255,255,255,.28);\n  border-radius: 12px;\n  padding: .75rem 1.25rem;\n  text-align: center;\n  min-width: 120px;\n  transition: transform var(--transition);\n}\n.stat-chip:hover { transform: translateY(-2px); }\n.stat-chip .num {\n  display: block;\n  font-size: 1.6rem;\n  font-weight: 700;\n  line-height: 1.2;\n}\n.stat-chip .label {\n  font-size: .7rem;\n  text-transform: uppercase;\n  letter-spacing: .08em;\n  opacity: .8;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   TOOLBAR\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.toolbar {\n  max-width: 1200px;\n  margin: -1.5rem auto 0;\n  padding: 0 1rem;\n  position: relative;\n  z-index: 10;\n}\n.toolbar-inner {\n  background: var(--surface);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-lg);\n  padding: 1.25rem 1.5rem;\n  display: flex;\n  gap: .75rem;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n\/* Search *\/\n.search-wrap {\n  flex: 1 1 280px;\n  position: relative;\n}\n.search-wrap svg {\n  position: absolute;\n  left: 14px; top: 50%;\n  transform: translateY(-50%);\n  width: 18px; height: 18px;\n  color: var(--text-muted);\n  pointer-events: none;\n}\n.search-input {\n  width: 100%;\n  padding: .7rem 1rem .7rem 2.6rem;\n  border: 2px solid var(--border);\n  border-radius: 10px;\n  font-size: .95rem;\n  font-family: var(--font);\n  background: var(--bg);\n  transition: border-color var(--transition), box-shadow var(--transition);\n}\n.search-input:focus {\n  outline: none;\n  border-color: var(--primary-light);\n  box-shadow: 0 0 0 3px rgba(79,70,229,.12);\n}\n\n\/* Selects *\/\n.filter-select {\n  padding: .7rem 2.2rem .7rem .9rem;\n  border: 2px solid var(--border);\n  border-radius: 10px;\n  font-size: .9rem;\n  font-family: var(--font);\n  background: var(--bg) url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6'\/%3E%3C\/svg%3E\") no-repeat right .8rem center \/ 12px;\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  transition: border-color var(--transition), box-shadow var(--transition);\n  min-width: 160px;\n}\n.filter-select:focus {\n  outline: none;\n  border-color: var(--primary-light);\n  box-shadow: 0 0 0 3px rgba(79,70,229,.12);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   RESULT INFO\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.result-info {\n  max-width: 1200px;\n  margin: 1rem auto .5rem;\n  padding: 0 1rem;\n  font-size: .85rem;\n  color: var(--text-muted);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   GRID & CARDS\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.grid {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: .5rem 1rem 2rem;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n  gap: 1rem;\n  \/* Single compositor layer for entire grid *\/\n  transform: translateZ(0);\n}\n\n.card {\n  background: var(--surface);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-sm);\n  padding: 1.5rem;\n  border-left: 4px solid var(--primary);\n  transition: transform var(--transition), box-shadow var(--transition);\n  \/* content-visibility handles its own containment \u2014 no conflict *\/\n  content-visibility: auto;\n  contain-intrinsic-size: 0 220px;\n}\n.card:hover {\n  transform: translateY(-4px) translateZ(0);\n  box-shadow: var(--shadow-xl);\n}\n.card.animate-in {\n  animation: cardIn .35s ease both;\n}\n\n@keyframes cardIn {\n  from { opacity: 0; transform: translateY(16px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n.card-name {\n  font-size: 1.15rem;\n  font-weight: 700;\n  color: var(--text);\n  margin-bottom: .35rem;\n}\n.card-meta {\n  display: flex;\n  gap: .5rem;\n  flex-wrap: wrap;\n  margin-bottom: .75rem;\n}\n.meta-badge {\n  background: #f1f5f9;\n  color: var(--text-muted);\n  font-size: .75rem;\n  font-weight: 600;\n  padding: .2rem .55rem;\n  border-radius: 6px;\n}\n.card-thesis {\n  font-size: .92rem;\n  color: #475569;\n  line-height: 1.55;\n  margin-bottom: .75rem;\n  padding: .65rem .85rem;\n  background: #f8fafc;\n  border-radius: 8px;\n  border-left: 3px solid var(--primary-light);\n  font-style: italic;\n}\n.card-supervisors {\n  border-top: 1px solid var(--border);\n  padding-top: .65rem;\n}\n.sv-label {\n  font-size: .7rem;\n  text-transform: uppercase;\n  letter-spacing: .06em;\n  color: var(--text-muted);\n  margin-bottom: .25rem;\n}\n.sv-name {\n  font-size: .85rem;\n  color: #475569;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   LOAD MORE \/ PAGINATION\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.load-more-wrap {\n  text-align: center;\n  padding: 1rem 1rem 3rem;\n}\n.load-more-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: .5rem;\n  padding: .75rem 2rem;\n  background: var(--primary);\n  color: #fff;\n  border: none;\n  border-radius: 999px;\n  font-size: .95rem;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: var(--font);\n  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);\n  box-shadow: 0 4px 14px rgba(79,70,229,.3);\n}\n.load-more-btn:hover {\n  background: var(--primary-dark);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(79,70,229,.4);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   SKELETON LOADING\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.skeleton-card {\n  background: var(--surface);\n  border-radius: var(--radius);\n  padding: 1.5rem;\n  box-shadow: var(--shadow-sm);\n}\n.skeleton-line {\n  height: 14px;\n  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n  border-radius: 6px;\n  margin-bottom: .6rem;\n}\n.skeleton-line.w60 { width: 60%; }\n.skeleton-line.w80 { width: 80%; }\n.skeleton-line.w40 { width: 40%; }\n.skeleton-line.h20 { height: 20px; }\n@keyframes shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   EMPTY STATE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.empty-state {\n  grid-column: 1 \/ -1;\n  text-align: center;\n  padding: 4rem 1rem;\n  color: var(--text-muted);\n}\n.empty-state .icon { font-size: 3rem; margin-bottom: .75rem; }\n.empty-state h3 { font-size: 1.2rem; color: var(--text); margin-bottom: .35rem; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FOOTER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.site-footer {\n  text-align: center;\n  padding: 1.5rem 1rem;\n  font-size: .75rem;\n  color: rgba(100,116,139,.5);\n  border-top: 1px solid var(--border);\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   RESPONSIVE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width: 768px) {\n  .hero { padding: 2rem 1rem 2rem; }\n  .hero h1 { font-size: 1.5rem; }\n  .toolbar-inner { flex-direction: column; }\n  .filter-select { width: 100%; }\n  .grid { grid-template-columns: 1fr; gap: .75rem; }\n  .card { padding: 1.15rem; }\n}\n@media (max-width: 480px) {\n  .stats-row { gap: .5rem; }\n  .stat-chip { min-width: 80px; padding: .5rem .75rem; }\n  .stat-chip .num { font-size: 1.2rem; }\n}\n<\/style>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body>\n\n<!-- \u2550\u2550\u2550 HERO \u2550\u2550\u2550 -->\n<header class=\"hero\">\n  <div class=\"hero-content\">\n    <h1>Graduates of Master of Electrical Engineering<\/h1>\n    <p>Fakultas Teknik &middot; Universitas Syiah Kuala<\/p>\n    <div class=\"stats-row\">\n      <div class=\"stat-chip\"><span class=\"num\" id=\"sTotal\">\u2014<\/span><span class=\"label\">Total Graduates<\/span><\/div>\n      <div class=\"stat-chip\"><span class=\"num\" id=\"sYears\">\u2014<\/span><span class=\"label\">Angkatan<\/span><\/div>\n      <div class=\"stat-chip\"><span class=\"num\" id=\"sShowing\">\u2014<\/span><span class=\"label\">Displayed<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/header>\n\n<!-- \u2550\u2550\u2550 TOOLBAR \u2550\u2550\u2550 -->\n<div class=\"toolbar\">\n  <div class=\"toolbar-inner\">\n    <div class=\"search-wrap\">\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\" stroke-linecap=\"round\"\/><\/svg>\n      <input type=\"text\" class=\"search-input\" id=\"searchInput\" placeholder=\"Cari nama, NPM, tesis, pembimbing\u2026\">\n    <\/div>\n    <select class=\"filter-select\" id=\"yearSelect\">\n      <option value=\"all\">Semua Tahun<\/option>\n    <\/select>\n    <select class=\"filter-select\" id=\"sortSelect\">\n      <option value=\"year-desc\">Angkatan Baru \u2192 Lama<\/option>\n      <option value=\"name\">Nama A \u2192 Z<\/option>\n      <option value=\"name-desc\">Nama Z \u2192 A<\/option>\n      <option value=\"year\">Angkatan Lama \u2192 Baru<\/option>\n      <option value=\"npm\">NPM<\/option>\n    <\/select>\n  <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550 RESULT INFO \u2550\u2550\u2550 -->\n<div class=\"result-info\">\n  <span id=\"resultText\">Memuat\u2026<\/span>\n  <span id=\"cacheInfo\"><\/span>\n<\/div>\n\n<!-- \u2550\u2550\u2550 GRID \u2550\u2550\u2550 -->\n<div class=\"grid\" id=\"grid\"><\/div>\n\n<!-- \u2550\u2550\u2550 LOAD MORE \u2550\u2550\u2550 -->\n<div class=\"load-more-wrap\">\n  <button class=\"load-more-btn\" id=\"loadMoreBtn\" style=\"display:none\">\n    <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M9 3v12M3 9l6 6 6-6\"\/><\/svg>\n    Muat Lebih Banyak\n  <\/button>\n<\/div>\n\n<!-- \u2550\u2550\u2550 FOOTER \u2550\u2550\u2550 -->\n<footer class=\"site-footer\">&copy; SYAH &middot; Data Alumni MTE USK<\/footer>\n\n<script>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ALUMNI APP \u2014 Auto-loading, per-year JSONL\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n(() => {\n  'use strict';\n\n  \/\/ \u2500\u2500 Config \u2500\u2500\n  const BASE_URL = 'https:\/\/mte.usk.ac.id\/wp-content\/uploads\/data-alumni\/';\n  const PER_PAGE = 12;\n\n  \/\/ \u2500\u2500 State \u2500\u2500\n  let allData = [];          \/\/ all loaded alumni\n  let filteredData = [];     \/\/ after search\/filter\n  let page = 1;\n  let activeYear = null;     \/\/ null = all\n  let metadata = null;\n  let loadedYears = new Set();\n\n  \/\/ \u2500\u2500 DOM \u2500\u2500\n  const $grid       = document.getElementById('grid');\n  const $search     = document.getElementById('searchInput');\n  const $sort       = document.getElementById('sortSelect');\n  const $yearSelect = document.getElementById('yearSelect');\n  const $loadMore   = document.getElementById('loadMoreBtn');\n  const $resultText = document.getElementById('resultText');\n  const $cacheInfo  = document.getElementById('cacheInfo');\n  const $sTotal     = document.getElementById('sTotal');\n  const $sYears     = document.getElementById('sYears');\n  const $sShowing   = document.getElementById('sShowing');\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ DATA LOADING\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  async function fetchJSONL(url) {\n    const res = await fetch(url);\n    if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);\n    const text = await res.text();\n    return text.trim().split('n').map(l => { try { return JSON.parse(l); } catch { return null; } }).filter(Boolean);\n  }\n\n  async function loadManifest() {\n    try {\n      const res = await fetch(`${BASE_URL}alumni-metadata.json`);\n      if (!res.ok) throw new Error('alumni-metadata.json not found');\n      const meta = await res.json();\n      \/\/ Unified file: years + counts live here\n      metadata = { years: meta.years, counts: meta.counts, total: meta.totalAlumni };\n      return metadata;\n    } catch {\n      \/\/ Fallback: try known years\n      metadata = { years: [2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023], counts: {}, total: 0 };\n      return metadata;\n    }\n  }\n\n  async function loadYear(year) {\n    if (loadedYears.has(year)) return;\n    const data = await fetchJSONL(`${BASE_URL}${year}.jsonl`);\n    \/\/ Ensure searchText\n    data.forEach(a => {\n      if (!a.searchText) {\n        a.searchText = [a.name, a.npm, a.thesis, ...(a.supervisors||[])].join(' ').toLowerCase();\n      }\n      if (typeof a.graduationYear === 'string') a.graduationYear = parseInt(a.graduationYear);\n    });\n    allData.push(...data);\n    loadedYears.add(year);\n  }\n\n  async function loadAllYears() {\n    showSkeletons(6);\n    await loadManifest();\n    \/\/ Load all years in parallel\n    await Promise.all(metadata.years.map(y => loadYear(y).catch(e => console.warn(`Failed to load ${y}:`, e))));\n    allData.sort((a, b) => (a.name || '').localeCompare(b.name || ''));\n    updateHeaderStats();\n    applyFilters();\n  }\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ YEAR SELECT (auto-populated from metadata)\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  function populateYearSelect() {\n    if (!metadata) return;\n    \/\/ Keep the \"Semua\" option, add years\n    metadata.years.forEach(y => {\n      const cnt = metadata.counts?.[y] || '?';\n      const opt = document.createElement('option');\n      opt.value = y;\n      opt.textContent = `${y}  (${cnt})`;\n      $yearSelect.appendChild(opt);\n    });\n  }\n\n  $yearSelect.addEventListener('change', () => {\n    const v = $yearSelect.value;\n    activeYear = v === 'all' ? null : parseInt(v);\n    page = 1;\n    applyFilters();\n  });\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ FILTERING & SORTING\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  function applyFilters() {\n    const q = $search.value.toLowerCase().trim();\n    const sort = $sort.value;\n\n    let result = allData;\n\n    \/\/ Year filter\n    if (activeYear !== null) {\n      result = result.filter(a => a.graduationYear === activeYear);\n    }\n\n    \/\/ Text search\n    if (q.length >= 2) {\n      result = result.filter(a => a.searchText && a.searchText.includes(q));\n    }\n\n    \/\/ Sort \u2014 default year-desc (newest first)\n    result = sortData(result, sort || 'year-desc');\n    filteredData = result;\n    page = 1;\n    render();\n  }\n\n  function sortData(data, by) {\n    const d = [...data];\n    switch (by) {\n      case 'name':      return d.sort((a,b) => (a.name||'').localeCompare(b.name||''));\n      case 'name-desc': return d.sort((a,b) => (b.name||'').localeCompare(a.name||''));\n      case 'year':      return d.sort((a,b) => (a.graduationYear||0) - (b.graduationYear||0));\n      case 'year-desc': return d.sort((a,b) => (b.graduationYear||0) - (a.graduationYear||0));\n      case 'npm':       return d.sort((a,b) => (a.npm||'').localeCompare(b.npm||''));\n      default:          return d;\n    }\n  }\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ RENDERING\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  function render(appendOnly = false) {\n    const end = page * PER_PAGE;\n    const totalShowing = Math.min(end, filteredData.length);\n\n    $sShowing.textContent = totalShowing;\n    $resultText.textContent = `Menampilkan ${totalShowing} dari ${filteredData.length} alumni`;\n\n    if (filteredData.length === 0) {\n      $grid.innerHTML = `<div class=\"empty-state\"><div class=\"icon\">\ud83d\udd0d<\/div><h3>Tidak ada hasil<\/h3><p>Coba kata kunci atau filter lain<\/p><\/div>`;\n      $loadMore.style.display = 'none';\n      return;\n    }\n\n    const start = appendOnly ? (page - 1) * PER_PAGE : 0;\n    const newItems = filteredData.slice(start, end);\n\n    if (!appendOnly) $grid.innerHTML = '';\n\n    \/\/ Render via DocumentFragment \u2014 tidak rebuild seluruh DOM sekaligus\n    const frag = document.createDocumentFragment();\n    newItems.forEach((a, i) => {\n      const tmp = document.createElement('template');\n      tmp.innerHTML = cardHTML(a);\n      const el = tmp.content.firstElementChild;\n      \/\/ Animasi hanya untuk card baru, dihapus setelah selesai\n      el.classList.add('animate-in');\n      el.addEventListener('animationend', () => el.classList.remove('animate-in'), { once: true });\n      frag.appendChild(el);\n    });\n    $grid.appendChild(frag);\n\n    if (end < filteredData.length) {\n      $loadMore.style.display = 'inline-flex';\n      $loadMore.textContent = `Muat Lebih Banyak (${filteredData.length - end} tersisa)`;\n    } else {\n      $loadMore.style.display = 'none';\n    }\n  }\n\n  function cardHTML(a) {\n    const name = esc(a.name || '\u2014');\n    const npm = esc(a.npm || '\u2014');\n    const year = a.graduationYear || '\u2014';\n    const thesis = esc(a.thesis || '\u2014');\n    const sups = (a.supervisors || []).map(s => `<div class=\"sv-name\">${esc(s)}<\/div>`).join('');\n\n    return `\n    <article class=\"card\">\n      <div class=\"card-name\">${name}<\/div>\n      <div class=\"card-meta\">\n        <span class=\"meta-badge\">NPM ${npm}<\/span>\n        <span class=\"meta-badge\">${year}<\/span>\n      <\/div>\n      <div class=\"card-thesis\">${thesis}<\/div>\n      ${sups ? `<div class=\"card-supervisors\"><div class=\"sv-label\">Pembimbing<\/div>${sups}<\/div>` : ''}\n    <\/article>`;\n  }\n\n  function esc(t) {\n    return String(t == null ? '\u2014' : t)\n      .replace(\/&\/g, '&amp;')\n      .replace(\/<\/g, '&lt;')\n      .replace(\/>\/g, '&gt;')\n      .replace(\/\"\/g, '&quot;');\n  }\n\n  function showSkeletons(n) {\n    $grid.innerHTML = Array.from({length: n}, () => `\n      <div class=\"skeleton-card\">\n        <div class=\"skeleton-line h20 w60\"><\/div>\n        <div class=\"skeleton-line w40\"><\/div>\n        <div class=\"skeleton-line w80\"><\/div>\n        <div class=\"skeleton-line w60\"><\/div>\n      <\/div>`).join('');\n  }\n\n  function updateHeaderStats() {\n    $sTotal.textContent = allData.length;\n    $sYears.textContent = metadata?.years?.length || '\u2014';\n    $sShowing.textContent = '0';\n  }\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ EVENTS\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  let debounce;\n  $search.addEventListener('input', () => {\n    clearTimeout(debounce);\n    debounce = setTimeout(() => applyFilters(), 250);\n  });\n  $sort.addEventListener('change', () => applyFilters());\n  $loadMore.addEventListener('click', () => { page++; render(true); });\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ INIT\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  loadAllYears().then(() => {\n    populateYearSelect();\n  }).catch(err => {\n    console.error(err);\n    $grid.innerHTML = `<div class=\"empty-state\"><div class=\"icon\">\u26a0\ufe0f<\/div><h3>Gagal memuat data<\/h3><p>${esc(err.message)}<\/p><\/div>`;\n  });\n\n})();\n<\/script>\n<\/body>\n<\/html>\n\n<!-- \/wp:html -->",
        "_et_gb_content_width": "795",
        "footnotes": ""
    },
    "class_list": [
        "post-245626",
        "page",
        "type-page",
        "status-publish",
        "hentry"
    ],
    "_links": {
        "self": [
            {
                "href": "https:\/\/mte.usk.ac.id\/en\/index.php?rest_route=\/wp\/v2\/pages\/245626",
                "targetHints": {
                    "allow": [
                        "GET"
                    ]
                }
            }
        ],
        "collection": [
            {
                "href": "https:\/\/mte.usk.ac.id\/en\/index.php?rest_route=\/wp\/v2\/pages"
            }
        ],
        "about": [
            {
                "href": "https:\/\/mte.usk.ac.id\/en\/index.php?rest_route=\/wp\/v2\/types\/page"
            }
        ],
        "author": [
            {
                "embeddable": true,
                "href": "https:\/\/mte.usk.ac.id\/en\/index.php?rest_route=\/wp\/v2\/users\/2"
            }
        ],
        "replies": [
            {
                "embeddable": true,
                "href": "https:\/\/mte.usk.ac.id\/en\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=245626"
            }
        ],
        "version-history": [
            {
                "count": 14,
                "href": "https:\/\/mte.usk.ac.id\/en\/index.php?rest_route=\/wp\/v2\/pages\/245626\/revisions"
            }
        ],
        "predecessor-version": [
            {
                "id": 245901,
                "href": "https:\/\/mte.usk.ac.id\/en\/index.php?rest_route=\/wp\/v2\/pages\/245626\/revisions\/245901"
            }
        ],
        "wp:attachment": [
            {
                "href": "https:\/\/mte.usk.ac.id\/en\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=245626"
            }
        ],
        "curies": [
            {
                "name": "wp",
                "href": "https:\/\/api.w.org\/{rel}",
                "templated": true
            }
        ]
    }
}