/* Public homepage project buttons */
.project-body .project-media-count{font-size:.82rem;color:#61798a;font-weight:650;margin:0 0 14px}
.project-body .project-view{display:inline-flex;gap:12px;align-items:center;border-radius:100px;padding:10px 16px;background:#063b66;color:#fff;font-weight:750;font-size:.9rem;transition:background .2s,transform .2s}
.project-body .project-view:hover{background:#0b78b8;transform:translateY(-1px)}
.project-image:hover img{transform:scale(1.025)}.project-image img{transition:transform .3s ease}
/* Detail page */
.project-detail-page{--deep:#063b66;--sky:#0b78b8;--border:#e2eaf0;--muted:#687988;--ink:#142536;margin:0;background:#f8fafc;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.65}
.project-detail-page *{box-sizing:border-box}.project-detail-page a{text-decoration:none;color:inherit}.project-detail-page img{max-width:100%;display:block}.detail-container{width:min(1120px,calc(100% - 40px));margin:0 auto}
.detail-nav{background:#fff;position:sticky;top:0;z-index:5;border-bottom:1px solid var(--border);box-shadow:0 4px 15px rgba(4,35,60,.03)}.detail-nav-inner{min-height:84px;display:flex;justify-content:space-between;align-items:center;gap:24px}.detail-brand{display:flex;align-items:center;gap:12px;font-weight:850;color:var(--deep)!important;line-height:1.25;max-width:320px}.detail-brand img{width:60px;height:60px;object-fit:contain}.detail-back{font-weight:700;font-size:.91rem;color:var(--deep)!important;white-space:nowrap}
.detail-hero{background:radial-gradient(circle at 80% 10%,#dceefa 0,transparent 42%),linear-gradient(180deg,#fff,#eff6fa);padding:56px 0 100px}.detail-breadcrumb{color:#728494!important;font-size:.88rem;display:inline-block;margin-bottom:28px}.detail-eyebrow{color:#1682c0;font-size:.76rem;letter-spacing:.15em;font-weight:900}.detail-hero h1{font-size:clamp(2.6rem,6vw,5.1rem);line-height:1.06;letter-spacing:-.04em;color:var(--deep);margin:13px 0 18px;overflow-wrap:anywhere}.detail-meta{font-size:1.08rem;color:#376078;font-weight:750;margin:0 0 16px}.detail-description{max-width:730px;font-size:1.09rem;color:#637688;margin:0}.detail-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.detail-pills span{padding:7px 14px;border:1px solid #c9e1f1;background:#fff;border-radius:100px;color:#356078;font-size:.88rem;font-weight:750}
.detail-cover{margin:-62px 0 0;position:relative;border:7px solid #fff;border-radius:24px;overflow:hidden;box-shadow:0 24px 75px rgba(5,38,64,.16);height:clamp(230px,46vw,485px);background:#d7e5f0}.detail-cover img{width:100%;height:100%;object-fit:cover;object-position:center 44%}
.detail-gallery-section{padding:76px 0 86px}.detail-section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.detail-section-heading h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--deep);letter-spacing:-.025em;margin:5px 0}.detail-section-heading p{margin:0;color:var(--muted)}.gallery-total{color:var(--muted);font-weight:750;white-space:nowrap}
.detail-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.detail-media{margin:0;min-width:0;border:1px solid var(--border);border-radius:17px;background:#fff;overflow:hidden;box-shadow:0 12px 30px rgba(4,40,64,.05)}.detail-media img,.detail-media video{width:100%;height:235px;object-fit:cover;display:block;background:#0b2337}.detail-media video{object-fit:contain}.gallery-photo{display:block;position:relative;cursor:zoom-in;overflow:hidden}.gallery-photo img{transition:transform .25s ease}.gallery-photo:hover img{transform:scale(1.04)}.photo-zoom{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.73);color:#fff;border-radius:50px;padding:5px 11px;font-size:.78rem;opacity:0;transition:opacity .2s}.gallery-photo:hover .photo-zoom,.gallery-photo:focus-visible .photo-zoom{opacity:1}.detail-media figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px;font-size:.8rem;color:#738493}.media-type{font-weight:800;color:#0d78ae}.media-type.video-type{color:#bb6c15}.gallery-empty{border:1px dashed #c1d2de;padding:35px;text-align:center;color:var(--muted);border-radius:18px;background:#fff}
.detail-bottom{margin-top:70px;padding:32px 38px;border-radius:22px;background:linear-gradient(110deg,#052d4b,#0877af);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:25px}.detail-bottom h2{margin:0 0 8px;font-size:1.48rem}.detail-bottom p{margin:0;color:#cce9f8}.detail-bottom a{display:inline-flex;flex-shrink:0;border-radius:100px;padding:13px 18px;background:#fff;color:#06456d;font-weight:800}
.detail-footer{background:#06263c;color:#b9ccda;padding:26px 0;font-size:.85rem}.detail-footer .detail-container{display:flex;justify-content:space-between;gap:12px}.detail-footer a{color:#e9f6ff}
.photo-dialog{border:0;padding:0;max-height:92vh;max-width:94vw;border-radius:12px;background:#0b1a29;box-shadow:0 22px 100px #0009;overflow:visible}.photo-dialog::backdrop{background:rgba(2,15,25,.9)}.photo-dialog img{max-width:min(94vw,1500px);max-height:90vh;object-fit:contain;border-radius:12px}.photo-close{position:absolute;top:-18px;right:-17px;background:#fff;color:#092b47;border:0;border-radius:100px;width:42px;height:42px;font-size:1.9rem;line-height:1;cursor:pointer}
@media(max-width:950px){.detail-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.detail-container{width:calc(100% - 28px)}.detail-nav-inner{min-height:72px;gap:10px}.detail-brand img{width:42px;height:42px}.detail-brand span{font-size:.78rem;max-width:140px}.detail-back{font-size:.77rem}.detail-hero{padding:34px 0 76px}.detail-breadcrumb{margin-bottom:21px}.detail-cover{margin-top:-43px;border-width:4px;border-radius:16px;height:230px}.detail-gallery-section{padding:46px 0}.detail-section-heading{align-items:flex-start}.gallery-total{font-size:.72rem}.detail-gallery{grid-template-columns:1fr;gap:14px}.detail-media img,.detail-media video{height:240px}.detail-bottom{margin-top:42px;flex-direction:column;align-items:flex-start;padding:26px}.detail-footer .detail-container{flex-direction:column}}

/* Frame video YouTube berbentuk persegi, selebar kartu galeri (desktop dan HP). */
.detail-media .youtube-player{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  border:0;
  background:#0b2337;
}

/* VIDEO UTAMA: menggantikan foto sampul bila proyek memiliki link YouTube.
   Frame persegi dibatasi lebarnya agar nyaman dilihat di layar desktop. */
.detail-cover.detail-cover-youtube{
  width:min(760px,100%);
  height:auto;
  aspect-ratio:1 / 1;
  margin:-62px auto 0;
  background:#071d30;
}
.detail-cover-youtube .detail-hero-youtube{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#071d30;
}
.detail-cover-caption{
  margin:12px auto 0;
  max-width:760px;
  text-align:center;
  color:#607688;
  font-size:.9rem;
}
.detail-cover-caption a{color:#086ba6;font-weight:750;text-decoration:underline}
.detail-cover-caption a:hover{color:#03436b}
@media(max-width:620px){
  .detail-cover.detail-cover-youtube{margin-top:-43px}
}

/* Kontrol alternatif berada di LUAR pemutar, sesuai pedoman embed YouTube. */
.detail-video-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px}
.detail-video-action{appearance:none;border:1px solid #c8dce9;border-radius:999px;padding:8px 14px;background:#fff;color:#063b66;font-size:.84rem;font-weight:700;font-family:inherit;line-height:1.3;cursor:pointer;box-shadow:0 2px 9px rgba(6,59,102,.06)}
.detail-video-action:hover{background:#eaf5fb;border-color:#90c1dd}
.detail-video-action:focus-visible{outline:3px solid #208bc9;outline-offset:2px}
.detail-video-action[hidden]{display:none!important}