.pil{--pil-ink:#0f172a;--pil-mute:#64748b;--pil-line:#e2e8f0;--pil-bg:#f8fafc;--pil-dark:#0f172a;--pil-green-dk:color-mix(in srgb,var(--pil-green) 72%,#000);
	display:grid;gap:20px;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
	grid-template-areas:"hero agenda" "profil ptsp";color:var(--pil-ink);font-size:14px;line-height:1.5}
.pil *,.pil *::before,.pil *::after{box-sizing:border-box}
.pil__ico{width:1.1em;height:1.1em;flex:none;vertical-align:-.15em}

.pil__card,.pil__hero{border-radius:16px;min-width:0;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.pil__card{background:#fff;border:1px solid var(--pil-line);padding:22px 24px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.pil__card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(15,23,42,.16);border-color:color-mix(in srgb,var(--pil-green) 45%,var(--pil-line))}
.pil__h{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:1.2rem;font-weight:800;color:var(--pil-ink)}
.pil__h .pil__ico{color:var(--pil-green-dk);transition:transform .3s ease}
.pil__card:hover .pil__h .pil__ico{transform:scale(1.15) rotate(-6deg)}

/* Hero */
.pil__hero{background:var(--pil-dark);color:#fff;padding:24px;display:flex;gap:24px;align-items:stretch;box-shadow:0 10px 30px -12px rgba(15,23,42,.5)}
.pil__hero:hover{transform:translateY(-4px);box-shadow:0 22px 44px -14px rgba(15,23,42,.6)}
.pil__photo{margin:0 14px 0 14px;flex:0 0 224px;align-self:center;position:relative;isolation:isolate}
.pil__photo::before,.pil__photo::after{content:"";position:absolute;inset:0;border-radius:18px;z-index:-1;transition:transform .45s ease}
.pil__photo::before{background:color-mix(in srgb,var(--pil-green) 28%,#0f172a);border:1px solid color-mix(in srgb,var(--pil-green) 55%,transparent);transform:rotate(-5deg) translate(-6px,4px)}
.pil__photo::after{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transform:rotate(3deg) translate(5px,-3px)}
.pil__hero:hover .pil__photo::before{transform:rotate(-7deg) translate(-8px,5px)}
.pil__hero:hover .pil__photo::after{transform:rotate(5deg) translate(7px,-4px)}
.pil__photo img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:16px;background:#334155;box-shadow:0 14px 28px -10px rgba(0,0,0,.6)}
.pil__heroBody{flex:1;min-width:0;display:flex;flex-direction:column}
.pil__eyebrow{margin:0 0 6px;font-size:.7rem;font-weight:800;letter-spacing:.06em;color:#4ade80}
.pil__name{margin:0;font-size:1.6rem;font-weight:800;color:#fff;line-height:1.2}
.pil__role{margin:4px 0 12px;color:#94a3b8;font-size:.9rem}
.pil__welcome{margin:0 0 16px;color:#cbd5e1;font-size:.88rem;text-align:justify;hyphens:none}
.pil__quote{margin:auto 0;background:#1e293b;border:1px solid #334155;border-radius:14px;padding:18px 20px 14px;position:relative;transition:border-color .3s ease,background .3s ease}
.pil__hero:hover .pil__quote{border-color:#4ade80;background:#223047}
.pil__quote::before{content:"\201C";position:absolute;left:10px;top:-2px;font-size:2.2rem;color:#4ade80;font-family:Georgia,serif;line-height:1}
.pil__quote p{margin:0 0 14px 14px;color:#f1f5f9;font-size:.88rem;text-align:justify;hyphens:none}
.pil__quote footer{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.pil__quote footer span{font-size:.68rem;font-weight:700;letter-spacing:.05em;color:#64748b}
.pil__quote footer img{max-height:64px;max-width:40%;width:auto;object-fit:contain}

/* Agenda */
.pil__tl{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.pil__tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--pil-line)}
.pil__tl li{position:relative;padding:8px 10px 10px 12px;margin:0 0 4px -12px;display:flex;flex-direction:column;gap:2px;border-radius:10px;transition:background .25s ease,transform .25s ease}
.pil__tl li:hover{background:var(--pil-bg);transform:translateX(4px)}
.pil__tl li::before{content:"";position:absolute;left:-10px;top:14px;width:12px;height:12px;border-radius:50%;background:#94a3b8;border:2px solid #fff;box-shadow:0 0 0 1px #cbd5e1;transition:background .25s ease,box-shadow .25s ease}
.pil__tl li:hover::before,.pil__tl li.is-first::before{background:var(--pil-green);box-shadow:0 0 0 1px var(--pil-green)}
.pil__tl strong{font-size:.92rem;color:var(--pil-ink)}
.pil__tl span{font-size:.78rem;color:var(--pil-mute);display:flex;gap:6px;align-items:center}
.pil__more{display:block;margin-top:16px;text-align:center;font-weight:800;color:#fff;background:var(--pil-green-dk);padding:10px 16px;border-radius:999px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.pil__more:hover{background:var(--pil-green);transform:translateY(-2px);box-shadow:0 8px 18px -6px var(--pil-green);color:#fff}
.pil__empty,.pil__note{margin:0 0 10px;color:var(--pil-mute);font-size:.88rem}
.pil__note{font-size:.76rem;font-style:italic}
.pil__admin{margin:10px 0 0;padding:6px 8px;background:#fff7ed;border:1px dashed #fdba74;border-radius:6px;font-size:.7rem;color:#9a3412;word-break:break-word}

/* Slider profil */
.pil__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 10px}
.pil__track::-webkit-scrollbar{display:none}
.pil__person{flex:0 0 calc((100% - 36px) / 4);min-width:150px;scroll-snap-align:start;background:var(--pil-bg);border:1px solid var(--pil-line);border-radius:14px;padding:10px 10px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease}
.pil__person:hover{transform:translateY(-6px);background:#fff;border-color:var(--pil-green);box-shadow:0 14px 26px -10px rgba(15,23,42,.25)}
.pil__pic{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:10px;margin-bottom:8px;background:var(--pil-line);transition:transform .45s ease}
.pil__person:hover .pil__pic{transform:scale(1.04)}
.pil__pic--i{display:flex;align-items:center;justify-content:center;background:var(--pil-green);color:#fff;font-weight:800;font-size:1.6rem}
.pil__person strong{font-size:.84rem;line-height:1.3}
.pil__person .pil__job{font-size:.75rem;color:var(--pil-mute);line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pil__nav{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:6px}
.pil__arrow{border:0;background:none;color:#94a3b8;cursor:pointer;font-size:.8rem;padding:6px;transition:color .2s ease,transform .2s ease}
.pil__arrow:hover{color:var(--pil-green-dk);transform:scale(1.25)}
.pil__dots{display:flex;gap:8px}
.pil__dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid #94a3b8;display:block;cursor:pointer;transition:all .25s ease}
.pil__dots i:hover{border-color:var(--pil-green)}
.pil__dots i.is-on{background:var(--pil-green);border-color:var(--pil-green);width:22px;border-radius:999px}

/* Jam layanan */
.pil__card[data-pil-ptsp]{display:flex;flex-direction:column}
.pil__row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pil__badge{font-size:.7rem;font-weight:800;letter-spacing:.05em;padding:8px 14px;border-radius:999px;color:#fff;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.pil__badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.pil__badge--buka{background:var(--pil-green)}
.pil__badge--buka::before{animation:pil-pulse 1.8s ease-in-out infinite}
.pil__badge--istirahat{background:#d97706}
.pil__badge--tutup{background:#64748b}
@keyframes pil-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}}
.pil__hours{margin:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px}
.pil__hours>div{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;padding:10px 12px;border-radius:12px;background:var(--pil-bg);transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.pil__hours>div:hover{background:color-mix(in srgb,var(--pil-green) 10%,#fff);transform:scale(1.03);box-shadow:0 6px 14px -8px rgba(15,23,42,.3)}
.pil__hours dt{color:var(--pil-mute);margin:0;font-size:.78rem}
.pil__hours dd{margin:0;font-weight:800;font-size:.95rem;white-space:nowrap}

@media (max-width:991px){
	.pil{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "agenda" "ptsp" "profil"}
}
@media (max-width:600px){
	.pil__hero{flex-direction:column;padding:18px}
	.pil__photo{flex-basis:auto;width:min(232px,80%);margin:10px auto 14px}
	.pil__person{flex-basis:calc((100% - 12px) / 2);min-width:0}
	.pil__card{padding:18px}
}
@media (prefers-reduced-motion:reduce){
	.pil *,.pil *::before{transition:none!important;animation:none!important}
	.pil__card:hover,.pil__hero:hover,.pil__person:hover{transform:none}
}