/* SiteGo — Template Website gallery cards */

.tpl-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
@media (max-width:900px){
  .tpl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
}
@media (max-width:560px){
  .tpl-grid{ grid-template-columns:1fr; gap:24px; }
}

.tpl-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  background:#fff;
  border:1px solid var(--line, #e7e9f2);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(11,14,23,.04);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tpl-card.hidden,
.mkt-card.hidden,
.mkt-empty-filter.hidden,
.hidden{
  display:none!important;
}
.tpl-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 18px 40px rgba(11,14,23,.1);
  border-color:var(--line-strong, #d7dae8);
}

.tpl-card__media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:16px 16px 0 0;
  background:linear-gradient(135deg, #eef1ff, #eef0f8);
  flex:none;
}
.tpl-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.tpl-card:hover .tpl-card__media img{ transform:scale(1.04); }
.tpl-card__media--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent, #2954ff);
}

.tpl-card__body{
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
}
.tpl-card__title{
  margin:0;
  font-size:1rem;
  line-height:1.35;
  font-weight:700;
}
.mkt-card__cat{
  margin:0;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-faint, #8a90a3);
}
.mkt-card__summary{
  margin:0;
  font-size:.88rem;
  line-height:1.45;
  color:var(--ink-soft, #5b6478);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:calc(1.45em * 2);
}
.tpl-card__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:auto;
  padding-top:10px;
  flex:none;
}
.tpl-card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 10px;
  border-radius:10px;
  font-size:.78rem;
  font-weight:700;
  text-decoration:none;
  text-align:center;
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.tpl-card__btn--preview{
  background:#fff;
  border-color:var(--line-strong, #d7dae8);
  color:var(--ink, #0b0e17);
}
.tpl-card__btn--preview:hover{
  border-color:var(--accent, #2954ff);
  color:var(--accent, #2954ff);
}
.tpl-card__btn--preview.is-disabled,
.tpl-card__btn--preview[aria-disabled="true"]{
  opacity:.45;
  pointer-events:none;
  cursor:not-allowed;
}
.tpl-card__btn--wa{
  background:var(--accent, #2954ff);
  color:#fff;
}
.tpl-card__btn--wa:hover{ filter:brightness(.95); }
@media (max-width:560px){
  .tpl-card__actions{ grid-template-columns:1fr; }
  .tpl-card__btn{ width:100%; min-height:44px; }
}

/* Admin edit on service cards (homepage) */
.service-card{
  position:relative;
}
.service-card__hit{
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:1;
  color:inherit;
  text-decoration:none;
  min-width:0;
}
.service-card__hit:hover{ color:inherit; }

/* Portfolio detail admin edit */
.pf-admin-edit{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line-strong, #d7dae8);
  background:#fff;
  color:var(--ink, #0b0e17);
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(11,14,23,.06);
}
.pf-admin-edit:hover{
  background:var(--accent-soft, #eef1ff);
  border-color:var(--accent, #2954ff);
  color:var(--accent-ink, #1b3ecc);
}

/* Template Website gallery (revisi UI-7) */
.mkt-detail-layout{
  padding:calc(96px + 36px) 0 72px;
}
.mkt-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:36px;
  align-items:start;
}
.mkt-detail-cover{ margin:22px 0 28px; }
.mkt-detail-side{ position:sticky; top:110px; }
.mkt-side-card{
  background:#fff;
  border:1px solid var(--line, #e7e9f2);
  border-radius:18px;
  padding:22px;
  box-shadow:0 14px 32px rgba(11,14,23,.06);
}
.mkt-side-card h2{
  margin:0 0 8px;
  font-size:1.15rem;
}
.mkt-side-card p{
  margin:0 0 18px;
  color:var(--ink-soft, #5b6478);
  font-size:.92rem;
  line-height:1.5;
}
.mkt-side-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mkt-side-actions .btn-block{ width:100%; justify-content:center; }
@media (max-width:900px){
  .mkt-detail-grid{ grid-template-columns:1fr; }
  .mkt-detail-side{ position:static; }
}

/* Marketplace extras (UI-8) — legacy helpers retained */
.mkt-card__badge-top{
  position:absolute;
  left:12px;
  top:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  background:#fff;
  color:var(--ink, #0b0e17);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  box-shadow:0 6px 16px rgba(11,14,23,.12);
}
.mkt-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:28px;
}
.mkt-filters__chip{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  min-height:36px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--line-strong, #d7dae8);
  background:#fff;
  color:var(--ink, #0b0e17);
  font:inherit;
  font-size:.8rem;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.mkt-filters__chip:hover{
  border-color:var(--accent, #2954ff);
  color:var(--accent, #2954ff);
}
.mkt-filters__chip.is-active{
  background:var(--accent, #2954ff);
  border-color:var(--accent, #2954ff);
  color:#fff;
}
@media (max-width:640px){
  .mkt-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    white-space:nowrap;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(11,14,23,.25) transparent;
  }
  .mkt-filters::-webkit-scrollbar{ height:4px; }
  .mkt-filters::-webkit-scrollbar-thumb{
    background:rgba(11,14,23,.25);
    border-radius:999px;
  }
  .mkt-filters::-webkit-scrollbar-track{ background:transparent; }
}
.mkt-empty-filter{
  text-align:center;
  color:var(--ink-faint, #8a90a3);
  padding:40px 0;
}
.mkt-detail-price{
  margin:10px 0 6px;
  font-size:1.25rem;
  font-weight:800;
}
.mkt-detail-price small{
  display:block;
  font-size:.75rem;
  font-weight:600;
  color:var(--ink-faint, #8a90a3);
}
.mkt-badge-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:var(--accent-soft, #eef1ff);
  color:var(--accent-ink, #1b3ecc);
  font-size:.72rem;
  font-weight:800;
}
.mkt-previews{ margin:40px 0; }
.mkt-previews__grid{
  display:grid;
  grid-template-columns:1.4fr .9fr .6fr;
  gap:18px;
  align-items:start;
}
@media (max-width:900px){
  .mkt-previews__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .mkt-previews__grid{ grid-template-columns:1fr; }
}
.mkt-preview{
  margin:0;
  background:#fff;
  border:1px solid var(--line, #e7e9f2);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(11,14,23,.05);
}
.mkt-preview figcaption{
  padding:10px 14px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-faint, #8a90a3);
  border-bottom:1px solid var(--line, #e7e9f2);
}
.mkt-preview img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
}
.mkt-preview--tablet img{ aspect-ratio:3/4; }
.mkt-preview--mobile img{ aspect-ratio:9/16; max-height:420px; margin:0 auto; }
.mkt-faq{ margin:36px 0; }
.mkt-faq__item{
  border:1px solid var(--line, #e7e9f2);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:10px;
  background:#fff;
}
.mkt-faq__item summary{
  cursor:pointer;
  font-weight:700;
}
.mkt-faq__item p{
  margin:10px 0 0;
  color:var(--ink-soft, #4a5168);
}