/* CSS khusus service.blade.php (resources/views/livewire/guest-page). Dimuat di <head> lewat partials/page-css. */
/* ══════════════════════════════════════════════════════
   LAYANAN — tema terang (default) + dark mode lewat token ugs-site.css
   Hierarki: H1/H2 display kapital → label mono oranye → judul kartu Inter tebal → isi/tombol huruf biasa
══════════════════════════════════════════════════════ */
/* dibuka dari mega menu (/service#id): jangan tertutup navbar + highlight sebentar */
.sv-card { scroll-margin-top: calc(var(--ugs-nav-h) + 30px); }
.sv-card:target { animation: svTarget 2.4s ease-out; }
@keyframes svTarget { 0%,35% { box-shadow: 0 0 0 3px var(--ugs-accent), 0 18px 48px rgba(var(--ugs-accent-rgb),.35); } 100% { box-shadow: 0 0 0 0 rgba(var(--ugs-accent-rgb),0); } }
@media (prefers-reduced-motion: reduce) { .sv-card:target { animation: none; outline: 3px solid var(--ugs-accent); } }

:where(.sv-page, .sv-page *) { font-family:var(--font-body); }
.sv-page { background:var(--ugs-page); color:var(--ugs-fg); }
.sv-container { max-width:1240px; margin:0 auto; padding:0 2rem; }
.sv-section { padding:7rem 0; background:var(--ugs-page); }
.sv-section-dark { background:var(--ugs-surface); }
.sv-sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:3rem; }

.sv-label { display:block; font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--ugs-accent-text); margin-bottom:.75rem; }
.sv-h2 { font-family:var(--font-display); font-size:var(--ugs-fs-h2); font-weight:800; text-transform:uppercase; line-height:.98; color:var(--ugs-fg); margin:0; text-wrap:balance; }
.sv-h2 em, .sv-hero-h1 em, .sv-cta-h2 em { font-family:inherit; font-style:normal; font-weight:300; color:var(--ugs-fg-3); }
.sv-body { font-size:1rem; line-height:1.75; color:var(--ugs-fg-2); margin:0; max-width:400px; }

.sv-btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:500; text-decoration:none; border-radius:100px; transition:all .22s ease; cursor:pointer; border:1.5px solid transparent; white-space:nowrap; font-size:.95rem; padding:.85rem 1.8rem; }
.sv-btn-primary, .sv-btn-white { background:var(--ugs-accent); color:#fff; border-color:var(--ugs-accent); }
.sv-btn-primary:hover, .sv-btn-white:hover { background:var(--ugs-accent-dark); border-color:var(--ugs-accent-dark); color:#fff; transform:translateY(-1px); }
.sv-btn-ghost { background:transparent; color:var(--ugs-fg); border-color:var(--ugs-hairline-strong); }
.sv-btn-ghost:hover { color:var(--ugs-fg); border-color:var(--ugs-fg); }

.sv-reveal { opacity:0; transform:translateY(22px); transition:opacity .85s cubic-bezier(0,0,.2,1), transform .85s cubic-bezier(0,0,.2,1); }
.sv-reveal.visible { opacity:1; transform:none; }
.sv-reveal:nth-child(2){ transition-delay:.1s; } .sv-reveal:nth-child(3){ transition-delay:.18s; }

/* ── HERO ── */
.sv-hero { position:relative; background:var(--ugs-studio); overflow:hidden; padding-top:calc(var(--ugs-nav-h) + 3.5rem); }
.sv-hero-grid { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--ugs-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--ugs-hairline) 1px, transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse at 80% 35%, #000 20%, transparent 70%); mask-image:radial-gradient(ellipse at 80% 35%, #000 20%, transparent 70%); }
.sv-hero-glow { display:none; }
.sv-hero-body { position:relative; z-index:2; padding-bottom:3rem; }
.sv-hero-h1 { font-family:var(--font-display); font-size:var(--ugs-fs-h1); font-weight:800; line-height:.9; text-transform:uppercase; color:var(--ugs-fg); margin:.5rem 0 1.25rem; }
.sv-hero-sub { font-size:clamp(.95rem,1.4vw,1.05rem); color:var(--ugs-fg-2); line-height:1.7; max-width:580px; margin:0 0 2rem; }
.sv-hero-cta { display:flex; gap:.75rem; flex-wrap:wrap; }

/* angka */
.sv-stats { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); max-width:1240px; margin:0 auto; border-top:1px solid var(--ugs-hairline); }
.sv-stat { display:flex; flex-direction:column; padding:2.2rem 2rem; border-left:1px solid var(--ugs-hairline); }
.sv-stat:first-child { border-left:0; }
.sv-stat strong { font-family:var(--font-display); font-size:clamp(2.4rem,4.5vw,3.6rem); font-weight:800; color:var(--ugs-fg); line-height:1; }
.sv-stat strong span { font-family:inherit; color:var(--ugs-accent); }
.sv-stat small { font-size:.92rem; font-weight:500; color:var(--ugs-fg-2); margin-top:.5rem; }

/* ── KARTU LAYANAN ── */
.sv-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.sv-card { background:var(--ugs-card); border:1px solid var(--ugs-hairline); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .3s, transform .3s; }
.sv-card:hover { box-shadow:0 18px 40px var(--ugs-shadow); transform:translateY(-3px); }
.sv-card-head { display:flex; align-items:center; justify-content:space-between; padding:1.6rem 1.6rem 0; }
.sv-card-icon { width:46px; height:46px; border-radius:12px; background:var(--ugs-accent-tint); color:var(--ugs-accent); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.sv-card-n { font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size:.78rem; color:var(--ugs-fg-3); }
.sv-card-body { padding:1.1rem 1.6rem 1.7rem; display:flex; flex-direction:column; gap:.55rem; flex-grow:1; }
.sv-card-badge { font-size:.78rem; font-weight:500; color:var(--ugs-accent-text); }
.sv-card-title { font-family:var(--font-body); font-size:1.15rem; font-weight:600; letter-spacing:-.01em; color:var(--ugs-fg); margin:0; line-height:1.3; }
.sv-card-desc { font-size:.92rem; color:var(--ugs-fg-2); line-height:1.65; margin:0; }
.sv-card-list { list-style:none; padding:.9rem 0 0; margin:.4rem 0 0; display:flex; flex-direction:column; gap:.5rem; border-top:1px solid var(--ugs-hairline); }
.sv-card-list li { display:flex; align-items:flex-start; gap:.55rem; font-size:.88rem; color:var(--ugs-fg); }
.sv-card-list li i { color:var(--ugs-accent); font-size:.7rem; margin-top:.35rem; flex-shrink:0; }
/* DEV-08: poin layanan bisa diklik → katalog terfilter / proyek / formulir kontak */
.sv-card-list li { display:block; }
.sv-card-link { display:flex; align-items:flex-start; gap:.55rem; min-height:32px; padding:.2rem 0; color:inherit; text-decoration:none; border-radius:6px; }
.sv-card-link span { flex:1; }
.sv-card-link:hover span, .sv-card-link:focus-visible span { color:var(--ugs-accent); text-decoration:underline; text-underline-offset:3px; }
.sv-card-link:focus-visible { outline:2px solid var(--ugs-accent); outline-offset:2px; }
.sv-card-list .sv-card-link-go { color:var(--ugs-fg-3, var(--ugs-fg-2)); font-size:.7rem; margin-top:.4rem; opacity:.55; transition:transform .2s, opacity .2s; }
.sv-card-link:hover .sv-card-link-go, .sv-card-link:focus-visible .sv-card-link-go { opacity:1; color:var(--ugs-accent); transform:translateX(2px); }

/* ── KEUNTUNGAN SATU MITRA ── */
.sv-advantages { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.sv-adv { display:flex; gap:1.1rem; align-items:flex-start; padding:1.7rem; background:var(--ugs-card); border:1px solid var(--ugs-hairline); border-radius:22px; }
.sv-adv-icon { width:46px; height:46px; border-radius:12px; background:var(--ugs-accent-tint); color:var(--ugs-accent); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.sv-adv-title { font-family:var(--font-body); font-size:1.08rem; font-weight:600; color:var(--ugs-fg); margin:0 0 .35rem; }
.sv-adv-desc { font-size:.9rem; color:var(--ugs-fg-2); line-height:1.65; margin:0; }

/* ── AJAKAN ── */
.sv-cta { position:relative; background:var(--ugs-page); padding:7rem 0; text-align:center; border-top:1px solid var(--ugs-hairline); }
.sv-cta-scrim { display:none; }
.sv-cta-body { max-width:760px; }
.sv-cta-h2 { font-family:var(--font-display); font-size:var(--ugs-fs-display-sm); font-weight:800; text-transform:uppercase; line-height:.95; color:var(--ugs-fg); margin:.5rem 0 1.25rem; }
.sv-cta-sub { font-size:1rem; color:var(--ugs-fg-2); line-height:1.7; max-width:540px; margin:0 auto 2.25rem; }
.sv-cta-btns { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

/* ── RESPONSIF ── */
@media(max-width:991px){ .sv-services-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px){
    .sv-section, .sv-cta { padding:4.5rem 0; }
    .sv-container { padding:0 1.25rem; }
    .sv-hero { padding-top:calc(var(--ugs-nav-h) + 2rem); }
    .sv-hero-cta, .sv-cta-btns { flex-direction:column; align-items:stretch; }
    .sv-hero-cta .sv-btn, .sv-cta-btns .sv-btn { justify-content:center; }
    .sv-stats { grid-template-columns:repeat(2,1fr); }
    .sv-stat { padding:1.6rem 1.25rem; }
    .sv-stat:nth-child(3) { border-left:0; }
    .sv-stat:nth-child(n+3) { border-top:1px solid var(--ugs-hairline); }
    .sv-advantages { grid-template-columns:1fr; }
}
@media(max-width:640px){ .sv-services-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){ .sv-reveal { opacity:1; transform:none; transition:none; } }