.madxartwork-kit-5{--e-global-color-primary:#132340;--e-global-color-secondary:#0B172B;--e-global-color-text:#252B35;--e-global-color-accent:#E8B647;--e-global-color-24a8e4c:#C99B38;--e-global-color-2010727:#F7F4EC;--e-global-color-d8f8a5a:#FFFFFF;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;}.madxartwork-section.madxartwork-section-boxed > .madxartwork-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.madxartwork-widget:not(:last-child){margin-bottom:20px;}.madxartwork-element{--widgets-spacing:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.madxartwork-section.madxartwork-section-boxed > .madxartwork-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.madxartwork-section.madxartwork-section-boxed > .madxartwork-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   SILICONE INDONESIA
   ROYAL LUXURY NAVY & GOLD
   madxartwork + WooCommerce
   ========================================================= */


/* =========================================================
   1. GLOBAL VARIABLES
   ========================================================= */

:root {
    --si-navy: #132340;
    --si-midnight: #0B172B;
    --si-navy-light: #20385E;

    --si-gold: #E8B647;
    --si-gold-dark: #C99B38;
    --si-gold-light: #F5D98E;

    --si-ivory: #F7F4EC;
    --si-white: #FFFFFF;
    --si-charcoal: #252B35;
    --si-muted: #777777;
    --si-border: #E7E0D2;

    --si-heading-font: 'Playfair Display', serif;
    --si-body-font: 'Montserrat', sans-serif;

    --si-radius: 10px;
    --si-shadow: 0 8px 30px rgba(11, 23, 43, 0.10);
    --si-shadow-hover: 0 15px 40px rgba(11, 23, 43, 0.18);
}


/* =========================================================
   2. GLOBAL RESET & BODY
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--si-body-font);
    color: var(--si-charcoal);
    background: var(--si-white);
    line-height: 1.7;
    font-size: 15px;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--si-gold);
    color: var(--si-navy);
}


/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */

h1, h2, h3, h4, h5, h6,
.madxartwork-heading-title {
    font-family: var(--si-heading-font);
    color: var(--si-navy);
    font-weight: 600;
    line-height: 1.25;
}

h1 { font-size: clamp(36px, 5vw, 58px); }
h2 { font-size: clamp(30px, 4vw, 44px); }
h3 { font-size: clamp(24px, 3vw, 32px); }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 17px; }

p {
    margin-bottom: 18px;
}

strong, b {
    font-weight: 700;
}

small {
    font-size: 12px;
}

.si-gold-text {
    color: var(--si-gold) !important;
}


/* =========================================================
   4. LINKS
   ========================================================= */

a {
    color: var(--si-gold-dark);
    text-decoration: none;
    transition: color .25s ease, opacity .25s ease;
}

a:hover {
    color: var(--si-navy);
}

a:focus-visible {
    outline: 2px solid var(--si-gold);
    outline-offset: 3px;
}


/* =========================================================
   5. LISTS & BLOCKQUOTE
   ========================================================= */

ul, ol {
    padding-left: 22px;
}

li {
    margin-bottom: 7px;
}

blockquote {
    border-left: 4px solid var(--si-gold);
    padding: 20px 25px;
    background: var(--si-ivory);
    color: var(--si-navy);
    border-radius: 0 var(--si-radius) var(--si-radius) 0;
    margin: 25px 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--si-border);
    margin: 30px 0;
}


/* =========================================================
   6. madxartwork CONTAINERS & SECTIONS
   ========================================================= */

.madxartwork-section,
.e-con {
    position: relative;
}

.si-hero {
    background: linear-gradient(
        120deg,
        var(--si-midnight),
        var(--si-navy)
    );
    color: var(--si-white);
}

.si-dark-section {
    background: var(--si-midnight);
    color: var(--si-white);
}

.si-light-section {
    background: var(--si-ivory);
}

.si-gold-section {
    background: linear-gradient(
        135deg,
        var(--si-gold-light),
        var(--si-gold)
    );
}

.si-dark-section h1,
.si-dark-section h2,
.si-dark-section h3,
.si-dark-section h4,
.si-hero h1,
.si-hero h2,
.si-hero h3 {
    color: var(--si-white);
}

.si-section-title {
    margin-bottom: 25px;
    position: relative;
}

.si-eyebrow {
    color: var(--si-gold-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 12px;
}


/* =========================================================
   7. BUTTONS - madxartwork
   ========================================================= */

.madxartwork .madxartwork-button,
.madxartwork a.madxartwork-button,
.madxartwork button.madxartwork-button {
    background: var(--si-navy);
    color: var(--si-gold-light) !important;
    border: 1px solid var(--si-navy);
    border-radius: 5px;
    padding: 14px 28px;
    font-family: var(--si-body-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

/* Hover tombol utama */
.madxartwork .madxartwork-button:hover,
.madxartwork a.madxartwork-button:hover,
.madxartwork button.madxartwork-button:hover {
    background: var(--si-gold) !important;
    color: var(--si-navy) !important;
    border-color: var(--si-gold) !important;
    box-shadow: 0 7px 20px rgba(232, 182, 71, .25);
    transform: translateY(-2px);
}

/* Pastikan teks tombol tetap terlihat */
.madxartwork .madxartwork-button .madxartwork-button-text,
.madxartwork a.madxartwork-button .madxartwork-button-text,
.madxartwork button.madxartwork-button .madxartwork-button-text {
    color: inherit !important;
    transition: color .3s ease;
}

.madxartwork .madxartwork-button:hover .madxartwork-button-text,
.madxartwork a.madxartwork-button:hover .madxartwork-button-text,
.madxartwork button.madxartwork-button:hover .madxartwork-button-text {
    color: var(--si-navy) !important;
}

/* Ikon tombol */
.madxartwork .madxartwork-button .madxartwork-button-icon,
.madxartwork .madxartwork-button .madxartwork-button-icon i,
.madxartwork .madxartwork-button .madxartwork-button-icon svg {
    color: inherit !important;
    fill: currentColor !important;
}

.madxartwork .madxartwork-button:hover .madxartwork-button-icon,
.madxartwork .madxartwork-button:hover .madxartwork-button-icon i,
.madxartwork .madxartwork-button:hover .madxartwork-button-icon svg {
    color: var(--si-navy) !important;
    fill: var(--si-navy) !important;
}


/* =========================================================
   8. BUTTON VARIATIONS
   ========================================================= */

/* Gold button */
.si-btn-gold .madxartwork-button {
    background: var(--si-gold);
    color: var(--si-navy) !important;
    border-color: var(--si-gold);
}

.si-btn-gold .madxartwork-button:hover {
    background: var(--si-navy) !important;
    color: var(--si-gold-light) !important;
    border-color: var(--si-navy) !important;
}

.si-btn-gold .madxartwork-button:hover .madxartwork-button-text,
.si-btn-gold .madxartwork-button:hover .madxartwork-button-icon,
.si-btn-gold .madxartwork-button:hover .madxartwork-button-icon i {
    color: var(--si-gold-light) !important;
}

/* Outline button */
.si-btn-outline .madxartwork-button {
    background: transparent;
    color: var(--si-gold) !important;
    border: 1px solid var(--si-gold);
}

.si-btn-outline .madxartwork-button:hover {
    background: var(--si-gold) !important;
    color: var(--si-navy) !important;
    border-color: var(--si-gold) !important;
}

.si-btn-outline .madxartwork-button:hover .madxartwork-button-text,
.si-btn-outline .madxartwork-button:hover .madxartwork-button-icon {
    color: var(--si-navy) !important;
}

/* Dark button */
.si-btn-dark .madxartwork-button {
    background: var(--si-midnight);
    color: var(--si-gold-light) !important;
}

.si-btn-dark .madxartwork-button:hover {
    background: var(--si-gold) !important;
    color: var(--si-navy) !important;
}


/* =========================================================
   9. STANDARD HTML BUTTONS
   ========================================================= */

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background: var(--si-navy);
    color: var(--si-gold-light);
    border: 1px solid var(--si-navy);
    border-radius: 5px;
    padding: 12px 22px;
    font-family: var(--si-body-font);
    font-weight: 700;
    cursor: pointer;
    transition: all .3s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background: var(--si-gold);
    color: var(--si-navy);
    border-color: var(--si-gold);
}


/* =========================================================
   10. ICON & ICON BOX
   ========================================================= */

.madxartwork-icon {
    color: var(--si-gold);
    transition: all .3s ease;
}

.madxartwork-icon-box-wrapper {
    transition: transform .3s ease;
}

.madxartwork-icon-box-wrapper:hover {
    transform: translateY(-5px);
}

.madxartwork-icon-box-title {
    color: var(--si-navy);
    font-family: var(--si-heading-font);
}


/* =========================================================
   11. IMAGES & IMAGE BOX
   ========================================================= */

.madxartwork-widget-image img {
    border-radius: var(--si-radius);
    transition: transform .4s ease, box-shadow .4s ease;
}

.madxartwork-widget-image img:hover {
    transform: scale(1.02);
    box-shadow: var(--si-shadow);
}

.madxartwork-image-box-title {
    font-family: var(--si-heading-font);
    color: var(--si-navy);
}


/* =========================================================
   12. CARDS
   ========================================================= */

.si-card,
.madxartwork-widget-icon-box,
.madxartwork-widget-image-box {
    border-radius: var(--si-radius);
    transition: transform .3s ease, box-shadow .3s ease;
}

.si-card:hover,
.madxartwork-widget-icon-box:hover,
.madxartwork-widget-image-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--si-shadow-hover);
}


/* =========================================================
   13. TESTIMONIAL
   ========================================================= */

.madxartwork-testimonial {
    background: var(--si-ivory);
    border-radius: var(--si-radius);
    padding: 25px;
}

.madxartwork-testimonial__text {
    color: var(--si-charcoal);
    font-style: italic;
}

.madxartwork-testimonial__name {
    color: var(--si-navy);
    font-weight: 700;
}


/* =========================================================
   14. TABS, ACCORDION & TOGGLE
   ========================================================= */

.madxartwork-tab-title,
.madxartwork-accordion .madxartwork-tab-title,
.madxartwork-toggle .madxartwork-tab-title {
    color: var(--si-navy);
    font-weight: 700;
    border-color: var(--si-border);
}

.madxartwork-tab-title.madxartwork-active,
.madxartwork-accordion .madxartwork-tab-title.madxartwork-active,
.madxartwork-toggle .madxartwork-tab-title.madxartwork-active {
    color: var(--si-gold-dark);
}

.madxartwork-tab-content,
.madxartwork-accordion .madxartwork-tab-content,
.madxartwork-toggle .madxartwork-tab-content {
    color: var(--si-charcoal);
    border-color: var(--si-border);
}


/* =========================================================
   15. FORMS & INPUTS
   ========================================================= */

input:not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
select {
    width: 100%;
    border: 1px solid var(--si-border);
    border-radius: 5px;
    padding: 12px 15px;
    font-family: var(--si-body-font);
    color: var(--si-charcoal);
    background: var(--si-white);
    transition: border-color .3s ease, box-shadow .3s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--si-gold) !important;
    box-shadow: 0 0 0 3px rgba(232, 182, 71, .15);
}

::placeholder {
    color: #999999;
}


/* =========================================================
   16. COUNTER & PROGRESS BAR
   ========================================================= */

.madxartwork-counter-number {
    color: var(--si-gold-dark);
    font-family: var(--si-heading-font);
}

.madxartwork-progress-bar {
    background: var(--si-gold);
    border-radius: 20px;
}

.madxartwork-progress-wrapper {
    background: var(--si-border);
    border-radius: 20px;
}


/* =========================================================
   17. POSTS & LOOP GRID
   ========================================================= */

.madxartwork-post {
    border-radius: var(--si-radius);
    overflow: hidden;
    background: var(--si-white);
    box-shadow: var(--si-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}

.madxartwork-post:hover {
    transform: translateY(-5px);
    box-shadow: var(--si-shadow-hover);
}

.madxartwork-post__title {
    font-family: var(--si-heading-font);
}

.madxartwork-post__title a {
    color: var(--si-navy);
}

.madxartwork-post__title a:hover {
    color: var(--si-gold-dark);
}


/* =========================================================
   18. PAGINATION & BREADCRUMB
   ========================================================= */

.page-numbers,
.madxartwork-pagination a,
.madxartwork-pagination span {
    display: inline-block;
    padding: 8px 13px;
    border-radius: 4px;
    color: var(--si-navy);
}

.page-numbers.current,
.madxartwork-pagination .current {
    background: var(--si-navy);
    color: var(--si-gold-light);
}

.madxartwork-breadcrumbs {
    color: var(--si-muted);
}

.madxartwork-breadcrumbs a {
    color: var(--si-gold-dark);
}


/* =========================================================
   19. TABLES
   ========================================================= */

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: var(--si-navy);
    color: var(--si-gold-light);
    padding: 13px;
    text-align: left;
}

td {
    padding: 12px 13px;
    border-bottom: 1px solid var(--si-border);
}

tr:nth-child(even) {
    background: var(--si-ivory);
}


/* =========================================================
   20. WOOCOMMERCE PRODUCT GRID
   ========================================================= */

.woocommerce ul.products li.product {
    background: var(--si-white);
    border: 1px solid var(--si-border);
    border-radius: var(--si-radius);
    padding: 15px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: var(--si-shadow-hover);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--si-navy);
    font-family: var(--si-heading-font);
    font-size: 18px;
}

.woocommerce ul.products li.product .price {
    color: var(--si-gold-dark);
    font-weight: 700;
}

.woocommerce span.onsale {
    background: var(--si-gold);
    color: var(--si-navy);
    border-radius: 4px;
    font-weight: 700;
}


/* =========================================================
   21. WOOCOMMERCE BUTTONS
   ========================================================= */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.add_to_cart_button {
    background: var(--si-navy);
    color: var(--si-gold-light) !important;
    border: 1px solid var(--si-navy);
    border-radius: 5px;
    padding: 12px 18px;
    font-family: var(--si-body-font);
    font-weight: 700;
    transition: all .3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.add_to_cart_button:hover {
    background: var(--si-gold) !important;
    color: var(--si-navy) !important;
    border-color: var(--si-gold) !important;
}

/* Teks dan ikon WooCommerce */
.woocommerce a.button *,
.woocommerce button.button * {
    color: inherit !important;
}

.woocommerce a.button:hover *,
.woocommerce button.button:hover * {
    color: var(--si-navy) !important;
}


/* =========================================================
   22. WOOCOMMERCE PRODUCT DETAIL
   ========================================================= */

.woocommerce div.product .product_title {
    color: var(--si-navy);
    font-family: var(--si-heading-font);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--si-gold-dark);
    font-size: 24px;
    font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--si-gold-dark);
}


/* =========================================================
   23. WOOCOMMERCE CART & CHECKOUT
   ========================================================= */

.woocommerce table.shop_table {
    border-color: var(--si-border);
    border-radius: var(--si-radius);
}

.woocommerce table.shop_table th {
    background: var(--si-navy);
    color: var(--si-gold-light);
}

.woocommerce table.shop_table td {
    color: var(--si-charcoal);
}

.woocommerce .quantity input.qty {
    border: 1px solid var(--si-border);
    border-radius: 4px;
    padding: 8px;
}

.woocommerce-checkout #payment {
    background: var(--si-ivory);
    border-radius: var(--si-radius);
}

.woocommerce-checkout #payment div.payment_box {
    background: #EEE8D9;
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: #EEE8D9;
}


/* =========================================================
   24. WOOCOMMERCE NOTICES
   ========================================================= */

.woocommerce-message {
    border-top-color: var(--si-gold);
}

.woocommerce-message::before {
    color: var(--si-gold-dark);
}

.woocommerce-info {
    border-top-color: var(--si-navy);
}

.woocommerce-info::before {
    color: var(--si-navy);
}

.woocommerce-error {
    border-top-color: #B83232;
}


/* =========================================================
   25. madxartwork POPUP
   ========================================================= */

.dialog-widget-content {
    border-radius: var(--si-radius);
    overflow: hidden;
}

.dialog-close-button {
    color: var(--si-gold) !important;
}


/* =========================================================
   26. FOOTER
   ========================================================= */

footer,
.madxartwork-location-footer {
    background: var(--si-midnight);
    color: #D9DDE5;
}

footer h1,
footer h2,
footer h3,
footer h4,
.madxartwork-location-footer h1,
.madxartwork-location-footer h2,
.madxartwork-location-footer h3,
.madxartwork-location-footer h4 {
    color: var(--si-gold-light);
}

footer a,
.madxartwork-location-footer a {
    color: #D9DDE5;
}

footer a:hover,
.madxartwork-location-footer a:hover {
    color: var(--si-gold);
}


/* =========================================================
   27. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--si-ivory);
}

::-webkit-scrollbar-thumb {
    background: var(--si-gold-dark);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--si-navy);
}


/* =========================================================
   28. RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 1024px) {
    h1 { font-size: 40px; }
    h2 { font-size: 32px; }

    .madxartwork .madxartwork-button {
        padding: 12px 22px;
    }
}


/* =========================================================
   29. RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 767px) {
    body {
        font-size: 14px;
    }

    h1 { font-size: 34px; }
    h2 { font-size: 28px; }
    h3 { font-size: 23px; }

    .madxartwork .madxartwork-button {
        padding: 12px 20px;
        font-size: 12px;
    }

    .woocommerce ul.products li.product {
        padding: 10px;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 16px;
    }

    blockquote {
        padding: 15px 18px;
    }
}


/* =========================================================
   30. ACCESSIBILITY & REDUCED MOTION
   ========================================================= */

:focus-visible {
    outline: 2px solid var(--si-gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}/* End custom CSS */