/*
Theme Name: KAMIKAMU STUDIO
Theme URI: http://localhost/temawp
Author: Anda
Author URI: http://localhost/temawp
Description: Tema kustom untuk bisnis IT KAMIKAMU STUDIO.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kamikamustudio
*/

:root {
    --primary-color: #2563eb;
    --secondary-color: #8b5cf6;
    --dark-color: #111827;
    --text-color: #374151;
    --light-bg: #f9fafb;
    --white: #ffffff;
    --green: #10b981;
    --border-color: #e5e7eb;
}

/* Reset & Global */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dark-color);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
}

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center { text-align: center; }
.mt-4 { margin-top: 1.5rem; }
.bg-light { background-color: var(--light-bg); }
.d-inline-block { display: inline-block; }

/* Buttons */
.btn-primary, .btn-outline, .btn-white, .btn-green {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    border: 2px solid var(--primary-color);
}
.btn-primary:hover {
    background-color: transparent;
    color: var(--primary-color);
}

.btn-outline {
    background-color: transparent;
    color: var(--dark-color);
    border: 2px solid var(--border-color);
}
.btn-outline:hover {
    border-color: var(--dark-color);
}

.btn-white {
    background-color: var(--white);
    color: var(--primary-color);
}

.btn-green {
    background-color: var(--green);
    color: var(--white);
}

.btn-link {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Header (Desktop: Fixed, Mobile: Relative/Static) */
.site-header {
    background-color: var(--white);
    position: fixed;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Fix for WordPress Admin Bar (Hanya saat login dan admin bar benar-benar tampil) */
body.admin-bar .site-header {
    top: 32px !important; /* Height of the WordPress admin bar */
}

body:not(.admin-bar) .site-header {
    top: 0 !important;
}

/* Custom Logo Wrapper */
.custom-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara logo dan teks */
}

.custom-logo-wrapper img {
    max-height: 50px;
    width: auto;
    object-fit: contain;
}

.custom-logo-wrapper .site-title-link {
    text-decoration: none;
}

.custom-logo-wrapper .logo-text {
    font-size: 1.5rem;
    font-weight: 700; /* Sedikit diturunkan agar lebih elegan, tidak terlalu tebal */
    color: var(--dark-color); /* Warna dasar default corporate */
    letter-spacing: -0.5px;
    white-space: nowrap;
    text-transform: uppercase; /* Membuat kesan lebih kokoh dan corporate */
}

@media screen and (max-width: 782px) {
    /* Header normal (ikut scroll) di mobile agar tidak menutupi konten / berantakan */
    .site-header {
        position: relative !important;
        top: auto !important;
        box-shadow: none;
        border-bottom: 1px solid #eee;
    }
    
    body.admin-bar .site-header,
    body:not(.admin-bar) .site-header {
        top: auto !important;
    }

    /* Mengubah padding body karena header tidak lagi fixed */
    body {
        padding-top: 0 !important;
    }
}

.header-container-full {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 40px); /* Menyisakan 20px di kiri dan 20px di kanan */
    margin: 0 auto; /* Tengah */
    padding: 0 10px; /* Sedikit padding internal tambahan */
    max-width: none;
    height: 80px;
}

@media screen and (max-width: 782px) {
    .header-container-full {
        width: calc(100% - 20px); /* Lebih rapat di mobile */
        padding: 0 5px;
    }
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
}
.logo-text span {
    color: var(--dark-color);
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.main-navigation ul {
    display: flex;
    gap: 1.5rem;
}

.main-navigation ul li a {
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.95rem;
}

.main-navigation ul li a:hover {
    color: var(--primary-color);
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: var(--dark-color);
    position: absolute;
    transition: transform 0.15s ease;
}
.hamburger-inner { top: 50%; transform: translateY(-50%); }
.hamburger-inner::before { content: ""; top: -10px; }
.hamburger-inner::after { content: ""; bottom: -10px; }

/* Site Padding */
#content {
    padding-top: 80px; /* offset for fixed header */
}

.section-padding {
    padding: 80px 0;
}

.section-header {
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.services-section .section-header {
    gap: 8px;
}

.services-section .section-header h2 {
    margin-bottom: 0;
}

.services-section .section-header p {
    margin-top: 0;
}

/* Hero Section (Cover Background) */
.hero-section-wrapper {
    position: relative;
    width: calc(100% - 40px) !important;
    margin: 40px auto !important;
    max-width: none !important;
}

@media (max-width: 768px) {
    .hero-section-wrapper {
        width: calc(100% - 20px) !important;
        margin: 20px auto !important;
    }
}

.hero-slider-container {
    border-radius: 20px;
    overflow: hidden; /* Mencegah konten keluar dari lengkungan */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.hero-slide-item {
    outline: none !important; /* Hilangkan border bawaan slick */
}

.hero-cover-section {
    padding: 80px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important; /* Radius ditangani oleh parent */
    aspect-ratio: 16 / 9;
}

.hero-cover-section .wp-block-cover__inner-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    z-index: 2;
}

.hero-content-center h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: white;
}

.hero-content-center p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: white;
}

@media (max-width: 768px) {
    .hero-cover-section {
        padding: 60px 20px;
        aspect-ratio: auto; /* Matikan aspect-ratio di mobile */
        min-height: 80vh;
    }
    
    .hero-content-center h1 {
        font-size: 2.5rem;
    }
}

/* Button Outline Putih di atas Background Gambar */
.btn-outline-white .wp-block-button__link {
    background-color: transparent !important;
    color: white !important;
    border: 2px solid white !important;
    transition: all 0.3s ease;
}

.btn-outline-white .wp-block-button__link:hover {
    background-color: white !important;
    color: var(--dark-color) !important;
}

/* Custom Slick Controls untuk Hero Section */
.hero-slider-container .slick-prev,
.hero-slider-container .slick-next {
    z-index: 10;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.hero-slider-container .slick-prev:hover,
.hero-slider-container .slick-next:hover {
    background: var(--primary-color) !important;
}

.hero-slider-container .slick-prev::before,
.hero-slider-container .slick-next::before {
    color: inherit;
}

.hero-slider-container .slick-prev { left: 20px; }
.hero-slider-container .slick-next { right: 20px; }

.hero-slider-container .slick-dots {
    bottom: 20px;
}

.hero-slider-container .slick-dots li button:before {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
}

.hero-slider-container .slick-dots li.slick-active button:before {
    color: white;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.icon-purple { background-color: var(--secondary-color); }
.icon-blue { background-color: var(--primary-color); }
.icon-blue-dark { background-color: #1e3a8a; }
.icon-purple-light { background-color: #a78bfa; }

.content-intro-image {
    width: 100%;
    max-width: none;
    margin: 0 auto 30px;
    padding: 0;
    box-sizing: border-box;
}

.content-intro-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.layanan-item-loop .wp-block-post-content > .content-intro-image,
.layanan-item-loop .content-intro-image {
    display: block !important;
    width: 100%;
    max-width: none;
    margin: 0 auto 30px;
    padding: 0;
    box-sizing: border-box;
}

/* Products */
.product-card-large {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

.product-content {
    padding: 40px;
}

.badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.badge-green { background-color: #d1fae5; color: var(--green); }
.badge-purple { background-color: #ede9fe; color: var(--secondary-color); }

.feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.check-icon {
    color: var(--green);
    margin-right: 8px;
    font-weight: bold;
}

/* Testimonials */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.stars {
    color: #fbbf24;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.quote {
    font-style: italic;
    margin-bottom: 20px;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.avatar.bg-blue { background-color: var(--primary-color); }
.avatar.bg-purple { background-color: var(--secondary-color); }
.avatar.bg-blue-dark { background-color: #1e3a8a; }

.client-info h4 { margin: 0; font-size: 1rem; }
.client-info p { margin: 0; font-size: 0.8rem; color: #6b7280; }

/* CTA Section */
.cta-section {
    background-color: var(--primary-color);
    padding: 80px 0;
    margin-bottom: 60px !important;
    color: white;
}

.cta-section h2 {
    color: white;
}

.cta-section p {
    color: #e0e7ff;
}

/* Custom CTA Button WhatsApp */
.cta-btn-whatsapp .wp-block-button__link {
    background-color: var(--white) !important;
    color: var(--primary-color) !important;
    font-weight: bold;
    border: none;
    box-shadow: none !important;
    padding: 12px 30px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.cta-btn-whatsapp .wp-block-button__link:hover {
    background-color: var(--light-bg) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Newsletter Form */
.newsletter-section {
    background-color: var(--secondary-color);
    padding: 80px 0;
    margin-bottom: 60px !important;
    color: white;
}

.newsletter-section h2,
.newsletter-section p {
    color: white;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 15px;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-form input[type="email"] {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
}

.newsletter-form button {
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

@media (max-width: 576px) {
    .newsletter-form {
        flex-direction: column;
    }
}

/* Footer */
.site-footer {
    background-color: var(--dark-color);
    color: #9ca3af;
    padding: 30px 0 0; /* Kurangi lebih banyak lagi agar tidak ada sisa space kosong berlebih di atas footer */
}

.site-footer .container {
    width: calc(100% - 40px) !important; /* Samakan dengan lebar Hero Section */
    max-width: none !important;
    margin: 0 auto;
    padding: 0 10px;
}

@media (max-width: 768px) {
    .site-footer .container {
        width: calc(100% - 20px) !important;
        padding: 0 5px;
    }
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    align-items: start;
    gap: 40px;
    margin-bottom: 0;
}

.footer-logo {
    color: var(--white);
    font-size: 1.5rem;
}
.footer-logo span { color: var(--primary-color); }

.footer-widget h4 {
    color: var(--white);
    margin-bottom: 20px;
}

.footer-widget ul li {
    margin-bottom: 10px;
}

.footer-widget ul li a {
    color: #9ca3af;
}
.footer-widget ul li a:hover {
    color: var(--white);
}

.site-info {
    border-top: 1px solid #374151;
    margin-top: 30px; /* Samakan ritme jarak antara kolom footer dan area copyright */
    padding-top: 30px; /* Tambah padding atas agar teks tidak mepet dengan garis border atas */
    padding-bottom: 30px; /* Samakan padding bawah dengan padding atas footer */
    text-align: center;
    font-size: 0.9rem;
}

.site-info p {
    margin: 0;
}

/* Pages & Typography */
.page-container {
    padding-top: 60px;
    padding-bottom: 80px;
}

.page-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.pb-0 {
    padding-bottom: 0 !important;
}

/* 
 * Gutenberg Block Editor Styles
 * Override lebar bawaan WordPress agar konten bisa penuh seperti di Beranda
 */

/* Mengatasi masalah lebar konten sempit bawaan block builder WordPress di Laman */
.entry-content,
.entry-content > *,
.entry-content > .wp-block-group,
.entry-content > .wp-block-query:not(.slick-services-slider):not(.home-loop-grid),
.wp-block-query:not(.slick-services-slider):not(.home-loop-grid),
.wp-block-query:not(.slick-services-slider):not(.home-loop-grid) .wp-block-post-template,
.wp-block-query:not(.slick-services-slider):not(.home-loop-grid) .wp-block-post-template li,
.editor-styles-wrapper .wp-block-post-template,
.editor-styles-wrapper .wp-block-post-template li,
.wp-site-blocks .wp-block-group {
    max-width: none !important;
    width: 100% !important;
}

/* Mematikan sifat constrained bawaan dari block builder yang membatasi grid ke 620px */
.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull),
.editor-styles-wrapper .is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull),
.wp-site-blocks .wp-block-group:not(.alignwide):not(.alignfull),
.wp-site-blocks,
main#primary {
    max-width: none !important;
    width: calc(100% - 40px) !important; /* Sedikit space elegan (20px kiri kanan) */
    margin-left: auto !important; /* Pusatkan */
    margin-right: auto !important; /* Pusatkan */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Biarkan elemen alignwide dan alignfull bisa melewati batas container */
.is-layout-constrained > .alignwide,
.editor-styles-wrapper .is-layout-constrained > .alignwide,
.wp-block-group.alignwide,
.wp-site-blocks .wp-block-group.alignwide,
.is-layout-constrained > .alignfull,
.editor-styles-wrapper .is-layout-constrained > .alignfull,
.wp-block-group.alignfull,
.wp-site-blocks .wp-block-group.alignfull {
    max-width: none !important;
    width: 100% !important; /* Biarkan yang sengaja "full" tetap full menempel ujung */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull),
    .editor-styles-wrapper .is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull),
    .wp-site-blocks .wp-block-group:not(.alignwide):not(.alignfull),
    .wp-site-blocks,
    main#primary {
        width: calc(100% - 20px) !important; /* Lebih mepet di mobile (10px kiri kanan) */
    }
}

/* Override khusus untuk slider agar inline styles Slick JS tidak tertimpa !important */
.slick-services-slider .wp-block-post-template,
.slick-services-slider .wp-block-post-template li,
.home-loop-grid .wp-block-post-template,
.home-loop-grid .wp-block-post-template li {
    max-width: none !important;
}

/* 
 * FIX UNTUK PREVIEW EDITOR GUTENBERG
 * Mencegah glitching/bergerak beraturan saat panel Inserter Pola merender banyak block
 */
.block-editor-block-preview__content-iframe .slick-services-slider .wp-block-post-template {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
    overflow: hidden;
}
.block-editor-block-preview__content-iframe .slick-services-slider .wp-block-post-template li {
    width: calc(33.333% - 20px) !important;
    min-width: 250px;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
}
.block-editor-block-preview__content-iframe .slick-carousel-container {
    padding: 0 !important;
}
.block-editor-block-preview__content-iframe .slick-prev,
.block-editor-block-preview__content-iframe .slick-next,
.block-editor-block-preview__content-iframe .slick-dots {
    display: none !important;
}

/* Layanan Row / Item */
.layanan-item {
    margin-bottom: 80px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 80px;
}
.layanan-item:last-child {
    border-bottom: none;
}

/* CSS untuk menyusun Ikon, Judul, Gambar, dan Tabel secara rapi di Laman Layanan (Query Loop) menggunakan Float Native */
.layanan-item-loop {
    display: block !important;
    width: 100%;
    margin-bottom: 80px;
    padding-bottom: 80px;
    border-bottom: 1px solid var(--border-color);
}

.layanan-item-loop:last-child {
    border-bottom: none;
}

/* Gambar dikembalikan ke layout atas-bawah dan rata tengah */
.layanan-item-loop .layanan-image,
.layanan-item-loop .wp-block-post-featured-image {
    display: block;
    margin: 0 auto 30px auto;
    width: 100%;
    max-width: 800px;
    float: none;
}

.layanan-item-loop .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Kembalikan tampilan konten agar sejajar tengah seperti semula */
.layanan-item-loop .wp-block-post-content {
    display: block !important;
    text-align: center; /* Membuat konten teks rata tengah */
}

.layanan-item-loop .wp-block-post-title {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center; /* Membuat judul rata tengah */
}

/* Atur jarak elemen di dalam post content */
.layanan-item-loop .wp-block-post-content > .icon-box,
.layanan-item-loop .icon-box {
    margin-top: 0;
    margin-bottom: 20px;
    display: inline-block; 
}

.layanan-item-loop .wp-block-post-content > p:not(.icon-box) {
    margin-bottom: 34px;
    font-size: 1.1rem;
    text-align: center;
}

.layanan-item-loop .wp-block-post-content > h4,
.layanan-item-loop h4 {
    margin-top: 10px;
    margin-bottom: 22px;
    font-size: 1.2rem;
    text-align: center;
}

.layanan-item-loop .layanan-features {
    margin: 0 auto 48px auto !important;
    text-align: left;
    display: block !important;
    width: max-content !important;
    max-width: 100%;
    list-style-position: inside;
}

.layanan-item-loop .layanan-features li {
    display: block;
    width: 100%;
    text-align: left;
}

.layanan-item-loop .layanan-features + .wp-block-group,
.layanan-item-loop .wp-block-post-content ul:not(.pricing-features) + .wp-block-group {
    margin-top: 56px;
}

/* Pastikan Tabel Harga memecah float agar turun ke bawah gambar (full width) */
.layanan-item-loop .wp-block-post-content > .wp-block-group:last-child,
.layanan-item-loop .wp-block-post-content > .wp-block-kamikamustudio-pricing-table {
    clear: both;
    display: block;
    width: 100%;
    max-width: 100% !important;
    margin-top: 72px;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .layanan-item-loop .layanan-image,
    .layanan-item-loop .wp-block-post-featured-image {
        float: none;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 30px;
    }
}

/* =========================================
   CAROUSEL LAYANAN BERANDA (SLICK CAROUSEL)
   ========================================= */

.slick-carousel-container {
    position: relative;
    width: 100%;
    padding: 0 40px 60px 40px !important; /* Ruang untuk panah di kiri-kanan dan titik di bawah */
    box-sizing: border-box;
}

/* =========================================
   LAMAN BLOG & ARTIKEL
   ========================================= */

.blog-header-section {
    background: linear-gradient(180deg, #ffffff 0%, #fff0f5 100%);
    padding: 100px 0 60px;
}

/* Featured Blog (Slideshow) */
.blog-featured-section {
    padding: 40px 0;
    background-color: #fff0f5;
}

.blog-featured-slider {
    margin-bottom: 0 !important;
}

.featured-blog-card {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    margin: 20px 10px;
}

.featured-blog-image {
    flex: 1;
    min-height: 400px;
    margin: 0 !important;
}

.featured-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px 0 0 20px;
}

.featured-blog-content {
    flex: 1;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-blog-content .badge {
    align-self: flex-start;
    margin-bottom: 20px;
    font-size: 0.85rem;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
}

.featured-blog-content .wp-block-post-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
    line-height: 1.3;
}

.featured-blog-content .wp-block-post-excerpt {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 30px;
}

.blog-meta {
    display: flex;
    gap: 20px;
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 30px;
    align-items: center;
}

.blog-meta .wp-block-post-date,
.blog-meta .wp-block-post-author-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-meta .wp-block-post-date::before {
    content: "📅";
}

.blog-meta .wp-block-post-author-name::before {
    content: "👤";
}

/* Blog Grid (3 Kolom) */
.blog-grid-section {
    background-color: var(--light-bg);
}

.blog-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.blog-card .wp-block-post-featured-image {
    margin: 0 !important;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.blog-card .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-content .badge {
    align-self: flex-start;
    margin-bottom: 15px;
    font-size: 0.75rem;
    padding: 4px 12px;
}

/* Perbaikan Badge untuk Blok Post Terms (Kategori) agar padding pas dengan teks */
.wp-block-post-terms.badge {
    background-color: transparent !important;
    padding: 0 !important;
    gap: 8px;
}

.wp-block-post-terms.badge a {
    background-color: #ede9fe;
    color: var(--secondary-color);
    padding: 6px 16px;
    border-radius: 20px;
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.wp-block-post-terms.badge a:hover {
    background-color: var(--secondary-color);
    color: white;
}

.blog-card-content .wp-block-post-title {
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.blog-card-content .wp-block-post-excerpt {
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 20px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-meta-footer {
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-meta-footer .wp-block-post-date {
    color: #6b7280;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-meta-footer .wp-block-post-date::before {
    content: "📅";
}

/* Responsif Blog */
@media (max-width: 991px) {
    .featured-blog-card {
        flex-direction: column;
    }
    
    .featured-blog-image {
        min-height: 250px;
    }
    
    .featured-blog-image img {
        border-radius: 20px 20px 0 0;
    }
    
    .featured-blog-content {
        padding: 30px;
    }
    
    .featured-blog-content .wp-block-post-title {
        font-size: 1.5rem;
    }
}

/* Fix fallback jika fitur disable emoji via PHP telat berjalan (mencegah gambar besar) */
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

/* =========================================
   GRID PRODUK & STARTUP (1 KOLOM)
   ========================================= */
.home-single-column-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

.home-single-column-container .wp-block-post-template {
    display: flex !important;
    flex-direction: column;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.home-single-column-container .wp-block-post-template li {
    width: 100%;
    max-width: 100%;
}

/* Pastikan seluruh wrapper dalam produk dan startup menampilkan isinya */
.home-single-column-container .wp-block-post-template li .wp-block-group,
.home-single-column-container .wp-block-post-template li .wp-block-post-content {
    display: flex !important;
    flex-direction: column;
}

.home-single-column-container .wp-block-post-template li .wp-block-post-title {
    order: 2 !important;
    text-align: center;
    margin-bottom: 15px;
}

.home-single-column-container .wp-block-post-template li .wp-block-post-featured-image {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
    display: block !important;
}

.home-single-column-container .wp-block-post-template li .wp-block-post-content,
.home-single-column-container .wp-block-post-template li .wp-block-post-excerpt,
.home-single-column-container .wp-block-post-template li .wp-block-post-content p {
    order: 3 !important;
    text-align: center;
    margin-bottom: 15px;
}

.home-single-column-container .wp-block-post-template li .wp-block-read-more {
    order: 4 !important;
    align-self: center !important;
    margin-top: auto !important;
}

.home-single-column-container .produk-card .wp-block-post-featured-image,
.home-single-column-container .produk-card figure:first-of-type {
    order: 1 !important;
}

.home-single-column-container .produk-card {
    display: flex !important;
    flex-direction: column !important;
}

.home-single-column-container .produk-card > .wp-block-post-featured-image {
    order: 1 !important;
}

.home-single-column-container .produk-card .wp-block-post-content {
    order: 2 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.home-single-column-container .produk-card > .wp-block-post-content {
    order: 2 !important;
}

.home-single-column-container .produk-card .wp-block-post-title {
    order: 3 !important;
}

.home-single-column-container .produk-card > .wp-block-post-title {
    order: 3 !important;
}

.home-single-column-container .produk-card .wp-block-post-excerpt,
.home-single-column-container .produk-card .wp-block-post-content p {
    order: 4 !important;
}

.home-single-column-container .produk-card > .wp-block-post-excerpt {
    order: 4 !important;
}

.home-single-column-container .produk-card .wp-block-read-more {
    order: 5 !important;
}

.home-single-column-container .produk-card > .wp-block-read-more {
    order: 5 !important;
}

/* Memaksa gambar muncul jika ada figure */
.home-single-column-container .wp-block-post-template li figure {
    display: block !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    order: 1 !important;
}

.home-single-column-container .wp-block-post-template li img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 8px;
    display: block !important;
}
.slick-services-slider .wp-block-post-template {
    display: block !important; /* Reset display flex WP */
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Jika container tidak ada (blok lama), berikan padding langsung di slider agar panah & titik tidak terpotong */
.home-loop-grid .wp-block-post-template.slick-initialized {
    padding: 0 40px 60px 40px !important;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .home-loop-grid .wp-block-post-template.slick-initialized {
        padding: 0 10px 60px 10px !important;
    }
}

/* Memperbaiki jarak antar kartu di dalam Slick */
.slick-services-slider .slick-slide,
.home-loop-grid .slick-slide {
    margin: 0 15px; /* Jarak antar kartu (total gap 30px) */
    height: auto; /* Memastikan semua kartu sama tinggi */
}

.slick-services-slider .slick-track,
.home-loop-grid .slick-track {
    display: flex !important; /* Rahasia agar semua kartu sama tinggi */
}

.slick-services-slider .slick-slide > div,
.home-loop-grid .slick-slide > div {
    height: 100%;
}

/* Styling Kartu Layanan di dalam Carousel */
.slick-services-slider .service-card,
.slick-services-slider .layanan-item-loop,
.home-loop-grid .service-card,
.home-loop-grid .layanan-item-loop,
.home-loop-grid .produk-card,
.home-loop-grid .startup-card,
.home-loop-grid .pelatihan-item,
.home-loop-grid .portfolio-item {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 15px 0 !important; /* Jarak atas-bawah untuk efek hover */
    float: none !important;
    width: auto !important;
}

.slick-services-slider .service-card:hover,
.slick-services-slider .layanan-item-loop:hover,
.home-loop-grid .service-card:hover,
.home-loop-grid .layanan-item-loop:hover,
.home-loop-grid .produk-card:hover,
.home-loop-grid .startup-card:hover,
.home-loop-grid .pelatihan-item:hover,
.home-loop-grid .portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(110, 84, 250, 0.15);
}

/* Memastikan elemen di dalam kartu terpusat */
.slick-services-slider .service-card .wp-block-post-content,
.slick-services-slider .layanan-item-loop .wp-block-post-content,
.home-loop-grid .service-card .wp-block-post-content,
.home-loop-grid .layanan-item-loop .wp-block-post-content,
.home-loop-grid .produk-card .wp-block-post-content,
.home-loop-grid .startup-card .wp-block-post-content,
.home-loop-grid .pelatihan-item .wp-block-post-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    order: 3 !important; /* Menempatkan deskripsi di bawah judul */
    gap: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.slick-services-slider .service-card .wp-block-post-title,
.slick-services-slider .layanan-item-loop .wp-block-post-title,
.home-loop-grid .service-card .wp-block-post-title,
.home-loop-grid .layanan-item-loop .wp-block-post-title,
.home-loop-grid .produk-card .wp-block-post-title,
.home-loop-grid .startup-card .wp-block-post-title,
.home-loop-grid .pelatihan-item .wp-block-post-title,
.home-loop-grid .portfolio-item .wp-block-post-title,
.wp-block-group.layanan-item-loop .wp-block-post-title {
    order: 2 !important; /* Diubah dari 1 menjadi 2 (Di Bawah Gambar) */
    font-size: 1.5rem;
    margin-top: 18px;
    margin-bottom: 8px;
    padding: 0 18px;
    text-align: center;
    line-height: 1.25;
}

.slick-services-slider .service-card .wp-block-post-title a,
.slick-services-slider .layanan-item-loop .wp-block-post-title a,
.home-loop-grid .service-card .wp-block-post-title a,
.home-loop-grid .layanan-item-loop .wp-block-post-title a,
.home-loop-grid .produk-card .wp-block-post-title a,
.home-loop-grid .startup-card .wp-block-post-title a,
.home-loop-grid .pelatihan-item .wp-block-post-title a,
.home-loop-grid .portfolio-item .wp-block-post-title a,
.wp-block-group.layanan-item-loop .wp-block-post-title a {
    color: var(--dark-color);
}
.slick-services-slider .service-card .wp-block-post-title a:hover,
.slick-services-slider .layanan-item-loop .wp-block-post-title a:hover,
.home-loop-grid .service-card .wp-block-post-title a:hover,
.home-loop-grid .layanan-item-loop .wp-block-post-title a:hover,
.home-loop-grid .produk-card .wp-block-post-title a:hover,
.home-loop-grid .startup-card .wp-block-post-title a:hover,
.home-loop-grid .pelatihan-item .wp-block-post-title a:hover,
.home-loop-grid .portfolio-item .wp-block-post-title a:hover,
.wp-block-group.layanan-item-loop .wp-block-post-title a:hover {
    color: var(--primary-color);
}

.slick-services-slider .layanan-item-loop .layanan-image,
.slick-services-slider .layanan-item-loop .wp-block-post-featured-image,
.home-loop-grid .layanan-item-loop .layanan-image,
.home-loop-grid .layanan-item-loop .wp-block-post-featured-image,
.slick-services-slider .service-card .layanan-image,
.slick-services-slider .service-card .wp-block-post-featured-image,
.home-loop-grid .service-card .layanan-image,
.home-loop-grid .service-card .wp-block-post-featured-image,
.home-loop-grid .produk-card .layanan-image,
.home-loop-grid .produk-card .wp-block-post-featured-image,
.home-loop-grid .startup-card .layanan-image,
.home-loop-grid .startup-card .wp-block-post-featured-image,
.home-loop-grid .produk-card figure,
.home-loop-grid .startup-card figure,
.home-loop-grid .pelatihan-item figure,
.home-loop-grid .portfolio-item figure,
.home-loop-grid .layanan-item-loop figure,
.wp-block-group.layanan-item-loop .wp-block-post-featured-image {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
    order: 1 !important; /* Paling Atas */
    display: block !important;
}

/* Memaksa gambar di dalam figure agar tampil penuh dan proporsional */
.home-loop-grid .layanan-item-loop img,
.home-loop-grid .produk-card img,
.home-loop-grid .startup-card img,
.home-loop-grid .pelatihan-item img,
.home-loop-grid .portfolio-item img,
.wp-block-group.layanan-item-loop img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 8px;
    display: block !important;
}

/* Pastikan Ikon disembunyikan atau ditempatkan di bawah gambar jika masih ada */
.slick-services-slider .service-card .icon-box,
.slick-services-slider .service-card .wp-block-post-content > .icon-box,
.slick-services-slider .layanan-item-loop .icon-box,
.slick-services-slider .layanan-item-loop .wp-block-post-content > .icon-box,
.home-loop-grid .service-card .icon-box,
.home-loop-grid .service-card .wp-block-post-content > .icon-box,
.home-loop-grid .layanan-item-loop .icon-box,
.home-loop-grid .layanan-item-loop .wp-block-post-content > .icon-box,
.home-loop-grid .produk-card .icon-box,
.home-loop-grid .produk-card .wp-block-post-content > .icon-box,
.home-loop-grid .startup-card .icon-box,
.home-loop-grid .startup-card .wp-block-post-content > .icon-box {
    margin: 0 auto 20px auto !important;
    order: 3 !important;
}

.slick-services-slider .service-card .content-intro-image,
.slick-services-slider .service-card .wp-block-post-content > .content-intro-image,
.slick-services-slider .layanan-item-loop .content-intro-image,
.slick-services-slider .layanan-item-loop .wp-block-post-content > .content-intro-image,
.home-loop-grid .service-card .content-intro-image,
.home-loop-grid .service-card .wp-block-post-content > .content-intro-image,
.home-loop-grid .layanan-item-loop .content-intro-image,
.home-loop-grid .layanan-item-loop .wp-block-post-content > .content-intro-image,
.home-loop-grid .produk-card .content-intro-image,
.home-loop-grid .produk-card .wp-block-post-content > .content-intro-image,
.home-loop-grid .startup-card .content-intro-image,
.home-loop-grid .startup-card .wp-block-post-content > .content-intro-image,
.home-loop-grid .pelatihan-item .content-intro-image,
.home-loop-grid .pelatihan-item .wp-block-post-content > .content-intro-image,
.wp-block-group.layanan-item-loop .content-intro-image,
.wp-block-group.layanan-item-loop .wp-block-post-content > .content-intro-image {
    display: none !important;
}

.slick-services-slider .service-card p:not(.icon-box),
.slick-services-slider .layanan-item-loop p:not(.icon-box),
.home-loop-grid .service-card p:not(.icon-box):not(.price):not(.badge-popular),
.home-loop-grid .layanan-item-loop p:not(.icon-box):not(.price):not(.badge-popular),
.home-loop-grid .produk-card p:not(.icon-box):not(.price):not(.badge-popular),
.home-loop-grid .startup-card p:not(.icon-box):not(.price):not(.badge-popular),
.home-loop-grid .pelatihan-item p:not(.icon-box):not(.price):not(.badge-popular),
.home-loop-grid .portfolio-item p:not(.icon-box):not(.price):not(.badge-popular),
.wp-block-group.layanan-item-loop p:not(.icon-box):not(.price):not(.badge-popular) {
    order: 4 !important; /* Diubah dari 3 menjadi 4 */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.95rem;
    color: var(--text-color);
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    padding: 0 15px; /* Memberi ruang bernapas di kiri dan kanan */
}

/* Khusus override jika menggunakan blok Excerpt bawaan WP pada produk & startup */
.home-loop-grid .produk-card .wp-block-post-excerpt,
.home-loop-grid .startup-card .wp-block-post-excerpt,
.home-loop-grid .pelatihan-item .wp-block-post-excerpt,
.home-loop-grid .portfolio-item .wp-block-post-excerpt,
.wp-block-group.layanan-item-loop .wp-block-post-excerpt {
    order: 4 !important;
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-color);
    margin-top: 0 !important;
    margin-bottom: 15px;
    padding: 0 15px; /* Memberi ruang bernapas agar tidak mepet tepi kartu */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-single-column-container .produk-card .wp-block-post-excerpt,
.home-single-column-container .produk-card .wp-block-post-content > p:not(.product-home-description),
.home-single-column-container .produk-card .wp-block-post-content > h4,
.home-single-column-container .produk-card .wp-block-post-content > h3,
.home-single-column-container .produk-card .wp-block-post-content > h2,
.home-single-column-container .produk-card .wp-block-post-content > .layanan-features,
.home-single-column-container .produk-card .wp-block-post-content > .pricing-grid,
.home-single-column-container .produk-card .wp-block-post-content > .wp-block-kamikamustudio-pricing-table {
    display: none !important;
}

.home-single-column-container .produk-card .product-home-original-title {
    display: none !important;
}

.home-single-column-container .produk-card > .wp-block-post-title,
.home-single-column-container .produk-card > .wp-block-post-excerpt {
    display: none !important;
}

.home-single-column-container .produk-card .product-home-meta {
    order: 3 !important;
    width: 100%;
}

.home-single-column-container .produk-card .product-home-hero {
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    display: block !important;
}

.home-single-column-container .produk-card .product-home-gallery,
.home-single-column-container .produk-card > .slick-gallery-slider,
.home-single-column-container .produk-card > .wp-block-gallery {
    order: 2 !important;
    width: 100%;
    margin: 0 0 10px 0 !important;
}

.home-single-column-container .produk-card .product-home-title {
    font-size: 1.5rem;
    margin: 10px 0 10px 0 !important;
    padding: 0 20px;
    text-align: center;
    line-height: 1.25;
}

.home-single-column-container .produk-card .product-home-title a {
    color: var(--dark-color);
}

.home-single-column-container .produk-card .product-home-title a:hover {
    color: var(--primary-color);
}

.home-single-column-container .produk-card .product-home-description {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-color);
    margin: 0 0 15px 0 !important;
    padding: 0 15px;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.home-loop-grid .produk-card .wp-block-post-content {
    order: 2 !important;
    margin-bottom: 10px;
}

.home-loop-grid .produk-card .wp-block-post-title {
    order: 3 !important;
    margin-top: 6px;
    margin-bottom: 10px;
    padding: 0 20px;
}

.slick-services-slider .service-card .wp-block-post-content > p:not(.icon-box),
.slick-services-slider .layanan-item-loop .wp-block-post-content > p:not(.icon-box),
.home-loop-grid .service-card .wp-block-post-content > p:not(.icon-box),
.home-loop-grid .layanan-item-loop .wp-block-post-content > p:not(.icon-box) {
    margin-top: 0 !important;
}

.home-loop-grid .produk-card .wp-block-post-content > p:not(.icon-box),
.home-loop-grid .produk-card .wp-block-post-content > .layanan-features,
.home-loop-grid .produk-card .wp-block-post-content > .pricing-grid,
.home-loop-grid .produk-card .wp-block-post-content > .wp-block-kamikamustudio-pricing-table,
.home-loop-grid .produk-card .wp-block-post-content > h4,
.home-loop-grid .produk-card .wp-block-post-content > h3,
.home-loop-grid .produk-card .wp-block-post-content > h2 {
    display: none !important;
}

.home-loop-grid .produk-card .wp-block-post-content > .slick-gallery-slider,
.home-loop-grid .produk-card .wp-block-post-content > .wp-block-gallery {
    display: block !important;
    width: 100%;
    margin: 0 0 10px 0 !important;
}

/* Menambahkan styling untuk tombol Lihat Detail (wp-block-read-more) */
.slick-services-slider .service-card .wp-block-read-more,
.slick-services-slider .layanan-item-loop .wp-block-read-more,
.home-loop-grid .service-card .wp-block-read-more,
.home-loop-grid .layanan-item-loop .wp-block-read-more,
.home-loop-grid .produk-card .wp-block-read-more,
.home-loop-grid .startup-card .wp-block-read-more,
.home-loop-grid .pelatihan-item .wp-block-read-more,
.home-loop-grid .portfolio-item .wp-block-read-more,
.home-loop-grid .produk-card .btn-link,
.home-loop-grid .startup-card .btn-link,
.home-loop-grid .pelatihan-item .btn-link,
.home-loop-grid .portfolio-item .btn-link,
.wp-block-group.layanan-item-loop .wp-block-read-more,
.wp-block-group.layanan-item-loop .btn-link {
    order: 5 !important; /* Paling Bawah */
    margin-top: 15px !important; /* Jarak proporsional, hilangkan margin-top: auto agar tidak terlalu jauh */
    padding-top: 0;
    font-weight: 600;
    color: var(--primary-color) !important;
    text-decoration: none;
    transition: color 0.3s ease;
    align-self: center !important; /* Pastikan tombol di tengah */
    display: inline-block !important;
}

.slick-services-slider .service-card .wp-block-read-more:hover,
.slick-services-slider .layanan-item-loop .wp-block-read-more:hover,
.home-loop-grid .service-card .wp-block-read-more:hover,
.home-loop-grid .layanan-item-loop .wp-block-read-more:hover,
.home-loop-grid .produk-card .wp-block-read-more:hover,
.home-loop-grid .startup-card .wp-block-read-more:hover,
.home-loop-grid .produk-card .btn-link:hover,
.home-loop-grid .startup-card .btn-link:hover {
    color: var(--secondary-color);
}

/* Override gaya bawaan layanan-item-loop khusus di dalam slider */
.slick-services-slider .layanan-item-loop::after,
.home-loop-grid .layanan-item-loop::after {
    display: none !important;
}

/* =========================================
   KUSTOMISASI PANAH SLICK
   ========================================= */
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 45px;
    height: 45px;
    padding: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    color: white !important;
    background: var(--primary-color) !important;
    border: none;
    border-radius: 50%;
    outline: none;
    box-shadow: 0 4px 15px rgba(110, 84, 250, 0.3);
    z-index: 100; /* Ditingkatkan agar bisa diklik */
    transition: all 0.3s ease;
}

.slick-prev:hover, .slick-next:hover {
    background: var(--dark-color) !important;
    transform: translate(0, -50%) scale(1.1);
}

.slick-prev {
    left: -10px;
}

.slick-next {
    right: -10px;
}

/* Memunculkan icon panah Unicode di dalam tombol */
.slick-prev::before, .slick-next::before {
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    color: white;
}

/* =========================================
   KUSTOMISASI TITIK (DOTS) SLICK
   ========================================= */
.slick-dots {
    bottom: -40px;
    z-index: 100;
}

.slick-dots li button:before {
    font-size: 12px;
    color: #ccc;
    opacity: 1;
}

.slick-dots li.slick-active button:before {
    color: var(--primary-color);
}

/* Responsif Slick Carousel di Mobile */
@media (max-width: 768px) {
    .slick-carousel-container {
        padding: 0 10px 60px 10px !important; /* Mengurangi padding agar ruang kartu lebih lega */
    }
    
    .slick-prev {
        left: 5px; /* Memasukkan panah sedikit ke dalam */
        width: 35px;
        height: 35px;
    }
    
    .slick-next {
        right: 5px;
        width: 35px;
        height: 35px;
    }
    
    .slick-prev::before, .slick-next::before {
        font-size: 16px; /* Panah lebih kecil */
    }
}

/* Menyembunyikan elemen detail di grid beranda dan list produk */
.slick-services-slider .wp-block-post-content h4,
.slick-services-slider .wp-block-post-content h3,
.slick-services-slider .wp-block-post-content h2,
.slick-services-slider .wp-block-post-content .layanan-features,
.slick-services-slider .wp-block-post-content .pricing-grid,
.slick-services-slider .wp-block-post-content .wp-block-columns,
.slick-services-slider .wp-block-post-content .wp-block-kamikamustudio-pricing-table,
.home-loop-grid .wp-block-post-content h4,
.home-loop-grid .wp-block-post-content h3,
.home-loop-grid .wp-block-post-content h2,
.home-loop-grid .wp-block-post-content .layanan-features,
.home-loop-grid .wp-block-post-content .pricing-grid,
.home-loop-grid .wp-block-post-content .wp-block-columns,
.home-loop-grid .wp-block-post-content .wp-block-kamikamustudio-pricing-table,
.home-loop-grid .produk-card .wp-block-post-content h4,
.home-loop-grid .produk-card .wp-block-post-content h3,
.home-loop-grid .produk-card .wp-block-post-content h2,
.home-loop-grid .produk-card .wp-block-post-content .layanan-features,
.home-loop-grid .produk-card .wp-block-post-content .pricing-grid,
.home-loop-grid .produk-card .wp-block-post-content .wp-block-columns,
.home-loop-grid .produk-card .wp-block-post-content .wp-block-kamikamustudio-pricing-table,
.home-loop-grid .startup-card .wp-block-post-content h4,
.home-loop-grid .startup-card .wp-block-post-content h3,
.home-loop-grid .startup-card .wp-block-post-content h2,
.home-loop-grid .startup-card .wp-block-post-content .layanan-features,
.home-loop-grid .startup-card .wp-block-post-content .pricing-grid,
.home-loop-grid .startup-card .wp-block-post-content .wp-block-columns,
.home-loop-grid .startup-card .wp-block-post-content .wp-block-kamikamustudio-pricing-table,
.home-loop-grid .pelatihan-item .wp-block-post-content h4,
.home-loop-grid .pelatihan-item .wp-block-post-content h3,
.home-loop-grid .pelatihan-item .wp-block-post-content h2,
.home-loop-grid .pelatihan-item .wp-block-post-content .layanan-features,
.home-loop-grid .pelatihan-item .wp-block-post-content .pricing-grid,
.home-loop-grid .pelatihan-item .wp-block-post-content .wp-block-columns,
.home-loop-grid .pelatihan-item .wp-block-post-content .wp-block-kamikamustudio-pricing-table {
    display: none !important;
}

/* Membatasi excerpt agar tidak menampilkan teks harga */
.home-single-column-container .wp-block-post-excerpt,
.home-single-column-container .wp-block-post-content p {
    max-height: 4.5em; /* Sekitar 3 baris */
    overflow: hidden;
    position: relative;
}

/* Menambahkan pseudoclass untuk memotong teks jika lebih dari 3 baris */
.home-single-column-container .wp-block-post-excerpt::after,
.home-single-column-container .wp-block-post-content p::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    background: white;
    padding-left: 5px;
}

/* Feature List (Centang Hijau) */
.layanan-features {
    list-style: none;
    padding: 0;
    margin: 20px auto;
    width: max-content;
    max-width: 100%;
    text-align: left;
}
.layanan-features li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    text-align: left;
}
.layanan-features li::before {
    content: "☑";
    color: var(--green);
    font-weight: bold;
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
}

/* Tabel Harga / Pricing Cards */
.pricing-grid {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    align-items: flex-end; /* Memastikan kartu yg ditengah (populer) bisa lebih tinggi */
}

.pricing-card {
    flex: 1;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.pricing-card h4 {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 10px;
    margin-top: 0;
}

.pricing-card .price {
    font-size: 1.5rem; /* Diubah menjadi lebih kecil (ukuran M) */
    color: var(--primary-color);
    font-weight: 800;
    margin-bottom: 20px;
}

/* Kartu Harga Rekomendasi/Populer (Yang di tengah) */
.pricing-card.featured {
    border: 2px solid var(--primary-color);
    padding: 40px 30px; /* Lebih tinggi */
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
    margin-top: -20px; /* Mengangkat kartu tengah sedikit ke atas agar lebih menonjol */
}

.pricing-card .badge-popular {
    /* Mengubah dari absolute menjadi inline-block dengan transform agar tidak menutupi judul di Block Editor */
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    white-space: nowrap !important;
    min-width: max-content;
    z-index: 10;
    transform: translateY(-55px);
    margin: 0 auto -20px auto;
}

/* List Fitur dalam Harga */
.pricing-features {
    text-align: left;
    margin: 30px auto;
    padding: 0;
    list-style: none;
    width: max-content;
    max-width: 100%;
}

.layanan-item-loop .pricing-features {
    margin: 30px auto;
    width: max-content;
    max-width: 100%;
    text-align: left;
}

.pricing-features li {
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: var(--text-color);
    text-align: left;
    position: relative;
    padding-left: 28px;
}

.layanan-item-loop .pricing-features li {
    text-align: left;
    padding-left: 28px;
}

.pricing-features li::before {
    content: "☑";
    color: var(--green);
    font-weight: bold;
    font-size: 1.1rem;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}

/* Fitur Produk / Startup secara umum (termasuk yang menggunakan ul biasa jika bukan .pricing-features) */
.wp-block-post-content ul:not(.pricing-features),
.archive-item .entry-content ul:not(.pricing-features),
.layanan-item-loop .wp-block-post-content ul:not(.pricing-features) {
    text-align: center;
    margin: 20px auto !important;
    padding-left: 0;
    list-style: none;
    display: block !important;
    width: max-content !important;
    max-width: 100%;
}

.wp-block-post-content ul:not(.pricing-features) li,
.archive-item .entry-content ul:not(.pricing-features) li,
.layanan-item-loop .wp-block-post-content ul:not(.pricing-features) li {
    margin-bottom: 15px;
    text-align: left;
    padding-left: 28px;
    position: relative;
}

.wp-block-post-content ul:not(.pricing-features) li::before,
.archive-item .entry-content ul:not(.pricing-features) li::before,
.layanan-item-loop .wp-block-post-content ul:not(.pricing-features) li::before {
    content: "☑";
    color: var(--green);
    font-weight: bold;
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}

@media (max-width: 768px) {
    .pricing-grid {
        flex-direction: column;
    }
    .pricing-card.featured {
        padding: 30px;
    }
}

/* ==========================================
   SLICK CAROUSEL CUSTOMIZATION (GALLERY)
   ========================================== */
.gallery-carousel-section {
    width: 100%;
    overflow: hidden;
}

.slick-gallery-slider {
    margin: 40px auto;
    padding: 0 20px;
}

.slick-gallery-slider .wp-block-image {
    padding: 20px 15px; /* Tambah padding atas/bawah agar box shadow tidak terpotong (cropping) */
    outline: none;
    margin: 0 !important;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.slick-gallery-slider .wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: block;
    margin: 0 auto;
}

.slick-gallery-slider .slick-dots {
    width: auto !important;
    max-width: none !important;
    margin: 20px auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.slick-gallery-slider .slick-dots li {
    width: 20px !important;
    padding-left: 0 !important;
    margin: 0 5px !important;
    position: static !important;
    text-align: center !important;
}

.slick-gallery-slider .slick-dots li::before {
    content: none !important;
    display: none !important;
}

/* Efek khusus untuk item yang berada di tengah (Center Mode) */
.slick-gallery-slider .slick-slide:not(.slick-center) {
    opacity: 0.5;
    transform: scale(0.85);
}

.slick-gallery-slider .slick-center {
    opacity: 1;
    transform: scale(1.05);
    z-index: 10;
}

/* Navigasi panah galeri */
.slick-gallery-slider .slick-prev,
.slick-gallery-slider .slick-next {
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 20;
}

.slick-gallery-slider .slick-prev {
    left: -10px;
}

.slick-gallery-slider .slick-next {
    right: -10px;
}

/* Responsive & Mobile Menu */
@media (max-width: 991px) {
    .menu-toggle {
        display: block;
        padding: 10px; /* Menambah area klik */
        position: fixed; /* Burger menu selalu mengambang (fixed) di pojok */
        top: 20px;
        right: 20px;
        z-index: 1002; /* Pastikan selalu di atas overlay dan menu */
        transition: right 0.3s ease;
        background: rgba(255, 255, 255, 0.9); /* Tambahkan latar belakang agar ikon tetap terlihat */
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    /* Sesuaikan jika ada admin bar */
    body.admin-bar .menu-toggle {
        top: 66px; /* 46px admin bar + 20px margin */
    }

    /* Saat menu terbuka, geser tombol X sedikit ke kiri agar tidak terpotong tepi layar */
    .menu-toggle.active {
        right: 25px; /* Jarak aman dari kanan */
        background: transparent;
        box-shadow: none;
    }

    /* Penyesuaian saat admin bar WordPress aktif */
    body.admin-bar .menu-toggle.active {
        top: 66px; /* 20px + 46px admin bar mobile */
    }

    .main-navigation {
        position: fixed;
        top: 0;
        right: -320px; /* Lebar menu ditambah sedikit */
        width: 320px;
        height: 100vh;
        background-color: var(--white);
        flex-direction: column;
        align-items: flex-start;
        padding: 100px 30px 30px; /* Padding top ditambah agar tidak tertutup tombol close */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.3s ease;
        z-index: 1000;
        overflow-y: auto; /* Memungkinkan scroll jika menu terlalu panjang */
    }

    .main-navigation.active {
        right: 0;
    }

    .main-navigation ul {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .main-navigation ul li {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }

    .main-navigation ul li a {
        display: block;
        padding: 15px 0;
        font-size: 1.1rem;
    }

    .header-cta {
        margin-top: 20px;
        width: 100%;
        text-align: center;
    }

    /* Blur effect overlay */
    .site-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,0.3);
        backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .site-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .hero-container {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
    }

    .hero-image {
        margin-top: 50px;
    }

    .footer-container {
        grid-template-columns: 1fr;
    }

    .feature-list {
        grid-template-columns: 1fr;
    }
}

/* Hamburger Active State */
.menu-toggle.active .hamburger-inner {
    background-color: transparent;
}
.menu-toggle.active .hamburger-inner::before {
    transform: translateY(10px) rotate(45deg);
    background-color: var(--dark-color); /* Memastikan warna silang tetap gelap */
}
.menu-toggle.active .hamburger-inner::after {
    transform: translateY(-10px) rotate(-45deg);
    background-color: var(--dark-color); /* Memastikan warna silang tetap gelap */
}

/* =========================================
   LAMAN TENTANG KAMI (ABOUT US)
   ========================================= */

.about-header-section {
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
    padding: 100px 0 60px;
}

.about-story-section {
    padding: 80px 0;
}

.about-story-columns {
    gap: 60px;
}

.about-story-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.about-vision-mission-section {
    background-color: var(--light-bg);
}

.vision-mission-columns {
    gap: 40px;
}

.vm-card {
    background: white;
    padding: 50px 40px;
    border-radius: 20px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform 0.3s ease;
}

.vm-card:hover {
    transform: translateY(-10px);
}

.vm-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.about-values-section {
    padding: 80px 0;
}

.values-columns {
    gap: 30px;
}

.value-card {
    background: white;
    padding: 40px 30px;
    border-radius: 16px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.value-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.about-stats-section {
    background-color: var(--primary-color);
    color: white;
    padding: 60px 0;
}

.about-stats-section p {
    color: #e0e7ff;
}

.stats-columns {
    gap: 30px;
}

.stat-number {
    color: white !important;
    font-size: 3.5rem;
    margin-bottom: 10px;
}

.about-team-section {
    padding: 80px 0;
    background-color: var(--light-bg);
}

.team-columns {
    gap: 30px;
}

.team-card {
    background: white;
    padding: 40px 30px;
    border-radius: 16px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform 0.3s ease;
}

.team-card:hover {
    transform: translateY(-10px);
}

.team-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 2rem;
    margin: 0 auto 20px auto;
}

.team-avatar.bg-blue { background-color: var(--primary-color); }
.team-avatar.bg-purple { background-color: var(--secondary-color); }
.team-avatar.bg-pink { background-color: #ec4899; }
.team-avatar.bg-green { background-color: var(--green); }

.team-social {
    margin-top: 18px;
    justify-content: center;
}

.team-social .wp-block-social-link a {
    color: var(--primary-color);
}

/* Responsif About Us */
@media (max-width: 991px) {
    .about-story-columns {
        flex-direction: column;
    }
    .about-story-columns > .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
    }
}

/* =========================================
   LAMAN KONTAK (CONTACT)
   ========================================= */

.contact-header-section {
    background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
    padding: 100px 0 60px;
}

.contact-columns {
    gap: 60px;
}

.contact-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-card {
    display: flex !important;
    padding: 25px;
    border-radius: 16px;
    align-items: flex-start !important;
    gap: 20px !important;
    transition: transform 0.3s ease;
    width: 100%;
}

.contact-card > .wp-block-group {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: none;
}

.contact-card > .wp-block-group.is-layout-constrained {
    max-width: none !important;
}

.contact-card > .wp-block-group > * {
    width: 100%;
}

.contact-card:hover {
    transform: translateX(5px);
}

.contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
    margin: 0 !important;
}

.contact-title {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 5px;
    margin-top: 0;
    width: 100%;
}

.contact-detail {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 5px;
    font-weight: 500;
    width: 100%;
}

.contact-action {
    display: block;
    font-size: 0.85rem;
    margin: 0 !important;
    width: 100%;
}

.contact-action a {
    display: block;
    text-decoration: none;
}

/* Card Variants */
.card-whatsapp { background-color: #f0fdf4; }
.card-whatsapp .contact-icon { background-color: #16a34a; }
.text-green, .text-green a { color: #16a34a; }

.card-phone { background-color: #eff6ff; }
.card-phone .contact-icon { background-color: #2563eb; }
.text-blue, .text-blue a { color: #2563eb; }

.card-email { background-color: #faf5ff; }
.card-email .contact-icon { background-color: #9333ea; }
.text-purple, .text-purple a { color: #9333ea; }

.card-address { background-color: #fdf2f8; }
.card-address .contact-icon { background-color: #db2777; }

/* Social Links Override */
.contact-social h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
}
.contact-social .wp-block-social-links {
    gap: 15px;
}

.contact-social .wp-block-social-link a {
    padding: 10px;
    background-color: var(--primary-color);
    border-radius: 50%;
    color: white !important;
    transition: background-color 0.3s ease;
}

.contact-social .wp-block-social-link a:hover {
    background-color: var(--dark-color);
}

/* Map */
.map-container {
    height: 100%;
    min-height: 600px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    min-height: 600px;
    border: none;
}

/* CTA WhatsApp */
.contact-cta-whatsapp {
    background-color: #16a34a; /* Green WhatsApp */
    padding: 80px 0;
    margin-top: 60px;
    margin-bottom: 60px !important; /* Space/padding with footer */
    color: white;
}

.contact-cta-whatsapp h2 {
    color: white;
    margin-bottom: 15px;
}

.contact-cta-whatsapp p {
    color: #dcfce7;
    margin-bottom: 30px;
}

.cta-wa-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    color: white;
}

.btn-wa-white .wp-block-button__link {
    background-color: white !important;
    color: #16a34a !important;
    font-weight: bold;
    border-radius: 8px;
    padding: 12px 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-wa-white .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

@media (max-width: 991px) {
    .contact-columns {
        flex-direction: column;
    }
    .contact-columns > .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
    }
    .map-container {
        min-height: 400px;
        margin-top: 40px;
    }
    .map-container iframe {
        min-height: 400px;
    }
}