{"id":68,"date":"2026-09-22T16:58:29","date_gmt":"2026-09-22T16:58:29","guid":{"rendered":"https:\/\/studiokotakrasa.my.id\/?page_id=68"},"modified":"2026-09-23T12:20:43","modified_gmt":"2026-09-23T12:20:43","slug":"home-02","status":"publish","type":"page","link":"https:\/\/studiokotakrasa.my.id\/","title":{"rendered":"home 02"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"68\" class=\"elementor elementor-68\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ba8538f e-con-full e-flex e-con e-parent\" data-id=\"ba8538f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1095c8 elementor-widget elementor-widget-html\" data-id=\"c1095c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     STUDIO KOTAK RASA\n     BLOCK 00 \u2014 GLOBAL SETUP\n     ========================================================= -->\n\n<!-- Tailwind CSS -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<!-- Google Fonts -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<link\n    href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap\"\n    rel=\"stylesheet\"\n>\n\n<!-- Font Awesome -->\n<link\n    rel=\"stylesheet\"\n    href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\"\n>\n\n<!-- =========================================================\n     TAILWIND CONFIGURATION\n     ========================================================= -->\n\n<script>\n    tailwind.config = {\n        theme: {\n            extend: {\n\n                colors: {\n                    brand: {\n                        dark: '#0a0a0a',\n                        card: '#141414',\n                        border: '#262626',\n\n                        crimson: '#991b1b',\n                        crimsonHover: '#7f1d1d',\n\n                        gold: '#c5a059',\n                        goldLight: '#e2ca90',\n\n                        text: '#e0e0e0',\n                        muted: '#a3a3a3'\n                    }\n                },\n\n                fontFamily: {\n                    serif: [\n                        'Cormorant Garamond',\n                        'serif'\n                    ],\n\n                    sans: [\n                        'Plus Jakarta Sans',\n                        'sans-serif'\n                    ]\n                }\n\n            }\n        }\n    };\n<\/script>\n\n\n<!-- =========================================================\n     GLOBAL CUSTOM CSS\n     ========================================================= -->\n\n<style>\n\n    \/* ---------------------------------------------------------\n       GLOBAL\n       --------------------------------------------------------- *\/\n\n    html {\n        scroll-behavior: smooth;\n    }\n\n    body {\n        background-color: #0a0a0a;\n        color: #e0e0e0;\n        font-family: 'Plus Jakarta Sans', sans-serif;\n    }\n\n\n    \/* ---------------------------------------------------------\n       CUSTOM SCROLLBAR\n       --------------------------------------------------------- *\/\n\n    ::-webkit-scrollbar {\n        width: 8px;\n    }\n\n    ::-webkit-scrollbar-track {\n        background: #0a0a0a;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        background: #262626;\n        border-radius: 4px;\n    }\n\n    ::-webkit-scrollbar-thumb:hover {\n        background: #991b1b;\n    }\n\n\n    \/* ---------------------------------------------------------\n       GRAIN \/ FILM TEXTURE\n       --------------------------------------------------------- *\/\n\n    .grain-overlay {\n        background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'\/%3E%3C\/svg%3E\");\n    }\n\n\n    \/* ---------------------------------------------------------\n       GOLD GRADIENT TEXT\n       --------------------------------------------------------- *\/\n\n    .gold-gradient-text {\n        background: linear-gradient(\n            135deg,\n            #e2ca90 0%,\n            #c5a059 50%,\n            #9a7b38 100%\n        );\n\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n    }\n\n\n    \/* ---------------------------------------------------------\n       CRIMSON GLOW\n       --------------------------------------------------------- *\/\n\n    .crimson-glow {\n        box-shadow: 0 0 25px rgba(153, 27, 27, 0.25);\n    }\n\n<\/style>\n\n\n<!-- =========================================================\n     GLOBAL BODY WRAPPER\n     ========================================================= -->\n\n<div\n    class=\"fixed inset-0 grain-overlay pointer-events-none z-50\"\n    aria-hidden=\"true\"\n><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-afb4c6e e-con-full e-flex e-con e-parent\" data-id=\"afb4c6e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7260086 elementor-widget elementor-widget-html\" data-id=\"7260086\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     STUDIO KOTAK RASA\n     BLOCK 01 \u2014 HEADER \/ NAVBAR\n     ========================================================= -->\n\n<header\n    id=\"navbar\"\n    class=\"fixed top-0 left-0 w-full z-40 transition-all duration-300 border-b border-transparent\"\n>\n\n    <!-- =====================================================\n         HEADER CONTAINER\n         ===================================================== -->\n\n    <div\n        class=\"max-w-7xl mx-auto px-6 py-4 flex items-center justify-between\"\n    >\n\n        <!-- =================================================\n             BRAND \/ LOGO\n             ================================================= -->\n\n        <a\n            href=\"#\"\n            class=\"flex items-center gap-3 group\"\n            style=\"text-decoration: none !important;\"\n            aria-label=\"Studio Kotak Rasa\"\n        >\n\n            <!-- =================================================\n                 LOGO IMAGE\n                 ================================================= -->\n\n            <div\n                class=\"w-11 h-11 flex items-center justify-center shrink-0\"\n            >\n\n                <img decoding=\"async\"\n                    src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/cropped-Screenshot-110.png\"\n                    alt=\"Logo Studio Kotak Rasa\"\n                    class=\"w-full h-full object-contain transition-transform duration-300 group-hover:scale-105\"\n                >\n\n            <\/div>\n\n\n            <!-- =================================================\n                 BRAND NAME\n                 ================================================= -->\n\n            <div class=\"flex flex-col\">\n\n                <span\n                    class=\"font-serif text-xl tracking-widest text-white font-semibold uppercase leading-tight\"\n                    style=\"text-decoration: none !important;\"\n                >\n                    Studio Kotak Rasa\n                <\/span>\n\n                <span\n                    class=\"text-[9px] uppercase tracking-[0.2em] text-brand-muted\"\n                >\n                    \n                <\/span>\n\n            <\/div>\n\n        <\/a>\n\n\n        <!-- =================================================\n             DESKTOP NAVIGATION (Digeser ke kanan)\n             ================================================= -->\n\n        <nav\n            class=\"hidden md:flex items-center space-x-8 text-sm uppercase tracking-widest font-medium ml-auto mr-8\"\n            aria-label=\"Navigasi utama\"\n        >\n\n            <a\n                href=\"#tentang\"\n                class=\"text-brand-muted hover:text-brand-gold transition-colors\"\n                style=\"text-decoration: none !important;\"\n            >\n                Tentang\n            <\/a>\n\n            <a\n                href=\"#portofolio\"\n                class=\"text-brand-muted hover:text-brand-gold transition-colors\"\n                style=\"text-decoration: none !important;\"\n            >\n                Portofolio\n            <\/a>\n\n            <a\n                href=\"#agenda\"\n                class=\"text-brand-muted hover:text-brand-gold transition-colors\"\n                style=\"text-decoration: none !important;\"\n            >\n                Jadwal & Agenda\n            <\/a>\n\n            <a\n                href=\"#kontak\"\n                class=\"text-brand-muted hover:text-brand-gold transition-colors\"\n                style=\"text-decoration: none !important;\"\n            >\n                Kontak\n            <\/a>\n\n        <\/nav>\n\n\n        <!-- =================================================\n             HEADER ACTIONS\n             ================================================= -->\n\n        <div class=\"flex items-center gap-4\">\n\n            <!-- Desktop CTA -->\n            <a\n                href=\"#kontak\"\n                class=\"hidden sm:inline-flex items-center gap-2 text-xs uppercase tracking-widest bg-brand-crimson hover:bg-brand-crimsonHover text-white px-5 py-2.5 rounded-none border border-red-900\/50 transition-all duration-300 crimson-glow\"\n                style=\"text-decoration: none !important;\"\n            >\n\n                <span>\n                    Hubungi Kami\n                <\/span>\n\n                <i\n                    class=\"fa-solid fa-arrow-right text-[10px]\"\n                    aria-hidden=\"true\"\n                ><\/i>\n\n            <\/a>\n\n\n            <!-- Mobile Menu Button -->\n            <button\n                id=\"menuBtn\"\n                type=\"button\"\n                class=\"md:hidden text-2xl text-brand-text focus:outline-none\"\n                aria-label=\"Buka menu\"\n                aria-controls=\"mobileMenu\"\n                aria-expanded=\"false\"\n            >\n\n                <i\n                    class=\"fa-solid fa-bars\"\n                    aria-hidden=\"true\"\n                ><\/i>\n\n            <\/button>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         MOBILE MENU\n         ===================================================== -->\n\n    <div\n        id=\"mobileMenu\"\n        class=\"hidden md:hidden bg-brand-card border-b border-brand-border px-6 py-6 space-y-4\"\n    >\n\n        <a\n            href=\"#tentang\"\n            class=\"block text-brand-muted hover:text-brand-gold uppercase tracking-widest text-sm py-1\"\n            style=\"text-decoration: none !important;\"\n        >\n            Tentang\n        <\/a>\n\n        <a\n            href=\"#portofolio\"\n            class=\"block text-brand-muted hover:text-brand-gold uppercase tracking-widest text-sm py-1\"\n            style=\"text-decoration: none !important;\"\n        >\n            Portofolio\n        <\/a>\n\n        <a\n            href=\"#agenda\"\n            class=\"block text-brand-muted hover:text-brand-gold uppercase tracking-widest text-sm py-1\"\n            style=\"text-decoration: none !important;\"\n        >\n            Jadwal & Agenda\n        <\/a>\n\n        <a\n            href=\"#kontak\"\n            class=\"block text-brand-muted hover:text-brand-gold uppercase tracking-widest text-sm py-1\"\n            style=\"text-decoration: none !important;\"\n        >\n            Kontak\n        <\/a>\n\n\n        <!-- Mobile CTA -->\n        <a\n            href=\"#kontak\"\n            class=\"inline-block w-full text-center text-xs uppercase tracking-widest bg-brand-crimson hover:bg-brand-crimsonHover text-white py-3 mt-2 transition-colors\"\n            style=\"text-decoration: none !important;\"\n        >\n            Hubungi Kami\n        <\/a>\n\n    <\/div>\n\n<\/header>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dc41d48 e-con-full e-flex e-con e-parent\" data-id=\"dc41d48\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e4cc02 elementor-widget elementor-widget-html\" data-id=\"0e4cc02\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     STUDIO KOTAK RASA\n     BLOCK 02 \u2014 HERO (FIXED MOBILE FULLSCREEN YOUTUBE & PHOTO)\n     ========================================================= -->\n\n<section\n    id=\"hero\"\n    class=\"relative min-h-screen flex items-center justify-center pt-24 pb-16 px-6 overflow-hidden bg-brand-bg\"\n>\n\n    <!-- =====================================================\n         BACKGROUND HYBRID (YOUTUBE & FOTO HD DETEKSI SINYAL)\n         ===================================================== -->\n    <div class=\"absolute inset-0 z-0 overflow-hidden pointer-events-none\">\n        \n        <!-- 1. GAMBAR LATAR HD (FOTO FALLBACK \/ SINYAL LEMAH \/ MOBILE IMAGE) -->\n        <div \n            id=\"heroImageBg\" \n            class=\"absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-100 z-10\"\n        >\n            <img decoding=\"async\" \n                src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/DSC08400.jpg\" \n                alt=\"Studio Kotak Rasa Hero Background\" \n                class=\"w-full h-full object-cover object-center\"\n            \/>\n        <\/div>\n\n        <!-- 2. YOUTUBE VIDEO BACKGROUND (SKALA DIPERBESAR DI MOBILE AGAR FULL COVER) -->\n        <div \n            id=\"heroVideoBg\"\n            class=\"absolute top-1\/2 left-1\/2 w-[550%] h-[550%] sm:w-[300%] sm:h-[300%] md:w-[180%] md:h-[180%] lg:w-[125%] lg:h-[125%] -translate-x-1\/2 -translate-y-1\/2 pointer-events-none transition-opacity duration-1000 ease-in-out opacity-0 z-0\"\n        >\n            <iframe \n                id=\"youtubePlayerFrame\"\n                class=\"w-full h-full object-cover pointer-events-none\"\n                src=\"https:\/\/www.youtube.com\/embed\/quR0cSCh4FY?autoplay=1&mute=1&controls=0&loop=1&playlist=quR0cSCh4FY&showinfo=0&rel=0&enablejsapi=1&disablekb=1&modestbranding=1&playsinline=1\" \n                title=\"Studio Kotak Rasa Background Video\"\n                frameborder=\"0\"\n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                allowfullscreen>\n            <\/iframe>\n        <\/div>\n\n        <!-- Overlay Gelap Penyatu Kontras Teks -->\n        <div class=\"absolute inset-0 bg-black\/70 backdrop-blur-[1px] z-20\"><\/div>\n    <\/div>\n\n\n    <!-- =====================================================\n         AMBIENT LIGHTING (EFEK CAHAYA ESTETIK)\n         ===================================================== -->\n    <div\n        class=\"absolute top-1\/4 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[600px] h-[600px] bg-brand-crimson\/20 rounded-full blur-[140px] pointer-events-none z-20\"\n    ><\/div>\n\n    <div\n        class=\"absolute bottom-10 right-10 w-[400px] h-[400px] bg-brand-gold\/10 rounded-full blur-[120px] pointer-events-none z-20\"\n    ><\/div>\n\n\n    <!-- =====================================================\n         HERO CONTENT\n         ===================================================== -->\n    <div\n        class=\"max-w-5xl mx-auto text-center relative z-30 space-y-8\"\n    >\n\n        <!-- Eyebrow -->\n        <div\n            class=\"inline-flex items-center gap-2 px-3 py-1 border border-brand-gold\/30 bg-brand-gold\/5 text-brand-gold text-xs uppercase tracking-[0.25em]\"\n        >\n            <span\n                class=\"w-1.5 h-1.5 rounded-full bg-brand-gold animate-pulse\"\n            ><\/span>\n\n            COLLECTIVE PRODUCTION HOUSE\n        <\/div>\n\n\n        <!-- Main Heading -->\n        <h1\n            class=\"font-serif text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-normal tracking-tight text-white leading-[1.15]\"\n        >\n            STUDIO KOTAK RASA\n        <\/h1>\n\n\n        <!-- Description -->\n        <p\n            class=\"max-w-3xl mx-auto text-brand-muted text-base sm:text-lg leading-relaxed font-light\"\n        >\n            Studio Kotak Rasa hadir sebagai rumah produksi independen dan laboratorium eksplorasi gagasan. Di tanah Yogyakarta, kami menghimpun energi kolektif untuk menerjemahkan imajinasi menjadi karya <strong class=\"text-white font-medium\">film, panggung teater, dan narasi seni<\/strong> yang menggetarkan rasa.\n        <\/p>\n\n\n        <!-- CTA Buttons -->\n        <div\n            class=\"flex flex-col sm:flex-row items-center justify-center gap-4 pt-4\"\n        >\n\n            <a\n                href=\"#portofolio\"\n                class=\"w-full sm:w-auto px-8 py-3.5 bg-brand-crimson hover:bg-brand-crimsonHover text-white text-xs uppercase tracking-widest transition-all duration-300 border border-brand-crimson border-opacity-50 flex items-center justify-center gap-3\"\n                style=\"text-decoration: none !important;\"\n            >\n                <span>Eksplorasi Karya<\/span>\n                <i class=\"fa-solid fa-film\" aria-hidden=\"true\"><\/i>\n            <\/a>\n\n\n            <a\n                href=\"#tentang\"\n                class=\"w-full sm:w-auto px-8 py-3.5 bg-transparent hover:bg-white\/5 text-brand-text text-xs uppercase tracking-widest transition-all duration-300 border border-brand-border flex items-center justify-center gap-3\"\n                style=\"text-decoration: none !important;\"\n            >\n                <span>Filosofi Kami<\/span>\n                <i\n                    class=\"fa-solid fa-compass text-brand-gold\"\n                    aria-hidden=\"true\"\n                ><\/i>\n            <\/a>\n\n        <\/div>\n\n\n        <!-- Statistics -->\n        <div\n            class=\"grid grid-cols-2 md:grid-cols-4 gap-6 pt-16 border-t border-brand-border\/60 max-w-4xl mx-auto text-left\"\n        >\n\n            <div>\n                <div class=\"font-serif text-3xl text-white\">\n                    7+\n                <\/div>\n                <div\n                    class=\"text-xs text-brand-muted uppercase tracking-wider mt-1\"\n                >\n                    Short Film & Dokumenter\n                <\/div>\n            <\/div>\n\n\n            <div>\n                <div class=\"font-serif text-3xl text-white\">\n                    2+\n                <\/div>\n                <div\n                    class=\"text-xs text-brand-muted uppercase tracking-wider mt-1\"\n                >\n                    Pagelaran Teater\n                <\/div>\n            <\/div>\n\n\n            <div>\n                <div class=\"font-serif text-3xl text-white\">\n                    5+\n                <\/div>\n                <div\n                    class=\"text-xs text-brand-muted uppercase tracking-wider mt-1\"\n                >\n                    Story Development\n                <\/div>\n            <\/div>\n\n\n            <div>\n                <div class=\"font-serif text-3xl text-white\">\n                    Yogyakarta\n                <\/div>\n                <div\n                    class=\"text-xs text-brand-muted uppercase tracking-wider mt-1\"\n                >\n                    Pusat Pengkaryaan\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<!-- =========================================================\n     JAVASCRIPT LOGIC (SMART NETWORK BACKGROUND SWITCHER)\n     ========================================================= -->\n<script>\n    document.addEventListener('DOMContentLoaded', function () {\n        const imgBg = document.getElementById('heroImageBg');\n        const videoBg = document.getElementById('heroVideoBg');\n        let isVideoActive = false;\n\n        function showVideo() {\n            if (isVideoActive) return;\n            videoBg.classList.remove('opacity-0', 'z-0');\n            videoBg.classList.add('opacity-100', 'z-10');\n            imgBg.classList.remove('opacity-100', 'z-10');\n            imgBg.classList.add('opacity-0', 'z-0');\n            isVideoActive = true;\n        }\n\n        function showImage() {\n            if (!isVideoActive) return;\n            imgBg.classList.remove('opacity-0', 'z-0');\n            imgBg.classList.add('opacity-100', 'z-10');\n            videoBg.classList.remove('opacity-100', 'z-10');\n            videoBg.classList.add('opacity-0', 'z-0');\n            isVideoActive = false;\n        }\n\n        function checkNetworkAndToggle() {\n            const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;\n            \n            \/\/ Cek jika sinyal internet lambat (2g\/3g) atau mode hemat data aktif\n            if (connection) {\n                const effectiveType = connection.effectiveType;\n                const saveData = connection.saveData;\n\n                if (saveData || effectiveType === '2g' || effectiveType === '3g') {\n                    showImage();\n                    return;\n                }\n            }\n\n            \/\/ Jika sinyal lancar (4g\/wifi), munculkan video YouTube\n            showVideo();\n        }\n\n        \/\/ Jalankan pengecekan sinyal awal saat halaman dimuat\n        checkNetworkAndToggle();\n\n        \/\/ Deteksi perubahan kualitas sinyal secara real-time\n        if (navigator.connection) {\n            navigator.connection.addEventListener('change', checkNetworkAndToggle);\n        }\n\n        \/\/ Deteksi ketersediaan jaringan umum\n        window.addEventListener('online', checkNetworkAndToggle);\n        window.addEventListener('offline', showImage);\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-294238d e-con-full e-flex e-con e-parent\" data-id=\"294238d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b599f2 elementor-widget elementor-widget-html\" data-id=\"3b599f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     STUDIO KOTAK RASA\n     BLOCK 03 \u2014 TENTANG STUDIO (SEAMLESS SLIDER 4 DETIK)\n     ========================================================= -->\n\n<section\n    id=\"tentang\"\n    class=\"py-24 bg-brand-card\/50 border-y border-brand-border relative\"\n>\n\n    <div class=\"max-w-7xl mx-auto px-6\">\n\n        <div\n            class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 items-center\"\n        >\n\n            <!-- =================================================\n                 TEXT CONTENT\n                 ================================================= -->\n\n            <div class=\"lg:col-span-7 space-y-6\">\n\n                <div\n                    class=\"flex items-center gap-3 text-brand-gold text-xs uppercase tracking-[0.2em]\"\n                >\n                    <span class=\"w-8 h-[1px] bg-brand-gold\"><\/span>\n\n                    Tentang Studio Kotak Rasa\n                <\/div>\n\n\n                <h2\n                    class=\"font-serif text-3xl sm:text-5xl text-white font-normal leading-tight\"\n                >\n                    Komitmen Kedisiplinan & Integrity dalam Setiap Detak\n                    Seni Panggung dan Layar\n                <\/h2>\n\n\n                <p\n                    class=\"text-brand-muted leading-relaxed font-light\"\n                >\n                    Berakar di tanah Yogyakarta yang kaya akan nilai\n                    historis dan eksperimentasi,\n                    <strong class=\"text-white\">\n                        Studio Kotak Rasa\n                    <\/strong>\n                    lahir dari gagasan untuk menjembatani tradisi dan\n                    modernitas melalui pengkaryaan audio-visual secara\n                    kontemporer.\n                <\/p>\n\n\n                <p\n                    class=\"text-brand-muted leading-relaxed font-light\"\n                >\n                    Bagi kami, proses kreatif tidak hanya soal estetika\n                    visual, melainkan\n                    <strong class=\"text-white\">\n                        kedisiplinan tinggi\n                    <\/strong>\n                    dalam penggarapan pagelaran pameran, riset cerita\n                    teater, hingga eksekusi produksi film. Kami memperlakukan\n                    setiap proyek budaya sebagai medium eksplorasi sosial\n                    yang relevan dan bernyawa.\n                <\/p>\n\n\n                <!-- Feature Cards -->\n                <div\n                    class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4\"\n                >\n\n                    <!-- Feature 1 -->\n                    <div\n                        class=\"p-4 bg-brand-dark border border-brand-border flex items-start gap-3\"\n                    >\n\n                        <i\n                            class=\"fa-solid fa-masks-theater text-brand-crimson text-xl mt-1\"\n                            aria-hidden=\"true\"\n                        ><\/i>\n\n                        <div>\n\n                            <h4\n                                class=\"text-white text-sm font-semibold uppercase tracking-wider\"\n                            >\n                                Teater Presisi\n                            <\/h4>\n\n                            <p\n                                class=\"text-xs text-brand-muted mt-1\"\n                            >\n                                Latihan terstruktur, dramaturgi matang,\n                                dan kedisiplinan panggung.\n                            <\/p>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <!-- Feature 2 -->\n                    <div\n                        class=\"p-4 bg-brand-dark border border-brand-border flex items-start gap-3\"\n                    >\n\n                        <i\n                            class=\"fa-solid fa-camera-retro text-brand-gold text-xl mt-1\"\n                            aria-hidden=\"true\"\n                        ><\/i>\n\n                        <div>\n\n                            <h4\n                                class=\"text-white text-sm font-semibold uppercase tracking-wider\"\n                            >\n                                Sinema Kontemporer\n                            <\/h4>\n\n                            <p\n                                class=\"text-xs text-brand-muted mt-1\"\n                            >\n                                Pendekatan visual berani dengan akar\n                                bahasa budaya lokal.\n                            <\/p>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 VISUAL (SEAMLESS INFINITE SLIDER - FORCED 4:5 CROP)\n                 ================================================= -->\n\n            <div class=\"lg:col-span-5 relative\">\n\n                <div\n                    class=\"relative border border-brand-border p-3 bg-brand-dark overflow-hidden group\/slider\"\n                >\n\n                    <!-- Frame Utama dengan Aspect Ratio Tetap 4:5 -->\n                    <div\n                        id=\"aboutSliderContainer\"\n                        class=\"aspect-[4\/5] w-full bg-neutral-900 relative overflow-hidden cursor-grab active:cursor-grabbing\"\n                    >\n\n                        <!-- Track Lintasan Slide -->\n                        <div\n                            id=\"sliderTrack\"\n                            class=\"flex w-full h-full\"\n                            style=\"transform: translateX(0%);\"\n                        >\n\n                            <!-- SLIDE 1 -->\n                            <div class=\"w-full h-full flex-shrink-0 relative overflow-hidden\">\n                                <img decoding=\"async\"\n                                    src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/DSC09528-copy.jpg\"\n                                    alt=\"Proses Kreatif 1\"\n                                    class=\"absolute inset-0 w-full h-full object-cover object-center filter grayscale contrast-125 hover:grayscale-0 transition-all duration-700 block\"\n                                    onerror=\"this.src='https:\/\/placehold.co\/800x1000\/141414\/c5a059?text=Studio+Kotak+Rasa+1'\"\n                                >\n                            <\/div>\n\n                            <!-- SLIDE 2 -->\n                            <div class=\"w-full h-full flex-shrink-0 relative overflow-hidden\">\n                                <img decoding=\"async\"\n                                    src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/DSC09047.jpg\"\n                                    alt=\"Proses Kreatif 2\"\n                                    class=\"absolute inset-0 w-full h-full object-cover object-center filter grayscale contrast-125 hover:grayscale-0 transition-all duration-700 block\"\n                                    onerror=\"this.src='https:\/\/placehold.co\/800x1000\/141414\/c5a059?text=Studio+Kotak+Rasa+2'\"\n                                >\n                            <\/div>\n\n                            <!-- SLIDE 3 (DIPAKSA TER-CROP PENUH) -->\n                            <div class=\"w-full h-full flex-shrink-0 relative overflow-hidden\">\n                                <img decoding=\"async\"\n                                    src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/DSC08877-e1790165948982.jpg\"\n                                    class=\"absolute inset-0 w-full h-full object-cover object-center filter grayscale contrast-125 hover:grayscale-0 transition-all duration-700 block\"\n                                    onerror=\"this.src='https:\/\/placehold.co\/800x1000\/141414\/c5a059?text=Studio+Kotak+Rasa+3'\"\n                                >\n                            <\/div>\n\n                            <!-- SLIDE 4 -->\n                            <div class=\"w-full h-full flex-shrink-0 relative overflow-hidden\">\n                                <img decoding=\"async\"\n                                    src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/DSC08871.jpg\"\n                                    alt=\"Proses Kreatif 4\"\n                                    class=\"absolute inset-0 w-full h-full object-cover object-center filter grayscale contrast-125 hover:grayscale-0 transition-all duration-700 block\"\n                                    onerror=\"this.src='https:\/\/placehold.co\/800x1000\/141414\/c5a059?text=Studio+Kotak+Rasa+4'\"\n                                >\n                            <\/div>\n\n                            <!-- SLIDE 5 -->\n                            <div class=\"w-full h-full flex-shrink-0 relative overflow-hidden\">\n                                <img decoding=\"async\"\n                                    src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/DSC08407.jpg\"\n                                    alt=\"Proses Kreatif 5\"\n                                    class=\"absolute inset-0 w-full h-full object-cover object-center filter grayscale contrast-125 hover:grayscale-0 transition-all duration-700 block\"\n                                    onerror=\"this.src='https:\/\/placehold.co\/800x1000\/141414\/c5a059?text=Studio+Kotak+Rasa+5'\"\n                                >\n                            <\/div>\n\n                            <!-- SLIDE 6 -->\n                            <div class=\"w-full h-full flex-shrink-0 relative overflow-hidden\">\n                                <img decoding=\"async\"\n                                    src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2023-12-19-at-18.18.31-e1790165634821.jpg\"\n                                    alt=\"Proses Kreatif 6\"\n                                    class=\"absolute inset-0 w-full h-full object-cover object-center filter grayscale contrast-125 hover:grayscale-0 transition-all duration-700 block\"\n                                    onerror=\"this.src='https:\/\/placehold.co\/800x1000\/141414\/c5a059?text=Studio+Kotak+Rasa+6'\"\n                                >\n                            <\/div>\n\n                            <!-- SLIDE 7 -->\n                            <div class=\"w-full h-full flex-shrink-0 relative overflow-hidden\">\n                                <img decoding=\"async\"\n                                    src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/Screenshot-271-e1790165997973.png\"\n                                    alt=\"Proses Kreatif 7\"\n                                    class=\"absolute inset-0 w-full h-full object-cover object-center filter grayscale contrast-125 hover:grayscale-0 transition-all duration-700 block\"\n                                    onerror=\"this.src='https:\/\/placehold.co\/800x1000\/141414\/c5a059?text=Studio+Kotak+Rasa+7'\"\n                                >\n                            <\/div>\n\n                            <!-- SLIDE CLONE (DUPLIKASI GAMBAR 1 DENGAN UKURAN MATANG UNTUK SMOOTH LOOP) -->\n                            <div class=\"w-full h-full flex-shrink-0 relative overflow-hidden\">\n                                <img decoding=\"async\"\n                                    src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/DSC09528-copy.jpg\"\n                                    alt=\"Proses Kreatif 1 Clone\"\n                                    class=\"absolute inset-0 w-full h-full object-cover object-center filter grayscale contrast-125 hover:grayscale-0 transition-all duration-700 block\"\n                                >\n                            <\/div>\n\n                        <\/div>\n\n                        <!-- Gradient Overlay -->\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-black\/90 via-black\/20 to-transparent pointer-events-none z-20\"><\/div>\n\n                        <!-- Text Quote Overlay -->\n                        <div class=\"absolute bottom-6 left-6 right-6 space-y-2 z-30 pointer-events-none\">\n                            <span class=\"text-[10px] uppercase tracking-widest text-brand-gold bg-black\/60 px-2 py-1 border border-brand-gold\/30\">\n                                Latar Belakang Studio\n                            <\/span>\n                            <p class=\"font-serif text-xl text-white italic\">\n                                \"Karsa, Rasa, dan Kedisiplinan dalam Karya.\"\n                            <\/p>\n                        <\/div>\n\n                        <!-- Tombol Navigasi Manual (Kiri & Kanan) -->\n                        <button\n                            id=\"prevSlideBtn\"\n                            type=\"button\"\n                            class=\"absolute left-3 top-1\/2 -translate-y-1\/2 z-40 w-9 h-9 bg-black\/60 hover:bg-black text-brand-gold hover:text-white border border-brand-border flex items-center justify-center transition-all opacity-0 group-hover\/slider:opacity-100 cursor-pointer\"\n                            aria-label=\"Slide Sebelumnya\"\n                        >\n                            \u276e\n                        <\/button>\n\n                        <button\n                            id=\"nextSlideBtn\"\n                            type=\"button\"\n                            class=\"absolute right-3 top-1\/2 -translate-y-1\/2 z-40 w-9 h-9 bg-black\/60 hover:bg-black text-brand-gold hover:text-white border border-brand-border flex items-center justify-center transition-all opacity-0 group-hover\/slider:opacity-100 cursor-pointer\"\n                            aria-label=\"Slide Selanjutnya\"\n                        >\n                            \u276f\n                        <\/button>\n\n                    <\/div>\n\n                    <!-- Indikator Titik (Dots) Navigasi -->\n                    <div id=\"sliderDots\" class=\"flex items-center justify-center gap-2 pt-3 pb-1 bg-brand-dark\">\n                        <button type=\"button\" class=\"dot-btn w-2.5 h-2.5 rounded-full bg-brand-gold transition-all\" aria-label=\"Go to slide 1\"><\/button>\n                        <button type=\"button\" class=\"dot-btn w-2.5 h-2.5 rounded-full bg-brand-border hover:bg-brand-gold\/50 transition-all\" aria-label=\"Go to slide 2\"><\/button>\n                        <button type=\"button\" class=\"dot-btn w-2.5 h-2.5 rounded-full bg-brand-border hover:bg-brand-gold\/50 transition-all\" aria-label=\"Go to slide 3\"><\/button>\n                        <button type=\"button\" class=\"dot-btn w-2.5 h-2.5 rounded-full bg-brand-border hover:bg-brand-gold\/50 transition-all\" aria-label=\"Go to slide 4\"><\/button>\n                        <button type=\"button\" class=\"dot-btn w-2.5 h-2.5 rounded-full bg-brand-border hover:bg-brand-gold\/50 transition-all\" aria-label=\"Go to slide 5\"><\/button>\n                        <button type=\"button\" class=\"dot-btn w-2.5 h-2.5 rounded-full bg-brand-border hover:bg-brand-gold\/50 transition-all\" aria-label=\"Go to slide 6\"><\/button>\n                        <button type=\"button\" class=\"dot-btn w-2.5 h-2.5 rounded-full bg-brand-border hover:bg-brand-gold\/50 transition-all\" aria-label=\"Go to slide 7\"><\/button>\n                    <\/div>\n\n                <\/div>\n\n                <!-- Decorative Frame -->\n                <div\n                    class=\"absolute -bottom-4 -right-4 w-full h-full border border-brand-crimson\/30 pointer-events-none -z-10\"\n                ><\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<!-- =========================================================\n     JAVASCRIPT LOGIC (SEAMLESS INFINITE LOOP 4 DETIK)\n     ========================================================= -->\n<script>\n    document.addEventListener('DOMContentLoaded', function () {\n        const sliderTrack = document.getElementById('sliderTrack');\n        const dots = document.querySelectorAll('.dot-btn');\n        const prevBtn = document.getElementById('prevSlideBtn');\n        const nextBtn = document.getElementById('nextSlideBtn');\n        const sliderContainer = document.getElementById('aboutSliderContainer');\n\n        let currentIndex = 0;\n        const totalRealSlides = 7;\n        let slideInterval = null;\n        const intervalTime = 4000; \/\/ DURASI DIPERLAMBAT MENJADI 4 DETIK (4000ms)\n        let isTransitioning = false;\n\n        function updateDots(index) {\n            const activeIndex = index % totalRealSlides;\n            dots.forEach((dot, i) => {\n                if (i === activeIndex) {\n                    dot.classList.remove('bg-brand-border');\n                    dot.classList.add('bg-brand-gold', 'w-5');\n                } else {\n                    dot.classList.remove('bg-brand-gold', 'w-5');\n                    dot.classList.add('bg-brand-border', 'w-2.5');\n                }\n            });\n        }\n\n        function moveToSlide(index, duration = 800) {\n            if (isTransitioning) return;\n            isTransitioning = true;\n\n            if (duration > 0) {\n                sliderTrack.style.transition = `transform ${duration}ms cubic-bezier(0.25, 1, 0.5, 1)`;\n            } else {\n                sliderTrack.style.transition = 'none';\n            }\n\n            sliderTrack.style.transform = `translateX(-${index * 100}%)`;\n            currentIndex = index;\n            updateDots(currentIndex);\n\n            setTimeout(() => {\n                \/\/ Trik Seamless Reset saat mencapai Slide Clone\n                if (currentIndex === totalRealSlides) {\n                    sliderTrack.style.transition = 'none';\n                    sliderTrack.style.transform = 'translateX(0%)';\n                    currentIndex = 0;\n                }\n                isTransitioning = false;\n            }, duration);\n        }\n\n        function nextSlide() {\n            if (isTransitioning) return;\n            if (currentIndex >= totalRealSlides) {\n                sliderTrack.style.transition = 'none';\n                sliderTrack.style.transform = 'translateX(0%)';\n                currentIndex = 0;\n                \/\/ Force Repaint Browser\n                sliderTrack.offsetHeight; \n            }\n            moveToSlide(currentIndex + 1, 800);\n        }\n\n        function prevSlide() {\n            if (isTransitioning) return;\n            if (currentIndex === 0) {\n                sliderTrack.style.transition = 'none';\n                sliderTrack.style.transform = `translateX(-${totalRealSlides * 100}%)`;\n                currentIndex = totalRealSlides;\n                \/\/ Force Repaint Browser\n                sliderTrack.offsetHeight; \n            }\n            moveToSlide(currentIndex - 1, 800);\n        }\n\n        function startTimer() {\n            if (!slideInterval) {\n                slideInterval = setInterval(nextSlide, intervalTime);\n            }\n        }\n\n        function stopTimer() {\n            clearInterval(slideInterval);\n            slideInterval = null;\n        }\n\n        \/\/ Inisialisasi Pertama\n        updateDots(0);\n        startTimer();\n\n        \/\/ Event listener Tombol Manual\n        if (nextBtn) {\n            nextBtn.addEventListener('click', function (e) {\n                e.stopPropagation();\n                stopTimer();\n                nextSlide();\n                startTimer();\n            });\n        }\n\n        if (prevBtn) {\n            prevBtn.addEventListener('click', function (e) {\n                e.stopPropagation();\n                stopTimer();\n                prevSlide();\n                startTimer();\n            });\n        }\n\n        \/\/ Klik Indikator Dots\n        dots.forEach((dot, index) => {\n            dot.addEventListener('click', function () {\n                if (isTransitioning) return;\n                stopTimer();\n                moveToSlide(index, 800);\n                startTimer();\n            });\n        });\n\n        \/\/ Pause otomatis saat mouse menempel\n        sliderContainer.addEventListener('mouseenter', stopTimer);\n        sliderContainer.addEventListener('mouseleave', startTimer);\n\n        \/\/ Touch Swipe Gesture untuk HP & Tablet\n        let touchStartX = 0;\n        let touchEndX = 0;\n\n        sliderContainer.addEventListener('touchstart', function (e) {\n            touchStartX = e.changedTouches[0].screenX;\n            stopTimer();\n        }, { passive: true });\n\n        sliderContainer.addEventListener('touchend', function (e) {\n            touchEndX = e.changedTouches[0].screenX;\n            handleSwipe();\n            startTimer();\n        }, { passive: true });\n\n        function handleSwipe() {\n            const threshold = 35;\n            if (touchEndX < touchStartX - threshold) {\n                nextSlide();\n            } else if (touchEndX > touchStartX + threshold) {\n                prevSlide();\n            }\n        }\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8786866 e-con-full e-flex e-con e-parent\" data-id=\"8786866\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0951792 elementor-widget elementor-widget-html\" data-id=\"0951792\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     STUDIO KOTAK RASA\n     BLOCK 05 \u2014 PORTOFOLIO\n     ========================================================= -->\n\n<section\n    id=\"portofolio\"\n    class=\"py-24 bg-brand-card\/30 border-t border-brand-border relative\"\n>\n\n    <div class=\"max-w-7xl mx-auto px-6\">\n\n        <!-- Header Section -->\n        <div\n            class=\"flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6\"\n        >\n\n            <div>\n\n                <div\n                    class=\"flex items-center gap-2 text-brand-gold text-xs uppercase tracking-[0.2em] mb-2\"\n                >\n                    <span class=\"w-6 h-[1px] bg-brand-gold\"><\/span>\n\n                    Arsip Pengkaryaan\n                <\/div>\n\n\n                <h2\n                    class=\"font-serif text-3xl sm:text-5xl text-white\"\n                >\n                    Portofolio & Proyek Selected\n                <\/h2>\n\n            <\/div>\n\n\n            <!-- Filter Buttons -->\n            <div\n                class=\"flex flex-wrap gap-2 text-xs uppercase tracking-wider\"\n            >\n\n                <button\n                    type=\"button\"\n                    onclick=\"filterPortfolio('all')\"\n                    class=\"portfolio-btn active px-4 py-2 border border-brand-gold bg-brand-gold text-black font-semibold transition-all cursor-pointer\"\n                    data-filter=\"all\"\n                >\n                    Semua\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    onclick=\"filterPortfolio('film')\"\n                    class=\"portfolio-btn px-4 py-2 border border-brand-border text-brand-muted hover:border-brand-gold transition-all cursor-pointer\"\n                    data-filter=\"film\"\n                >\n                    Film & Dok\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    onclick=\"filterPortfolio('teater')\"\n                    class=\"portfolio-btn px-4 py-2 border border-brand-border text-brand-muted hover:border-brand-gold transition-all cursor-pointer\"\n                    data-filter=\"teater\"\n                >\n                    Teater\n                <\/button>\n\n                <button\n                    type=\"button\"\n                    onclick=\"filterPortfolio('pameran')\"\n                    class=\"portfolio-btn px-4 py-2 border border-brand-border text-brand-muted hover:border-brand-gold transition-all cursor-pointer\"\n                    data-filter=\"pameran\"\n                >\n                    Pameran\n                <\/button>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- =====================================================\n             PORTFOLIO GRID\n             ===================================================== -->\n\n        <div\n            id=\"portfolioGrid\"\n            class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 items-start\"\n        >\n\n            <!-- =================================================\n                 ITEM 01 \u2014 AUL (POSTER VERTIKAL 3:4)\n                 ================================================= -->\n\n            <div\n                class=\"portfolio-item film bg-brand-dark border border-brand-border overflow-hidden group cursor-pointer flex flex-col justify-between\"\n                style=\"text-decoration: none !important;\"\n                data-title=\"AUL: The Forgotten Wolf\"\n                data-category=\"2026 \u2022 Sinema\"\n                data-desc=\"Film pendek eksplorasi mitologi dan realitas kontemporer di Jawa tengah, menggali relasi manusia dan ingatan kolektif.\"\n                data-img=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/POSTER-AUL-THE-FORGOTTEN-WOLF-Large.jpeg\"\n                data-href=\"https:\/\/studiokotakrasa.my.id\/aul-the-forgotten-wolf\/\"\n            >\n\n                <div\n                    class=\"aspect-[3\/4] bg-neutral-900 relative overflow-hidden\"\n                >\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/POSTER-AUL-THE-FORGOTTEN-WOLF-Large.jpeg\"\n                        alt=\"AUL: The Forgotten Wolf\"\n                        class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-90\"\n                        onerror=\"this.src='https:\/\/placehold.co\/600x800\/141414\/c5a059?text=AUL+Poster'\"\n                    >\n\n                    <div\n                        class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent\"\n                    ><\/div>\n\n                <\/div>\n\n\n                <div class=\"p-6 flex flex-col justify-between flex-grow\">\n\n                    <div>\n                        <div\n                            class=\"text-xs text-brand-gold uppercase tracking-widest mb-1\"\n                        >\n                            2026 \u2022 Sinema\n                        <\/div>\n\n                        <h3\n                            class=\"font-serif text-2xl text-white group-hover:text-brand-gold transition-colors\"\n                            style=\"text-decoration: none !important;\"\n                        >\n                            AUL: The Forgotten Wolf\n                        <\/h3>\n\n                        <p\n                            class=\"text-xs text-brand-muted mt-2 line-clamp-2\"\n                        >\n                            Eksplorasi naratif pendek mengenai mitos serigala\n                            dan isolasi masyarakat modern.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Tombol Petunjuk (More) -->\n                    <div class=\"mt-6 pt-4 border-t border-brand-border\/40 flex items-center justify-between text-xs text-brand-gold font-medium uppercase tracking-wider group-hover:text-white transition-colors\">\n                        <span>Lihat Ringkasan<\/span>\n                        <span class=\"text-base group-hover:translate-x-1 transition-transform\">\u2192<\/span>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 ITEM 02 \u2014 SADRAH (POSTER VERTIKAL 3:4)\n                 ================================================= -->\n\n            <div\n                class=\"portfolio-item film bg-brand-dark border border-brand-border overflow-hidden group cursor-pointer flex flex-col justify-between\"\n                style=\"text-decoration: none !important;\"\n                data-title=\"SADRAH Poem of Blood\"\n                data-category=\"2024 \u2022 Sinema\"\n                data-desc=\"Sinematografi bertema refleksi penderitaan, ritus rasa, dan pasrah kultural dalam lanskap visual Yogyakarta.\"\n                data-img=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/Poater-sadrah-ss.png\"\n                data-href=\"https:\/\/studiokotakrasa.my.id\/sadrah-poem-of-blood\/\"\n            >\n\n                <div\n                    class=\"aspect-[3\/4] bg-neutral-900 relative overflow-hidden\"\n                >\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/Poater-sadrah-ss.png\"\n                        alt=\"SADRAH Poem of Blood\"\n                        class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-90\"\n                        onerror=\"this.src='https:\/\/placehold.co\/600x800\/141414\/c5a059?text=SADRAH+Poster'\"\n                    >\n\n                    <div\n                        class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent\"\n                    ><\/div>\n\n                <\/div>\n\n\n                <div class=\"p-6 flex flex-col justify-between flex-grow\">\n\n                    <div>\n                        <div\n                            class=\"text-xs text-brand-gold uppercase tracking-widest mb-1\"\n                        >\n                            2024 \u2022 Sinema\n                        <\/div>\n\n                        <h3\n                            class=\"font-serif text-2xl text-white group-hover:text-brand-gold transition-colors\"\n                            style=\"text-decoration: none !important;\"\n                        >\n                            SADRAH \"Poem of Blood\"\n                        <\/h3>\n\n                        <p\n                            class=\"text-xs text-brand-muted mt-2 line-clamp-2\"\n                        >\n                            Puisi visual tentang kepasrahan dan penerimaan\n                            luka sejarah lokal.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Tombol Petunjuk (More) -->\n                    <div class=\"mt-6 pt-4 border-t border-brand-border\/40 flex items-center justify-between text-xs text-brand-gold font-medium uppercase tracking-wider group-hover:text-white transition-colors\">\n                        <span>Lihat Ringkasan<\/span>\n                        <span class=\"text-base group-hover:translate-x-1 transition-transform\">\u2192<\/span>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 ITEM 03 \u2014 TARAWANGSA (POSTER VERTIKAL 3:4)\n                 ================================================= -->\n\n            <div\n                class=\"portfolio-item film bg-brand-dark border border-brand-border overflow-hidden group cursor-pointer flex flex-col justify-between\"\n                style=\"text-decoration: none !important;\"\n                data-title=\"The Silent Sound of Tarawangsa\"\n                data-category=\"2024 \u2022 Dokumenter\"\n                data-desc=\"Dokumenter riset musik sakral dan ekspresi vokal tradisional dalam koridor budaya Jawa-Sunda.\"\n                data-img=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/ccc5b0c5f4-poster.jpg\"\n                data-href=\"https:\/\/studiokotakrasa.my.id\/tarawangsa-documentary\/\"\n            >\n\n                <div\n                    class=\"aspect-[3\/4] bg-neutral-900 relative overflow-hidden\"\n                >\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/studiokotakrasa.my.id\/wp-content\/uploads\/2026\/09\/ccc5b0c5f4-poster.jpg\"\n                        alt=\"Tarawangsa Documentary\"\n                        class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-90\"\n                        onerror=\"this.src='https:\/\/placehold.co\/600x800\/141414\/c5a059?text=Tarawangsa+Poster'\"\n                    >\n\n                    <div\n                        class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent\"\n                    ><\/div>\n\n                <\/div>\n\n\n                <div class=\"p-6 flex flex-col justify-between flex-grow\">\n\n                    <div>\n                        <div\n                            class=\"text-xs text-brand-gold uppercase tracking-widest mb-1\"\n                        >\n                            2024 \u2022 Dokumenter\n                        <\/div>\n\n                        <h3\n                            class=\"font-serif text-2xl text-white group-hover:text-brand-gold transition-colors\"\n                            style=\"text-decoration: none !important;\"\n                        >\n                            The Silent Sound of Tarawangsa\n                        <\/h3>\n\n                        <p\n                            class=\"text-xs text-brand-muted mt-2 line-clamp-2\"\n                        >\n                            Rekaman etnografis visual tentang instrumen mistis\n                            dan keheningan nada.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Tombol Petunjuk (More) -->\n                    <div class=\"mt-6 pt-4 border-t border-brand-border\/40 flex items-center justify-between text-xs text-brand-gold font-medium uppercase tracking-wider group-hover:text-white transition-colors\">\n                        <span>Lihat Ringkasan<\/span>\n                        <span class=\"text-base group-hover:translate-x-1 transition-transform\">\u2192<\/span>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 ITEM 04 \u2014 TEATER (LANDSKAP 16:10)\n                 ================================================= -->\n\n            <div\n                class=\"portfolio-item teater bg-brand-dark border border-brand-border overflow-hidden group cursor-pointer flex flex-col justify-between\"\n                style=\"text-decoration: none !important;\"\n                data-title=\"Pagelaran Teater: Tubuh & Tanah\"\n                data-category=\"2025 \u2022 Seni Panggung\"\n                data-desc=\"Pertunjukan teater eksperimental dengan latihan fisik berdisiplin tinggi selama 6 bulan, memadukan seni gerak dan instalasi tanah.\"\n                data-img=\"https:\/\/images.unsplash.com\/photo-1507676184212-d03ab07a01bf?auto=format&fit=crop&w=800&q=80\"\n                data-href=\"https:\/\/studiokotakrasa.my.id\/teater-tubuh-dan-tanah\/\"\n            >\n\n                <div\n                    class=\"aspect-[16\/10] bg-neutral-900 relative overflow-hidden\"\n                >\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/images.unsplash.com\/photo-1507676184212-d03ab07a01bf?auto=format&fit=crop&w=800&q=80\"\n                        alt=\"Pagelaran Teater Tubuh & Tanah\"\n                        class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-80\"\n                        onerror=\"this.src='https:\/\/placehold.co\/800x500\/141414\/c5a059?text=Teater+Tubuh+Tanah'\"\n                    >\n\n                    <div\n                        class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent\"\n                    ><\/div>\n\n                <\/div>\n\n\n                <div class=\"p-6 flex flex-col justify-between flex-grow\">\n\n                    <div>\n                        <div\n                            class=\"text-xs text-brand-gold uppercase tracking-widest mb-1\"\n                        >\n                            2025 \u2022 Seni Panggung\n                        <\/div>\n\n                        <h3\n                            class=\"font-serif text-2xl text-white group-hover:text-brand-gold transition-colors\"\n                            style=\"text-decoration: none !important;\"\n                        >\n                            Tubuh & Tanah\n                        <\/h3>\n\n                        <p\n                            class=\"text-xs text-brand-muted mt-2 line-clamp-2\"\n                        >\n                            Pertunjukan panggung dramatis yang berfokus pada\n                            hubungan manusia dengan ruang pijaknya.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Tombol Petunjuk (More) -->\n                    <div class=\"mt-6 pt-4 border-t border-brand-border\/40 flex items-center justify-between text-xs text-brand-gold font-medium uppercase tracking-wider group-hover:text-white transition-colors\">\n                        <span>Lihat Ringkasan<\/span>\n                        <span class=\"text-base group-hover:translate-x-1 transition-transform\">\u2192<\/span>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 ITEM 05 \u2014 PAMERAN \/ EKSIBISI (LANDSKAP 16:10)\n                 ================================================= -->\n\n            <div\n                class=\"portfolio-item pameran bg-brand-dark border border-brand-border overflow-hidden group cursor-pointer flex flex-col justify-between\"\n                style=\"text-decoration: none !important;\"\n                data-title=\"Pameran Ruang & Rasa\"\n                data-category=\"2025 \u2022 Pameran\"\n                data-desc=\"Eksibisi seni kontemporer merespons ruang galeri tua di Jogja dengan karya gabungan video mapping dan pertunjukan langsung.\"\n                data-img=\"https:\/\/images.unsplash.com\/photo-1531058240690-006c446962d8?auto=format&fit=crop&w=800&q=80\"\n                data-href=\"https:\/\/studiokotakrasa.my.id\/pameran-ruang-dan-rasa\/\"\n            >\n\n                <div\n                    class=\"aspect-[16\/10] bg-neutral-900 relative overflow-hidden\"\n                >\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/images.unsplash.com\/photo-1531058240690-006c446962d8?auto=format&fit=crop&w=800&q=80\"\n                        alt=\"Pameran Ruang Rasa\"\n                        class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-80\"\n                        onerror=\"this.src='https:\/\/placehold.co\/800x500\/141414\/c5a059?text=Ruang+Rasa+Exhibition'\"\n                    >\n\n                    <div\n                        class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent\"\n                    ><\/div>\n\n                <\/div>\n\n\n                <div class=\"p-6 flex flex-col justify-between flex-grow\">\n\n                    <div>\n                        <div\n                            class=\"text-xs text-brand-gold uppercase tracking-widest mb-1\"\n                        >\n                            2025 \u2022 Pameran\n                        <\/div>\n\n                        <h3\n                            class=\"font-serif text-2xl text-white group-hover:text-brand-gold transition-colors\"\n                            style=\"text-decoration: none !important;\"\n                        >\n                            Ruang & Rasa: Kontemporer\n                        <\/h3>\n\n                        <p\n                            class=\"text-xs text-brand-muted mt-2 line-clamp-2\"\n                        >\n                            Pameran lintas disiplin yang memadukan arsip film,\n                            teater mini, dan tata cahaya kontemporer.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Tombol Petunjuk (More) -->\n                    <div class=\"mt-6 pt-4 border-t border-brand-border\/40 flex items-center justify-between text-xs text-brand-gold font-medium uppercase tracking-wider group-hover:text-white transition-colors\">\n                        <span>Lihat Ringkasan<\/span>\n                        <span class=\"text-base group-hover:translate-x-1 transition-transform\">\u2192<\/span>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 ITEM 06 \u2014 MUSIC VIDEO (LANDSKAP 16:10)\n                 ================================================= -->\n\n            <div\n                class=\"portfolio-item film bg-brand-dark border border-brand-border overflow-hidden group cursor-pointer flex flex-col justify-between\"\n                style=\"text-decoration: none !important;\"\n                data-title=\"Sedihmu yang Terlalu Bahagia\"\n                data-category=\"2024 \u2022 Video Musik\"\n                data-desc=\"Visualisasi naratif lagu untuk musisi indie Yogyakarta dengan pendekatan theatrical storytelling.\"\n                data-img=\"https:\/\/images.unsplash.com\/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&w=800&q=80\"\n                data-href=\"https:\/\/studiokotakrasa.my.id\/mv-sedihmu-yang-terlalu-bahagia\/\"\n            >\n\n                <div\n                    class=\"aspect-[16\/10] bg-neutral-900 relative overflow-hidden\"\n                >\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/images.unsplash.com\/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&w=800&q=80\"\n                        alt=\"Video Musik Sedihmu yang Terlalu Bahagia\"\n                        class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-80\"\n                        onerror=\"this.src='https:\/\/placehold.co\/800x500\/141414\/c5a059?text=Music+Video'\"\n                    >\n\n                    <div\n                        class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent\"\n                    ><\/div>\n\n                <\/div>\n\n\n                <div class=\"p-6 flex flex-col justify-between flex-grow\">\n\n                    <div>\n                        <div\n                            class=\"text-xs text-brand-gold uppercase tracking-widest mb-1\"\n                        >\n                            2024 \u2022 Video Musik\n                        <\/div>\n\n                        <h3\n                            class=\"font-serif text-2xl text-white group-hover:text-brand-gold transition-colors\"\n                            style=\"text-decoration: none !important;\"\n                        >\n                            Sedihmu yang Terlalu Bahagia\n                        <\/h3>\n\n                        <p\n                            class=\"text-xs text-brand-muted mt-2 line-clamp-2\"\n                        >\n                            Penggarapan klip musik dengan sinematografi absurd\n                            dan teatrikal.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Tombol Petunjuk (More) -->\n                    <div class=\"mt-6 pt-4 border-t border-brand-border\/40 flex items-center justify-between text-xs text-brand-gold font-medium uppercase tracking-wider group-hover:text-white transition-colors\">\n                        <span>Lihat Ringkasan<\/span>\n                        <span class=\"text-base group-hover:translate-x-1 transition-transform\">\u2192<\/span>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     GLOBAL PORTFOLIO MODAL (ISOLATED Z-INDEX & EVENTS)\n     ========================================================= -->\n\n<div\n    id=\"customPortfolioModal\"\n    style=\"display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 1rem;\"\n>\n    <!-- Modal Card Box -->\n    <div\n        id=\"customModalCard\"\n        class=\"bg-brand-dark border border-brand-border max-w-2xl w-full overflow-hidden shadow-2xl relative\"\n        style=\"max-height: 90vh; overflow-y: auto;\"\n    >\n        <!-- Tombol Silang (X) untuk Tutup -->\n        <button\n            id=\"closeModalIconBtn\"\n            type=\"button\"\n            class=\"absolute top-4 right-4 z-50 text-white bg-black\/70 hover:bg-black w-10 h-10 flex items-center justify-center rounded-full transition-all cursor-pointer border border-white\/30\"\n            aria-label=\"Tutup Pop-Up\"\n            style=\"font-size: 18px; font-weight: bold; line-height: 1;\"\n        >\n            \u2715\n        <\/button>\n\n        <!-- Preview Gambar di Pop-Up -->\n        <div class=\"relative h-60 sm:h-80 w-full overflow-hidden bg-neutral-900\">\n            <img decoding=\"async\"\n                id=\"customModalImage\"\n                src=\"\"\n                alt=\"Detail Karya\"\n                class=\"w-full h-full object-cover\"\n            >\n            <div class=\"absolute inset-0 bg-gradient-to-t from-brand-dark via-transparent to-black\/30\"><\/div>\n        <\/div>\n\n        <!-- Konten Informasi Pop-Up -->\n        <div class=\"p-6 sm:p-8\">\n            <span\n                id=\"customModalCategory\"\n                class=\"text-xs text-brand-gold uppercase tracking-[0.2em] font-semibold block mb-1\"\n            >\n                Kategori Proyek\n            <\/span>\n\n            <h3\n                id=\"customModalTitle\"\n                class=\"font-serif text-2xl sm:text-3xl text-white mb-4\"\n                style=\"text-decoration: none !important;\"\n            >\n                Judul Proyek\n            <\/h3>\n\n            <p\n                id=\"customModalDescription\"\n                class=\"text-sm text-brand-muted leading-relaxed mb-8\"\n            >\n                Deskripsi ringkas proyek.\n            <\/p>\n\n            <!-- Area Tombol Aksi -->\n            <div class=\"flex flex-col sm:flex-row items-center justify-end gap-3 pt-4 border-t border-brand-border\/50\">\n                <!-- Tombol Tutup Bawah -->\n                <button\n                    id=\"closeModalTextBtn\"\n                    type=\"button\"\n                    class=\"w-full sm:w-auto px-6 py-2.5 border border-brand-border text-brand-muted hover:text-white text-xs uppercase tracking-widest transition-colors cursor-pointer bg-transparent\"\n                >\n                    Tutup\n                <\/button>\n\n                <!-- Tombol Detail Ke Page Terpisah -->\n                <a\n                    id=\"customModalDetailBtn\"\n                    href=\"#\"\n                    target=\"_blank\"\n                    class=\"w-full sm:w-auto px-6 py-2.5 bg-brand-crimson hover:bg-brand-crimsonHover text-white text-xs uppercase tracking-widest transition-all flex items-center justify-center gap-2 cursor-pointer\"\n                    style=\"text-decoration: none !important;\"\n                >\n                    <span>Lihat Detail Proyek<\/span>\n                    <span class=\"text-xs\">\u2192<\/span>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<!-- =========================================================\n     JAVASCRIPT LOGIC (ROBUST EVENT LISTENERS)\n     ========================================================= -->\n\n<script>\n    document.addEventListener('DOMContentLoaded', function () {\n        const modal = document.getElementById('customPortfolioModal');\n        const modalCard = document.getElementById('customModalCard');\n        const closeIconBtn = document.getElementById('closeModalIconBtn');\n        const closeTextBtn = document.getElementById('closeModalTextBtn');\n\n        const modalTitle = document.getElementById('customModalTitle');\n        const modalCategory = document.getElementById('customModalCategory');\n        const modalDesc = document.getElementById('customModalDescription');\n        const modalImg = document.getElementById('customModalImage');\n        const modalDetailBtn = document.getElementById('customModalDetailBtn');\n\n        \/\/ Fungsi Buka Modal\n        function openPortfolioModal(card) {\n            const title = card.getAttribute('data-title') || '';\n            const category = card.getAttribute('data-category') || '';\n            const desc = card.getAttribute('data-desc') || '';\n            const img = card.getAttribute('data-img') || '';\n            const href = card.getAttribute('data-href') || '#';\n\n            modalTitle.innerText = title;\n            modalCategory.innerText = category;\n            modalDesc.innerText = desc;\n            modalImg.src = img;\n\n            if (href && href !== '#') {\n                modalDetailBtn.href = href;\n                modalDetailBtn.style.display = 'inline-flex';\n            } else {\n                modalDetailBtn.style.display = 'none';\n            }\n\n            modal.style.display = 'flex';\n            document.body.style.overflow = 'hidden'; \/\/ Kunci scroll latar belakang\n        }\n\n        \/\/ Fungsi Tutup Modal\n        function closePortfolioModal() {\n            modal.style.display = 'none';\n            document.body.style.overflow = 'auto'; \/\/ Mengembalikan scroll\n        }\n\n        \/\/ Pasang Event Klik pada Setiap Kartu Portofolio\n        const portfolioCards = document.querySelectorAll('.portfolio-item');\n        portfolioCards.forEach(function (card) {\n            card.addEventListener('click', function (e) {\n                e.preventDefault();\n                e.stopPropagation();\n                openPortfolioModal(card);\n            });\n        });\n\n        \/\/ Event listener Tombol X (Silang)\n        if (closeIconBtn) {\n            closeIconBtn.addEventListener('click', function (e) {\n                e.preventDefault();\n                e.stopPropagation();\n                closePortfolioModal();\n            });\n        }\n\n        \/\/ Event listener Tombol Tutup (Teks)\n        if (closeTextBtn) {\n            closeTextBtn.addEventListener('click', function (e) {\n                e.preventDefault();\n                e.stopPropagation();\n                closePortfolioModal();\n            });\n        }\n\n        \/\/ Klik di area luar (overlay) untuk menutup\n        modal.addEventListener('click', function (e) {\n            if (e.target === modal) {\n                closePortfolioModal();\n            }\n        });\n\n        \/\/ Cegah klik di dalam kotak modal menutup dirinya sendiri\n        modalCard.addEventListener('click', function (e) {\n            e.stopPropagation();\n        });\n\n        \/\/ Tutup modal dengan tombol keyboard 'ESC'\n        document.addEventListener('keydown', function (e) {\n            if (e.key === 'Escape' && modal.style.display === 'flex') {\n                closePortfolioModal();\n            }\n        });\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-221883f e-con-full e-flex e-con e-parent\" data-id=\"221883f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8617082 elementor-widget elementor-widget-html\" data-id=\"8617082\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     STUDIO KOTAK RASA\n     BLOCK 06 \u2014 AGENDA\n     ========================================================= -->\n\n<section\n    id=\"agenda\"\n    class=\"py-24 px-6 max-w-7xl mx-auto\"\n>\n\n    <div\n        class=\"grid grid-cols-1 lg:grid-cols-12 gap-12\"\n    >\n\n        <!-- =================================================\n             LEFT \u2014 INTRO\n             ================================================= -->\n\n        <div\n            class=\"lg:col-span-4 space-y-6\"\n        >\n\n            <div\n                class=\"flex items-center gap-2 text-brand-gold text-xs uppercase tracking-[0.2em]\"\n            >\n                <span class=\"w-6 h-[1px] bg-brand-gold\"><\/span>\n\n                Jadwal Pertunjukan\n            <\/div>\n\n\n            <h2\n                class=\"font-serif text-3xl sm:text-5xl text-white\"\n            >\n                Agenda & Kedisiplinan Budaya\n            <\/h2>\n\n\n            <p\n                class=\"text-brand-muted text-sm leading-relaxed font-light\"\n            >\n                Kolektif kami secara rutin menjadwalkan pertunjukan teater\n                panggung, pameran seni rupa, dan pemutaran film independen\n                secara berkala di Yogyakarta dan kota lainnya.\n            <\/p>\n\n\n            <!-- Commitment -->\n            <div\n                class=\"p-4 border border-brand-gold\/30 bg-brand-gold\/5 text-xs text-brand-gold space-y-2\"\n            >\n\n                <p\n                    class=\"font-semibold uppercase tracking-wider\"\n                >\n                    <i\n                        class=\"fa-solid fa-calendar-check mr-2\"\n                        aria-hidden=\"true\"\n                    ><\/i>\n\n                    Komitmen Studio\n                <\/p>\n\n                <p\n                    class=\"text-brand-muted font-light\"\n                >\n                    Setiap pagelaran dirancang dengan masa riset dan latihan\n                    intensif untuk menjaga standar artistik tertinggi.\n                <\/p>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- =================================================\n             RIGHT \u2014 TIMELINE\n             ================================================= -->\n\n        <div\n            class=\"lg:col-span-8 space-y-6\"\n        >\n\n            <!-- Agenda 01 -->\n            <div\n                class=\"p-6 bg-brand-card border border-brand-border flex flex-col md:flex-row justify-between md:items-center gap-4 hover:border-brand-gold transition-all duration-300\"\n            >\n\n                <div class=\"space-y-1\">\n\n                    <div class=\"flex items-center gap-3\">\n\n                        <span\n                            class=\"text-xs uppercase tracking-widest text-brand-crimson font-semibold\"\n                        >\n                            Teater Panggung\n                        <\/span>\n\n                        <span\n                            class=\"text-[10px] bg-brand-border text-brand-muted px-2 py-0.5\"\n                        >\n                            Mendatang\n                        <\/span>\n\n                    <\/div>\n\n\n                    <h3\n                        class=\"font-serif text-2xl text-white\"\n                    >\n                        Pagelaran Teater \"Nafas Pertama\"\n                    <\/h3>\n\n\n                    <p\n                        class=\"text-xs text-brand-muted\"\n                    >\n                        Taman Budaya Yogyakarta (TBY) \u2022\n                        Sutradara: Kolektif Kotak Rasa\n                    <\/p>\n\n                <\/div>\n\n\n                <div\n                    class=\"text-left md:text-right border-t md:border-t-0 pt-3 md:pt-0 border-brand-border\"\n                >\n\n                    <div\n                        class=\"text-sm font-serif text-brand-gold\"\n                    >\n                        18 - 20 November 2026\n                    <\/div>\n\n                    <div\n                        class=\"text-xs text-brand-muted\"\n                    >\n                        19:30 WIB\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- Agenda 02 -->\n            <div\n                class=\"p-6 bg-brand-card border border-brand-border flex flex-col md:flex-row justify-between md:items-center gap-4 hover:border-brand-gold transition-all duration-300\"\n            >\n\n                <div class=\"space-y-1\">\n\n                    <div class=\"flex items-center gap-3\">\n\n                        <span\n                            class=\"text-xs uppercase tracking-widest text-brand-gold font-semibold\"\n                        >\n                            Pameran Visual\n                        <\/span>\n\n                        <span\n                            class=\"text-[10px] bg-brand-border text-brand-muted px-2 py-0.5\"\n                        >\n                            Persiapan\n                        <\/span>\n\n                    <\/div>\n\n\n                    <h3\n                        class=\"font-serif text-2xl text-white\"\n                    >\n                        Eksibisi Ruang & Arsip Rasa\n                    <\/h3>\n\n\n                    <p\n                        class=\"text-xs text-brand-muted\"\n                    >\n                        Ruang Galeri Kotak Rasa, Yogyakarta\n                    <\/p>\n\n                <\/div>\n\n\n                <div\n                    class=\"text-left md:text-right border-t md:border-t-0 pt-3 md:pt-0 border-brand-border\"\n                >\n\n                    <div\n                        class=\"text-sm font-serif text-brand-gold\"\n                    >\n                        05 - 12 Desember 2026\n                    <\/div>\n\n                    <div\n                        class=\"text-xs text-brand-muted\"\n                    >\n                        10:00 - 21:00 WIB\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- Agenda 03 -->\n            <div\n                class=\"p-6 bg-brand-card border border-brand-border flex flex-col md:flex-row justify-between md:items-center gap-4 hover:border-brand-gold transition-all duration-300\"\n            >\n\n                <div class=\"space-y-1\">\n\n                    <div class=\"flex items-center gap-3\">\n\n                        <span\n                            class=\"text-xs uppercase tracking-widest text-brand-muted font-semibold\"\n                        >\n                            Pemutaran Film\n                        <\/span>\n\n                        <span\n                            class=\"text-[10px] bg-brand-border text-brand-muted px-2 py-0.5\"\n                        >\n                            Diskusi\n                        <\/span>\n\n                    <\/div>\n\n\n                    <h3\n                        class=\"font-serif text-2xl text-white\"\n                    >\n                        Screening & Diskusi Sinema Budaya\n                    <\/h3>\n\n\n                    <p\n                        class=\"text-xs text-brand-muted\"\n                    >\n                        Bioskop Sonobudoyo, Yogyakarta\n                    <\/p>\n\n                <\/div>\n\n\n                <div\n                    class=\"text-left md:text-right border-t md:border-t-0 pt-3 md:pt-0 border-brand-border\"\n                >\n\n                    <div\n                        class=\"text-sm font-serif text-brand-gold\"\n                    >\n                        15 Januari 2027\n                    <\/div>\n\n                    <div\n                        class=\"text-xs text-brand-muted\"\n                    >\n                        15:00 WIB\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8fa1cac e-con-full e-flex e-con e-parent\" data-id=\"8fa1cac\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f64d9b elementor-widget elementor-widget-html\" data-id=\"7f64d9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     STUDIO KOTAK RASA\n     BLOCK 07 \u2014 KONTAK (WHATSAPP SYSTEM)\n     ========================================================= -->\n\n<section\n    id=\"kontak\"\n    class=\"py-24 bg-brand-card\/60 border-t border-brand-border relative\"\n>\n\n    <div class=\"max-w-7xl mx-auto px-6\">\n\n        <div\n            class=\"grid grid-cols-1 lg:grid-cols-12 gap-12\"\n        >\n\n            <!-- =================================================\n                 CONTACT INFO\n                 ================================================= -->\n\n            <div\n                class=\"lg:col-span-5 space-y-8\"\n            >\n\n                <div>\n\n                    <div\n                        class=\"flex items-center gap-2 text-brand-gold text-xs uppercase tracking-[0.2em] mb-2\"\n                    >\n                        <span class=\"w-6 h-[1px] bg-brand-gold\"><\/span>\n\n                        Kolaborasi & Ruang Sapa\n                    <\/div>\n\n\n                    <h2\n                        class=\"font-serif text-4xl text-white\"\n                    >\n                        Mari Berdiskusi & Berkarya Bersama\n                    <\/h2>\n\n\n                    <p\n                        class=\"text-brand-muted text-sm mt-4 leading-relaxed font-light\"\n                    >\n                        Apakah Anda ingin berkolaborasi dalam produksi film,\n                        merancang pertunjukan teater, kurasi pameran, atau\n                        sekadar berdiskusi mengenai proyek budaya kontemporer?\n                        Hubungi tim kami.\n                    <\/p>\n\n                <\/div>\n\n\n                <!-- Contact Details -->\n                <div\n                    class=\"space-y-4 text-sm\"\n                >\n\n                    <!-- Location -->\n                    <div\n                        class=\"flex items-start gap-4\"\n                    >\n\n                        <div\n                            class=\"w-8 h-8 bg-brand-dark border border-brand-border flex items-center justify-center text-brand-gold shrink-0\"\n                        >\n                            <i\n                                class=\"fa-solid fa-location-dot\"\n                                aria-hidden=\"true\"\n                            ><\/i>\n                        <\/div>\n\n                        <div>\n\n                            <h4\n                                class=\"text-white font-medium\"\n                            >\n                                Lokasi Studio\n                            <\/h4>\n\n                            <p\n                                class=\"text-brand-muted text-xs\"\n                            >\n                                DI Yogyakarta, Indonesia\n                            <\/p>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <!-- Email -->\n                    <div\n                        class=\"flex items-start gap-4\"\n                    >\n\n                        <div\n                            class=\"w-8 h-8 bg-brand-dark border border-brand-border flex items-center justify-center text-brand-gold shrink-0\"\n                        >\n                            <i\n                                class=\"fa-solid fa-envelope\"\n                                aria-hidden=\"true\"\n                            ><\/i>\n                        <\/div>\n\n                        <div>\n\n                            <h4\n                                class=\"text-white font-medium\"\n                            >\n                                Email Kontak\n                            <\/h4>\n\n                            <a\n                                href=\"mailto:studiokotakrasa@gmail.com\"\n                                class=\"text-brand-muted text-xs hover:text-brand-gold transition-colors\"\n                                style=\"text-decoration: none !important;\"\n                            >\n                                studiokotakrasa@gmail.com\n                            <\/a>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <!-- Social Media -->\n                    <div\n                        class=\"flex items-start gap-4\"\n                    >\n\n                        <div\n                            class=\"w-8 h-8 bg-brand-dark border border-brand-border flex items-center justify-center text-brand-gold shrink-0\"\n                        >\n                            <i\n                                class=\"fa-solid fa-share-nodes\"\n                                aria-hidden=\"true\"\n                            ><\/i>\n                        <\/div>\n\n                        <div>\n\n                            <h4\n                                class=\"text-white font-medium\"\n                            >\n                                Media Sosial\n                            <\/h4>\n\n                            <div\n                                class=\"flex gap-4 mt-2 text-brand-muted\"\n                            >\n\n                                <a\n                                    href=\"https:\/\/www.instagram.com\/studiokotakrasa\"\n                                    target=\"_blank\"\n                                    rel=\"noopener noreferrer\"\n                                    aria-label=\"Instagram Studio Kotak Rasa\"\n                                    class=\"hover:text-brand-gold transition-colors\"\n                                    style=\"text-decoration: none !important;\"\n                                >\n                                    <i\n                                        class=\"fa-brands fa-instagram text-lg\"\n                                        aria-hidden=\"true\"\n                                    ><\/i>\n                                <\/a>\n\n\n                                <a\n                                    href=\"#\"\n                                    aria-label=\"YouTube\"\n                                    class=\"hover:text-brand-gold transition-colors\"\n                                    style=\"text-decoration: none !important;\"\n                                >\n                                    <i\n                                        class=\"fa-brands fa-youtube text-lg\"\n                                        aria-hidden=\"true\"\n                                    ><\/i>\n                                <\/a>\n\n\n                                <a\n                                    href=\"#\"\n                                    aria-label=\"Vimeo\"\n                                    class=\"hover:text-brand-gold transition-colors\"\n                                    style=\"text-decoration: none !important;\"\n                                >\n                                    <i\n                                        class=\"fa-brands fa-vimeo-v text-lg\"\n                                        aria-hidden=\"true\"\n                                    ><\/i>\n                                <\/a>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 CONTACT FORM\n                 ================================================= -->\n\n            <div\n                class=\"lg:col-span-7 bg-brand-dark border border-brand-border p-8 relative\"\n            >\n\n                <form\n                    id=\"contactForm\"\n                    onkeydown=\"if(event.key === 'Enter' && event.target.tagName !== 'TEXTAREA') { event.preventDefault(); sendToWhatsApp(); }\"\n                    class=\"space-y-6\"\n                >\n\n                    <!-- Name + Email -->\n                    <div\n                        class=\"grid grid-cols-1 sm:grid-cols-2 gap-6\"\n                    >\n\n                        <div>\n\n                            <label\n                                for=\"contactName\"\n                                class=\"block text-xs uppercase tracking-wider text-brand-muted mb-2\"\n                            >\n                                Nama Lengkap *\n                            <\/label>\n\n                            <input\n                                id=\"contactName\"\n                                name=\"name\"\n                                type=\"text\"\n                                required\n                                autocomplete=\"name\"\n                                class=\"w-full bg-brand-card border border-brand-border px-4 py-3 text-sm text-white focus:outline-none focus:border-brand-gold transition-colors\"\n                                placeholder=\"Nama Anda\"\n                            >\n\n                        <\/div>\n\n\n                        <div>\n\n                            <label\n                                for=\"contactEmail\"\n                                class=\"block text-xs uppercase tracking-wider text-brand-muted mb-2\"\n                            >\n                                Alamat Email *\n                            <\/label>\n\n                            <input\n                                id=\"contactEmail\"\n                                name=\"email\"\n                                type=\"email\"\n                                required\n                                autocomplete=\"email\"\n                                class=\"w-full bg-brand-card border border-brand-border px-4 py-3 text-sm text-white focus:outline-none focus:border-brand-gold transition-colors\"\n                                placeholder=\"email@domain.com\"\n                            >\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <!-- Collaboration -->\n                    <div>\n\n                        <label\n                            for=\"contactField\"\n                            class=\"block text-xs uppercase tracking-wider text-brand-muted mb-2\"\n                        >\n                            Bidang Kolaborasi\n                        <\/label>\n\n                        <select\n                            id=\"contactField\"\n                            name=\"collaboration\"\n                            class=\"w-full bg-brand-card border border-brand-border px-4 py-3 text-sm text-brand-muted focus:outline-none focus:border-brand-gold transition-colors\"\n                        >\n\n                            <option value=\"Produksi Film \/ Dokumenter\">\n                                Produksi Film \/ Dokumenter\n                            <\/option>\n\n                            <option value=\"Pertunjukan Teater \/ Seni Panggung\">\n                                Pertunjukan Teater \/ Seni Panggung\n                            <\/option>\n\n                            <option value=\"Pameran & Kurasi Ruang\">\n                                Pameran & Kurasi Ruang\n                            <\/option>\n\n                            <option value=\"Workshop \/ Program Budaya\">\n                                Workshop \/ Program Budaya\n                            <\/option>\n\n                            <option value=\"Lainnya\">\n                                Lainnya\n                            <\/option>\n\n                        <\/select>\n\n                    <\/div>\n\n\n                    <!-- Message -->\n                    <div>\n\n                        <label\n                            for=\"contactMessage\"\n                            class=\"block text-xs uppercase tracking-wider text-brand-muted mb-2\"\n                        >\n                            Pesan atau Rencana Proyek *\n                        <\/label>\n\n                        <textarea\n                            id=\"contactMessage\"\n                            name=\"message\"\n                            rows=\"4\"\n                            required\n                            class=\"w-full bg-brand-card border border-brand-border px-4 py-3 text-sm text-white focus:outline-none focus:border-brand-gold transition-colors\"\n                            placeholder=\"Tuliskan ide atau pertanyaan Anda...\"\n                        ><\/textarea>\n\n                    <\/div>\n\n\n                    <!-- Submit WhatsApp Button -->\n                    <button\n                        type=\"button\"\n                        onclick=\"sendToWhatsApp()\"\n                        class=\"w-full bg-brand-crimson hover:bg-brand-crimsonHover text-white py-4 text-xs uppercase tracking-widest transition-all duration-300 font-semibold border border-brand-crimson cursor-pointer flex items-center justify-center gap-2\"\n                    >\n                        <i class=\"fa-brands fa-whatsapp text-lg\"><\/i>\n                        <span>Kirim Pesan via WhatsApp<\/span>\n                    <\/button>\n\n                <\/form>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<!-- =========================================================\n     JAVASCRIPT LOGIC (KIRIM DATA KE WHATSAPP)\n     ========================================================= -->\n<script>\n    function sendToWhatsApp() {\n        const name = document.getElementById('contactName').value.trim();\n        const email = document.getElementById('contactEmail').value.trim();\n        const field = document.getElementById('contactField').value;\n        const message = document.getElementById('contactMessage').value.trim();\n\n        \/\/ Validasi input\n        if (!name || !message) {\n            alert('Mohon lengkapi Nama Lengkap dan Pesan Anda terlebih dahulu.');\n            return;\n        }\n\n        \/\/ =========================================================\n        \/\/ GANTI NOMOR DI BAWAH INI DENGAN NOMOR WHATSAPP STUDIO\n        \/\/ Format: Awali dengan kode negara 62 (tanpa tanda + \/ angka 0 di depan)\n        \/\/ Contoh: 6281234567890\n        \/\/ =========================================================\n        const waNumber = \"6287775562531\"; \n\n        \/\/ Merangkai teks pesan yang terformat rapi\n        let text = `Halo Studio Kotak Rasa,%0A%0A`;\n        text += `*Nama:* ${encodeURIComponent(name)}%0A`;\n        if (email) {\n            text += `*Email:* ${encodeURIComponent(email)}%0A`;\n        }\n        text += `*Bidang Kolaborasi:* ${encodeURIComponent(field)}%0A%0A`;\n        text += `*Pesan \/ Rencana Proyek:*%0A${encodeURIComponent(message)}`;\n\n        \/\/ Membuka tautan WhatsApp di tab baru\n        window.open(`https:\/\/wa.me\/${waNumber}?text=${text}`, '_blank');\n    }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f425935 e-con-full e-flex e-con e-parent\" data-id=\"f425935\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e440a47 elementor-widget elementor-widget-html\" data-id=\"e440a47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     PORTFOLIO MODAL POP-UP (DENGAN TOMBOL DETAIL PROYEK)\n     ========================================================= -->\n\n<div\n    id=\"portfolioModal\"\n    class=\"fixed inset-0 z-50 hidden flex items-center justify-center p-4 bg-black\/80 backdrop-blur-sm transition-opacity duration-300\"\n    onclick=\"closeModalOnOverlay(event)\"\n>\n    <div\n        class=\"bg-brand-dark border border-brand-border max-w-2xl w-full overflow-hidden shadow-2xl relative transform transition-all\"\n    >\n        <!-- Tombol Silang (Tutup Modal) -->\n        <button\n            type=\"button\"\n            onclick=\"closeModal()\"\n            class=\"absolute top-4 right-4 z-10 text-white\/70 hover:text-white bg-black\/50 hover:bg-black w-9 h-9 flex items-center justify-center rounded-full transition-colors\"\n            aria-label=\"Tutup Pop-Up\"\n        >\n            <i class=\"fa-solid fa-xmark text-lg\"><\/i>\n        <\/button>\n\n        <!-- Preview Gambar di Pop-Up -->\n        <div class=\"relative h-64 sm:h-80 w-full overflow-hidden bg-neutral-900\">\n            <img decoding=\"async\"\n                id=\"modalImage\"\n                src=\"\"\n                alt=\"Detail Karya\"\n                class=\"w-full h-full object-cover\"\n            >\n            <div class=\"absolute inset-0 bg-gradient-to-t from-brand-dark via-transparent to-black\/30\"><\/div>\n        <\/div>\n\n        <!-- Konten Informasi Pop-Up -->\n        <div class=\"p-6 sm:p-8\">\n            <span\n                id=\"modalCategory\"\n                class=\"text-xs text-brand-gold uppercase tracking-[0.2em] font-semibold block mb-1\"\n            >\n                Kategori Proyek\n            <\/span>\n\n            <h3\n                id=\"modalTitle\"\n                class=\"font-serif text-2xl sm:text-3xl text-white mb-4\"\n                style=\"text-decoration: none !important;\"\n            >\n                Judul Proyek\n            <\/h3>\n\n            <p\n                id=\"modalDescription\"\n                class=\"text-sm text-brand-muted leading-relaxed mb-8\"\n            >\n                Deskripsi ringkas proyek.\n            <\/p>\n\n            <!-- Area Tombol Aksi (Tombol Detail Muncul Di Sini) -->\n            <div class=\"flex flex-col sm:flex-row items-center justify-end gap-3 pt-4 border-t border-brand-border\/50\">\n                <button\n                    type=\"button\"\n                    onclick=\"closeModal()\"\n                    class=\"w-full sm:w-auto px-6 py-2.5 border border-brand-border text-brand-muted hover:text-white text-xs uppercase tracking-widest transition-colors\"\n                >\n                    Tutup\n                <\/button>\n\n                <!-- TOMBOL DETAIL KE PAGE TERPISAH -->\n                <a\n                    id=\"modalDetailBtn\"\n                    href=\"#\"\n                    target=\"_blank\"\n                    class=\"w-full sm:w-auto px-6 py-2.5 bg-brand-crimson hover:bg-brand-crimsonHover text-white text-xs uppercase tracking-widest transition-all flex items-center justify-center gap-2\"\n                    style=\"text-decoration: none !important;\"\n                >\n                    <span>Lihat Detail Proyek<\/span>\n                    <i class=\"fa-solid fa-arrow-right text-[10px]\"><\/i>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- =========================================================\n     JAVASCRIPT LOGIC UNTUK POP-UP MODAL\n     ========================================================= -->\n\n<script>\n    \/\/ Fungsi Buka Modal & Atur Link Detail\n    function openModal(title, category, description, imageUrl, detailUrl) {\n        document.getElementById('modalTitle').innerText = title;\n        document.getElementById('modalCategory').innerText = category;\n        document.getElementById('modalDescription').innerText = description;\n        document.getElementById('modalImage').src = imageUrl;\n        \n        \/\/ Atur link tombol detail\n        const detailBtn = document.getElementById('modalDetailBtn');\n        if (detailUrl && detailUrl !== '#') {\n            detailBtn.href = detailUrl;\n            detailBtn.style.display = 'inline-flex';\n        } else {\n            detailBtn.style.display = 'none'; \/\/ Sembunyikan jika link tidak ada\n        }\n\n        const modal = document.getElementById('portfolioModal');\n        modal.classList.remove('hidden');\n        document.body.style.overflow = 'hidden'; \/\/ Kunci scroll halaman belakang\n    }\n\n    \/\/ Fungsi Tutup Modal\n    function closeModal() {\n        const modal = document.getElementById('portfolioModal');\n        modal.classList.add('hidden');\n        document.body.style.overflow = 'auto'; \/\/ Re-enable scroll halaman\n    }\n\n    \/\/ Tutup jika area gelap di luar pop-up diklik\n    function closeModalOnOverlay(event) {\n        if (event.target.id === 'portfolioModal') {\n            closeModal();\n        }\n    }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-da17fd9 e-con-full e-flex e-con e-parent\" data-id=\"da17fd9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb40332 elementor-widget elementor-widget-html\" data-id=\"fb40332\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     STUDIO KOTAK RASA\n     BLOCK 09 \u2014 JAVASCRIPT GLOBAL\n     ========================================================= -->\n\n<script>\n(function () {\n\n    'use strict';\n\n\n    \/* ========================================================\n       NAVBAR \u2014 SCROLL EFFECT\n       ======================================================== *\/\n\n    const navbar = document.getElementById('navbar');\n\n    if (navbar) {\n\n        const updateNavbar = () => {\n\n            if (window.scrollY > 50) {\n\n                navbar.classList.add(\n                    'bg-brand-dark\/95',\n                    'backdrop-blur-md',\n                    'border-brand-border'\n                );\n\n                navbar.classList.remove(\n                    'border-transparent'\n                );\n\n            } else {\n\n                navbar.classList.remove(\n                    'bg-brand-dark\/95',\n                    'backdrop-blur-md',\n                    'border-brand-border'\n                );\n\n                navbar.classList.add(\n                    'border-transparent'\n                );\n\n            }\n\n        };\n\n\n        window.addEventListener(\n            'scroll',\n            updateNavbar,\n            { passive: true }\n        );\n\n\n        updateNavbar();\n\n    }\n\n\n    \/* ========================================================\n       MOBILE MENU\n       ======================================================== *\/\n\n    const menuBtn = document.getElementById('menuBtn');\n    const mobileMenu = document.getElementById('mobileMenu');\n\n    if (menuBtn && mobileMenu) {\n\n        menuBtn.addEventListener('click', function () {\n\n            const isHidden =\n                mobileMenu.classList.contains('hidden');\n\n            mobileMenu.classList.toggle('hidden');\n\n            menuBtn.setAttribute(\n                'aria-expanded',\n                String(isHidden)\n            );\n\n            menuBtn.setAttribute(\n                'aria-label',\n                isHidden\n                    ? 'Tutup menu'\n                    : 'Buka menu'\n            );\n\n        });\n\n\n        \/* Close mobile menu when navigation link is clicked *\/\n\n        const mobileLinks =\n            mobileMenu.querySelectorAll('a');\n\n        mobileLinks.forEach(function (link) {\n\n            link.addEventListener('click', function () {\n\n                mobileMenu.classList.add('hidden');\n\n                menuBtn.setAttribute(\n                    'aria-expanded',\n                    'false'\n                );\n\n                menuBtn.setAttribute(\n                    'aria-label',\n                    'Buka menu'\n                );\n\n            });\n\n        });\n\n    }\n\n\n    \/* ========================================================\n       PORTFOLIO FILTER\n       ======================================================== *\/\n\n    window.filterPortfolio = function (category) {\n\n        const items =\n            document.querySelectorAll('.portfolio-item');\n\n        const buttons =\n            document.querySelectorAll('.portfolio-btn');\n\n\n        \/* Update active filter button *\/\n\n        buttons.forEach(function (button) {\n\n            if (\n                button.getAttribute('data-filter') === category\n            ) {\n\n                button.classList.add(\n                    'bg-brand-gold',\n                    'text-black',\n                    'font-semibold'\n                );\n\n                button.classList.remove(\n                    'text-brand-muted'\n                );\n\n            } else {\n\n                button.classList.remove(\n                    'bg-brand-gold',\n                    'text-black',\n                    'font-semibold'\n                );\n\n                button.classList.add(\n                    'text-brand-muted'\n                );\n\n            }\n\n        });\n\n\n        \/* Filter portfolio items *\/\n\n        items.forEach(function (item) {\n\n            const shouldShow =\n                category === 'all' ||\n                item.classList.contains(category);\n\n\n            item.style.display =\n                shouldShow ? 'block' : 'none';\n\n        });\n\n    };\n\n\n    \/* ========================================================\n       PROJECT MODAL\n       ======================================================== *\/\n\n    window.openModal = function (\n        title,\n        category,\n        description,\n        imgSrc\n    ) {\n\n        const modal =\n            document.getElementById('projectModal');\n\n        const modalTitle =\n            document.getElementById('modalTitle');\n\n        const modalCategory =\n            document.getElementById('modalCategory');\n\n        const modalDesc =\n            document.getElementById('modalDesc');\n\n        const modalImg =\n            document.getElementById('modalImg');\n\n\n        if (!modal) {\n            return;\n        }\n\n\n        if (modalTitle) {\n            modalTitle.innerText = title;\n        }\n\n\n        if (modalCategory) {\n            modalCategory.innerText = category;\n        }\n\n\n        if (modalDesc) {\n            modalDesc.innerText = description;\n        }\n\n\n        if (modalImg) {\n\n            modalImg.src = imgSrc;\n\n            modalImg.alt = title;\n\n        }\n\n\n        modal.classList.remove('hidden');\n\n        document.body.classList.add('overflow-hidden');\n\n    };\n\n\n    window.closeModal = function () {\n\n        const modal =\n            document.getElementById('projectModal');\n\n\n        if (!modal) {\n            return;\n        }\n\n\n        modal.classList.add('hidden');\n\n        document.body.classList.remove('overflow-hidden');\n\n    };\n\n\n    \/* ========================================================\n       CLOSE MODAL \u2014 CLICK OUTSIDE\n       ======================================================== *\/\n\n    const projectModal =\n        document.getElementById('projectModal');\n\n\n    if (projectModal) {\n\n        projectModal.addEventListener(\n            'click',\n            function (event) {\n\n                if (event.target === projectModal) {\n\n                    window.closeModal();\n\n                }\n\n            }\n        );\n\n    }\n\n\n    \/* ========================================================\n       CLOSE MODAL \u2014 ESCAPE KEY\n       ======================================================== *\/\n\n    document.addEventListener(\n        'keydown',\n        function (event) {\n\n            if (event.key === 'Escape') {\n\n                const modal =\n                    document.getElementById('projectModal');\n\n                if (\n                    modal &&\n                    !modal.classList.contains('hidden')\n                ) {\n\n                    window.closeModal();\n\n                }\n\n            }\n\n        }\n    );\n\n\n    \/* ========================================================\n       CONTACT FORM\n       ======================================================== *\/\n\n    window.handleFormSubmit = function (event) {\n\n        event.preventDefault();\n\n\n        const successBox =\n            document.getElementById('formSuccess');\n\n        const form =\n            document.getElementById('contactForm');\n\n\n        if (!form || !successBox) {\n            return;\n        }\n\n\n        \/*\n         * Saat ini form belum terhubung ke email\/API.\n         * Fungsi ini mempertahankan perilaku source:\n         * tampilkan notifikasi \u2192 reset form \u2192 sembunyikan.\n         *\/\n\n        successBox.classList.remove('hidden');\n\n        form.reset();\n\n\n        setTimeout(function () {\n\n            successBox.classList.add('hidden');\n\n        }, 5000);\n\n    };\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>Studio Kotak Rasa Tentang Portofolio Jadwal &#038; Agenda Kontak Hubungi Kami Tentang Portofolio Jadwal &#038; Agenda Kontak Hubungi Kami COLLECTIVE [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":106,"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":"disabled","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-68","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/studiokotakrasa.my.id\/index.php?rest_route=\/wp\/v2\/pages\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studiokotakrasa.my.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/studiokotakrasa.my.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/studiokotakrasa.my.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studiokotakrasa.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=68"}],"version-history":[{"count":118,"href":"https:\/\/studiokotakrasa.my.id\/index.php?rest_route=\/wp\/v2\/pages\/68\/revisions"}],"predecessor-version":[{"id":212,"href":"https:\/\/studiokotakrasa.my.id\/index.php?rest_route=\/wp\/v2\/pages\/68\/revisions\/212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studiokotakrasa.my.id\/index.php?rest_route=\/wp\/v2\/media\/106"}],"wp:attachment":[{"href":"https:\/\/studiokotakrasa.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}