.dynamic-grid .gallery-item,.gallery-item{position:relative;cursor:pointer}.hero-section{height:calc(70vh - 4px);position:relative;color:#fff;display:flex;align-items:flex-start;justify-content:center;padding-top:7vh;border-radius:10px;background:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.1)) center/cover,url('/img/foto-ultah-tmk-ke8/foto-penanaman/IMG_3137_compressed.JPG') center/cover}.hero-content{max-width:700px;padding:0 1.5rem;text-align:center}.hero-content h1{font-size:3.2rem;font-weight:700;line-height:1.2;margin:0}.hero-content h1::after{content:"";display:block;width:100px;height:2px;background-color:rgba(255,255,255,.5);margin:1.5rem auto}.hero-content .meta-info{font-size:.9rem;font-weight:300;line-height:1.5;margin:.25rem 0}@media (max-width:768px){.hero-section{padding-top:10vh}.hero-content h1{font-size:2.2rem}.hero-content h1::after{margin:1rem auto}}.gallery-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.gallery-item{aspect-ratio:1/1}.icon-type,.overlay{position:absolute;color:#fff}.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px}.icon-type{top:.75rem;right:.75rem;font-size:1rem;text-shadow:0 1px 3px rgba(0,0,0,.5)}.overlay{top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.4);opacity:0;transition:opacity .3s;display:flex;justify-content:center;align-items:center;gap:1.5rem;font-size:1.1rem;font-weight:600;border-radius:10px}.overlay-text i{margin-right:.5rem}.gallery-item:hover .overlay{opacity:1}.dynamic-grid{display:grid;gap:5px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-auto-rows:150px;grid-auto-flow:dense}.dynamic-grid .featured{grid-column:span 2;grid-row:span 2}.dynamic-grid .featured-v{grid-row:span 2}.dynamic-grid .featured-h{grid-column:span 2}.gallery-item.featured-h{grid-column:span 2;aspect-ratio:2/1;height:294px;width:600px}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:1021;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.popup-overlay.active{opacity:1;visibility:visible}.popup-content{position:relative;transform:scale(.7);opacity:0;transition:transform .3s cubic-bezier(.18, .89, .32, 1.28),opacity .3s}.popup-close,.video-card{transition:transform .2s;color:#fff;cursor:pointer}.popup-overlay.active .popup-content{transform:scale(1);opacity:1}.popup-img{display:block;max-width:90vw;max-height:90vh;object-fit:contain;border-radius:4px}.popup-close{position:absolute;top:2rem;right:2rem;font-size:3rem;line-height:1;text-shadow:0 2px 4px rgba(0,0,0,.5)}.popup-close:hover{transform:scale(1.1)}.carousel-wrapper{position:relative;width:100%;max-width:1400px}.carousel-container{display:flex;gap:15px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 30px;margin:0 25px}.carousel-container::-webkit-scrollbar{display:none}.video-card{flex:0 0 278px;border-radius:8px;overflow:hidden;scroll-snap-align:start;height:410px}.video-card:hover{opacity:.6}.card-thumbnail img{width:100%;height:170px;object-fit:cover;display:block}.card-content{padding:1rem}.card-content h3{font-size:1rem;margin:0;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-content .meta{margin-top:.5rem;font-size:.9rem;color:#aaa;display:flex;align-items:center;gap:.5rem}.nav-arrow{position:absolute;top:47%;transform:translateY(-50%);z-index:10;background-color:rgba(0,0,0,.7);color:#fff;border:none;border-radius:50%;width:44px;height:44px;font-size:1.2rem;cursor:pointer;transition:background-color .2s}.nav-arrow:hover{background-color:rgba(0,0,0,.9)}#prevBtn{left:3px}#nextBtn{right:3px}.popup-video{display:block;width:100%;max-width:80vw;max-height:90vh;background-color:#000}
