.kalender-tgl,
.kalender-tgl *,
.kal-tgl-year,
.kal-tgl-year * {
  box-sizing: border-box;
}

.kalender-tgl {
  max-width: 960px;
  margin: 24px auto;
  font: 500 15px/1.45 Arial, "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  color: #132238;
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  margin-bottom: 24px;
}

.kalender-tgl.flush,
.kal-tgl-year.flush {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.kal-tgl-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: 0 0 12px;
  font-weight: 800;
  font-size: 1.05rem;
  color: #1147a8;
  text-align: center;
}

.kal-tgl-title a {
  color: inherit;
  text-decoration: none;
}

.kal-tgl-title a:hover {
  text-decoration: underline;
}

.kal-tgl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #c62828;
  background: #fff;
  border: 1px solid #dfe7f1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  text-decoration: none;
}

.kal-tgl-prev { left: 0; }
.kal-tgl-next { right: 0; }

.kal-tgl-nav:hover {
  background: #fff6f6;
  border-color: #ef9a9a;
}

.kalender-tgl ul,
.kalender-tgl li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kal-tgl-grid-head > li,
.kal-tgl-grid-body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.kal-tgl-grid-head > li:first-child {
  border: 1px solid #dfe7f1;
  border-bottom: none;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.kal-tgl-grid-head > li:last-child {
  border: 1px solid #dfe7f1;
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.kal-tgl-grid-head b {
  padding: 10px 4px;
  text-align: center;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: capitalize;
  color: #4a5c74;
  border-right: 1px solid #dfe7f1;
}

.kal-tgl-grid-head b:first-child { color: #ea4335; }
.kal-tgl-grid-head b:last-child { border-right: none; }

.kal-tgl-grid-body > s,
.kal-tgl-grid-body > a {
  border-right: 1px solid #e6edf5;
  border-bottom: 1px solid #e6edf5;
  min-height: 82px;
  box-sizing: border-box;
}

.kal-tgl-grid-body > s { background: #fbfcfe; }

.kal-tgl-grid-body > a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.kal-tgl-grid-body > s:nth-child(7n),
.kal-tgl-grid-body > a:nth-child(7n) {
  border-right: none;
}

.kal-tgl-grid-body > a:hover {
  background: #f9fbff;
}

.kal-tgl-grid-body > a > div:first-child {
  font-weight: 800;
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  line-height: 1.2;
}

.kal-tgl-grid-body > a > div:last-child {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(67, 83, 110, 0.88);
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.kal-tgl-grid-body > a > div:last-child {
font-size: 0.72rem;
line-height: 1.15;
white-space: normal;
overflow: visible;
text-overflow: unset;
}

.kal-tgl-grid-body > a.sun > div:first-child { color: #ea4335; }
.kal-tgl-grid-body > a.libur > div { color: #ea4335 !important; }
.kal-tgl-grid-body > a.bersama > div { color: #1d4ed8 !important; }

.kal-tgl-grid-body > a.libur { background: #fff3f2; }
.kal-tgl-grid-body > a.bersama { background: #eff6ff; }
.kal-tgl-grid-body > a.libur:hover { background: #ffecec; }
.kal-tgl-grid-body > a.bersama:hover { background: #eaf1ff; }

.kal-tgl-separator {
  border-top: 1px solid #e6edf5;
  margin: 18px 0 12px;
}

.kal-tgl-libur-heading {
  font-size: 0.96rem;
  font-weight: 700;
  margin: 6px 0 8px;
  color: #23364d;
  text-align: left;
}

.kal-tgl-libur-list {
  margin: 0;
  padding: 0 0 2px;
  font-size: 0.85rem;
  line-height: 1.55;
}

.kal-tgl-libur-list li {
  margin: 4px 0;
}

.kal-tgl-libur-day {
  font-weight: 800;
  color: #ea4335;
  margin-right: 4px;
}

.kal-tgl-libur-list a {
  color: #1147a8;
  text-decoration: none;
}

.kal-tgl-libur-list a:hover {
  text-decoration: underline;
}

.kal-tgl-year {
  margin: 24px 0;
  color: #132238;
}

.kal-tgl-year-head {
  margin: 0 0 18px;
  text-align: center;
}

.kal-tgl-year-head h2 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.2;
  font-weight: 800;
}

.kal-tgl-year-head h2 a {
  color: #1147a8;
  text-decoration: none;
}

.kal-tgl-year-head h2 a:hover {
  text-decoration: underline;
}

.kal-tgl-year-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.kalender-tgl.is-year-card {
  max-width: none;
  margin: 0;
  padding: 10px;
  border-radius: 16px;
}

.kalender-tgl.is-year-card .kal-tgl-title {
  font-size: 1rem;
  margin-bottom: 10px;
}

.kalender-tgl.is-year-card .kal-tgl-grid-head b {
  font-size: 0.7rem;
  padding: 8px 2px;
}

.kalender-tgl.is-year-card .kal-tgl-grid-body > s,
.kalender-tgl.is-year-card .kal-tgl-grid-body > a {
  min-height: 56px;
}

.kalender-tgl.is-year-card .kal-tgl-grid-body > a {
  padding: 6px 4px;
  gap: 3px;
  align-items: center;
  text-align: center;
}

.kalender-tgl.is-year-card .kal-tgl-grid-body > a > div:first-child {
  font-size: 0.92rem;
}

.kalender-tgl.is-year-card .kal-tgl-grid-body > a > div:last-child {
  font-size: 0.66rem;
}

.kalender-tgl.is-year-card .kal-tgl-separator {
  margin: 14px 0 10px;
}

.kalender-tgl.is-year-card .kal-tgl-libur-heading {
  font-size: 0.82rem;
}

.kalender-tgl.is-year-card .kal-tgl-libur-list {
  font-size: 0.76rem;
}

@media (max-width: 1024px) {
  .kal-tgl-year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .kal-tgl-grid-head b,
  .kal-tgl-grid-body > a > div:first-child {
    font-size: 0.6875rem;
  }

  .kal-tgl-grid-body > a > div:last-child {
    font-size: 0.625rem;
    font-weight: 500;
  }

  .kal-tgl-grid-body > a,
  .kal-tgl-grid-body > s {
    min-height: 62px;
  }

  .kal-tgl-grid-body > a {
    gap: 4px;
    padding: 8px;
  }

  .kal-tgl-nav {
    width: 26px;
    height: 26px;
  }

  .kal-tgl-year-grid {
    grid-template-columns: 1fr;
  }

  .kalender-tgl.is-year-card .kal-tgl-grid-body > s,
  .kalender-tgl.is-year-card .kal-tgl-grid-body > a {
    min-height: 62px;
  }
}

@media (max-width: 375px) {
  .kal-tgl-grid-body > a > div:last-child {
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    letter-spacing: -0.1px;
  }
}

@media print {
  .kalender-tgl {
    color: #000;
    background: #fff;
    box-shadow: none;
    border-color: #ccc;
  }

  .kal-tgl-grid-head > li:first-child {
    background: #fff;
  }

  .kal-tgl-grid-body > a:hover {
    background: #fff;
  }

  .kal-tgl-grid-body > a.libur,
  .kal-tgl-grid-body > a.bersama {
    background: #fff !important;
  }

  .kal-tgl-nav {
    display: none !important;
  }

  .kal-tgl-year-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kal-tgl-grid-body > a.no-pasaran {
  justify-content: flex-start;
  gap: 0;
}

.kal-tgl-grid-body > a.no-pasaran > div:first-child {
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 800;
}

.kalender-tgl.is-year-card .kal-tgl-grid-body > a.no-pasaran > div:first-child {
  font-size: 0.92rem;
}

.kalender-tgl:not(.is-year-card) .kal-tgl-grid-head b {
  font-size: 0.78rem;
  padding: 10px 2px;
}

@media (max-width: 640px) {
  .kalender-tgl:not(.is-year-card) .kal-tgl-grid-head b {
    font-size: 0.68rem;
    letter-spacing: -0.1px;
  }
}

.kal-year-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid #dbe3ed;
  border-radius: 18px;
  background: #fff;
}

.kal-year-topnav-title {
  flex: 1;
  text-align: center;
  line-height: 1.2;
}

.kal-year-topnav-title a {
  color: #0f4db8;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.1rem;
}

.kal-year-topnav-title a:hover {
  text-decoration: underline;
}

.kal-year-topnav-arrow {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe3ed;
  border-radius: 50%;
  background: #fff;
  color: #0f4db8;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}

.kal-year-topnav-arrow:hover {
  background: #f7faff;
  border-color: #ef9a9a;
}

.kal-year-topnav-arrow span {
  display: block;
  line-height: 1;
  font-weight: 800;
}

@media (max-width: 768px) {
  .kal-year-topnav {
    margin-bottom: 14px;
    padding: 8px 10px;
  }

  .kal-year-topnav-title a {
    font-size: 1rem;
  }

  .kal-year-topnav-arrow {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 16px;
  }
}

.tgl-menu-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  font-weight: 700;
  line-height: 1;
}

.tgl-menu-nav-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: #111;
  font-size: 0.875rem;
  white-space: nowrap;
}

.tgl-menu-nav-text-link {
  color: #111;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}

.tgl-menu-nav-text-link:hover {
  color: #c00;
}

.tgl-menu-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  text-decoration: none;
  color: #c00;
  font-size: 24px;
  line-height: 1;
}

.tgl-menu-nav-arrow span {
  display: block;
  line-height: 1;
}

.tgl-menu-nav-arrow:hover {
  color: #900;
}

.tgl-menu-nav-arrow:focus,
.tgl-menu-nav-text-link:focus {
  outline: none;
  box-shadow: none;
}

@media (max-width: 640px) {
  .tgl-menu-nav {
    gap: 10px;
  }

  .tgl-menu-nav-label {
    gap: 6px;
    font-size: 0.875rem;
  }

}

@media (max-width: 640px) {
  .tgl-menu-nav-arrow {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: 24px;
  }
}

/** Begin Calculator CSS */
.tgl-kalkulator-hari{
	margin:24px 0;
	color:#14243d;
	font:500 16px/1.55 Arial, Helvetica, sans-serif;
}
.tgl-kalkulator-hari *{
	box-sizing:border-box;
}
.tgl-kh-head h2{
	margin:0 0 6px;
	font-size:2rem;
	line-height:1.2;
	font-weight:800;
	color:#14243d;
}
.tgl-kh-head p{
	margin:0 0 14px;
	color:#4f627f;
}

.tgl-kh-tabs{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
	margin:0 0 18px;
}
.tgl-kh-tab{
	height:34px;
	padding:0 14px;
	border:1px solid #dbe3ed;
	border-radius:7px;
	background:#f7f9fc;
	color:#6f7f96;
	font-size:14px;
	font-weight:500;
	cursor:pointer;
}
.tgl-kh-tab.is-active{
	background:#fff;
	color:#111;
	font-weight:700;
}

.tgl-kh-panel{
	display:none;
}
.tgl-kh-panel.is-active{
	display:block;
}

.tgl-kh-card{
	border:1px solid #dbe3ed;
	border-radius:12px;
	background:#fff;
	padding:18px;
}
.tgl-kh-card h3{
	margin:0 0 4px;
	font-size:1.2rem;
	line-height:1.2;
	font-weight:800;
	color:#111;
}
.tgl-kh-sub{
	margin:0 0 18px;
	font-size:14px;
	color:#61718a;
}

.tgl-kh-grid{
	display:grid;
	gap:24px;
}
.tgl-kh-grid.two{
	grid-template-columns:1fr 1fr;
}
.tgl-kh-grid.one{
	grid-template-columns:1fr;
}

.tgl-kh-field label{
	display:block;
	margin:0 0 10px;
	font-size:14px;
	font-weight:700;
	color:#111;
}
.tgl-kh-field input[type="date"],
.tgl-kh-field input[type="number"]{
	width:100%;
	height:40px;
	border:1px solid #d6deea;
	border-radius:6px;
	padding:0 12px;
	font-size:14px;
	background:#fff;
	color:#111;
	box-shadow:none;
}
.tgl-kh-field input:focus{
	outline:none;
	border-color:#b7c4d6;
}

.tgl-kh-stepper{
	display:grid;
	grid-template-columns:32px 1fr 32px;
	gap:8px;
	align-items:center;
}
.tgl-kh-step{
	height:32px;
	border:1px solid #d6deea;
	border-radius:6px;
	background:#fff;
	color:#111;
	cursor:pointer;
	font-size:20px;
	line-height:1;
	padding:0;
}
.tgl-kh-step:hover{
	background:#f8fafc;
}
.tgl-kh-day-count{
	text-align:center;
	font-weight:700;
}
.tgl-kh-help{
	margin:8px 0 0;
	font-size:12px;
	color:#75859b;
}

.tgl-kh-result{
	margin-top:18px;
	border:1px solid #dbe3ed;
	border-radius:8px;
	background:#fbfcfe;
	padding:16px;
}
.tgl-kh-result h4{
	margin:0 0 10px;
	font-size:16px;
	font-weight:800;
	color:#111;
}
.tgl-kh-result-text{
	margin:0 0 12px;
	color:#223655;
	font-size:14px;
}
.tgl-kh-result-number{
	text-align:center;
	font-size:22px;
	line-height:1.25;
	font-weight:800;
	color:#000;
	margin:10px 0 6px;
}
.tgl-kh-result-note{
	text-align:center;
	font-size:14px;
	color:#61718a;
}

@media (max-width: 768px){
	.tgl-kh-grid.two{
		grid-template-columns:1fr;
		gap:16px;
	}
	.tgl-kh-card{
		padding:14px;
	}
	.tgl-kh-head h2{
		font-size:1.7rem;
	}
	.tgl-kh-tabs{
		gap:8px;
	}
	.tgl-kh-tab{
		font-size:13px;
	}
	.tgl-kh-result-number{
		font-size:20px;
	}
}

/** Begin Hari Libur Boxes CSS */
.kal-info-box{
	margin-top:24px;
	padding:18px;
	border:1px solid #dbe3ed;
	border-radius:12px;
	background:#fff;
}

.kal-info-box h2{
	margin:0 0 10px;
	font-size:1.15rem;
	line-height:1.3;
	font-weight:800;
	color:#111;
}

.kal-info-lead{
	margin:0 0 14px;
	font-size:14px;
	color:#61718a;
}

.kal-info-footnote{
	margin:14px 0 0;
	font-size:14px;
	color:#7a879b;
}

.kal-info-table-wrap{
	overflow-x:auto;
	border:1px solid #dbe3ed;
	border-radius:8px;
	background:#fff;
}

.kal-info-table{
	width:100%;
	border-collapse:collapse;
	font-size:14px;
}

.kal-info-table th,
.kal-info-table td{
	padding:14px 16px;
	text-align:left;
	border-bottom:1px solid #e7edf4;
	vertical-align:top;
}

.kal-info-table thead th{
	font-weight:500;
	color:#6f7f96;
	background:#fff;
}

.kal-info-table tbody tr:last-child td{
	border-bottom:0;
}

.kal-info-table.is-compact th,
.kal-info-table.is-compact td{
	padding:12px 14px;
}

.kal-pill{
	display:inline-block;
	padding:4px 10px;
	border-radius:999px;
	font-size:13px;
	font-weight:700;
	line-height:1.2;
}

.kal-pill.is-libur{
	background:#f7dede;
	color:#c0392b;
}

.kal-pill.is-cuti{
	background:#f4e3b2;
	color:#b46b00;
}

.kal-pill.is-neutral{
	background:#eef2f7;
	color:#111;
}

.kal-long-weekends{
	display:grid;
	gap:18px;
}

.kal-long-weekend-card{
	border:1px solid #dbe3ed;
	border-radius:10px;
	padding:14px;
	background:#fff;
}

.kal-long-weekend-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	margin-bottom:12px;
	padding-bottom:12px;
	border-bottom:1px solid #e7edf4;
}

.kal-long-weekend-title{
	font-size:1rem;
	font-weight:800;
	color:#111;
}

.kal-long-weekend-meta{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
}

.kal-long-weekend-note{
	font-size:12px;
	color:#6f7f96;
	font-style:italic;
}

.kal-info-table tbody tr.is-weekend-row td{
	background:#fff8f8;
}

@media (max-width: 768px){
	.kal-info-box{
		padding:14px;
		margin-top:18px;
	}

	.kal-info-box h2{
		font-size:1.05rem;
	}

	.kal-info-table{
		font-size:13px;
	}

	.kal-info-table th,
	.kal-info-table td{
		padding:11px 12px;
	}

	.kal-long-weekend-head{
		flex-direction:column;
		align-items:flex-start;
	}
}

/** Begin Download button CSS */
.kal-year-download-block {
	margin-top: 16px;
}

.kal-year-download-block a,
.kal-year-download-block .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
}
