/*
 * SMANJA v22.3.4 — Luxury Teacher Cards
 * Premium multitone teacher cards for Yayasan homepage.
 */
body.smanja-v2234{
  --sj2234-navy:#073955;
  --sj2234-gold:#e8b84b;
  --sj2234-ink:#17394e;
}

/* Section stays calm so the colourful cards remain the focal point. */
body.smanja-v2234 .sj222-teacher-section{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(18,78,112,.11)!important;
  background:
    radial-gradient(circle at 7% 14%,rgba(34,150,177,.09),transparent 17rem),
    radial-gradient(circle at 94% 88%,rgba(232,184,75,.10),transparent 16rem),
    linear-gradient(145deg,#f8fcfd 0%,#f3f8fa 100%)!important;
  box-shadow:0 18px 46px rgba(9,56,84,.08)!important;
}
body.smanja-v2234 .sj222-teacher-section:after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  right:-120px;
  top:-125px;
  border-radius:50%;
  border:38px solid rgba(232,184,75,.05);
  pointer-events:none;
}

/* Cards: rich, restrained and intentionally different from one another. */
body.smanja-v2234 .sj15-teacher-card{
  --teacher-a:#0d6288;
  --teacher-b:#0a405f;
  --teacher-accent:#f0c55d;
  position:relative!important;
  flex:0 0 218px!important;
  min-width:218px!important;
  border:0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:linear-gradient(155deg,var(--teacher-a),var(--teacher-b))!important;
  box-shadow:0 16px 34px rgba(7,50,75,.16),0 2px 7px rgba(7,50,75,.09)!important;
  isolation:isolate;
  transform:translateY(0);
  transition:transform .28s ease,box-shadow .28s ease,filter .28s ease!important;
}
body.smanja-v2234 .sj15-teacher-card:nth-child(5n+1){--teacher-a:#0f77a4;--teacher-b:#073d62;--teacher-accent:#ffd166}
body.smanja-v2234 .sj15-teacher-card:nth-child(5n+2){--teacher-a:#149c93;--teacher-b:#075f69;--teacher-accent:#8de6d9}
body.smanja-v2234 .sj15-teacher-card:nth-child(5n+3){--teacher-a:#6657a8;--teacher-b:#253d79;--teacher-accent:#c9b8ff}
body.smanja-v2234 .sj15-teacher-card:nth-child(5n+4){--teacher-a:#178566;--teacher-b:#0a514b;--teacher-accent:#a9e8b7}
body.smanja-v2234 .sj15-teacher-card:nth-child(5n){--teacher-a:#b36a36;--teacher-b:#70452f;--teacher-accent:#ffd08a}

body.smanja-v2234 .sj15-teacher-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.20);
  background:
    radial-gradient(circle at 88% 12%,rgba(255,255,255,.25),transparent 23%),
    linear-gradient(125deg,rgba(255,255,255,.08),transparent 30% 72%,rgba(255,255,255,.05));
}
body.smanja-v2234 .sj15-teacher-card:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  z-index:5;
  background:linear-gradient(90deg,var(--teacher-accent),rgba(255,255,255,.85),var(--teacher-accent));
}
body.smanja-v2234 .sj15-teacher-card:hover{
  transform:translateY(-7px)!important;
  box-shadow:0 24px 50px rgba(7,50,75,.24),0 5px 13px rgba(7,50,75,.11)!important;
  filter:saturate(1.06);
}
body.smanja-v2234 .sj15-teacher-card:focus-visible{
  outline:3px solid rgba(232,184,75,.55)!important;
  outline-offset:4px!important;
}

/* Photo behaves like a framed plaque, not a plain rectangular crop. */
body.smanja-v2234 .sj15-teacher-photo{
  position:relative!important;
  height:235px!important;
  margin:10px 10px 0!important;
  border-radius:14px 14px 11px 11px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.35),transparent 42%),
    linear-gradient(155deg,rgba(255,255,255,.18),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 7px 18px rgba(0,0,0,.11)!important;
}
body.smanja-v2234 .sj15-teacher-photo:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:32%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,31,49,.28));
}
body.smanja-v2234 .sj15-teacher-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center top!important;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .35s ease!important;
}
body.smanja-v2234 .sj15-teacher-card:hover .sj15-teacher-photo img{
  transform:scale(1.045)!important;
  filter:contrast(1.02) saturate(1.04);
}
body.smanja-v2234 .sj15-teacher-photo>span{
  z-index:4!important;
  right:10px!important;
  bottom:10px!important;
  width:31px!important;
  height:31px!important;
  border-radius:50%!important;
  color:#173b53!important;
  background:linear-gradient(145deg,#fff8d8,var(--teacher-accent))!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.18)!important;
  font-size:11px!important;
}

/* Glass-like identity plaque below the portrait. */
body.smanja-v2234 .sj15-teacher-copy{
  position:relative!important;
  z-index:4!important;
  min-height:116px!important;
  padding:15px 15px 17px!important;
  color:#fff!important;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.08))!important;
}
body.smanja-v2234 .sj15-teacher-copy:before{
  content:"";
  display:block;
  width:34px;
  height:3px;
  margin-bottom:9px;
  border-radius:999px;
  background:var(--teacher-accent);
  box-shadow:0 0 0 3px rgba(255,255,255,.04);
}
body.smanja-v2234 .sj15-teacher-copy small{
  color:var(--teacher-accent)!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.smanja-v2234 .sj15-teacher-copy h3{
  margin:5px 0 0!important;
  color:#fff!important;
  font-size:14.5px!important;
  line-height:1.35!important;
  font-weight:800!important;
  text-shadow:0 1px 2px rgba(0,0,0,.10);
}
body.smanja-v2234 .sj15-teacher-copy p{
  margin:5px 0 0!important;
  color:rgba(255,255,255,.80)!important;
  font-size:11.5px!important;
  line-height:1.48!important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Navigation mirrors the luxury card language. */
body.smanja-v2234 .sj15-teacher-section .sj15-carousel-nav{
  background:linear-gradient(145deg,#fff,#edf5f8)!important;
  border:1px solid rgba(9,69,103,.14)!important;
  color:#0a567d!important;
  box-shadow:0 8px 18px rgba(8,53,78,.11)!important;
}
body.smanja-v2234 .sj15-teacher-section .sj15-carousel-nav:hover{
  background:linear-gradient(145deg,#0d6d93,#074566)!important;
  color:#fff!important;
  border-color:transparent!important;
}
body.smanja-v2234 .sj15-teacher-section .sj151-page-button.is-active,
body.smanja-v2234 .sj15-teacher-section .sj151-page-control:hover,
body.smanja-v2234 .sj15-teacher-section .sj151-page-last:hover{
  background:linear-gradient(135deg,#0d6d93,#074566)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 5px 13px rgba(7,71,105,.16)!important;
}

@media(max-width:991.98px){
  body.smanja-v2234 .sj15-teacher-card{flex-basis:202px!important;min-width:202px!important}
  body.smanja-v2234 .sj15-teacher-photo{height:218px!important}
}
@media(max-width:767.98px){
  body.smanja-v2234 .sj222-teacher-section{padding:16px!important}
  body.smanja-v2234 .sj15-teacher-card{flex-basis:180px!important;min-width:180px!important;border-radius:16px!important}
  body.smanja-v2234 .sj15-teacher-photo{height:195px!important;margin:8px 8px 0!important}
  body.smanja-v2234 .sj15-teacher-copy{min-height:108px!important;padding:13px 13px 15px!important}
  body.smanja-v2234 .sj15-teacher-copy h3{font-size:13.5px!important}
  body.smanja-v2234 .sj15-teacher-copy p{font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){
  body.smanja-v2234 .sj15-teacher-card,
  body.smanja-v2234 .sj15-teacher-photo img{transition:none!important}
  body.smanja-v2234 .sj15-teacher-card:hover{transform:none!important}
}