/* Portfolio: the Figma gallery, scoped to this page and its own components. */
body[data-page="portfolio"]{background:var(--black-100);color:var(--white-100)}
body[data-page="portfolio"] main{flex:0 0 auto}
body[data-page="portfolio"] .nav__links a{opacity:1}
body[data-page="portfolio"] .portfolio-brand-asset{width:revert;height:revert;max-width:none}
body[data-page="portfolio"] .nav__logo{flex:none}
.portfolio-hero{--portfolio-gutter:var(--gutter,40px);position:relative;height:700px;min-width:0;padding:110px var(--portfolio-gutter) 0;background:linear-gradient(180deg,var(--orange-100,#f8613b) 0%,var(--black-100,#000) 100%);overflow:hidden}
.portfolio-content{width:100%;min-width:0}
.portfolio-header{display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:0;position:relative;z-index:3}
.portfolio-header h1{font-family:var(--font-sans);font-size:85px;font-weight:400;line-height:1;letter-spacing:-3.4px;color:var(--white-100);white-space:nowrap}
.portfolio-controls{display:flex;align-items:center;justify-content:flex-end;gap:19px;flex:none}
.portfolio-sort,.portfolio-search{position:relative;min-width:0}
.portfolio-sort{flex:none}
.portfolio-sort-button{display:flex;align-items:center;gap:8px;width:130px;height:37px;padding:5px 12px;border:1px solid #fff3;border-radius:8px;background:#ffffff1a;color:#fff;font-size:15px;font-weight:400;line-height:1.6;white-space:nowrap;cursor:pointer;-webkit-backdrop-filter:blur(51.75px);backdrop-filter:blur(51.75px)}
.portfolio-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}
.portfolio-icon img,.portfolio-chevron img{width:revert;height:revert;max-width:none;flex:none;pointer-events:none}
.portfolio-chevron{display:flex;align-items:center;justify-content:center;width:12px;height:12px;flex:none}
.portfolio-chevron img{transform:rotate(90deg);transition:transform .2s ease}
.portfolio-sort-button[aria-expanded="true"] .portfolio-chevron img{transform:rotate(-90deg)}
.portfolio-sort-button:hover{background:#ffffff25}
.portfolio-sort-button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.portfolio-search{width:320px;flex:none}
.portfolio-search-field{height:54px;display:flex;align-items:center;gap:8px;padding:0 16px;border:1px solid #03132b1a;border-radius:12px;background:linear-gradient(90deg,#03132b08,#03132b08),#fff;color:#000}
.portfolio-search-field:focus-within{outline:2px solid #fff9;outline-offset:3px}
.portfolio-search-field input{display:block;width:100%;min-width:0;flex:1;padding:0;border:0;background:transparent;color:#000;font-family:var(--font-sans);font-size:14px;font-weight:400;line-height:1.6;outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.portfolio-search-field input::placeholder{color:#ababab;opacity:1}
.portfolio-search-field input::-webkit-search-cancel-button{display:none}
.portfolio-sort-menu,.portfolio-search-results{position:absolute;z-index:6;border:1px solid #03132b1a;border-radius:8px;background:#00000059;box-shadow:0 8px 16px #0000000a;-webkit-backdrop-filter:blur(16.9px);backdrop-filter:blur(16.9px);color:#fff}
.portfolio-sort-menu{top:calc(100% + 24px);right:0;width:180px;height:auto;padding:6px;display:flex;flex-direction:column;justify-content:space-between;gap:3px}
.portfolio-sort-menu button{display:flex;align-items:center;gap:8px;width:100%;height:40px;min-height:40px;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:#fff;cursor:pointer;font-family:"Open Sauce One",var(--font-sans);font-size:14px;font-weight:400;line-height:1.6;white-space:nowrap;text-align:left}
.portfolio-sort-menu button[aria-pressed="true"]{background:#ffffff69}
.portfolio-sort-menu button:hover,.portfolio-sort-menu button:focus-visible{background:#ffffff30;outline:none}
.portfolio-sort-menu button[aria-pressed="true"]:hover,.portfolio-sort-menu button[aria-pressed="true"]:focus-visible{background:#ffffff80}
.portfolio-search-results{top:calc(100% + 15.5px);left:0;width:321px;height:260px;display:flex;flex-direction:column;gap:8px;padding:15px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.portfolio-search-results::-webkit-scrollbar{display:none}
.portfolio-search-result{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;flex:none;min-height:53px;padding:12px;border:1px solid transparent;border-radius:16px;text-decoration:none;color:#fff;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.portfolio-search-result:hover,.portfolio-search-result:focus-visible,.portfolio-search-result[aria-selected="true"]{background:linear-gradient(135deg,#ffffff1f,#ffffff08);border-color:#ffffff30;box-shadow:0 5px 15px #00000014;outline:none}
.portfolio-search-result__copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.portfolio-search-result__title{display:block;font-size:15px;font-weight:500;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.portfolio-search-result__excerpt{display:block;height:auto;overflow:visible;color:#f2f2f2;opacity:.8;font-size:12px;font-weight:400;line-height:1.6;overflow-wrap:anywhere}
.portfolio-search-result__read-more{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:6.897px;border:.431px solid #999;border-radius:10px;background:#fff;color:#333;font-size:6.9px;font-weight:500;line-height:1.4;letter-spacing:.0552px;white-space:nowrap}
.portfolio-search-no-results{font-size:13px;line-height:1.6;color:#fffd}
.portfolio-search-result .portfolio-search-result__read-more{align-self:flex-end;padding:9px 14px;border:1px solid #ffffff55;border-radius:12px;font-size:11px;line-height:1.4;transition:color .2s ease}
.portfolio-search-result:hover .portfolio-search-result__read-more,.portfolio-search-result:focus-visible .portfolio-search-result__read-more,.portfolio-search-result[aria-selected="true"] .portfolio-search-result__read-more{background:var(--grad-orange,linear-gradient(90deg,#f8613b,#fa967c));border-color:#ffffff55;color:#fff}
.portfolio-tabs{display:flex;align-items:stretch;width:100%;max-width:100%;height:68px;margin-top:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;position:relative;z-index:2}
.portfolio-tabs::-webkit-scrollbar{display:none}
.portfolio-tabs button{display:flex;align-items:center;justify-content:center;flex:none;height:68px;padding:24px;border:0;border-bottom:2px solid transparent;background:transparent;color:#fff;opacity:.5;font-family:var(--font-sans);font-size:20px;font-weight:400;line-height:1;letter-spacing:-.8px;white-space:nowrap;cursor:pointer;transition:opacity .2s ease,border-color .2s ease}
.portfolio-tabs button[aria-pressed="true"]{opacity:1;border-bottom-color:#fff}
.portfolio-tabs button:hover{opacity:.85}
.portfolio-tabs button:focus-visible{outline:2px solid #fffc;outline-offset:-4px;opacity:1;border-radius:4px}
.portfolio-rail{margin-top:35px;min-width:0}
.portfolio-viewport{width:calc(100% + var(--portfolio-gutter));min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.portfolio-viewport::-webkit-scrollbar{display:none}
.portfolio-viewport:focus-visible{outline:2px solid #ffffffb3;outline-offset:5px;border-radius:13.255px}
.portfolio-track{display:flex;align-items:flex-start;gap:54.5px;width:max-content;min-width:0}
.portfolio-card{display:block;position:relative;flex:0 0 243px;width:243px;height:342.409px;overflow:hidden;border-radius:13.255px;background:var(--black-80,#333);scroll-snap-align:start;isolation:isolate}
.portfolio-card__photo{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.portfolio-card__photo img{position:absolute;width:426.52%;height:170.26%;max-width:none;left:-189.07%;top:-70.46%;pointer-events:none}
.portfolio-card__caption{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;position:absolute;left:0;right:0;bottom:0;height:103px;padding:13.255px;border-radius:23px 23px 13.255px 13.255px;background:#00000080;overflow:hidden;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(5px);transition:opacity .22s ease,transform .22s ease}
.portfolio-card__caption h2{font-size:25px;font-weight:400;line-height:1.05;letter-spacing:-1px;color:#fff;white-space:nowrap}
.portfolio-card__read-more{display:inline-flex;align-items:center;justify-content:center;min-width:88px;flex:none;padding:9px 13px;border:1px solid #ffffff55;border-radius:12px;background:#fff;color:#333;font-size:11px;font-weight:500;line-height:1.4;white-space:nowrap}
.portfolio-card:hover .portfolio-card__read-more,.portfolio-card:focus-visible .portfolio-card__read-more{border-color:var(--orange-100,#f8613b);background:var(--grad-orange,linear-gradient(90deg,#f8613b,#ff9a80));color:#fff}
.portfolio-card:hover .portfolio-card__caption,.portfolio-card:focus-visible .portfolio-card__caption{opacity:1;transform:translateY(0)}
.portfolio-card:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.portfolio-progress{position:absolute;left:var(--portfolio-gutter);bottom:14px;width:calc(100% - var(--portfolio-gutter) * 2);height:3px;border-radius:100px;pointer-events:none}
.portfolio-progress__thumb{display:block;width:380px;max-width:100%;height:3px;border-radius:100px;background:#d9d9d9;will-change:transform}
.portfolio-empty{min-height:342.409px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;padding:30px 20px}
.portfolio-empty h2{font-size:25px;font-weight:400;line-height:1.2;letter-spacing:-1px}
.portfolio-empty p{font-size:14px;opacity:.65}
.portfolio-card[hidden],.portfolio-sort-menu[hidden],.portfolio-search-results[hidden],.portfolio-empty[hidden],.portfolio-progress[hidden],.portfolio-viewport[hidden]{display:none!important}
body[data-page="portfolio"] .portfolio-footer{background:#000}
body[data-page="portfolio"] .portfolio-footer-logo{display:flex;align-items:center;gap:9px;height:26.051px}
.portfolio-footer-logo>span{display:block;flex:none}
body[data-page="portfolio"] .portfolio-footer .footer__cols{min-height:140px}
body[data-page="portfolio"] .portfolio-footer .footer__nav{gap:15px}

@media(min-width:1700px){.portfolio-hero{--portfolio-gutter:max(40px,calc((100vw - 1620px)/2))}}
@media(max-width:1100px) and (min-width:861px){.portfolio-header h1{font-size:72px;letter-spacing:-2.88px}.portfolio-controls{gap:14px}.portfolio-search{width:290px}.portfolio-search-results{width:291px}.portfolio-tabs button{padding-inline:20px;font-size:18px;letter-spacing:-.72px}.portfolio-track{gap:36px}}
@media(max-width:860px){.portfolio-hero{height:auto;min-height:0;padding-top:125px;padding-bottom:34px}.portfolio-header{display:block}.portfolio-header h1{font-size:62px;letter-spacing:-2.48px}.portfolio-controls{margin-top:24px;justify-content:space-between;gap:12px;width:100%}.portfolio-search{flex:1;width:auto;min-width:0}.portfolio-search-results{width:100%;min-width:0}.portfolio-search-result{gap:15px}.portfolio-sort-menu{left:0;right:auto;top:calc(100% + 16px)}.portfolio-search-results{top:calc(100% + 7.5px)}.portfolio-tabs{margin-top:20px;height:60px;width:calc(100% + var(--portfolio-gutter))}.portfolio-tabs button{height:60px;padding:20px 18px;font-size:17px;letter-spacing:-.68px}.portfolio-tabs button:first-child{padding-left:0;padding-right:18px}.portfolio-rail{margin-top:28px}.portfolio-track{gap:24px;padding-right:var(--portfolio-gutter)}.portfolio-card__caption{opacity:1;transform:none}.portfolio-progress{position:relative;left:auto;bottom:auto;width:100%;margin-top:32px}.portfolio-progress__thumb{width:38%}body[data-page="portfolio"] .portfolio-footer .footer__cols{min-height:0}body[data-page="portfolio"] .portfolio-footer .footer__nav{gap:var(--sp-1)}.portfolio-search-field{padding-inline:12px}.portfolio-search-field input{font-size:13px}.portfolio-search-result__title{font-size:13px}.portfolio-search-result__excerpt{font-size:10px}.portfolio-search-results{height:260px;padding:12px;gap:9px}.portfolio-search-result__read-more{font-size:7px;padding:6px}}
@media(max-width:520px){.portfolio-header h1{font-size:56px;letter-spacing:-2.24px}.portfolio-controls{gap:10px}.portfolio-sort-button{width:120px;padding-inline:9px;gap:6px;font-size:14px}.portfolio-search-field{padding-inline:10px;gap:5px}.portfolio-search-field input{font-size:12px}.portfolio-search-field>.portfolio-icon{width:18px}.portfolio-search-results{left:auto;right:0;width:min(321px,calc(100vw - var(--portfolio-gutter) * 2));padding:15px}.portfolio-search-result{gap:25px}.portfolio-search-result__title{font-size:15px}.portfolio-tabs button{font-size:16px;letter-spacing:-.64px}.portfolio-track{gap:22px}body[data-page="portfolio"] .footer__nav{flex-wrap:wrap;justify-content:center;column-gap:15px;row-gap:9px}body[data-page="portfolio"] .footer__nav li{white-space:nowrap}}
@media(max-width:359px){.portfolio-hero{padding-top:115px}.portfolio-header h1{font-size:50px;letter-spacing:-2px}.portfolio-controls{flex-wrap:wrap;gap:14px}.portfolio-sort{order:2}.portfolio-search{width:100%;flex-basis:100%;order:1}.portfolio-sort-menu{top:calc(100% + 10px)}.portfolio-search-field input{font-size:14px}.portfolio-tabs{margin-top:16px}.portfolio-card{flex-basis:235px;width:235px;height:331.136px}.portfolio-card__caption{height:103px}.portfolio-card__caption h2{font-size:24px}}
@media(hover:none),(pointer:coarse){.portfolio-card__caption{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.portfolio-card__caption,.portfolio-tabs button,.portfolio-chevron img{transition:none}.portfolio-viewport{scroll-behavior:auto}.portfolio-progress__thumb{will-change:auto}}
/* A 16px input prevents Safari from zooming the mobile page on focus. */
@media(max-width:860px){.portfolio-search-field input{font-size:16px}}

/* Let touch galleries travel across the screen, including the left gutter. */
@media(max-width:860px){
  .portfolio-viewport,.portfolio-tabs{width:calc(100% + var(--portfolio-gutter) * 2);max-width:none;margin-inline:calc(var(--portfolio-gutter) * -1);padding-inline:var(--portfolio-gutter);scroll-padding-inline:var(--portfolio-gutter)}
  .portfolio-viewport{padding-right:0}
  .portfolio-track{padding-right:var(--portfolio-gutter)}
  .portfolio-tabs{--tabs-fade-left:0px;--tabs-fade-right:0px;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--tabs-fade-left),#000 calc(100% - var(--tabs-fade-right)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--tabs-fade-left),#000 calc(100% - var(--tabs-fade-right)),transparent)}
  .portfolio-tabs.can-scroll-left{--tabs-fade-left:28px}
  .portfolio-tabs.can-scroll-right{--tabs-fade-right:28px}
}

/* Smaller mobile controls; preserve the desktop Figma dimensions. */
@media(max-width:520px){
  .portfolio-controls{justify-content:flex-start;gap:10px;flex-wrap:nowrap}
  .portfolio-sort{order:0}
  .portfolio-sort-button{width:108px;height:34px;padding:4px 9px;gap:6px;font-size:13px}
  .portfolio-sort-button .portfolio-icon{width:16px;height:16px}
  .portfolio-sort-button .portfolio-icon img{width:100%;height:100%;object-fit:contain}
  .portfolio-sort-button .portfolio-chevron{width:10px;height:10px}
  .portfolio-sort-button .portfolio-chevron img{width:100%;height:100%;object-fit:contain}
  .portfolio-search{order:0;flex:1 1 0;width:auto;max-width:210px}
  .portfolio-search-field{height:42px;border-radius:10px;padding-inline:10px;gap:6px}
  .portfolio-search-field>.portfolio-icon{width:16px;height:16px}
  .portfolio-search-field>.portfolio-icon img{width:100%;height:100%;object-fit:contain}
}
/* Garis bawah tab yang bergeser (dipasang oleh js/portfolio.js) */
.portfolio-tabs.has-ink button[aria-pressed="true"]{border-bottom-color:transparent}
.portfolio-tabs__ink{position:absolute;left:0;bottom:0;height:2px;width:0;background:#fff;border-radius:2px;pointer-events:none;transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1)}
.portfolio-tabs button{transition:opacity .3s ease,border-color .2s ease}
@media (prefers-reduced-motion:reduce){.portfolio-tabs__ink{transition:none}}
/* Kartu Portfolio: bagian bawah foto memudar mulus ke latar halaman (semua perangkat).
   Hanya fotonya yang di-mask, jadi judul & tombol Read More tetap utuh. */
.portfolio-card{background:transparent}
.portfolio-card__photo{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%)}
/* Animasi muncul: menu Filter by & hasil pencarian (kelas dipasang oleh portfolio.js) */
@keyframes pfPop{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pfItem{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.portfolio-sort-menu{transform-origin:top right}
.portfolio-search-results{transform-origin:top left}
.portfolio-sort-menu.is-opening,.portfolio-search-results.is-opening{animation:pfPop .28s cubic-bezier(.22,1,.36,1) both}
.portfolio-sort-menu.is-opening button{animation:pfItem .32s cubic-bezier(.22,1,.36,1) both}
.portfolio-sort-menu.is-opening button:nth-child(2){animation-delay:.04s}
.portfolio-sort-menu.is-opening button:nth-child(3){animation-delay:.08s}
.portfolio-search-results.is-opening .portfolio-search-result{animation:pfItem .34s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--n,0) * 45ms + 40ms)}
@media(max-width:860px){.portfolio-sort-menu{transform-origin:top left}}
/* Pill kategori di ujung kanan setiap hasil pencarian */
.portfolio-search-result__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0}
.portfolio-search-result__head .portfolio-search-result__title{flex:1;min-width:0}
.portfolio-search-result__pill{flex:none;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 9px;border:1px solid #ffffff40;border-radius:999px;background:#ffffff1a;color:#fff;font-size:10px;font-weight:500;line-height:1.3;letter-spacing:.01em}
.portfolio-search-result:hover .portfolio-search-result__pill,.portfolio-search-result[aria-selected="true"] .portfolio-search-result__pill{border-color:#fa967c99;background:#f8613b33}
@media(max-width:860px){.portfolio-search-result__pill{font-size:9px;padding:3px 8px}}
@media(prefers-reduced-motion:reduce){.portfolio-sort-menu.is-opening,.portfolio-search-results.is-opening,.portfolio-sort-menu.is-opening button,.portfolio-search-results.is-opening .portfolio-search-result{animation:none}}

/* ==========================================================================
   Revisi 13 Okt 2026 — halaman Portfolio pas satu layar (tanpa scroll ke bawah).
   Kartu tetap ukuran desain (243 × 342 px). Agar muat, footer halaman ini
   dibuat ringkas (logo, menu, email, Instagram, hak cipta) dan jarak di
   bagian judul sedikit dirapatkan. Ruang sisa di layar tinggi diisi latar.
   Layar yang memang terlalu pendek tetap bisa scroll sedikit.
   ========================================================================== */
body[data-page="portfolio"] .page-wrap { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body[data-page="portfolio"] main { flex: 1 0 auto; display: flex; flex-direction: column; }
.portfolio-hero { flex: 1 0 auto; height: auto; min-height: 0; padding-bottom: clamp(18px, 3vh, 34px); }
.portfolio-progress { position: relative; left: auto; bottom: auto; width: 100%; margin-top: clamp(16px, 3vh, 30px); }
@media (min-width: 861px) {
  .portfolio-hero { padding-top: clamp(92px, 12.2vh, 110px); }
  .portfolio-rail { margin-top: clamp(16px, 3.4vh, 35px); }
}
@media (min-width: 861px) and (max-height: 820px) {
  .portfolio-header h1 { font-size: clamp(66px, 9.6vh, 85px); letter-spacing: -.04em; }
  .portfolio-tabs { height: 58px; margin-top: 4px; }
  .portfolio-tabs button { height: 58px; padding-block: 18px; }
}
/* Footer ringkas khusus Portfolio */
body[data-page="portfolio"] .portfolio-footer { flex: none; padding-block: 22px; }
body[data-page="portfolio"] .portfolio-footer .footer__inner { flex-direction: row; align-items: center; gap: 40px; }
body[data-page="portfolio"] .portfolio-footer .footer__cols { flex: 1 1 auto; align-items: center; gap: 10px 32px; min-height: 0; }
body[data-page="portfolio"] .portfolio-footer .footer__nav { gap: 18px; }
body[data-page="portfolio"] .portfolio-footer .footer__nav ul { flex-direction: row; gap: 18px; min-width: 0; }
body[data-page="portfolio"] .portfolio-footer .footer__contact { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; gap: 6px 22px; }
body[data-page="portfolio"] .portfolio-footer .footer__contact a:last-child { display: none; }
body[data-page="portfolio"] .portfolio-footer .footer__legal { max-width: none; white-space: nowrap; }
@media (max-width: 860px) {
  .portfolio-hero { padding-top: calc(92px + 1vh); padding-bottom: 14px; }
  .portfolio-header h1 { font-size: clamp(48px, 7vh, 62px); }
  .portfolio-controls { margin-top: clamp(12px, 2vh, 24px); }
  .portfolio-tabs { margin-top: clamp(6px, 1.4vh, 20px); height: 50px; }
  .portfolio-tabs button { height: 50px; }
  .portfolio-rail { margin-top: clamp(14px, 2.4vh, 28px); }
  .portfolio-progress { margin-top: clamp(12px, 2vh, 32px); }
  body[data-page="portfolio"] .portfolio-footer { padding-block: 14px 16px; }
  body[data-page="portfolio"] .portfolio-footer .footer__inner { flex-direction: column; gap: 8px; }
  body[data-page="portfolio"] .portfolio-footer .footer-logo-hide, body[data-page="portfolio"] .portfolio-footer-logo { height: 22px; }
  body[data-page="portfolio"] .portfolio-footer .footer__cols { gap: 6px; }
  body[data-page="portfolio"] .portfolio-footer .footer__nav { flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: 13px; }
  body[data-page="portfolio"] .portfolio-footer .footer__nav ul { display: contents; }
  body[data-page="portfolio"] .portfolio-footer .footer__contact { justify-content: center; gap: 2px 14px; font-size: 12px; }
  body[data-page="portfolio"] .portfolio-footer .footer__legal { padding-top: 0; font-size: 10.5px; }
}
@media (min-width: 861px) and (max-width: 1320px) {
  body[data-page="portfolio"] .portfolio-footer .footer__inner { gap: 24px; }
  body[data-page="portfolio"] .portfolio-footer .footer__cols { gap: 8px 20px; font-size: 13px; }
  body[data-page="portfolio"] .portfolio-footer .footer__nav, body[data-page="portfolio"] .portfolio-footer .footer__nav ul { gap: 14px; }
  body[data-page="portfolio"] .portfolio-footer .footer__contact { gap: 4px 14px; }
}
/* Foto kartu memenuhi kartu (object-fit: cover) persis seperti pratinjau
   "Thumbnail kartu Portfolio" di dashboard — tanpa pembesaran tambahan. */
.portfolio-card__photo img{inset:0;left:0;top:0;width:100%;height:100%;max-width:100%;object-fit:cover}
/* Jarak antarkartu lebih rapat */
.portfolio-track{gap:24px}
@media(max-width:860px){.portfolio-track{gap:14px}}
/* Foto sedikit diperbesar untuk efek parallax halus saat kartu digeser */
.portfolio-card__photo img{transform:scale(1.09);will-change:transform}
@media(prefers-reduced-motion:reduce){.portfolio-card__photo img{transform:none}}
/* Tepi kiri & kanan deretan kartu memudar mulus ke latar (semua perangkat).
   Area geser dibentangkan sampai tepi layar kiri-kanan; kartu pertama tetap
   sejajar judul berkat padding, jadi saat diam tidak ada kartu yang pudar. */
.portfolio-viewport{
  width:calc(100% + var(--portfolio-gutter) * 2);
  margin-left:calc(-1 * var(--portfolio-gutter));
  padding-left:var(--portfolio-gutter);
  scroll-padding-left:var(--portfolio-gutter);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--portfolio-gutter),#000 calc(100% - 64px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 var(--portfolio-gutter),#000 calc(100% - 64px),transparent 100%);
}
@media(max-width:860px){
  .portfolio-viewport{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--portfolio-gutter),#000 calc(100% - 44px),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 var(--portfolio-gutter),#000 calc(100% - 44px),transparent 100%);
  }
}
.portfolio-track{padding-right:72px}
@media(max-width:860px){.portfolio-track{padding-right:52px}}
/* Skeleton & fade-in foto kartu (aktif hanya bila JavaScript berjalan) */
@keyframes pfShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.portfolio-track.is-skeleton .portfolio-card__photo{background:linear-gradient(100deg,#ffffff10 20%,#ffffff2e 40%,#ffffff10 60%) #ffffff0a;background-size:250% 100%;animation:pfShimmer 1.5s ease-in-out infinite}
.portfolio-track.is-skeleton .portfolio-card__photo img{opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1)}
.portfolio-track.is-skeleton .portfolio-card.is-loaded .portfolio-card__photo{animation:none;background:none}
.portfolio-track.is-skeleton .portfolio-card.is-loaded .portfolio-card__photo img{opacity:1}
@media(prefers-reduced-motion:reduce){.portfolio-track.is-skeleton .portfolio-card__photo{animation:none}.portfolio-track.is-skeleton .portfolio-card__photo img{transition:none}}
/* Stroke kartu seperti angka di halaman 404: garis oranye bergradasi + kilau
   cahaya yang berputar terus (looping mulus). Digambar di dalam tepi kartu,
   jadi ukuran kartu tidak berubah. */
@property --pf-stroke-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.portfolio-card::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;padding:2.39px;
  background:
    conic-gradient(from var(--pf-stroke-angle) at 50% 50%,
      transparent 0deg 42deg,rgba(248,97,59,.15) 55deg,#f8613b 70deg,#ffd6c2 80deg,#fff4ed 84deg,#ffad87 89deg,rgba(248,97,59,.25) 101deg,
      transparent 113deg 220deg,rgba(248,97,59,.15) 238deg,#f8613b 251deg,#ffd6c2 261deg,#fff4ed 265deg,#ffad87 270deg,rgba(248,97,59,.25) 282deg,
      transparent 295deg 360deg),
    linear-gradient(to bottom,#f8613b 0%,rgba(248,97,59,.55) 45%,rgba(248,97,59,.12) 75%,rgba(248,97,59,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:.92;
  animation:pf-stroke-radiance 7.6s linear infinite;
  animation-delay:calc(var(--i,0) * -1.1s);
}
@keyframes pf-stroke-radiance{to{--pf-stroke-angle:360deg}}
@media(prefers-reduced-motion:reduce){.portfolio-card::after{animation:none}}
/* Stroke & kilaunya ikut memudar di bagian bawah kartu, sama dengan foto (seamless). */
.portfolio-card::after{
  -webkit-mask:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:source-in,xor;
  mask:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%) intersect,linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* Kotak judul (muncul saat hover) diberi stroke tipis gradasi putih */
.portfolio-card__caption::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.7) 0%,rgba(255,255,255,.28) 45%,rgba(255,255,255,.06) 85%,rgba(255,255,255,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* Kotak judul saat hover: lebih gelap, garis tipis gradasi putih, dan kilau kaca
   yang bergerak pelan (looping mulus). */
@property --pf-glass-x{syntax:"<percentage>";inherits:false;initial-value:-60%}
.portfolio-card__caption{background:#000000a6;-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);isolation:isolate}
.portfolio-card__caption>*{position:relative;z-index:2}
.portfolio-card__caption::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.22) 35%,rgba(255,255,255,.06) 62%,rgba(255,255,255,.3) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.portfolio-card__caption::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent calc(var(--pf-glass-x) - 18%),rgba(255,255,255,.10) calc(var(--pf-glass-x) - 6%),rgba(255,255,255,.18) var(--pf-glass-x),rgba(255,255,255,.08) calc(var(--pf-glass-x) + 8%),transparent calc(var(--pf-glass-x) + 20%)),
             radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.10),transparent 60%);
  animation:pf-glass 5.5s ease-in-out infinite}
@keyframes pf-glass{0%{--pf-glass-x:-60%}55%{--pf-glass-x:160%}100%{--pf-glass-x:160%}}
@media(prefers-reduced-motion:reduce){.portfolio-card__caption::after{animation:none;--pf-glass-x:-60%}}
/* Gradasi bawah kartu dimulai lebih tinggi (foto & stroke), tetap halus. */
.portfolio-card__photo{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 46%,rgba(0,0,0,.6) 66%,rgba(0,0,0,.18) 84%,transparent 96%);mask-image:linear-gradient(to bottom,#000 0%,#000 46%,rgba(0,0,0,.6) 66%,rgba(0,0,0,.18) 84%,transparent 96%)}
.portfolio-card::after{
  -webkit-mask:linear-gradient(to bottom,#000 0%,#000 46%,rgba(0,0,0,.6) 66%,rgba(0,0,0,.18) 84%,transparent 96%),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:source-in,xor;
  mask:linear-gradient(to bottom,#000 0%,#000 46%,rgba(0,0,0,.6) 66%,rgba(0,0,0,.18) 84%,transparent 96%) intersect,linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* Teks judul tetap tegas di atas area yang memudar */
.portfolio-card__caption h2{text-shadow:0 1px 12px rgba(0,0,0,.45)}
/* Stroke kartu berwarna putih (animasi kilau sama seperti sebelumnya). */
.portfolio-card::after{
  background:
    conic-gradient(from var(--pf-stroke-angle) at 50% 50%,
      transparent 0deg 42deg,rgba(255,255,255,.15) 55deg,rgba(255,255,255,.75) 70deg,#fff 80deg,#fff 84deg,rgba(255,255,255,.85) 89deg,rgba(255,255,255,.25) 101deg,
      transparent 113deg 220deg,rgba(255,255,255,.15) 238deg,rgba(255,255,255,.75) 251deg,#fff 261deg,#fff 265deg,rgba(255,255,255,.85) 270deg,rgba(255,255,255,.25) 282deg,
      transparent 295deg 360deg),
    linear-gradient(to bottom,rgba(255,255,255,.7) 0%,rgba(255,255,255,.35) 45%,rgba(255,255,255,.1) 75%,rgba(255,255,255,0) 100%);
}
/* Scroll bar opsi D: garis penuh yang terisi + kilau di ujungnya */
.portfolio-progress{height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
.portfolio-progress__thumb{position:relative;width:var(--fill,10%)!important;max-width:100%;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.35),#fff);transform:none!important;transition:width .25s cubic-bezier(.22,1,.36,1)}
.portfolio-progress__thumb::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,rgba(255,255,255,.45) 40%,transparent 70%);box-shadow:0 0 12px 3px rgba(255,255,255,.4);transition:box-shadow .3s ease,transform .3s ease}
.portfolio-progress.is-moving .portfolio-progress__thumb::after{animation:pfGlowPulse .9s ease-in-out infinite}
@keyframes pfGlowPulse{0%,100%{transform:scale(1);box-shadow:0 0 12px 3px rgba(255,255,255,.4)}50%{transform:scale(1.35);box-shadow:0 0 22px 7px rgba(255,255,255,.7)}}
@media(prefers-reduced-motion:reduce){.portfolio-progress__thumb{transition:none}.portfolio-progress.is-moving .portfolio-progress__thumb::after{animation:none}}
/* Animasi masuk scroll bar: garis tergambar dari kiri, lalu isi & kilaunya muncul */
@keyframes pfTrackIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes pfDotIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.portfolio-progress{transform-origin:left center;animation:pfTrackIn .9s cubic-bezier(.22,1,.36,1) .25s both}
.portfolio-progress__thumb::after{animation:pfDotIn .5s cubic-bezier(.22,1,.36,1) 1s both}
.portfolio-progress.is-moving .portfolio-progress__thumb::after{animation:pfGlowPulse .9s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.portfolio-progress,.portfolio-progress__thumb::after{animation:none}}
/* Kilau lebih sering: stroke berputar lebih cepat, sapuan kaca dengan jeda lebih singkat */
.portfolio-card::after{animation-duration:4.2s;animation-delay:calc(var(--i,0) * -.7s)}
.portfolio-card__caption::after{animation:pf-glass 2.8s ease-in-out infinite}
@keyframes pf-glass{0%{--pf-glass-x:-60%}70%{--pf-glass-x:160%}100%{--pf-glass-x:160%}}
@media(prefers-reduced-motion:reduce){.portfolio-card::after,.portfolio-card__caption::after{animation:none}}

/* V10.36 — tombol Filter tidak lagi menabrak kotak search saat teksnya lebih panjang
   (terjemahan Google Translate, bahasa ID). Lebar mengikuti teks, dibatasi, sisanya "…". */
.portfolio-sort-button{width:auto;min-width:130px;max-width:210px}
.portfolio-sort-button>span:nth-child(2){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.portfolio-sort-button .portfolio-icon,.portfolio-sort-button .portfolio-chevron{flex:none}
.portfolio-controls{min-width:0}
@media(max-width:1100px) and (min-width:861px){.portfolio-sort-button{max-width:170px}}
@media(max-width:860px){.portfolio-sort{flex:none;max-width:44%}.portfolio-sort-button{max-width:100%}}
@media(max-width:520px){.portfolio-sort-button{min-width:108px;max-width:100%}.portfolio-sort{max-width:42%}}