/*
	Theme Name:   	Superfast Child
	Theme URI:    	https://www.idtheme.com/superfast/
	Description:  	Superfast Child Theme
	Author: 		kentooz - Gian MR
	Author URI: 	http://gianmr.com
	Version: 		3.0.0
	License: 		GNU General Public License v2 or later
	License URI: 	http://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: 	superfast
	Template:     	superfast
*/

/* === TABEL RESPONSIVE === */
.entry-content table:not(.tr-caption-container) {
  display: block;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 1.5em 0;
}
.entry-content table:not(.tr-caption-container) th,
.entry-content table:not(.tr-caption-container) td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}
.entry-content table:not(.tr-caption-container) th {
  background-color: #f2f2f2;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .entry-content table:not(.tr-caption-container) {
    white-space: nowrap;
  }
}

/* === LIST/BULLET === */
.entry-content ul, .entry-content ol { margin: 1em 0 1.5em; padding-left: 1.8em }
.entry-content li { margin-bottom: .4em }

/* === TOMBOL CTA === */
.entry-content .btn-primary, .entry-content .btn-secondary { border-bottom: none !important; display: inline-block; margin: 0 6px 4px 0 }
.entry-content .btn-primary button { padding: 12px 16px; border-radius: 6px; font-weight: 500; cursor: pointer; background: #3949AB; color: #fff; border: none; transition: .2s }
.entry-content .btn-primary button:hover { background: #1A237E }
.entry-content .btn-secondary button { padding: 12px 16px; border-radius: 6px; font-weight: 500; cursor: pointer; background: transparent; border: 2px solid #3949AB; color: #3949AB; transition: .2s }
.entry-content .btn-secondary button:hover { background: #3949AB; color: #fff }

/* === KOTAK NOTIFIKASI === */
.entry-content .notification-box { position: relative; padding: 16px 20px 16px 26px; margin-bottom: 1.5em; border-radius: 6px; line-height: 1.6 }
.entry-content .notification-box.info { background: #def7ef }
.entry-content .notification-box.warning { background: #fff2de }
.entry-content .notification-box.error { background: #ffdbdb }

/* === GRID GAMBAR 3 KOLOM === */
.entry-content .grid-images { display: grid; gap: 12px; margin-bottom: 1.5em }
.entry-content .grid-images.two-col { grid-template-columns: repeat(2,1fr) }
.entry-content .grid-images.three-col { grid-template-columns: repeat(3,1fr) }
.entry-content .grid-images img { width: 100%; height: auto; margin: 0; display: block }
@media(max-width:600px){
  .entry-content .grid-images.three-col { grid-template-columns: repeat(2,1fr) }
}

/* === ACCORDION FAQ === */
.entry-content .accordion-container { max-width: 620px; margin: 0 auto 1.5em }
.entry-content .accordion-toggle { font-weight: 700; position: relative; display: block; padding: 15px 20px 15px 0; cursor: pointer; border-top: 1px solid #E1E7EC; color: #484F5B }
.entry-content .accordion-toggle::before { content: "▼"; position: absolute; right: 0; top: calc(50% - 7px); transition: transform .15s }
.entry-content .accordion-toggle.active::before { transform: rotate(180deg) }
.entry-content .accordion-content { max-height: 0; overflow: hidden; transition: max-height .2s ease-out }
.entry-content .accordion-content div { padding: 0 0 20px }
.entry-content .accordion-content:last-child { border-bottom: 1px solid #E1E7EC }

/* === SLIDER/CAROUSEL === */
.entry-content .slider-container { position: relative; margin-bottom: 1.5em; overflow: hidden }
.entry-content .slider-container .slider-content { display: flex; transition: transform .3s }
.entry-content .slider-container .slider-content img { width: 100%; min-width: 100%; margin: 0; flex-shrink: 0 }
.entry-content .slider-container .slider-indicator { text-align: center; margin-top: 10px }
.entry-content .slider-container span.slider-nav { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: #E1E7EC; margin: 0 3px; cursor: pointer; transition: .2s }
.entry-content .slider-container span.slider-nav.active { width: 30px; background: #3949AB }

/* === SYNTAX HIGHLIGHTER (CODE BLOCK) === */
.entry-content :not(pre) > code { padding: 3px 6px; background: #f5f5f5; border-radius: 4px; color: #D60076 }
.entry-content pre { position: relative; margin: 1.5em 0; background: #f5f5f5; border-radius: 8px; overflow: hidden }
.entry-content pre code { display: block; padding: 15px 20px; overflow-x: auto; line-height: 1.6; background: transparent; color: #484F5B; border: none; white-space: pre-wrap; word-break: break-word }
.code-copy-btn { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.06); border: none; color: #657386; padding: 5px 12px; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity .2s; z-index: 2; display: inline-flex; align-items: center; gap: 4px }
.entry-content pre:hover .code-copy-btn { opacity: 1 }
.code-copy-btn:hover { background: rgba(0,0,0,.1) }
.code-copy-btn.copied { background: #3949AB; color: #fff }

/* === LAZY YOUTUBE === */
.entry-content .lazy-youtube { background: rgba(82,82,82,.26); margin-bottom: 1.5em; padding-top: 56.25%; position: relative; overflow: hidden; cursor: pointer; border-radius: 8px }
.entry-content .lazy-youtube img { width: 100%; top: -16.84%; left: 0; position: absolute }
.entry-content .lazy-youtube .lazy-youtube-play { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); width: 68px; height: 48px; background: rgba(0,0,0,.7); border-radius: 12px; border: none; cursor: pointer; opacity: .8 }
.entry-content .lazy-youtube .lazy-youtube-play:before { content: ""; border-style: solid; border-width: 20px 0 20px 30px; border-color: transparent transparent transparent #fff; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0) }
.entry-content .lazy-youtube:hover .lazy-youtube-play { background: red }
.entry-content .lazy-youtube iframe { height: 100%; width: 100%; top: 0; left: 0; position: absolute; border: none }

/* === BLOGGER IMAGE FIX === */
.entry-content img { max-width: 100%; height: auto }
.entry-content .separator { display: block; text-align: center; margin: 1.5em 0; clear: both }
.entry-content .separator a { display: inline-block }
.entry-content a[style*='margin-left: 1em'], .entry-content a[style*='margin-right: 1em'] { margin-left: 0 !important; margin-right: 0 !important }
.entry-content div:empty { display: none }
.entry-content iframe[src*='youtube'], .entry-content iframe[src*='vimeo'] { width: 100%; aspect-ratio: 16/9; height: auto }

/* === HTML SITEMAP (TABEL ZEBRA INDIGO SEPERTI RUMAHWEB) === */
.sitemap-table-wrapper {
  margin: 1.5em 0;
  width: 100%;
  max-width: 100%;
}

.sitemap-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: 0.95em;
  background: #ffffff;
}

.sitemap-table th,
.sitemap-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #e4eaee;
  text-align: left;
}

.sitemap-table th {
  font-weight: 700;
  color: #212933;
  border-bottom: 2px solid #3949AB;
  background-color: #f4f6f9;
}

.sitemap-table th.col-date,
.sitemap-table td.col-date {
  text-align: right;
  white-space: nowrap;
  font-size: 0.88em;
  color: #657386;
}

.sitemap-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

.sitemap-table tbody tr:hover {
  background-color: rgba(57, 73, 171, 0.05);
}

.sitemap-table td.col-title a {
  color: #3949AB !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.2s;
}

.sitemap-table td.col-title a:hover {
  color: #1A237E !important;
  text-decoration: underline !important;
}

@media screen and (max-width: 768px) {
  .sitemap-table {
    white-space: nowrap;
  }
}