/* Mahkota Play — Kontak Center | reuses shared Member shell + theme variables */
.mp-kontak-center{min-width:0;align-self:start;color:#fff;padding-bottom:25px}
.mp-kontak-center *{box-sizing:border-box}
.mp-kontak-intro{position:relative;border:1px solid color-mix(in srgb,var(--mp-line,#e50000) 32%,#303034);background:linear-gradient(135deg,color-mix(in srgb,var(--mp-panel,#200000) 32%,#0d0d10),#0a0a0c 78%);border-radius:14px;padding:27px 24px;margin-bottom:16px;overflow:hidden}
.mp-kontak-intro:after{content:"";position:absolute;width:140px;height:140px;right:-60px;top:-65px;border:20px solid color-mix(in srgb,var(--mp-accent,#e50000) 16%,transparent);border-radius:50%;pointer-events:none}
.mp-kontak-eyebrow{display:flex;align-items:center;gap:8px;letter-spacing:1.8px;font-size:10px;font-weight:800;color:var(--mp-highlight,#ffd03c)}
.mp-kontak-live-dot{display:block;width:7px;height:7px;border-radius:50%;background:var(--mp-accent,#e50000);box-shadow:0 0 12px var(--mp-accent,#e50000)}
.mp-kontak-intro h1{font-size:clamp(25px,3vw,34px);letter-spacing:-.8px;line-height:1.18;margin:13px 0 9px;color:#fff;font-weight:900}
.mp-kontak-period{color:var(--mp-accent,#e50000)}
.mp-kontak-intro p{font-size:12px;color:#b8b8bd;line-height:1.7;margin:0;max-width:480px}
.mp-kontak-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.mp-kontak-card{min-width:0;display:flex;align-items:flex-start;gap:12px;padding:18px 15px;border:1px solid color-mix(in srgb,var(--mp-line,#e50000) 26%,#343438);background:linear-gradient(150deg,color-mix(in srgb,var(--mp-panel,#200000) 18%,#101014),#09090c);border-radius:12px;min-height:163px;transition:border-color .2s,transform .2s}
.mp-kontak-card:hover{border-color:color-mix(in srgb,var(--mp-accent,#e50000) 50%,#4a4a50);transform:translateY(-2px)}
.mp-kontak-icon{flex:none;width:43px;height:43px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--mp-accent,#e50000) 14%,#141416);border:1px solid color-mix(in srgb,var(--mp-accent,#e50000) 30%,#28282b);color:var(--mp-highlight,#ffd03c);font-size:12px;font-weight:900;letter-spacing:.3px}
.mp-kontak-content{min-width:0;display:flex;flex-direction:column;align-items:flex-start;min-height:126px;flex:1}
.mp-kontak-content h2{font-size:17px;color:#fff;margin:1px 0 7px;line-height:1.3}
.mp-kontak-content p{font-size:11px;line-height:1.6;color:#b4b4ba;margin:0 0 15px;overflow-wrap:anywhere}
.mp-kontak-action{display:inline-flex;align-items:center;justify-content:center;gap:11px;margin-top:auto;min-height:34px;padding:8px 13px;color:#fff!important;text-decoration:none!important;font-size:11px;font-weight:800;border:1px solid #404046;background:#19191d;border-radius:8px;transition:background .2s,border-color .2s}
.mp-kontak-action:hover{background:#28282d;border-color:var(--mp-accent,#e50000)}
.mp-kontak-action span{font-size:14px;color:var(--mp-highlight,#ffd03c)}
.mp-kontak-unavailable{margin-top:auto;color:#8f8f97;font-size:11px;background:#141418;border:1px solid #29292e;padding:8px 11px;border-radius:7px}
.mp-kontak-card.is-unavailable{opacity:.68}
.mp-kontak-notice{margin-top:16px;display:flex;gap:13px;padding:17px 18px;border:1px solid color-mix(in srgb,var(--mp-line,#e50000) 24%,#38383d);border-radius:12px;background:linear-gradient(130deg,color-mix(in srgb,var(--mp-panel,#200000) 16%,#111114),#0b0b0d)}
.mp-kontak-notice-icon{font-size:23px;line-height:1;color:var(--mp-highlight,#ffd03c)}
.mp-kontak-notice h2{font-size:13px;color:#fff;margin:0 0 5px}
.mp-kontak-notice p{font-size:11px;line-height:1.65;color:#b3b3b9;margin:0}
@media(max-width:780px){.mp-kontak-list{grid-template-columns:1fr}.mp-kontak-card{min-height:130px}.mp-kontak-content{min-height:100px}}
@media(max-width:640px){.mp-kontak-intro{padding:22px 19px}.mp-kontak-card{padding:15px 14px}.mp-kontak-intro h1{font-size:27px}}

/* Contact V2: Home-sized banner, native SVG icons, theme-aware cards. */
.mp-kontak-banner{aspect-ratio:16/6;overflow:hidden;border-radius:13px;margin-bottom:14px;border:1px solid color-mix(in srgb,var(--mp-accent,#ef4444) 25%,#353535);background:#0b0b0d}
.mp-kontak-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.mp-kontak-icon{color:#f5f5f5;width:45px;height:45px;flex-shrink:0}
.mp-kontak-icon svg{display:block;width:24px;height:24px}
.mp-kontak-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.mp-kontak-empty{grid-column:1/-1;padding:25px;border:1px solid #34343a;border-radius:12px;background:#101014;color:#ccc;text-align:center}
.mp-kontak-card{background:linear-gradient(145deg,color-mix(in srgb,var(--mp-accent,#b91c1c) 5%,#101012),#0b0b0e);border-color:color-mix(in srgb,var(--mp-accent,#e11d48) 15%,#35353c)}
@media(max-width:640px){.mp-kontak-banner{aspect-ratio:16/7;border-radius:10px}.mp-kontak-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.mp-kontak-card{flex-direction:column;padding:13px 11px;min-height:177px}.mp-kontak-content{min-height:95px}.mp-kontak-content h2{font-size:14px}.mp-kontak-content p{font-size:10px}.mp-kontak-icon{width:38px;height:38px}.mp-kontak-icon svg{width:22px;height:22px}}


/* V3 — banner mengikuti ukuran slider Home, kartu kontak responsive. */
.mp-kontak-center .mp-kontak-banner {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:2.1 / 1;
  max-height:none;
  overflow:hidden;
  border-radius:13px;
  margin:0 0 16px;
  background:#0b0b0d;
}
.mp-kontak-center .mp-kontak-banner > img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:fill;
  object-position:center;
}
.mp-kontak-center .mp-kontak-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  margin-top:0;
}
.mp-kontak-center .mp-kontak-card {
  display:flex;
  min-width:0;
  border-radius:12px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--mp-panel,#200000) 10%,#111113),#0b0b0e);
  border:1px solid color-mix(in srgb,var(--mp-accent,#b91c1c) 15%,#35353c);
  overflow:hidden;
}
@media (max-width:640px){
  .mp-kontak-center .mp-kontak-banner {aspect-ratio:1.45 / 1;border-radius:10px;}
  .mp-kontak-center .mp-kontak-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .mp-kontak-center .mp-kontak-card {flex-direction:column;padding:13px 11px;}
}


/* V4 - compact equal-size contact rows: icon | name | button */
.mp-kontak-center .mp-kontak-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:11px!important;
}
.mp-kontak-center .mp-kontak-card{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:11px!important;
  width:100%!important;
  min-width:0!important;
  min-height:76px!important;
  height:76px!important;
  padding:12px!important;
  background:linear-gradient(145deg,#111114,#09090c)!important;
  border:1px solid color-mix(in srgb,var(--mp-accent,#e11d48) 13%,#34343b)!important;
  border-radius:12px!important;
  transform:none;
}
.mp-kontak-center .mp-kontak-icon{
  width:40px!important;height:40px!important;flex:0 0 40px!important;
  border-radius:10px!important;display:grid!important;place-items:center!important;
}
.mp-kontak-center .mp-kontak-icon svg{width:22px!important;height:22px!important}
.mp-kontak-center .mp-kontak-content{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:space-between!important;gap:10px!important;
  flex:1 1 auto!important;min-width:0!important;min-height:0!important;
}
.mp-kontak-center .mp-kontak-content h2{
  font-size:14px!important;font-weight:750!important;line-height:1.3!important;
  margin:0!important;min-width:0!important;overflow:hidden!important;
  white-space:nowrap!important;text-overflow:ellipsis!important;
}
.mp-kontak-center .mp-kontak-content p{display:none!important}
.mp-kontak-center .mp-kontak-action{
  flex:0 0 auto!important;margin:0!important;padding:8px 10px!important;
  min-height:33px!important;font-size:11px!important;gap:5px!important;
  border-radius:8px!important;background:#1b1b20!important;color:#fff!important;
  border:1px solid #45454e!important;
}
.mp-kontak-center .mp-kontak-action:hover{background:#28282e!important;border-color:var(--mp-accent,#d92332)!important}
.mp-kontak-center .mp-kontak-action span{color:#f6f6f6!important}
@media(max-width:820px){
  .mp-kontak-center .mp-kontak-list{grid-template-columns:1fr!important}
  .mp-kontak-center .mp-kontak-card{height:72px!important;min-height:72px!important;padding:11px 13px!important}
  .mp-kontak-center .mp-kontak-content h2{font-size:15px!important}
}