{"id":1566,"date":"2023-09-06T14:07:49","date_gmt":"2023-09-06T14:07:49","guid":{"rendered":"https:\/\/demosites.royal-elementor-addons.com\/solar-energy-v1\/?page_id=10"},"modified":"2026-01-08T02:26:55","modified_gmt":"2026-01-08T02:26:55","slug":"services","status":"publish","type":"page","link":"https:\/\/gislaboratorium.com\/index.php\/services\/","title":{"rendered":"Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1566\" class=\"elementor elementor-1566\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5dbc9b1 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"5dbc9b1\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f360432\" data-id=\"f360432\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-519a4bf elementor-widget elementor-widget-heading\" data-id=\"519a4bf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">LAYANAN <\/h2>\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<div class=\"elementor-element elementor-element-e604335 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"e604335\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0904bc6 elementor-widget elementor-widget-html\" data-id=\"0904bc6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  \/* --- 1. Reset & Container Utama --- *\/\r\n  .layanan-slider-wrapper {\r\n    position: relative;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 20px 40px;\r\n    font-family: 'Roboto', sans-serif; \r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* --- JUDUL SEKSI --- *\/\r\n  .section-title {\r\n    text-align: center;\r\n    font-size: 37px;\r\n    font-weight: 700;\r\n    color: #333;\r\n    margin-bottom: 40px; \/* Jarak antara judul dan slider *\/\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n  }\r\n\r\n  \/* --- 2. Area Slider (Track) --- *\/\r\n  .slider-track-container {\r\n    overflow: hidden;\r\n    width: 100%;\r\n  }\r\n\r\n  .slider-track {\r\n    display: flex;\r\n    gap: 20px;\r\n    width: max-content; \/* Agar track bisa memuat banyak kartu clone *\/\r\n    \/* Transisi diatur via JS agar bisa dimatikan saat reset posisi *\/\r\n  }\r\n\r\n  \/* --- 3. Desain Kartu (Card) --- *\/\r\n  .service-card {\r\n    \/* Lebar kartu diatur fix menggunakan JS nanti, tapi kita beri default CSS *\/\r\n    width: 300px; \/* Fallback *\/\r\n    background: #fff;\r\n    border: 1px solid #eee;\r\n    border-radius: 8px;\r\n    overflow: hidden;\r\n    box-shadow: 0 4px 6px rgba(0,0,0,0.05);\r\n    transition: transform 0.3s, box-shadow 0.3s;\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex-shrink: 0; \/* Mencegah kartu menyusut *\/\r\n  }\r\n\r\n  .service-card:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 8px 15px rgba(0,0,0,0.1);\r\n  }\r\n\r\n  \/* Gambar Kartu *\/\r\n  .card-image {\r\n    width: 100%;\r\n    height: 200px;\r\n    object-fit: cover;\r\n    background-color: #f0f0f0;\r\n  }\r\n\r\n  \/* Konten Teks *\/\r\n  .card-content {\r\n    padding: 20px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex-grow: 1;\r\n  }\r\n\r\n  .card-title {\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    color: #333;\r\n    margin-bottom: 12px;\r\n    margin-top: 0;\r\n  }\r\n\r\n  .card-desc {\r\n    font-size: 14px;\r\n    color: #666;\r\n    line-height: 1.6;\r\n    margin-bottom: 20px;\r\n    flex-grow: 1; \r\n  }\r\n\r\n  .read-more {\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: #333;\r\n    text-decoration: none;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    border-bottom: 2px solid transparent;\r\n    width: max-content;\r\n    transition: border-color 0.3s;\r\n  }\r\n\r\n  .read-more:hover {\r\n    border-color: #004085;\r\n    color: #004085;\r\n  }\r\n\r\n  \/* --- 4. Tombol Navigasi --- *\/\r\n  .nav-btn {\r\n    position: absolute;\r\n    top: 60%; \/* Sedikit disesuaikan karena ada judul *\/\r\n    transform: translateY(-50%);\r\n    background-color: #fff;\r\n    border: 1px solid #ddd;\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 20px;\r\n    color: #333;\r\n    box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n    z-index: 10;\r\n    transition: all 0.3s;\r\n  }\r\n\r\n  .nav-btn:hover {\r\n    background-color: #004085;\r\n    color: #fff;\r\n    border-color: #004085;\r\n  }\r\n\r\n  .prev-btn { left: 0; }\r\n  .next-btn { right: 0; }\r\n\r\n  \/* --- 5. Responsif --- *\/\r\n  @media (max-width: 600px) {\r\n    .layanan-slider-wrapper {\r\n      padding: 20px 0;\r\n    }\r\n    .nav-btn { display: none; } \/* Hilangkan tombol di HP *\/\r\n    .slider-track-container {\r\n      overflow-x: auto;\r\n      scroll-snap-type: x mandatory;\r\n    }\r\n    .service-card {\r\n      scroll-snap-align: center;\r\n    }\r\n    .section-title {\r\n        font-size: 24px; \/* Ukuran judul lebih kecil di HP *\/\r\n        margin-bottom: 20px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"layanan-slider-wrapper\">\r\n  \r\n  <!-- JUDUL -->\r\n  <h2 class=\"section-title\">LAYANAN KAMI<\/h2>\r\n\r\n  <!-- Tombol Navigasi -->\r\n  <button class=\"nav-btn prev-btn\" id=\"btnPrev\">&#10094;<\/button>\r\n  <button class=\"nav-btn next-btn\" id=\"btnNext\">&#10095;<\/button>\r\n\r\n  <div class=\"slider-track-container\">\r\n    <div class=\"slider-track\" id=\"trackLayanan\">\r\n      \r\n      <!-- ========================================= -->\r\n      <!-- KARTU 1 -->\r\n      <!-- ========================================= -->\r\n      <div class=\"service-card\">\r\n        <img decoding=\"async\" src=\"https:\/\/img.freepik.com\/premium-photo\/mechanic-pouring-motor-oil-into-car-engine_661495-39431.jpg?w=740\" alt=\"Pengujian SNI\" class=\"card-image\">\r\n        \r\n        <div class=\"card-content\">\r\n          <h3 class=\"card-title\">Pengujian SNI produk<\/h3>\r\n          <p class=\"card-desc\">Kami menyediakan layanan pengujian SNI untuk memastikan setiap produk mulai dari CPO dan turunannya, pelumas industri, alat pertanian, hingga air minum dalam kemasan yang memenuhi standar mutu dan keamanan yang ditetapkan. Dengan metode terverifikasi dan proses yang transparan, GIS Laboratorium membantu memastikan produk Anda sesuai regulasi, layak edar, dan dipercaya pasar.<\/p>\r\n          \r\n          <a href=\"https:\/\/gislaboratorium.com\/index.php\/ruang-lingkup\/\" class=\"read-more\">READ MORE<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ========================================= -->\r\n      <!-- KARTU 2 -->\r\n      <!-- ========================================= -->\r\n      <div class=\"service-card\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581091226825-a6a2a5aee158?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80\" alt=\"Pengujian Kualitas\" class=\"card-image\">\r\n        <div class=\"card-content\">\r\n          <h3 class=\"card-title\">Pengujian Kualitas<\/h3>\r\n          <p class=\"card-desc\">Dengan layanan pengujian pelumas industri kami, kami menjamin bahwa setiap komponen mesin mendapatkan pelumas terbaik. Tingkatkan efisiensi dan daya tahan peralatan industri Anda dengan kualitas pelumas yang teruji.<\/p>\r\n          <a href=\"https:\/\/gislaboratorium.com\/index.php\/ruang-lingkup\/\" class=\"read-more\">READ MORE<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ========================================= -->\r\n      <!-- KARTU 3 -->\r\n      <!-- ========================================= -->\r\n      <div class=\"service-card\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80\" alt=\"Pengujian Lingkungan\" class=\"card-image\">\r\n        <div class=\"card-content\">\r\n          <h3 class=\"card-title\">Pengujian Lingkungan<\/h3>\r\n          <p class=\"card-desc\">Melalui layanan pengujian lingkungan kami, kami memberikan wawasan yang diperlukan untuk menjaga dan melindungi ekosistem. Jadilah bagian dari perubahan positif dengan informasi yang akurat.<\/p>\r\n          <a href=\"https:\/\/gislaboratorium.com\/index.php\/ruang-lingkup\/\" class=\"read-more\">READ MORE<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ========================================= -->\r\n      <!-- KARTU 4 -->\r\n      <!-- ========================================= -->\r\n      <div class=\"service-card\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1616401784845-180882ba9ba8?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80\" alt=\"Izin Edar\" class=\"card-image\">\r\n        <div class=\"card-content\">\r\n          <h3 class=\"card-title\">Pengujian Izin Edar<\/h3>\r\n          <p class=\"card-desc\">Melalui layanan pengujian lingkungan kami, kami memberikan wawasan yang diperlukan untuk menjaga dan melindungi ekosistem. Jadilah bagian dari perubahan positif dengan informasi yang akurat.<\/p>\r\n          <a href=\"https:\/\/gislaboratorium.com\/index.php\/ruang-lingkup\/\" class=\"read-more\">READ MORE<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- SCRIPT SEAMLESS LOOP -->\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  const track = document.getElementById('trackLayanan');\r\n  const container = document.querySelector('.slider-track-container');\r\n  const btnPrev = document.getElementById('btnPrev');\r\n  const btnNext = document.getElementById('btnNext');\r\n  \r\n  \/\/ Ambil kartu asli\r\n  let cards = Array.from(track.children);\r\n  const originalCount = cards.length;\r\n  \r\n  \/\/ Jika kartu kosong, berhenti\r\n  if (originalCount === 0) return;\r\n\r\n  \/\/ Konfigurasi Jarak dan Clone\r\n  const gap = 20; \/\/ Jarak antar kartu (harus sama dengan CSS .slider-track gap)\r\n  \r\n  \/\/ Tentukan berapa kartu terlihat di layar\r\n  function getCardsPerView() {\r\n    if (window.innerWidth <= 600) return 1;\r\n    if (window.innerWidth <= 900) return 2;\r\n    return 3;\r\n  }\r\n\r\n  \/\/ Fungsi untuk menghitung ulang ukuran dan posisi\r\n  function updateDimensions() {\r\n    const cardsPerView = getCardsPerView();\r\n    const containerWidth = container.offsetWidth;\r\n    \/\/ Hitung lebar per kartu: (Total Lebar - Total Gap) \/ Jumlah Kartu\r\n    const cardWidth = (containerWidth - (gap * (cardsPerView - 1))) \/ cardsPerView;\r\n    \r\n    \/\/ Terapkan lebar ke semua kartu (termasuk clone)\r\n    const allCards = track.children;\r\n    for(let card of allCards) {\r\n      card.style.width = `${cardWidth}px`;\r\n    }\r\n    \r\n    return cardWidth;\r\n  }\r\n\r\n  \/\/ CLONING (Duplikasi Kartu)\r\n  \/\/ Kita clone sejumlah kartu yang terlihat ke awal dan akhir untuk efek loop mulus\r\n  const clonesCount = 3; \/\/ Aman untuk layar lebar (minimal sama dengan cardsPerView)\r\n  \r\n  \/\/ Clone Akhir -> Taruh di Awal (Prepend)\r\n  for (let i = 0; i < clonesCount; i++) {\r\n    const clone = cards[originalCount - 1 - i].cloneNode(true);\r\n    clone.classList.add('clone');\r\n    track.insertBefore(clone, track.firstChild);\r\n  }\r\n\r\n  \/\/ Clone Awal -> Taruh di Akhir (Append)\r\n  for (let i = 0; i < clonesCount; i++) {\r\n    const clone = cards[i].cloneNode(true);\r\n    clone.classList.add('clone');\r\n    track.appendChild(clone);\r\n  }\r\n\r\n  \/\/ Inisialisasi Posisi\r\n  let cardWidth = updateDimensions();\r\n  let currentIndex = clonesCount; \/\/ Mulai dari kartu asli pertama (setelah clone)\r\n  \r\n  \/\/ Set posisi awal tanpa transisi\r\n  track.style.transform = `translateX(${-1 * (cardWidth + gap) * currentIndex}px)`;\r\n\r\n  \/\/ FUNGSI GESER\r\n  let isTransitioning = false;\r\n\r\n  function moveSlide(direction) {\r\n    if (isTransitioning) return;\r\n    isTransitioning = true;\r\n\r\n    currentIndex += direction;\r\n    cardWidth = updateDimensions(); \/\/ Pastikan lebar akurat\r\n\r\n    track.style.transition = 'transform 0.5s ease-in-out';\r\n    track.style.transform = `translateX(${-1 * (cardWidth + gap) * currentIndex}px)`;\r\n  }\r\n\r\n  \/\/ EVENT LISTENER TRANSISI SELESAI (KUNCI LOOPING)\r\n  track.addEventListener('transitionend', () => {\r\n    isTransitioning = false;\r\n    cardWidth = updateDimensions();\r\n\r\n    \/\/ Jika sampai di Clone Akhir (setelah kartu asli terakhir)\r\n    if (currentIndex >= originalCount + clonesCount) {\r\n      track.style.transition = 'none'; \/\/ Matikan animasi\r\n      currentIndex = clonesCount; \/\/ Lompat instan ke kartu asli pertama\r\n      track.style.transform = `translateX(${-1 * (cardWidth + gap) * currentIndex}px)`;\r\n    }\r\n    \r\n    \/\/ Jika sampai di Clone Awal (sebelum kartu asli pertama)\r\n    if (currentIndex < clonesCount) {\r\n      track.style.transition = 'none'; \/\/ Matikan animasi\r\n      currentIndex = originalCount + clonesCount - 1; \/\/ Lompat instan ke kartu asli terakhir (sebelum clone akhir)\r\n      \/\/ Koreksi index agar pas\r\n      currentIndex = clonesCount + originalCount - 1; \r\n      \/\/ Mari kita hitung index yg benar:\r\n      \/\/ Struktur: [CloneAkhir 3] [CloneAkhir 2] [CloneAkhir 1] [Asli 1] ... [Asli N] [CloneAwal 1] ...\r\n      \/\/ Index 0-2 adalah Clone Akhir. Index 3 adalah Asli 1.\r\n      \/\/ Jika user mundur dari Index 3 ke Index 2 (Clone Akhir 1), kita harus lompat ke Asli N.\r\n      \/\/ Posisi Asli N adalah: clonesCount + originalCount - 1.\r\n      \r\n      if (currentIndex <= clonesCount - 1) {\r\n         currentIndex = clonesCount + originalCount - 1;\r\n      }\r\n      track.style.transform = `translateX(${-1 * (cardWidth + gap) * currentIndex}px)`;\r\n    }\r\n  });\r\n\r\n  \/\/ Tombol Click\r\n  btnNext.addEventListener('click', () => moveSlide(1));\r\n  btnPrev.addEventListener('click', () => moveSlide(-1));\r\n\r\n  \/\/ Responsif saat resize layar\r\n  window.addEventListener('resize', () => {\r\n    track.style.transition = 'none';\r\n    cardWidth = updateDimensions();\r\n    track.style.transform = `translateX(${-1 * (cardWidth + gap) * currentIndex}px)`;\r\n  });\r\n  \r\n  \/\/ AUTO PLAY (Opsional - Aktifkan jika mau)\r\n  setInterval(() => moveSlide(1), 5000); \/\/ Geser setiap 5 detik\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-18b29ea1 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"18b29ea1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-22407d0b\" data-id=\"22407d0b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4d3e94ec elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"4d3e94ec\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>LAYANAN LAYANAN KAMI &#10094; &#10095; Pengujian SNI produk Kami menyediakan layanan pengujian SNI untuk memastikan setiap produk mulai dari CPO dan turunannya, pelumas industri, alat pertanian, hingga air minum dalam kemasan yang memenuhi standar mutu dan keamanan yang ditetapkan. Dengan metode terverifikasi dan proses yang transparan, GIS Laboratorium membantu memastikan produk Anda sesuai regulasi, layak edar, dan dipercaya pasar. READ MORE Pengujian Kualitas Dengan layanan pengujian pelumas industri kami, kami menjamin bahwa setiap komponen mesin mendapatkan pelumas terbaik. Tingkatkan efisiensi dan daya tahan peralatan industri Anda dengan kualitas pelumas yang teruji. READ MORE Pengujian Lingkungan Melalui layanan pengujian lingkungan kami, kami memberikan wawasan yang diperlukan untuk menjaga dan melindungi ekosistem. Jadilah bagian dari perubahan positif dengan informasi yang akurat. READ MORE Pengujian Izin Edar Melalui layanan pengujian lingkungan kami, kami memberikan wawasan yang diperlukan untuk menjaga dan melindungi ekosistem. Jadilah bagian dari perubahan positif dengan informasi yang akurat. READ MORE<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-1566","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/gislaboratorium.com\/index.php\/wp-json\/wp\/v2\/pages\/1566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gislaboratorium.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gislaboratorium.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gislaboratorium.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gislaboratorium.com\/index.php\/wp-json\/wp\/v2\/comments?post=1566"}],"version-history":[{"count":51,"href":"https:\/\/gislaboratorium.com\/index.php\/wp-json\/wp\/v2\/pages\/1566\/revisions"}],"predecessor-version":[{"id":3749,"href":"https:\/\/gislaboratorium.com\/index.php\/wp-json\/wp\/v2\/pages\/1566\/revisions\/3749"}],"wp:attachment":[{"href":"https:\/\/gislaboratorium.com\/index.php\/wp-json\/wp\/v2\/media?parent=1566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}