*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}


body{
	background: #dedede;
	font-family: 'Helvetica', arial, sans-serif;

	font-size: 14px;
}

p{
    margin-top: 0px;
	margin-bottom: 10px;
    line-height: 1.7em;
    color:#444;
}

li {
	color:#444;
}

ul {
	color:#444;
}

ol {
	color:#444;
}

h2{
	margin-bottom: 10px;
	border-bottom: 1px solid red;
	border-top: 1px solid red;
    background: orange;
    padding: 10px;
    color:#fff;
    font-size: 14px;
    clear: both;
}

h3{
    margin-bottom:0px;
    font-size: 18px;
}

a{
	text-decoration: none;
	color: #0096e1;
}
a:hover{
	text-decoration:underline;
	color: orange;
}

.fa-cat{
	color:orange;
	padding-bottom:10px;
}

.container{
	max-width: 1030px;
	margin: 20px auto;
	background: #fff;
	overflow: hidden;
	padding: 10px;
}

.header{
	padding: 20px;
    background: #0096e1;
	margin-bottom:5px;
    color: #fff;
}

.hteks{
	text-align:right;
}

.topiklan{
	margin: 0px auto;
	/*background: #d3a267;*/
	background: #dedede;
	overflow: hidden;
	padding: 5px;
	height:auto;
}


.iklanh300{
	margin-top:20px;
	text-align:center;
	/*background: #d3a267;*/
	background: #dedede;
	height:auto;
	width:300px;
}

.iklangbr {
  display: flex;
  flex-direction: column; /* Menyusun item ke bawah */
  align-items: center;    /* Memposisikan item ke tengah secara horizontal */
  justify-content: center;
  width: 100%;            /* Memastikan container mengambil lebar penuh */
  margin-top: 20px;
  opacity: 0.8;
}

.imgwreduce {
  max-width: 400px;       /* Menggunakan max-width agar lebih responsif */
  width: 100%;
  text-align: center;     /* Memastikan gambar di dalam link ikut ke tengah */
}

.imgwreduce img {
  max-width: 100%;        /* Gambar tidak akan melebihi lebar 400px */
  height: auto;
  display: block;         /* Menghilangkan whitespace di bawah gambar */
  margin: 0 auto;         /* Memastikan image sendiri berada di tengah div */
}

.iklanket {
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: center;     /* Memastikan teks link berada di tengah */
}

.iklanket a {
  text-decoration: none;
  color: #333;
  display: inline-block;  /* Agar margin/padding bekerja lebih baik */
}

.gbrartikel{
	margin-top:30px;
	text-align:center;
	margin-bottom:20px;
}

.yutub iframe {
	width:100%;
	height:350px;
}

.yutub {
	width:100%;
	height:350px;
}

.kosong20{
	height:20px;
}

.forpre {
	display: block;
	white-space: pre;
	background-color:#444444;
	padding:10px;
}

.forcod {
	font-family: Consolas,"courier new";
	color: white;
}

.barisputih {
	color:#dd0000;
	background-color:#ffffff;
	vertical-align:middle;
	height:20px;
	font-weight:bold;
}

/* Menu */

 /* Add a black background color to the top navigation */
.topnav {
  background-color: #0096e1;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: orange;
  color: white;
}

.topik{
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: left;
  padding: 14px 16px;
  font-size: 14px;
}

/* Hide the link that should open and close the topnav on small screens */
.kotak {
    margin-bottom: 0px;
    padding-top: 10px;
	padding-bottom:2px;
	border-bottom: 1px solid #ddd;
}

.kotak ul {
    margin-top: 0px;
	margin-bottom: 20px;
	margin-left: 20px;
    color:#333;
}

.kotak li {
    line-height: 1.7em;
	margin-bottom: 10px;
}


.judulbergaris {
    margin-bottom:0px;
    padding-top: 10px;
	border-bottom: 1px solid #ddd;
}

.kotaknogaris {
    margin-bottom: 0px;
    padding-top: 10px;
	padding-bottom:2px;
}

.tanggal {
    font-size: 10px;
    margin-bottom:10px;
	color:red;
}

.berikut {
	font-size:10px;
	margin-top:5px;
	margin-bottom:15px;
}

pre::before {
    content: attr(judul);
    margin-top: 10px;
    padding: .2em;
    font-size: .8em;
    color: #fff;
    background: #37474f;
    display: block;
    text-indent: .3em;
    line-height: normal;
	box-sizing: border-box;
}

pre code {
	display:block;
	background:#555;
	white-space:pre;
	overflow-x:scroll;
	max-width:100%;
	min-width:100%;
	padding:10px;
	color:#fff;
	font-weight:bold;
	margin-bottom:5px;
}

.imgmover {
	border: 1px solid #eceff1;
	opacity:0.5;
	margin-left:auto;
	margin-right:auto;
	display:block;
}

.imgmover:hover {
    border: 1px solid #555;
	box-shadow: 2px 2px #aaa;
	-webkit-box-shadow: 2px 2px #aaa;
	-moz-box-shadow: 2px 2px 2px #4170cf;
	opacity:1;
	transition: opacity 300ms;
}

.imgmover::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.thumbmover {
	border: 1px solid #eceff1;
	opacity:0.5;
	margin-left:auto;
	margin-right:auto;
	display:block;
	transition: 0.3s;
}

.thumbmover:hover {
    border: 1px solid #555;
	box-shadow: 2px 2px #aaa;
	-webkit-box-shadow: 2px 2px #aaa;
	-moz-box-shadow: 2px 2px 2px #4170cf;
	opacity:1;
	transition: opacity 300ms;
}

.thumbmover::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

        /* MODAL DASAR */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1000; 
            left: 0; top: 0; width: 100%; height: 100%; 
            background-color: rgba(0,0,0,0.9);
            flex-direction: column;
            align-items: center; 
            justify-content: center;
        }

        /* WRAPPER: Mengunci ukuran pelindung agar sama dengan ukuran gambar */
        .modal-content-wrapper {
            position: relative;
            display: inline-grid; /* Mengikuti ukuran konten di dalamnya */
            place-items: center;
            max-width: 90%;
            max-height: 80vh;
        }

        .modal-content {
            max-width: 100%;
            max-height: 80vh;
            display: block;
            user-select: none;
            -webkit-user-drag: none;
        }

        /* LAYER WATERMARK & PELINDUNG KLIK KANAN */
        .shield {
            position: absolute; 
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 10; /* Berada tepat di atas gambar */
            display: flex; 
            align-items: center; 
            justify-content: center;
            overflow: hidden;
            background: transparent;
        }

        .watermark-text {
            color: rgba(255, 255, 255, 0.5); /* Putih transparan */
            font-size: 4vw; /* Ukuran dinamis mengikuti layar */
            font-weight: bold;
            transform: rotate(-30deg);
            text-transform: uppercase;
            letter-spacing: 5px;
            white-space: nowrap;
            pointer-events: none; /* Klik tembus ke shield */
            border: 4px solid rgba(255, 255, 255, 0.2);
            padding: 20px;
        }

        /* CAPTION & CLOSE */
        #caption { margin-top: 15px; color: #ccc; font-size: 1.2rem; }
        
        .close {
            position: absolute; top: 20px; right: 40px; 
            color: #fff; font-size: 50px; cursor: pointer; font-weight: bold;
        }

.wr-kode {
	color: #99ff33;
}

.wr-cell {
	color:#ffcc00;
}

.wr-angk {
	color:#ff99ff;
}

.wr-teks {
	color:#33ccff;
}

/* Main */
.left{
		width: 160px;
		margin: 5px;
		margin-left:0px;
		float: left;
	}

	.left ul{
		list-style-type: none;
	}
	.left ul li{
		display: block;
	}
	.left ul li a{
		display: block;
		border-bottom: 1px solid #dedede;
		margin-bottom: 5px;
		padding: 5px 5px;
	}
    .left ul li a#hid{
        display: none;
    }
	.left ul li a:hover{
		color: orange;
	}

	.middle{ 
		width: 520px;
		margin: 5px;
		float: left;
	}
	.middle img{
		max-width: 100%;
		height: auto;
	}

	.middle a{
		/*font-weight: bold;*/
	}
	
	.middle ol {
		padding-left: 15px;
	}

.h2mid{
	margin-bottom: 10px;
	border-top: solid 1px green;
	border-bottom: solid 1px green;
    background: #0096e1;
    padding: 10px;
    color:#fff;
    font-size: 14px;
	font-weight:bold;
    clear: both;
}

.h2midinpar{
	margin-top:10px;
	margin-bottom: 10px;
	border-top: solid 1px green;
	border-bottom: solid 2px green;
    padding: 10px;
    color:#0096e1;
    font-size: 14px;
	font-weight:bold;
    clear: both;
}

.halaman {
	font-size:12px;
	padding-top:20px;
	padding-bottom:10px;
	font-weight:bold;
}

.halaman a {
  text-decoration: none;
  display: inline-block;
  padding: 12px 16px;
}

.halaman a:hover {
  background-color: orange;
  color: white;
}

.tdkdipilih {
  padding: 12px 16px;
  background-color: #ddd;
  color: black;
}

.bunder {
  border-radius: 50%;
}

.halangka {
/*  background-color: #4CAF50;*/
  background-color: #0096e1;
  color: white;
}
.hotnews{
	margin-bottom: 10px;
	border: 1px solid #bfbfbf;
    background: yellow;
    padding: 10px;
    color:#fff;
    font-size: 14px;
	text-align:center;
}

.hotnews a {
	color: red;
	text-decoration:underline;
}

.hotnews a:hover {
	color:green;
	text-decoration:none;
}

.thumb img {
    padding-right: 10px;
    width: 100px;
    float:left;
}

	.right{
		width: 310px;
		margin: 5px;
		margin-right:0px;
		float: left;
	}


	.right ul{
		list-style-type: none;
	}
	.right ul li{
		display: block;
	}
	.right ul li a{
		display: block;
		border-bottom: 1px solid #dedede;
		margin-bottom: 5px;
		padding: 5px 5px;
	}
	.right ul li a:hover{
		color: orange;
	}

.footer{
	clear: both;
	border-top: 1px solid #dedede;
	padding: 5px;
	margin: 5px;
    text-align: center;
}

#dptk table {
	/*border: 1px solid green;*/
	border-collapse: collapse;
	margin:0;
	padding: 0;
	width: 100%;
}

#dptk table tr {
	background: #fff;
	padding: .35em;
	border-bottom:1px solid #ccc;
}

/* tabel */
table {
	/*border: 1px solid green;*/
	border-collapse: collapse;
	margin:0;
	padding: 0;
	width: 100%;
}
table caption {
	font-size: 1.5em;
	margin: .25em 0 .75em;
}
table tr {
	background: #eee;
	padding: .35em;
	border-bottom:1px solid #ccc;
}
table th,
table td {
	padding: .625em;
	text-align: left;
}
table th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: green;
	color: white;
}
table td img {
	text-align: center;
}

.tdleft {
	text-align:left;
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran 1080px kebawah */
@media screen and (max-width: 1080px) {
	
	.container {
		width: 100%;
	}

    .left {
		width: 30%;
	}

    .middle {
		width: 68%;
		float: right;
		margin-right:0px;
	}
	
	.right {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}
}


/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px) {

	.left {
		width: auto;
		margin-right:0px;
		float: none;
		clear:both;
	}		
	
	.left ul{
		list-style-type: none;
	}
	.left ul li{
		display: inline;
	}
	.left ul li a{
		display: inline-block;
		border-bottom: 1px solid #dedede;
		margin-bottom: 5px;
		padding: 5px 5px;
	}
	
	.middle {
		width: auto;
		margin-left:0px;
		float: none;
	}
	
	.right {
		width: auto;
		margin-left:0px;
		margin-right:0px;
		float: none;
	}

}

@media screen and (max-width: 620px) {

  /*.topnav a:not(:first-child) {display: none;} */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 5px;
  text-decoration: none;
  font-size: 12px;
}

/* tabel resizer */
table {
		border: 0;
	}
	table caption {
		font-size: 1.3em;
	}
	table thead {
		display: none;
	}
	table tr {
		border-bottom: 3px solid green;
		display: block;
		margin-bottom: .725em;
	}
	table td {
		border-bottom: 1px solid green;
		display: block;
		font-size: .8em;
		text-align: right;
	}
	table td:before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}
	table td:last-child {
		border-bottom: 0;
	}
}