/* Custom styles for Kreasi Jasa Anda Teknik */
:root{
  --brand-font: 'Arial' !important;
  --ui-font: 'Arial' !important;
  --accent: #e9c46a;
}
body{
  font-family: var(--ui-font);
  color: #222;
  background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
}
.hero{
  min-height: 60vh;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
  padding: 6rem 0;
}
.hero h1{font-family: var(--brand-font); letter-spacing: -0.5px}
.hero p.lead{opacity: .95}
.hover-raise{transition: transform .18s ease, box-shadow .18s ease}
.hover-raise:hover{transform: translateY(-6px); box-shadow: 0 18px 32px rgba(0,0,0,.08)}
.object-fit-cover{object-fit: cover}
.object-fit-contain{object-fit: contain}

/* Navbar brand logo */
.brand-logo-wrapper{background:#fff; border-radius:50%; padding:4px; display:inline-flex; align-items:center; justify-content:center}
.brand-logo{width:36px; height:36px; object-fit:cover; display:block; border-radius:50%}

/* Navbar link separators and spacing (use border-left to avoid wrapping issues) */
.navbar-nav .nav-link{ padding-left: .8rem; padding-right: .8rem; }
.navbar-nav .nav-item + .nav-item .nav-link{ margin-left: .4rem; border-left: 1px solid rgba(255,255,255,0.25); padding-left: 1rem; }

@media (max-width: 767px){
  /* On small screens, remove separators and reduce spacing for compact navbar */
  .navbar-nav .nav-item + .nav-item .nav-link{ border-left: none; margin-left: .15rem; padding-left: .5rem; padding-right: .5rem; }
  .navbar-nav .nav-link{ padding-left: .5rem; padding-right: .5rem; }
}

/* Responsive tweaks */
@media (max-width: 767px){
  .hero{padding: 4rem 0}
}

/* Small aesthetic touches for cards */
.card .card-img-top{height:220px; object-fit:cover}

/* Photos container: groups stack vertically */
#photosGrid{ display: block; }

/* Inner group grid for each photo group */
.group-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.group-gallery a, .group-gallery .photo-card{display:block; border-radius:8px; overflow:hidden}
.group-gallery img{width:100%; height:220px; object-fit:cover; display:block}

/* Increase vertical spacing between sections */
section{ margin-bottom: 8rem !important }

/* Center modal caption text */
#mediaCaption{ text-align:center }

/* Modal caption */
#mediaCaption{ background: rgba(0,0,0,0.5); padding:.5rem 1rem; border-radius:8px; color: #fff }

/* When caption is present, shift the numeric indicator up so they don't overlap */
#mediaCaption, #mediaCaption *{ color: #fff !important }
.indicator-shifted{ transform: translateY(-66px) !important }

/* Ensure images inside modal are visible and centered */
#mediaContainer{ display:flex; align-items:center; justify-content:center; background:transparent }
#mediaContainer img{ max-width:100%; max-height:100%; object-fit:contain; display:block }

/* Photo group styles */
.photo-group .group-title{ text-align:left; font-weight:700; letter-spacing:.6px; }
.photo-card{ display:flex; flex-direction:column; }
.photo-card img{ height:160px; width:100%; object-fit:cover; }
.photo-caption{ font-size:0.92rem; color:#222; }
.photo-caption .small{ font-size:0.85rem; color:#666; }

/* Kumpulan patung styles: groups stacked vertically, images horizontal */
.kumpulan-group{ margin-bottom:2.25rem }
.kumpulan-group .group-title{ font-weight:700; margin-bottom:1rem }
.kumpulan-row{ display: grid; gap:1rem; align-items:start }
.k-thumb{ width:100%; height:280px; object-fit:cover; display:block }
/* k-item uses default flex/grid sizing */

@media (max-width: 900px){
  .kumpulan-row{ grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); overflow-x:auto; }
  .k-thumb{ height:200px }
}


/* Carousel container */
.video-carousel .carousel-item video, .video-carousel .carousel-item iframe{width:100%; height:480px; object-fit:cover}

/* Video grid */
.video-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.video-card{display:block; border-radius:10px; overflow:hidden; position:relative}
.video-thumb-wrap{position:relative; background:#000; min-height:140px; display:flex; align-items:center; justify-content:center}
.video-thumb{width:100%; height:180px; object-fit:cover; display:block}
.embed-thumb .embed-placeholder{color:#fff; padding:1.2rem; font-weight:600}
.video-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.25)); opacity:1; transition:opacity .18s}
.play-circle{width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,0.6); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:28px}
.video-card:hover .video-overlay{background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.35)); transform:translateY(-4px)}

/* Center all section h2 */
section h2{ text-align:center }

/* Allow browser-supported anchor offset via scroll-margin-top */
section{ scroll-margin-top: 88px }

/* Modal prev/next buttons styling */
#modalPrev, #modalNext{
  width:48px; height:48px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:20px; backdrop-filter: blur(6px);
}

@media (max-width:575px){
  #modalPrev, #modalNext{ width:40px; height:40px; font-size:18px }
}

/* media modal indicator */
#mediaIndicator{ font-weight:600; letter-spacing:.4px; }