/* =========================================================
   ABM Design — style.css
   Ciri khas 3 warna: ORANYE · HITAM · PUTIH
   Mode terang & gelap  ·  Display: Bricolage Grotesque
   Teks: Inter  ·  Label: Space Mono
   ========================================================= */

/* ---------- TEMA: TERANG (default) ---------- */
:root,
:root[data-theme="light"] {
    color-scheme: light;
    --orange:      #FF5A1F;
    --orange-deep: #E8430A;
    --orange-soft: #FFE9DE;

    --bg:          #FFFFFF;
    --bg-tint:     #F7F6F4;
    --surface:     #FFFFFF;
    --text:        #141210;
    --text-soft:   #6B655F;
    --line:        #ECEAE6;

    --invert-bg:    #141210;   /* blok kontras = HITAM */
    --invert-text:  #FFFFFF;   /* teks di atasnya = PUTIH */
    --invert-line:  rgba(255,255,255,.14);
    --invert-muted: rgba(255,255,255,.62);
    --invert-chip:  rgba(255,255,255,.18);
    --invert-dot:   rgba(255,255,255,.14);

    --nav-bg:       rgba(255,255,255,.82);

    --ok-bg: var(--orange-soft); --ok-bd: var(--orange); --ok-tx: var(--orange-deep);
    --err-bg:#FDECEA; --err-bd:#F3C3BC; --err-tx:#C0392B;

    --shadow: 0 18px 50px -24px rgba(20,18,16,.28);
    --ease:   cubic-bezier(.22, 1, .36, 1);
    --tr:     background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

/* ---------- TEMA: GELAP ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --orange:      #FF6A33;
    --orange-deep: #FF8A57;
    --orange-soft: rgba(255,106,51,.16);

    --bg:          #0E0D0C;
    --bg-tint:     #16130F;
    --surface:     #1B1815;
    --text:        #F5F3F0;
    --text-soft:   #A69F97;
    --line:        #2C2925;

    --invert-bg:    #FFFFFF;   /* blok kontras = PUTIH */
    --invert-text:  #141210;   /* teks di atasnya = HITAM */
    --invert-line:  rgba(20,18,16,.12);
    --invert-muted: rgba(20,18,16,.55);
    --invert-chip:  rgba(20,18,16,.10);
    --invert-dot:   rgba(20,18,16,.10);

    --nav-bg:       rgba(14,13,12,.82);

    --ok-bg: var(--orange-soft); --ok-bd: var(--orange); --ok-tx: var(--orange-deep);
    --err-bg: rgba(239,68,68,.15); --err-bd: rgba(239,68,68,.45); --err-tx:#F79184;

    --shadow: 0 18px 50px -24px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: var(--tr);
}

h1, h2, h3, h4 {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.02;
    color: var(--text);
}

.abm-eyebrow {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-deep);
    margin-bottom: 1rem;
}

/* ---------- Buttons ---------- */
.abm-btn-primary {
    --bs-btn-focus-shadow-rgb: 255, 90, 31;
    background: var(--orange);
    color: #fff;
    border: 2px solid var(--orange);
    border-radius: 999px;
    font-weight: 600;
    padding: .68rem 1.6rem;
    transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.abm-btn-primary:hover {
    background: var(--orange-deep);
    border-color: var(--orange-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px rgba(232, 67, 10, .55);
}
.abm-btn-ghost {
    background: transparent;
    color: var(--text);
    border: 2px solid var(--text);
    border-radius: 999px;
    font-weight: 600;
    padding: .68rem 1.6rem;
    transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.abm-btn-ghost:hover {
    background: var(--text);
    color: var(--bg);
    transform: translateY(-2px);
}

/* ---------- Navbar ---------- */
.abm-nav {
    background: var(--nav-bg);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
    padding: .7rem 0;
    transition: var(--tr);
}
.abm-brand {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.03em;
    text-decoration: none;
    color: var(--text);
}
.abm-brand-dot  { color: var(--orange); }
.abm-brand-sub  { color: var(--text); font-weight: 600; }
.abm-nav .nav-link {
    color: var(--text);
    font-weight: 500;
    padding: .4rem .9rem;
    position: relative;
}
.abm-nav .nav-link:hover { color: var(--orange-deep); }
.abm-nav .nav-link:not(.abm-btn-primary)::after {
    content: '';
    position: absolute;
    left: .9rem; right: .9rem; bottom: .2rem;
    height: 2px; background: var(--orange);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
}
.abm-nav .nav-link:not(.abm-btn-primary):hover::after { transform: scaleX(1); }
.navbar-toggler { border: none; padding: .25rem .4rem; }
.navbar-toggler:focus { box-shadow: none; }
.abm-burger, .abm-burger::before, .abm-burger::after {
    display: block; width: 24px; height: 2px; background: var(--text);
    position: relative; transition: .3s;
}
.abm-burger::before, .abm-burger::after { content: ''; position: absolute; left: 0; }
.abm-burger::before { top: -7px; }
.abm-burger::after  { top: 7px; }

/* Toggle tema */
.abm-theme-toggle {
    width: 42px; height: 42px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1.5px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--text);
    cursor: pointer;
    transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), background-color .3s var(--ease);
}
.abm-theme-toggle:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px); }
.abm-theme-toggle svg { width: 20px; height: 20px; }
.abm-theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .abm-theme-toggle .ico-sun  { display: block; }
:root[data-theme="dark"] .abm-theme-toggle .ico-moon { display: none; }

/* ---------- Hero ---------- */
.abm-hero {
    position: relative;
    padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
    background:
        radial-gradient(120% 80% at 85% -10%, var(--orange-soft) 0%, transparent 55%),
        var(--bg);
    overflow: hidden;
    transition: var(--tr);
}
.abm-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .5;
    mask-image: radial-gradient(120% 90% at 60% 20%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(120% 90% at 60% 20%, #000 30%, transparent 75%);
}
.abm-hero-title { font-size: clamp(2.6rem, 7.5vw, 5.3rem); margin: .3rem 0 1.4rem; }
.abm-highlight { color: var(--orange); position: relative; white-space: nowrap; }
.abm-highlight::after {
    content: '';
    position: absolute; left: -2%; right: -2%; bottom: .06em; height: .22em;
    background: var(--orange-soft); z-index: -1; border-radius: 3px;
}
.abm-hero-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    color: var(--text-soft); max-width: 34rem; margin-bottom: 2rem;
}
.abm-hero-lead strong { color: var(--text); font-weight: 600; }
.abm-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.2rem; }
.abm-hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.abm-hero-tags span {
    font-family: 'Space Mono', monospace;
    font-size: .72rem; letter-spacing: .02em;
    color: var(--text-soft);
    border: 1px solid var(--line); border-radius: 999px;
    padding: .3rem .8rem; background: var(--surface);
}

/* Hero card (blok kontras) */
.abm-hero-card {
    position: relative;
    background: var(--invert-bg); color: var(--invert-text);
    border-radius: 26px; padding: 2.2rem 2rem;
    box-shadow: var(--shadow); overflow: hidden;
    transition: var(--tr);
}
.abm-accentbar { position: absolute; top: 0; left: 0; right: 0; height: 6px; display: flex; }
.abm-accentbar span { flex: 1; }
.abm-accentbar span:nth-child(1),
.abm-accentbar span:nth-child(3) { background: var(--orange); }
.abm-accentbar span:nth-child(2) { background: var(--invert-text); }
.abm-hero-card-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--orange);
}
.abm-hero-card-label {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase; letter-spacing: .1em; font-size: .78rem;
    color: var(--invert-muted); margin-bottom: 1.6rem;
}
.abm-hero-list { list-style: none; padding: 0; margin: 0; }
.abm-hero-list li {
    display: flex; align-items: baseline; gap: .8rem;
    padding: .85rem 0; border-top: 1px solid var(--invert-line); font-weight: 500;
}
.abm-hero-list li span { font-family: 'Space Mono', monospace; color: var(--orange); font-size: .82rem; }

/* ---------- Marquee ---------- */
.abm-marquee { background: var(--orange); color: #fff; overflow: hidden; padding: .7rem 0; white-space: nowrap; }
.abm-marquee-track { display: inline-flex; animation: abm-scroll 26s linear infinite; }
.abm-marquee-track span {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700; letter-spacing: .04em; font-size: 1rem; padding-right: 1.5rem;
}
@keyframes abm-scroll { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.abm-section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.abm-section-tint { background: var(--bg-tint); transition: var(--tr); }
.abm-section-head { max-width: 40rem; margin-bottom: 2.8rem; }
.abm-section-title { font-size: clamp(1.9rem, 4.2vw, 3rem); }

/* Layanan */
.abm-service {
    height: 100%; background: var(--surface); border: 1px solid var(--line);
    border-radius: 18px; padding: 2rem 1.8rem;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.abm-service:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--orange); }
.abm-service-ico {
    width: 56px; height: 56px; display: grid; place-items: center;
    background: var(--orange-soft); color: var(--orange-deep);
    border-radius: 14px; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.2rem;
}
.abm-service h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.abm-service p { color: var(--text-soft); margin-bottom: 1.1rem; }
.abm-service ul { list-style: none; padding: 0; margin: 0; }
.abm-service ul li {
    font-family: 'Space Mono', monospace; font-size: .82rem;
    color: var(--text); padding: .35rem 0; border-top: 1px dashed var(--line);
}
.abm-service ul li::before { content: '→ '; color: var(--orange); }

/* Proses */
.abm-step {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 18px; padding: 1.6rem 1.4rem; height: 100%;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.abm-step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.abm-step-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800; font-size: 2.2rem; color: var(--orange);
    display: block; line-height: 1; margin-bottom: .6rem;
}
.abm-step h4 { font-size: 1.15rem; margin-bottom: .3rem; }
.abm-step p { color: var(--text-soft); font-size: .95rem; margin: 0; }

/* About + stats */
.abm-about-text { color: var(--text-soft); font-size: 1.05rem; margin-bottom: 1.1rem; max-width: 32rem; }
.abm-stat {
    background: var(--invert-bg); color: var(--invert-text);
    border-radius: 18px; padding: 1.6rem 1.4rem; height: 100%;
    transition: var(--tr);
}
.abm-stats .col-6:nth-child(2) .abm-stat,
.abm-stats .col-6:nth-child(3) .abm-stat { background: var(--orange); color: #fff; }
.abm-stat-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2.6rem; display: block; line-height: 1; }
.abm-stat-num em { font-style: normal; font-size: 1.4rem; opacity: .8; }
.abm-stat-label { font-family: 'Space Mono', monospace; font-size: .78rem; letter-spacing: .05em; opacity: .85; display: block; margin-top: .5rem; }

/* Portofolio */
.abm-porto {
    position: relative; height: 220px; border-radius: 18px; overflow: hidden;
    background: linear-gradient(150deg, var(--orange), var(--orange-deep));
    color: #fff; padding: 1.6rem;
    display: flex; flex-direction: column; justify-content: flex-end;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.abm-porto.abm-porto-alt { background: var(--invert-bg); color: var(--invert-text); }
.abm-porto::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px);
    background-size: 16px 16px; opacity: .5;
}
.abm-porto-alt::before { background-image: radial-gradient(var(--invert-dot) 1.5px, transparent 1.5px); }
.abm-porto:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.abm-porto-cat {
    position: relative; font-family: 'Space Mono', monospace; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .12em;
    background: rgba(255, 255, 255, .18); backdrop-filter: blur(4px);
    padding: .25rem .7rem; border-radius: 999px; align-self: flex-start;
    margin-bottom: .8rem; color: inherit;
}
.abm-porto-alt .abm-porto-cat { background: var(--invert-chip); }
.abm-porto h4 { position: relative; color: inherit; font-size: 1.25rem; }

/* Kontak */
.abm-contact { background: var(--bg); transition: var(--tr); }
.abm-contact-list { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.abm-contact-list li { padding: .7rem 0; border-top: 1px solid var(--line); display: flex; gap: 1rem; align-items: baseline; }
.abm-contact-list li span {
    font-family: 'Space Mono', monospace; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .08em; color: var(--orange-deep); min-width: 84px;
}
.abm-form-wrap {
    background: var(--bg-tint); border: 1px solid var(--line);
    border-radius: 22px; padding: clamp(1.6rem, 3vw, 2.4rem); transition: var(--tr);
}
.abm-label {
    font-family: 'Space Mono', monospace; font-size: .74rem;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-soft); margin-bottom: .35rem; display: block;
}
.abm-input {
    border: 1.5px solid var(--line); border-radius: 12px;
    padding: .7rem .9rem; background: var(--surface); color: var(--text);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.abm-input::placeholder { color: var(--text-soft); opacity: .7; }
.abm-input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); outline: none; background: var(--surface); color: var(--text); }
.abm-alert { border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.2rem; font-weight: 500; font-size: .95rem; }
.abm-alert-ok  { background: var(--ok-bg);  color: var(--ok-tx);  border: 1px solid var(--ok-bd); }
.abm-alert-err { background: var(--err-bg); color: var(--err-tx); border: 1px solid var(--err-bd); }

/* ---------- Footer ---------- */
.abm-footer { background: var(--invert-bg); color: var(--invert-text); padding: 3.2rem 0 2rem; transition: var(--tr); }
.abm-brand-footer { color: var(--invert-text); font-size: 1.7rem; }
.abm-brand-footer .abm-brand-sub { color: var(--invert-text); }
.abm-footer-tag { font-family: 'Space Mono', monospace; font-size: .8rem; letter-spacing: .05em; color: var(--invert-muted); margin-top: .5rem; }
.abm-footer-links { display: inline-flex; flex-wrap: wrap; gap: 1.4rem; }
.abm-footer-links a { color: var(--invert-muted); text-decoration: none; font-weight: 500; transition: color .2s var(--ease); }
.abm-footer-links a:hover { color: var(--orange); }
.abm-footer-rule { border-color: var(--invert-line); opacity: 1; margin: 2rem 0 1.2rem; }
.abm-footer-copy { font-family: 'Space Mono', monospace; font-size: .78rem; color: var(--invert-muted); margin: 0; text-align: center; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .abm-nav .navbar-nav { padding: 1rem 0; gap: .2rem; }
    .abm-nav .navbar-nav .abm-btn-primary { display: inline-block; margin-top: .4rem; }
    .abm-hero-card { margin-top: .5rem; }
}
@media (max-width: 575.98px) {
    .abm-hero-cta .btn { width: 100%; }
    .abm-footer-links { gap: 1rem; }
}

/* Link di daftar kontak */
.abm-contact-list a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--orange); padding-bottom: 1px; transition: color .2s var(--ease); }
.abm-contact-list a:hover { color: var(--orange); }

/* Portofolio dengan gambar (dari dashboard) */
a.abm-porto { text-decoration: none; }
.abm-porto-img { background-size: cover; background-position: center; color: #fff; }
.abm-porto-img::before { content: none; }
.abm-porto-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.2) 55%, rgba(0,0,0,.04)); z-index: 0; }
.abm-porto > * { position: relative; z-index: 1; }
.abm-porto-desc { font-size: .85rem; line-height: 1.45; opacity: .92; margin: .35rem 0 0; }

/* ===== Halaman Portfolio ===== */
.abm-porto-hero { padding: clamp(3rem, 7vw, 5rem) 0 clamp(1rem, 2vw, 1.5rem); background: radial-gradient(120% 80% at 85% -20%, var(--orange-soft) 0%, transparent 55%), var(--bg); transition: var(--tr); }
.abm-porto-hero-title { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin: .3rem 0 1rem; }
.abm-porto-hero-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--text-soft); max-width: 40rem; margin: 0; }

.abm-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.abm-filter-btn { font-family: 'Space Mono', monospace; font-size: .8rem; letter-spacing: .02em; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: .45rem 1.1rem; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.abm-filter-btn:hover { border-color: var(--orange); color: var(--orange); }
.abm-filter-btn.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }

.abm-porto-empty { text-align: center; padding: clamp(2.5rem, 8vw, 5rem) 1rem; border: 1.5px dashed var(--line); border-radius: 18px; }
.abm-porto-empty h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.abm-porto-empty p { color: var(--text-soft); margin-bottom: 1.5rem; }

/* ===== Portfolio card v2: gambar rapi (rasio 4:3), teks di bawah ===== */
.abm-porto { display:flex; flex-direction:column; height:100%; padding:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; color:var(--text); text-decoration:none; }
.abm-porto::before, .abm-porto::after { content:none !important; }
.abm-porto:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--orange); }
a.abm-porto { color:var(--text); }
.abm-porto-media { aspect-ratio:4 / 3; background:linear-gradient(150deg, var(--orange), var(--orange-deep)); overflow:hidden; }
.abm-porto-media img { width:100%; height:100%; object-fit:cover; display:block; }
.abm-porto-info { flex:1; padding:1.05rem 1.2rem 1.25rem; }
.abm-porto-info .abm-porto-cat { position:static; display:inline-block; background:var(--orange-soft); color:var(--orange-deep); backdrop-filter:none; padding:.15rem .6rem; border-radius:999px; letter-spacing:.06em; margin:0 0 .5rem; }
.abm-porto-info h4 { color:var(--text); font-size:1.2rem; margin:0; }
.abm-porto-info .abm-porto-desc { color:var(--text-soft); font-size:.9rem; line-height:1.5; margin:.4rem 0 0; opacity:1; }

/* ===== Portfolio card: DIKEMBALIKAN ke gaya branded (blok warna + titik) ===== */
.abm-porto, a.abm-porto { position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:100%; min-height:240px; padding:1.6rem; background:linear-gradient(150deg,var(--orange),var(--orange-deep)); border:none; border-radius:18px; overflow:hidden; color:#fff; text-decoration:none; }
.abm-porto.abm-porto-alt { background:var(--invert-bg); color:var(--invert-text); }
.abm-porto::before { content:'' !important; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px); background-size:16px 16px; opacity:.5; }
.abm-porto-alt::before { background-image:radial-gradient(var(--invert-dot) 1.5px, transparent 1.5px) !important; }
.abm-porto::after { content:none !important; }
.abm-porto:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.abm-porto > * { position:relative; z-index:1; }
.abm-porto .abm-porto-cat { position:relative; display:inline-block; align-self:flex-start; font-family:'Space Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); color:inherit; padding:.25rem .7rem; border-radius:999px; margin:0 0 .8rem; }
.abm-porto-alt .abm-porto-cat { background:var(--invert-chip); }
.abm-porto h4 { color:inherit; font-size:1.25rem; margin:0; }
.abm-porto .abm-porto-desc { color:inherit; opacity:.9; font-size:.85rem; line-height:1.4; margin:.4rem 0 0; }

/* Hint klik pada kartu portfolio */
.abm-porto-cta { font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.03em; opacity:.85; margin-top:.7rem; display:inline-block; }

/* Lightbox popup gambar */
.abm-lightbox { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; background:rgba(10,9,8,.9); padding:2rem; }
.abm-lightbox.is-open { display:flex; }
.abm-lightbox img { max-width:min(1100px, 92vw); max-height:88vh; border-radius:12px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
.abm-lb-close { position:absolute; top:1rem; right:1.2rem; width:44px; height:44px; border:none; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; transition:background .2s; }
.abm-lb-close:hover { background:var(--orange); }