:root {
  --mc-bg-top: #045f64;
  --mc-bg-bottom: #013e44;
  --mc-card-top: #0a686f;
  --mc-card-bottom: #024b50;
  --mc-strip-main: #1d95a2;
  --mc-strip-dark: #084f59;
  --mc-line: rgba(183, 244, 239, 0.18);
  --mc-border: rgba(197, 245, 242, 0.32);
  --mc-white: #f3fffd;
  --mc-muted: rgba(244,255,252,0.9);
  --mc-status-top: #ffcc54;
  --mc-status-bottom: #f6a623;
  --mc-home-red-top: #f32217;
  --mc-home-red-bottom: #b60e0a;
  --mc-away-blue-top: #2f6fff;
  --mc-away-blue-bottom: #154ecf;
  --mc-play-top: #b3ff1c;
  --mc-play-bottom: #83ef0a;
  --mc-live-top: #ff2a20;
  --mc-live-bottom: #ba0d08;
  --mc-tab-idle: #083f47;
  --mc-tab-active: #1fe7e6;
  --mc-gap: 12px;
  --mc-per-view: 4;
  --mc-nav-zone-width: 44px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.public-body{
  min-height:100vh;
  background: radial-gradient(circle at top, rgba(86,236,224,0.16), transparent 30%), linear-gradient(180deg,var(--mc-bg-top),var(--mc-bg-bottom));
  color:var(--mc-white);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.public-shell{width:min(1800px,100%);margin:0 auto;padding:2px 8px 18px}
.match-cards-app{width:100%;position:relative}
.mc-pagebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 8px}
.mc-page-title{font-size:12px;line-height:1;font-weight:900;letter-spacing:.20em;text-transform:uppercase;color:var(--mc-white)}
.mc-page-clock{font-size:11px;line-height:1;color:var(--mc-muted);white-space:nowrap}

.mc-category-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 12px;
}

.mc-category-tab {
  position: relative;
  border: 0;
  background: transparent;
  color: #f4fffc;
  cursor: pointer;
  padding: 0;
  font-family: 'ITAstrenixDemo', 'Arial Black', Impact, sans-serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  height: 42px;
  /*min-width: 30% !important;*/
}

.mc-category-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #083f47;
  border: 1px solid rgba(219, 251, 248, 0.20);
  border-radius: 8px;
  clip-path: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.mc-category-tab span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 22px;
}

.mc-category-tab.is-active::before {
  background: linear-gradient(180deg, #2ceeee, #14cfd0);
  border-color: rgba(255,255,255,.22);
}

.mc-category-tab.is-active {
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,.24);
}

.mc-slider{position:relative}
.mc-viewport{width:100%;overflow:hidden}
.mc-track{display:flex;gap:var(--mc-gap);will-change:transform;transition:transform 480ms ease}
.mc-slide{flex:0 0 calc((100% - (var(--mc-gap) * (var(--mc-per-view) - 1))) / var(--mc-per-view));min-width:0}
.mc-shell{position:relative;width:100%;padding-top:calc(500 / 955 * 100%)}
.mc-card{
  --mc-design-width:955;
  --mc-design-height:500;
  --mc-card-scale:1;
  --home-font-px:56;
  --away-font-px:56;
  --league-font-px:40;
  --date-font-px:26;
  position:absolute;left:0;top:0;width:955px;height:500px;transform-origin:top left;transform:scale(var(--mc-card-scale));
  border-radius:0;background:linear-gradient(180deg,var(--mc-card-top),var(--mc-card-bottom));border:1px solid rgba(206,252,246,.20);overflow:hidden;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}
.mc-card::before{content:'';position:absolute;inset:10px;border:1px solid var(--mc-border);border-radius:18px;pointer-events:none}
.mc-card::after{content:'';position:absolute;left:0;right:0;top:0;height:80px;background:linear-gradient(180deg, rgba(255,255,255,.05), transparent);pointer-events:none}
.mc-canvas{position:absolute;inset:0}

.mc-league{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:680px;height:60px;border-radius:16px;border:1px solid rgba(197,245,242,.26);background:linear-gradient(180deg,#0a5058,#083f47);display:flex;align-items:center;justify-content:center;padding:0 18px;color:#fff;white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,.26);font-family:'ITAstrenixDemo','Arial Black',Impact,sans-serif;font-style:italic;font-size:calc(var(--league-font-px)*1px);line-height:1}
.mc-date-header{position:absolute;left:50%;top:84px;transform:translateX(-50%);width:820px;text-align:center;color:#f5fffd;font-weight:900;font-size:40px;line-height:1.1;text-shadow:0 1px 5px rgba(0,0,0,.26)}
.mc-date-line-top,.mc-date-line-bottom{position:absolute;left:40px;right:40px;height:2px;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(114,224,222,.26) 20%, rgba(22,152,158,.9) 50%, rgba(114,224,222,.26) 80%, rgba(255,255,255,0));}
.mc-date-line-top {
    top: 83px;
}
.mc-date-line-bottom {
    top: 135px;
}

.mc-match-strip{position:absolute;left:34px;right:34px;top:150px;height:96px;display:grid;grid-template-columns:1fr 170px 1fr;border-radius:14px;overflow:visible;border:1px solid rgba(208,250,247,.22);background:linear-gradient(180deg,#229cac,#197f8a)}
.mc-team,.mc-vs{position:relative;display:flex;align-items:center;overflow:visible}
.mc-team{padding:8px 18px}
.mc-team--home{justify-content:flex-start}
.mc-team--away{justify-content:flex-end;text-align:right}
.mc-vs{justify-content:center;background:linear-gradient(180deg,#0a5460,#083f47);border-left:1px solid rgba(207,249,245,.18);border-right:1px solid rgba(207,249,245,.18)}
.mc-team-name{width:100%;color:#fff;white-space:nowrap;line-height:.92;text-shadow:0 2px 10px rgba(0,0,0,.28);font-family:'ITAstrenixDemo','Arial Black',Impact,sans-serif;font-style:italic}
.mc-team--home .mc-team-name{text-align:left;font-size:calc(var(--home-font-px)*1px)}
.mc-team--away .mc-team-name{text-align:right;font-size:calc(var(--away-font-px)*1px)}
.mc-vs-label{padding-right: 14px;color:#fff;font-family:'ITAstrenixDemo','Arial Black',Impact,sans-serif;font-style:italic;font-size:76px;line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.28)}
.mc-role{position:absolute;bottom:-16px;min-width:102px;height:38px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgba(255,255,255,.24);box-shadow:0 8px 18px rgba(0,0,0,.22);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.24);font-family:'ITAstrenixDemo','Arial Black',Impact,sans-serif;font-style:italic;font-size:22px;z-index:4}
.mc-role--home{left:10px;background:linear-gradient(180deg,var(--mc-home-red-top),var(--mc-home-red-bottom))}
.mc-role--away{right:10px;background:linear-gradient(180deg,var(--mc-away-blue-top),var(--mc-away-blue-bottom))}

.mc-status{position:absolute;left:50%;top:250px;transform:translateX(-50%);min-width:228px;height:52px;padding:0 28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(255,255,255,.20);box-shadow:0 8px 16px rgba(0,0,0,.18);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.24);font-family:'ITAstrenixDemo','Arial Black',Impact,sans-serif;font-style:italic;font-size:28px;z-index:5}
.mc-status--upcoming{background:linear-gradient(180deg,var(--mc-status-top),var(--mc-status-bottom)); color:#083f47}
.mc-status--live{background:linear-gradient(180deg,#ff7b70,#ec3022);}

.mc-market-row{position:absolute;left:68px;right:68px;top:314px;height:52px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mc-market-box{border-radius:30px;border:1px solid rgba(197,245,242,.28);background:linear-gradient(180deg,#083f47,#0a5058);display:flex;align-items:center;justify-content:center;gap:10px;padding:0 14px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.mc-market-value{font-size:28px;font-weight:900;color:#fff;line-height:1}
.mc-market-label{font-size:24px;font-weight:900;color:#14f0e0;line-height:1}

.mc-action-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px; /* sebelumnya 72px */
  height: 68px;
  display: grid;
  gap: 1px;
  background: rgba(255,255,255,.14);
}
.mc-action-row.is-single{grid-template-columns:1fr}
.mc-action-row.is-double{grid-template-columns:1fr 1fr}
.mc-action {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: 'ITAstrenixDemo', 'Arial Black', Impact, sans-serif;
  font-style: italic;
  font-size: 42px;
  line-height: 1;
  color: #07252b;
  text-transform: uppercase;
}

.mc-action--play {
  background: linear-gradient(180deg, var(--mc-play-top), var(--mc-play-bottom));
}
.mc-action--live{background:linear-gradient(180deg,var(--mc-live-top),var(--mc-live-bottom));color:#fff}

.mc-loading,.mc-empty,.mc-error{min-height:240px;width:100%;display:grid;place-items:center;border-radius:24px;border:1px solid rgba(206,252,246,.14);background:rgba(4,58,63,.42);color:var(--mc-white);text-align:center;padding:20px}

.mc-nav{position:absolute;top:86px;bottom:0;width:var(--mc-nav-zone-width);z-index:40;border:0;outline:0;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;pointer-events:auto}
.mc-nav::after{content:'';width:16px;height:16px;display:block;border-top:3px solid rgba(244,255,252,.92);border-right:3px solid rgba(244,255,252,.92);filter:drop-shadow(0 1px 6px rgba(0,0,0,.28))}
.mc-nav--prev{left:0;background:linear-gradient(90deg, rgba(1,62,68,.36), rgba(1,62,68,0));}
.mc-nav--prev::after{transform:rotate(-135deg)}
.mc-nav--next{right:0;background:linear-gradient(-90deg, rgba(1,62,68,.36), rgba(1,62,68,0));}
.mc-nav--next::after{transform:rotate(45deg)}
.mc-slider.is-single .mc-nav{display:none}

@media (max-width: 768px){
  :root{--mc-per-view:1.2;--mc-gap:10px}
  .public-shell{padding:4px 6px 14px}
  .mc-category-tab{font-size:15px;height:38px}
  .mc-nav{width:34px;top:0px}
}
@media screen and (max-width: 768px) {
  .match-cards-app .mc-category-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    padding-bottom: 10px !important;
  }

  .match-cards-app .mc-category-tab {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    height: 32px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .match-cards-app .mc-category-tab span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 4px !important;
    white-space: nowrap !important;
  }
}

@media screen and (max-width: 430px) {
  .match-cards-app .mc-category-tab {
    height: 30px !important;
    font-size: 10px !important;
  }

  .match-cards-app .mc-category-tab span {
    padding: 0 2px !important;
  }
}