/*
 * Jembatan Elementor → mockup, bagian 2 (dimuat SETELAH main.css).
 * Hanya penyesuaian yang tidak bisa dilakukan main.css karena markup widget Elementor berbeda dari mockup.
 */

/* ---------- Panel pencarian header ---------- */
.header-search { border-top: 1px solid var(--color-border); background: var(--color-white); }
.header-search[hidden] { display: none; }
.header-search form { display: flex; gap: var(--space-3); padding-block: var(--space-4); }
.header-search .search { flex: 1; padding: 12px var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-button); font: inherit; font-size: var(--small-size); background: var(--color-surface); }
.site-header { position: relative; }

/* ---------- Tombol (widget Button) ---------- */
.elementor-button.btn { width: auto; fill: currentColor; }
.elementor-button.btn-block { width: 100%; }

/* ---------- Hero slider: foto menjadi latar slide ---------- */
.hero-slider .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Stack kontak (mockup memakai "> * + *", tidak berlaku pada pembungkus display:contents) ---------- */
.stack > * + * { margin-top: 0; }
.stack iframe, .stack .small { margin-top: var(--space-4); }

/* ---------- Thumbnail produk: hanya foto pertama berbingkai biru ---------- */
.pd-thumbs a:first-child img { border-color: var(--color-border); }
.pd-thumbs .elementor-widget:first-child img { border-color: var(--color-primary); }
.pd-thumbs .elementor-widget img { width: 84px; height: 84px; object-fit: cover; border: 2px solid var(--color-border); border-radius: var(--radius-image); }
@media (max-width: 767px) { .pd-thumbs .elementor-widget img { width: 72px; height: 72px; } }

/* ---------- Animasi masuk Elementor: gerak sama dengan mockup (24px / 32px, bukan 100%) ---------- */
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(32px, 0, 0); } to { opacity: 1; transform: none; } }
.animated.animated-fast { animation-duration: .7s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { .animated { animation: none !important; } .elementor-invisible { visibility: visible !important; } }

/* ---------- Tabs (Elementor Nested Tabs) — gaya pill mockup ---------- */
.e-n-tabs { margin: 0; }
.e-n-tabs-heading { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.e-n-tab-title {
  padding: 10px var(--space-5); border: 0; border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text-muted);
  font: inherit; font-weight: 600; font-size: var(--small-size); line-height: var(--body-lh);
  cursor: pointer; transition: background-color .2s, color .2s;
}
.e-n-tab-title[aria-selected="true"] { background: var(--color-primary); color: var(--color-white); }
.e-n-tab-title:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.e-n-tabs-content > .e-con:not(.e-active) { display: none; }
@media (max-width: 767px) { .e-n-tab-title { flex: 1; text-align: center; } }

/* ---------- Accordion (Elementor Nested Accordion) — gaya details.faq mockup ---------- */
.e-n-accordion-item { border: 1px solid var(--color-border); border-radius: var(--radius-image); background: var(--color-white); transition: box-shadow .2s; }
.e-n-accordion-item[open] { box-shadow: var(--shadow-card); }
.e-n-accordion-item + .e-n-accordion-item { margin-top: var(--space-3); }
.e-n-accordion-item-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); font-weight: 600; cursor: pointer; list-style: none; }
.e-n-accordion-item-title::-webkit-details-marker { display: none; }
.e-n-accordion-item-title::marker { content: ""; }
.e-n-accordion-item-title::after { content: "+"; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--color-tint); color: var(--color-primary); font-size: 18px; line-height: 1; }
.e-n-accordion-item[open] > .e-n-accordion-item-title::after { content: "−"; }
.e-n-accordion-item > .e-con p { padding: 0 var(--space-5); margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--small-size); }
@media (max-width: 767px) {
  .e-n-accordion-item-title { padding: var(--space-4); font-size: 15px; }
  .e-n-accordion-item > .e-con p { padding-inline: var(--space-4); }
}
.e-n-tabs, .e-n-tabs-content { display: block; width: 100%; }
.e-n-tabs-heading { justify-content: flex-start; align-items: stretch; }
.e-n-tabs-content > .e-con { width: 100%; }
.e-n-accordion-item-title, .e-n-accordion-item > .e-con { border: 0; }
.e-n-accordion-item-title { min-height: 0; }

/* Gambar kartu di dalam .media (WP menambah width/height; mockup memakai ratio 4:3 + cover) */
.card .media img { width: 100%; height: 100%; object-fit: cover; }
.card .media a { display: block; height: 100%; }