{"id":1105,"date":"2025-06-18T15:08:26","date_gmt":"2025-06-18T08:08:26","guid":{"rendered":"http:\/\/localhost\/topikoki5\/?page_id=1105"},"modified":"2025-07-08T14:32:08","modified_gmt":"2025-07-08T07:32:08","slug":"struktur-organisasi","status":"publish","type":"page","link":"https:\/\/topikoki.com\/en\/struktur-organisasi\/","title":{"rendered":"ORGANIZATIONAL STRUCTURE"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1105\" class=\"elementor elementor-1105\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c89412 e-flex e-con-boxed e-con e-parent\" data-id=\"5c89412\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76fee56 elementor-widget elementor-widget-heading\" data-id=\"76fee56\" 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\">ORGANIZATIONAL STRUCTURE<\/h2>\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<div class=\"elementor-element elementor-element-babf90e e-flex e-con-boxed e-con e-parent\" data-id=\"babf90e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bba103c e-flex e-con-boxed e-con e-parent\" data-id=\"bba103c\" 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-588a4ed elementor-widget elementor-widget-html\" data-id=\"588a4ed\" 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        \/* --- Root Variables for Easy Customization --- *\/\r\n        :root {\r\n            --primary-color: #2a628f;\r\n            --secondary-color: #4e8d7c;\r\n            --card-bg: #ffffff;\r\n            --line-color: #ced4da;\r\n            --text-color-light: #ffffff;\r\n            --text-color-dark: #333;\r\n            --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n            --border-radius: 8px;\r\n        }\r\n\r\n        body {\r\n            background-color: #f8f9fa;\r\n            font-family: 'Segoe UI', sans-serif;\r\n            padding-top: 40px;\r\n            padding-bottom: 40px;\r\n        }\r\n\r\n        .org-chart-container {\r\n            max-width: 2000px;\r\n            margin: auto;\r\n        }\r\n        \r\n        .org-chart {\r\n            display: flex;\r\n            justify-content: center;\r\n        }\r\n\r\n        \/* --- Resetting List Styles --- *\/\r\n        .org-chart ul {\r\n            padding-top: 20px;\r\n            position: relative;\r\n            transition: all 0.5s;\r\n            list-style-type: none; \/* Add this to remove bullets *\/\r\n            margin: 0; \/* Add this to remove default margin *\/\r\n            padding-left: 0; \/* Add this to remove default padding *\/\r\n        }\r\n\r\n        .org-chart li {\r\n            float: left;\r\n            text-align: center;\r\n            list-style-type: none;\r\n            position: relative;\r\n            padding: 20px 5px 0 5px;\r\n            transition: all 0.5s;\r\n        }\r\n\r\n        \/* --- Drawing Connector Lines using Pseudo-elements --- *\/\r\n        \/* Vertical and Horizontal lines *\/\r\n        .org-chart li::before, .org-chart li::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            right: 50%;\r\n            border-top: 2px solid var(--line-color);\r\n            width: 50%;\r\n            height: 20px;\r\n        }\r\n        .org-chart li::after {\r\n            right: auto;\r\n            left: 50%;\r\n            border-left: 2px solid var(--line-color);\r\n        }\r\n\r\n        \/* Remove left-border from first-child and right-border from last-child *\/\r\n        .org-chart li:only-child::after, .org-chart li:only-child::before {\r\n            display: none;\r\n        }\r\n        .org-chart li:first-child::before, .org-chart li:last-child::after {\r\n            border: 0 none;\r\n        }\r\n        .org-chart li:last-child::before {\r\n            border-right: 2px solid var(--line-color);\r\n            border-radius: 0 var(--border-radius) 0 0;\r\n        }\r\n        .org-chart li:first-child::after {\r\n            border-radius: var(--border-radius) 0 0 0;\r\n        }\r\n\r\n        \/* --- Styling the Nodes (Cards) --- *\/\r\n        .org-chart .node {\r\n            padding: 12px 18px;\r\n            text-decoration: none;\r\n            color: var(--text-color-light);\r\n            background-color: var(--secondary-color); \/* Default color *\/\r\n            font-size: 14px;\r\n            font-weight: 600;\r\n            display: inline-block;\r\n            border-radius: var(--border-radius);\r\n            box-shadow: var(--card-shadow);\r\n            border: 1px solid rgba(0,0,0,0.05);\r\n            transition: all 0.3s ease;\r\n            min-width: 150px;\r\n            position: relative;\r\n        }\r\n\r\n        \/* Style for top-level nodes *\/\r\n        .org-chart > ul > li > .node,\r\n        .org-chart > ul > li > ul > li > .node {\r\n             background-color: var(--primary-color);\r\n        }\r\n        \r\n        .org-chart .node:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);\r\n            z-index: 10;\r\n        }\r\n        \r\n        \/* --- Connecting Lines for Children --- *\/\r\n        .org-chart ul ul::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 50%;\r\n            border-left: 2px solid var(--line-color);\r\n            width: 0;\r\n            height: 20px;\r\n        }\r\n\r\n        \/* --- Interactivity (Collapsible) --- *\/\r\n        .org-chart .node.has-children {\r\n            cursor: pointer;\r\n        }\r\n        \r\n        \/* Toggle indicator (+\/-) *\/\r\n        .org-chart .node.has-children::after {\r\n            content: '-';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            right: 5px;\r\n            font-size: 20px;\r\n            color: rgba(255, 255, 255, 0.7);\r\n        }\r\n        \r\n        .org-chart .node.has-children.collapsed::after {\r\n            content: '+';\r\n        }\r\n        \r\n        \/* Styling sub-levels *\/\r\n        .org-chart li > ul {\r\n            display: flex;\r\n            justify-content: center;\r\n        }\r\n\r\n        \/* --- Responsive Design for Mobile --- *\/\r\n        @media (max-width: 767px) {\r\n            .org-chart {\r\n                display: block; \/* Stack vertically *\/\r\n                overflow-x: auto; \/* Allow horizontal scroll if needed *\/\r\n                padding: 15px;\r\n            }\r\n\r\n            .org-chart ul {\r\n                display: block;\r\n                padding-top: 0;\r\n            }\r\n\r\n            .org-chart li {\r\n                float: none;\r\n                display: block; \/* Each li takes full width *\/\r\n                padding: 10px 0;\r\n            }\r\n\r\n            \/* On mobile, connect nodes with a simple vertical line *\/\r\n            .org-chart li::before, .org-chart li::after {\r\n                border: none;\r\n            }\r\n            .org-chart ul ul::before {\r\n                border-left: 2px solid var(--line-color);\r\n                left: 0;\r\n                top: -10px;\r\n                height: calc(100% + 10px);\r\n            }\r\n            .org-chart li .node {\r\n                width: 90%;\r\n                margin: 0 auto;\r\n            }\r\n\r\n            .org-chart li > ul {\r\n                padding-left: 20px;\r\n                margin-top: 10px;\r\n            }\r\n            \r\n            .org-chart li:not(:last-child) {\r\n                 border-left: 2px solid var(--line-color);\r\n            }\r\n        }\r\n\r\n    <\/style>\r\n\r\n\r\n<div class=\"org-chart\">\r\n    <ul>\r\n        <li>\r\n            <div class=\"node\" style=\"min-width: 180px; background-color: #E53935\">DEWAN KOMISARIS<\/div>\r\n            <ul>\r\n                <li>\r\n                    <div class=\"node has-children\" style=\"min-width: 180px\">DIREKTUR UTAMA<\/div>\r\n                    <ul>\r\n                        <li>\r\n                            <!-- CHANGE #1: Add the 'collapsed' class here -->\r\n                            <div class=\"node has-children collapsed\" style=\"min-width: 100px; background-color: #00695C\">DIREKTUR OPERASIONAL<\/div>\r\n                            <!-- and add style=\"display: none;\" to the child list below -->\r\n                            <ul style=\"display: none;\">\r\n                                <li><div class=\"node\" style=\"min-width: 180px; background-color: #1976D2\">DIVISI PEMBELIAN<\/div><\/li>\r\n                                <li><div class=\"node\" style=\"min-width: 180px; background-color: #1976D2\">DIVISI PRODUKSI<\/div><\/li>\r\n                                <li><div class=\"node\" style=\"min-width: 180px; background-color: #1976D2\">DIVISI LOGISTIK<\/div><\/li>\r\n                            <\/ul>\r\n                        <\/li>\r\n                        <li>\r\n                            <!-- CHANGE #2: Add the 'collapsed' class here -->\r\n                            <div class=\"node has-children collapsed\" style=\"min-width: 100px; background-color: #00695C\"\">DIREKTUR KEUANGAN & AKUNTANSI<\/div>\r\n                            <!-- and add style=\"display: none;\" to the child list below -->\r\n                            <ul style=\"display: none;\">\r\n                                <li><div class=\"node\" style=\"min-width: 180px; background-color: #1976D2\">DIVISI KEUANGAN & AKUNTANSI<\/div><\/li>\r\n                                <li><div class=\"node\" style=\"min-width: 180px; background-color: #1976D2\">DIVISI ADMINISTRASI UMUM<\/div><\/li>\r\n                                <li><div class=\"node\" style=\"min-width: 180px; background-color: #1976D2\">DIVISI TEKNOLOGI INFORMASI<\/div><\/li>\r\n                            <\/ul>\r\n                        <\/li>\r\n                        <li>\r\n                            <!-- CHANGE #3: Add the 'collapsed' class here -->\r\n                            <div class=\"node has-children collapsed\", style=\"min-width: 100px; background-color: #00695C\"\">DIREKTUR PENJUALAN PEMASARAN<\/div>\r\n                            <!-- and add style=\"display: none;\" to the child list below -->\r\n                            <ul style=\"display: none;\">\r\n                                <li><div class=\"node\" style=\"min-width: 180px; background-color: #1976D2\">DIVISI PERDAGANGAN UMUM<\/div><\/li>\r\n                                <li><div class=\"node\" style=\"min-width: 180px; background-color: #1976D2\">DIVISI PERDAGANGAN MODERN<\/div><\/li>\r\n                            <\/ul>\r\n                        <\/li>\r\n                        <li><div class=\"node\" style=\"min-width: 100px; background-color: #00695C\"\">COMPANY SECRETARY<\/div><\/li>\r\n                        <li><div class=\"node\" style=\"min-width: 100px; background-color: #00695C\">INTERNAL AUDIT<\/div><\/li>\r\n                    <\/ul>\r\n                <\/li>\r\n                <li>\r\n                    <div class=\"node\" style=\"min-width: 180px\">AUDIT COMMITTEE<\/div>\r\n                <\/li>\r\n            <\/ul>\r\n        <\/li>\r\n    <\/ul>\r\n<\/div>\r\n\r\n<!-- jQuery and Bootstrap JS -->\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.7.1.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n\r\n<script>\r\n    $(document).ready(function() {\r\n        \/\/ Target nodes with children and attach a click event\r\n        $('.org-chart .node.has-children').on('click', function(e) {\r\n            \/\/ Prevent event bubbling to parent li elements\r\n            e.stopPropagation(); \r\n            \r\n            \/\/ Find the direct children ul and toggle it with a smooth animation\r\n            var children = $(this).parent('li').find('> ul');\r\n            children.slideToggle('fast');\r\n            \r\n            \/\/ Toggle the 'collapsed' class to change the +\/- icon via CSS\r\n            $(this).toggleClass('collapsed');\r\n        });\r\n    });\r\n<\/script>\r\n\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<\/div>","protected":false},"excerpt":{"rendered":"<p>STRUKTUR ORGANISASI DEWAN KOMISARIS DIREKTUR UTAMA DIREKTUR OPERASIONAL DIVISI PEMBELIAN DIVISI PRODUKSI DIVISI LOGISTIK DIREKTUR KEUANGAN &#038; AKUNTANSI DIVISI KEUANGAN &#038; AKUNTANSI DIVISI ADMINISTRASI UMUM DIVISI TEKNOLOGI INFORMASI DIREKTUR PENJUALAN PEMASARAN DIVISI PERDAGANGAN UMUM DIVISI PERDAGANGAN MODERN SEKRETARIS PERUSAHAAN AUDIT INTERNAL KOMITE AUDIT<\/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-1105","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/topikoki.com\/en\/wp-json\/wp\/v2\/pages\/1105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/topikoki.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/topikoki.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/topikoki.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/topikoki.com\/en\/wp-json\/wp\/v2\/comments?post=1105"}],"version-history":[{"count":22,"href":"https:\/\/topikoki.com\/en\/wp-json\/wp\/v2\/pages\/1105\/revisions"}],"predecessor-version":[{"id":1913,"href":"https:\/\/topikoki.com\/en\/wp-json\/wp\/v2\/pages\/1105\/revisions\/1913"}],"wp:attachment":[{"href":"https:\/\/topikoki.com\/en\/wp-json\/wp\/v2\/media?parent=1105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}