html {
  scroll-behavior: smooth;
}
.instagram{border: 0;height: 50px;padding: 0 1.125rem;border-radius: 0;font-size: 1.125rem;background-color: #fff;color: #555;background-image: none;}
.macanz {
    padding: 7px;
    margin: 10px;
    background: #0a0a0a;
    color: #fff;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.3em;
    border: 2px dashed #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 4px #131212, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
    text-shadow: -1px -1px #aa3030;
    font-weight: normal;
}
.btn-paste {
    min-width: 74px;
    padding: 0;
    overflow: hidden;
    position: relative;
    line-height: 53px;
    border-radius: 0 50px 50px 0;
}
.section img {
    max-width: 100%;
}
.type {
  display:inline-flex;
}

.type span {
  word-break: break-all;
  height: 1.2em;
  width:0%;
  overflow: hidden;
  animation:t 1s linear infinite alternate;
}
.type span:before {
  content:" ";
  display:inline-block;
}

@keyframes t{
  90%,100% {width:100%}
}
summary {
  font-size: 1.25rem;
  font-weight: 600;
  background-color: rgb(240 240 240);
  color: #333;
  padding: 1rem;
  margin-bottom: 1rem;
  outline: none;
  border-radius: 0.25rem;
  text-align: left;
  cursor: pointer;
  position: relative;
}
details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0; margin-top: -10px}
  100%  {opacity: 1; margin-top: 0px}
}
details > summary::after {
  position: absolute;
  content: "+";
  right: 20px;
}
details[open] > summary::after {
  position: absolute;
  content: "-";
  right: 20px;
}
details > summary::-webkit-details-marker {
  display: none;
}
.tag-cloud ul {
			list-style-type: none;
			padding: 0;
		}
		.tag-cloud li {
			margin: 5px 5px 5px 10px;
			float: left;
		}
		.tag-cloud a {
			display: inline-block;
			position: relative;
			color: #331c06;
			text-shadow: 0 1px 0 rgba(255,255,255, 0.4);
			text-decoration: none;
			text-align: center;
			padding: 4px 9px 6px 6px;
			font: bold 11px Tahoma, sans-serif;
			border-radius: 3px;
			border: 1px solid #cc912d;

			-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12);
			box-shadow: 0 1px 2px rgba(0,0,0,0.2),
						0 1px 0px rgba(255,255,255,0.4) inset;

			background-image: -webkit-linear-gradient(top, rgba(254,218,113,1) 0%,rgba(254,205,97,1) 60%,rgba(254,188,74,1) 100%);
			background-image: -moz-linear-gradient(top, rgba(254,218,113,1) 0%,rgba(254,205,97,1) 60%,rgba(254,188,74,1) 100%);
			background-image: -o-linear-gradient(top, rgba(254,218,113,1) 0%,rgba(254,205,97,1) 60%,rgba(254,188,74,1) 100%);
			background-image: -ms-linear-gradient(top, rgba(254,218,113,1) 0%,rgba(254,205,97,1) 60%,rgba(254,188,74,1) 100%);
			background-image: linear-gradient(top, rgba(254,218,113,1) 0%,rgba(254,205,97,1) 60%,rgba(254,188,74,1) 100%);
		}
		.tag-cloud a:hover {
			color: #492a0b;
		}
		.tag-cloud a:after {
			content: '';
			position: absolute;
			height: 50%;
			width: 15px;
			border-left: 1px solid #cc912d;

			background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(254,218,113,1) 1%,rgba(254,205,97,1) 100%);
			background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(254,218,113,1) 1%,rgba(254,205,97,1) 100%);
			background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(254,218,113,1) 1%,rgba(254,205,97,1) 100%);
			background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(254,218,113,1) 1%,rgba(254,205,97,1) 100%);
			background-image: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(254,218,113,1) 1%,rgba(254,205,97,1) 100%);
			left: -5px;
			top: 1px;

			-webkit-transform: skewX(-35deg);
			-moz-transform: skewX(-35deg);
			-o-transform: skewX(-35deg);
			-ms-transform: skewX(-35deg);
			transform: skewX(-35deg);
		}

		.tag-cloud a:before {
			content: '';
			position: absolute;
			height: 48%;
			width: 15px;
			border-left: 1px solid #cc912d;
			bottom: 1px;
			left: -5px;

			-webkit-transform: skewX(35deg);
			-moz-transform: skewX(35deg);
			-o-transform: skewX(35deg);
			-ms-transform: skewX(35deg);
			transform: skewX(35deg);

			background-image: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(254,205,97,1) 10%,rgba(254,188,74,1) 100%);
			background-image: -moz-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(254,205,97,1) 10%,rgba(254,188,74,1) 100%);
			background-image: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(254,205,97,1) 10%,rgba(254,188,74,1) 100%);
			background-image: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(254,205,97,1) 10%,rgba(254,188,74,1) 100%);
			background-image: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(254,205,97,1) 10%,rgba(254,188,74,1) 100%);

			-webkit-box-shadow: -2px 1px 2px rgba(100,100,100,0.1);
			box-shadow: -2px 1px 2px rgba(100,100,100,0.1);
		}
		.tag-cloud a span {
			background-color: #FFFFFF;
		    border: 1px solid #CC912D;
		    border-radius: 5px 5px 5px 5px;
		    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), 
		    			0 1px 1px rgba(0, 0, 0, 0.2) inset;
		    display: inline-block;
		    height: 5px;
		    left: -5px;
		    position: relative;
		    top: -1px;
		    vertical-align: middle;
		    width: 5px;
		    z-index: 10;
		}
.mg_addad818962 a {opacity: 0;}
.mg_addad888438 a {opacity: 0;}
.yt{color:#c4302b;}
.tw{color:#38A1F3}
.espn{color:#ff0033}
.fb{color:#3b5998}
.insta{color:#833ab4}
.imdb{color:#f5de50}
.vimeo{color:#162221}
.dm{color:#00aaff}
.iz{color:#ef5e24}
.imgur{color:#85bf25}
.tumblr{color:#35465c}
.bc{color:#629aa9}
.ted{color:#e62b1e}
.live{color:#88070B}
.flickr{color:#0063dc}
.mashable{color:#00aeef}
.sc{color:#ff8800}
.break{color:#ff5e3a}.a
.tv{color:#0079B6}
.tiktok{color:#1c1c1c}
.odnok{color:#5089ca}
.udemy{color:#992337}
.gag{color:#000;}
.bz{color:#e32;}
.bg-bz{background-color:#e32;}
.btn-sd {
    width: 83%;
}
#collapseTwo1, #collapseTwo21{display:none;}
.bg-vlive{background-color:#54f7ff;}
.yt-mp3{background-color: #b84e62;}
.bg-yt{background-color:#c4302b;}
.bg-pin{background-color:#e60023;}
.bg-tw{background-color:#38A1F3}
.bg-espn{background-color:#ff0033}
.bg-fb{background-color:#3b5998}
.bg-insta{background-color:#833ab4}
.bg-imdb{background-color:#837310}
.bg-vimeo{background-color:#162221}
.bg-dm{background-color:#176a93}
.bg-iz{background-color:#ef5e24}
.bg-imgur{background-color:#85bf25}
.bg-tumblr{background-color:#35465c}
.bg-bc{background-color:#629aa9}
.bg-ted{background-color:#e62b1e}
.bg-live{background-color:#88070B}
.bg-flickr{background-color:#0063dc}
.bg-mashable{background-color:#4d98b4}
.bg-sc{background-color:#ff8800}
.bg-break{background-color:#ff5e3a}
.bg-tv{background-color:#0079B6}
.bg-tiktok{background-color:#1c1c1c}
.bg-odnok{background-color:#5089ca}
.bg-udemy{background-color:#992337}
.bg-gag{background-color:#000;}
.bg-vk{background:#4a76a8;}
.bg-bilibili{background:#00a1d6}
.bg-anime{background:#aabe44 }
.bg-mm{background:#303039}
.bg-likee{background: #ff2474}
.bg-reddit{background:rgb(255, 69, 0);}
.renggang{margin-bottom: 145px;}
.renggang h1{color:#fff}
.col-md-8 p {
    font-size: 16px;
}#bread-crumbs {padding-top: 10px;margin-bottom: -10px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.fb-ndut{min-width: 98px;padding: 0;margin: 0;overflow: hidden;position: relative;line-height: 60px;border-radius: 5px;}
.input-field {
    display: inline-block;
}
.h-330 {height:330px;}
#myselect {
    cursor: pointer;
}
.lds-hourglass {
  display: inline-block;
  position: relative;
  width: 57px;
  height: 35px;
}
.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 6px;
  box-sizing: border-box;
  border: 26px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-hourglass 1.2s infinite;
}
@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}

.form-group{padding-top:0;}
.description i {
    font-weight: 700;
     word-break: break-all;
}
.btn-st {
    width: 12rem !important;
}
.contoh{font-weight:800;padding-right: 7px;}
.btn-whatsapp {
    background: #25d366;
}
.font-p{overflow: scroll;}
.font-p ul li {
    font-size: 14px;
    list-style: lower-alpha;
    line-height: 1.5em;
    border-bottom: 1px dashed;
    margin-bottom: 1em;
    padding-bottom: 3px;
    margin-left: -23px;
}
.features {
    background: #222;
}
.features p{
    color: #fff;
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}
.card-body p {
    font-size: 16px;
}
.description {
    color: #000;
    word-break: break-word;
}
#myBar {
  width: 1%;
  height: 30px;
  -webkit-transition: width 1s; /* Safari */
  transition: width ease-out 1s;
  text-align: center;
  line-height: 30px;
  color: white;
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #09c, #f44);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}
iframe{top: 0;
left: 0;
width: 100%;
height: 100%;}
.video-details {
    text-align: center;
}
.down{position: absolute;top: 0;width: 100%;height: 100%;left: 0;}.btn-download{min-width:78px;padding:0;margin:0;overflow:hidden;position:relative;line-height:60px;border-radius:0 5px 5px 0}.download{display:inline-block;width:8rem;padding-top: 7px;}.desc{margin: 10px 0px;text-align:center;}.kecil{font-size: smaller;}.copyright, .copyright a{color:#fff;}.img-thumbnail{width:100%;}.tebal{font-weight:bold;}footer{background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;margin: 0px 30px;}.header-filter .container{padding-bottom: 50px;}.btn-icons{font-size:1.5rem!important}.section{padding:0}.ad{margin-top:10px;width:100%;margin-bottom: 33px;}.input-group{background:#fff;border:3px solid #fff;border-radius:5px;padding:0;box-shadow:0 0 15px rgba(0,0,0,.3);display:flex}.page-header{height:195px}#url{border:0;height:60px;padding:0 0.3rem;border-radius:0;font-size:1.125rem;background-color:#fff;color:#555;background-image:none}#url::placeholder{color:#4e555b}.container-padding{padding-top:2%}a{text-decoration:none}.cd-img-replace{display:inline-block;overflow:hidden;text-indent:100%;white-space:nowrap}.cd-scroll-down{position:absolute;left:50%;right:auto;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);bottom:20px;width:38px;height:44px;background:url(../img/cd-arrow-bottom.svg) center center no-repeat}.cd-nav-trigger{display:none}#cd-vertical-nav ul{list-style:none;padding:0}#cd-vertical-nav{position:fixed;right:-78px;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);z-index:4}#cd-vertical-nav li{text-align:right}#cd-vertical-nav a{display:inline-block;-webkit-backface-visibility:hidden;backface-visibility:hidden;width:100%}#cd-vertical-nav a:after{content:"";display:table;clear:both}#cd-vertical-nav a span{float:right;display:inline-block;-webkit-transform:scale(.6);-moz-transform:scale(.6);-ms-transform:scale(.6);-o-transform:scale(.6);transform:scale(.6)}#cd-vertical-nav a.is-selected .cd-dot,#cd-vertical-nav a:hover span{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}#cd-vertical-nav a:hover .cd-label{opacity:1;left:-100%;-webkit-transition:-webkit-transform .2s,opacity .2s;-moz-transition:-moz-transform .2s,opacity .2s;transition:transform .2s,opacity .2s}#cd-vertical-nav .cd-dot{position:relative;top:8px;right:calc(100% - 15px);height:10px;width:10px;border-radius:50%;background-color:#995581;-webkit-transition:-webkit-transform .2s,background-color .5s;-moz-transition:-moz-transform .2s,background-color .5s;transition:transform .2s,background-color .5s;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}#cd-vertical-nav .cd-label{position:relative;margin-right:10px;padding:4px 14px;color:#fff;background:rgba(0,0,0,.53);font-size:10px;border-radius:20px;text-transform:uppercase;font-weight:600;opacity:0;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-ms-transform-origin:100% 50%;-o-transform-origin:100% 50%;transform-origin:100% 50%}.touch .cd-nav-trigger{display:block;z-index:5;position:fixed;bottom:30px;right:5%;height:44px;width:44px;border-radius:.25em;background:rgba(255,255,255,.9)}.touch .cd-nav-trigger span{position:absolute;height:4px;width:4px;background-color:#3e3947;border-radius:50%;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.touch .cd-nav-trigger span::after,.touch .cd-nav-trigger span::before{content:'';height:100%;width:100%;position:absolute;left:0;background-color:inherit;border-radius:inherit}.touch .cd-nav-trigger span::before{top:-9px}.touch .cd-nav-trigger span::after{bottom:-9px}.touch #cd-vertical-nav{position:fixed;z-index:4;right:5%;bottom:30px;width:90%;max-width:400px;max-height:90%;overflow-y:scroll;-webkit-overflow-scrolling:touch;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;border-radius:.25em;background-color:rgba(255,255,255,.9)}.touch #cd-vertical-nav a{display:block;padding:1em;border-bottom:1px solid rgba(62,57,71,.1)}.touch #cd-vertical-nav a span:first-child{display:none}.touch #cd-vertical-nav a.is-selected span:last-child{color:#d88683}.touch #cd-vertical-nav.open{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.touch #cd-vertical-nav.open+.cd-nav-trigger{background-color:transparent}.touch #cd-vertical-nav.open+.cd-nav-trigger span{background-color:rgba(62,57,71,0)}.touch #cd-vertical-nav.open+.cd-nav-trigger span::after,.touch #cd-vertical-nav.open+.cd-nav-trigger span::before{background-color:#3e3947;height:3px;width:20px;border-radius:0;left:-8px}.touch #cd-vertical-nav.open+.cd-nav-trigger span::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:1px}.touch #cd-vertical-nav.open+.cd-nav-trigger span::after{-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);bottom:0}.touch #cd-vertical-nav li:last-child a{border-bottom:none}@media only screen and (min-width:768px){.touch #cd-vertical-nav,.touch .cd-nav-trigger{bottom:40px}}
@media (max-width: 830px)
{
footer {
    margin-left: 10px;
    margin-right: 10px;
}
.col-8 {
    flex: 0 0 99.666667%;
    max-width: 99.666667%;
}

}
@media only screen and (max-width: 600px){.btn-group-lg .btn, .btn-group-lg>.btn, .btn.btn-lg{padding: 1.125rem .25rem;font-size: .675rem;}
.btn-st {
    width: 6rem !important;
}}

/* ==== Penawaran VIP saat menunggu =========================================
   Dipindah ke sini dari <style> milik wait-offer.php: blok ini kini muncul
   di SEMUA halaman (dibangun vps.js kalau template tidak membawanya), jadi
   gayanya harus global. Dibuka-cache oleh $versi, sama seperti .js.
   ========================================================================= */
.pdwo, .pdwo * { box-sizing: border-box; }
.pdwo {
  --pdwo-ink:   #212529;
  --pdwo-muted: #4e6070;
  --pdwo-edge:  #c8d4dc;
  --pdwo-accent:#159c69;   /* hijau yang sama dengan penanda [Latest] changelog */
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 1px solid var(--pdwo-edge);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px auto 0;
  max-width: 520px;
  text-align: left;
  background: #fff;
}
.pdwo-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pdwo-status { font-size: 14px; font-weight: 600; color: var(--pdwo-ink); margin: 0; }
.pdwo-count {
  font-variant-numeric: tabular-nums;   /* angka tidak bergoyang saat mundur */
  font-size: 13px; color: var(--pdwo-muted);
}
.pdwo-track { height: 4px; border-radius: 2px; background: #e8eef2; margin: 9px 0 10px; overflow: hidden; }
.pdwo-fill  { height: 100%; width: 0; background: var(--pdwo-accent); transition: width .9s linear; }
.pdwo-pitch { font-size: 13px; line-height: 1.5; color: var(--pdwo-muted); margin: 0 0 10px; }
.pdwo-pitch strong { color: var(--pdwo-ink); }
.pdwo-cta {
  display: inline-block; font-size: 13px; font-weight: 600; text-decoration: none;
  color: #fff; background: var(--pdwo-accent); border-radius: 8px; padding: 8px 14px;
}
.pdwo-cta:hover, .pdwo-cta:focus { color: #fff; opacity: .92; text-decoration: none; }

/* Bentuk menyusut: satu baris, dipakai setelah hasil muncul. */
.pdwo.is-done .pdwo-track,
.pdwo.is-done .pdwo-pitch { display: none; }
.pdwo.is-done { padding: 9px 14px; }

@media (prefers-color-scheme: dark) {
  .pdwo { background: #1b2127; --pdwo-ink: #e9eef2; --pdwo-muted: #a8b6c2; --pdwo-edge: #2f3a44; }
  .pdwo-track { background: #2a333c; }
}

/* Bilah kemajuan LAMA (#myBar) disembunyikan, BUKAN dihapus.
 *
 * Bilah penantian di atas (.pdwo-track/.pdwo-fill) menggantikannya di SELURUH
 * halaman: vps.js membangun blok penawaran sendiri kalau template tidak
 * membawanya. Karena itu aturan ini boleh global -- tidak ada lagi halaman yang
 * kehilangan indikator kemajuannya, yang dulu jadi alasan aturan ini dikurung
 * di wait-offer.php.
 *
 * Yang disembunyikan hanya #myBar, JANGAN #myProgress: wadah itu juga dipakai
 * menampilkan pesan kesalahan (mis. "video tidak ditemukan (404)") lewat
 * z.html(dat4) di vps.js. Menyembunyikan wadahnya akan ikut membungkam
 * kesalahan itu.
 *
 * JS lamanya sengaja dibiarkan berjalan apa adanya -- ia hanya memperbarui
 * elemen yang tak terlihat. Untuk mengembalikannya, hapus satu aturan di bawah.
 */
#myBar { display: none; }


/* ===================================================================
 * Promo VIP (.pdvip*) -- DIPINDAH KE SINI 24 Sep 2026.
 *
 * Gaya ini dulu tinggal di dalam <style> milik template/nova/vip-promo.php,
 * dan itu benar selama blok promonya hanya ada di beranda. Sejak hari ini ia
 * tampil di SELURUH halaman lewat vps.php, sehingga gaya inline berarti 4,9 KB
 * CSS yang sama ikut terkirim ulang pada SETIAP tampilan halaman, tidak pernah
 * bisa di-cache. Di sini ia diunduh sekali.
 *
 * Preseden yang sama sudah dipakai untuk .pdwo (penawaran saat menunggu),
 * dengan alasan yang persis sama.
 *
 * cust.css dimuat oleh header.php DAN global_header.php, jadi seluruh 82 rute
 * mendapatkannya. Satu-satunya yang tidak adalah rute 404 (head.php), dan rute
 * itu memang tidak menampilkan promo.
 *
 * SPESIFISITAS -- baca ini sebelum menyederhanakan selektor di bawah.
 *
 * Halaman induk punya `.col-md-8 p { font-size: 16px; }` (baris 241 berkas
 * INI juga). Nilainya (0,1,1): satu kelas + satu elemen. Selektor satu-kelas
 * seperti `.pdvip-adlabel` hanya (0,1,0), jadi ia KALAH -- dan kalah tanpa
 * peduli urutan penulisan, karena spesifisitas dinilai lebih dulu daripada
 * urutan. Itu sebabnya mengecilkan angka font-size saja tidak mengubah apa pun
 * yang terlihat di layar.
 *
 * Karena itu setiap aturan di bawah yang menyetel font-size pada elemen <p>
 * ditulis `.pdvip .pdvip-xxx` -- (0,2,0), menang telak. JANGAN dipendekkan
 * jadi satu kelas "supaya rapi"; itu mengembalikan bug yang sama dalam diam,
 * karena CSS-nya tetap sah dan halamannya tetap tampil.
 *
 * !important sengaja TIDAK dipakai: ia menang dengan mematikan perdebatan,
 * bukan dengan menyatakan niat, dan aturan berikutnya yang perlu menimpanya
 * harus ikut memakai !important juga.
 *
 * INGAT: menyunting berkas ini WAJIB menaikkan $versi di system/config.php --
 * itu satu-satunya pembuka cache untuk .css di situs ini.
 * =================================================================== */
.pdvip, .pdvip * { box-sizing: border-box; }
.pdvip {
  --pdvip-ink:    #212529;   /* warna <p> situs itu sendiri (materials.css body) */
  --pdvip-muted:  #4e6070;   /* 6,50:1; sebelumnya #5a6b78 pada 5,51:1 */
  --pdvip-card:   #ffffff;
  --pdvip-edge:   #7a90a2;   /* 3,17:1 thd halaman; #dbe3e8 lama hanya 1,24:1 */
  --pdvip-accent: #18dcff;
  --pdvip-onacc:  #06333d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--pdvip-ink);
  line-height: 1.6;
  max-width: 960px;
  margin: 28px auto;
  padding: 0 16px;

  /* Perataan dipatok, tidak diwarisi.
     Induk langsung blok ini di beranda adalah
     <div class="col-md-8 ml-auto mr-auto text-center">, jadi text-align:center
     Bootstrap mengalir masuk dan memusatkan SEMUANYA -- termasuk baris kedua
     setiap butir manfaat yang membungkus, yang membuat daftarnya terlihat
     berantakan. Potongan tempelan tidak boleh bergantung pada perataan tuan
     rumahnya. */
  text-align: left;
}
/* TIDAK ADA blok mode gelap, dan itu disengaja.
   pastedownload.com terang secara permanen: nol `prefers-color-scheme` di
   ketiga berkas CSS-nya, body #fff/#fafafa, teks #212529. Potongan yang
   menggelap sendiri akan menaruh kartu gelap di tengah halaman putih --
   pengunjung ber-OS gelap melihat satu lempeng hitam yang tidak nyambung
   dengan apa pun di sekitarnya. Satu tema, mengikuti tuan rumahnya. */
.pdvip-card {
  background: var(--pdvip-card);
  border: 1px solid var(--pdvip-edge);
  border-radius: 12px;
  padding: 24px;
  /* Kartu putih di atas halaman #fafafa nyaris tak punya pemisah sendiri;
     bayangan halus melakukan sisanya tanpa menebalkan garis tepi. */
  box-shadow: 0 1px 3px rgba(20, 33, 43, .08);
}
.pdvip-h { font-size: 1.35rem; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
/* Paragraf utama memakai tinta penuh, sama dengan paragraf lain di halaman induk.
   Sebelumnya ia memakai warna sekunder (5,51:1) -- lolos ambang, tapi terbaca
   jelas lebih pucat daripada teks di sekitarnya, dan blok tempelan yang lebih
   pucat dari halamannya terlihat seperti iklan pihak ketiga. */
.pdvip-p { margin: 0 0 12px; }
.pdvip-cta {
  display: inline-block;
  background: var(--pdvip-accent);
  color: var(--pdvip-onacc);
  font-weight: 700;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 8px;
  margin-top: 6px;
}
.pdvip-cta:hover { filter: brightness(.93); color: var(--pdvip-onacc); }
.pdvip-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.pdvip-col {
  flex: 1 1 260px;
  /* Permukaan sendiri: putih di atas putih membuat kedua kolom melebur jadi
     satu blok. Teks ink di atasnya 15,6:1, muted 5,3:1 -- keduanya lolos. */
  background: #f7fafb;
  border: 1px solid var(--pdvip-edge);
  border-radius: 10px;
  padding: 18px;
}
/* Nama paket dan harganya SENGAJA tetap di tengah -- itu konvensi kartu harga,
   dan ia memberi jangkar visual di atas daftar yang rata kiri. Yang keliru
   sebelumnya bukan pemusatannya, melainkan bahwa seluruh blok ikut terpusat
   tanpa ada yang memintanya. */
.pdvip-col h4 { margin: 0 0 2px; font-size: 1.05rem; font-weight: 700; text-align: center; }
.pdvip .pdvip-price { font-size: 1.6rem; font-weight: 800; margin: 0 0 10px; text-align: center; }
.pdvip-price span { font-size: .85rem; font-weight: 500; color: var(--pdvip-muted); }
.pdvip-list { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.pdvip-list li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 7px; }
.pdvip-list svg { flex: 0 0 auto; margin-top: 4px; color: #0f7a44;   /* 5,40:1; #12a150 lama 3,37:1 */ }
/* .pdvip-note (baris "VIP Lite $1") sengaja dibuat SAMA PERSIS dengan
   paragraf di atas dan di bawahnya: ukuran 1rem, dan warnanya diwarisi dari
   .pdvip (--pdvip-ink) -- tidak ada `color` di sini, dan itu disengaja.

   Baris ini bukan catatan kaki, ia menawarkan paket termurah. Dibuat kecil
   DAN redup sekaligus, ia jatuh di bawah ambang nyaman baca dan terbaca
   seperti syarat-ketentuan yang boleh dilewati. Yang membedakannya dari
   paragraf lain kini cuma posisinya, di bawah baris harga.

   Catatan sejarah supaya tidak diubah bolak-balik: baris ini SELAMA INI
   tampil 16px, tapi bukan karena diatur begitu -- `.col-md-8 p` menimpanya
   diam-diam (lihat catatan spesifisitas di kepala blok). Waktu penimpaan itu
   ditutup, ukurannya turun ke 0,83rem untuk pertama kalinya dan langsung
   terasa salah. Jadi 1rem + tinta penuh di sini keputusan yang disengaja,
   bukan pengembalian bug.

   Jangan menambahkan `color` kembali ke aturan ini. Kalau suatu saat baris ini
   memang perlu diredupkan, itu keputusan produk dan harus disertai alasannya
   di sini. */
.pdvip .pdvip-note { font-size: 1rem; margin-top: 14px; }

/* Tangkapan layar. width/height dipasang eksplisit supaya peramban menyediakan
   ruangnya sebelum gambar tiba -- tanpa itu teks di bawahnya melompat saat
   gambar selesai dimuat. */
.pdvip-shot { margin: 16px 0 0; }
.pdvip-shot img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border: 1px solid var(--pdvip-edge); border-radius: 10px;
}
/* Caption duduk di bawah gambar yang dipusatkan, jadi ia ikut dipusatkan. */
.pdvip-cap { font-size: .83rem; color: var(--pdvip-muted); margin: 8px 0 0; text-align: center; }

/* Gambar dibatasi 640px. Pada lebar penuh kartu (960px) tingginya ~680px, dan
   di beranda blok ini duduk DI ATAS area hasil unduhan -- terlalu mendominasi
   jalur utama pengguna. */
.pdvip-shot img { max-width: 640px; margin-inline: auto; }

/* Varian sisipan: satu baris, untuk ditaruh tepat setelah unduhan selesai. */
.pdvip-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--pdvip-card);
  border: 1px solid var(--pdvip-edge);
  border-left: 4px solid var(--pdvip-accent);
  border-radius: 10px;
  padding: 14px 18px;
}
.pdvip-strip p { margin: 0; flex: 1 1 280px; font-size: .95rem; }

/* Label "Advertisement" di atas bingkai promo.
 *
 * Dua tugas berbeda, jangan disamakan: label ini untuk MANUSIA -- ia menyatakan
 * terus terang bahwa blok di bawahnya promosi, bukan bagian dari artikel. Yang
 * dibaca perayap adalah atribut data-nosnippet pada wadahnya.
 *
 * Sengaja di LUAR kartu, supaya terbaca sebagai keterangan ATAS blok dan bukan
 * sebagai judul di dalamnya.
 *
 * Dipusatkan dan dikecilkan 24 Sep 2026 atas permintaan pemilik. text-align
 * harus ditulis eksplisit: .pdvip mematok `text-align: left` untuk dirinya
 * sendiri, jadi label ini tidak akan terpusat hanya karena induknya begitu.
 *
 * Warna memakai --pdvip-muted (#4e6070) di atas latar halaman #fafafa: 6,29:1.
 * Ukurannya sudah kecil dan huruf besar semua -- konvensi label iklan -- jadi
 * kontrasnya TIDAK boleh ikut dikecilkan, dan font-weight 600 dipertahankan
 * justru karena ukurannya turun.
 */
.pdvip .pdvip-adlabel {
  margin: 0 0 6px;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--pdvip-muted);
}