/* Jelly UI: Partnership. Rollback: hapus <link> partnership-clay di view partnership */
body:has(.partnership-hero) {
  --ink: #3d4f73; --soft: #6f7fa0; --blue: #4f8fd8; --violet: #8b78d8;
  --glass: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.22));
  --jelly: 0 22px 30px -16px rgba(100,120,190,.4),
           inset 0 0 0 1.5px rgba(255,255,255,.95),
           inset 0 0 0 5px rgba(180,198,240,.3),
           inset 0 -10px 16px rgba(140,165,225,.22),
           inset 0 7px 12px rgba(255,255,255,.85);
  --jelly-sm: 0 12px 18px -10px rgba(100,120,190,.4),
              inset 0 0 0 1.5px rgba(255,255,255,.95),
              inset 0 0 0 4px rgba(180,198,240,.3),
              inset 0 -6px 10px rgba(140,165,225,.2),
              inset 0 4px 8px rgba(255,255,255,.85);
  background: #eef2fa; color: var(--ink);
}

/* ===== Header (hanya halaman ini; menu mobile tetap asli) ===== */
body:has(.partnership-hero) .site-header,
body:has(.partnership-hero) .site-header.scrolled {
  background: rgba(238,242,250,.72); border-bottom: 1px solid #fff;
  box-shadow: 0 12px 26px -16px rgba(100,120,190,.4);
}
body:has(.partnership-hero) .title-text { background: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
body:has(.partnership-hero) .nav-capsule { background: var(--glass); border: 0; box-shadow: var(--jelly-sm); }
body:has(.partnership-hero) .nav-menu a { color: var(--soft); }
body:has(.partnership-hero) .nav-menu a::before { background: rgba(139,120,216,.12); }
body:has(.partnership-hero) .nav-menu a:hover { color: var(--blue); }
body:has(.partnership-hero) .nav-menu a.active {
  background: rgba(255,255,255,.8); color: var(--blue); border: 0; box-shadow: var(--jelly-sm);
}
body:has(.partnership-hero) .search-toggle,
body:has(.partnership-hero) .menu-toggle {
  background: var(--glass); border: 0; color: var(--ink); box-shadow: var(--jelly-sm);
}
body:has(.partnership-hero) .menu-toggle span { background: var(--ink); }
body:has(.partnership-hero) .menu-toggle:hover span { background: var(--blue); }

/* ===== Hero: bola jelly di belakang ===== */
.partnership-hero { background: #eef2fa; }
.partnership-hero::before {
  content: ""; position: absolute; top: 40px; left: 4%; transform: none;
  width: 340px; height: 340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.85), rgba(140,205,245,.7) 38%, rgba(110,170,235,.55));
  box-shadow: inset 0 -18px 30px rgba(80,140,220,.25), 0 30px 50px -20px rgba(90,150,230,.4);
  animation: jellyFloat 11s ease-in-out infinite;
}
.partnership-hero::after {
  content: ""; position: absolute; top: 90px; right: 3%;
  width: 280px; height: 280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.8), rgba(190,170,245,.7) 40%, rgba(150,125,225,.55));
  box-shadow: inset 0 -16px 28px rgba(120,95,205,.25), 0 30px 50px -20px rgba(130,105,215,.4);
  animation: jellyFloat 13s ease-in-out infinite -5s;
}
@keyframes jellyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

.hero-content {
  padding: 2.6rem 2rem 2.4rem; border-radius: 40px;
  background: var(--glass); backdrop-filter: blur(18px);
  box-shadow: var(--jelly);
}
.hero-label-top {
  background: var(--glass); border: 0; color: var(--blue); box-shadow: var(--jelly-sm);
}
.hero-label-dot { background: var(--blue); }
.hero-content h1 { color: var(--ink); text-shadow: 0 2px 0 #fff, 0 14px 24px rgba(100,120,190,.25); }
.hero-content h1 .accent {
  background: linear-gradient(135deg, #4f8fd8, #8b78d8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 6px 10px rgba(110,120,220,.3));
}
.hero-content p { color: var(--soft); }

.btn-primary-hero, .btn-primary-hero:hover {
  background: var(--glass); color: var(--ink); box-shadow: var(--jelly);
}
.btn-primary-hero { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.btn-primary-hero:hover { transform: translateY(-4px) scale(1.04); }
.btn-primary-hero:active { transform: translateY(1px) scale(.98); }

/* ===== Galeri mitra ===== */
.partner-gallery {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #eef2fa 0%, #f3effb 100%);
}
.partner-gallery::before {
  content: ""; position: absolute; left: 50%; bottom: -170px; margin-left: -190px;
  width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.8), rgba(255,205,190,.6) 45%, rgba(255,185,200,.45));
  box-shadow: inset 0 -16px 28px rgba(235,150,160,.2);
}
.partner-gallery .container { position: relative; z-index: 1; }

.partner-card-custom {
  background: var(--glass); backdrop-filter: blur(16px);
  border: 0; border-top: 0; border-radius: 30px; box-shadow: var(--jelly);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
}
.partner-card-custom::before {
  content: ""; position: absolute; top: 6px; left: 14%; right: 14%; height: 34%;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
}
.partner-card-custom:hover {
  transform: translateY(-8px) scale(1.03); border: 0;
  box-shadow: var(--jelly), 0 0 36px color-mix(in srgb, var(--pcard-accent, #4ade80) 40%, transparent);
}
.partner-header { position: relative; z-index: 1; }
.partner-logo-container {
  border: 5px solid rgba(255,255,255,.9); background: #fff;
  box-shadow: 0 16px 22px -10px rgba(100,120,190,.5), 0 0 0 4px rgba(180,198,240,.35),
              inset 0 -6px 10px rgba(140,165,225,.25);
}
.partner-info-name { color: var(--ink); }

.partner-empty-state {
  background: var(--glass); border: 0; border-radius: 30px; box-shadow: var(--jelly);
}
.partner-empty-state p { color: var(--soft); }

/* ===== HP & aksesibilitas ===== */
@media (max-width: 768px) {
  .partnership-hero::before { width: 190px; height: 190px; top: 30px; left: -50px; }
  .partnership-hero::after  { width: 160px; height: 160px; top: 60px; right: -40px; }
  .hero-content { padding: 2rem 1.2rem; border-radius: 30px; }
  .partner-card-custom { border-radius: 24px; }
  .partner-card-custom:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .partnership-hero::before, .partnership-hero::after { animation: none !important; }
}