/* GPUGaraj Premium Kategori Vitrini v1.2 */
.gpc-showcase,
.gpc-showcase *{box-sizing:border-box}

.gpc-showcase{
  --gpc-orange:#ff5a1f;
  --gpc-orange-2:#ff7a21;
  --gpc-ink:#0d1422;
  --gpc-muted:#667085;
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(300px,.94fr) minmax(310px,1.12fr) minmax(218px,.66fr);
  align-items:stretch;
  min-height:330px;
  margin:12px 0 24px;
  overflow:hidden;
  border:1px solid #e8ebef;
  border-radius:24px;
  background:
    radial-gradient(circle at 60% 46%,rgba(255,122,33,.075),transparent 28%),
    linear-gradient(135deg,#fff 0%,#fbfcfd 62%,#f7f8fa 100%);
  box-shadow:0 18px 48px rgba(15,23,42,.075);
  color:var(--gpc-ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

.gpc-showcase:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.38;
  pointer-events:none;
  background-image:
    linear-gradient(30deg,transparent 48%,rgba(148,163,184,.16) 49%,rgba(148,163,184,.16) 51%,transparent 52%),
    linear-gradient(150deg,transparent 48%,rgba(148,163,184,.12) 49%,rgba(148,163,184,.12) 51%,transparent 52%);
  background-size:72px 42px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.18) 38%,transparent 68%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.18) 38%,transparent 68%);
}

.gpc-copy{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:24px 0 18px 28px;
}

.gpc-showcase h1{
  margin:0;
  color:var(--gpc-ink);
  font-size:clamp(32px,3.25vw,49px);
  font-weight:900;
  line-height:.97;
  letter-spacing:-2px;
}

.gpc-showcase h1 em{
  display:block;
  margin-top:4px;
  color:var(--gpc-orange);
  font-style:normal;
}

.gpc-showcase h2{
  margin:13px 0 0;
  color:#202737;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.15px;
}

.gpc-title-line{
  display:block;
  width:42px;
  height:3px;
  margin:10px 0 9px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--gpc-orange),#ff9c45);
}

.gpc-admin-description{
  max-width:370px;
  max-height:93px;
  margin:0;
  overflow:hidden;
  color:#667085;
  font-size:12px;
  line-height:1.55;
}

.gpc-admin-description p{margin:0 0 6px;color:inherit;font:inherit;line-height:inherit}
.gpc-admin-description p:last-child{margin-bottom:0}
.gpc-admin-description h1,
.gpc-admin-description h2,
.gpc-admin-description h3,
.gpc-admin-description h4{margin:0 0 6px;color:#202737;font-size:13px;font-weight:800;line-height:1.35;letter-spacing:0}
.gpc-admin-description a{color:var(--gpc-orange);text-decoration:none}
.gpc-admin-description img,
.gpc-admin-description picture,
.gpc-admin-description iframe,
.gpc-admin-description table{display:none!important}

.gpc-mini-benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:auto;
  padding-top:14px;
}

.gpc-mini-benefits>div{
  min-width:0;
  min-height:61px;
  padding:9px 8px 8px 39px;
  border:1px solid #edf0f3;
  border-radius:12px;
  background:rgba(255,255,255,.92);
  box-shadow:0 6px 18px rgba(15,23,42,.035);
  position:relative;
}

.gpc-mini-benefits .gpc-mini-icon{
  position:absolute;
  left:10px;
  top:11px;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  color:var(--gpc-orange);
}

.gpc-mini-benefits svg,
.gpc-feature-item svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.gpc-mini-benefits b,
.gpc-mini-benefits small{display:block;min-width:0}
.gpc-mini-benefits b{color:#171d27;font-size:10px;font-weight:900;line-height:1.2;white-space:nowrap}
.gpc-mini-benefits small{margin-top:3px;color:#7b8492;font-size:8px;line-height:1.3}

.gpc-visual{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:7px 3px 6px;
}

.gpc-visual:after{
  content:"";
  position:absolute;
  left:9%;
  right:6%;
  bottom:27px;
  height:36px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,89,21,.22),rgba(255,89,21,0) 70%);
  filter:blur(4px);
  pointer-events:none;
}

.gpc-orbit{
  position:absolute;
  left:4%;
  top:10%;
  width:82%;
  height:75%;
  border:1.5px dashed rgba(255,90,31,.56);
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:rotate(-8deg);
  pointer-events:none;
}

.gpc-visual img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  max-width:520px;
  max-height:318px;
  object-fit:contain;
  object-position:center;
  image-rendering:auto;
  mix-blend-mode:normal;
  filter:drop-shadow(0 18px 20px rgba(15,23,42,.14));
}

.gpc-feature-panel{
  position:relative;
  z-index:3;
  align-self:center;
  display:grid;
  gap:8px;
  min-width:0;
  margin:18px 18px 18px 0;
  padding:10px;
  border:1px solid #e8ebef;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 15px 36px rgba(15,23,42,.09);
  backdrop-filter:blur(8px);
}

.gpc-feature-item{
  display:grid;
  grid-template-columns:43px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-height:70px;
  padding:9px 8px;
  border-radius:13px;
  transition:transform .2s ease,background .2s ease;
}

.gpc-feature-item:hover{transform:translateY(-1px);background:#fff8f4}
.gpc-feature-item>span{
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  padding:9px;
  border:1px solid #f0e8e3;
  border-radius:50%;
  background:#fff;
  color:var(--gpc-orange);
  box-shadow:0 6px 16px rgba(15,23,42,.06);
}
.gpc-feature-item p{min-width:0;margin:0}
.gpc-feature-item b,.gpc-feature-item small{display:block}
.gpc-feature-item b{color:#151b25;font-size:11px;font-weight:900;line-height:1.25}
.gpc-feature-item small{margin-top:4px;color:#747d8a;font-size:9px;line-height:1.38}

@media (min-width:1250px){
  .gpc-showcase{grid-template-columns:minmax(350px,.98fr) minmax(390px,1.25fr) minmax(245px,.7fr);min-height:350px}
  .gpc-copy{padding:27px 0 20px 31px}
  .gpc-admin-description{font-size:13px}
  .gpc-mini-benefits>div{padding-right:10px}
  .gpc-feature-item b{font-size:12px}
  .gpc-feature-item small{font-size:10px}
}

@media (max-width:1050px){
  .gpc-showcase{grid-template-columns:minmax(280px,.95fr) minmax(260px,1fr) minmax(205px,.66fr);min-height:320px}
  .gpc-copy{padding-left:22px}
  .gpc-showcase h1{font-size:34px;letter-spacing:-1.35px}
  .gpc-admin-description{font-size:11px}
  .gpc-mini-benefits>div{padding-left:8px;text-align:center}
  .gpc-mini-benefits .gpc-mini-icon{position:static;width:19px;height:19px;margin:0 auto 5px}
  .gpc-mini-benefits b{font-size:9px}
  .gpc-feature-panel{margin-right:12px}
}

@media (max-width:820px){
  .gpc-showcase{grid-template-columns:minmax(260px,.95fr) minmax(250px,1fr);min-height:auto}
  .gpc-copy{min-height:330px;padding:22px 0 16px 22px}
  .gpc-visual{padding-right:10px}
  .gpc-feature-panel{
    grid-column:1/-1;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin:0 14px 14px;
    padding:8px;
  }
  .gpc-feature-item{grid-template-columns:36px minmax(0,1fr);min-height:64px;padding:7px 5px;gap:8px}
  .gpc-feature-item>span{width:36px;height:36px;padding:8px}
}

@media (max-width:620px){
  .gpc-showcase{display:block;margin:8px 0 18px;border-radius:18px;overflow:hidden}
  .gpc-showcase:before{-webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);mask-image:linear-gradient(180deg,#000,transparent 60%)}
  .gpc-copy{min-height:0;padding:20px 18px 12px}
  .gpc-showcase h1{font-size:34px;line-height:.98;letter-spacing:-1.4px}
  .gpc-showcase h2{font-size:13px}
  .gpc-admin-description{max-width:none;max-height:112px;font-size:12px}
  .gpc-mini-benefits{order:5;margin-top:14px;padding-top:0;gap:6px}
  .gpc-mini-benefits>div{min-height:68px;padding:8px 5px;text-align:center}
  .gpc-mini-benefits .gpc-mini-icon{position:static;width:20px;height:20px;margin:0 auto 5px}
  .gpc-mini-benefits b{font-size:9px;white-space:normal}
  .gpc-mini-benefits small{font-size:7px}
  .gpc-visual{height:245px;padding:0 12px 4px}
  .gpc-visual img{max-width:390px;max-height:238px}
  .gpc-orbit{left:13%;top:5%;width:72%;height:80%}
  .gpc-feature-panel{grid-template-columns:1fr;margin:0 12px 12px;padding:7px;gap:3px;border-radius:15px}
  .gpc-feature-item{grid-template-columns:39px minmax(0,1fr);min-height:57px;padding:6px 7px}
  .gpc-feature-item>span{width:36px;height:36px}
  .gpc-feature-item b{font-size:11px}
  .gpc-feature-item small{font-size:9px}
}

@media (max-width:380px){
  .gpc-copy{padding-left:14px;padding-right:14px}
  .gpc-showcase h1{font-size:30px}
  .gpc-mini-benefits b{font-size:8px}
  .gpc-visual{height:220px}
}

@media (prefers-reduced-motion:reduce){.gpc-feature-item{transition:none}}