:root {
		--cf-primary: #2563eb;
		--cf-primary-dark: #1d4ed8;
		--cf-cyan: #22d3ee;
		--cf-cyan-light: #67e8f9;

		--cf-navy: #071a36;
		--cf-blue-dark: #0b2a5b;
		--cf-blue: #124b91;

		--cf-bg: #eff6ff;
		--cf-text: #0f172a;
		--cf-muted: #64748b;
	}


	/* =====================================================
	   HERO
	====================================================== */

	.cf-hero {

		background:
			radial-gradient(
				circle at 85% 20%,
				rgba(34, 211, 238, .25),
				transparent 30%
			),
			radial-gradient(
				circle at 15% 90%,
				rgba(37, 99, 235, .25),
				transparent 35%
			),
			linear-gradient(
				135deg,
				#071A36 0%,
				#0B2A5B 45%,
				#124B91 72%,
				#0F172A 100%
			);

		color: white;
		position: relative;
		overflow: hidden;
		min-height: 100vh;

	}


	/* =====================================================
	   HERO DECORATIVE GLOW
	====================================================== */

	.cf-hero::after {

		content: "";

		position: absolute;

		width: 500px;
		height: 500px;

		left: -220px;
		bottom: -260px;

		border-radius: 50%;

		background: rgba(34,211,238,.10);

		filter: blur(50px);

		pointer-events: none;
		z-index: 0;

	}


	/* =====================================================
	   TENNIS COURT LINE
	====================================================== */

	.cf-hero::before {

		content: "";

		position: absolute;

		width: 700px;
		height: 700px;

		right: -180px;
		top: -80px;

		border: 2px solid rgba(255,255,255,.10);

		transform:
			perspective(700px)
			rotateX(55deg)
			rotateZ(-12deg);

		box-shadow:
			0 0 0 70px rgba(255,255,255,.025),
			0 0 0 140px rgba(255,255,255,.018);

	}


	/* =====================================================
	   HERO DECORATIVE TENNIS PLAYER
	====================================================== */

	.cf-player-silhouette {

		position: absolute;

		right: 3%;
		bottom: -20px;

		width: 430px;
		height: 520px;

		opacity: .11;

		z-index: 1;
		pointer-events: none;

		animation:
			cf-player-float 7s ease-in-out infinite;

	}


	@keyframes cf-player-float {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10px);
		}

	}


	/* kepala */

	.cf-player-silhouette::before {

		content: "";

		position: absolute;

		width: 90px;
		height: 90px;

		border-radius: 50%;

		background: #ffffff;

		top: 30px;
		left: 170px;

	}


	/* badan + kaki */

	.cf-player-silhouette::after {

		content: "";

		position: absolute;

		width: 125px;
		height: 360px;

		background: #ffffff;

		top: 105px;
		left: 155px;

		border-radius: 45% 45% 20% 20%;

		transform: rotate(8deg);

		box-shadow:
			-90px 250px 0 -45px #ffffff,
			90px 255px 0 -45px #ffffff;

	}


	/* =====================================================
	   RACKET
	====================================================== */

	.cf-racket {

		position: absolute;

		width: 145px;
		height: 185px;

		right: 18%;
		top: 18%;

		border: 7px solid rgba(255,255,255,.18);

		border-radius: 50%;

		transform: rotate(-32deg);

		z-index: 1;
		pointer-events: none;

		animation:
			cf-racket-float 8s ease-in-out infinite;

		transform-origin: center bottom;

	}


	@keyframes cf-racket-float {

		0%,
		100% {
			transform:
				rotate(-32deg)
				translateY(0);
		}

		50% {
			transform:
				rotate(-25deg)
				translateY(-14px);
		}

	}


	.cf-racket::after {

		content: "";

		position: absolute;

		width: 9px;
		height: 115px;

		background: rgba(255,255,255,.18);

		left: 61px;
		bottom: -90px;

		transform: rotate(3deg);

		border-radius: 10px;

	}


	/* =====================================================
	   RACKET STRING
	====================================================== */

	.cf-racket::before {

		content: "";

		position: absolute;

		inset: 15px;

		border: 1px solid rgba(255,255,255,.10);

		border-radius: 50%;

		box-shadow:
			inset 0 0 0 1px rgba(255,255,255,.04);

	}


	/* =====================================================
	   FLOATING TENNIS BALL
	====================================================== */

	.cf-floating-ball {

		position: absolute;

		width: 22px;
		height: 22px;

		border-radius: 50%;

		background: #67e8f9;

		box-shadow:
			0 0 25px rgba(34,211,238,.35);

		right: 31%;
		top: 26%;

		opacity: .45;

		z-index: 2;

		animation:
			cf-ball-float 4s ease-in-out infinite;

	}


	@keyframes cf-ball-float {

		0%,
		100% {
			transform:
				translateY(0)
				rotate(0deg);
		}

		50% {
			transform:
				translateY(-18px)
				rotate(180deg);
		}

	}


	/* =====================================================
	   EXTRA FLOATING BALL
	====================================================== */

	.cf-hero-ball-2 {

		position: absolute;

		width: 11px;
		height: 11px;

		border-radius: 50%;

		background: #67e8f9;

		box-shadow:
			0 0 18px rgba(34,211,238,.45);

		right: 42%;
		top: 58%;

		opacity: .35;

		z-index: 1;
		pointer-events: none;

		animation:
			cf-ball-orbit-2 6s ease-in-out infinite;

	}


	@keyframes cf-ball-orbit-2 {

		0%,
		100% {
			transform:
				translate(0,0)
				scale(1);
		}

		25% {
			transform:
				translate(25px,-20px)
				scale(1.15);
		}

		50% {
			transform:
				translate(50px,0)
				scale(.9);
		}

		75% {
			transform:
				translate(25px,20px)
				scale(1.1);
		}

	}


	/* =====================================================
	   EXTRA FLOATING BALL 3
	====================================================== */

	.cf-hero-ball-3 {

		position: absolute;

		width: 7px;
		height: 7px;

		border-radius: 50%;

		background: #67e8f9;

		box-shadow:
			0 0 15px rgba(103,232,249,.5);

		left: 48%;
		top: 18%;

		opacity: .45;

		z-index: 1;
		pointer-events: none;

		animation:
			cf-ball-orbit-3 7s ease-in-out infinite;

	}


	@keyframes cf-ball-orbit-3 {

		0%,
		100% {
			transform: translate(0,0);
		}

		50% {
			transform: translate(-35px,45px);
		}

	}


	/* =====================================================
	   HERO COURT HORIZONTAL LINE
	====================================================== */

	.cf-hero-court-line {

		position: absolute;

		right: -80px;
		bottom: 80px;

		width: 620px;
		height: 160px;

		border: 2px solid rgba(255,255,255,.08);

		transform: rotate(-9deg);

		z-index: 0;
		pointer-events: none;

		animation:
			cf-court-float 12s ease-in-out infinite;

	}


	@keyframes cf-court-float {

		0%,
		100% {
			transform:
				rotate(-9deg)
				translateY(0);
		}

		50% {
			transform:
				rotate(-8deg)
				translateY(-8px);
		}

	}


	.cf-hero-court-line::before {

		content: "";

		position: absolute;

		left: 50%;
		top: 0;
		bottom: 0;

		border-left: 2px solid rgba(255,255,255,.06);

	}


	.cf-hero-court-line::after {

		content: "";

		position: absolute;

		left: 15%;
		right: 15%;
		top: 50%;

		border-top: 2px solid rgba(255,255,255,.06);

	}


	/* =====================================================
	   BALL DECORATION HERO
	====================================================== */

	.cf-ball {

		position: absolute;

		width: 170px;
		height: 170px;

		border-radius: 50%;

		right: 12%;
		top: 20%;

		background: #67e8f9;

		opacity: .08;

		box-shadow:
			0 0 80px rgba(34,211,238,.20);

		animation:
			cf-big-ball-float 10s ease-in-out infinite;

		z-index: 0;

	}


	@keyframes cf-big-ball-float {

		0%,
		100% {
			transform:
				translateY(0)
				rotate(0deg);
		}

		50% {
			transform:
				translateY(-20px)
				rotate(8deg);
		}

	}


	.cf-ball::before,
	.cf-ball::after {

		content: "";

		position: absolute;

		width: 130px;
		height: 70px;

		border: 3px solid rgba(255,255,255,.5);

		border-radius: 50%;

	}


	.cf-ball::before {

		left: 15px;
		top: 48px;

		transform: rotate(35deg);

	}


	.cf-ball::after {

		left: 28px;
		top: 40px;

		transform: rotate(-35deg);

	}


	/* =====================================================
	   HERO INNER
	====================================================== */

	.cf-hero-inner {

		width: 100%;
		max-width: 1150px;

		margin: auto;

		padding: 30px 25px 40px;

		position: relative;
		z-index: 3;

	}


	.cf-badge {

		display: inline-flex;

		align-items: center;
		gap: 8px;

		padding: 8px 13px;

		border-radius: 30px;

		background: rgba(34,211,238,.10);

		border: 1px solid rgba(103,232,249,.20);

		color: #67e8f9;

		font-size: 12px;
		font-weight: 800;

		letter-spacing: .5px;

		margin-bottom: 22px;

	}


	.cf-badge-dot {

		width: 7px;
		height: 7px;

		border-radius: 50%;

		background: #22d3ee;

		box-shadow:
			0 0 10px #22d3ee;

	}


	/* =====================================================
	   HERO TITLE
	====================================================== */

	.cf-hero h1 {

		max-width: 780px;

		margin: 0 0 22px;

		font-size: clamp(42px, 7vw, 76px);

		line-height: 1.02;

		font-weight: 850;

		letter-spacing: -3px;

	}


	.cf-hero h1 span {
		color: #22d3ee;
	}


	.cf-hero-description {

		max-width: 650px;

		margin: 0 0 32px;

		color: #cbd5e1;

		font-size: 18px;
		line-height: 1.7;

	}


	/* =====================================================
	   BUTTON
	====================================================== */

	.cf-hero-buttons {

		display: flex;

		gap: 12px;

		flex-wrap: wrap;

	}


	.cf-btn-primary {

		display: inline-flex;

		align-items: center;

		padding: 13px 20px;

		border-radius: 11px;

		background: #2563eb;

		color: white;

		font-weight: 750;

		text-decoration: none;

		box-shadow:
			0 8px 25px rgba(37,99,235,.25);

		transition: .2s;

	}


	.cf-btn-primary:hover {

		color: white;

		background: #1d4ed8;

		transform: translateY(-2px);

	}


	.cf-btn-secondary {

		display: inline-flex;

		align-items: center;

		padding: 13px 20px;

		border-radius: 11px;

		border: 1px solid rgba(255,255,255,.16);

		background: rgba(255,255,255,.06);

		color: white;

		font-weight: 650;

		text-decoration: none;

		backdrop-filter: blur(8px);

	}


	.cf-btn-secondary:hover {

		color: white;

		background: rgba(255,255,255,.11);

	}


	/* =====================================================
	   HERO STATS
	====================================================== */

	.cf-hero-stats {

		display: flex;

		gap: 35px;

		margin-top: 48px;

		flex-wrap: wrap;

	}


	.cf-hero-stat {

		padding-left: 15px;

		border-left: 2px solid rgba(34,211,238,.45);

	}


	.cf-hero-stat strong {

		display: block;

		font-size: 18px;

		color: white;

	}


	.cf-hero-stat span {

		display: block;

		margin-top: 3px;

		font-size: 12px;

		color: #94a3b8;

	}


	/* =====================================================
	   CONTENT BACKGROUND
	====================================================== */

	.cf-main {

		position: relative;

		padding: 70px 20px;

		background:

			radial-gradient(
				circle at 8% 12%,
				rgba(37,99,235,.14),
				transparent 24%
			),

			radial-gradient(
				circle at 92% 30%,
				rgba(34,211,238,.12),
				transparent 27%
			),

			radial-gradient(
				circle at 20% 88%,
				rgba(59,130,246,.09),
				transparent 25%
			),

			radial-gradient(
				circle at 80% 90%,
				rgba(14,165,233,.08),
				transparent 30%
			),

			linear-gradient(
				135deg,
				#edf5ff 0%,
				#e7f1fd 45%,
				#f1f7ff 100%
			);

		overflow: hidden;

	}


	/* =====================================================
	   SOFT BLUE LIGHT
	====================================================== */

	.cf-main-glow {

		position: absolute;

		width: 420px;
		height: 420px;

		border-radius: 50%;

		background: rgba(37,99,235,.08);

		filter: blur(80px);

		left: -180px;
		top: 28%;

		pointer-events: none;

		animation:
			cf-main-glow-float 14s ease-in-out infinite;

		z-index: 0;

	}


	@keyframes cf-main-glow-float {

		0%,
		100% {
			transform: translate(0,0);
		}

		50% {
			transform: translate(50px,-30px);
		}

	}


	/* =====================================================
	   COURT PATTERN
	====================================================== */

	.cf-court-pattern {

		position: absolute;

		width: 650px;
		height: 350px;

		right: -230px;
		top: 80px;

		border: 2px solid rgba(37,99,235,.12);

		transform: rotate(-12deg);

		pointer-events: none;

		animation:
			cf-main-court-float 14s ease-in-out infinite;

		z-index: 0;

	}


	@keyframes cf-main-court-float {

		0%,
		100% {
			transform:
				rotate(-12deg)
				translateY(0);
		}

		50% {
			transform:
				rotate(-10deg)
				translateY(-12px);
		}

	}


	.cf-court-pattern::before {

		content: "";

		position: absolute;

		left: 50%;
		top: 0;
		bottom: 0;

		border-left:
			2px solid rgba(37,99,235,.08);

	}


	.cf-court-pattern::after {

		content: "";

		position: absolute;

		left: 15%;
		right: 15%;
		top: 50%;

		border-top:
			2px solid rgba(37,99,235,.08);

	}


	/* =====================================================
	   SECOND COURT PATTERN
	====================================================== */

	.cf-court-pattern-2 {

		position: absolute;

		width: 500px;
		height: 270px;

		left: -260px;
		bottom: 230px;

		border:
			2px solid rgba(37,99,235,.07);

		transform: rotate(13deg);

		pointer-events: none;

		animation:
			cf-main-court-2 18s ease-in-out infinite;

		z-index: 0;

	}


	@keyframes cf-main-court-2 {

		0%,
		100% {
			transform:
				rotate(13deg)
				translateY(0);
		}

		50% {
			transform:
				rotate(11deg)
				translateY(18px);
		}

	}


	.cf-court-pattern-2::before {

		content: "";

		position: absolute;

		left: 50%;
		top: 0;
		bottom: 0;

		border-left:
			2px solid rgba(37,99,235,.055);

	}


	.cf-court-pattern-2::after {

		content: "";

		position: absolute;

		left: 15%;
		right: 15%;
		top: 50%;

		border-top:
			2px solid rgba(37,99,235,.055);

	}


	/* =====================================================
	   MAIN DECORATIVE BALLS
	====================================================== */

	.cf-main::before {

		content: "";

		position: absolute;

		width: 210px;
		height: 210px;

		border-radius: 50%;

		border:
			3px solid rgba(37,99,235,.08);

		left: -95px;
		top: 190px;

		transform: rotate(25deg);

		pointer-events: none;

		animation:
			cf-main-ball-float 11s ease-in-out infinite;

		z-index: 0;

	}


	@keyframes cf-main-ball-float {

		0%,
		100% {
			transform:
				translateY(0)
				rotate(25deg);
		}

		50% {
			transform:
				translateY(-20px)
				rotate(35deg);
		}

	}


	.cf-main::after {

		content: "";

		position: absolute;

		width: 300px;
		height: 300px;

		border-radius: 50%;

		border:
			2px solid rgba(37,99,235,.06);

		right: -140px;
		bottom: 120px;

		pointer-events: none;

		animation:
			cf-main-ball-large 15s ease-in-out infinite;

		z-index: 0;

	}


	@keyframes cf-main-ball-large {

		0%,
		100% {
			transform:
				translateY(0)
				rotate(0deg);
		}

		50% {
			transform:
				translateY(-25px)
				rotate(10deg);
		}

	}


	/* =====================================================
	   FLOATING BALLS DI MAIN
	====================================================== */

	.cf-main-ball {

		position: absolute;

		border-radius: 50%;

		background: #2563eb;

		pointer-events: none;

		z-index: 1;

	}


	.cf-main-ball-1 {

		width: 16px;
		height: 16px;

		left: 7%;
		top: 32%;

		opacity: .18;

		box-shadow:
			0 0 18px rgba(37,99,235,.22);

		animation:
			cf-main-ball-1 8s ease-in-out infinite;

	}


	@keyframes cf-main-ball-1 {

		0%,
		100% {
			transform:
				translate(0,0)
				rotate(0);
		}

		50% {
			transform:
				translate(35px,-40px)
				rotate(180deg);
		}

	}


	.cf-main-ball-2 {

		width: 11px;
		height: 11px;

		right: 8%;
		top: 48%;

		opacity: .16;

		box-shadow:
			0 0 15px rgba(37,99,235,.22);

		animation:
			cf-main-ball-2 10s ease-in-out infinite;

	}


	@keyframes cf-main-ball-2 {

		0%,
		100% {
			transform:
				translate(0,0);
		}

		50% {
			transform:
				translate(-40px,25px);
		}

	}


	.cf-main-ball-3 {

		width: 8px;
		height: 8px;

		left: 42%;
		top: 18%;

		opacity: .16;

		background: #22d3ee;

		box-shadow:
			0 0 14px rgba(34,211,238,.28);

		animation:
			cf-main-ball-3 12s ease-in-out infinite;

	}


	@keyframes cf-main-ball-3 {

		0%,
		100% {
			transform:
				translate(0,0);
		}

		50% {
			transform:
				translate(50px,30px);
		}

	}


	.cf-main-ball-4 {

		width: 12px;
		height: 12px;

		right: 28%;
		bottom: 18%;

		opacity: .15;

		background: #0ea5e9;

		box-shadow:
			0 0 18px rgba(14,165,233,.22);

		animation:
			cf-main-ball-4 9s ease-in-out infinite;

	}


	@keyframes cf-main-ball-4 {

		0%,
		100% {
			transform:
				translate(0,0);
		}

		50% {
			transform:
				translate(-25px,-35px);
		}

	}


	/* =====================================================
	   SECTION
	====================================================== */

	.cf-section {

		max-width: 1100px;

		margin: auto;

		padding: 55px 20px 0;

		position: relative;

		z-index: 2;

	}


	/* =====================================================
	   SECTION TITLE
	====================================================== */

	.cf-section-title {

		display: flex;

		justify-content: space-between;

		align-items: center;

		margin-bottom: 22px;

	}


	.cf-live-card + .cf-section-title {

		margin-top: 42px;

	}


	.cf-section-title h2 {

		margin: 0;

		font-size: 27px;

		font-weight: 800;

		letter-spacing: -.7px;

	}


	.cf-section-title p {

		margin: 5px 0 0;

		color: #64748b;

		font-size: 14px;

	}


	.cf-section-link {

		color: #2563eb;

		text-decoration: none;

		font-size: 13px;

		font-weight: 700;

	}


	/* =====================================================
	   LIVE CARD
	====================================================== */

	.cf-live-card {

		background: rgba(255,255,255,.82);

		backdrop-filter: blur(16px);

		-webkit-backdrop-filter: blur(16px);

		border: 1px solid rgba(255,255,255,.70);

		border-radius: 18px;

		padding: 22px;

		box-shadow:
			0 15px 40px rgba(15,23,42,.06);

		position: relative;

		z-index: 2;

	}


	.cf-live-header {

		display: flex;

		justify-content: space-between;

		gap: 20px;

		align-items: center;

		margin-bottom: 10px;

	}


	.cf-live-event {

		font-size: 17px;
		font-weight: 800;

	}


	.cf-live-location {

		margin-top: 4px;

		font-size: 13px;

		color: #64748b;

	}


	.cf-live-badge {

		display: inline-flex;

		align-items: center;

		gap: 6px;

		color: #dc2626;

		font-size: 12px;

		font-weight: 800;

	}


    .cf-live-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ef4444;
        animation: cf-pulse 1.3s infinite;
        margin-right: 5px;
    }


	@keyframes cf-pulse {

		0% {
			opacity: 1;
			transform: scale(1);
		}

		50% {
			opacity: .35;
			transform: scale(.8);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}

	}


	/* =====================================================
	   MATCH
	====================================================== */

	.cf-match {

		display: grid;

		grid-template-columns: 1fr auto;

		gap: 25px;

		padding: 18px 0;

		border-top: 1px solid #dbeafe;

	}


	.cf-match:first-child {

		border-top: 0;

	}


/* =====================================================
   KATEGORI & JADWAL - DEFAULT
====================================================== */

.cf-match-category {
    margin-bottom: 10px;
}

.cf-match-schedule-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.cf-match-schedule-toggle .cf-toggle-icon {
    font-size: 14px;
    line-height: 1;
}

.cf-match-schedule-content {
    display: block;
}

/* =====================================================
   INFORMASI PERTANDINGAN
====================================================== */

.cf-match-info-toggle {
    display: none;
}

.cf-match-info-content {
    display: block;
}

.cf-info-toggle-icon {
    font-size: 12px;
    line-height: 1;
}

.cf-match-info-content {
    display: block;
}

	.cf-player {

		display: flex;

		justify-content: space-between;

		gap: 20px;

		padding: 5px 0;

		font-weight: 700;

	}


	.cf-score {

		min-width: 30px;

		text-align: center;

		font-weight: 850;

	}


	.cf-match-status {

		display: flex;

		align-items: center;

		font-size: 12px;

		font-weight: 750;

		color: #2563eb;

		white-space: nowrap;

	}


	/* =====================================================
	   STATUS
	====================================================== */

	.cf-status-live {
		color: #dc2626;
	}


	.cf-status-next {
		color: #2563eb;
	}


	.cf-status-finished {
		color: #2563eb;
	}


	/* =====================================================
	   DAY HEADER
	====================================================== */

	.cf-day-header {

		display: flex;

		align-items: center;

		justify-content: space-between;

		gap: 15px;

		margin-bottom: 5px;

	}


	.cf-day-title {

		font-size: 15px;

		font-weight: 800;

		color: #0f172a;

	}


	.cf-day-date {

		font-size: 12px;

		color: #64748b;

	}


     /* =====================================================
       NAMA PEMAIN
       ====================================================== */

    .cf-public-player-name {
        font-size: 13px !important;
        line-height: 1 !important;

        font-weight: 600 !important;
    }


    /* =====================================================
       S / G / P — ANGKA SCORE
       ====================================================== */

    .cf-score-server,
    .cf-score-player,
    .cf-score-set,
    .cf-score-game,
    .cf-score-point {
        font-size: 13px !important;
        line-height: 1 !important;

        font-weight: 600 !important;
    }

.cf-score-header .cf-score-player {
    padding-left: 10px;
    padding-right: 6px;
    text-align: left;
}

.cf-score-player {
    padding-left: 10px;
    padding-right: 6px;
    text-align: left;
}

	/* =====================================================
	   TOURNAMENT FLOW
	====================================================== */

	.cf-flow {

		margin-top: 5px;

	}


	.cf-flow-day {

		position: relative;

		padding: 20px 0;

	}


	.cf-flow-day + .cf-flow-day {

		border-top: 1px solid #dbeafe;

	}


	.cf-flow-match {

		display: grid;

		grid-template-columns: 90px 1fr auto;

		gap: 15px;

		align-items: center;

		padding: 13px 0;

		border-top: 1px dashed #dbeafe;

	}


	.cf-flow-match:first-child {

		border-top: 0;

	}


	.cf-flow-court {

		font-size: 12px;

		font-weight: 800;

		color: #2563eb;

	}


	.cf-flow-players {

		font-size: 13px;

		font-weight: 700;

	}


	.cf-flow-result {

		font-size: 12px;

		font-weight: 750;

		text-align: right;

		white-space: nowrap;

	}


	.cf-flow-result small {

		display: block;

		margin-top: 2px;

		font-size: 11px;

		font-weight: 600;

		color: #64748b;

	}


	/* =====================================================
	   FEATURES
	====================================================== */

	.cf-features {

		display: grid;

		grid-template-columns:
			repeat(3,1fr);

		gap: 18px;

		margin-top: 60px;

		position: relative;

		z-index: 2;

	}


	.cf-feature {

		position: relative;

		overflow: hidden;

		padding: 25px;

		border-radius: 17px;

		background: rgba(255,255,255,.9);

		border:
			1px solid rgba(15,23,42,.07);

		box-shadow:
			0 8px 25px rgba(15,23,42,.04);

	}


	.cf-feature::after {

		content: "";

		position: absolute;

		width: 90px;
		height: 90px;

		border:
			1px solid rgba(37,99,235,.12);

		border-radius: 50%;

		right: -35px;
		bottom: -35px;

	}


	.cf-feature-icon {

		width: 45px;
		height: 45px;

		display: flex;

		align-items: center;
		justify-content: center;

		margin-bottom: 17px;

		border-radius: 12px;

		background: #dbeafe;

		color: #2563eb;

		font-size: 21px;

	}


	.cf-feature h3 {

		margin: 0 0 7px;

		font-size: 16px;

		font-weight: 800;

	}


	.cf-feature p {

		margin: 0;

		color: #64748b;

		font-size: 13px;

		line-height: 1.65;

	}


	/* =====================================================
	   COURTFLOW TAGLINE
	====================================================== */

	.cf-brand-message {

		text-align: center;

		margin: 85px auto 0;

		max-width: 720px;

	}


	.cf-brand-message-label {

		margin-bottom: 12px;

		font-size: 12px;

		font-weight: 800;

		letter-spacing: 2px;

		color: #2563eb;

	}


	.cf-brand-message h2 {

		margin: 0;

		font-size: clamp(27px, 4vw, 40px);

		line-height: 1.2;

		font-weight: 800;

		letter-spacing: -1px;

		color: #0f172a;

	}


	.cf-brand-message h2 strong {

		color: #2563eb;

	}


	.cf-brand-message p {

		margin: 14px auto 0;

		max-width: 560px;

		font-size: 14px;

		line-height: 1.7;

		color: #64748b;

	}


	/* =====================================================
	   REDUCED MOTION
	====================================================== */

	@media (prefers-reduced-motion: reduce) {

		.cf-player-silhouette,
		.cf-racket,
		.cf-floating-ball,
		.cf-ball,
		.cf-hero-ball-2,
		.cf-hero-ball-3,
		.cf-hero-court-line,
		.cf-court-pattern,
		.cf-court-pattern-2,
		.cf-main::before,
		.cf-main::after,
		.cf-main-glow,
		.cf-main-ball-1,
		.cf-main-ball-2,
		.cf-main-ball-3,
		.cf-main-ball-4 {

			animation: none !important;

		}

	}


	/* =====================================================
	   RESPONSIVE
	====================================================== */

	@media (max-width: 768px) {

		.cf-hero {
			min-height: 0;
		}


		.cf-hero-inner {

			padding:
				28px 20px 35px;
			
			padding-top: 150px !important;

		}


		.cf-hero h1 {

			font-size:
				clamp(42px, 12vw, 60px);

			letter-spacing:
				-2px;

		}


		.cf-hero-description {

			font-size:
				16px;

		}


		.cf-ball {

			width:
				130px;

			height:
				130px;

			right:
				-30px;

			top:
				15%;

		}


		.cf-hero-stats {

			gap:
				20px;

		}


		.cf-features {

			grid-template-columns:
				1fr;

		}


		.cf-player-silhouette {

			right:
				-150px;

			bottom:
				-20px;

			transform:
				scale(.85);

			opacity:
				.07;

		}


		.cf-racket {

			right:
				-20px;

			top:
				20%;

			transform:
				rotate(-32deg)
				scale(.75);

			opacity:
				.08;

		}


		.cf-floating-ball {

			right:
				18%;

			top:
				24%;

		}


		.cf-hero-court-line {

			right:
				-300px;

			bottom:
				40px;

			opacity:
				.6;

		}


		.cf-flow-match {

			grid-template-columns:
				75px 1fr;

			gap:
				10px;

		}


		.cf-flow-result {

			grid-column:
				2;

			text-align:
				left;

		}


		.cf-hero-ball-2 {

			right:
				35%;

			top:
				60%;

			opacity:
				.22;

		}


		.cf-hero-ball-3 {

			left:
				65%;

			top:
				15%;

			opacity:
				.25;

		}


		/* dekorasi main diperkecil */

		.cf-court-pattern {

			right:
				-330px;

			top:
				100px;

			opacity:
				.65;

		}


		.cf-court-pattern-2 {

			left:
				-350px;

			bottom:
				180px;

			opacity:
				.55;

		}


		.cf-main-glow {

			width:
				300px;

			height:
				300px;

			left:
				-170px;

		}


		.cf-main-ball-3,
		.cf-main-ball-4 {

			opacity:
				.10;

		}

	}

    .cf-match-score-status {
        width: 100%;
        min-height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7px 8px;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
        box-sizing: border-box;
    
        font-size: 11px;
        font-weight: 600;
        color: #dc2626;
        letter-spacing: .2px;
    }

	@media (max-width: 576px) {
    
        .cf-match-score-status {
            min-height: 30px;
            padding: 6px;
            font-size: 9px;
        }
        
		.cf-hero {

			min-height:
				0;

		}


		.cf-hero-inner {

			padding:
				25px 20px 32px;
			
			padding-top: 135px !important;

		}


		.cf-live-card {

			padding:
				17px;

		}

        /* =====================================================
           EVENT CARD — FULL BLEED MOBILE
           ====================================================== */
    
        .cf-live-card.cf-schedule-card {
            width: 99vw;
            max-width: 99vw;
    
            /*
             * Keluar dari padding .cf-main dan .cf-section
             * sehingga card benar-benar selebar layar.
             */
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
    
            border-radius: 8px;
        }
    
    
        /* =====================================================
           SCOREBOARD — LEBIH LEBAR & FONT LEBIH KECIL
           ===================================================== */
    
        .cf-match-scoreboard {
            /*
             * .cf-live-card masih punya padding 17px.
             * Tarik scoreboard sedikit keluar supaya lebih lebar.
             */
            width: calc(100% + 24px);
    
            margin-left: -12px;
            margin-right: -12px;
    
            margin-top: 10px;
            margin-bottom: 12px;
    
            border-radius: 6px;
        }
    
        /* =====================================================
           HEADER
           ===================================================== */
    
        .cf-score-header {
            min-height: 24px;
    
            font-size: 7px !important;
            line-height: 1 !important;
    
            letter-spacing: 0 !important;
            font-weight: 600 !important;
        }
    
         /* =====================================================
           NAMA PEMAIN
           ====================================================== */
    
        .cf-public-player-name {
            font-size: 10px !important;
            line-height: 1 !important;
    
            font-weight: 600 !important;
        }
    
    
        /* =====================================================
           S / G / P — ANGKA SCORE
           ====================================================== */
    
        .cf-score-server,
        .cf-score-player,
        .cf-score-set,
        .cf-score-game,
        .cf-score-point {
            font-size: 11px !important;
            line-height: 1 !important;
    
            font-weight: 600 !important;
        }


		.cf-live-header {

			align-items:
				flex-start;

		}


		.cf-match {

			grid-template-columns:
				1fr;

			gap:
				8px;

		}


		.cf-match-status {

			justify-content:
				flex-start;

		}


		.cf-section-title {

			align-items:
				flex-end;

		}


		.cf-section-title h2 {

			font-size:
				23px;

		}


		.cf-hero-buttons {

			flex-direction:
				column;

			width:
				100%;

		}


		.cf-hero-buttons a {

			width:
				100%;

			justify-content:
				center;

		}


		.cf-day-header {

			align-items:
				flex-start;

			flex-direction:
				column;

		}


		/* =================================================
		   MOBILE MAIN BACKGROUND
		================================================== */

		.cf-main {

			padding:
				45px 15px;

			background:

				radial-gradient(
					circle at 0% 10%,
					rgba(37,99,235,.11),
					transparent 32%
				),

				radial-gradient(
					circle at 100% 70%,
					rgba(34,211,238,.09),
					transparent 32%
				),

				#eaf3fd;

		}


		.cf-court-pattern {

			right:
				-390px;

			top:
				80px;

		}


		.cf-court-pattern-2 {

			left:
				-390px;

			bottom:
				180px;

		}


		.cf-main-ball-1 {

			left:
				4%;

			opacity:
				.14;

		}


		.cf-main-ball-2 {

			right:
				4%;

			opacity:
				.13;

		}


		.cf-main-ball-3,
		.cf-main-ball-4 {

			display:
				none;

		}

    
        /* Kategori tepat di bawah LIVE */
        .cf-match-category {
            order: 1;
            margin-bottom: 8px;

            order: 2 !important;
        }
    
        .cf-match-info {
            order: 3 !important;
        }  

        /* Jadwal di bawah kategori */
        .cf-match-schedule {
            order: 2;
            margin-bottom: 10px;
        }
    
        /* Scoreboard setelah jadwal */
        .cf-match-scoreboard {
            order: 3;
        }
    
        /* Jadwal default tertutup */
        .cf-match-schedule-content {
            display: none;
        }
    
        /* Baris tombol Jadwal */
        .cf-match-schedule-toggle {
            min-height: 32px;
            padding: 7px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
        }
    
        .cf-match-schedule-toggle .cf-toggle-icon {
            font-size: 12px;
        }
    
        /* Saat dibuka */
        .cf-match-schedule.is-open .cf-match-schedule-content {
            display: block;
        }


        /* Header toggle */
        .cf-match-info-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            min-height: 32px;
            padding: 7px 10px;
            border-radius: 6px;
        }
    
        .cf-match-info-toggle > span:first-child {
            display: flex;
            align-items: center;
            gap: 8px;
        }
    
        .cf-match-info-toggle strong {
            font-size: 11px;
        }
    
        .cf-match-info-toggle i {
            font-size: 12px;
        }
    
        .cf-info-toggle-icon {
            font-size: 11px;
            line-height: 1;
        }
    
        /* HP: default tertutup */
        .cf-match-info-content {
            display: none;
        }
    
        /* HP: saat dibuka */
        .cf-match-info.is-open .cf-match-info-content {
            display: block;
        }
    
        .cf-match-info-toggle strong {
            font-size: 11px;
        }
    
        .cf-match-info-toggle i {
            font-size: 12px;
        }
    
        .cf-info-toggle-icon {
            font-size: 11px;
        }
    
        /* DEFAULT: seluruh informasi disembunyikan */
        .cf-match-info-content {
            display: none;
        }
    
        /* Saat dibuka */
        .cf-match-info.is-open .cf-match-info-content {
            display: block;
        }
    
        .cf-match-info-item {
            padding-top: 6px;
            padding-bottom: 6px;
        }
    
        .cf-match-info-item strong {
            font-size: 10px;
        }
    
        .cf-match-info-item small {
            font-size: 10px;
        }
	}

/* =========================================================
   COURTFLOW LOGO TAB
   Logo berada di tengah atas seperti tab yang menjepit halaman
========================================================= */

.cf-brand {
    position: fixed;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 180px;
    height: 92px;

    z-index: 200;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 0 18px 10px;

    background: #ffffff;

    border-radius:
        0 0 22px 22px;

    box-shadow:
        0 12px 35px rgba(7, 26, 54, .18);

    border-left:
        1px solid rgba(37, 99, 235, .08);

    border-right:
        1px solid rgba(37, 99, 235, .08);

    border-bottom:
        1px solid rgba(37, 99, 235, .12);
}


/* =========================================================
   LOGO
========================================================= */

.cf-logo-link {

    width: 100%;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-decoration: none;
}


.cf-logo {

    width: 145px;
    height: 68px;

    object-fit: contain;

    display: block;

    filter: none;
}


/* =========================================================
   DECORATIVE BLUE TAB ACCENT
========================================================= */

.cf-brand::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 82px;
    height: 4px;

    border-radius:
        0 0 8px 8px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #22d3ee
        );
}


/* =========================================================
   FLOATING NAVIGATION
   STICKY DI KANAN
========================================================= */

.cf-floating-nav {

    position: fixed;

    right: 18px;
    left: auto;

    top: 20px;

    transform: none;

    z-index: 9999;

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 9px;
}


/* =========================================================
   NAV ITEM
========================================================= */

.cf-floating-nav-item {

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;

    position: relative;

    overflow: hidden;

    border-radius: 24px;

    text-decoration: none;

    color: #ffffff;

    background:
        rgba(7, 26, 54, .78);

    border:
        1px solid rgba(103, 232, 249, .28);

    box-shadow:
        0 8px 25px rgba(7, 26, 54, .20);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

	transition:
		width .5s cubic-bezier(.22, 1, .36, 1),
		background .4s ease,
		border-color .4s ease,
		box-shadow .4s ease;
}


/* =========================================================
   ICON
========================================================= */

.cf-floating-nav-icon {

    flex:
        0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 17px;

    color: #67e8f9;

    transition:
        color .20s ease;
}


/* =========================================================
   LABEL
========================================================= */

.cf-floating-nav-label {

    white-space: nowrap;

    opacity: 0;

    transform: translateX(12px);

    font-size: 14px;

    font-weight: 650;

    padding-left: 2px;
    padding-right: 18px;

    transition:
        opacity .35s ease .08s,
        transform .45s cubic-bezier(.22, 1, .36, 1) .03s;
}


/* =========================================================
   HOVER
   MELEBAR KE KIRI
========================================================= */

.cf-floating-nav-item:hover {

    width: 160px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0891b2
        );

    border-color:
        rgba(103, 232, 249, .55);

    box-shadow:
        0 12px 30px
        rgba(37, 99, 235, .35);

    text-decoration: none;
}


.cf-floating-nav-item:hover
.cf-floating-nav-label {

    opacity: 1;

    transform:
        translateX(0);
}


.cf-floating-nav-item:hover
.cf-floating-nav-icon {

    color: #ffffff;
}


/* =========================================================
   ACTIVE
========================================================= */

.cf-floating-nav-item.active {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0891b2
        );

    border-color:
        rgba(103, 232, 249, .50);

    box-shadow:
        0 10px 28px
        rgba(37, 99, 235, .28);
}


.cf-floating-nav-item.active
.cf-floating-nav-icon {

    color: #ffffff;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {


    .cf-floating-nav {

        position: fixed !important;

        top: 30px !important;
        bottom: auto !important;

        right: 18px !important;
        left: auto !important;

        transform: none !important;

        z-index: 9999;
    }


    .cf-floating-nav-item {

        width: 44px;
        height: 44px;

        border-radius: 22px;
    }


    .cf-floating-nav-icon {

        flex:
            0 0 44px;

        width: 44px;
        height: 44px;

        font-size: 16px;
    }


    .cf-floating-nav-item:hover {

        width: 145px;
    }


    .cf-floating-nav-label {

        font-size: 13px;

        padding-right: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .cf-floating-nav {

        top: 20px !important;

        right: 8px !important;
        left: auto !important;

        transform: none !important;
    }

    .cf-floating-nav-item {

        width: 40px;
        height: 40px;

        border-radius: 20px;
    }


    .cf-floating-nav-icon {

        flex:
            0 0 40px;

        width: 40px;
        height: 40px;

        font-size: 14px;
    }


    .cf-floating-nav-item:hover {

        width: 135px;
    }


    .cf-floating-nav-label {

        font-size: 12px;

        padding-right: 12px;
    }

}

/* =========================================================
   DATE NAVIGATION
========================================================= */

.cf-date-nav {

    display: flex;

    gap: 10px;

    margin:
        0 0 30px;

    padding:
        4px 2px 12px;

    overflow-x: auto;

    scrollbar-width: thin;

    scroll-behavior: smooth;
}


.cf-date-nav::-webkit-scrollbar {

    height: 4px;
}


.cf-date-item {

    flex:
        0 0 auto;

    min-width: 76px;

    padding:
        10px 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    border-radius: 14px;

    text-decoration: none;

    color: #64748b;

    background:
        rgba(255, 255, 255, .75);

    border:
        1px solid rgba(37, 99, 235, .10);

    box-shadow:
        0 4px 15px
        rgba(15, 23, 42, .05);

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.cf-date-item:hover {

    transform:
        translateY(-2px);

    color: #2563eb;

    border-color:
        rgba(37, 99, 235, .30);

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, .10);

    text-decoration: none;
}


.cf-date-item.active {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0891b2
        );

    border-color:
        transparent;

    box-shadow:
        0 8px 22px
        rgba(37, 99, 235, .25);
}


.cf-date-day {

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    opacity: .75;
}


.cf-date-number {

    font-size: 22px;

    line-height: 1;

    font-weight: 750;
}


.cf-date-month {

    font-size: 10px;

    font-weight: 650;

    opacity: .75;
}


/* =========================================================
   PUBLIC MATCH
========================================================= */

.cf-match-public {

    min-height: 92px;
}


.cf-match-main {

    min-width: 0;

    flex: 1;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .cf-date-nav {

        margin-bottom: 24px;

        gap: 8px;

        padding-bottom: 10px;
    }


    .cf-date-item {

        min-width: 68px;

        padding:
            9px 10px;

        border-radius: 12px;
    }


    .cf-date-number {

        font-size: 20px;
    }


    .cf-date-day {

        font-size: 10px;
    }


    .cf-date-month {

        font-size: 9px;
    }

}


@media (max-width: 576px) {

    .cf-date-nav {

        gap: 7px;
    }


    .cf-date-item {

        min-width: 64px;

        padding:
            8px 9px;
    }


    .cf-date-number {

        font-size: 19px;
    }

}

/* =========================================================
   PUBLIC LIVE SCOREBOARD
========================================================= */

.cf-match-scoreboard {
    width: 100%;
    margin: 18px 0 20px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .08);
}


/* =========================================================
   SCORE ROW
========================================================= */

.cf-score-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 42px 42px 50px;
    align-items: center;
    min-height: 56px;
}

/* =====================================================
   SERVE
   ===================================================== */

.cf-score-server {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-server-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #7fc242;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* garis khas bola tenis */
.cf-server-indicator::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 12px;
    left: 3px;
    top: 0;
    border-left: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
    transform: rotate(35deg);
}

/* =========================================================
   HEADER
========================================================= */

.cf-score-header {
    min-height: 36px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}


/* =========================================================
   SCORE CELL
========================================================= */

.cf-score-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cf-score-player {
    min-width: 0;
    padding: 0 12px;
}

.cf-public-player-name {
    display: block;
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: normal;
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 600;
}

/* =========================================================
   SCORE VALUE
========================================================= */

.cf-score-set,
.cf-score-game {
    font-size: 17px;
    font-weight: 700;
}

.cf-score-point {
    font-size: 19px;
    font-weight: 700;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .cf-match-scoreboard {
        width: calc(100% + 24px);
        margin-left: -12px;
        margin-right: -12px;
        margin-top: 16px;
        margin-bottom: 18px;
        border-radius: 12px;
    }

    /* =====================================================
       SCORE ROW
       ===================================================== */

    .cf-score-row {
        grid-template-columns:
            28px
            minmax(0, 1fr)
            30px
            40px
            42px;
        min-height: 22px;
    }

    .cf-score-header .cf-score-set,
    .cf-score-header .cf-score-game,
    .cf-score-header .cf-score-point {
        white-space: nowrap;
        font-size: 10px !important;
    }

    .cf-score-row > div {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 22px;
    }
    

    .cf-score-header {
        min-height: 34px;
        font-size: 9px;
    }

    .cf-score-player {
        padding: 0 10px;
    }


    .cf-public-player-name {
        font-size: 15px;
        line-height: 1.25;
    }

    .cf-score-set,
    .cf-score-game {
        font-size: 17px;
    }

    .cf-score-point {
        font-size: 19px;
    }

    .cf-server-indicator {
        width: 9px !important;
        height: 9px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,.25);
    }

    .cf-server-indicator::before {
        width: 5px;
        height: 9px;
        left: 2px;
        top: 0;
    }    
    
}