/* Official SiGit — animasi gerak bersama. Warna, tema, dan layout tetap milik halaman masing-masing. */
.osg-site-shell .osg-brand-image img,
#osg-site-footer-mount .osgl-footer-brand > a img {
  transform-origin: 50% 50%;
  animation: osgLogoFloat3d 7.2s ease-in-out infinite;
  filter: drop-shadow(0 5px 12px rgba(37,231,255,.34));
  backface-visibility: hidden;
  will-change: transform, filter;
}

/* Efek gambar 3D tetap ringan dan juga berjalan di layar sentuh. */
main img:not(.media-watermark):not([data-no-3d]) {
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  animation: osgImageTilt3d 12s ease-in-out infinite;
  backface-visibility: hidden;
}

@keyframes osgLogoFloat3d {
  0%,100% { transform: perspective(900px) translateY(0) rotateX(0deg) rotateY(-4deg) scale(1); }
  50% { transform: perspective(900px) translateY(-4px) rotateX(3deg) rotateY(4deg) scale(1.025); }
}
@keyframes osgImageTilt3d {
  0%,100% { transform: perspective(1100px) translateY(0) rotateX(0deg) rotateY(-1.6deg) scale(1); }
  50% { transform: perspective(1100px) translateY(-4px) rotateX(2.2deg) rotateY(1.6deg) scale(1.018); }
}
@keyframes osgSlideEnter {
  from { opacity: .35; transform: perspective(1100px) translate3d(18px,0,0) rotateY(-2deg); }
  to { opacity: 1; transform: perspective(1100px) translate3d(0,0,0) rotateY(0); }
}

/* Efek 3D kartu saat hover/fokus; tidak mengubah struktur grid atau ukuran kartu. */
@media (hover:hover) {
  #berita-manual .manual-feature,
  #berita-manual .manual-archive .item,
  #berita .feature,
  #berita .storymini,
  #latest-news > .item,
  .article .related-card,
  .grid .card,
  main .cards > *,
  main .youtube-videos > *,
  main .youtube-card,
  main .music-playlist-card,
  main .tts-editor-card,
  main .tts-controls-card,
  main .tts-settings-card,
  main .tts-result-card,
  main .tts-history-card,
  main .tts-plan-card,
  main .tts-quick-guide,
  main .tts-use-cases,
  main .tts-faq,
  main .tts-guide-steps > article,
  main .tts-case-grid > article,
  main .sidebar-category-list a {
    transform-style: preserve-3d;
    transition: transform .48s cubic-bezier(.2,.7,.2,1), box-shadow .48s ease, border-color .3s ease;
  }
  #berita-manual .manual-feature:hover,
  #berita-manual .manual-archive .item:hover,
  #berita .feature:hover,
  #berita .storymini:hover,
  #latest-news > .item:hover,
  .article .related-card:hover,
  .grid .card:hover,
  main .cards > *:hover,
  main .youtube-videos > *:hover,
  main .youtube-card:hover,
  main .music-playlist-card:hover,
  main .tts-editor-card:hover,
  main .tts-controls-card:hover,
  main .tts-settings-card:hover,
  main .tts-result-card:hover,
  main .tts-history-card:hover,
  main .tts-plan-card:hover,
  main .tts-quick-guide:hover,
  main .tts-use-cases:hover,
  main .tts-faq:hover,
  main .tts-guide-steps > article:hover,
  main .tts-case-grid > article:hover,
  main .sidebar-category-list a:hover {
    transform: perspective(1100px) translateY(-3px) rotateX(.7deg) rotateY(-.6deg);
    box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 18px rgba(37,231,255,.12);
  }
  .article .image-media:hover img.hero { filter:brightness(1.05); }
}

/* Kontrol carousel memakai tombol ringkas yang mengikuti gaya tombol situs yang sudah ada. */
.osg-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.osg-carousel-controls[hidden] { display: none !important; }
.osg-carousel-controls button {
  min-width: 30px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid #3c5780;
  border-radius: 8px;
  background: rgba(7,19,38,.88);
  color: #e1e7ff;
  font: inherit;
  font-size: 12px;
  line-height: 1.1;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.osg-carousel-controls button:hover { background: #273f61; transform: translateY(-1px); }
.osg-carousel-controls button:focus-visible { outline: 2px solid #25e7ff; outline-offset: 2px; }
.osg-carousel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.osg-carousel-count { color: #b7c8df; font-size: 11px; white-space: nowrap; }
.osg-carousel-slide.osg-slide-enter { animation: osgSlideEnter .58s cubic-bezier(.2,.7,.2,1) both; }
#berita-manual .manual-carousel-stage { position: relative; grid-column: 1 / 2; min-width: 0; }
#berita-manual .manual-carousel-stage .manual-feature { width: 100%; }
@media(max-width:760px) {
  #berita-manual .manual-carousel-stage { grid-column: 1 / -1; }
  .osg-carousel-actions { gap: 3px; }
  .osg-carousel-count { display: none; }
  .osg-carousel-controls button { min-width: 28px; min-height: 28px; padding: 4px 7px; font-size: 11px; }
}

@media(prefers-reduced-motion:reduce) {
  .osg-site-shell .osg-brand-image img,
  #osg-site-footer-mount .osgl-footer-brand > a img,
  main img:not(.media-watermark):not([data-no-3d]) {
    animation:none !important;
    will-change:auto !important;
  }
  #berita-manual .manual-feature,
  #berita-manual .manual-archive .item,
  #berita .feature,
  #berita .storymini,
  #latest-news > .item,
  .article .related-card,
  .grid .card,
  main .cards > *,
  main .youtube-videos > *,
  main .youtube-card,
  main .music-playlist-card,
  main .tts-editor-card,
  main .tts-controls-card,
  main .tts-settings-card,
  main .tts-result-card,
  main .tts-history-card,
  main .tts-plan-card,
  main .tts-quick-guide,
  main .tts-use-cases,
  main .tts-faq,
  main .tts-guide-steps > article,
  main .tts-case-grid > article,
  main .sidebar-category-list a,
  .osg-carousel-slide {
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
  .osg-carousel-controls button { transition:none !important; }
}