/* SC Personal — Portofolio & studi kasus */
.port-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.port-toolbar .tools { display: flex; gap: .5rem; flex-wrap: wrap; }
.port-toolbar .tools .form-control, .port-toolbar .tools .form-select { width: auto; min-width: 180px; border-radius: 50rem; }
.port-toolbar .tools .form-control { min-width: 280px; }
@media (max-width: 575.98px) { .port-toolbar .tools, .port-toolbar .tools .form-control, .port-toolbar .tools .form-select { width: 100%; min-width: 0; } }

.case-hero { padding: 3.5rem 0 3rem; background: linear-gradient(135deg, var(--pw-primary) 0%, #0e2f52 60%, var(--pw-secondary) 140%); color: #fff; position: relative; overflow: hidden; }
.case-hero::after { content: ""; position: absolute; right: -100px; bottom: -140px; width: 380px; height: 380px; border-radius: 50%; border: 50px solid rgba(var(--pw-accent-rgb), .14); }
.case-hero h1 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); font-weight: 800; max-width: 900px; }
.case-hero .lead { color: rgba(255, 255, 255, .8); max-width: 720px; }
.case-hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .5); --bs-breadcrumb-item-active-color: var(--pw-accent); font-size: .85rem; }
.case-hero .breadcrumb a { color: rgba(255, 255, 255, .8); }
.case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 2rem; position: relative; z-index: 1; }
.case-facts div { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: .9rem; padding: .9rem 1rem; }
.case-facts small { display: block; color: rgba(255, 255, 255, .6); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.case-facts strong { color: #fff; font-size: .95rem; }

.case-slider { border-radius: 1.25rem; overflow: hidden; box-shadow: var(--pw-shadow-lg); margin-top: -1rem; background: var(--pw-bg-light); }
.case-slider .swiper { padding-bottom: 0 !important; }
.case-slider .swiper-slide a { display: block; aspect-ratio: 2/1; cursor: zoom-in; }
.case-slider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.case-slider .swiper-button-prev, .case-slider .swiper-button-next { color: #fff; width: 44px; height: 44px; border-radius: 50%; background: rgba(10, 25, 45, .55); }
.case-slider .swiper-button-prev::after, .case-slider .swiper-button-next::after { font-size: 1rem; font-weight: 700; }
.case-slider .swiper-pagination-bullet { background: #fff; opacity: .6; }
.case-slider .swiper-pagination-bullet-active { background: var(--pw-accent) !important; opacity: 1; }

.case-step { display: grid; grid-template-columns: 90px 1fr; gap: 1.25rem; padding: 2rem 0; border-top: 1px solid var(--pw-border); }
.case-step:first-of-type { border-top: 0; }
.case-step .editorial-num { font-size: 3.5rem; color: rgba(var(--pw-accent-rgb), .55); }
.case-step h2 { font-size: 1.4rem; margin-bottom: .6rem; }
.case-step p { font-size: 1.05rem; color: #475569; margin: 0; }
.case-step.result { background: rgba(var(--pw-accent-rgb), .08); border: 1px solid rgba(var(--pw-accent-rgb), .3); border-radius: var(--pw-radius); padding: 1.75rem; }
@media (max-width: 575.98px) { .case-step { grid-template-columns: 1fr; gap: .25rem; } .case-step .editorial-num { font-size: 2.4rem; } }

.meta-card dl { margin: 0; }
.meta-card dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pw-muted); font-weight: 600; }
.meta-card dd { font-weight: 600; color: var(--pw-primary); margin-bottom: 1rem; }
.meta-card dd:last-child { margin-bottom: 0; }
.case-nav a { display: flex; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-sm); color: var(--pw-primary); height: 100%; transition: all .2s; }
.case-nav a:hover { border-color: var(--pw-secondary); box-shadow: var(--pw-shadow); }
.case-nav img { width: 84px; height: 56px; object-fit: cover; border-radius: .5rem; flex-shrink: 0; }
.case-nav small { color: var(--pw-muted); display: block; }
.case-hero .chip-accent { background: var(--pw-accent); color: #1c1606; }
@media (max-width: 575.98px) { .port-toolbar .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; width: 100%; } .port-toolbar .filter-bar button { white-space: nowrap; } }