/* PorTimPublik: widget tim Fun Match. Mandiri (selain css/por-formasi.css). Mobile-first, tanpa luapan horizontal. */
.ptp, .ptp *, .ptp *::before, .ptp *::after { box-sizing: border-box; }
.ptp { min-width: 0; max-width: 100%; -webkit-tap-highlight-color: transparent; }
.ptp button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-family: inherit; }

/* Warna tim: --tc utama, --tt teks di atasnya */
.ptp .tim-merah { --tc: #dc2626; --tt: #fff; }
.ptp .tim-biru { --tc: #1d4ed8; --tt: #fff; }
.ptp .tim-hijau { --tc: #16a34a; --tt: #fff; }
.ptp .tim-kuning { --tc: #facc15; --tt: #1f2937; }

/* Saklar Formasi / Daftar */
.ptp-saklar { display: flex; width: 100%; max-width: 320px; margin: 0 0 16px; border: 2px solid #003366; }
.ptp-seg {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 12px; background: #fff; color: #003366;
  font-size: 15px; font-weight: 800; border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .22s ease, color .22s ease, transform .15s ease;
}
.ptp-seg + .ptp-seg { border-left: 2px solid #003366; }
.ptp-seg:hover { background: #eef3f9; }
.ptp-seg:active { transform: scale(.97); }
.ptp-seg.is-on, .ptp-seg.is-on:hover { background: #003366; color: #fff; }
.ptp-seg:focus-visible, .ptp-chip:focus-visible { outline: 3px solid #f57c00; outline-offset: 2px; }
.ptp-seg:focus-visible { outline-offset: -3px; }

/* Isi dengan transisi keluar/masuk */
.ptp-body { min-width: 0; transition: opacity .13s ease, transform .13s ease; }
.ptp-body.is-out, .ptp-fone.is-out { opacity: 0; transform: translateY(6px); }
.ptp-fone { transition: opacity .13s ease, transform .13s ease; }
.ptp-isi { min-width: 0; }
.ptp-in { animation: ptpMasuk .22s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ptpMasuk { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ptpNaik { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.ptp-state { padding: 28px 16px; text-align: center; font-weight: 700; color: #64748b; background: #fff; border: 1px solid #e2e8f0; border-top: 4px solid #003366; }

/* Chip tim (lebar wadah < 760) */
.ptp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; min-width: 0; }
.ptp-chip {
  flex: 1 1 calc(50% - 8px); min-width: 0; min-height: 44px; padding: 0 10px; background: #fff; color: #0f172a;
  border: 2px solid var(--tc); border-radius: 0; font-size: 14px; font-weight: 800; cursor: pointer; overflow-wrap: anywhere;
  transition: background-color .22s ease, color .22s ease, transform .15s ease, box-shadow .22s ease;
  animation: ptpNaik .3s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.ptp-chip:active { transform: scale(.96); }
.ptp-chip.is-on { background: var(--tc); color: var(--tt); box-shadow: 0 3px 0 rgba(15, 23, 42, .18); }
.ptp-fone { min-width: 0; max-width: 420px; margin: 0 auto; }
.ptp-lap { min-width: 0; max-width: 100%; }

/* Grid 2x2 (lebar wadah >= 760) */
.ptp-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; justify-items: center; }
.ptp-sel { width: 100%; max-width: 360px; min-width: 0; animation: ptpNaik .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }

/* Daftar: kartu tim */
.ptp-dgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ptp-dgrid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ptp-kartu {
  min-width: 0; background: #fff; border: 1px solid #e2e8f0; border-top: 6px solid var(--tc, #003366); box-shadow: 0 1px 6px rgba(15, 23, 42, .05);
  animation: ptpNaik .38s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms);
}
.ptp-kartu.is-undi { animation-duration: .5s; animation-delay: calc(var(--i, 0) * 380ms); }
.ptp-kh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 12px 14px; background: var(--tc, #003366); color: var(--tt, #fff); }
.ptp-kn { min-width: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.ptp-kc { flex: none; min-width: 28px; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .28); color: inherit; font-size: 14px; font-weight: 800; transform: skewX(-8deg); }
.ptp-kartu.tim-kuning .ptp-kc { background: rgba(31, 41, 55, .14); }
.ptp-kb { padding: 6px 14px 12px; min-width: 0; }
.ptp-kosong { margin: 0; padding: 14px 0; font-size: 14px; color: #94a3b8; }
.ptp-grup { min-width: 0; margin-top: 10px; }
.ptp-gh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 2px solid var(--tc, #003366); }
.ptp-gt { min-width: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #003366; }
.ptp-gn { flex: none; min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: #003366; color: #fff; font-size: 12px; font-weight: 800; }
.ptp-gl { margin: 0; padding: 0; list-style: none; }
.ptp-p { min-width: 0; padding: 9px 0 9px 10px; border-bottom: 1px solid #f1f5f9; transition: background-color .2s ease; }
.ptp-p:last-child { border-bottom: 0; }
.ptp-p.is-me { background: #fff7ed; }
.ptp-p.is-me .ptp-pn::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 9999px; background: #f57c00; vertical-align: middle; }
.ptp-pr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ptp-pn { min-width: 0; font-weight: 800; font-size: 15px; line-height: 1.3; color: #0f172a; overflow-wrap: anywhere; }
.ptp-me { flex: none; padding: 2px 8px; background: #f57c00; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.ptp-ps { margin-top: 1px; font-size: 13px; color: #64748b; line-height: 1.4; overflow-wrap: anywhere; }
.ptp-pp { display: inline-block; max-width: 100%; margin-top: 4px; padding: 2px 8px; background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .ptp-seg, .ptp-chip, .ptp-body, .ptp-fone, .ptp-p { transition: none; }
  .ptp-in, .ptp-chip, .ptp-sel, .ptp-kartu, .ptp-kartu.is-undi { animation: none; }
  .ptp-body.is-out, .ptp-fone.is-out { opacity: 1; transform: none; }
  .ptp-seg:active, .ptp-chip:active { transform: none; }
}
@media (min-width: 480px) {
  .ptp-chip { flex: 1 1 0; }
}