/*
 * Skin showcase untuk tema klasik (Divi) di demo.klikweb.co.id — mengikuti gaya klikweb.co.id:
 * judul Roboto 700 #2b2f3a, teks Open Sans #666, aksen indigo #302ea7, tombol gradien pink-ungu huruf kapital,
 * kartu putih radius 10px dengan bayangan lembut. Hanya dimuat bila tema aktif bukan tema blok.
 */
:root {
	--wp--preset--color--primary: #302ea7; --wp--preset--color--on-primary: #fff; --wp--preset--color--contrast: #2b2f3a;
	--wp--preset--color--muted: #666; --wp--preset--color--border: #e6e8f3; --wp--preset--color--surface: #f7f5ff;
	--wp--preset--color--base: #fff; --wp--preset--color--accent: #efeafc; --wp--custom--radius--large: 10px;
	--kss-grad: linear-gradient(90deg, #f92c8b 0%, #b02cd6 100%); --kss-grad-soft: linear-gradient(90deg, #f7828e 0%, #fcb6ab 100%);
	--kss-shadow: 0 2px 70px rgba(110, 130, 208, .18); --kss-head: Roboto, Helvetica, Arial, Lucida, sans-serif;
}
.kss-page #left-area { padding-bottom: 60px; }
.kss-page .entry-content, .kss-page .kss-catalog, .kss-page .kss-detail { font-size: 15px; color: #666; }
.kss-page :is(.entry-content, .main_title) :is(h1, h2, h3, h4), .kss-page .main_title { font-family: var(--kss-head); font-weight: 700; color: #2b2f3a; line-height: 1.25; padding-bottom: 0; }
.kss-page .main_title { font-size: 36px; margin: 8px 0 12px; }
.kss-page--home .main_title { display: none; }
.kss-page .entry-content h2 { font-size: 30px; } .kss-page .entry-content h3 { font-size: 20px; }
.kss-page .entry-content a:not(.wp-element-button) { color: #302ea7; }
.kss-page .entry-content ul.wp-block-list, .kss-page .entry-content ol.wp-block-list { padding-left: 1.2em; }
.kss-page .has-muted-color { color: #666 !important; } .kss-page .has-large-font-size { font-size: 18px !important; }

/* Divi 5 dapat mengisi content-size (mis. 823px) → section showcase dibuat selebar kontainer Divi. */
.kss-page .entry-content .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: none; margin-left: 0 !important; margin-right: 0 !important; }
.kss-page .entry-content .ks-hero-type.is-layout-constrained > * { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }

/* Sub-menu showcase (menggantikan menu tema blok; header situs tetap milik klikweb.co.id). */
.kss-subnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 0 0 32px; padding: 12px 20px; border-radius: 10px; background: #fff; box-shadow: var(--kss-shadow); font-family: Rubik, var(--kss-head); }
.kss-page .kss-subnav .kss-subnav__brand { padding: 0; background: none; font-weight: 700; font-size: 18px; color: #302ea7 !important; text-decoration: none; }
.kss-page .kss-subnav ul { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none !important; margin: 0; padding: 0 !important; line-height: 1; }
.kss-page .kss-subnav li { list-style: none !important; padding: 0; margin: 0; }
.kss-page .kss-subnav li::marker { content: none; }
.kss-subnav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 6px; color: #2b2f3a !important; font-weight: 500; font-size: 15px; text-decoration: none; }
.kss-subnav a:hover, .kss-subnav a[aria-current] { color: #302ea7 !important; background: #f7f5ff; }
.kss-subnav__lang a { color: #fff !important; background: #302ea7; font-weight: 700; letter-spacing: 1px; }
.kss-subnav__lang a:hover { background: #3607a6; color: #fff !important; }
.kss-subnav a:focus-visible, .kss-page .wp-element-button:focus-visible { outline: 3px solid #302ea7; outline-offset: 2px; }

/* Tombol: gaya tombol klikweb.co.id. */
.kss-page .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.kss-page .wp-element-button, .kss-catalog .wp-element-button, .kss-detail .wp-element-button {
	display: inline-block; padding: 14px 30px; border: 0; border-radius: 4px; background: var(--kss-grad); color: #fff !important;
	font-family: var(--kss-head); font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
	line-height: 1.3; box-shadow: 0 20px 30px -10px rgba(249, 44, 139, .4); transition: transform .2s, box-shadow .2s;
}
.kss-page .wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 24px 34px -10px rgba(249, 44, 139, .5); }
.kss-page .is-style-outline .wp-element-button { background: var(--kss-grad-soft); box-shadow: 0 20px 30px -10px rgba(247, 130, 142, .4); }
.kss-card .wp-element-button { padding: 10px 20px; font-size: 13px; letter-spacing: 1.5px; }

/* Section & kartu dari konten showcase (markup KlikShop Core). */
.ks-section { margin: 56px 0; } .ks-section:first-child { margin-top: 0; }
.ks-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; margin-bottom: 28px; }
.ks-section__head > * { margin: 0 !important; }
.ks-hero-type { margin-top: 0; padding: 72px 24px 64px; border-radius: 10px; text-align: center; background: linear-gradient(120deg, #59d0f6 0%, #4f8cf7 55%, #4b62f3 100%); color: #fff; }
.kss-page .ks-hero-type :is(h1, p) { color: #fff !important; }
.ks-hero-type .is-style-ks-eyebrow { font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; opacity: .9; }
.ks-display { font-size: clamp(32px, 5vw, 48px) !important; max-width: 18ch; margin: 8px auto 12px; }
.ks-hero-type .ks-lede { max-width: 60ch; margin: 0 auto 28px; }
.ks-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ks-card-x { display: flex; flex-direction: column; gap: 10px; }
.ks-card-x > * { margin: 0 !important; padding: 0; }
.ks-card-x--icon { padding: 28px; border-radius: 10px; background: #fff; box-shadow: var(--kss-shadow); }
.ks-card-x__icon { width: 48px; height: 48px; border-radius: 12px; background: #efeafc; position: relative; }
.ks-i::before { content: ""; display: inline-block; width: 20px; height: 20px; background: currentColor; vertical-align: -4px; margin-right: 8px; -webkit-mask: var(--ks-icon) center / contain no-repeat; mask: var(--ks-icon) center / contain no-repeat; }
.ks-card-x__icon::before { position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; margin: 0; color: #8624e1; }
.ks-steps { counter-reset: ks-step; list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.ks-steps li { counter-increment: ks-step; display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 10px; background: #f7f5ff; }
.ks-steps li::before { content: counter(ks-step, decimal-leading-zero); font: 700 26px var(--kss-head); color: #302ea7; }
.ks-steps li strong { color: #2b2f3a; }
.ks-checklist { list-style: none; padding: 0 !important; } .ks-checklist li { padding-left: 28px; position: relative; margin: 6px 0; }
.ks-checklist li::before { content: "✓"; position: absolute; left: 0; color: #302ea7; font-weight: 700; }
.ks-link-arrow a::after { content: " →"; }
.ks-faq { display: grid; gap: 12px; }
.ks-faq__item { margin: 0 !important; padding: 4px 20px; border-radius: 10px; background: #fff; box-shadow: var(--kss-shadow); }
.ks-faq__item summary { cursor: pointer; font-weight: 600; font-size: 16px; color: #2b2f3a; list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 52px; align-items: center; }
.ks-faq__item summary::-webkit-details-marker { display: none; }
.ks-faq__item summary::after { content: "+"; font-size: 24px; line-height: 1; color: #302ea7; transition: transform .2s; }
.ks-faq__item[open] summary::after { transform: rotate(45deg); }
.ks-faq__item p { margin: 0 0 14px; }
.is-style-ks-plain { list-style: none; padding-left: 0 !important; }

/* Katalog & detail demo. */
.kss-card { border: 0; border-radius: 10px; box-shadow: var(--kss-shadow); }
.kss-card__title { font-family: var(--kss-head); font-weight: 700; color: #2b2f3a; font-size: 20px; padding: 0; }
.kss-seg { background: #f7f5ff; }
.kss-chips button[aria-pressed="true"] { background: #efeafc; color: #302ea7; }
.kss-detail__desk { border: 0; box-shadow: var(--kss-shadow); }
@media (max-width: 980px) { .ks-hero-type { padding: 48px 18px; } }
@media (max-width: 600px) { .kss-subnav { padding: 10px 12px; margin-bottom: 20px; } .kss-page .kss-subnav ul { flex-wrap: nowrap; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; } .kss-subnav a { white-space: nowrap; } .kss-page .kss-subnav .kss-subnav__lang { order: -1; } }
@media (prefers-reduced-motion: reduce) { .kss-page .wp-element-button, .ks-faq__item summary::after { transition: none; } }

/* Ikon (disalin dari tema KlikShop, hanya yang dipakai halaman showcase). */
.ks-i--shield { --ks-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4 3 7.5 7 9 4-1.5 7-5 7-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ks-i--box { --ks-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E"); }
.ks-i--check { --ks-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E"); }
.ks-i--calendar { --ks-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ks-i--heart { --ks-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9z'/%3E%3C/svg%3E"); }
.ks-i--globe { --ks-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E"); }
.ks-i--bolt { --ks-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.ks-i--sparkle { --ks-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v6M12 15v6M3 12h6M15 12h6M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3'/%3E%3C/svg%3E"); }
.kss-catalog .kss-btn-outline, .kss-detail .kss-btn-outline { background: var(--kss-grad-soft) !important; color: #fff !important; box-shadow: 0 20px 30px -10px rgba(247, 130, 142, .4) !important; }