{"id":880,"date":"2026-07-27T14:32:40","date_gmt":"2026-07-27T07:32:40","guid":{"rendered":"https:\/\/iptar.ac.id\/?page_id=880"},"modified":"2026-08-29T12:25:16","modified_gmt":"2026-08-29T05:25:16","slug":"himastech","status":"publish","type":"page","link":"https:\/\/iptar.ac.id\/index.php\/himastech\/","title":{"rendered":"HIMASTECH"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"880\" class=\"elementor elementor-880\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2301458 e-con-full e-flex e-con e-parent\" data-id=\"2301458\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-809eed3 elementor-widget elementor-widget-html\" data-id=\"809eed3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     HALAMAN HIMASTECH IPTAR\n     Himpunan Mahasiswa Sistem dan Teknologi Informasi\n     Siap ditempel pada widget HTML Elementor\n========================================================== -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@600;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\">\n\n<style>\n    \/* =========================================================\n       1. VARIABEL DAN RESET TERBATAS\n    ========================================================== *\/\n    .himastech-page {\n        --ht-navy-950: #061b36;\n        --ht-navy-900: #09264a;\n        --ht-navy-800: #0d3563;\n        --ht-blue-700: #14558b;\n        --ht-blue-600: #1973b8;\n        --ht-sky-500: #28a9ea;\n        --ht-sky-400: #4bc2f5;\n        --ht-sky-300: #84d9fa;\n        --ht-sky-200: #bcecff;\n        --ht-sky-100: #e9f9ff;\n        --ht-yellow: #ffd34f;\n        --ht-yellow-deep: #e8b921;\n        --ht-white: #ffffff;\n        --ht-ink: #182b3d;\n        --ht-muted: #63778a;\n        --ht-line: rgba(13, 53, 99, 0.13);\n        --ht-shadow-sm: 0 12px 30px rgba(6, 27, 54, 0.08);\n        --ht-shadow-md: 0 20px 50px rgba(6, 27, 54, 0.14);\n        --ht-shadow-lg: 0 30px 80px rgba(3, 20, 40, 0.25);\n\n        position: relative;\n        width: 100vw;\n        max-width: 100vw;\n        margin-left: calc(50% - 50vw);\n        margin-right: calc(50% - 50vw);\n        overflow: hidden;\n        color: var(--ht-ink);\n        background: var(--ht-white);\n        font-family: \"Inter\", Arial, sans-serif;\n        line-height: 1.7;\n        isolation: isolate;\n    }\n\n    .himastech-page,\n    .himastech-page * {\n        box-sizing: border-box;\n    }\n\n    .himastech-page h1,\n    .himastech-page h2,\n    .himastech-page h3,\n    .himastech-page p {\n        margin-top: 0;\n    }\n\n    .himastech-page a {\n        color: inherit;\n        text-decoration: none;\n    }\n\n    .himastech-page img {\n        display: block;\n        max-width: 100%;\n    }\n\n    .ht-container {\n        width: min(1240px, calc(100% - 40px));\n        margin-inline: auto;\n    }\n\n    .ht-anchor {\n        scroll-margin-top: 100px;\n    }\n\n    \/* =========================================================\n       2. HERO TEKNOLOGI\n    ========================================================== *\/\n    .ht-hero {\n        position: relative;\n        min-height: 700px;\n        display: flex;\n        align-items: center;\n        padding: 92px 0 84px;\n        overflow: hidden;\n        color: var(--ht-white);\n        background:\n            radial-gradient(circle at 12% 15%, rgba(75, 194, 245, 0.25), transparent 28%),\n            radial-gradient(circle at 88% 83%, rgba(255, 211, 79, 0.17), transparent 30%),\n            linear-gradient(135deg, var(--ht-navy-950) 0%, var(--ht-navy-800) 53%, #12679e 100%);\n    }\n\n    .ht-circuit-pattern {\n        position: absolute;\n        inset: 0;\n        opacity: 0.24;\n        background-image:\n            linear-gradient(rgba(132, 217, 250, 0.25) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(132, 217, 250, 0.25) 1px, transparent 1px);\n        background-size: 48px 48px;\n        mask-image: linear-gradient(90deg, #000 0%, transparent 72%);\n        pointer-events: none;\n    }\n\n    .ht-circuit-pattern::before,\n    .ht-circuit-pattern::after {\n        content: \"\";\n        position: absolute;\n        border: 2px solid rgba(132, 217, 250, 0.5);\n        border-radius: 50%;\n    }\n\n    .ht-circuit-pattern::before {\n        width: 13px;\n        height: 13px;\n        top: 24%;\n        left: 16%;\n        box-shadow:\n            190px 96px 0 -1px rgba(132, 217, 250, 0.5),\n            380px -25px 0 -1px rgba(132, 217, 250, 0.5),\n            285px 240px 0 -1px rgba(132, 217, 250, 0.5);\n    }\n\n    .ht-circuit-pattern::after {\n        width: 360px;\n        height: 360px;\n        top: -210px;\n        right: 5%;\n        border-width: 1px;\n        box-shadow:\n            0 0 0 55px rgba(255, 255, 255, 0.025),\n            0 0 0 110px rgba(255, 255, 255, 0.017);\n    }\n\n    .ht-hero::after {\n        content: \"\";\n        position: absolute;\n        width: 360px;\n        height: 360px;\n        left: 3%;\n        bottom: -260px;\n        border-radius: 50%;\n        background: rgba(40, 169, 234, 0.16);\n    }\n\n    .ht-hero-grid {\n        position: relative;\n        z-index: 2;\n        display: grid;\n        grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);\n        align-items: center;\n        gap: 70px;\n    }\n\n    .ht-kicker {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        margin-bottom: 22px;\n        padding: 9px 16px;\n        border: 1px solid rgba(132, 217, 250, 0.35);\n        border-radius: 999px;\n        color: #dff7ff;\n        background: rgba(75, 194, 245, 0.09);\n        font-size: 12px;\n        font-weight: 800;\n        letter-spacing: 1.5px;\n        text-transform: uppercase;\n        backdrop-filter: blur(10px);\n    }\n\n    .ht-status-dot {\n        width: 9px;\n        height: 9px;\n        border-radius: 50%;\n        background: var(--ht-sky-400);\n        box-shadow: 0 0 0 5px rgba(75, 194, 245, 0.15), 0 0 18px var(--ht-sky-400);\n    }\n\n    .ht-hero h1 {\n        max-width: 780px;\n        margin-bottom: 23px;\n        color: var(--ht-white);\n        font-family: \"Space Grotesk\", Arial, sans-serif;\n        font-size: clamp(46px, 6.2vw, 84px);\n        line-height: 1.02;\n        letter-spacing: -3px;\n    }\n\n    .ht-hero h1 span {\n        display: block;\n        color: var(--ht-sky-400);\n    }\n\n    .ht-hero-lead {\n        max-width: 730px;\n        margin-bottom: 31px;\n        color: rgba(255, 255, 255, 0.82);\n        font-size: clamp(17px, 1.55vw, 21px);\n        line-height: 1.75;\n    }\n\n    .ht-tagline {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        margin-bottom: 30px;\n        color: var(--ht-yellow);\n        font-family: \"Space Grotesk\", Arial, sans-serif;\n        font-size: 16px;\n        font-weight: 700;\n        letter-spacing: 0.4px;\n    }\n\n    .ht-tagline::before {\n        content: \"\";\n        width: 35px;\n        height: 2px;\n        background: var(--ht-yellow);\n    }\n\n    .ht-hero-actions {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 13px;\n    }\n\n    .ht-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n        min-height: 51px;\n        padding: 13px 22px;\n        border: 1px solid rgba(255, 255, 255, 0.28);\n        border-radius: 13px;\n        font-size: 14px;\n        font-weight: 800;\n        transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;\n    }\n\n    .ht-button:hover {\n        transform: translateY(-3px);\n    }\n\n    .ht-button-primary {\n        color: var(--ht-navy-950);\n        border-color: var(--ht-sky-400);\n        background: var(--ht-sky-400);\n        box-shadow: 0 14px 35px rgba(2, 18, 36, 0.3);\n    }\n\n    .ht-button-primary:hover {\n        background: #71d4fb;\n        box-shadow: 0 18px 42px rgba(2, 18, 36, 0.36);\n    }\n\n    .ht-button-ghost {\n        color: var(--ht-white);\n        background: rgba(255, 255, 255, 0.08);\n        backdrop-filter: blur(10px);\n    }\n\n    .ht-button-ghost:hover {\n        background: rgba(255, 255, 255, 0.15);\n    }\n\n    .ht-logo-column {\n        display: flex;\n        justify-content: center;\n    }\n\n    .ht-logo-card {\n        position: relative;\n        width: min(100%, 395px);\n        padding: 28px;\n        border: 1px solid rgba(132, 217, 250, 0.29);\n        border-radius: 32px;\n        background: rgba(255, 255, 255, 0.1);\n        box-shadow: var(--ht-shadow-lg);\n        backdrop-filter: blur(14px);\n        transform: perspective(900px) rotateY(-3deg) rotateX(1deg);\n    }\n\n    .ht-logo-card::before {\n        content: \"<\/>\";\n        position: absolute;\n        top: -18px;\n        right: -18px;\n        display: grid;\n        place-items: center;\n        width: 80px;\n        height: 80px;\n        border-radius: 23px;\n        color: var(--ht-navy-950);\n        background: var(--ht-yellow);\n        font-family: \"Space Grotesk\", monospace;\n        font-size: 17px;\n        font-weight: 700;\n        transform: rotate(9deg);\n        box-shadow: 0 14px 30px rgba(2, 18, 36, 0.25);\n        z-index: -1;\n    }\n\n    .ht-logo-frame {\n        display: grid;\n        place-items: center;\n        min-height: 310px;\n        padding: 24px;\n        border-radius: 24px;\n        background: var(--ht-white);\n        box-shadow: inset 0 0 0 1px rgba(13, 53, 99, 0.08);\n    }\n\n    .ht-logo-frame img {\n        width: min(100%, 285px);\n        max-height: 285px;\n        object-fit: contain;\n    }\n\n    .ht-logo-caption {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        margin: 18px 0 2px;\n        color: rgba(255, 255, 255, 0.83);\n        font-size: 12px;\n        font-weight: 800;\n        text-align: center;\n    }\n\n    \/* =========================================================\n       3. NAVIGASI CEPAT\n    ========================================================== *\/\n    .ht-quick-nav-wrap {\n        position: relative;\n        z-index: 5;\n        margin-top: -32px;\n    }\n\n    .ht-quick-nav {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n        gap: 7px;\n        padding: 13px;\n        border: 1px solid var(--ht-line);\n        border-radius: 19px;\n        background: rgba(255, 255, 255, 0.96);\n        box-shadow: var(--ht-shadow-md);\n        backdrop-filter: blur(12px);\n    }\n\n    .ht-quick-nav a {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 10px 14px;\n        border-radius: 10px;\n        color: var(--ht-navy-800);\n        font-size: 13px;\n        font-weight: 800;\n        transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;\n    }\n\n    .ht-quick-nav a:hover {\n        color: var(--ht-navy-950);\n        background: var(--ht-sky-200);\n        transform: translateY(-2px);\n    }\n\n    \/* =========================================================\n       4. BAGIAN UMUM\n    ========================================================== *\/\n    .ht-section {\n        position: relative;\n        padding: 96px 0;\n    }\n\n    .ht-section-white {\n        background: var(--ht-white);\n    }\n\n    .ht-section-soft {\n        background:\n            radial-gradient(circle at 90% 8%, rgba(75, 194, 245, 0.14), transparent 27%),\n            #f6fbff;\n    }\n\n    .ht-section-dark {\n        overflow: hidden;\n        color: var(--ht-white);\n        background:\n            radial-gradient(circle at 12% 15%, rgba(75, 194, 245, 0.2), transparent 29%),\n            linear-gradient(135deg, var(--ht-navy-950), var(--ht-navy-800));\n    }\n\n    .ht-section-dark::after {\n        content: \"\";\n        position: absolute;\n        width: 390px;\n        height: 390px;\n        right: -195px;\n        bottom: -235px;\n        border: 65px solid rgba(255, 255, 255, 0.035);\n        border-radius: 50%;\n    }\n\n    .ht-section-heading {\n        max-width: 810px;\n        margin: 0 auto 50px;\n        text-align: center;\n    }\n\n    .ht-eyebrow {\n        display: inline-flex;\n        align-items: center;\n        gap: 9px;\n        margin-bottom: 13px;\n        color: var(--ht-blue-600);\n        font-size: 12px;\n        font-weight: 800;\n        letter-spacing: 1.7px;\n        text-transform: uppercase;\n    }\n\n    .ht-eyebrow::before {\n        content: \"\";\n        width: 28px;\n        height: 3px;\n        border-radius: 999px;\n        background: linear-gradient(90deg, var(--ht-yellow), var(--ht-sky-500));\n    }\n\n    .ht-section-dark .ht-eyebrow {\n        color: var(--ht-sky-300);\n    }\n\n    .ht-section-heading h2 {\n        margin-bottom: 17px;\n        color: var(--ht-navy-950);\n        font-family: \"Space Grotesk\", Arial, sans-serif;\n        font-size: clamp(34px, 4vw, 51px);\n        line-height: 1.16;\n        letter-spacing: -1.4px;\n    }\n\n    .ht-section-dark .ht-section-heading h2 {\n        color: var(--ht-white);\n    }\n\n    .ht-section-heading p {\n        margin-bottom: 0;\n        color: var(--ht-muted);\n        font-size: 17px;\n        line-height: 1.8;\n    }\n\n    .ht-section-dark .ht-section-heading p {\n        color: rgba(255, 255, 255, 0.73);\n    }\n\n    \/* =========================================================\n       5. PROFIL\n    ========================================================== *\/\n    .ht-profile-grid {\n        display: grid;\n        grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.8fr);\n        gap: 34px;\n        align-items: stretch;\n    }\n\n    .ht-profile-copy,\n    .ht-identity-card {\n        border: 1px solid var(--ht-line);\n        border-radius: 26px;\n        background: var(--ht-white);\n        box-shadow: var(--ht-shadow-sm);\n    }\n\n    .ht-profile-copy {\n        padding: clamp(28px, 4vw, 48px);\n    }\n\n    .ht-profile-copy p {\n        margin-bottom: 20px;\n        color: var(--ht-muted);\n        font-size: 16px;\n        line-height: 1.9;\n    }\n\n    .ht-profile-copy p:last-child {\n        margin-bottom: 0;\n    }\n\n    .ht-profile-copy strong {\n        color: var(--ht-blue-700);\n    }\n\n    .ht-code-quote {\n        display: grid;\n        grid-template-columns: 45px minmax(0, 1fr);\n        gap: 15px;\n        align-items: center;\n        margin-top: 28px;\n        padding: 20px;\n        border: 1px solid rgba(40, 169, 234, 0.2);\n        border-radius: 17px;\n        background: linear-gradient(135deg, var(--ht-sky-100), #f9fcff);\n    }\n\n    .ht-code-icon {\n        width: 45px;\n        height: 45px;\n        display: grid;\n        place-items: center;\n        border-radius: 13px;\n        color: var(--ht-white);\n        background: var(--ht-blue-700);\n        box-shadow: 0 9px 20px rgba(13, 53, 99, 0.22);\n    }\n\n    .ht-code-quote p {\n        margin: 0;\n        color: var(--ht-navy-900);\n        font-family: \"Space Grotesk\", Arial, sans-serif;\n        font-size: 15px;\n        font-weight: 700;\n        line-height: 1.7;\n    }\n\n    .ht-identity-card {\n        position: relative;\n        overflow: hidden;\n        padding: 34px;\n        background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(233, 249, 255, 0.8));\n    }\n\n    .ht-identity-card::before {\n        content: \"\";\n        position: absolute;\n        width: 180px;\n        height: 180px;\n        top: -90px;\n        right: -65px;\n        border-radius: 50%;\n        background: rgba(75, 194, 245, 0.22);\n    }\n\n    .ht-identity-label {\n        position: relative;\n        margin-bottom: 22px;\n        color: var(--ht-blue-700);\n        font-size: 13px;\n        font-weight: 800;\n        letter-spacing: 1.3px;\n        text-transform: uppercase;\n    }\n\n    .ht-identity-list {\n        position: relative;\n        display: grid;\n        gap: 15px;\n    }\n\n    .ht-identity-item {\n        display: grid;\n        grid-template-columns: 45px minmax(0, 1fr);\n        align-items: center;\n        gap: 13px;\n        padding: 15px;\n        border: 1px solid rgba(13, 53, 99, 0.1);\n        border-radius: 15px;\n        background: rgba(255, 255, 255, 0.84);\n    }\n\n    .ht-identity-icon {\n        width: 45px;\n        height: 45px;\n        display: grid;\n        place-items: center;\n        border-radius: 13px;\n        color: var(--ht-navy-800);\n        background: var(--ht-sky-100);\n    }\n\n    .ht-identity-item small {\n        display: block;\n        margin-bottom: 2px;\n        color: var(--ht-muted);\n        font-size: 11px;\n        font-weight: 800;\n        letter-spacing: 0.9px;\n        text-transform: uppercase;\n    }\n\n    .ht-identity-item strong {\n        display: block;\n        color: var(--ht-navy-950);\n        font-size: 14px;\n        line-height: 1.4;\n    }\n\n    \/* =========================================================\n       6. ARAH GERAK DAN NILAI\n    ========================================================== *\/\n    .ht-direction-card {\n        position: relative;\n        max-width: 1050px;\n        margin: 0 auto 36px;\n        padding: clamp(31px, 5vw, 58px);\n        overflow: hidden;\n        border-radius: 29px;\n        color: var(--ht-white);\n        background:\n            linear-gradient(135deg, var(--ht-navy-900), var(--ht-blue-600));\n        box-shadow: var(--ht-shadow-md);\n        text-align: center;\n    }\n\n    .ht-direction-card::before {\n        content: \"01\";\n        position: absolute;\n        top: -35px;\n        left: 20px;\n        color: rgba(255, 255, 255, 0.055);\n        font-family: \"Space Grotesk\", monospace;\n        font-size: 165px;\n        font-weight: 700;\n        line-height: 1;\n    }\n\n    .ht-direction-card i {\n        margin-bottom: 18px;\n        color: var(--ht-yellow);\n        font-size: 30px;\n    }\n\n    .ht-direction-card h3 {\n        margin-bottom: 17px;\n        color: var(--ht-white);\n        font-family: \"Space Grotesk\", Arial, sans-serif;\n        font-size: clamp(27px, 3vw, 38px);\n    }\n\n    .ht-direction-card p {\n        position: relative;\n        max-width: 860px;\n        margin: 0 auto;\n        color: rgba(255, 255, 255, 0.85);\n        font-size: clamp(17px, 2vw, 21px);\n        font-weight: 600;\n        line-height: 1.8;\n    }\n\n    .ht-values-grid {\n        display: grid;\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n        gap: 18px;\n    }\n\n    .ht-value-card {\n        padding: 27px 23px;\n        border: 1px solid var(--ht-line);\n        border-radius: 21px;\n        background: var(--ht-white);\n        box-shadow: var(--ht-shadow-sm);\n        transition: transform 0.25s ease, box-shadow 0.25s ease;\n    }\n\n    .ht-value-card:hover {\n        transform: translateY(-7px);\n        box-shadow: var(--ht-shadow-md);\n    }\n\n    .ht-value-icon {\n        width: 55px;\n        height: 55px;\n        display: grid;\n        place-items: center;\n        margin-bottom: 20px;\n        border-radius: 16px;\n        color: var(--ht-white);\n        background: linear-gradient(145deg, var(--ht-sky-500), var(--ht-blue-700));\n        box-shadow: 0 12px 24px rgba(13, 53, 99, 0.2);\n        font-size: 21px;\n    }\n\n    .ht-value-card:nth-child(even) .ht-value-icon {\n        color: var(--ht-navy-950);\n        background: linear-gradient(145deg, var(--ht-yellow), var(--ht-yellow-deep));\n    }\n\n    .ht-value-card h3 {\n        margin-bottom: 9px;\n        color: var(--ht-navy-950);\n        font-size: 19px;\n    }\n\n    .ht-value-card p {\n        margin-bottom: 0;\n        color: var(--ht-muted);\n        font-size: 14px;\n        line-height: 1.75;\n    }\n\n    \/* =========================================================\n       7. FOKUS KEILMUAN\n    ========================================================== *\/\n    .ht-focus-grid {\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 21px;\n    }\n\n    .ht-focus-card {\n        position: relative;\n        display: grid;\n        grid-template-columns: 72px minmax(0, 1fr);\n        align-items: start;\n        gap: 22px;\n        padding: 30px;\n        overflow: hidden;\n        border: 1px solid var(--ht-line);\n        border-radius: 23px;\n        background: var(--ht-white);\n        box-shadow: var(--ht-shadow-sm);\n        transition: transform 0.25s ease, border-color 0.25s ease;\n    }\n\n    .ht-focus-card:hover {\n        transform: translateY(-5px);\n        border-color: rgba(40, 169, 234, 0.36);\n    }\n\n    .ht-focus-icon {\n        width: 72px;\n        height: 72px;\n        display: grid;\n        place-items: center;\n        border-radius: 21px;\n        color: var(--ht-white);\n        background: linear-gradient(145deg, var(--ht-blue-600), var(--ht-navy-800));\n        font-size: 25px;\n    }\n\n    .ht-focus-card:nth-child(2) .ht-focus-icon,\n    .ht-focus-card:nth-child(3) .ht-focus-icon {\n        color: var(--ht-navy-950);\n        background: linear-gradient(145deg, var(--ht-sky-300), var(--ht-sky-500));\n    }\n\n    .ht-focus-card h3 {\n        margin-bottom: 8px;\n        color: var(--ht-navy-950);\n        font-size: 20px;\n    }\n\n    .ht-focus-card p {\n        margin: 0;\n        color: var(--ht-muted);\n        font-size: 14px;\n        line-height: 1.75;\n    }\n\n    \/* =========================================================\n       8. PROGRAM\n    ========================================================== *\/\n    .ht-program-grid {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 20px;\n    }\n\n    .ht-program-card {\n        display: flex;\n        flex-direction: column;\n        min-height: 292px;\n        padding: 28px;\n        border: 1px solid rgba(255, 255, 255, 0.14);\n        border-radius: 23px;\n        background: rgba(255, 255, 255, 0.07);\n        backdrop-filter: blur(9px);\n        transition: transform 0.25s ease, background 0.25s ease;\n    }\n\n    .ht-program-card:hover {\n        transform: translateY(-7px);\n        background: rgba(255, 255, 255, 0.12);\n    }\n\n    .ht-program-top {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 15px;\n        margin-bottom: 22px;\n    }\n\n    .ht-program-icon {\n        width: 54px;\n        height: 54px;\n        display: grid;\n        place-items: center;\n        border-radius: 16px;\n        color: var(--ht-navy-950);\n        background: var(--ht-sky-400);\n        font-size: 20px;\n    }\n\n    .ht-program-card:nth-child(2n) .ht-program-icon {\n        background: var(--ht-yellow);\n    }\n\n    .ht-program-index {\n        color: rgba(255, 255, 255, 0.22);\n        font-family: \"Space Grotesk\", monospace;\n        font-size: 30px;\n        font-weight: 700;\n    }\n\n    .ht-program-card h3 {\n        margin-bottom: 10px;\n        color: var(--ht-white);\n        font-size: 19px;\n    }\n\n    .ht-program-card p {\n        margin-bottom: 20px;\n        color: rgba(255, 255, 255, 0.69);\n        font-size: 14px;\n        line-height: 1.75;\n    }\n\n    .ht-program-tag {\n        display: inline-flex;\n        align-items: center;\n        align-self: flex-start;\n        gap: 7px;\n        margin-top: auto;\n        padding: 7px 10px;\n        border-radius: 999px;\n        color: #dcf6ff;\n        background: rgba(255, 255, 255, 0.09);\n        font-size: 11px;\n        font-weight: 800;\n    }\n\n    \/* =========================================================\n       9. ALUR PENGEMBANGAN\n    ========================================================== *\/\n    .ht-journey {\n        position: relative;\n        display: grid;\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n        gap: 22px;\n    }\n\n    .ht-journey::before {\n        content: \"\";\n        position: absolute;\n        top: 36px;\n        left: 12.5%;\n        right: 12.5%;\n        height: 2px;\n        background: linear-gradient(90deg, var(--ht-sky-300), var(--ht-blue-600), var(--ht-yellow));\n    }\n\n    .ht-step {\n        position: relative;\n        text-align: center;\n    }\n\n    .ht-step-badge {\n        position: relative;\n        z-index: 2;\n        width: 74px;\n        height: 74px;\n        display: grid;\n        place-items: center;\n        margin: 0 auto 19px;\n        border: 7px solid var(--ht-white);\n        border-radius: 50%;\n        color: var(--ht-white);\n        background: var(--ht-blue-700);\n        box-shadow: 0 10px 25px rgba(13, 53, 99, 0.23);\n        font-size: 20px;\n    }\n\n    .ht-step:nth-child(2) .ht-step-badge {\n        background: var(--ht-sky-500);\n    }\n\n    .ht-step:nth-child(3) .ht-step-badge {\n        background: var(--ht-navy-800);\n    }\n\n    .ht-step:nth-child(4) .ht-step-badge {\n        color: var(--ht-navy-950);\n        background: var(--ht-yellow);\n    }\n\n    .ht-step h3 {\n        margin-bottom: 7px;\n        color: var(--ht-navy-950);\n        font-size: 18px;\n    }\n\n    .ht-step p {\n        max-width: 240px;\n        margin: 0 auto;\n        color: var(--ht-muted);\n        font-size: 13px;\n        line-height: 1.67;\n    }\n\n    \/* =========================================================\n       10. KOLABORASI DAN KONTAK\n    ========================================================== *\/\n    .ht-collab-grid {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 18px;\n    }\n\n    .ht-collab-card {\n        padding: 28px;\n        border: 1px solid var(--ht-line);\n        border-radius: 21px;\n        background: var(--ht-white);\n        box-shadow: var(--ht-shadow-sm);\n        text-align: center;\n    }\n\n    .ht-collab-icon {\n        width: 61px;\n        height: 61px;\n        display: grid;\n        place-items: center;\n        margin: 0 auto 17px;\n        border-radius: 18px;\n        color: var(--ht-navy-800);\n        background: var(--ht-sky-100);\n        font-size: 23px;\n    }\n\n    .ht-collab-card:nth-child(2) .ht-collab-icon {\n        color: var(--ht-white);\n        background: var(--ht-blue-600);\n    }\n\n    .ht-collab-card:nth-child(3) .ht-collab-icon {\n        color: var(--ht-navy-950);\n        background: var(--ht-yellow);\n    }\n\n    .ht-collab-card h3 {\n        margin-bottom: 8px;\n        color: var(--ht-navy-950);\n        font-size: 19px;\n    }\n\n    .ht-collab-card p {\n        margin: 0;\n        color: var(--ht-muted);\n        font-size: 14px;\n        line-height: 1.7;\n    }\n\n    .ht-contact-wrap {\n        padding: 0 0 96px;\n        background: var(--ht-white);\n    }\n\n    .ht-contact {\n        position: relative;\n        padding: clamp(35px, 6vw, 70px);\n        overflow: hidden;\n        border-radius: 32px;\n        color: var(--ht-white);\n        background:\n            radial-gradient(circle at 94% 8%, rgba(255, 211, 79, 0.2), transparent 30%),\n            linear-gradient(135deg, var(--ht-navy-950), var(--ht-blue-700));\n        box-shadow: var(--ht-shadow-lg);\n        text-align: center;\n    }\n\n    .ht-contact::before {\n        content: \"<\/>\";\n        position: absolute;\n        left: -35px;\n        bottom: -45px;\n        color: rgba(255, 255, 255, 0.04);\n        font-family: \"Space Grotesk\", monospace;\n        font-size: 170px;\n        font-weight: 700;\n    }\n\n    .ht-contact h2 {\n        position: relative;\n        margin-bottom: 16px;\n        color: var(--ht-white);\n        font-family: \"Space Grotesk\", Arial, sans-serif;\n        font-size: clamp(33px, 4vw, 50px);\n        line-height: 1.16;\n    }\n\n    .ht-contact p {\n        position: relative;\n        max-width: 750px;\n        margin: 0 auto 28px;\n        color: rgba(255, 255, 255, 0.76);\n        font-size: 16px;\n    }\n\n    .ht-contact-actions {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        flex-wrap: wrap;\n        gap: 12px;\n    }\n\n    .ht-contact-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 9px;\n        min-height: 50px;\n        padding: 13px 21px;\n        border: 1px solid rgba(255, 255, 255, 0.28);\n        border-radius: 13px;\n        color: var(--ht-white);\n        background: rgba(255, 255, 255, 0.08);\n        font-size: 14px;\n        font-weight: 800;\n        transition: transform 0.25s ease, background 0.25s ease;\n    }\n\n    .ht-contact-button:hover {\n        transform: translateY(-3px);\n        background: rgba(255, 255, 255, 0.15);\n    }\n\n    .ht-contact-button.is-sky {\n        color: var(--ht-navy-950);\n        border-color: var(--ht-sky-400);\n        background: var(--ht-sky-400);\n    }\n\n    .ht-contact-button.is-sky:hover {\n        background: #71d4fb;\n    }\n\n    \/* =========================================================\n       11. TOAST\n    ========================================================== *\/\n    .ht-toast {\n        position: fixed;\n        z-index: 99999;\n        left: 50%;\n        bottom: 25px;\n        display: flex;\n        align-items: center;\n        gap: 11px;\n        width: min(92%, 530px);\n        padding: 15px 18px;\n        border: 1px solid rgba(255, 255, 255, 0.14);\n        border-radius: 14px;\n        color: var(--ht-white);\n        background: rgba(6, 27, 54, 0.97);\n        box-shadow: 0 18px 50px rgba(2, 18, 36, 0.38);\n        font-size: 13px;\n        line-height: 1.5;\n        opacity: 0;\n        visibility: hidden;\n        transform: translate(-50%, 25px);\n        transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;\n    }\n\n    .ht-toast.is-visible {\n        opacity: 1;\n        visibility: visible;\n        transform: translate(-50%, 0);\n    }\n\n    .ht-toast i {\n        color: var(--ht-yellow);\n        font-size: 18px;\n    }\n\n    \/* =========================================================\n       12. RESPONSIVE\n    ========================================================== *\/\n    @media (max-width: 1024px) {\n        .ht-hero {\n            min-height: auto;\n        }\n\n        .ht-hero-grid {\n            grid-template-columns: minmax(0, 1fr) 330px;\n            gap: 40px;\n        }\n\n        .ht-logo-frame {\n            min-height: 275px;\n        }\n\n        .ht-values-grid,\n        .ht-program-grid {\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n    }\n\n    @media (max-width: 820px) {\n        .ht-hero {\n            padding: 72px 0 82px;\n            text-align: center;\n        }\n\n        .ht-hero-grid,\n        .ht-profile-grid {\n            grid-template-columns: 1fr;\n        }\n\n        .ht-hero-grid {\n            gap: 46px;\n        }\n\n        .ht-hero h1,\n        .ht-hero-lead {\n            margin-inline: auto;\n        }\n\n        .ht-tagline,\n        .ht-hero-actions {\n            justify-content: center;\n        }\n\n        .ht-logo-card {\n            transform: none;\n        }\n\n        .ht-focus-grid,\n        .ht-collab-grid {\n            grid-template-columns: 1fr;\n        }\n\n        .ht-journey {\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n            row-gap: 42px;\n        }\n\n        .ht-journey::before {\n            display: none;\n        }\n    }\n\n    @media (max-width: 620px) {\n        .ht-container {\n            width: min(100% - 28px, 1240px);\n        }\n\n        .ht-hero {\n            padding-top: 58px;\n        }\n\n        .ht-hero h1 {\n            font-size: clamp(44px, 15vw, 61px);\n            letter-spacing: -2px;\n        }\n\n        .ht-hero-lead {\n            font-size: 16px;\n        }\n\n        .ht-tagline {\n            font-size: 14px;\n        }\n\n        .ht-button,\n        .ht-contact-button {\n            width: 100%;\n        }\n\n        .ht-logo-card {\n            padding: 20px;\n            border-radius: 27px;\n        }\n\n        .ht-logo-frame {\n            min-height: 255px;\n            border-radius: 20px;\n        }\n\n        .ht-quick-nav-wrap {\n            margin-top: -25px;\n        }\n\n        .ht-quick-nav {\n            justify-content: flex-start;\n            flex-wrap: nowrap;\n            overflow-x: auto;\n            scrollbar-width: none;\n        }\n\n        .ht-quick-nav::-webkit-scrollbar {\n            display: none;\n        }\n\n        .ht-quick-nav a {\n            flex: 0 0 auto;\n        }\n\n        .ht-section {\n            padding: 74px 0;\n        }\n\n        .ht-section-heading {\n            margin-bottom: 36px;\n        }\n\n        .ht-section-heading h2 {\n            font-size: 34px;\n        }\n\n        .ht-values-grid,\n        .ht-program-grid,\n        .ht-journey {\n            grid-template-columns: 1fr;\n        }\n\n        .ht-focus-card {\n            grid-template-columns: 58px minmax(0, 1fr);\n            gap: 16px;\n            padding: 23px 20px;\n        }\n\n        .ht-focus-icon {\n            width: 58px;\n            height: 58px;\n            border-radius: 17px;\n            font-size: 21px;\n        }\n\n        .ht-program-card {\n            min-height: 260px;\n        }\n\n        .ht-contact-wrap {\n            padding-bottom: 74px;\n        }\n\n        .ht-contact {\n            border-radius: 26px;\n        }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .himastech-page *,\n        .himastech-page *::before,\n        .himastech-page *::after {\n            scroll-behavior: auto !important;\n            transition-duration: 0.01ms !important;\n            animation-duration: 0.01ms !important;\n            animation-iteration-count: 1 !important;\n        }\n    }\n<\/style>\n\n<main class=\"himastech-page\">\n    <!-- HERO -->\n    <header class=\"ht-hero\">\n        <div class=\"ht-circuit-pattern\" aria-hidden=\"true\"><\/div>\n        <div class=\"ht-container ht-hero-grid\">\n            <div>\n                <span class=\"ht-kicker\"><span class=\"ht-status-dot\"><\/span>Tech Community Online<\/span>\n                <h1>HIMA<span>STECH<\/span><\/h1>\n                <p class=\"ht-hero-lead\">Himpunan Mahasiswa Sistem dan Teknologi Informasi IPTAR\u2014ruang mahasiswa untuk belajar, berkolaborasi, membangun solusi digital, dan menghadirkan inovasi teknologi yang bermanfaat.<\/p>\n                <div class=\"ht-tagline\">Think Smart, Build Future.<\/div>\n                <div class=\"ht-hero-actions\">\n                    <a class=\"ht-button ht-button-primary\" href=\"#ht-profil\"><i class=\"fa-solid fa-terminal\" aria-hidden=\"true\"><\/i>Kenali HIMASTECH<\/a>\n                    <a class=\"ht-button ht-button-ghost\" href=\"#ht-program\"><i class=\"fa-solid fa-code\" aria-hidden=\"true\"><\/i>Jelajahi Program<\/a>\n                <\/div>\n            <\/div>\n\n            <div class=\"ht-logo-column\">\n                <div class=\"ht-logo-card\">\n                    <div class=\"ht-logo-frame\">\n                        <img src=\"https:\/\/iptar.ac.id\/wp-content\/uploads\/2026\/08\/Logo-HIMASTECH-IPTAR-HD.png\" alt=\"Logo HIMASTECH IPTAR\" loading=\"eager\" decoding=\"async\" fetchpriority=\"high\">\n                    <\/div>\n                    <span class=\"ht-logo-caption\"><i class=\"fa-solid fa-microchip\" aria-hidden=\"true\"><\/i>Himpunan Mahasiswa Sistem dan Teknologi Informasi<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- NAVIGASI CEPAT -->\n    <div class=\"ht-quick-nav-wrap\">\n        <nav class=\"ht-container ht-quick-nav\" aria-label=\"Navigasi halaman HIMASTECH\">\n            <a href=\"#ht-profil\"><i class=\"fa-solid fa-house\" aria-hidden=\"true\"><\/i>Profil<\/a>\n            <a href=\"#ht-arah\"><i class=\"fa-solid fa-compass\" aria-hidden=\"true\"><\/i>Arah Gerak<\/a>\n            <a href=\"#ht-nilai\"><i class=\"fa-solid fa-gem\" aria-hidden=\"true\"><\/i>Nilai<\/a>\n            <a href=\"#ht-fokus\"><i class=\"fa-solid fa-microchip\" aria-hidden=\"true\"><\/i>Fokus<\/a>\n            <a href=\"#ht-program\"><i class=\"fa-solid fa-list-check\" aria-hidden=\"true\"><\/i>Program<\/a>\n            <a href=\"#ht-journey\"><i class=\"fa-solid fa-route\" aria-hidden=\"true\"><\/i>Journey<\/a>\n            <a href=\"#ht-kontak\"><i class=\"fa-solid fa-paper-plane\" aria-hidden=\"true\"><\/i>Kontak<\/a>\n        <\/nav>\n    <\/div>\n\n    <!-- PROFIL -->\n    <section id=\"ht-profil\" class=\"ht-section ht-section-white ht-anchor\">\n        <div class=\"ht-container\">\n            <div class=\"ht-section-heading\">\n                <span class=\"ht-eyebrow\">About the Community<\/span>\n                <h2>Tentang HIMASTECH IPTAR<\/h2>\n                <p>Organisasi mahasiswa tingkat program studi yang menjadi wadah aspirasi, pengembangan keterampilan teknologi, kepemimpinan, kreativitas, dan kolaborasi.<\/p>\n            <\/div>\n\n            <div class=\"ht-profile-grid\">\n                <article class=\"ht-profile-copy\">\n                    <p><strong>HIMASTECH<\/strong> adalah Himpunan Mahasiswa Program Studi Sistem dan Teknologi Informasi Institut Pendidikan dan Teknologi \u2018Aisyiyah Riau. Organisasi ini menjadi ruang bersama bagi mahasiswa STI untuk belajar berorganisasi, menyampaikan aspirasi, mengembangkan kompetensi, dan membangun jejaring.<\/p>\n                    <p>HIMASTECH mendorong mahasiswa untuk tumbuh sebagai pembelajar teknologi yang aktif, adaptif, dan berorientasi pada solusi. Kegiatan organisasi diarahkan pada pengembangan perangkat lunak, data, Smart System, Educational Technology, transformasi digital, kewirausahaan teknologi, serta pengabdian kepada masyarakat.<\/p>\n                    <p>Sebagai bagian dari keluarga besar IPTAR, HIMASTECH menjadikan nilai Islam Berkemajuan, integritas, profesionalitas, kreativitas, dan semangat kolaborasi sebagai fondasi dalam setiap program serta karya.<\/p>\n\n                    <div class=\"ht-code-quote\">\n                        <span class=\"ht-code-icon\"><i class=\"fa-solid fa-code\" aria-hidden=\"true\"><\/i><\/span>\n                        <p>Think Smart, Build Future \u2014 berpikir cerdas, membangun solusi, dan menyiapkan masa depan melalui teknologi.<\/p>\n                    <\/div>\n                <\/article>\n\n                <aside class=\"ht-identity-card\">\n                    <div class=\"ht-identity-label\">System Identity<\/div>\n                    <div class=\"ht-identity-list\">\n                        <div class=\"ht-identity-item\"><span class=\"ht-identity-icon\"><i class=\"fa-solid fa-building-columns\" aria-hidden=\"true\"><\/i><\/span><div><small>Institusi<\/small><strong>Institut Pendidikan dan Teknologi \u2018Aisyiyah Riau<\/strong><\/div><\/div>\n                        <div class=\"ht-identity-item\"><span class=\"ht-identity-icon\"><i class=\"fa-solid fa-laptop-code\" aria-hidden=\"true\"><\/i><\/span><div><small>Program Studi<\/small><strong>Sistem dan Teknologi Informasi<\/strong><\/div><\/div>\n                        <div class=\"ht-identity-item\"><span class=\"ht-identity-icon\"><i class=\"fa-solid fa-network-wired\" aria-hidden=\"true\"><\/i><\/span><div><small>Fokus<\/small><strong>Smart System dan Educational Technology<\/strong><\/div><\/div>\n                        <div class=\"ht-identity-item\"><span class=\"ht-identity-icon\"><i class=\"fa-solid fa-location-dot\" aria-hidden=\"true\"><\/i><\/span><div><small>Ekosistem<\/small><strong>Kampus, komunitas teknologi, dan masyarakat<\/strong><\/div><\/div>\n                    <\/div>\n                <\/aside>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- ARAH GERAK DAN NILAI -->\n    <section id=\"ht-arah\" class=\"ht-section ht-section-soft ht-anchor\">\n        <div class=\"ht-container\">\n            <div class=\"ht-section-heading\">\n                <span class=\"ht-eyebrow\">Direction and Values<\/span>\n                <h2>Dari Ide Menjadi Solusi Digital<\/h2>\n                <p>Arah organisasi dibangun untuk memperkuat kompetensi mahasiswa, budaya inovasi, dan kontribusi teknologi bagi kampus serta masyarakat.<\/p>\n            <\/div>\n\n            <article class=\"ht-direction-card\">\n                <i class=\"fa-solid fa-satellite-dish\" aria-hidden=\"true\"><\/i>\n                <h3>Arah Gerak HIMASTECH<\/h3>\n                <p>Menjadi wadah mahasiswa STI IPTAR yang aktif, inovatif, adaptif, kolaboratif, dan berkarakter Islam Berkemajuan dalam mengembangkan Smart System serta Educational Technology.<\/p>\n            <\/article>\n\n            <div id=\"ht-nilai\" class=\"ht-values-grid ht-anchor\">\n                <article class=\"ht-value-card\"><span class=\"ht-value-icon\"><i class=\"fa-solid fa-mosque\" aria-hidden=\"true\"><\/i><\/span><h3>Berintegritas<\/h3><p>Menjadikan nilai Islam Berkemajuan, kejujuran, tanggung jawab, dan etika digital sebagai dasar bergerak.<\/p><\/article>\n                <article class=\"ht-value-card\"><span class=\"ht-value-icon\"><i class=\"fa-solid fa-lightbulb\" aria-hidden=\"true\"><\/i><\/span><h3>Inovatif<\/h3><p>Berani mengeksplorasi ide, teknologi, metode, dan solusi baru yang relevan dengan kebutuhan nyata.<\/p><\/article>\n                <article class=\"ht-value-card\"><span class=\"ht-value-icon\"><i class=\"fa-solid fa-people-group\" aria-hidden=\"true\"><\/i><\/span><h3>Kolaboratif<\/h3><p>Membangun budaya berbagi pengetahuan, kerja tim, komunikasi terbuka, dan jejaring yang sehat.<\/p><\/article>\n                <article class=\"ht-value-card\"><span class=\"ht-value-icon\"><i class=\"fa-solid fa-arrows-rotate\" aria-hidden=\"true\"><\/i><\/span><h3>Adaptif<\/h3><p>Terus belajar dan tanggap terhadap perkembangan teknologi, kebutuhan pengguna, serta perubahan dunia kerja.<\/p><\/article>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- FOKUS KEILMUAN -->\n    <section id=\"ht-fokus\" class=\"ht-section ht-section-white ht-anchor\">\n        <div class=\"ht-container\">\n            <div class=\"ht-section-heading\">\n                <span class=\"ht-eyebrow\">Technology Focus<\/span>\n                <h2>Ekosistem Belajar HIMASTECH<\/h2>\n                <p>Ruang pengembangan mahasiswa dirancang selaras dengan identitas keilmuan STI IPTAR dan kebutuhan transformasi digital.<\/p>\n            <\/div>\n\n            <div class=\"ht-focus-grid\">\n                <article class=\"ht-focus-card\"><span class=\"ht-focus-icon\"><i class=\"fa-solid fa-robot\" aria-hidden=\"true\"><\/i><\/span><div><h3>Smart System<\/h3><p>Eksplorasi kecerdasan buatan, Internet of Things, machine learning, cloud, dan sistem cerdas berbasis kebutuhan pengguna.<\/p><\/div><\/article>\n                <article class=\"ht-focus-card\"><span class=\"ht-focus-icon\"><i class=\"fa-solid fa-graduation-cap\" aria-hidden=\"true\"><\/i><\/span><div><h3>Educational Technology<\/h3><p>Pengembangan media digital, LMS, pengalaman belajar, UI\/UX, dan solusi teknologi yang mendukung pendidikan.<\/p><\/div><\/article>\n                <article class=\"ht-focus-card\"><span class=\"ht-focus-icon\"><i class=\"fa-solid fa-code\" aria-hidden=\"true\"><\/i><\/span><div><h3>Software Development<\/h3><p>Penguatan logika, pemrograman, web, aplikasi, basis data, analisis sistem, kolaborasi kode, dan pengembangan produk.<\/p><\/div><\/article>\n                <article class=\"ht-focus-card\"><span class=\"ht-focus-icon\"><i class=\"fa-solid fa-chart-simple\" aria-hidden=\"true\"><\/i><\/span><div><h3>Data dan Transformasi Digital<\/h3><p>Literasi data, visualisasi, analitik, keamanan informasi, proses bisnis, dan solusi digital untuk pendidikan, UMKM, serta masyarakat.<\/p><\/div><\/article>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- PROGRAM -->\n    <section id=\"ht-program\" class=\"ht-section ht-section-dark ht-anchor\">\n        <div class=\"ht-container\">\n            <div class=\"ht-section-heading\">\n                <span class=\"ht-eyebrow\">Programs and Activities<\/span>\n                <h2>Learn, Build, Share, and Impact<\/h2>\n                <p>Program HIMASTECH melengkapi pengalaman perkuliahan melalui kegiatan teknis, organisasi, inovasi, kewirausahaan, dan pengabdian.<\/p>\n            <\/div>\n\n            <div class=\"ht-program-grid\">\n                <article class=\"ht-program-card\"><div class=\"ht-program-top\"><span class=\"ht-program-icon\"><i class=\"fa-solid fa-comments\" aria-hidden=\"true\"><\/i><\/span><span class=\"ht-program-index\">01<\/span><\/div><h3>Tech Talk dan Study Club<\/h3><p>Diskusi teknologi, belajar bersama, sharing alumni dan praktisi, serta kajian isu terbaru dalam dunia digital.<\/p><span class=\"ht-program-tag\"><i class=\"fa-solid fa-circle\" aria-hidden=\"true\"><\/i>Knowledge sharing<\/span><\/article>\n                <article class=\"ht-program-card\"><div class=\"ht-program-top\"><span class=\"ht-program-icon\"><i class=\"fa-solid fa-laptop-code\" aria-hidden=\"true\"><\/i><\/span><span class=\"ht-program-index\">02<\/span><\/div><h3>Coding dan Product Development<\/h3><p>Workshop pemrograman, UI\/UX, basis data, web, aplikasi, Git, pengembangan proyek, dan pameran karya mahasiswa.<\/p><span class=\"ht-program-tag\"><i class=\"fa-solid fa-circle\" aria-hidden=\"true\"><\/i>Build real products<\/span><\/article>\n                <article class=\"ht-program-card\"><div class=\"ht-program-top\"><span class=\"ht-program-icon\"><i class=\"fa-solid fa-brain\" aria-hidden=\"true\"><\/i><\/span><span class=\"ht-program-index\">03<\/span><\/div><h3>Data, AI, dan Smart System<\/h3><p>Eksplorasi data, visualisasi, AI dasar, IoT, cloud, otomasi, dan prototipe sistem cerdas untuk masalah nyata.<\/p><span class=\"ht-program-tag\"><i class=\"fa-solid fa-circle\" aria-hidden=\"true\"><\/i>Future technology<\/span><\/article>\n                <article class=\"ht-program-card\"><div class=\"ht-program-top\"><span class=\"ht-program-icon\"><i class=\"fa-solid fa-chalkboard-user\" aria-hidden=\"true\"><\/i><\/span><span class=\"ht-program-index\">04<\/span><\/div><h3>EdTech Innovation<\/h3><p>Pengembangan media pembelajaran, platform edukasi, pengalaman pengguna, konten interaktif, dan teknologi untuk pendidikan.<\/p><span class=\"ht-program-tag\"><i class=\"fa-solid fa-circle\" aria-hidden=\"true\"><\/i>Technology for learning<\/span><\/article>\n                <article class=\"ht-program-card\"><div class=\"ht-program-top\"><span class=\"ht-program-icon\"><i class=\"fa-solid fa-rocket\" aria-hidden=\"true\"><\/i><\/span><span class=\"ht-program-index\">05<\/span><\/div><h3>Digital Entrepreneurship<\/h3><p>Kelas ide bisnis, validasi masalah, produk digital, pemasaran, personal branding, portofolio, dan kesiapan karier teknologi.<\/p><span class=\"ht-program-tag\"><i class=\"fa-solid fa-circle\" aria-hidden=\"true\"><\/i>Career and startup<\/span><\/article>\n                <article class=\"ht-program-card\"><div class=\"ht-program-top\"><span class=\"ht-program-icon\"><i class=\"fa-solid fa-hand-holding-heart\" aria-hidden=\"true\"><\/i><\/span><span class=\"ht-program-index\">06<\/span><\/div><h3>Leadership dan Tech for Society<\/h3><p>Kaderisasi, kepemimpinan, literasi digital, pendampingan teknologi, pengabdian, dan kolaborasi sosial berbasis solusi.<\/p><span class=\"ht-program-tag\"><i class=\"fa-solid fa-circle\" aria-hidden=\"true\"><\/i>Technology with impact<\/span><\/article>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- JOURNEY -->\n    <section id=\"ht-journey\" class=\"ht-section ht-section-white ht-anchor\">\n        <div class=\"ht-container\">\n            <div class=\"ht-section-heading\">\n                <span class=\"ht-eyebrow\">Student Tech Journey<\/span>\n                <h2>Dari Rasa Ingin Tahu Menjadi Karya<\/h2>\n                <p>Setiap mahasiswa dapat memulai dari tingkat kemampuan yang berbeda, lalu bertumbuh melalui proses belajar dan kolaborasi.<\/p>\n            <\/div>\n\n            <div class=\"ht-journey\">\n                <article class=\"ht-step\"><span class=\"ht-step-badge\"><i class=\"fa-solid fa-magnifying-glass\" aria-hidden=\"true\"><\/i><\/span><h3>Discover<\/h3><p>Kenali minat, bidang teknologi, komunitas, dan masalah nyata yang ingin diselesaikan.<\/p><\/article>\n                <article class=\"ht-step\"><span class=\"ht-step-badge\"><i class=\"fa-solid fa-book-open\" aria-hidden=\"true\"><\/i><\/span><h3>Learn<\/h3><p>Belajar melalui diskusi, study club, workshop, mentoring, dan kolaborasi antarmahasiswa.<\/p><\/article>\n                <article class=\"ht-step\"><span class=\"ht-step-badge\"><i class=\"fa-solid fa-screwdriver-wrench\" aria-hidden=\"true\"><\/i><\/span><h3>Build<\/h3><p>Ubah ide menjadi prototipe, aplikasi, analisis, media pembelajaran, atau solusi digital.<\/p><\/article>\n                <article class=\"ht-step\"><span class=\"ht-step-badge\"><i class=\"fa-solid fa-share-nodes\" aria-hidden=\"true\"><\/i><\/span><h3>Showcase<\/h3><p>Presentasikan karya, ikuti kompetisi, bangun portofolio, dan bagikan manfaat kepada masyarakat.<\/p><\/article>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- KOLABORASI -->\n    <section class=\"ht-section ht-section-soft\">\n        <div class=\"ht-container\">\n            <div class=\"ht-section-heading\">\n                <span class=\"ht-eyebrow\">Open Collaboration<\/span>\n                <h2>Terhubung dalam Ekosistem Digital<\/h2>\n                <p>HIMASTECH terbuka untuk kolaborasi yang mendukung pembelajaran, inovasi, karier, kewirausahaan, dan pemanfaatan teknologi.<\/p>\n            <\/div>\n\n            <div class=\"ht-collab-grid\">\n                <article class=\"ht-collab-card\"><span class=\"ht-collab-icon\"><i class=\"fa-solid fa-building-columns\" aria-hidden=\"true\"><\/i><\/span><h3>Internal Kampus<\/h3><p>Program studi, dosen, BEM, HIMA lintas prodi, lembaga kampus, dan unit kegiatan mahasiswa.<\/p><\/article>\n                <article class=\"ht-collab-card\"><span class=\"ht-collab-icon\"><i class=\"fa-solid fa-users-viewfinder\" aria-hidden=\"true\"><\/i><\/span><h3>Komunitas dan Akademik<\/h3><p>Komunitas teknologi, perguruan tinggi, sekolah, alumni, peneliti, mentor, dan organisasi profesi.<\/p><\/article>\n                <article class=\"ht-collab-card\"><span class=\"ht-collab-icon\"><i class=\"fa-solid fa-briefcase\" aria-hidden=\"true\"><\/i><\/span><h3>Industri dan Masyarakat<\/h3><p>Perusahaan teknologi, startup, UMKM, pemerintah, desa, organisasi sosial, dan mitra transformasi digital.<\/p><\/article>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- KONTAK -->\n    <div class=\"ht-contact-wrap\">\n        <section id=\"ht-kontak\" class=\"ht-container ht-contact ht-anchor\">\n            <h2>Ready to Build the Future?<\/h2>\n            <p>Kenali kegiatan HIMASTECH, sampaikan ide, bergabung dalam proyek dan kepanitiaan, atau bangun kolaborasi teknologi bersama mahasiswa STI IPTAR.<\/p>\n            <div class=\"ht-contact-actions\">\n                <!-- GANTI href=\"#\" DENGAN LINK PENDAFTARAN \/ FORM MINAT -->\n                <a class=\"ht-contact-button is-sky ht-placeholder-link\" href=\"#\"><i class=\"fa-solid fa-user-plus\" aria-hidden=\"true\"><\/i>Join HIMASTECH<\/a>\n                <!-- GANTI href=\"#\" DENGAN LINK INSTAGRAM HIMASTECH -->\n                <a class=\"ht-contact-button ht-placeholder-link\" href=\"#\"><i class=\"fa-brands fa-instagram\" aria-hidden=\"true\"><\/i>Instagram HIMASTECH<\/a>\n                <a class=\"ht-contact-button\" href=\"https:\/\/iptar.ac.id\/\" target=\"_blank\" rel=\"noopener\"><i class=\"fa-solid fa-globe\" aria-hidden=\"true\"><\/i>Website IPTAR<\/a>\n            <\/div>\n        <\/section>\n    <\/div>\n\n    <div class=\"ht-toast\" role=\"status\" aria-live=\"polite\">\n        <i class=\"fa-solid fa-link-slash\" aria-hidden=\"true\"><\/i>\n        <span>Tautan belum ditambahkan. Ganti <strong>href=\"#\"<\/strong> dengan link pendaftaran atau Instagram resmi HIMASTECH.<\/span>\n    <\/div>\n<\/main>\n\n<script>\n    (function () {\n        \"use strict\";\n\n        var page = document.querySelector(\".himastech-page\");\n        if (!page) return;\n\n        var toast = page.querySelector(\".ht-toast\");\n        var toastTimer;\n\n        page.querySelectorAll(\".ht-placeholder-link\").forEach(function (link) {\n            link.addEventListener(\"click\", function (event) {\n                event.preventDefault();\n                if (!toast) return;\n\n                toast.classList.add(\"is-visible\");\n                window.clearTimeout(toastTimer);\n                toastTimer = window.setTimeout(function () {\n                    toast.classList.remove(\"is-visible\");\n                }, 3600);\n            });\n        });\n    }());\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tech Community Online HIMASTECH Himpunan Mahasiswa Sistem dan Teknologi Informasi IPTAR\u2014ruang mahasiswa untuk belajar, berkolaborasi, membangun solusi digital, dan menghadirkan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-880","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/comments?post=880"}],"version-history":[{"count":5,"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/880\/revisions"}],"predecessor-version":[{"id":1247,"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/880\/revisions\/1247"}],"wp:attachment":[{"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/media?parent=880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}