/* KPI UNSUDA — halaman Foto Kegiatan, terisolasi dari section lain */
.kpi-photo-page,.kpi-photo-single{color:#073454}
.kpi-photo-hero{position:relative;isolation:isolate;overflow:hidden;padding:52px 0 55px;background:linear-gradient(118deg,#f3f9fc 0%,#f8fcff 56%,#eaf6ff 100%)}
.kpi-photo-hero::before,.kpi-photo-hero::after{position:absolute;content:"";pointer-events:none;border-radius:50%;z-index:0}
.kpi-photo-hero::before{width:390px;height:390px;right:-170px;top:-120px;border:60px solid rgba(0,115,182,.055)}
.kpi-photo-hero::after{width:180px;height:180px;left:-90px;bottom:-95px;border:35px solid rgba(0,115,182,.055)}
.kpi-photo-campus{position:absolute;inset:0 auto 0 0;width:68%;height:100%;background-size:cover;background-position:left center;background-repeat:no-repeat;filter:grayscale(100%);opacity:.085;-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.60) 53%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.60) 53%,transparent 100%);pointer-events:none;z-index:0}
.kpi-photo-hero-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;gap:34px;min-height:390px}
.kpi-photo-hero-copy,.kpi-photo-hero-visual{min-width:0}
.kpi-photo-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 32px;color:#516d85;font-size:12px;line-height:1.5}
.kpi-photo-breadcrumb a{color:#0073b6;text-decoration:none;font-weight:700}
.kpi-photo-breadcrumb a:hover{text-decoration:underline}
.kpi-photo-hero h1{margin:0 0 20px;font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:clamp(34px,4.2vw,58px);font-weight:800;line-height:1.08;letter-spacing:-.035em;color:#073454}
.kpi-photo-hero h1 span{display:block;color:#0073b6}
.kpi-photo-hero h1::after{content:"";display:block;width:52px;height:3px;background:#0073b6;border-radius:9px;margin-top:16px}
.kpi-photo-hero-desc{max-width:525px;margin:0 0 26px;color:#536f87;font-size:14px;line-height:1.75}
.kpi-photo-hero-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kpi-photo-benefit{display:flex;gap:9px;min-width:0;align-items:flex-start}
.kpi-photo-benefit-icon{width:39px;height:39px;flex:0 0 39px;border-radius:50%;display:grid;place-items:center;background:#e0f1ff;color:#0073b6}
.kpi-photo-benefit-icon svg{width:20px;height:20px}
.kpi-photo-benefit>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi-photo-benefit strong{font-size:11px;line-height:1.3;color:#073454}
.kpi-photo-benefit small{font-size:10px;color:#667b92;line-height:1.5}
.kpi-photo-hero-card{position:relative;margin:0;padding:10px;border-radius:22px;background:#fff;box-shadow:0 17px 46px rgba(7,52,84,.13);overflow:hidden}
.kpi-photo-hero-img,.kpi-photo-hero-placeholder{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:14px}
.kpi-photo-hero-img{object-fit:cover}
.kpi-photo-hero-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;padding:22px;background:linear-gradient(135deg,#dceefa,#bcdcf1 65%,#a8d0ed);color:#075081}
.kpi-photo-hero-placeholder svg{width:100px;height:86px;max-width:45%;opacity:.85}
.kpi-photo-hero-placeholder strong{font-size:clamp(13px,1.3vw,17px);color:#073454}
.kpi-photo-hero-placeholder small{font-size:11px;max-width:250px;line-height:1.5;color:#3a688a}
.kpi-photo-albums-section{background:linear-gradient(180deg,#fff 0%,#f7fbff 100%);padding:49px 0 78px}
.kpi-photo-section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:26px}
.kpi-photo-section-copy{min-width:0}
.kpi-photo-eyebrow{display:inline-flex;gap:10px;align-items:center;margin-bottom:10px;color:#63809d;font-size:11px;font-weight:850;letter-spacing:.11em}
.kpi-photo-eyebrow::before{content:"";display:block;width:33px;height:3px;background:#0073b6;border-radius:3px}
.kpi-photo-section-copy h2{font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:clamp(24px,2.8vw,37px);font-weight:800;line-height:1.2;letter-spacing:-.035em;color:#073454;margin:0 0 10px}
.kpi-photo-section-copy h2 span{color:#0073b6}
.kpi-photo-section-copy>p{margin:0;color:#637d92;font-size:13px;line-height:1.7;max-width:660px}
.kpi-photo-all-button{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:17px;min-height:42px;padding:11px 20px;border-radius:12px;border:1px solid #0073b6;background:#fff;color:#0073b6!important;text-decoration:none;font-size:12px;font-weight:800;box-shadow:0 4px 16px rgba(7,52,84,.045);transition:background .18s,box-shadow .18s}
.kpi-photo-all-button:hover{background:#e9f6ff;box-shadow:0 8px 22px rgba(7,52,84,.10)}
.kpi-photo-album-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;scroll-margin-top:115px}
.kpi-photo-album-card{overflow:hidden;min-width:0;background:#fff;border:1px solid rgba(6,101,160,.10);border-radius:14px;box-shadow:0 10px 28px rgba(7,52,84,.075)}
.kpi-photo-album-link{display:block;height:100%;color:inherit;text-decoration:none!important}
.kpi-photo-album-cover{position:relative;height:auto;aspect-ratio:1.53;overflow:hidden;background:#d6edf9}
.kpi-photo-album-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.kpi-photo-album-card:hover .kpi-photo-album-cover img{transform:scale(1.04)}
.kpi-photo-album-empty,.kpi-photo-album-placeholder-art{width:100%;height:100%;display:grid;place-items:center}
.kpi-photo-album-empty>span{font-size:50px;color:#4785a9}
.kpi-photo-album-count{position:absolute;bottom:10px;left:10px;color:#fff;background:rgba(6,37,60,.82);border-radius:6px;padding:4px 9px;font-size:11px;font-weight:700}
.kpi-photo-album-content{display:flex;justify-content:space-between;align-items:center;gap:7px;min-height:92px;padding:15px 14px 16px}
.kpi-photo-album-content h3{font-size:14px;color:#073454;font-weight:800;line-height:1.4;margin:0 0 5px}
.kpi-photo-album-content p{font-size:11px;line-height:1.52;color:#687d92;margin:0}
.kpi-photo-album-arrow{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:#e6f4ff;display:grid;place-items:center;color:#0073b6;font-size:19px}
.kpi-photo-album-link:hover .kpi-photo-album-arrow{background:#0073b6;color:#fff}
.kpi-photo-album-cover--seminar{background:linear-gradient(135deg,#d5edfb,#afd4e9)}
.kpi-photo-album-cover--media{background:linear-gradient(135deg,#dfebff,#a1c7e9)}
.kpi-photo-album-cover--social{background:linear-gradient(135deg,#d7f3ed,#9acdc5)}
.kpi-photo-album-cover--organisasi{background:linear-gradient(135deg,#e5effa,#afc9e9)}
.kpi-photo-album-placeholder-art{color:#5f91b4}
.kpi-photo-album-placeholder-art svg{width:76px;height:66px;opacity:.75}
.kpi-photo-pagination{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:28px 0 0}
.kpi-photo-pagination .page-numbers{padding:7px 12px;color:#073454;background:#e9f5fd;border-radius:8px}
.kpi-photo-pagination .current{color:#fff;background:#0073b6}
.kpi-photo-single-hero{padding:50px 0 46px;background:linear-gradient(130deg,#f2f9fd,#e8f4fc)}
.kpi-photo-single-hero .kpi-photo-breadcrumb{margin-bottom:30px}
.kpi-photo-single-hero h1{color:#073454;font-size:clamp(30px,3.8vw,50px);letter-spacing:-.035em;margin:4px 0 15px}
.kpi-photo-single-lead{max-width:770px;color:#526f87;font-size:14px;line-height:1.7}
.kpi-photo-single-meta{display:flex;gap:10px;color:#658199;font-size:12px;font-weight:650}
.kpi-photo-single-body{padding:44px 0 76px;background:#fff}
.kpi-photo-single-description{font-size:14px;line-height:1.85;max-width:900px;color:#33556d;margin-bottom:27px}
.kpi-photo-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.kpi-photo-photo-item{min-width:0;margin:0}
.kpi-photo-photo-item>a{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#eaf4f9}
.kpi-photo-photo-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.kpi-photo-photo-item>a:hover img{transform:scale(1.035)}
.kpi-photo-photo-expand{position:absolute;right:9px;bottom:9px;padding:3px 9px;border-radius:7px;color:white;background:rgba(5,39,64,.8)}
.kpi-photo-photo-item figcaption{padding:8px 3px;color:#637a90;font-size:12px}
.kpi-photo-no-images{color:#58778f;background:#edf7fc;border-radius:12px;padding:24px}
.kpi-photo-single-back{margin:32px 0 0}.kpi-photo-single-back a{color:#0073b6;font-size:13px;font-weight:750}
@media(max-width:1100px){.kpi-photo-hero-layout{gap:24px}.kpi-photo-hero-benefits{grid-template-columns:1fr;gap:10px}.kpi-photo-benefit{align-items:center}.kpi-photo-benefit>div{flex-direction:row;flex-wrap:wrap;gap:5px}.kpi-photo-album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.kpi-photo-hero{padding:32px 0 43px}.kpi-photo-hero-layout{grid-template-columns:1fr;gap:23px;min-height:0}.kpi-photo-breadcrumb{margin-bottom:22px}.kpi-photo-hero h1{font-size:clamp(32px,8vw,43px);margin-bottom:18px}.kpi-photo-hero-desc{font-size:13px;margin-bottom:19px}.kpi-photo-hero-benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.kpi-photo-benefit{display:block}.kpi-photo-benefit-icon{margin-bottom:7px;width:35px;height:35px}.kpi-photo-benefit>div{display:flex;flex-direction:column;gap:3px}.kpi-photo-hero-card{padding:7px;border-radius:16px}.kpi-photo-hero-img,.kpi-photo-hero-placeholder{border-radius:11px}.kpi-photo-campus{width:100%;height:70%}.kpi-photo-albums-section{padding:36px 0 56px}.kpi-photo-section-header{align-items:stretch;flex-direction:column;gap:16px}.kpi-photo-all-button{align-self:flex-start}.kpi-photo-section-copy h2{font-size:clamp(24px,6vw,33px)}.kpi-photo-section-copy p{font-size:12px}.kpi-photo-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.kpi-photo-single-hero{padding:32px 0}}
@media(max-width:530px){.kpi-photo-album-grid{grid-template-columns:1fr;gap:16px}.kpi-photo-album-cover{aspect-ratio:1.7}.kpi-photo-album-content{min-height:82px}.kpi-photo-all-button{width:100%;justify-content:center}}
@media(max-width:360px){.kpi-photo-hero-benefits{grid-template-columns:1fr;gap:8px}.kpi-photo-benefit{display:flex;align-items:center}.kpi-photo-benefit-icon{margin-bottom:0}.kpi-photo-photo-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.kpi-photo-album-cover img,.kpi-photo-photo-item img,.kpi-photo-all-button{transition:none}}
