:root{
  --bg:#ffffff;
  --pane:#f7f5f2;
  --pane2:#fbfaf8;
  --text:#161616;
  --muted:#6b6b6b;
  --line:#dedbd6;
  --line2:#eeeae4;
  --brand:#7a2d22;
  --folder:#f3c85f;
  --folder-dark:#d8a536;
  --select:#fff3de;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
code{background:#fff5e8;border:1px solid #ead8bf;border-radius:4px;padding:2px 5px;color:#633018}

/* Explorer layout: tanpa header besar */
.explorer-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;background:#fff}
.sidebar{height:100vh;position:sticky;top:0;overflow:auto;background:var(--pane);border-right:1px solid var(--line);padding:12px 10px}
.side-root{display:flex;align-items:center;gap:8px;font-weight:700;padding:9px 10px;border-radius:6px;background:#fff;border:1px solid var(--line);margin-bottom:12px}
.side-root:hover{background:var(--select);border-color:#d5b982}
.side-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#777;margin:14px 8px 6px;font-weight:700}
.side-nav{display:grid;gap:2px}
.side-nav a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:5px;color:#292929;font-size:13px;min-height:30px}
.side-nav a:hover{background:#fff;border:1px solid var(--line2);padding:6px 7px;color:var(--brand)}

.main-pane{min-width:0;padding:14px 18px 34px;background:#fff}
.breadcrumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 14px;padding:8px 10px;background:var(--pane2);border:1px solid var(--line);border-radius:6px;color:#777;font-size:13px}
.breadcrumb a{color:#333}.breadcrumb a:hover{color:var(--brand);text-decoration:underline}.breadcrumb span{color:#aaa}

.page-heading{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:10px 12px;border:1px solid var(--line);background:#fff;border-radius:7px}
.page-heading .eyebrow{margin:0 0 2px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#876b55;font-weight:700}
.page-heading h1{margin:0;font-size:20px;line-height:1.2;font-weight:800}
.page-heading p{margin:3px 0 0;color:var(--muted);font-size:13px}

.section{margin:16px 0 18px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:12px}.section-head h2{font-size:18px;margin:0}.section-head p{margin:0;color:var(--muted);font-size:12px}

/* Folder grid model Windows Explorer */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px 14px;align-items:start}
.folder-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;min-height:118px;padding:12px 8px;border:1px solid transparent;border-radius:8px;background:#fff;transition:.12s ease}
.folder-card:hover{background:var(--select);border-color:#e6c883}
.folder-info{display:block;max-width:100%}.folder-info strong{display:block;font-size:13px;line-height:1.25;word-break:break-word}.folder-info small{display:block;margin-top:3px;font-size:11px;color:var(--muted);line-height:1.25}.folder-arrow{display:none}
.folder-icon{position:relative;width:62px;height:50px;flex:0 0 auto;filter:drop-shadow(0 5px 7px rgba(155,111,24,.22))}.folder-icon.small{width:36px;height:30px}.folder-tab{position:absolute;left:5px;top:3px;width:28px;height:12px;background:var(--folder-dark);border-radius:4px 6px 0 0}.folder-icon.small .folder-tab{left:3px;top:2px;width:17px;height:7px}.folder-body{position:absolute;left:0;right:0;bottom:0;height:38px;background:linear-gradient(#ffd96f,#edba43);border:1px solid rgba(130,91,20,.2);border-radius:5px}.folder-icon.small .folder-body{height:23px;border-radius:4px}

.seo-text{margin:22px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:7px;background:#fbfaf8}.seo-text h2{margin:0 0 6px;font-size:16px}.seo-text p{margin:0 0 7px;color:var(--muted);font-size:13px}.seo-text p:last-child{margin-bottom:0}.seo-text a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.gallery-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:0 0 14px}.gallery-meta div{padding:10px;border:1px solid var(--line);border-radius:7px;background:#fff}.gallery-meta strong{display:block;color:#777;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.gallery-meta span{display:block;font-weight:700;margin-top:2px}
.photo-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,150px)!important;
  gap:12px!important;
  margin:16px 0 28px!important;
  justify-content:start!important;
  align-items:start!important;
  columns:auto!important;
  column-gap:normal!important;
}

.photo-item{
  width:150px!important;
  margin:0!important;
  background:#fff;
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden;
  break-inside:auto!important;
}

.photo-item a{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  background:#f5f1eb;
  overflow:hidden;
}

.photo-item img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block;
}

.photo-item figcaption{
  padding:6px 8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
  min-height:36px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.empty-state{margin:16px 0;padding:22px;border:1px dashed #cfc8be;border-radius:8px;background:#fff;text-align:center}.empty-state h1,.empty-state h2{margin:0 0 8px}.empty-state p{margin:0 auto 10px;color:var(--muted);max-width:720px}
.btn-primary{display:inline-flex;padding:9px 12px;border-radius:7px;background:var(--brand);color:#fff;font-weight:700}.btn-primary:hover{filter:brightness(.92)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:60;display:none;align-items:center;justify-content:center;padding:20px}.lightbox.active{display:flex}.lightbox img{max-width:min(1200px,94vw);max-height:86vh;border-radius:8px}.lightbox button{position:absolute;top:14px;right:14px;border:0;border-radius:999px;background:#fff;color:#111;padding:9px 13px;font-weight:800;cursor:pointer}
.site-header,.hero,.site-footer{display:none!important}
@media(max-width:640px){
  .explorer-shell{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:relative;
    height:auto;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .side-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .main-pane{
    padding:12px;
  }

  .card-grid{
    grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  }

  .page-heading{
    align-items:flex-start;
  }

  .section-head{
    display:block;
  }

  .section-head p{
    margin-top:4px;
  }

  .photo-grid{
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
  }

  .photo-item{
    width:100%!important;
  }

  .photo-item figcaption{
    font-size:10px;
    min-height:32px;
    padding:5px 6px;
  }
}

@media(max-width:420px){
  .side-nav{
    grid-template-columns:1fr;
  }

  .photo-grid{
    grid-template-columns:repeat(2,1fr)!important;
  }

  .card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   Toggle Sidebar + Search Suggest - CLEAN
========================================================= */
.jgr-top-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 10px!important;
  min-height:32px!important;
}

.jgr-nav-toggle{
  width:30px!important;
  height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid var(--line)!important;
  border-radius:5px!important;
  background:#fff!important;
  color:#333!important;
  font-weight:800!important;
  font-size:14px!important;
  line-height:1!important;
  cursor:pointer!important;
  padding:0!important;
  flex:0 0 auto!important;
}

.jgr-nav-toggle:hover{
  background:var(--select)!important;
  border-color:#e6c883!important;
}

.jgr-search-wrap{
  position:relative!important;
  width:300px!important;
  max-width:100%!important;
  margin-left:auto!important;
  flex:0 0 300px!important;
}

.jgr-search-input{
  width:100%!important;
  height:30px!important;
  border:1px solid var(--line)!important;
  border-radius:5px!important;
  padding:0 9px!important;
  font-size:12px!important;
  outline:none!important;
  background:#fff!important;
  color:#222!important;
}

.jgr-search-input:focus{
  border-color:#d5b982!important;
  box-shadow:0 0 0 2px rgba(243,200,95,.22)!important;
}

.jgr-search-suggest{
  position:absolute!important;
  top:34px!important;
  right:0!important;
  left:auto!important;
  z-index:999!important;
  width:360px!important;
  max-width:90vw!important;
  max-height:320px!important;
  overflow-y:auto!important;
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:6px!important;
  box-shadow:0 8px 20px rgba(0,0,0,.12)!important;
}

.jgr-search-suggest[hidden]{
  display:none!important;
}

.jgr-search-suggest a{
  display:block!important;
  padding:8px 10px!important;
  border-bottom:1px solid var(--line2)!important;
  font-size:12px!important;
  text-decoration:none!important;
  color:#222!important;
}

.jgr-search-suggest a:last-child{border-bottom:0!important;}
.jgr-search-suggest a:hover{background:var(--select)!important;}
.jgr-search-suggest strong{display:block!important;color:#222!important;font-size:12px!important;line-height:1.25!important;}
.jgr-search-suggest small{display:block!important;color:var(--muted)!important;margin-top:2px!important;font-size:11px!important;line-height:1.25!important;}

.explorer-shell.jgr-nav-hidden{
  grid-template-columns:1fr!important;
}

.explorer-shell.jgr-nav-hidden .sidebar{
  display:none!important;
}

@media(max-width:640px){
  .jgr-top-controls{
    display:block!important;
    margin-bottom:10px!important;
  }

  .jgr-nav-toggle{
    margin-bottom:7px!important;
  }

  .jgr-search-wrap{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    flex:auto!important;
  }

  .jgr-search-suggest{
    top:34px!important;
    left:0!important;
    right:auto!important;
    width:100%!important;
    max-width:100%!important;
  }
}
/* =========================================================
   Folder View Mode: Grid / List
========================================================= */

.jgr-top-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.jgr-right-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-left:auto;
  min-width:0;
}

.jgr-view-toggle{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  flex:0 0 auto;
}

.jgr-view-btn{
  width:31px;
  height:30px;
  border:0;
  border-right:1px solid var(--line);
  background:#fff;
  color:#333;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.jgr-view-btn:last-child{
  border-right:0;
}

.jgr-view-btn:hover,
.jgr-view-btn.is-active{
  background:var(--select);
  color:var(--brand);
}

.jgr-search-wrap{
  margin-left:0!important;
}

/* Mode LIST seperti Google Drive */
.explorer-shell.jgr-view-list .card-grid{
  display:block!important;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}

.explorer-shell.jgr-view-list .folder-card{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:8px 12px;
  margin:0;
  border:0;
  border-bottom:1px solid var(--line2);
  border-radius:0;
  background:#fff;
  text-align:left;
}

.explorer-shell.jgr-view-list .folder-card:last-child{
  border-bottom:0;
}

.explorer-shell.jgr-view-list .folder-card:hover{
  background:var(--select);
  border-color:transparent;
}

.explorer-shell.jgr-view-list .folder-icon{
  width:34px;
  height:28px;
  filter:none;
}

.explorer-shell.jgr-view-list .folder-tab{
  left:3px;
  top:2px;
  width:16px;
  height:7px;
  border-radius:3px 4px 0 0;
}

.explorer-shell.jgr-view-list .folder-body{
  height:22px;
  border-radius:4px;
}

.explorer-shell.jgr-view-list .folder-info{
  min-width:0;
}

.explorer-shell.jgr-view-list .folder-info strong{
  font-size:13px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.explorer-shell.jgr-view-list .folder-info small{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.explorer-shell.jgr-view-list .folder-arrow{
  display:block;
  color:#999;
  font-size:18px;
}

/* Mobile */
@media(max-width:640px){
  .jgr-top-controls{
    display:block;
  }

  .jgr-right-controls{
    display:block;
    margin-left:0;
  }

  .jgr-view-toggle{
    margin:7px 0;
  }

  .jgr-search-wrap{
    width:100%!important;
  }

  .explorer-shell.jgr-view-list .folder-card{
    grid-template-columns:38px minmax(0,1fr) auto;
    min-height:50px;
    padding:8px 10px;
  }

  .explorer-shell.jgr-view-list .folder-icon{
    width:31px;
    height:25px;
  }

  .explorer-shell.jgr-view-list .folder-body{
    height:20px;
  }
}

/* =========================================================
   Sidebar Tree / Accordion
========================================================= */

.side-tree{
  display:grid;
  gap:6px;
}

.side-folder{
  border:0;
}

.side-folder summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 8px;
  border-radius:6px;
  font-size:13px;
  font-weight:700;
  color:#292929;
  cursor:pointer;
  user-select:none;
}

.side-folder summary::-webkit-details-marker{
  display:none;
}

.side-folder summary:hover{
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line2);
  color:var(--brand);
}

.side-folder[open] summary{
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line2);
}

.tree-caret{
  display:inline-flex;
  width:12px;
  height:12px;
  align-items:center;
  justify-content:center;
  font-size:13px;
  line-height:1;
  transition:transform .12s ease;
}

.side-folder[open] .tree-caret{
  transform:rotate(90deg);
}

.side-tree-list{
  display:grid;
  gap:1px;
  padding:2px 0 7px 18px;
}

.side-tree-list a{
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 8px;
  border-radius:5px;
  font-size:12px;
  color:#333;
  min-height:28px;
}

.side-tree-list a:hover{
  background:var(--select);
  color:var(--brand);
}

/* Mobile: tree tetap rapi, tidak memenuhi topbar */
@media(max-width:640px){
  .side-tree{
    gap:4px;
  }

  .side-folder summary{
    padding:7px 8px;
    font-size:12px;
  }

  .side-tree-list{
    padding-left:16px;
  }

  .side-tree-list a{
    font-size:12px;
    min-height:27px;
  }
}
.side-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 6px 10px;
  margin:0 0 8px;
}

.side-logo img{
  width:64px;
  max-width:80%;
  height:auto;
  display:block;
}

/* =========================================================
   CTA Venue + Area
========================================================= */

.venue-cta-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0 16px;
  padding:13px 14px;
  border:1px solid #ead8bf;
  border-radius:8px;
  background:#fff8ed;
}

.venue-cta-copy{
  min-width:0;
}

.venue-cta-box strong{
  display:block;
  font-size:14px;
  margin-bottom:3px;
}

.venue-cta-box p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.venue-cta-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex:0 0 auto;
}

.venue-cta-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border-radius:7px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.venue-cta-primary{
  background:var(--brand);
  color:#fff;
}

.venue-cta-secondary{
  background:#fff;
  color:var(--brand);
  border:1px solid #ead8bf;
}

.venue-cta-actions a:hover{
  filter:brightness(.94);
}

@media(max-width:640px){
  .venue-cta-box{
    display:block;
  }

  .venue-cta-actions{
    display:grid;
    grid-template-columns:1fr;
    margin-top:10px;
  }

  .venue-cta-actions a{
    width:100%;
    white-space:normal;
    text-align:center;
  }
}

/* =========================================================
   Video Highlight Album
========================================================= */

.video-section{
  margin:16px 0 22px;
}

.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 360px));
  gap:14px;
  align-items:start;
}

.video-item{
  margin:0;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}

.video-item video{
  width:100%;
  height:auto;
  display:block;
  background:#000;
  aspect-ratio:16/9;
}

.video-item figcaption{
  padding:8px 10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

@media(max-width:640px){
  .video-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
}