{"id":655,"date":"2026-01-23T02:32:12","date_gmt":"2026-01-23T02:32:12","guid":{"rendered":"http:\/\/jts.co.id\/?page_id=655"},"modified":"2026-01-27T17:11:45","modified_gmt":"2026-01-27T17:11:45","slug":"profile","status":"publish","type":"page","link":"https:\/\/jts.co.id\/ja\/profile\/","title":{"rendered":"PROFILE"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\nOur Profile<\/title>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n<style>\r\n\/* ===== RESET ===== *\/\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: \"Segoe UI\", Arial, Helvetica, sans-serif;\r\n background: #f4f4f4;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* ===== WRAPPER ===== *\/\r\n.visual-wrapper {\r\n max-width: 1500px;\r\n margin: 0 auto;\r\n padding: 80px 60px;\r\n}\r\n\r\n\/* ===== IMAGE SECTION ===== *\/\r\n.visual-section {\r\n position: relative;\r\n margin-bottom: 80px;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n background: #000;\r\n box-shadow: 0 30px 70px rgba(0,0,0,0.18);\r\n cursor: zoom-in;\r\n\r\n opacity: 1;\r\n transform: translateY(0);\r\n transition: opacity 1s cubic-bezier(.19,1,.22,1),\r\n transform 1s cubic-bezier(.19,1,.22,1);\r\n}\r\n\r\n\/* animation states *\/\r\n.visual-section.animate {\r\n opacity: 0;\r\n transform: translateY(50px);\r\n}\r\n\r\n.visual-section.show {\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n\r\n\/* image fits naturally *\/\r\n.visual-section img {\r\n width: 100%;\r\n height: auto; \/* \ud83d\udd11 ikut ukuran asli gambar *\/\r\n display: block;\r\n}\r\n\r\n\/* ===== FULLSCREEN VIEW ===== *\/\r\n.fullscreen {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0,0,0,0.94);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity .35s ease;\r\n}\r\n\r\n.fullscreen.active {\r\n opacity: 1;\r\n pointer-events: all;\r\n}\r\n\r\n.fullscreen img {\r\n max-width: 94%;\r\n max-height: 94%;\r\n border-radius: 6px;\r\n box-shadow: 0 40px 90px rgba(0,0,0,0.6);\r\n animation: zoomIn .4s ease;\r\n}\r\n\r\n@keyframes zoomIn {\r\n from { transform: scale(.92); opacity: 0; }\r\n to { transform: scale(1); opacity: 1; }\r\n}\r\n\r\n\/* ===== FLOATING RIGHT BUTTON ===== *\/\r\n.side-button {\r\n position: fixed;\r\n top: 50%;\r\n right: 24px;\r\n transform: translateY(-50%);\r\n background: #c40018;\r\n color: #ffffff;\r\n padding: 14px 22px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: .5px;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n box-shadow: 0 12px 30px rgba(0,0,0,.25);\r\n z-index: 1000;\r\n transition: all .3s ease;\r\n}\r\n\r\n.side-button:hover {\r\n background: #a30014;\r\n transform: translateY(-50%) translateX(-4px);\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 1024px) {\r\n .visual-wrapper {\r\n padding: 60px 30px;\r\n }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .visual-wrapper {\r\n padding: 50px 20px;\r\n }\r\n .side-button {\r\n right: 10px;\r\n padding: 12px 16px;\r\n font-size: 13px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<!-- FLOATING VIDEO BUTTON -->\r\n<a href=\"#company-video\" class=\"side-button\">\r\n \u25b6 \u4f1a\u793e\u7d39\u4ecb\u30d3\u30c7\u30aa\r\n<\/a>\r\n\r\n<!-- VISUAL CONTENT -->\r\n<div class=\"visual-wrapper\">\r\n\r\n <div class=\"visual-section animate\">\r\n <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide2.png\"\r\n alt=\"Company Profile Slide 1\"\r\n data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide2.png\">\r\n <\/div>\r\n\r\n <div class=\"visual-section animate\">\r\n <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide3.png\"\r\n alt=\"Company Profile Slide 2\"\r\n data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide3.png\">\r\n <\/div>\r\n\r\n <div class=\"visual-section animate\">\r\n <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide4.png\"\r\n alt=\"Company Profile Slide 3\"\r\n data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide4.png\">\r\n <\/div>\r\n\r\n <div class=\"visual-section animate\">\r\n <img decoding=\"async\" src=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide5.png\"\r\n alt=\"Company Profile Slide 4\"\r\n data-img=\"http:\/\/jts.co.id\/wp-content\/uploads\/2026\/01\/Slide5.png\">\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- FULLSCREEN IMAGE VIEW -->\r\n<div class=\"fullscreen\" id=\"fullscreen\">\r\n <img decoding=\"async\" src=\"\" alt=\"Fullscreen Image\">\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n\r\n const sections = document.querySelectorAll(\".visual-section\");\r\n const fullscreen = document.getElementById(\"fullscreen\");\r\n const fullscreenImg = fullscreen.querySelector(\"img\");\r\n\r\n \/* === SCROLL ANIMATION === *\/\r\n if (\"IntersectionObserver\" in window) {\r\n const observer = new IntersectionObserver(entries => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add(\"show\");\r\n }\r\n });\r\n }, { threshold: 0.2 });\r\n\r\n sections.forEach(sec => observer.observe(sec));\r\n } else {\r\n sections.forEach(sec => sec.classList.add(\"show\"));\r\n }\r\n\r\n \/* === FULLSCREEN IMAGE === *\/\r\n sections.forEach(section => {\r\n const img = section.querySelector(\"img\");\r\n section.addEventListener(\"click\", () => {\r\n fullscreenImg.src = img.dataset.img;\r\n fullscreen.classList.add(\"active\");\r\n document.body.style.overflow = \"hidden\";\r\n });\r\n });\r\n\r\n fullscreen.addEventListener(\"click\", () => {\r\n fullscreen.classList.remove(\"active\");\r\n document.body.style.overflow = \"\";\r\n });\r\n\r\n document.addEventListener(\"keydown\", e => {\r\n if (e.key === \"Escape\") {\r\n fullscreen.classList.remove(\"active\");\r\n document.body.style.overflow = \"\";\r\n }\r\n });\r\n\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Our Profile \u25b6 Company Profile Video<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-655","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages\/655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/comments?post=655"}],"version-history":[{"count":28,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages\/655\/revisions"}],"predecessor-version":[{"id":900,"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/pages\/655\/revisions\/900"}],"wp:attachment":[{"href":"https:\/\/jts.co.id\/ja\/wp-json\/wp\/v2\/media?parent=655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}