/* ==================================================================
   PORTOFOLIO  2026-09-28 rebuild to match the light hp- design system
   already used by home/jasa/hosting (was the old dark page_hero +
   plain Bootstrap-card treatment). Loaded together with home.min.css,
   same pairing convention as jasa.css/hosting.css: home.min.css gives
   the shared hp-hero/hp-section/hp-badge-premium/reveal-up primitives,
   this file only adds what's specific to this page.
   ================================================================== */

.pf-hero-copy {
    min-width: 0;
}

/* ---- Hero visual: a loose stack of real thumbnails, not a fabricated
   mockup  these are the same images shown in the grid below. ---- */
.pf-hero-stack {
    position: relative;
    height: 360px;
    margin: 0 auto 3rem;
    max-width: 380px;
}

.pf-hero-stack-item {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 45px -15px rgba(11, 11, 11, 0.25);
    border: 1px solid rgba(11, 11, 11, 0.06);
}

.pf-hero-stack-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.pf-hero-stack-item-1 {
    z-index: 3;
    transform: rotate(0deg);
}

.pf-hero-stack-item-2 {
    z-index: 2;
    transform: translate(22px, 14px) rotate(6deg);
    opacity: 0.92;
}

.pf-hero-stack-item-3 {
    z-index: 1;
    transform: translate(-22px, 16px) rotate(-7deg);
    opacity: 0.85;
}

.pf-hero-stack-badge {
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid rgba(11, 11, 11, 0.08);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-primary);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

.pf-hero-stack-badge i {
    color: #16a34a;
}

@media (max-width: 991.98px) {
    .pf-hero-stack {
        height: 300px;
        max-width: 320px;
    }
}

/* The shared .hp-hero-visual-caption uses --color-text-muted (#9a9a9a on
   white ~ 2.9:1 contrast) - too faint to read here, confirmed via
   screenshot (2026-09-28). Darken it just on this page instead of
   touching the shared rule other pages also use it for.
   position+z-index is a second, independent fix (same report): the
   bottom rotated stack card's transform pushed it past the stack's own
   box, visually overlapping this caption underneath it even after the
   translate offsets above were tightened. */
.hp-hero-visual-caption {
    position: relative;
    z-index: 5;
    color: var(--color-text-secondary);
}

/* ---- "Kenapa Portofolio Ini Meyakinkan" ---- */
.pf-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .pf-why-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pf-why-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 1.5rem 1.35rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.pf-why-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(234, 88, 12, 0.08));
    color: #ea580c;
    margin-bottom: 0.9rem;
}

.pf-why-card h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
}

.pf-why-card p {
    font-size: 0.86rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ---- Grid: 2-up instead of 3-up. With 7 real projects + 1 closing
   "want one like this" card = 8, a 3-column grid leaves one card
   stranded alone in the last row (confirmed in the 2026-09-28 audit
   screenshot); 2-up divides evenly into 4 full rows, and the bigger
   cards also show off each screenshot better. ---- */
.pf-grid-cta-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-grid-cta-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

/* Top zone matches the sibling portfolio cards' 16:10 screenshot slot,
   so this closing card reads as a deliberate 8th tile in the rhythm of
   the grid instead of a flat banner bolted on the end. */
.pf-grid-cta-visual {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.pf-grid-cta-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
}

.pf-grid-cta-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.pf-grid-cta-glow-a {
    top: -40%;
    right: -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.35) 0%, rgba(245, 158, 11, 0) 70%);
}

.pf-grid-cta-glow-b {
    bottom: -50%;
    left: -15%;
    width: 60%;
    height: 130%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
}

.pf-grid-cta-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fcd34d;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    animation: pfCtaIconFloat 3.5s ease-in-out infinite;
}

@keyframes pfCtaIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.pf-grid-cta-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
}

.pf-grid-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.75rem;
}

.pf-grid-cta-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.pf-grid-cta-card p {
    color: var(--color-text-secondary);
    margin-bottom: 1.25rem;
}

.pf-grid-cta-btn {
    box-shadow: 0 14px 30px -12px rgba(11, 11, 11, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pf-grid-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(11, 11, 11, 0.4);
}

/* ---- Mobile: this is the dedicated, full-width portfolio listing (not
   a narrow teaser row), so keep the business-type tag + tech pills that
   app.css hides by default for narrower contexts. ---- */
@media (max-width: 767.98px) {
    #pf-grid .portfolio-tag {
        display: inline !important;
    }

    #pf-grid .portfolio-tech {
        display: flex !important;
    }
}