/*=============================================







=            Base & Typography                =







=============================================*/







:root {







    /* Brand Color */















    --primary-color: #00E0FF; /* Light Blue */







    --primary-color-rgb: 0, 224, 255; /* RGB for primary color */







    --secondary-primary-color: #3B82F6; /* Blue */







    --secondary-primary-color-rgb: 59, 130, 246;















    /* Secondary Color */







    --secondary-color: #E38E49; /* Orange Mandarine*/







    --secondary-color-rgb: 227, 142, 73; /* RGB for secondary color */







    --secondary-color-dark: #C76A2B; /* Dark Orange Mandarine */







    --secondary-dark-color: #001F3F; /* Dark Navy Blue */







    --secondary-dark-color-rgb: 0, 31, 63; /* RGB for secondary dark color */















    /* Neutral Color */







    /* Background Color*/







    --neutral-dominant-color: #D4EBF8; /* Light Blue */







    --neutral-pure-color: #FFFFFF; /* White */







    --neutral-secondary-color: #F0F0F0; /* Light Gray */







    --neutral-dark-color: #0D1117; /* Dark Gray */







    --neutral-very-dark-blue: #111827;















    /* Text Color*/







    --neutral-text-color: #333333; /* Dark Gray */







    --neutral-text-secondary-color: #666666; /* Medium Gray */







    --neutral-text-off-white-color: #F5F5F5; /* Off-White */















    /* Border Color*/







    --neutral-border-color: #E0E0E0; /* Light Gray */







    --neutral-border-secondary-color: #BDBDBD; /* Medium Light Gray */















    /* Accent Color */















    /* Semantic Color */







    --success-color: #28A745; /* Green */







    --warning-color: #FFC107; /* Yellow */







    --error-color: #DC3545; /* Red */















    --font-nunito: 'Nunito', sans-serif;







    --font-archivo: 'Archivo Black', sans-serif;















    /* Spacing Scale  */







    --spacing-xs: 0.5rem;   /* 5px */







    --spacing-sm: 1rem;     /* 10px */







    --spacing-md: 2rem;     /* 20px */







    --spacing-lg: 3rem;     /* 30px */







    --spacing-xl: 4rem;     /* 40px */







    --spacing-xxl: 6rem;    /* 60px */















    /* Max Width */







    --max-width-content: 120rem; /* 1200px */







    /* --max-width-container: 124rem; 1240px */















    /* Border Radius */







    --border-radius-sm: 0.4rem; /* 4px */







    --border-radius-md: 0.8rem; /* 8px */







    --border-radius-lg: 1.2rem; /* 12px */







    --border-radius-xl: 1.6rem; /* 16px */







    --border-radius-xxl: 2.4rem; /* 24px */







    --border-radius-circle: 50%;















    /* Shadow */







    --shadow-sm: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.3); /* Small Shadow */







    --shadow-md: 0.4rem 0.4rem 0.8rem rgba(0, 0, 0, 0.3); /* Medium Shadow */







    --shadow-lg: 0.6rem 0.6rem 1.2rem rgba(0, 0, 0, 0.3); /* Large Shadow */







    --shadow-xl: 0.8rem 0.8rem 1.6rem rgba(0, 0, 0, 0.3); /* Extra Large Shadow */







    --shadow-scolor: 0.4rem 0.4rem 0.8rem; 















    /* Transition */







    --transition-fast: 0.2s ease-in-out; /* Fast Transition */







    --transition-medium: 0.4s ease-in-out; /* Medium Transition */







    --transition-slow: 0.6s ease-in-out; /* Slow Transition */















    /* Z-Index */







    --z-index-header: 1000; /* Header */







    --z-index-modal: 2000; /* Modal */







    --z-index-tooltip: 3000; /* Tooltip */







    --z-index-dropdown: 4000; /* Dropdown */







    --z-index-toast: 5000; /* Toast */















    /* Font Weight */







    --font-weight-light: 200; /* Light */







    --font-weight-normal: 400; /* Normal */







    --font-weight-medium: 600; /* Medium */







    --font-weight-bold: 700; /* Bold */







    --font-weight-black: 900; /* Black */















    







    /* kontrol animasi */







    --problem-count:4;







    --problem-duration:3s;















    /* batasi tinggi maksimum kalimat (jumlah baris) */







    --max-lines:3;







}















html {







    font-size: 62.5%; /* 1rem = 10px */







    scroll-behavior: smooth;







}















body {







    font-family: var(--font-nunito);







    font-size: 1.6rem; /* 16px */







    line-height: 1.6;







    background-color: var(--neutral-pure-color);







}















h1{







    font-family: var(--font-archivo);







    font-size: 4.8rem;







    line-height: 1.2;







    margin-bottom: 1.6rem;







}















h2 {







    font-family: var(--font-nunito);







    font-size: 3.6rem;







    line-height: 1.2;







    font-weight: var(--font-weight-bold);







    margin-bottom: 1.2rem;







}















h3 {







    font-family: var(--font-nunito);







    font-size: 2.8rem;







    line-height: 1.2;







    font-weight: var(--font-weight-medium);







    margin-bottom: 1rem;







}   















h4 {







    font-family: var(--font-nunito);







    font-size: 2.2rem;







    line-height: 1.2;







    margin-bottom: 0.8rem;







}















section {







    position: relative;







    width: 100%;







    padding: var(--spacing-md) 0;







    scroll-margin-top: 50px;







}















.container {







    max-width: var(--max-width-content);







    margin: 0 auto;







    overflow: hidden;







    padding: var(--spacing-md) var(--spacing-md);







}















.content-flex {







    display: flex;







    justify-content: space-between;







    gap: var(--spacing-xl);







}















.button {







    display: inline-block;







    padding: var(--spacing-sm) var(--spacing-md);







    border-radius: var(--border-radius-xxl);







    text-align: center;







    text-decoration: none;







    border: none;







    cursor: pointer;







    font-weight: var(--font-weight-bold);







    transition: background-color var(--transition-fast), transform var(--transition-fast);







    white-space: nowrap;







}















.button:hover{ 







    transform: translateY(-1px); 







}















.button-secondary {







    background: linear-gradient(90deg, var(--primary-color),var(--secondary-primary-color));







    color:#081018; 







    box-shadow:0 8px 24px rgba(59,130,246,.25);







}















.button-secondary:hover {







    background: linear-gradient(90deg, #02B0C8, #2D60B3);







    box-shadow: var(--shadow-md);







}















.button-secondary:active{







    background-color: var(--primary-color);







    opacity: 0.8;







    box-shadow: inset var(--shadow-md);







}















.animation-translate--x {







    opacity: 0;







    transition: transform var(--transition-medium), opacity var(--transition-medium);







    transform: translateX(-50px);







}















.animation-translate-x {







    opacity: 0;







    transition: transform var(--transition-medium), opacity var(--transition-medium);







    transform: translateX(50px);







}















.animation-translate-y {







    opacity: 0;







    transition: transform var(--transition-medium), opacity var(--transition-medium);







    transform: translateY(50px);







}















.animation-translate--x.is-visible,







.animation-translate-x.is-visible,







.animation-translate-y.is-visible {







    opacity: 1;







    transform: translateX(0);







    transform: translateY(0);







}















@media (max-width: 992px) {







    h1 {







        font-size: 3.6rem;







    }















    h2 {







        font-size: 2.8rem;







    }















    h3 {







        font-size: 2.2rem;







    }















    h4 {







        font-size: 1.8rem;







    }















    body {







        font-size: 1.4rem; /* 14px */







    }















    .content-flex{







        gap: var(--spacing-md);







    }







}















@media (max-width: 768px) {







    .content-flex{







        flex-direction: column;







        padding: var(--spacing-md);







    }







}















@media (max-width: 480px) {







    h1 {







        font-size: 2.8rem;







    }















    h2 {







        font-size: 2.2rem;







    }















    h3 {







        font-size: 1.8rem;







    }















    h4 {







        font-size: 1.4rem;







    }















    body {







        font-size: 1.2rem; /* 12px */







    }







}















[data-editable="true"] {







    pointer-events: auto;







    position: relative;







    z-index: 10;







}















/* =============================================







=                   Not Found                  =







===============================================*/







.not-found {







    display: flex;







    flex-direction: column;







    text-align: center;







    justify-content: center;







    align-items: center;







    height: 100vh;







}















.not-found-img {







    width: 300px;







    object-fit: contain;







}















.not-found-text {







    font-size: 32px;







    margin-top: var(--spacing-md);







    color: var(--secondary-dark-color);







}















.button-404-not-found {







    margin-top: var(--spacing-md);







    padding: var(--spacing-sm) var(--spacing-lg);







    font-size: 16px;







    background-color: var(--secondary-primary-color);







    color: white;







    border: none;







    border-radius: var(--border-radius-xxl);







    cursor: pointer;







    transition: background-color 0.3s ease;







}















.button-404-not-found:hover {







    background-color: var(--secondary-dark-color);







}















.button-404-not-found:active {







    opacity: 0.8;







    box-shadow: inset var(--shadow-md);







    background-color: var(--secondary-primary-color);







}















/*=============================================







=                     Home                    =







=============================================*/







.home-section {







    position: relative;







    width: 100%;







    height: 100vh;







    background: linear-gradient(180deg, var(--neutral-dark-color), var(--neutral-very-dark-blue));







    color: var(--neutral-pure-color);







}















.container-home {







    display: flex;







    flex-direction: column;







    justify-content: start;







    align-items: center;







    height: 100%;







    position: relative;







}















.rotator {







    position: absolute;







    width: 100%;







    height: 100%;







    display: grid;







    place-items: center;







    font-size: clamp(28px, 4vw, 54px);







    overflow: hidden;







}















.rotator .slide {







    position: absolute;







    width: 100%;







    opacity: 0;







    transform: translateY(0.75rem);







    font-weight: var(--font-weight-bold);







    max-width: 800px;







    overflow-wrap: anywhere;







    padding-inline: 1rem;







    text-align: center;







    text-wrap: balance;







    animation: fadeSlide var(--problem-duration) ease-out forwards;







}















.slide:nth-child(1){ animation-delay: calc(0 * var(--problem-duration)); }







.slide:nth-child(2){ animation-delay: calc(1 * var(--problem-duration)); }







.slide:nth-child(3){ animation-delay: calc(2 * var(--problem-duration)); }







.slide:nth-child(4){ animation-delay: calc(3 * var(--problem-duration)); }















@keyframes fadeSlide{







    0%   { opacity:0; transform: translateY(0.75rem); }







    15%  { opacity:1; transform: translateY(0); }







    85%  { opacity:1; transform: translateY(0); }







    100% { opacity:0; transform: translateY(-0.5rem); }







}















.highlight{







    background: linear-gradient(90deg,var(--primary-color),var(--secondary-primary-color));







    -webkit-background-clip:text; background-clip:text;







    -webkit-text-fill-color:transparent;







}























.tagline-wrap {







    width: 100%;







    height: 100%;







    max-width: 800px;







    max-height: 750px;







    opacity:0;







    display: flex;







    flex-direction: column;







    justify-content: end;







    gap: var(--spacing-sm);







    margin: 0 auto var(--spacing-xl);







    padding: var(--spacing-md) ;







    transform: translateY(var(--spacing-md));







    animation: showTag 0.9s ease-out forwards;







    /* animation-delay: calc(0 * var(--problem-duration) + 0.1s); */







    animation-delay: calc(var(--problem-count) * var(--problem-duration) + 0.1s);







}







@keyframes showTag{ to { opacity:1; transform: translateY(0); } }















.tagline-title {







    font-weight: var(--font-weight-bold);







    text-align: center;







    margin: 0;







    font-weight:800;







}















.tagline-desc {







    text-align: justify;







    font-size: 1.8rem;







}















.brand{







    background: linear-gradient(90deg,var(--primary-color),var(--secondary-primary-color));







    -webkit-background-clip:text; background-clip:text;







    -webkit-text-fill-color:transparent;







}







    







.ctas{







    display:flex; 







    justify-content:center; 







    flex-wrap:wrap;







}















.particle-canvas {







    position: absolute;







    top: 0;







    left: 0;







    display: block;







    width: 100%;   /* skala mengikuti section */







    height: 100%;







    z-index: 0;    /* di belakang konten */







}















@media (max-width: 1024px) {







    .tagline-wrap {







        max-width: 90%;







    }







    .tagline-desc {







        font-size: clamp(14px, 1.8vw, 17px);







    }







}















@media (max-width: 768px){







    .tagline-wrap {







        padding-inline: 0;







        margin: 0 0 var(--spacing-md);







    }















    .tagline-desc {







        text-align: center;







        font-size: 15px;







    }







    .ctas {







        flex-direction: column;







        align-items: center;







        gap: 0.75rem;







    }















}















/* layar sangat kecil: izinkan hingga 4 baris */







@media (max-width: 480px){







    :root{ --max-lines:4; }















    .container-hero {







        padding: 0;







    }







}















/* aksesibilitas */







@media (prefers-reduced-motion: reduce){







    .rotator .slide{ animation:none; opacity:0; transform:none; }







    .rotator .s1{ opacity:1; }







    .tagline-wrap{ animation:none; opacity:1; transform:none; }







}























/*=============================================







=                     Hero                    =







=============================================*/







.hero-section {







    background-color: var(--neutral-very-dark-blue);







    color: var(--neutral-text-off-white-color);







}















.container.hero-content {







    display: flex;







    justify-content: space-between;  







    align-items: center;







    margin: var(--spacing-lg) auto;







}















.hero-text, .hero-image {







    flex: 1 1 50%;







}























.hero-text.is-visible,







.hero-image.is-visible {







    opacity: 1;







    transform: translateX(0);







}















.hero-text h2 {







    margin-bottom: var(--spacing-md);







}















.hero-text .highlight {







    color: var(--secondary-color);







}















.hero-text p {







    margin-bottom: var(--spacing-lg);







    text-align: justify;







}















.hero-image {







    display: flex;







    justify-content: center;







    align-items: center;







    max-height: 600px;







}















.hero-image img {







    max-width: 100%;







    height: auto;







    object-fit: contain;







}















@media (max-width: 992px) {







    .hero-content{







        gap: var(--spacing-md);







    }







}























@media (max-width: 768px) {







    .hero-content {







        flex-direction: column;







        text-align: center;







        gap: var(--spacing-md);







    }







    .container.hero-content {







        flex-direction: column;







        margin: var(--spacing-sm) auto;







    }















    .hero-text, .hero-image {







        flex: 1 1 100%;







    }















    .hero-image {







        max-width: 100%;







        height: auto;







    }







}















/*=============================================







=                    About                    =







=============================================*/















.about-section {







    /* background: linear-gradient(180deg, var(--neutral-very-dark-blue), var(--neutral-dark-color)); */







    background-color: var(--neutral-very-dark-blue);







}















.about-image, .about-text {







    flex: 1 1 50%;







}















.about-image {







    display: flex;







    justify-content: center;







    align-items: center;







}















.about-image img {







    max-width: 100%;







    height: auto;







    object-fit: contain;







    border-radius: var(--border-radius-md);







    box-shadow: var(--shadow-sm);







}















.about-text {







    display: flex;







    flex-direction: column;







    color: var(--neutral-pure-color);







    align-items: start;







}















.about-text h2 {







    margin-bottom: var(--spacing-sm);







    padding-left: var(--spacing-lg);







    border-left: 5px solid var(--secondary-color);







}















.about-text h3 {







    margin-bottom: var(--spacing-md);







}















.about-text p {







    margin-bottom: var(--spacing-lg);







    text-align: justify;







}















@media (max-width: 768px){







    .about-section {







        padding: 0 0 var(--spacing-md) 0;







    }















    .about-content {







        flex-direction: column;







        padding: 0 var(--spacing-xl);







    }















    .about-text, .about-image {







        flex: 1 1 100%;







    }















    .about-text h3 {







        margin-bottom: var(--spacing-sm);







    }















    .about-text a {







        margin: 0 auto;







    }







}















/*=============================================







=                  Services                   =







=============================================*/















.services-section {







    /* background-color: var(--neutral-dominant-color); */







    background-color: var(--neutral-very-dark-blue);







}















.services-text {







    flex: 1 1 35%;







    color: var(--neutral-pure-color);







}















.services-text h2 {







    margin-bottom: var(--spacing-sm);







    padding-left: var(--spacing-lg);







    font-size: 1.6rem;







    border-left: 5px solid var(--secondary-color);







}















.services-text h3 {







    margin-bottom: var(--spacing-md);







}















.services-text p {







    margin-bottom: var(--spacing-md);







    text-align: justify;







}















.services-text button {







    border-radius: var(--border-radius-circle);







    margin-left: var(--spacing-md);







    padding: 0;







    width: 40px;







    height: 40px;







    font-size: 2rem;







}















.services-carousel {







    position: relative;







    flex: 1 1 65%;







    overflow: hidden;







}















.services-carousel::before {







    content: '';







    position: absolute;







    top: 0;







    left: 0;







    width: 100%;







    height: 50%;







    z-index: 0;







    border-radius: var(--spacing-xs);







    background: linear-gradient(to right, var(--secondary-primary-color), var(--neutral-very-dark-blue));







}















.services-card-wrapper {







    position: relative;







    z-index: 1;







    width: 100%;







    overflow: hidden;







    padding: var(--spacing-md) 0;







    gap: var(--spacing-md);







    scroll-behavior: smooth;







}















.services-card-wrapper.dragging {







    cursor: grabbing;







    user-select: none;







}















.services-card-list {







    display: flex;







    transition: transform var(--transition-medium);







    will-change: transform;







    list-style: none;







    padding: 0;







    margin: 0;







    cursor: grab;







}















.services-card-item {







    flex: 0 0 25%;







    display: flex;







    transition: transform var(--transition-medium);







}















.services-card-content {







    background-color: var(--neutral-pure-color);







    border-radius: var(--spacing-xs);







    padding: var(--spacing-sm);







    box-shadow: var(--shadow-sm);







    margin: 0 var(--spacing-sm); 







    flex: 1;







    display: flex;







    flex-direction: column;







    justify-content: space-between;







    text-align: center;







}















.services-card-item:hover {







    transform: translateY(-5px);







    cursor: pointer;







}















.services-card-item:hover a {







    color: var(--secondary-dark-color);







    text-decoration: underline;







}















.services-card-item h4 {







    margin-bottom: var(--spacing-sm);







}















.services-card-item a {







    color: var(--secondary-color);







    text-decoration: none;







    font-weight: var(--font-weight-bold);







    display: inline-block;







    transition: color var(--transition-fast);







}















.services-card-icon {







    background-color: var(--neutral-dominant-color);







    border-radius: var(--border-radius-circle);







    width: 100px;







    min-height: 100px;







    display: flex;







    align-items: center;







    justify-content: center;







    margin: 0 auto 1rem;







}















.services-card-icon img {







    width: 60%;







    height: 60%;







    fill: currentColor;







    transition: transform var(--transition-fast);







    position: relative;







    z-index: 10;







}















.services-card-icon img[data-editable="true"] {







    display: block; /* pastikan hitbox-nya penuh */







    pointer-events: auto;







}















/*=============================================







=                    Overlay                  =







=============================================*/







.services-overlay {







    position: fixed;







    top: 0;







    left: 0;







    width: 100%;







    height: 100%;







    z-index: var(--z-index-modal);







    display: flex;







    align-items: center;







    justify-content: center;







    padding: var(--spacing-md);







    box-sizing: border-box;







    







    opacity: 0;







    visibility: hidden;







    transition: opacity 0.3s ease, visibility 0.3s ease;







}















.services-overlay.active {







    opacity: 1;







    visibility: visible;







}















/* Latar Belakang Gelap */







.overlay-backdrop {







    position: absolute;







    top: 0;







    left: 0;







    width: 100%;







    height: 100%;







    background-color: rgba(0, 0, 0, 0.6);







}















/* Jendela Konten Overlay */







.overlay-window {







    position: relative;







    display: flex;







    max-width: 900px;







    width: 100%;







    background-color: var(--neutral-pure-color); /* Warna abu-abu terang */







    border-radius: var(--border-radius-md);







    box-shadow: var(--shadow-md);







    overflow: hidden; /* Penting agar gambar mengikuti border-radius */







}















/* Tombol Close (X) */







.overlay-close-btn {







    position: absolute;







    top: 15px;







    right: 15px;







    width: 40px;







    height: 40px;







    border-radius: 50%;







    border: none;







    background-color: #ffffff;







    box-shadow: 0 2px 10px rgba(0,0,0,0.15);







    color: #333;







    cursor: pointer;







    display: flex;







    align-items: center;







    justify-content: center;







    z-index: calc(var(--z-index-modal) + 1);







    transition: transform 0.2s ease, background-color 0.2s ease;







}















.overlay-close-btn:hover {







    transform: scale(1.1);







    background-color: var(--error-color);







}















/* Kolom Kiri: Konten Teks */







.overlay-content {







    flex: 1 1 55%; /* Lebar kolom teks */







    padding: var(--spacing-lg);







    box-sizing: border-box;







    display: flex;







    justify-content: space-between;







    flex-direction: column;







}















.overlay-text {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-sm);







}















.overlay-title {







    color: var(--secondary-dark-color);







    position: relative;







    padding: var(--spacing-xs);







    padding-left: var(--spacing-md);







    border-left: 5px solid var(--secondary-color);







}















.overlay-text > ul{







    padding: var(--spacing-md);







    list-style: disc;







}























/* Kolom Kanan: Gambar */







.overlay-image-content {







    flex: 1 1 45%; /* Lebar kolom gambar */







    min-height: 400px;







}















.overlay-image-content img {







    width: 100%;







    height: 100%;







    object-fit: cover; /* Memastikan gambar mengisi ruang tanpa distorsi */







    display: block;







}















.overlay-button-cta {







    padding: var(--spacing-md);







}















@media (max-width: 1024px) {







    .services-card-item {







        flex: 0 0 33.3333%; /* 3 per row */







    }







}















@media (max-width: 768px) {







    .services-card-item {







        flex: 0 0 50%; /* 2 per row */







    }















    .button-slide-services {







        display: none;







    }















    .services-card-content {







        margin: 0 var(--spacing-lg);







    }















    .overlay-window {







        flex-direction: column; /* Ubah layout menjadi vertikal */







        max-height: 90vh;







        overflow-y: auto;







    }















    .overlay-content {







        padding: 30px;







    }















    .overlay-title {







        font-size: 1.5rem;







    }















    /* Pindahkan gambar ke atas pada mode mobile */







    .overlay-image-content {







        order: -1; /* Pindahkan ke atas */







        min-height: 200px;







    }















    .overlay-close-btn {







        color: #fff;







        background-color: rgba(0,0,0,0.4);







    }







}















@media (max-width: 480px) {







    .services-card-item {







        flex: 0 0 100%; /* 1 per row */







    }















    .services-card-content {







        margin: 0 calc(var(--spacing-lg)*2);







    }







}















/*=============================================







=                   Process                   =







=============================================*/















.process-section {







    background-color: var(--neutral-pure-color);







}















.process-section > .container {







    display: flex;







    flex-direction: column;







    justify-content: space-between;







    align-items: center;







    gap: var(--spacing-md);







    color: var(--neutral-text-color);







}















.process-section > .container > h2 {







    color: var(--secondary-dark-color);







    padding: var(--spacing-xs);







    border-bottom: 5px solid var(--secondary-color);







}















.process-section > .container > p {







    width: 50%;







    margin: 0 auto;







    line-height: var(--line-height-md);







    margin-bottom: var(--spacing-md);







    text-align: center;







}















ul.timeline {







    position: relative;







    width: 100%;







    list-style-type: disc;







    list-style: none;







    padding: 0;







}















ul.timeline::before {







    content: "";







    position: absolute;







    left: 50%;







    transform: translateX(-50%);







    top: 20px;







    bottom: 20px;







    width: 3px;







    background-color: var(--secondary-color);







}















li.timeline-item {







    display:flex;







    justify-content: space-between;







    align-items: center;







    position: relative;







    margin-bottom: var(--spacing-md);







    width: 100%;







}















.timeline-content, .timeline-image {







    width: 40%;







    box-sizing: border-box;







    align-items: center;







}















li.timeline-item:nth-child(even) {







    flex-direction: row-reverse;







}















.timeline-content {







    text-align: justify;







}















li.timeline-item:nth-child(even) .timeline-content {







    text-align: justify;







}















.timeline-number {







    position: absolute;







    left: 50%;







    top: 50%;







    transform: translate(-50%, -50%);







    width: 50px;







    height: 50px;







    border-radius: 50%;







    background-color: var(--neutral-pure-color);







    border: 3px solid var(--secondary-color);







    display: flex;







    justify-content: center;







    align-items: center;







    font-size: 2.2rem;







    font-weight: 600;







    color: var(--secondary-color);







    z-index: 10;







}















.timeline-content > h3 {







    margin-top: 0;







    margin-bottom: 10px;







    color: var(--secondary-dark-color);







}















.timeline-content > p {







    color: var(--neutral-text-color);







}















.timeline-image > img {







    margin: 0 auto;







    max-width: 350px;







    width: 80%;







    height: auto;







    object-fit: contain;







}















li.timeline-item .timeline-number {







    opacity: 0;







    transition: opacity var(--transition-medium);







}















li.timeline-item .timeline-number.is-visible {







    opacity: 1;







}















li.timeline-item .timeline-content.process-animate {







    opacity: 0;







    transition: transform var(--transition-medium), opacity var(--transition-medium);







    transform: translateX(-50px);







}















li.timeline-item .timeline-image.process-animate {







    opacity: 0;







    transition: transform var(--transition-medium), opacity var(--transition-medium);







    transform: translateX(50px);







}















li.timeline-item:nth-child(even) .timeline-content.process-animate {







    opacity: 0;







    transition: transform var(--transition-medium), opacity var(--transition-medium);







    transform: translateX(50px);







}















li.timeline-item:nth-child(even) .timeline-image.process-animate {







    opacity: 0;







    transition: transform var(--transition-medium), opacity var(--transition-medium);







    transform: translateX(-50px);







}















li.timeline-item .timeline-content.process-animate.is-visible,







li.timeline-item .timeline-image.process-animate.is-visible,







li.timeline-item:nth-child(even) .timeline-content.process-animate.is-visible,







li.timeline-item:nth-child(even) .timeline-image.process-animate.is-visible {







    opacity: 1;







    transform: translateX(0);







}















@media (max-width: 768px) {















    .process-section > .container > p {







        width: 100%;







    }







    







    ul.timeline::before {







        left: 25px;







        transform: translateX(0);







    }















    li.timeline-item, li.timeline-item:nth-child(even) {







        flex-direction: column;







        align-items: flex-start;







        margin-bottom: var(--spacing-lg);







    }















    .timeline-content, .timeline-image {







        width: 100%;







        padding-left: calc(var(--spacing-xxl) + 5px);







        box-sizing: border-box;







    }















    .timeline-image {







        margin-top: var(--spacing-md);







        text-align: center;







    }















    .timeline-content {







        text-align: justify;







    }















    .timeline-number {







        left: calc(var(--spacing-md) + 5px);







        top: 0;







        width: 40px;







        height: 40px;







        font-size: 1.8rem;







        transform: translateX(-50%);







    }















    li.timeline-item:last-child {







        margin-bottom: 0;







    }















    /* Animasi */







    li.timeline-item .timeline-content.process-animate {







        opacity: 0;







        transition: transform var(--transition-medium), opacity var(--transition-medium);







        transform: translateX(50px);







    }















    li.timeline-item:nth-child(even) .timeline-image.process-animate {







        opacity: 0;







        transition: transform var(--transition-medium), opacity var(--transition-medium);







        transform: translateX(50px);







    }







}















/*=============================================







=                   Project                   =







=============================================*/















.project-section {







    background: linear-gradient(180deg, var(--neutral-dark-color), var(--neutral-very-dark-blue));







}















.project-section > .container {







    display: flex;







    flex-direction: column;







    justify-content: start;







    gap: var(--spacing-md);







    color: var(--neutral-pure-color);







}















.project-section > .container > h2 {







    padding-left: var(--spacing-lg);







    border-left: 5px solid var(--secondary-color);







}















.project-section > .container > p {







    width: 50%;







    line-height: var(--line-height-md);







    margin-bottom: var(--spacing-md);







}















.project-carousel {







    position: relative;







    width: 100%;







    overflow: hidden;







    cursor: grab;







}















.project-carousel.dragging {







    cursor: grabbing;







}















.project-carousel-list {







    display: flex;







    list-style: none;







    margin: 0;







    padding: var(--spacing-sm) 0;







}















.project-carousel-item {







    flex: 0 0 calc(100% / 3);







    padding: 0 var(--spacing-xl);







    box-sizing: border-box;







}















.project-card {







    position: relative;







    border-radius: var(--spacing-sm);







    background: transparent;







    overflow: hidden;







    color: var(--neutral-text-off-white-color);







    box-shadow: 0rem 0rem 1.6rem rgba(var(--secondary-primary-color-rgb), 0.25);







    height: 100%;







    display: flex;







    flex-direction: column;







}















.project-card::before {







    content: "";







    position: absolute;







    inset: 0;







    padding: 3px; /* tebal border */







    border-radius: inherit;







    background: linear-gradient(90deg, var(--primary-color), var(--secondary-primary-color));







    -webkit-mask: 







        linear-gradient(#fff 0 0) content-box, 







        linear-gradient(#fff 0 0);







    -webkit-mask-composite: xor;







            mask-composite: exclude;







    pointer-events: none;







}























.project-card img {







    width: 95%;







    height: 250px;







    object-fit: cover;







    border-radius: var(--border-radius-sm);







    display: block;







    margin: var(--spacing-sm) auto;







}















.project-card-content {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-sm);







    padding: var(--spacing-sm);







}















.project-card-content .project-client {







    font-style: italic;







}















.project-card-content p {







    text-align: justify;







    margin-bottom: var(--spacing-sm);







}















.dots-wrapper {







    margin-top: var(--spacing-md);







    width: 130px; 







    overflow: hidden;







    margin: 0 auto;







}















.carousel-dots {







    display: flex;







    align-items: center;







    height: 20px; 







    transition: transform 0.5s ease-out; 







}















.dot {







    flex-shrink: 0;







    width: 12px;







    height: 12px;







    border-radius: 50%;







    background-color: var(--neutral-pure-color);







    margin: 0 var(--spacing-xs);







    border: 2px solid var(--neutral-pure-color);







    cursor: pointer;







    transition: background-color var(--transition-medium), transform var(--transition-medium);







}















.dot.active {







    background-color: var(--secondary-color);







    border: 2px solid var(--secondary-color);







    transform: scale(1.2);







}















@media (max-width: 992px) {







    .project-carousel-item {







        flex-basis: calc(100% / 2);







    }







}















@media (max-width: 768px) {







    .project-section > .container > p {







        width: 100%;







    }







    







    .project-carousel-item {







        flex-basis: 100%;







    }







}















/*=============================================







=                   Product                   =







=============================================*/















.product-section {







    background: linear-gradient(180deg, var(--neutral-very-dark-blue), var(--neutral-dark-color));







}















.product-section > .content-flex {







    flex-direction: column;







    justify-content: center;







    align-items: center;







    gap: var(--spacing-md);







}















.product-section > .content-flex > h2 {







    padding: var(--spacing-xs);







    color: var(--neutral-pure-color);







    border-bottom: 5px solid var(--secondary-color);







}















.product-section > .content-flex > p {







    width: 50%;







    margin: 0 auto;







    line-height: var(--line-height-md);







    margin-bottom: var(--spacing-md);







    text-align: center;







    color: var(--neutral-pure-color);







}















.product-list {







    width: 100%;







    display: flex;







    flex-direction: column;







    gap: var(--spacing-lg);







}















.product-item {







    flex-direction: row;







    gap: var(--spacing-xl);







}















.product-item:nth-child(even) {







    flex-direction: row-reverse;







}















.product-image, .product-content {







    flex: 1 1 50%;







}















.product-image {







    align-items: center;







}















.product-image img {







    margin: 0 auto;







    max-width: 80%;







    height: auto;







    object-fit: contain;







    border-radius: var(--border-radius-md);







}















.product-content {







    display: flex;







    flex-direction: column;







    align-items: flex-start;







    gap: var(--spacing-sm);







    border-bottom: 3px solid var(--primary-color);







    padding-bottom: var(--spacing-md);







}















.product-content > p {







    color: var(--neutral-text-off-white-color);







    margin-bottom: var(--spacing-md);







}























.button-product-detail {







    display: inline-flex;







    align-items: center;







    justify-content: center;







    gap: var(--spacing-sm);







    padding: var(--spacing-sm) var(--spacing-md);















    /* border gradient */







    border: 2px solid transparent;







    border-radius: var(--border-radius-xxl);







    background: 







        linear-gradient(var(--neutral-very-dark-blue), var(--neutral-very-dark-blue)) padding-box,







        linear-gradient(90deg, var(--primary-color), var(--secondary-primary-color)) border-box;















    /* styling tambahan */







    color: var(--neutral-text-off-white-color);







    box-shadow: 0rem 0rem 1.6rem rgba(var(--secondary-primary-color-rgb), 0.25);







    cursor: pointer;







    transition: background-color var(--transition-fast), transform var(--transition-fast);







}















.button-product-detail:hover{







    background-color: var(--neutral-pure-color);







}















.button-product-detail:active{







    background-color: var(--primary-color);















    box-shadow: inset var(--shadow-md);







}















.product-item > .product-image.product-animate {







    opacity: 0;







    transition: transform var(--transition-medium), opacity var(--transition-medium);







    transform: translateX(-50px);







}















.product-item > .product-content.product-animate {







    opacity: 0;







    transition: transform var(--transition-medium), opacity var(--transition-medium);







    transform: translateX(50px);







}















.product-item:nth-child(even) > .product-image.product-animate {







    opacity: 0;







    transition: transform var(--transition-medium), opacity var(--transition-medium);







    transform: translateX(50px);







}















.product-item:nth-child(even) > .product-content.product-animate {







    opacity: 0;







    transition: transform var(--transition-medium), opacity var(--transition-medium);







    transform: translateX(-50px);







}























.product-item > .product-image.product-animate.is-visible,







.product-item > .product-content.product-animate.is-visible,







.product-item:nth-child(even) > .product-image.product-animate.is-visible,







.product-item:nth-child(even) > .product-content.product-animate.is-visible {







    opacity: 1;







    transform: translateX(0);







}















@media (max-width: 992px) {







    .product-section > .content-flex > p {







        width: 80%;







    }







}















@media (max-width: 768px) {







    .product-section > .content-flex {







        gap: var(--spacing-sm);







    }















    .product-section > .content-flex > h2 {







        text-align: center;







    }















    .product-section > .content-flex > p {







        width: 100%;







    }







    







    .product-list {







        gap: var(--spacing-sm);







    }







    .product-item {







        flex-direction: column;







        gap: var(--spacing-md);







    }















    .product-item:nth-child(even) {







        flex-direction: column;







    }















    .product-image {







        padding: 0;







    }







}















/*=============================================







=                   Client                    =







=============================================*/















.clients-section {







    background-color: var(--neutral-pure-color);







}















.clients-section > .content-flex {







    flex-direction: column;







    justify-content: center;







    align-items: center;







    gap: var(--spacing-md);







}















.clients-section > .container > h2 {







    padding: var(--spacing-xs);







    border-bottom: 5px solid var(--secondary-color);







}















.clients-slider {







    width: 100%;







    overflow: hidden;







    position: relative;







}















.clients-track {







    display: flex;







    gap: var(--spacing-md);







    animation: scrollClients 40s linear infinite;







}















.clients-track img {







    max-height: 60px;







    max-width: 120px;







    object-fit: contain;







    margin: 0 var(--spacing-md); 







    transition: filter 0.5s;







}















@keyframes scrollClients {







    0% {    







        transform: translateX(0);







    }







    100% {







        transform: translateX(-50%);







    }







} 















/*=============================================







=                 Testimoni                   =







=============================================*/















.testimonial-section {







    background: linear-gradient(180deg, var(--neutral-very-dark-blue), var(--neutral-dark-color));







}















.testimonial-section > .content-flex {







    flex-direction: column;







    justify-content: center;







    align-items: center;







    gap: var(--spacing-sm);







}















.testimonial-section > .content-flex {







    text-align: justify;







    color: var(--neutral-pure-color);







}















.testimonial-section > .content-flex > h2 {







    padding: var(--spacing-xs);







    border-bottom: 5px solid var(--secondary-color);







}















.testimonial-section > .content-flex > p {







    width: 50%;







    margin: 0 auto;







    line-height: var(--line-height-md);







    margin-bottom: var(--spacing-md);







    text-align: center;







}















.testimonial-slider {







    max-width: 100%;







    margin: auto;







    overflow: hidden;







}















.testimonial-list {







    display: flex;







    padding: 0;







    margin: 0;







    width: 100%;







    list-style: none;







    transition: transform 0.6s ease-in-out;







}















.testimonial-item {







    flex: 0 0 100%;







    width: 100%;







    display: flex;







    box-sizing: border-box;







    padding: var(--spacing-md);







    justify-content: center;







}















.testimonial-card {







    background-color: var(--neutral-pure-color);







    width: 100%;







    display: flex;







    justify-content: space-between;







    min-height: 200px;







    box-shadow: 0rem 0rem 1.6rem rgba(var(--secondary-primary-color-rgb), 0.25);







    border-radius: var(--spacing-sm);







    gap: var(--spacing-md);







    padding: var(--spacing-xl);







}















.testimonial-content {







    flex: 1 1 75%;







}















.testimonial-image-project {







    flex: 0 0 25%;







}















.testimonial-image-project img {







    height: auto;







    width: auto;







    max-width: 200px;







    border-radius: var(--border-radius-md);







}















.testimonial-text {







    display: flex;







    flex-direction: column;







    justify-content: space-between;







    margin: 0 var(--spacing-lg);







    color: var(--neutral-text-color);







    position: relative;







    gap: var(--spacing-md);







    height: 100%;







}















.testimonial-item-name {







    color: var(--secondary-color);







}















.testimonial-text .quote-icon {







    position: absolute;







    top: -20px;







    left: -25px;







    width: 50px;







    height: 50px;







    object-fit: contain;







    z-index: 1;







    pointer-events: none;







}















.testimonial-text blockquote {







    position: relative;







    z-index: 2;







    text-align: justify;







}























.testimonial-stars {







    display: flex;







    gap: 0.25rem;







    font-size: 1.2rem;







    color: #fbbf24;







}















.testimonial-stars i {







    cursor: default;







}















.testimonial-author {







    display: flex;







    justify-content: start;







    gap: var(--spacing-md);







}















.testimonial-author-info {







    display: flex;







    justify-content: space-between;







    flex-direction: column;







    gap: var(--spacing-xs);







}















.testimonial-author-info > h4 {







    margin: 0;







}















.testimonial-author img {







    width: 80px;







    height: 80px;







    aspect-ratio: 1 / 1;







    border-radius: var(--border-radius-circle);







    border: 1px solid var(--neutral-border-color)







}















.testimonial-image-project{







    display: flex;







    align-items: center;







    justify-content: center;







}















.testimonial-image-project img {







    margin: auto;







    max-width: 100%;







    height: auto;







    object-fit: contain;







    border-radius: var(--border-radius-md);







}















@media (max-width: 992px) {







    /* Menghapus padding dari list untuk mencegah error kalkulasi slide */







    .testimonial-list {







        padding: 0; 







    }















    /* Padding tetap bisa ditambahkan pada item individual jika perlu */







    .testimonial-item {







        padding: var(--spacing-md);







    }















    .testimonial-author img {







        width: 60px;







        height: 60px;







    }







}















@media (max-width: 768px) {







    .testimonial-content {







        padding: 0;







    }















    .testimonial-section > .content-flex > p {







        text-align: justify;







    }















    .testimonial-card {







        flex-direction: column-reverse;







        padding: var(--spacing-md);







        gap: var(--spacing-sm);







    }















    .testimonial-text .quote-icon {







        top: -10px;







        left: -15px;







        width: 30px;







        height: 30px;







    }















    .testimonial-text {







        margin: 0;







    }















    .testimonial-author {







        padding: 0;







        flex-direction: row;







    }















    .testimonial-image-project {







        padding: 0;







        /* Pastikan container image mengambil lebar penuh */







        width: 100%;







    }















    /* ATURAN YANG DIPERBAIKI UNTUK GAMBAR */







    .testimonial-image-project img {







        display: block;







        margin: 0 auto;







        max-width: 50%;







        height: auto;







    }















    .testimonial-author img {







        width: 50px;







        height: 50px;







    }







}















@media (max-width: 480px) {







    .testimonial-section > .content-flex > p {







        width: 80%;







    }







}















/*=============================================







=                   Contact                   =







=============================================*/







.contact-section {







    background-color: var(--neutral-pure-color);







}















.contact-title {







    margin-bottom: var(--spacing-md);







    padding-left: var(--spacing-lg);







    border-left: 5px solid var(--secondary-color);







}















.contact-caption {







    margin-bottom: var(--spacing-xxl);







    color: var(--neutral-text-color);







    width: 50%;







    text-align: justify;







}















.contact-map, .contact-text{







    flex: 1 1 50%;







}















.contact-map {







    flex: 1;







    min-width: 50%;







    position: relative;







}















.contact-map::before {







    content: '';







    position: absolute;







    top: -20px;







    left: 0;







    width: 20%;







    height: 60%;







    z-index: 0;







    background-color: var(--secondary-color);







}















.contact-map iframe {







    position: relative;







    z-index: 1;







    aspect-ratio: 1 / 1;







    left: 30px;







    width: 80%;







    border: 0;







    border-radius: var(--border-radius-md);







    box-shadow: var(--shadow-md);







}















.contact-text {







    display: flex;







    flex-direction: column;







}















.contact-text > * {







    margin-bottom: var(--spacing-md);







}















.contact-text > p {







    color: var(--neutral-text-color);







    text-align: justify;







}















.contact-text > a.button-whatsapp {







    justify-content: center;







}















.contact-one-content {







    justify-content: start;







    align-items: stretch;







    gap: var(--spacing-md);







}















.contact-two-content {







    justify-content: space-between;







    align-items: stretch;







    gap: var(--spacing-md);







}















.contact-two-content > div {







    flex: 1 1 50%;







    justify-content: start;







    align-items: stretch;







    gap: var(--spacing-md);







}















.contact-content {







    flex-direction: column;







    gap: var(--spacing-xs);







}















.contact-icon {







    height: 100%;







    max-height: 60px;







    width: auto;







    object-fit: contain;







}















.contact-subtitle {







    font-size: 2.2rem;







    margin: 0;







}















.button-whatsapp {







    align-self: center;







    display: inline-flex;







    align-items: center;







    justify-content: center;







    gap: var(--spacing-sm);







    background-color: #25D366;







    color: var(--neutral-pure-color);







}















.button-whatsapp:hover {







    background-color: #1ebe5d;







    transform: scale(1.02);







    transition: all 0.3s ease;







}















.button-whatsapp:active {







    background-color: #189d4c;







    transform: scale(0.98);







    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);







}















.contact-icon-whatsapp {







    max-height: 20px;







    width: auto;







    object-fit: contain;







}















/* Icon WhatsApp agar tinggi proporsional */







.contact-icon-whatsapp {







    height: 20px;







    width: auto;







    display: inline-block;







}















@media (max-width: 1024px) {







    .contact-subtitle {







        font-size: 2rem;







    }







    







    .contact-two-content {







        gap: var(--spacing-sm);







    }















    .contact-two-content > div {







        gap: var(--spacing-sm);







    }















    .contact-content {







        justify-content: start;







    }















    .contact-icon {







        max-height: 45px;   







    }







}















@media (max-width: 768px) {







    .contact-subtitle {







        font-size: 1.8rem;







    }















    .contact-caption {







        width: 100%;







        margin-bottom: var(--spacing-md);







    }







    .contact-icon {







        max-height: 50px;   







    }















    .contact-map::before {







        width: 15%;







        height: 40%;







    }







    







    .contact-map iframe { 







        aspect-ratio: 16 / 9;







        left: 20px;







        width: 90%;







        height: 80%;







    }















    .contact-text * {







        margin-bottom: var(--spacing-sm);







    }















    .contact-one-content {







        padding: 0;







        flex-direction: row;







    }















    .contact-content {







        padding: 0;







        gap: 0;







    }















    .contact-two-content {







        padding: 0;







        gap: 0;







        margin: 0;







    }























    .contact-two-content > .content-flex{







        flex-direction: row;







        padding: 0;







        gap: var(--spacing-md);







    }















    .button-whatsapp > *{







        margin: 0;







    }







}















/*=============================================







=                  Blog Menu                  =







=============================================*/







.blog-title-page {







    position: relative;







    height: 300px;







    display: flex;







    align-items: center;







    justify-content: center;







    color: white;







    text-align: center;







}















.blog-title-page::before {







    content: "";







    position: absolute;







    top: 0; left: 0; right: 0; bottom: 0;







    background-color: rgba(0, 0, 0, 0.3); /* overlay hitam transparan */







    z-index: 1;







}















.blog-title-container {







    position: relative;







    z-index: 2;







}















.blog-title-container h1 {







    padding: var(--spacing-sm);







    display: inline-block;







    border-bottom: 4px solid var(--secondary-color); /* garis oranye */







    padding-bottom: 5px;







}















.dropdown-filter-item {







    display: flex;







    justify-content: center;







    align-items: center;







    margin-bottom: var(--spacing-lg);







    gap: var(--spacing-md);







}















/* Style untuk dropdown */







.select-category,







.select-tag {







    padding: 0.5rem 1rem;







    background-color: transparent;







    border: 1px solid #ccc; /* warna abu-abu */







    border-radius: 4px;







    







    /* Font styling */







    font-style: italic;         /* Bisa diganti ke normal, oblique, dll */







    font-size: 1rem;            /* Ubah ke 0.875rem, 1.25rem, dsb sesuai kebutuhan */







    font-family: 'Arial', sans-serif;  /* Font family yang umum digunakan */















    color: #333;







    cursor: pointer;







    appearance: none; /* hilangkan gaya default browser */







}















/* Efek focus */







.select-category:focus,







.select-tag:focus {







    outline: none;







    border-color: #999;







    box-shadow: 0 0 0 2px rgba(200, 200, 200, 0.2);







}















.blog-list-container {







    display: grid;







    grid-template-columns: repeat(3, 1fr);







    gap: var(--spacing-xl);







    list-style: none;







    padding: 0;







    margin: 0 auto;







    max-width: 1200px;







}















.blog-item {







    list-style: none;







}















.blog-link {







    text-decoration: none;







    display: flex;







    flex-direction: column;







    overflow: hidden;







    background-color: transparent;







    width: auto;







    color: var(--neutral-text-color);







    gap: var(--spacing-xs);







    transition: transform var(--transition-fast);







    height: 100%;







}















.blog-image-container {







    position: relative;







    height: 250px;







    overflow: hidden;







}















.blog-image-container img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    display: block;







}















.blog-title {







    margin: -1.5em 0 0 0;  /* naikkan ke atas agar overlap */







    padding: var(--spacing-sm) 0;







    z-index: 1;







    width: 80%;







    font-size: 2.0rem;







    background-color: var(--neutral-pure-color);







    position: relative;







}















.blog-meta {







    position: relative;







    padding: var(--spacing-sm) 0;







}















.blog-meta::after {







    content: "";







    position: absolute;







    bottom: 0;







    left: 0;







    width: 40%;      /* separuh */







    height: 3px;







    background-color: var(--secondary-primary-color);







}















.blog-excerpt {







    padding: var(--spacing-sm) 0;







    line-height: var(--line-height-md);







    text-align: justify;







}















.blog-readmore-container {







    justify-self: flex-end;







    padding: var(--spacing-sm) 0;







    margin-top: auto;







}















.blog-readmore {







    text-decoration: none;







    font-weight: bold;







    color: var(--secondary-primary-color);







}















.blog-readmore > span {







    margin: 0 var(--spacing-xs);







}















.blog-link:hover {







    transform: translateY(-5px);







    cursor: pointer;







}















.blog-link:hover .blog-readmore-container .blog-readmore{







    color: var(--secondary-color);







}















.blog-link:hover .blog-meta::after{







    background-color: var(--secondary-color);







}















.button-blog-container {







    display: flex;







    justify-content: center;







    margin: var(--spacing-xl) 0;







}















.button-more-post{







    background-color: var(--secondary-color);







    color: var(--neutral-pure-color);







}















.button-more-post:hover{







    background-color: var(--secondary-color-dark); /* Darker shade on hover */







    box-shadow: var(--shadow-md);







}















.button-more-post:active{







    background-color: var(--secondary-color);







    opacity: 0.8;







    box-shadow: inset var(--shadow-md);







}















@media screen and (max-width: 768px) {







    .blog-list-container {







        grid-template-columns: repeat(2, 1fr);







    }















    .blog-title {







        font-size: 1.8rem;







    }







}















@media screen and (max-width: 576px) {







    .blog-list-container {







        grid-template-columns: 1fr;







    }







    







    .blog-title {







        font-size: 1.6rem;







    }







}















/* Skeleton Loading Style */







.skeleton-item {







    list-style: none;







}















.skeleton-blog-card {







    border-radius: 12px;







    padding: 16px;







    margin-bottom: 24px;







    overflow: hidden;







}















.skeleton-img,







.skeleton-title,







.skeleton-meta,







.skeleton-text {







    background: #ddd;







    border-radius: 8px;







    margin-bottom: 12px;







}















.skeleton-img {







    width: 100%;







    height: 180px;







}















.skeleton-title {







    width: 80%;







    height: 20px;







}















.skeleton-meta {







    width: 50%;







    height: 16px;







}















.skeleton-text {







    width: 100%;







    height: 40px;







}















/* Shimmer effect */







.shimmer {







    position: relative;







    overflow: hidden;







}















.shimmer::before {







    content: "";







    position: absolute;







    top: 0;







    left: -150%;







    width: 50%;







    height: 100%;







    background: linear-gradient(







        90deg,







        transparent,







        rgba(255, 255, 255, 0.15),







        transparent







    );







    animation: shimmer 1.5s infinite;







}















@keyframes shimmer {







    100% {







        left: 150%;







    }







}























/*=============================================







=                 Blog Detail                 =







=============================================*/















.blog-header {







    background-color: var(--neutral-pure-color);







    padding: calc(var(--spacing-md) + 50px) 0 var(--spacing-xs) 0;







    color: var(--neutral-text-off-white-color); 







}















.blog-content {







    padding: var(--spacing-md) 0;







}















.container.container-blog-content {







    max-width: 80rem;







    display: flex;







    flex-direction: column;







    gap: var(--spacing-md);







}















.blog-content-title {







    color: var(--secondary-primary-color);







}















.blog-content-category-list {







    display: flex;







    justify-content: center;







    gap: var(--spacing-sm);







    flex-wrap: wrap;







}















.blog-content-category-item {







    list-style: none;







    margin: var(--spacing-xs) 0;







}















.blog-content-category-link {







    text-decoration: none;







    color: var(--secondary-primary-color);







    font-weight: var(--font-weight-bold);







    white-space: normal;







    word-break: break-word;







    padding: var(--spacing-xs) var(--spacing-md);







    border: 1px solid var(--neutral-border-secondary-color);







    border-radius: var(--border-radius-xl);







    transition: background-color 0.3s ease, color 0.3s ease;







}















.blog-content-category-link:hover {







    background-color: var(--secondary-primary-color);







    color: var(--neutral-text-off-white-color);







    box-shadow: var(--shadow-md);







}















.blog-content-publish {







    display: flex;







    justify-content: space-between;







    align-items: center;







    gap: var(--spacing-sm);







    border-bottom: 1px solid #ddd;







    padding-bottom: var(--spacing-sm);







}















.blog-content-publisher {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







}















.publisher-profile {







    width: 40px;







    height: 40px;







    border-radius: var(--border-radius-circle);







    object-fit: cover;







}















.publisher-name {







    font-weight: var(--font-weight-bold);







    color: var(--neutral-text-color);







}















.publish-date{







    color: var(--neutral-text-secondary-color);







}















.blog-content-share .share-icon {







    color: var(--neutral-text-secondary-color);







    transition: color 0.3s;







    cursor: pointer;







    font-size: 2.2rem;







}















.blog-content-share .share-icon:hover {







    color: var(--secondary-primary-color);







}















.blog-content-tag {







    display: flex;







    gap: var(--spacing-sm);







}















.blog-content-tag p {







    font-weight: var(--font-weight-bold);







    color: var(--neutral-text-color);







}















.blog-content-tag-list {







    display: flex;







    flex-wrap: wrap;







    gap: var(--spacing-sm);







}















.blog-content-tag-item {







    margin: var(--spacing-xs) 0;







    list-style: none;







}















.blog-content-tag-link {







    color: var(--secondary-primary-color);







    text-decoration: none;







    font-weight: var(--font-weight-bold);







    background-color: var(--neutral-dominant-color);







    padding: var(--spacing-xs) var(--spacing-md);







    border-radius: var(--border-radius-xl);







    transition: background-color 0.3s ease, color 0.3s ease;







}















.blog-content-tag-link:hover {







    background-color: var(--secondary-color);







    color: var(--neutral-text-off-white-color);







    box-shadow: var(--shadow-md);







}















.blog-featured-image {







    display: flex;







    flex-direction: column;







    justify-content: center;







    align-items: center;







    padding: 0 var(--spacing-md);







    gap: var(--spacing-sm);







}















.blog-featured-image img {







    width: 100%;







    max-width: 1000px;







    max-height: 600px;







    height: auto;







    object-fit: cover; /* 🔄 dari contain ke cover */







    border-radius: var(--border-radius-xl);







    box-shadow: var(--shadow-md);







}















.blog-featured-image figcaption {







    text-align: center;







    margin-top: var(--spacing-sm);







    font-style: italic;







    color: var(--neutral-text-secondary-color);







}















.container.container-blog-article {







    max-width: 100rem;







    display: block;







    gap: var(--spacing-md);







    padding: var(--spacing-sm) var(--spacing-md);







}















.blog-content-body {







    flex: 1;







    color: var(--neutral-text-color);







}















.blog-recomendation {







    padding: var(--spacing-lg) 0;







    







}























.blog-lastest-article-list {







    display: grid;







    grid-template-columns: repeat(3, 1fr);







    gap: var(--spacing-xl);







}















.blog-lastest-card {







    transition: transform var(--transition-fast);







    height: 100%;







}















.blog-recomendation-link {







    text-decoration: none;







    display: flex;







    flex-direction: column;







    gap: var(--spacing-sm);







    background-color: transparent;







    width: auto;







    gap: var(--spacing-xs);







    color: var(--neutral-text-color);







    background-color: transparent;







}















.blog-image-container img {







    width: 100%;







    height: 100%;







    object-fit: cover;







    display: block;







}















.blog-title {







    margin: -1.5em 0 0 0;







    padding: var(--spacing-sm) 0;







    z-index: 1;







    width: 80%;







    font-size: 1.6rem;







    background-color: var(--neutral-pure-color);







    position: relative;







}















.blog-meta {







    padding: var(--spacing-sm) 0;







}















.blog-date {







    padding: var(--spacing-sm) 0;







    border-bottom: 3px solid var(--primary-color);







}























.blog-lastest-card:hover {







    transform: translateY(-5px);







    cursor: pointer;







}















.blog-lastest-card:hover .blog-recomendation-link .blog-title{







    color: var(--secondary-color);







}















.blog-lastest-card:hover .blog-meta::after {







    color: var(--secondary-color);







}















@media (max-width: 992px) {







    .blog-content-share .share-icon{







        font-size: 1.8rem;







    }







}















@media (max-width: 768px) {







    .blog-header {







        padding: calc(var(--spacing-md) + 30px) 0 var(--spacing-xs) 0;







    }















    .publisher-profile {







        width: 30px;







        height: 30px;







    }















    .blog-lastest-article-list {







        grid-template-columns: repeat(2, 1fr);







    }







    







    







    .blog-content-share .share-icon{







        font-size: 1.6rem;







    }















    .container.container-blog-content {







        gap: var(--spacing-xs);







    }















    .container.container-blog-article {







        flex-direction: column;







    }







}















@media (max-width: 480px) {







    







    .blog-lastest-article-list {







        grid-template-columns: 1fr;







    }







}























/*=============================================







=                   Editable                  =







=============================================*/







.cms-editor-wrapper {







    background-color: var(--neutral-text-off-white-color);







    color: #000000;







    width: 100%;







    display: flex;







    flex-direction: column;







    gap: var(--spacing-xs);







    padding: var(--spacing-sm);







    border-radius: var(--border-radius-sm);







    border: 1px solid var(--neutral-border-color);







}















.cms-editable-textarea {







    width: 100%;







    height: 120px;







    font-size: 1.4rem;







    padding: 4px;







    box-sizing: border-box;







    border-radius: var(--border-radius-sm);







    color: #000000







}















.cms-editable-input  {







    width: 100%;







    font-size: 1.4rem;







    padding: 4px;







    box-sizing: border-box;







    border-radius: var(--border-radius-sm);







    color: #000000;







}















.cms-editor-buttons {







    display: flex;







    justify-content: flex-start; /* tombol bisa disesuaikan */







    gap: 8px; /* jarak antar tombol */







    margin-top: 8px;







    color: #000000;







}















.button-cms-simpan {







    margin-top: 6px;







    margin-right: 6px;







    background-color: #28a745;







    color: #fff;







}















.button-cms-batal {







    margin-top: 6px;







    background-color: #dc3545;







    color: #fff;







}















.cms-editable-link {







    display: flex;







}















/* === tambahan untuk image === */







.cms-editable-input[type="file"] {







    font-size: 1.2rem;







}















.cms-image-preview {







    border: 1px dashed #bbb;







    border-radius: var(--border-radius-sm);







    display: flex;







    justify-content: center;







    align-items: center;







    padding: 4px;







    background: #fafafa;







}















.cms-image-preview img {







    max-width: 100%;







    max-height: 180px;







    border-radius: var(--border-radius-sm);







    object-fit: contain;







}















.test-text{







font-size: 1rem;







}