/* =====================================================================
   GALLERY (CREATIVE PORTFOLIO)
   ===================================================================== */
.galproj-hdr-wrapper, .galproj-wrapper {
  --gp-fs-heading: var(--fs-judul1);
  --gp-fs-desc: var(--fs-text1);
  --gp-fs-card-title: var(--fs-judul2);
  --gp-fs-tab: var(--fs-tombol);
  font-family: var(--font-body);
  width: 100%;
  background: transparent;
  box-sizing: border-box;
  color: var(--text-secondary);
}
.galproj-hdr-wrapper *, .galproj-wrapper * { box-sizing: border-box; }
body.galproj-modal-open .galproj-hdr-wrapper, body.galproj-modal-open .galproj-wrapper { filter: blur(4px); pointer-events: none; }
body.galproj-cert-open > *:not(.galproj-cert-modal) { filter: blur(4px); pointer-events: none; transition: filter 0.4s ease; }

.galproj-hdr-section { width: 100%; padding: 20px 0 0; margin: 0; }
.galproj-hdr-container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; align-items: center; width: 100%; }
.galproj-hdr-content { text-align: center; max-width: 800px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.galproj-judul { font-size: var(--gp-fs-heading); font-weight: var(--fw-black); color: var(--primary); margin: 0; padding: 0; text-align: center; line-height: var(--lh-tight); }
.galproj-judul::after { content: ''; display: block; height: 1px; width: 120px; margin: 6px auto; background: linear-gradient(90deg, transparent 0%, var(--primary-border) 20%, var(--primary) 50%, var(--primary-border) 80%, transparent 100%); }
.galproj-hdr-desc { font-size: var(--fs-text1); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--text-secondary); text-align: center; }
.galproj-wrapper { max-width: var(--max-width); margin: 0 auto; padding: 56px 20px; }

@media(min-width:1441px) { .galproj-wrapper { padding: 40px 100px; } .galproj-hdr-container { padding: 0 100px; } }
@media(min-width:1025px) and (max-width:1440px) { .galproj-wrapper { padding: 40px 50px; } .galproj-hdr-container { padding: 0 50px; } }

.galproj-tabs { display: flex; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-8); flex-wrap: wrap; }
.galproj-tab { font-family: var(--font-body); font-size: var(--gp-fs-tab); font-weight: var(--fw-semibold); padding: 10px 22px; border-radius: var(--radius-pill); border: none; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text-secondary); cursor: pointer; transition: var(--transition-hover), color var(--transition-fast); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); }
.galproj-tab:hover { color: var(--primary); box-shadow: var(--shadow-pressed); transform: translateY(2px); }
.galproj-tab:active { box-shadow: var(--shadow-inset) !important; color: var(--primary); transform: translateY(2px) !important; }
.galproj-tab--active { box-shadow: var(--shadow-inset); color: var(--primary); transform: translateY(2px); }
.galproj-panel { display: none; }
.galproj-panel--active { display: block; }
.galproj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; width: 100%; }
.galproj-card { background: var(--surface); border: none; border-radius: var(--card-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s ease, transform 0.3s ease; position: relative; box-shadow: var(--card-shadow); cursor: pointer; }
.galproj-card--reveal { animation: galproj-card-in 0.42s cubic-bezier(0.22,1,0.36,1) both; }
.galproj-card--hide { animation: galproj-card-out 0.3s cubic-bezier(0.4,0,1,1) both; }
@keyframes galproj-card-in { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes galproj-card-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(10px) scale(0.97); } }
.galproj-card:hover { transform: translateY(var(--card-lift)); box-shadow: var(--card-shadow-hover); }
.galproj-card-thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; position: relative; background: var(--surface); cursor: pointer; }
.galproj-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-standard); }
.galproj-card:hover .galproj-card-thumb img { transform: scale(1.05); }
.galproj-thumb-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; z-index: 2; }
.galproj-thumb-overlay.hidden { opacity: 0; pointer-events: none; }
.galproj-play-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--primary-dim)); border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.galproj-play-icon svg { width: 18px; height: 18px; }
.galproj-card-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.galproj-card-title { font-size: var(--gp-fs-card-title); font-weight: var(--fw-bold); color: var(--primary); line-height: var(--lh-snug); }
.galproj-card-desc { font-size: var(--gp-fs-desc); font-weight: var(--fw-light); color: var(--text-secondary); line-height: var(--lh-normal); flex: 1; }
.galproj-card-footer { padding: 0 22px 22px; }
.galproj-btn-details { font-family: var(--font-body); font-size: var(--fs-tombol); font-weight: var(--fw-semibold); color: var(--primary); background: var(--surface); border: none; box-shadow: var(--shadow-sm); border-radius: var(--radius-pill); padding: 10px 22px; cursor: pointer; width: 100%; transition: var(--transition-hover); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); }
.galproj-btn-details:hover { box-shadow: var(--shadow-pressed); transform: translateY(2px); }
.galproj-btn-details:active { box-shadow: var(--shadow-inset) !important; transform: translateY(2px) !important; }
.galproj-toggle-wrap { display: flex; justify-content: center; margin-top: 28px; }
.galproj-toggle { font-family: var(--font-body); font-size: var(--fs-tombol); font-weight: var(--fw-semibold); padding: 10px 22px; border-radius: var(--radius-pill); border: none; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--primary); cursor: pointer; transition: var(--transition-hover); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); }
.galproj-toggle:hover { box-shadow: var(--shadow-pressed); transform: translateY(2px); }
.galproj-toggle:active { box-shadow: var(--shadow-inset) !important; transform: translateY(2px) !important; }

.galproj-cert-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, backdrop-filter 0.25s ease, background 0.25s ease, visibility 0s linear 0.25s; backdrop-filter: blur(0); padding: 20px; box-sizing: border-box; }
.galproj-cert-modal.galproj-cert-modal-active { opacity: 1; visibility: visible; pointer-events: auto; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); transition: opacity 0.22s ease, backdrop-filter 0.22s ease, background 0.22s ease, visibility 0s linear 0s; }
.galproj-cert-modal-content { position: relative; background: var(--surface); border-radius: var(--radius-2xl); overflow: hidden; transform: scale(0.94); opacity: 0; transition: transform 0.22s cubic-bezier(0.4,0,1,1), opacity 0.22s ease; box-shadow: var(--shadow-float); padding: clamp(8px,2vh,20px); display: flex; flex-direction: column; gap: clamp(6px,1.5vh,16px); width: fit-content; max-width: min(600px, calc(100vw - 40px)); max-height: 90vh; box-sizing: border-box; }
.galproj-cert-modal.galproj-cert-modal-active .galproj-cert-modal-content { transform: scale(1); opacity: 1; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.22s ease; }
.galproj-cert-modal-image { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(90vh - clamp(56px,10vh,100px)); object-fit: contain; border-radius: var(--radius-sm); flex-shrink: 1; }
.galproj-cert-modal-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; background: var(--surface); box-shadow: var(--shadow-sm); border: none; border-radius: var(--radius-circle); color: var(--primary); font-size: var(--fs-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-hover); z-index: 1; flex-shrink: 0; }
.galproj-cert-modal-close:hover { box-shadow: var(--shadow-pressed); transform: translateY(2px); }

.galproj-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0); backdrop-filter: blur(0); z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.25s ease, backdrop-filter 0.25s ease, background 0.25s ease, visibility 0s linear 0.25s; box-sizing: border-box; }
.galproj-modal-overlay--active { opacity: 1; pointer-events: all; visibility: visible; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); transition: opacity 0.22s ease, backdrop-filter 0.22s ease, background 0.22s ease, visibility 0s linear 0s; }
.galproj-modal-box { background: var(--surface); border: none; border-radius: var(--radius-2xl); width: 100%; max-width: 640px; max-height: calc(100vh - 40px); font-family: var(--font-body); overflow: hidden; position: relative; display: flex; flex-direction: column; box-shadow: var(--shadow-float); transform: scale(0.94) translateY(12px); opacity: 0; transition: transform 0.22s cubic-bezier(0.4,0,1,1), opacity 0.22s ease; flex-shrink: 1; min-height: 0; isolation: isolate; }
.galproj-modal-overlay--active .galproj-modal-box { transform: scale(1) translateY(0); opacity: 1; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.22s ease; }
.galproj-modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: var(--radius-circle); border: none; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--primary); font-size: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-hover); z-index: 10; padding: 0; margin: 0; overflow: hidden; flex-shrink: 0; }
.galproj-modal-close::before, .galproj-modal-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; background: currentColor; }
.galproj-modal-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.galproj-modal-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.galproj-modal-video-wrap { flex-shrink: 0; padding: clamp(8px,2vh,14px) clamp(8px,2vh,14px) 0 clamp(8px,2vh,14px); background: var(--surface); position: relative; z-index: 1; }
.galproj-modal-video { width: 100%; position: relative; padding-bottom: 56.25%; height: 0; border-radius: 14px; overflow: hidden; background: #000; box-shadow: var(--shadow-inset-sm); }
.galproj-modal-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; border-radius: 14px; background: #000; }
.galproj-modal-video-mask { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--surface); z-index: 2; pointer-events: none; border-radius: 0 0 14px 14px; }
.galproj-modal-scroll-area { overflow-y: auto; overflow-x: hidden; flex: 1; padding: 0 clamp(8px,2vh,14px); scrollbar-width: none; min-height: 0; background: var(--surface); position: relative; z-index: 1; }
.galproj-modal-scroll-area::-webkit-scrollbar { display: none; }
.galproj-modal-scroll-top { flex-shrink: 0; height: clamp(8px,1.5vh,12px); background: var(--surface); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.galproj-modal-scroll-bottom { flex-shrink: 0; height: clamp(8px,2vh,14px); background: var(--surface); border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); }
.galproj-modal-body { width: 100%; display: flex; flex-direction: column; min-height: 0; }
.galproj-modal-photogrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.galproj-modal-photogrid-item { aspect-ratio: 1/1; overflow: hidden; border-radius: 14px; cursor: pointer; box-shadow: var(--shadow-sm); }
.galproj-modal-photogrid-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }

.galproj-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 1000000; display: none; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition-fade); box-sizing: border-box; }
.galproj-lightbox--active { opacity: 1; pointer-events: all; }
.galproj-lightbox-inner { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 56px 60px; box-sizing: border-box; max-width: 900px; margin: 0 auto; }
.galproj-lightbox-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); display: block; box-shadow: var(--shadow-modal); opacity: 1; transition: opacity 0.3s ease; }
.galproj-lightbox-img.lb-fade-out { opacity: 0; }
.galproj-lightbox-close { position: fixed; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: var(--radius-circle); background: var(--surface); border: none; box-shadow: var(--shadow-sm); color: var(--primary); font-size: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; padding: 0; box-sizing: border-box; }
.galproj-lightbox-close::before, .galproj-lightbox-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; background: currentColor; border-radius: 1px; }
.galproj-lightbox-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.galproj-lightbox-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.galproj-lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: var(--radius-circle); background: var(--surface); border: none; box-shadow: var(--shadow-sm); color: var(--primary); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; padding: 0; box-sizing: border-box; font-size: 0; }
.galproj-lightbox-nav::before { content: ''; display: block; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 1px; }
.galproj-lightbox-prev::before { transform: rotate(-135deg) translate(-1px,1px); }
.galproj-lightbox-next::before { transform: rotate(45deg) translate(-1px,1px); }
.galproj-lightbox-prev { left: 10px; }
.galproj-lightbox-next { right: 10px; }
.galproj-lightbox-counter { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--primary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-family: var(--font-body); padding: 7px 20px; border-radius: var(--radius-pill); letter-spacing: var(--ls-wide); pointer-events: none; z-index: 3; white-space: nowrap; line-height: var(--lh-tight); }

.galproj-modal-loading { display: flex; align-items: center; justify-content: center; padding: 40px 0; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-regular); gap: var(--space-3); font-family: var(--font-body); }
.galproj-spinner { width: var(--icon-lg); height: var(--icon-lg); border: 2px solid var(--primary-dim); border-top-color: var(--primary); border-radius: var(--radius-circle); animation: galproj-spin 0.8s linear infinite; }
@keyframes galproj-spin { to { transform: rotate(360deg); } }
.galproj-modal-playlist { display: flex; flex-direction: column; gap: 6px; }
.galproj-modal-playlist-item { font-family: var(--font-body); display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--surface); box-shadow: var(--shadow-sm); border: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left; width: 100%; flex-shrink: 0; }
.galproj-modal-playlist-item--active { box-shadow: var(--shadow-inset); }
.galproj-modal-playlist-num { min-width: 22px; height: 22px; border-radius: var(--radius-circle); background: var(--surface); box-shadow: var(--shadow-pressed); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); flex-shrink: 0; }
.galproj-modal-playlist-item--active .galproj-modal-playlist-num { background: var(--primary); color: #fff; }
.galproj-modal-playlist-title { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-secondary); flex: 1; }
.galproj-modal-playlist-item--active .galproj-modal-playlist-title { color: var(--primary); font-weight: var(--fw-semibold); }
.galproj-ios-slider { position: relative; width: 100%; background: var(--surface); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; align-items: center; box-shadow: var(--shadow-inset-sm); flex: 1; min-height: 0; }
.galproj-ios-slider-img-wrap { position: relative; width: 100%; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.galproj-ios-slider-img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity var(--transition-fade); }
.galproj-ios-slider-footer { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: clamp(6px,1.5vh,10px) clamp(8px,2vh,12px); flex-shrink: 0; }
.galproj-ios-slider-counter { flex: 1; text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-family: var(--font-body); pointer-events: none; line-height: var(--lh-tight); }
.galproj-ios-slider-btn { width: 36px; height: 36px; border-radius: var(--radius-circle); background: var(--surface); border: none; box-shadow: var(--shadow-sm); color: var(--primary); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; font-size: 0; }
.galproj-ios-slider-btn::before { content: ''; display: block; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 1px; }
.galproj-ios-slider-btn--prev::before { transform: rotate(-135deg) translate(-1px,1px); }
.galproj-ios-slider-btn--next::before { transform: rotate(45deg) translate(-1px,1px); }
.galproj-ios-slider-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.1); z-index: 2; }
.galproj-drive-fallback { text-align: center; padding: 6px 0 0; flex-shrink: 0; background: var(--surface); position: relative; z-index: 2; }
.galproj-drive-fallback a { font-size: var(--fs-xs); color: var(--primary); text-decoration: none; font-weight: var(--fw-semibold); }

@media(max-width:1024px) {
  .galproj-wrapper { padding: var(--space-6) var(--space-6); }
  .galproj-hdr-container { padding: 0 var(--space-6); }
  .galproj-grid { grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
  .galproj-modal-box { max-width: 520px; border-radius: var(--radius-xl); }
}
@media(max-width:768px) {
  .galproj-wrapper { padding: 20px 20px; }
  .galproj-hdr-container { padding: 0 20px; }
  .galproj-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media(max-width:480px) {
  .galproj-wrapper { padding: 20px 20px; }
  .galproj-tab, .galproj-btn-details, .galproj-toggle { padding: 8px 18px; }
}
@media(max-width:599px) {
  .galproj-modal-overlay { padding: 10px; }
  .galproj-modal-box { border-radius: 18px; max-width: calc(100vw - 20px); max-height: calc(100vh - 60px); }
  .galproj-modal-photogrid { grid-template-columns: repeat(2,1fr); gap: 6px; }
  .galproj-lightbox-inner { padding: 44px 52px; }
}