/* LDP JPM v10.24-R2 — CTA visibility, 3x3 article grid, direct-click instructor cards */

/* ------------------------------------------------------------------
   Public CTA buttons — fix specificity clash from `.card a{...}`.
   Buttons inside cards must keep white text and remain visually dominant.
   ------------------------------------------------------------------ */
a.btn-primary, button.btn-primary, input.btn-primary,
.card a.btn-primary, .panel a.btn-primary, .side-card a.btn-primary,
.card-foot a.btn-primary, .filterbar .btn-primary, .filter-bar .btn-primary {
  background:#e5241c;
  border-color:#e5241c;
  color:#fff !important;
  font-weight:800;
  text-decoration:none !important;
  box-shadow:0 9px 22px -12px rgba(181,24,18,.72);
}
a.btn-primary:hover, button.btn-primary:hover,
.card a.btn-primary:hover, .panel a.btn-primary:hover,
.card-foot a.btn-primary:hover, .filterbar .btn-primary:hover,
.filter-bar .btn-primary:hover {
  background:#b8140e;
  border-color:#b8140e;
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:0 12px 28px -13px rgba(181,24,18,.82);
}

/* Gold CTA is used on dark hero surfaces. */
a.btn-gold, button.btn-gold, .hero a.btn-gold {
  background:#e5241c;
  border-color:#e5241c;
  color:#fff !important;
  font-weight:800;
  box-shadow:0 10px 24px -13px rgba(181,24,18,.78);
}
a.btn-gold:hover, button.btn-gold:hover, .hero a.btn-gold:hover {
  background:#b8140e;
  border-color:#b8140e;
  color:#fff !important;
}

/* Secondary/outline actions keep a clear boundary on white cards. */
a.btn-ghost, button.btn-ghost, .card a.btn-ghost {
  border-width:2px;
  border-color:#b8140e;
  color:#9f1812 !important;
  background:#fff;
  text-decoration:none !important;
}
a.btn-ghost:hover, button.btn-ghost:hover, .card a.btn-ghost:hover {
  background:#b8140e;
  border-color:#b8140e;
  color:#fff !important;
  text-decoration:none !important;
}

.btn-danger, a.btn-danger, button.btn-danger {
  color:#fff !important;
  text-decoration:none !important;
}

/* Larger tap target and stronger typography for user-facing card actions. */
.card-foot .btn,
.artikel-card .btn,
.catalog-grid .btn,
.program-grid .btn {
  min-height:40px;
  min-width:82px;
  padding:.58rem 1.05rem;
  font-weight:800;
  letter-spacing:.01em;
}
.card-foot .btn-primary::after,
.artikel-card .btn-primary::after {
  content:"→";
  font-size:1rem;
  line-height:1;
  transition:transform .18s ease;
}
.card-foot .btn-primary:hover::after,
.artikel-card .btn-primary:hover::after { transform:translateX(3px); }

/* Global keyboard visibility for navigation/CTA controls. */
.btn:focus-visible,
.nav a:focus-visible,
.sub-toggle:focus-visible,
.person-profile-link:focus-visible,
.instruktur-card:focus-visible,
.pagination a:focus-visible {
  outline:3px solid rgba(225,30,22,.34);
  outline-offset:3px;
}

/* Header CTA should not be weakened by generic nav link color. */
.nav .nav-cta,
.nav a.nav-cta {
  min-height:42px;
  padding:.58rem 1.05rem;
  background:#e5241c;
  border-color:#e5241c;
  color:#fff !important;
  font-weight:800;
  box-shadow:0 8px 20px -12px rgba(181,24,18,.75);
}
.nav .nav-cta:hover,
.nav a.nav-cta:hover { background:#b8140e;color:#fff !important; }

/* Pagination active/hover contrast. */
.pagination a.active,
.pagination a:hover {
  background:#e5241c;
  border-color:#e5241c;
  color:#fff !important;
  text-decoration:none;
}

/* ------------------------------------------------------------------
   Team cards — the whole card is the navigation target.
   No secondary "Lihat Profil" CTA is shown; interaction is communicated
   through card lift, border emphasis, photo zoom, and keyboard focus.
   ------------------------------------------------------------------ */
.person { position:relative;overflow:hidden; }
a.person-profile-link {
  display:flex;
  min-height:100%;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  color:inherit !important;
  text-decoration:none !important;
  cursor:pointer;
  isolation:isolate;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
a.person-profile-link::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#e5241c,#9f1812);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
  z-index:1;
}
a.person-profile-link img {
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
a.person-profile-link:hover,
a.person-profile-link:focus-visible {
  color:inherit !important;
  text-decoration:none !important;
  transform:translateY(-7px);
  border-color:#efb6b2;
  background:linear-gradient(180deg,#fff 0%,#fffafa 100%);
  box-shadow:0 18px 38px -24px rgba(35,39,69,.58);
}
a.person-profile-link:hover::before,
a.person-profile-link:focus-visible::before { transform:scaleX(1); }
a.person-profile-link:hover img,
a.person-profile-link:focus-visible img {
  transform:scale(1.045);
  border-color:#e5241c;
  box-shadow:0 10px 24px -16px rgba(181,24,18,.72);
}
a.person-profile-link p { margin-bottom:0; }

/* Program detail instructor cards are clickable and visibly interactive. */
a.instruktur-card {
  position:relative;
  color:inherit !important;
  text-decoration:none !important;
  padding-right:2.4rem;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
a.instruktur-card::after {
  content:"→";
  position:absolute;
  right:.85rem;
  top:50%;
  transform:translateY(-50%);
  color:#b8140e;
  font-weight:900;
}
a.instruktur-card:hover {
  transform:translateY(-2px);
  border-color:#f1b9b5;
  box-shadow:0 12px 28px -22px rgba(35,39,69,.55);
  color:inherit !important;
  text-decoration:none !important;
}

/* Instructor detail page — R3 contrast + layout refinement */
.profile-person-hero{
  position:relative;
  overflow:hidden;
  min-height:0;
  padding-block:clamp(42px,5vw,72px) !important;
  background:
    radial-gradient(circle at 82% 18%,rgba(229,36,28,.16),transparent 28%),
    radial-gradient(circle at 68% 120%,rgba(32,39,66,.08),transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#fff8f7 62%,#fff1ef 100%);
  color:#202742 !important;
  border-bottom:1px solid #f1dad8;
}
.profile-person-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:4px;
  background:linear-gradient(90deg,#202742 0%,#202742 45%,#e5241c 45%,#e5241c 100%);
}
.profile-person-hero .container{position:relative;z-index:1;}
.profile-person-hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  align-items:center;
  gap:clamp(1.5rem,4vw,4rem);
}
.profile-person-hero-copy{max-width:760px;}
.profile-person-hero .eyebrow{
  display:inline-flex;
  align-items:center;
  background:#fff0ee !important;
  border:1px solid #f2c7c3 !important;
  color:#a3140e !important;
  box-shadow:none;
}
.profile-person-hero h1{
  color:#202742 !important;
  letter-spacing:-.035em;
  margin:.7rem 0 .4rem;
  font-size:clamp(2.1rem,4.4vw,3.6rem);
  max-width:none;
}
.profile-person-hero p,
.profile-person-hero .profile-person-hero-role{
  color:#a3140e !important;
  margin:0;
  font-size:clamp(1rem,1.4vw,1.16rem);
  font-weight:800;
}
.profile-person-hero-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1rem;
  color:#61687a !important;
  font-size:.86rem;
  font-weight:700;
}
.profile-person-hero-meta *{color:inherit !important;}
.profile-person-hero-visual{
  position:relative;
  width:190px;
  height:190px;
  justify-self:end;
  display:grid;
  place-items:center;
}
.profile-person-hero-ring{
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1px solid rgba(229,36,28,.18);
  background:rgba(255,255,255,.36);
}
.profile-person-hero-ring.is-small{
  inset:34px;
  border-color:rgba(32,39,66,.12);
  background:rgba(255,255,255,.62);
}
.profile-person-hero-monogram{
  position:relative;
  z-index:1;
  width:92px;
  height:92px;
  border-radius:28px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#202742,#303a61);
  color:#fff !important;
  font-size:2rem;
  font-weight:900;
  box-shadow:0 18px 40px -24px rgba(32,39,66,.7);
}

.profile-person-main{
  padding-top:clamp(28px,4vw,48px);
  background:linear-gradient(180deg,#fff 0%,#fcfcfd 100%);
}
.profile-back{margin-bottom:1.15rem;}
.profile-back .btn{
  min-height:40px;
  border-color:#dc332b;
  background:#fff;
  color:#a3140e !important;
  box-shadow:0 8px 24px -22px rgba(163,20,14,.55);
}
.profile-back .btn:hover{
  background:#a3140e;
  border-color:#a3140e;
  color:#fff !important;
}
.profile-person-shell{
  display:grid;
  grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3rem);
  align-items:start;
}
.profile-person-aside{
  position:sticky;
  top:96px;
  overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#fffafa 100%);
  border:1px solid #e8e9ef;
  border-radius:20px;
  box-shadow:0 22px 50px -40px rgba(32,39,66,.55);
  padding:1.5rem;
  text-align:center;
}
.profile-person-aside::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,#202742 0 46%,#e5241c 46% 100%);
}
.profile-person-photo-wrap{
  width:min(230px,82%);
  aspect-ratio:1/1;
  margin:.35rem auto 1rem;
  padding:5px;
  border-radius:50%;
  background:linear-gradient(145deg,#ffd6d2,#fff 42%,#f2c7c3);
  box-shadow:0 18px 42px -34px rgba(229,36,28,.6);
}
.profile-person-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
  border:0;
  background:#f5f6f8;
}
.profile-person-badge{
  display:inline-flex;
  margin:.05rem 0 .6rem;
  padding:.35rem .65rem;
  border-radius:999px;
  background:#fff0ee;
  border:1px solid #f2cbc7;
  color:#a3140e;
  font-size:.7rem;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.profile-person-aside h2{margin:.2rem 0 .25rem;font-size:1.35rem;color:#202742;}
.profile-person-role{color:#a3140e;font-weight:800;margin:0 0 .9rem;}
.profile-person-summary{margin:.1rem 0 0;line-height:1.75;}
.profile-person-contact{display:grid;gap:.5rem;margin-top:1rem;text-align:left;}
.profile-person-contact a{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.72rem .78rem;
  border:1px solid #e4e6ed;
  border-radius:12px;
  background:#fff;
  color:#202742 !important;
  overflow-wrap:anywhere;
  transition:.2s ease;
}
.profile-person-contact a:hover{
  border-color:#e5241c;
  background:#fff7f6;
  color:#a3140e !important;
  text-decoration:none;
  transform:translateY(-1px);
}
.profile-person-content{display:grid;gap:1rem;}
.profile-section{
  background:#fff;
  border:1px solid #e6e8ef;
  border-radius:18px;
  padding:clamp(1.2rem,2.6vw,1.65rem);
  box-shadow:0 18px 48px -42px rgba(32,39,66,.55);
}
.profile-section-intro{border-top:3px solid #e5241c;}
.profile-section .eyebrow{
  display:inline-flex;
  margin-bottom:.75rem;
  padding:.34rem .7rem;
  border-radius:999px;
  border:1px solid #f2cbc7;
  background:#fff0ee;
  color:#a3140e;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.profile-section h2,.profile-section h3{margin-top:0;color:#202742;}
.profile-section h2{font-size:clamp(1.55rem,2.4vw,2rem);margin-bottom:.7rem;}
.profile-section h3{margin-bottom:.75rem;}
.profile-section p:last-child{margin-bottom:0;}
.profile-person-bio{line-height:1.85;color:#4d5467;}
.profile-tag-list{display:flex;flex-wrap:wrap;gap:.48rem;margin-top:.65rem;}
.profile-tag-list span{
  padding:.46rem .72rem;
  border-radius:999px;
  border:1px solid #f2c5c1;
  background:#fff5f4;
  color:#8e1c14;
  font-size:.8rem;
  font-weight:700;
}
.profile-empty-note{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  margin-top:.2rem;
  padding:1rem;
  border:1px dashed #e5b9b5;
  border-radius:14px;
  background:linear-gradient(135deg,#fff8f7,#fff);
  color:#555d70;
}
.profile-empty-note.is-compact{margin-top:.35rem;}
.profile-empty-note b{display:block;color:#202742;margin-bottom:.18rem;}
.profile-empty-note p{margin:0;color:#687084;line-height:1.65;font-size:.92rem;}
.profile-empty-icon{
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e5241c;
  color:#fff;
  font-weight:900;
  font-size:.82rem;
}
.profile-program-list{display:grid;gap:.65rem;}
.profile-program-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 1rem;
  border:1px solid #e5e7ed;
  border-radius:13px;
  background:#fff;
  color:#202742 !important;
  text-decoration:none !important;
  transition:.2s ease;
}
.profile-program-item span:first-child{display:grid;gap:.2rem;min-width:0;}
.profile-program-item small{color:#6f7687;font-weight:600;}
.profile-program-item span:last-child{color:#e5241c;font-weight:900;font-size:1.1rem;}
.profile-program-item:hover{
  border-color:#efb6b2;
  background:#fff8f7;
  transform:translateY(-1px);
  box-shadow:0 12px 30px -26px rgba(32,39,66,.55);
}

@media(max-width:900px){
  .profile-person-hero-inner{grid-template-columns:1fr 130px;}
  .profile-person-hero-visual{width:125px;height:125px;}
  .profile-person-hero-monogram{width:70px;height:70px;border-radius:22px;font-size:1.55rem;}
  .profile-person-shell{grid-template-columns:1fr;}
  .profile-person-aside{position:static;}
  .profile-person-photo-wrap{width:min(190px,64%);}
}
@media(max-width:640px){
  .profile-person-hero{padding-block:34px 38px !important;}
  .profile-person-hero-inner{display:block;}
  .profile-person-hero-visual{display:none;}
  .profile-person-hero h1{font-size:clamp(1.8rem,9vw,2.35rem);}
  .profile-person-hero-meta{gap:.4rem;font-size:.78rem;}
  .profile-person-main{padding-top:24px;}
  .profile-section{border-radius:15px;}
  .profile-empty-note{padding:.85rem;}
  .card-foot .btn,.artikel-card .btn{min-height:44px;}
}

/* Article listing: exactly three columns on desktop, with up to nine cards
   (3 × 3) per page. Tablet/mobile rules from the base styles still apply. */
@media(min-width:901px){
  .artikel-grid-3x3{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch;
  }
  .artikel-grid-3x3 > .artikel-card{height:100%;}
}

/* Partial result grids should stay visually centered instead of leaving a large
   empty third column (common on filtered catalog/article pages). */
@media(min-width:901px){
  .catalog-results.is-single{
    grid-template-columns:minmax(0,410px) !important;
    justify-content:center;
  }
  .catalog-results.is-double{
    grid-template-columns:repeat(2,minmax(0,410px)) !important;
    justify-content:center;
  }
}

/* ================================================================
   v10.25 — SEO / SEM landing pages and discoverability UI
   ================================================================ */
.seo-landing-hero{position:relative;overflow:hidden;}
.seo-landing-hero .container{position:relative;z-index:1;}
.seo-landing-hero h1{max-width:900px;}
.seo-landing-hero p{max-width:880px;line-height:1.72;}
.seo-hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem;}
.seo-landing-hero .btn-primary{box-shadow:0 12px 28px -18px rgba(181,18,23,.8);}
.seo-topic-grid{align-items:stretch;}
.seo-topic-card{height:100%;border:1px solid #e6e8ef;box-shadow:0 14px 34px -30px rgba(26,34,56,.5);}
.seo-topic-card .card-body{height:100%;display:flex;flex-direction:column;gap:.55rem;}
.seo-topic-card h3{margin:.1rem 0;color:#202742;line-height:1.28;}
.seo-topic-card p{margin:0;color:#687084;line-height:1.7;}
.seo-topic-link{display:block;text-decoration:none!important;color:inherit!important;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.seo-topic-link:hover,.seo-topic-link:focus-visible{transform:translateY(-4px);border-color:#efb6b2;box-shadow:0 20px 42px -28px rgba(181,18,23,.42);}
.seo-link-label{display:inline-flex;margin-top:auto;padding-top:.65rem;color:#b51217;font-weight:800;font-size:.86rem;}
.seo-content-grid{align-items:start;gap:2rem;}
.seo-cta-panel{border:1px solid #e6e8ef;box-shadow:0 16px 38px -30px rgba(26,34,56,.45);}
.seo-check-list,.seo-number-list{display:grid;gap:.65rem;padding-left:1.2rem;color:#4e5669;line-height:1.7;}
.seo-check-list li::marker,.seo-number-list li::marker{color:#b51217;font-weight:800;}
.faq-list{display:grid;gap:.8rem;}
.faq-item{border:1px solid #e5e7ed;border-radius:14px;background:#fff;padding:0 1rem;box-shadow:0 10px 28px -28px rgba(20,27,45,.55);}
.faq-item summary{cursor:pointer;font-weight:800;color:#202742;padding:1rem 0;}
.faq-item p{margin:0;padding:0 0 1rem;color:#687084;line-height:1.7;}
.seo-focus-section .seo-topic-card{background:#fff;}
@media(max-width:640px){
  .seo-hero-actions{display:grid;grid-template-columns:1fr;}
  .seo-hero-actions .btn{width:100%;justify-content:center;}
  .seo-content-grid{gap:1rem;}
}