
/* KPI UNSUDA — Fasilitas Pendukung | stylesheet scoped to homepage section */
.kpi-facilities{position:relative;isolation:isolate;overflow:hidden;padding:74px 0 68px;background:linear-gradient(150deg,#f9feff 0%,var(--pale,#effaff) 49%,#e8f6fc 100%);color:var(--text,#16354d)}
.kpi-facilities::before{content:"";pointer-events:none;position:absolute;right:-110px;top:-165px;width:470px;height:470px;border:1px solid rgba(0,115,182,.13);border-radius:50%;box-shadow:0 0 0 45px rgba(0,189,221,.035),0 0 0 92px rgba(0,205,182,.028);z-index:-1}
.kpi-facilities::after{content:"";position:absolute;left:-90px;bottom:-215px;width:410px;height:310px;border-radius:50%;border:48px solid rgba(255,204,50,.24);transform:rotate(-23deg);z-index:-1;pointer-events:none}
.kpi-facilities-head{max-width:815px;margin-bottom:29px}
.kpi-facilities-eyebrow{display:inline-flex;align-items:center;gap:13px;margin-bottom:8px;color:var(--blue,#0073b6);font-size:11px;font-weight:850;letter-spacing:.17em;text-transform:uppercase}
.kpi-facilities-eyebrow::after{content:"";width:40px;height:2px;background:var(--gold,#ffcc32);border-radius:2px}
.kpi-facilities h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(29px,3.5vw,47px);font-weight:700;line-height:1.12;color:var(--navy,#073454);letter-spacing:-.035em;margin:0 0 14px}
.kpi-facilities h2 span{color:#038a9b}
.kpi-facilities-head>p{max-width:740px;font-size:14px;line-height:1.8;margin-bottom:0;color:var(--muted,#617486)}
.kpi-facilities-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.kpi-facility-card{background:#fff;border:1px solid rgba(8,110,159,.12);border-radius:18px;overflow:hidden;box-shadow:0 16px 38px rgba(1,66,108,.09);transition:transform .24s ease,box-shadow .24s ease;min-width:0}
.kpi-facility-card:hover{transform:translateY(-5px);box-shadow:0 21px 40px rgba(1,66,108,.15)}
.kpi-facility-figure{position:relative;height:auto;aspect-ratio:1.36;overflow:hidden;margin:7px 7px 0;border-radius:12px;background:linear-gradient(130deg,var(--navy,#073454),#07a6c0)}
.kpi-facility-figure img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.kpi-facility-card:hover .kpi-facility-figure img{transform:scale(1.05)}
.kpi-facility-figure::after{content:"";position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(0deg,rgba(3,35,58,.38),transparent);pointer-events:none}

.kpi-facility-content{padding:15px 17px 21px}
.kpi-facility-icon{width:42px;height:42px;margin-top:-32px;margin-bottom:9px;display:grid;place-items:center;border-radius:50%;border:3px solid #fff;position:relative;z-index:2;color:#fff;background:var(--blue,#0073b6);box-shadow:0 3px 10px rgba(1,65,96,.16)}
.kpi-facility-card:nth-child(2) .kpi-facility-icon{background:#0b9f9b}
.kpi-facility-card:nth-child(3) .kpi-facility-icon{background:#b88a28}
.kpi-facility-card:nth-child(4) .kpi-facility-icon{background:var(--navy,#073454)}
.kpi-facility-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kpi-facility-content h3{font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.24;color:var(--navy,#073454);margin:0 0 9px}
.kpi-facility-content p{font-size:12px;line-height:1.7;margin:0;color:var(--muted,#617486)}
.kpi-facilities-foot{display:flex;align-items:center;justify-content:center;text-align:center;margin-top:27px}
.kpi-facilities-disclaimer{font-size:11px;max-width:800px;margin:0 auto 15px;line-height:1.6;color:#4a6979}
.kpi-facilities-detail{display:inline-block;text-align:left}
.kpi-facilities-detail summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:14px 24px;border-radius:999px;font-weight:800;font-size:12px;line-height:1.4;color:#fff;background:linear-gradient(100deg,var(--blue,#0073b6),var(--navy,#073454));box-shadow:0 7px 20px rgba(4,66,112,.18);transition:box-shadow .2s,transform .2s}
.kpi-facilities-detail summary::-webkit-details-marker{display:none}
.kpi-facilities-detail summary:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(4,66,112,.21)}
.kpi-facilities-detail summary:focus-visible{outline:3px solid var(--gold,#ffcc32);outline-offset:3px}
.kpi-facilities-detail[open] summary span{transform:rotate(90deg)}
.kpi-facilities-detail summary span{font-size:19px;transition:transform .18s}
.kpi-facilities-detail-body{margin:20px auto 0;max-width:790px;padding:18px 20px;border:1px solid #cbe8f0;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 8px 25px rgba(3,54,80,.05)}
.kpi-facilities-detail-body h3{font-size:16px;margin:0 0 8px;color:var(--navy,#073454)}
.kpi-facilities-detail-body p{font-size:12px;line-height:1.65;margin:0 0 12px}
.kpi-facilities-detail-body p:last-child{margin-bottom:0}
@media(max-width:1000px){.kpi-facilities{padding:62px 0}.kpi-facilities-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-facility-figure{aspect-ratio:1.6}}
@media(max-width:600px){.kpi-facilities{padding:52px 0 54px}.kpi-facilities h2{font-size:clamp(28px,7.4vw,35px)}.kpi-facilities-head>p{font-size:12px}.kpi-facilities-grid{grid-template-columns:1fr;gap:17px}.kpi-facility-figure{aspect-ratio:1.7}.kpi-facility-content{padding:13px 16px 19px}.kpi-facility-content h3{font-size:19px}.kpi-facilities-detail{display:block;text-align:center}.kpi-facilities-detail summary{width:100%}.kpi-facilities-detail-body{text-align:left}}

/* Kartu resmi dan navigasi daftar fasilitas */
.kpi-facility-content h3 a,.kpi-facility-content h2 a{color:inherit;text-decoration:none}
.kpi-facility-content h3 a:hover,.kpi-facility-content h2 a:hover{color:var(--blue,#0073b6)}
.kpi-facilities-more{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:14px 24px;border-radius:999px;color:#fff!important;background:linear-gradient(100deg,var(--blue,#0073b6),var(--navy,#073454));font-size:12px;font-weight:800;line-height:1.4;text-decoration:none;box-shadow:0 7px 20px rgba(4,66,112,.18);transition:transform .2s,box-shadow .2s}
.kpi-facilities-more:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px rgba(4,66,112,.23)}
.kpi-facilities-more:focus-visible{outline:3px solid var(--gold,#ffcc32);outline-offset:3px}
.kpi-facilities-archive{min-height:62vh}
.kpi-facilities-archive .kpi-facilities-head{margin-bottom:36px}
.kpi-facilities-archive .kpi-facilities-head h1,.kpi-facility-detail-header h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(31px,3.5vw,49px);line-height:1.12;color:var(--navy,#073454);margin:6px 0 14px;letter-spacing:-.035em}
.kpi-facilities-archive .kpi-facilities-head h1 span{color:#038a9b}
.kpi-facilities-archive .kpi-facilities-head p,.kpi-facility-detail-header p{font-size:14px;line-height:1.75;color:var(--muted,#617486)}
.kpi-facilities-archive .kpi-facility-content{padding:17px 18px 22px}
.kpi-facilities-archive .kpi-facility-content h2{font-size:18px;line-height:1.3;margin:4px 0 9px;color:var(--navy,#073454);font-family:Georgia,'Times New Roman',serif}
.kpi-facilities-archive .kpi-facility-figure a{display:block;width:100%;height:100%}
.kpi-facility-no-photo{min-height:100%;display:grid;place-items:center;color:#e5f9ff;font-size:13px;text-align:center;padding:15px}
.kpi-facility-read{font-size:12px;font-weight:800;color:var(--blue,#0073b6);display:inline-flex;gap:8px;margin-top:14px}
.kpi-facility-read:hover{color:var(--navy,#073454)}
.kpi-facilities-pages{margin:36px 0 22px;text-align:center}
.kpi-facilities-pages .nav-links{display:flex;gap:11px;flex-wrap:wrap;justify-content:center}
.kpi-facilities-pages .page-numbers{padding:8px 12px;background:#fff;border:1px solid var(--line,#dcebf2);border-radius:9px}
.kpi-facilities-pages .page-numbers.current{color:#fff;background:var(--navy,#073454)}
.kpi-facilities-back{margin:28px 0 0}
.kpi-facilities-back a{color:var(--blue,#0073b6);font-size:13px;font-weight:800}
.kpi-facilities-single{padding:50px 0 75px;background:linear-gradient(165deg,#f7fdff,#fff 60%)}
.kpi-facility-detail{max-width:940px;margin:0 auto}
.kpi-facility-breadcrumb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:29px;color:#647b8d;font-size:12px}
.kpi-facility-breadcrumb a{color:var(--blue,#0073b6);font-weight:750}
.kpi-facility-detail-header{margin-bottom:28px}
.kpi-facility-detail-header p{max-width:760px}
.kpi-facility-detail-image{margin:0 0 28px;border-radius:20px;overflow:hidden;background:#e5f2f8;box-shadow:0 14px 38px rgba(7,52,84,.09)}
.kpi-facility-detail-image img{width:100%;height:auto;max-height:520px;display:block;object-fit:cover}
.kpi-facility-detail-body{font-size:15px;line-height:1.85;color:var(--text,#16354d);margin:0 0 28px}
.kpi-facility-detail-body p{color:inherit}
.kpi-facility-detail-body img{border-radius:12px}
@media(max-width:600px){.kpi-facilities-single{padding:34px 0 55px}.kpi-facility-detail-image{border-radius:12px}.kpi-facility-detail-header p{font-size:12px}.kpi-facility-detail-body{font-size:14px}}

@media(prefers-reduced-motion:reduce){.kpi-facility-card,.kpi-facility-figure img,.kpi-facilities-detail summary,.kpi-facilities-detail summary span{transition:none}}
