/* portofolio.css - tambahan kecil untuk /toko di atas tema Foodwagon (theme.min.css + martin.css). */

/* hero: sama dengan beranda, dengan bingkai browser di kanan */
.pf-hero{padding-top:7.5rem;padding-bottom:4.5rem}
.pf-hero h1{font-weight:900;color:#212121;letter-spacing:-.02em;line-height:1.1;font-size:clamp(2.2rem,4.8vw,3.8rem)}
.pf-hero h1 mark{background:#fff;color:#f17228;padding:0 .2em;border-radius:12px;display:inline-block;line-height:1.15}
.pf-hero .lead{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:600;color:#3d2c00;max-width:24em;margin-bottom:2rem}
.pf-hero .card{max-width:34rem}
.pf-hero .tab-pane.active{display:flex;gap:1rem 1.25rem;align-items:center;flex-wrap:wrap}
.pf-hero .tab-pane p{font-size:1.05rem;margin-bottom:0;flex:1 1 15rem}
.pf-hero-vis{position:relative;max-width:34rem;margin:0 auto;padding-bottom:1.2rem}
.pf-hero-vis .chip-a{left:-4%;top:10%}
.pf-hero-vis .chip-b{right:-2%;bottom:6%}
.bz{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -26px rgba(60,35,0,.6)}
.bz-bar{display:flex;align-items:center;gap:.4rem;background:#f4efe6;padding:.55rem .8rem;border-bottom:1px solid #e8dfd0}
.bz-bar i{width:.65rem;height:.65rem;border-radius:50%;flex:none;background:#f1816b}
.bz-bar i:nth-child(2){background:#f3c04f}.bz-bar i:nth-child(3){background:#6cc17d}
.bz-bar span{flex:1;min-width:0;margin-left:.6rem;background:#fff;border-radius:999px;padding:.2rem .8rem;font-size:.75rem;color:#6c6c6c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bz img{display:block;width:100%;height:auto}

/* galeri demo: kartu ala Foodwagon (card-span) */
.pf-demo{padding:1rem 1rem 1.4rem;border-radius:18px;transition:transform .25s,box-shadow .25s}
.pf-demo:hover{transform:translateY(-4px);box-shadow:0 18px 36px -14px rgba(0,0,0,.3)}
.pf-demo img{aspect-ratio:4/3;object-fit:cover;object-position:top;box-shadow:0 12px 24px -14px rgba(0,0,0,.35)}
.pf-demo .card-body{padding-top:1rem}
.pf-demo h3{font-size:1.2rem;font-weight:800;color:#212121;margin-bottom:.25rem}
.pf-demo p{font-size:.98rem;margin-bottom:.8rem;color:#5b5750}
.pf-demo .badge{white-space:normal;text-align:left}
.pf-demo .badge .fs-1{font-size:.85rem!important;font-weight:700}
.pf-lb{position:absolute;left:.7rem;top:.7rem;background:#ffb30e;color:#212121;font-weight:800;font-size:.8rem;padding:.3rem .8rem;border-radius:999px;box-shadow:0 8px 16px -8px rgba(0,0,0,.5)}

/* banner: gambar tampilan halaman */
.pf-shotwrap{height:100%;min-height:18rem;display:grid;place-items:center;padding:2rem;background:linear-gradient(160deg,#ffd36b,#ffb30e)}
.pf-shotwrap .bz{width:100%}
.banner .pf-shot{object-fit:cover;object-position:center;min-height:16rem}
.pf-cek{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.5rem}
.pf-cek li{position:relative;padding-left:1.7rem;color:#3b3b3b;font-size:1.02rem;line-height:1.45}
.pf-cek li::before{content:"";position:absolute;left:0;top:.2em;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff1e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f17228' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat}

.pf-catatan{color:#6c6c6c;font-size:1rem}
.cta-akhir .pf-cta-p{color:#3d2c00;font-size:1.15rem;font-weight:600}
.cta-akhir .btn-light{background:#fff;color:#212121;border:0;font-weight:700}

@media(max-width:991.98px){.pf-hero{padding-top:6.5rem}.pf-hero-vis{margin-top:1.5rem}.pf-hero-vis .chip-a{left:0}}
@media(max-width:575.98px){.pf-hero-vis .chip-b{display:none}.pf-hero .btn-lg{width:100%}.banner .pf-shot{min-height:0}.pf-shotwrap{padding:1rem;min-height:0}}
@media(prefers-reduced-motion:reduce){.pf-demo,.pf-demo:hover{transition:none;transform:none}}