{"id":3,"date":"2026-06-20T16:25:28","date_gmt":"2026-06-20T16:25:28","guid":{"rendered":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/case-study\/"},"modified":"2026-06-20T16:25:28","modified_gmt":"2026-06-20T16:25:28","slug":"case-study","status":"publish","type":"page","link":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/","title":{"rendered":"Case Study"},"content":{"rendered":"\t\t<div data-elementor-type=\"page\" data-elementor-id=\"3\" class=\"elementor elementor-3 elementor-bc-flex-widget\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9cefb4c elementor-section-full_width elementor-section_stretch elementor-section-height-default elementor-section-height-default\" data-id=\"9cefb4c\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section_stretch&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2d79bf8\" data-id=\"2d79bf8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e49f797 elementor-widget elementor-widget-html\" data-id=\"e49f797\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<div id=\"ca-case-study\" class=\"ca-case-study-wrapper\">\n  <!-- Fonts -->\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n  <style>\n    :root {\n      --cs-bg: #faf8f5;\n      --cs-text-main: #2b2520;\n      --cs-text-muted: #756a60;\n      --cs-accent-cream: #f3ece3;\n      --cs-accent-dark: #3e332a;\n      --cs-font-family: 'Plus Jakarta Sans', sans-serif;\n      --cs-shadow-soft: 0 10px 30px rgba(62, 51, 42, 0.04);\n      --cs-shadow-card: inset -2px -2px 6px rgba(62, 51, 42, 0.02),\n                         inset 2px 2px 6px rgba(255, 255, 255, 0.9),\n                         0 15px 35px rgba(62, 51, 42, 0.04);\n    }\n\n    .ca-case-study-wrapper {\n      background-color: var(--cs-bg);\n      color: var(--cs-text-main);\n      font-family: var(--cs-font-family);\n      min-height: 100vh;\n      padding: 60px 40px;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      gap: 60px;\n    }\n\n    \/* Navigation \/ Header *\/\n    .cs-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid rgba(62, 51, 42, 0.08);\n      padding-bottom: 24px;\n    }\n\n    .cs-back-link {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--cs-text-main);\n      text-decoration: none;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: transform 0.2s ease;\n    }\n\n    .cs-back-link:hover {\n      transform: translateX(-4px);\n    }\n\n    .cs-badge {\n      background-color: var(--cs-accent-cream);\n      border: 1px solid rgba(62, 51, 42, 0.1);\n      border-radius: 20px;\n      padding: 6px 14px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--cs-text-muted);\n    }\n\n    \/* Bento Hero Header Section *\/\n    .cs-hero-section {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      max-width: 800px;\n    }\n\n    .cs-hero-title-row {\n      display: flex;\n      align-items: baseline;\n      gap: 20px;\n    }\n\n    .cs-hero-order {\n      font-size: 32px;\n      font-weight: 300;\n      color: var(--cs-text-muted);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .cs-hero-title {\n      font-size: 64px;\n      font-weight: 700;\n      letter-spacing: -2px;\n      margin: 0;\n      line-height: 1.1;\n    }\n\n    .cs-hero-description {\n      font-size: 18px;\n      line-height: 1.6;\n      color: var(--cs-text-muted);\n      margin: 0;\n    }\n\n    \/* Bento Grid *\/\n    .cs-bento-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      grid-gap: 24px;\n      width: 100%;\n    }\n\n    \/* Base Bento Card *\/\n    .cs-bento-card {\n      background-color: #ffffff;\n      border-radius: 28px;\n      padding: 32px;\n      box-sizing: border-box;\n      box-shadow: var(--cs-shadow-card);\n      border: 1px solid rgba(255, 255, 255, 0.7);\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      transition: all 0.3s ease;\n      min-height: 240px;\n    }\n\n    .cs-bento-card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 20px 40px rgba(62, 51, 42, 0.08);\n    }\n\n    .cs-card-title {\n      font-size: 14px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      color: var(--cs-text-muted);\n      margin-bottom: 16px;\n    }\n\n    .cs-card-content {\n      font-size: 16px;\n      line-height: 1.6;\n      color: var(--cs-text-main);\n    }\n\n    \/* Custom Cards layout spacing matching Bento design *\/\n    .cs-bento-card.col-span-2 {\n      grid-column: span 2;\n    }\n\n    .cs-bento-card.row-span-2 {\n      grid-row: span 2;\n      min-height: 504px;\n    }\n\n    \/* Specific Card Styling variants to match Comptatto mockup *\/\n    .cs-bento-card.style-accent-cream {\n      background-color: var(--cs-accent-cream);\n      border: none;\n    }\n\n    .cs-bento-card.style-accent-dark {\n      background: linear-gradient(135deg, #4c3e34 0%, #2b231d 100%);\n      color: #faf8f5;\n      border: none;\n    }\n\n    .cs-bento-card.style-accent-dark .cs-card-title {\n      color: rgba(250, 248, 245, 0.7);\n    }\n\n    .cs-bento-card.style-accent-dark .cs-card-content {\n      color: #faf8f5;\n    }\n\n    \/* Keycap Mark visualization inside bento *\/\n    .cs-mark-artwork-container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 100px;\n    }\n\n    .cs-mark-artwork {\n      font-size: 64px;\n      font-weight: 700;\n      color: var(--cs-accent-dark);\n      background-color: #ffffff;\n      width: 120px;\n      height: 120px;\n      border-radius: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.05),\n                  inset 4px 4px 10px rgba(255, 255, 255, 0.9),\n                  0 10px 20px rgba(0, 0, 0, 0.03);\n    }\n\n    \/* Stats\/Metrics *\/\n    .cs-stat-number {\n      font-size: 64px;\n      font-weight: 700;\n      color: var(--cs-text-main);\n      line-height: 1;\n      margin-bottom: 8px;\n    }\n\n    \/* Live preview link section *\/\n    .cs-preview-link-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 10px;\n      background-color: var(--cs-text-main);\n      color: #ffffff;\n      padding: 14px 28px;\n      border-radius: 30px;\n      text-decoration: none;\n      font-weight: 600;\n      font-size: 15px;\n      align-self: flex-start;\n      margin-top: 16px;\n      transition: background-color 0.2s ease, transform 0.2s ease;\n    }\n\n    .cs-preview-link-btn:hover {\n      background-color: #000000;\n      transform: translateY(-2px);\n    }\n\n    \/* Scrolling Marquee text *\/\n    .cs-marquee-container {\n      overflow: hidden;\n      white-space: nowrap;\n      border-top: 1px solid rgba(62, 51, 42, 0.08);\n      border-bottom: 1px solid rgba(62, 51, 42, 0.08);\n      padding: 24px 0;\n      width: 100vw;\n      margin-left: calc(-40px);\n    }\n\n    .cs-marquee-content {\n      display: inline-block;\n      animation: marquee 20s linear infinite;\n      font-size: 32px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 2px;\n      color: rgba(62, 51, 42, 0.08);\n    }\n\n    @keyframes marquee {\n      0% { transform: translateX(0%); }\n      100% { transform: translateX(-50%); }\n    }\n\n    \/* Footer styling *\/\n    .cs-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding-top: 40px;\n      border-top: 1px solid rgba(62, 51, 42, 0.08);\n      font-size: 14px;\n      color: var(--cs-text-muted);\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 1024px) {\n      .cs-bento-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n      .cs-bento-card.col-span-2 {\n        grid-column: span 1;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .ca-case-study-wrapper {\n        padding: 40px 20px;\n      }\n      .cs-bento-grid {\n        grid-template-columns: 1fr;\n      }\n      .cs-bento-card.row-span-2 {\n        min-height: auto;\n      }\n      .cs-hero-title {\n        font-size: 40px;\n      }\n      .cs-marquee-container {\n        margin-left: -20px;\n      }\n    }\n  <\/style>\n\n  <!-- Navigation -->\n  <header class=\"cs-header\">\n    <a href=\"https:\/\/lab.chalizaaziz.com\/\" class=\"cs-back-link\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line><polyline points=\"12 19 5 12 12 5\"><\/polyline><\/svg>\n      Back to main\n    <\/a>\n    <span class=\"cs-badge\">Archive<\/span>\n  <\/header>\n\n  <!-- Hero Header -->\n  <section class=\"cs-hero-section\">\n    <div class=\"cs-hero-title-row\">\n      <span class=\"cs-hero-order\">008<\/span>\n      <h1 class=\"cs-hero-title\">Teater Cahaya<\/h1>\n    <\/div>\n    <p class=\"cs-hero-description\">An active project subsite inside the CA Lab @Main multisite network.<\/p>\n  <\/section>\n\n  <!-- Bento Grid -->\n  <section class=\"cs-bento-grid\">\n    <!-- Card A (wide): End-to-End Solutions style -->\n    <div class=\"cs-bento-card col-span-2 style-accent-cream\">\n      <div>\n        <h2 class=\"cs-card-title\">Scope of Work<\/h2>\n        <p class=\"cs-card-content\">Design and engineering of custom web structures, creating user experiences and product logic to fulfill high quality system requirements.<\/p>\n      <\/div>\n      <div class=\"cs-mark-artwork-container\">\n        <div class=\"cs-mark-artwork\">TC<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Card B (square): Project Role -->\n    <div class=\"cs-bento-card\">\n      <div>\n        <h2 class=\"cs-card-title\">Role<\/h2>\n        <p class=\"cs-card-content\">Fullstack Engineer & Product Designer<\/p>\n      <\/div>\n      <div>\n        <h2 class=\"cs-card-title\" style=\"margin-top: 16px;\">Tech Stack<\/h2>\n        <p class=\"cs-card-content\" style=\"font-size:14px; opacity:0.8;\">WordPress, PHP, CSS Grid, Vanilla JS<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Card C (tall): Proof points & value props -->\n    <div class=\"cs-bento-card row-span-2 style-accent-dark\">\n      <div>\n        <h2 class=\"cs-card-title\">Project Goal<\/h2>\n        <p class=\"cs-card-content\" style=\"font-size: 20px; line-height:1.5;\">Delivering reliable digital performance and clean visual identity for users.<\/p>\n      <\/div>\n      <div>\n        <h2 class=\"cs-card-title\">Key Outcome<\/h2>\n        <p class=\"cs-card-content\">Modern responsive styling, cross-device optimized speed, and intuitive navigation logic.<\/p>\n      <\/div>\n      <div>\n        <h2 class=\"cs-card-title\">Archive status<\/h2>\n        <div class=\"cs-stat-number\">100%<\/div>\n        <p class=\"cs-card-content\" style=\"font-size:12px; opacity:0.7;\">Fully deployed and active subsite<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Card D (extra-wide): Core Problem & Link -->\n    <div class=\"cs-bento-card col-span-2\">\n      <div>\n        <h2 class=\"cs-card-title\">Problem & Case Study<\/h2>\n        <p class=\"cs-card-content\">Each project within CA Lab holds a distinct story. This page serves as a placeholder index. You can access the fully functioning live project subsite to view its operational flow and components.<\/p>\n      <\/div>\n      <a href=\"https:\/\/lab.chalizaaziz.com\/teatercahaya\/\" class=\"cs-preview-link-btn\" target=\"_blank\" rel=\"noopener\">\n        Visit Live Site\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n      <\/a>\n    <\/div>\n  <\/section>\n\n  <!-- Marquee Banner -->\n  <div class=\"cs-marquee-container\">\n    <div class=\"cs-marquee-content\">\n      Teater Cahaya &bull; Archive &bull; CA LAB &bull; Teater Cahaya &bull; Archive &bull; CA LAB &bull; Teater Cahaya &bull; Archive &bull; CA LAB &bull; Teater Cahaya &bull; Archive &bull; CA LAB &bull;\n    <\/div>\n  <\/div>\n\n  <!-- Footer -->\n  <footer class=\"cs-footer\">\n    <span>&copy; 2025 CA Lab. All rights reserved.<\/span>\n    <span>Case Study &bull; Teater Cahaya<\/span>\n  <\/footer>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-3","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Case Study - Teater Cahaya<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lab.chalizaaziz.com\/teatercahaya\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study - Teater Cahaya\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lab.chalizaaziz.com\/teatercahaya\/\" \/>\n<meta property=\"og:site_name\" content=\"Teater Cahaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/lab.chalizaaziz.com\\\/teatercahaya\\\/\",\"url\":\"https:\\\/\\\/lab.chalizaaziz.com\\\/teatercahaya\\\/\",\"name\":\"Case Study - Teater Cahaya\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/lab.chalizaaziz.com\\\/teatercahaya\\\/#website\"},\"datePublished\":\"2026-06-20T16:25:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/lab.chalizaaziz.com\\\/teatercahaya\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/lab.chalizaaziz.com\\\/teatercahaya\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/lab.chalizaaziz.com\\\/teatercahaya\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/lab.chalizaaziz.com\\\/teatercahaya\\\/case-study\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/lab.chalizaaziz.com\\\/teatercahaya\\\/#website\",\"url\":\"https:\\\/\\\/lab.chalizaaziz.com\\\/teatercahaya\\\/\",\"name\":\"Teater Cahaya\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/lab.chalizaaziz.com\\\/teatercahaya\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case Study - Teater Cahaya","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/","og_locale":"en_US","og_type":"article","og_title":"Case Study - Teater Cahaya","og_url":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/","og_site_name":"Teater Cahaya","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/","url":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/","name":"Case Study - Teater Cahaya","isPartOf":{"@id":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/#website"},"datePublished":"2026-06-20T16:25:28+00:00","breadcrumb":{"@id":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lab.chalizaaziz.com\/teatercahaya\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/case-study\/"},{"@type":"ListItem","position":2,"name":"Case Study"}]},{"@type":"WebSite","@id":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/#website","url":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/","name":"Teater Cahaya","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/wp-json\/wp\/v2\/pages\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":0,"href":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/wp-json\/wp\/v2\/pages\/3\/revisions"}],"wp:attachment":[{"href":"https:\/\/lab.chalizaaziz.com\/teatercahaya\/wp-json\/wp\/v2\/media?parent=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}