/* ================= MEMORIES V2 ================= */
.memories-section{
  min-height:100svh;
  background:url('photos/bg-thumbs.jpg') center bottom/cover no-repeat;
  position:relative;
  display:flex;
  align-items:center;
  padding:90px 0 40px;
}

.memories-overlay{
  width:100%;
  background:linear-gradient(180deg, rgba(15,23,42,.45) 0%, rgba(15,23,42,.75) 100%);
  padding:40px 0;
}

.hero-header{
  color:#fff;
}

.hero-title{
  font-size:clamp(2.2rem,5vw,4.5rem);
  font-weight:800;
  letter-spacing:.12em;
  color:#8455f0;
  text-shadow:0 0 20px rgba(132,85,240,.45);
  margin-bottom:12px;
}

.hero-subtitle{
  max-width:760px;
  margin:0 auto;
  color:rgba(255,255,255,.85);
  font-size:clamp(.95rem,2vw,1.15rem);
  line-height:1.7;
}

.memories-card{
  background:rgba(30,41,59,.88);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  padding:32px; 
  backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 22px rgba(132,85,240,.18);
}

.section-title{
  color:#8455f0;
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:700;
}

.section-desc{
  color:rgba(255,255,255,.72);
}

.memory-item{
  padding:4px;
}

.memory-image-wrapper{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:16/10;
  background:#111827;
}

.memory-image{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.memory-image-wrapper:hover .memory-image{
  transform:scale(1.06);
}

/* 1. Gradien Gelap Lebih Pekat & Menyeluruh */
.memory-overlay {
  position: absolute;
  inset: 0;
  /* Gradien gelap pekat di bawah dan sedikit bayangan lembut di atas */
  background: linear-gradient(
    180deg, 
    rgba(2, 6, 23, 0.25) 0%, 
    rgba(2, 6, 23, 0.55) 45%, 
    rgba(2, 6, 23, 0.95) 100%
  ) !important;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.memory-content{
  width:100%;
  color:#fff;
}

/* 2. Badge Meta Info (Lokasi & Tanggal) Lebih Kontras */
.memory-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .8rem;
  color: #ffffff;
  margin-bottom: 8px;
}

.memory-meta span {
  background: rgba(15, 23, 42, 0.65); /* Background mini transparan gelap */
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); /* Shadow penegas teks */
}

.memory-meta i {
  color: #8455f0; /* Ikon warna ungu agar estetik */
}

/* 3. Text Shadow pada Judul dan Region */
.memory-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 2px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); /* Penegas judul */
}

.memory-region {
  color: #c4b5fd;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 0.9rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.memory-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.btn-memory,
.btn-memory-outline{
  border-radius:999px;
  padding:.6rem 1rem;
  font-weight:600;
  transition:.25s ease;
}

.btn-memory{
  background:#8455f0;
  color:#fff;
  border:none;
}

.btn-memory:hover{
  background:#6b3fcc;
  color:#fff;
  transform:translateY(-1px);
}

/* 4. Tombol dengan Efek Backdrop Blur agar Makin Menyatu */
.btn-memory-outline {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
}

.btn-memory-outline:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.memories-carousel .owl-nav{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:12px;
}

.memories-carousel .owl-nav button{
  width:48px;
  height:48px;
  border-radius:50%!important;
  background:#fff!important;
  color:#8455f0!important;
  font-size:1.1rem!important;
  border:none!important;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  transition:.25s ease;
}

.memories-carousel .owl-nav button:hover{
  background:#8455f0!important;
  color:#fff!important;
}

.scroll-indicator{
  margin-top:28px;
}

.scroll-link{
  color:rgba(255,255,255,.8);
  text-decoration:none;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:.95rem;
}

.scroll-link i{
  animation:bounce 1.8s infinite;
}

@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translateY(0);}
  40%{transform:translateY(8px);}
  60%{transform:translateY(4px);}
}

@media (max-width:991px){
  .memories-card{
    padding:24px;
  }
}

@media (max-width:575px){
  .memories-section{
    padding-top:82px;
  }

  .memories-card{
    padding:20px;
    border-radius:22px;
  }

  .memory-overlay{
    padding:16px;
  }

  .memory-title{
    font-size:1.05rem;
  }

  .memory-actions .btn{
    width:100%;
    justify-content:center;
  }
}