:root {
--ink: #171533;
--ink-2: #211D45;
--paper: #FFFDF9;
--paper-2: #FFFFFF;
--sun: #FFC845;
--r-lg: 22px; 
--font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--ink-text: #000000;
--font-display: 'Space Grotesk', 'Segoe UI', sans-serif; }

*,
*::before,
*::after { box-sizing: border-box; }

.unixbsdshell { display: grid;grid-template-rows: auto 1fr auto; grid-template-areas:
"header"
"main"
"footer";}

header {grid-area: header;color: white;}

main {grid-area: main;margin: 0px;
padding: 20px; height: auto;}

footer {grid-area: footer;justify-content: center;}

body {
margin: 0px; padding:0px;
font-family: var(--font-body);
color: var(--ink-text);
background: var(--paper); 
font-size: 16px;
-webkit-text-size-adjust: 100%;
-webkit-font-feature-settings: "kern" 1;
-webkit-font-smoothing: antialiased;
-moz-font-feature-settings: "kern" 1;
-o-font-feature-settings: "kern" 1;font-feature-settings: "kern" 1;
font-kerning: normal;  }

/* HEADER */
.head-atas {display:flex;background-color: rgb(201, 194, 189); align-items:center;
height:30px;}.konsultasi{ justify-content: flex-start;flex: 50%;text-align:left;margin:20px;}
.konsultasi > span {margin-right:5px;font-size:14px;}.konsultasi > i {margin-right:2px;font-size:14px;}
.cari{justify-content: flex-end;text-align:right;flex: 50%;margin:20px;}
.head-tengah {display:flex;background-color: rgb(236, 235, 235); align-items:center;
height:30px;}

.kotak-logo { display: flex;margin-right:15px;margin-top: 0px; align-items:center;background-color: rgb(236, 235, 235);
 justify-content: center; width:100%;height:90px; }
.imgs-container { margin-left:15px;vertical-align: middle; text-align:center; }
.img-logo{ width: 81px; height: 55px;margin-right:15px;}

.judul-blog { display:flex; justify-content: center;flex-direction:column;height:90px;width:100%;margin-bottom:6px;
align-items:flex-start;}
.header-title { color:black;text-align:left;line-height: 1; position:relative;}
.header-title, h1 {margin-bottom:2px;margin-top:9px; }
.header-deskripsi, h2{ color:black;font-size:14.8px;margin-top:0px;}
.link-header{color:red;text-align: top;margin-top:0px;display:block;position:relative;text-decoration:none;}
.link-header:hover{color:blue;}


.nav-links { padding: 5px; background-color: #ffffff; border-radius: 10px 3px 0 0;text-decoration: none; color: black; }.nav-links:hover { background-color: #da0; text-decoration: none; color: white; }
/* HEADER */
/* Awal Footer */
.foot-auto {display: flex;  width: 100%; height: 100%; justify-content: center; flex-direction: column;}
.foot-gambar { display: flex; background-color: #959595; width: 100%; height: 70px; align-items: center; justify-content: center;}
.fig-foot {margin: 3px; }
.figure-foot {display: block; width: 100%; height: 100%;  object-fit: cover; }
.footer-nav {   margin: 0px; padding: 0px; background-color: #959595;}
.footer-he  { display: flex; justify-content: center; align-items: center; padding: 5px; height:30px; }
.footer-he a { color: black; text-decoration: none; padding: 5px 8px; border-radius: 4px; transition: background-color 0.3s ease; }
.footer-he a:hover { background-color: rgb(236, 235, 235); }
.footer-he a:focus { outline: 1px solid #3498db; outline-offset: 2px; }
.foot-atas { background-color: #D3D3D1; text-align: center; color: black; font-size: 16px;height:90px; }
.foot-atas p {margin:3px;} 
.foot-a {font-weight: 700; }
/* Ahir Footer */
/* DASHBOARD */
.site-home {display:grid; gap:20px;
grid-template-rows: 1fr 315px 315px 270px; grid-template-columns: 1fr;}
.halamanutama{ display:flex; background: var(--paper-2); padding:0px; margin: 25px 25px;border-radius: var(--r-lg);
transition: box-shadow .2s ease, transform .2s ease;border: 1px solid black;
box-shadow: 6px 6px 0 0 var(--ink); place-items: center; flex-direction:column;}
.media-body {display: block; text-align: center;}
.media-hello {background: var(--paper-2); width: 100%; height: auto; }
.home-media{justify-content: flex-start;text-align: left;padding:20px;}
.helloapa {font-size: 28px; font-weight: 600; margin-top:15px; margin-left:0px;}

button { display: inline-block;  border: 1px solid black;
border-radius: 15px; text-align:center;padding:12px;margin: 10px 15px 15px 0px; font-size: 15px;
font-weight: 600; text-decoration: none;background-color: #DCDCDC;
box-shadow: 0 4px 6px rgb(65 132 144 / 10%), 0 1px 3px rgb(0 0 0 / 8%); transition: box-shadow 0.2s; }
button, a {color:black;} button, a:hover {color:blue;} 

.img-dashboard { display: flex; justify-content: center; align-items: center; padding:10px; }
.img-jarak {margin: 3px;}
.penulis { display: flex;  align-items: flex-start;justify-content:flex-start;margin:0px 23px;padding:4px; }
.penulis1{font-size: 15px;text-align:left;margin-bottom:30px;}
.penulis-par {margin: 2px;  font-weight:500;} 
.teks-dash {font-size: 16px; margin-top: 12px; margin-bottom: 15px; }
/* DASHBOARD */
/* BLOG */
.post-content{display: flex;flex-direction:column;}
.tag-year{margin-top:5px;font-size: 15px;}.tag-yeara{color:red;font-weight:520;font-size:17px;}.tag-yearlabel{font-weight:520;font-size:17px;}
.blogtag{color:black}.ikon-blogtag{margin-right:5px;font-size:17px;}
/* .artikel-flex { display: flex; padding:0px; margin: 20px; } */
.artikel-dalam {display: flex;justify-content:center;
margin-left:13px;margin-right:13px;}
.blogs-title {font-size:24px;text-align: left;margin-top:20px;}
.blogs-title, a {color:blue;padding:0px;margin-left:0px;}
.judul-tag{display:block; position:relative; color:black; margin-bottom:20px; font-size:24px;margin-left:10px;border-bottom: 2px solid silver;margin-top:35px;}
.terbit {font-weight:bold; font-size:17px;}
.perbarui {margin-left:10px;font-weight:bold; font-size:17px;}.post-ukuran{font-style:normal;justify-content:flex-start;}
/* BLOG */
/* ARSIP TAGS /blog/tag/ */
.ikon-tagblogbtn {margin-bottom: 0px;padding-top:30px;}
.tags-btn {background-color: #FED205;  border-radius: 10px;border: 1px solid black;margin-right:8px;padding:3px;
text-align:center;}
.tagsa{margin-left: 0px;margin-right:0px;color:black;font-weight:500;font-size:16px;padding:8px;
font-weight:600;}.tagsa:hover{color:blue;}
/* ARSIP TAGS */
/* Artkel  */
.artikel-dalam {display: inline-block; position:relative;width:100%; height:auto;}
article {display: flex;justify-content:flex-start; flex-direction:column;
 margin-left:13px;margin-right:13px;}
.blogs-title {font-size:24px;text-align: left;margin-top:20px;}
.blogs-title, a {color:blue;padding:0px;margin-left:0px;}

.judul-artikel{ color:black; display:block;position:relative; border-bottom: 1px solid silver;
margin-top:30px; margin-bottom:0px;margin-left:0px;}

article h1{font-family: monospace; font-size:28px; margin-bottom: 5px; }
article h2{font-family: monospace; font-size:25px; margin-bottom: 1px;margin-top: 15px; }
article h3{font-family: monospace;font-size:22px; margin-bottom: 1px;margin-top: 15px; }
article h4{font-family: monospace;font-size:17px; margin-bottom: 10px; }
article h5{font-family: monospace;font-size:13px; margin-bottom: 10px; }
article h6{font-family: monospace;font-size:11px; margin-bottom: 10px; }
article p { word-break: break-word; font-size: 16px; margin-top:10px;margin-bottom: 10px; line-height: 23px;}
article ul { margin-left:20px;padding:0px;font-size:16px;}
article li { padding:2px;}
article i { font-weight: 549;}
.paginate-post{display: flex; justify-content: space-between; margin-top:50px;padding-top:0px; 
border-top: 1px solid grey;}
.row-kiri {display:block; position: relative; text-align: left; padding: 10px; color: black;margin-top:30px;
padding:0px;font-size:17px;}
.row-kanan {display:block; position: relative; text-align: right; padding: 10px; color: black;
margin-top:30px;padding:0px;font-size:17px;}
.bi-arrow-left{margin-right: 5px; text-align:center;}.bi-arrow-right{margin-left: 5px; text-align:center;}
.alink {color: blue;font-weight:600; }
.ikon-tag{font-size: 15px; margin-bottom: 10px;margin-top: 10px;}
/* Artkel  */


/* Code  */
code {  font-family: $monospace-font-family;}
code, pre {  background-color: #EDEDED; }
pre.highlight {  font-family: $monospace-font-family; padding: 5px; border: 1px dotted black; 
margin-top:1px;
margin-bottom: 10px; overflow-x: scroll; overflow-y: hidden;}
code.highlighter-rouge {  padding: 2px; background-color: #FBD0CA; border-radius: 5px;}
.text-body {background: rgb(231, 239, 3); border: 0px; margin-left:0px; margin-right:0px; padding: 0px 10px; font-size: 16px; line-height: 17px;}
.lh-base {background: rgb(238, 238, 238); border: 1px solid rgb(212, 212, 212); font-size: 14px; line-height: 17px; margin-bottom: 1.5em; margin-top: 0px; 
overflow: auto; padding: 12px; margin-left:0px; margin-right:0px;}
.cmd-head{background: rgb(231, 239, 3); border: 0px; font-family: Verdana, Geneva, sans-serif; font-size: 15px; margin: 0px; padding: 0px 10px;}

/* Code  */
/* GAMBAR di dalam ARTIKEL Awal */
.gbr-artikel { display: flex;  flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap;  }
.artikel-img { display:block; border: solid 3px silver; box-shadow: 2px 2px 15px rgba(0,0,0,0.8); margin-top: 10px; margin-bottom:15px;
width: 100%;  border-radius: 15px; vertical-align: middle;height: auto; }
.w-100 { display: flex;  flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap;  }
.img-fluid { border: solid 3px silver; box-shadow: 2px 2px 15px rgba(0,0,0,0.8); margin-top: 10px; margin-bottom:15px;
width: 100%;  border-radius: 15px; vertical-align: middle;
height: auto; }
.teks-gamabr { font-family: Gill Sans; color: #3C4301; font-weight: 600; 
font-size: 19px; padding: 15px;margin-top:2px; }
/* GAMBAR di dalam ARTIKEL Akhir */

/* TABEL awal */
.myTable { display:block; position: relative; width: 100%; text-align: left;  border-collapse: collapse; margin-bottom:35px; }
.myTable th { background-color: black;  color: white; border: 1px solid grey;  }
.myTable td,  { background-color: #EDEDED; padding: 10px; border: 1px solid grey;   }
/* TABEL akhir */
/* ABOUT */
.helloapa {font-size: 28px; font-weight: 600; margin-top:15px; margin-left:15px;}
.p1-about{font-size:15px; margin-left:15px;line-height:20px;}
/* ABOUT */
/* youtube awal */
.video-carousel { position: relative;  max-width: 1200px; margin: 0 auto;  overflow: hidden;  border-radius: 10px;  box-shadow: 0 4px 12px rgba(0,0,0,0.1); }  
.slides-wrapper { display: flex; transition: transform 0.5s ease-in-out; }  
.slide { min-width: 100%; padding: 1rem; }  
 .youtube-video {  width: 100%;  height: 450px; border-radius: 8px; }  
.nav-btn {  
    position: absolute;  
    top: 50%;  
    transform: translateY(-50%);  
    background: rgba(0,0,0,0.5);  
    color: white;  
    border: none;  
    padding: 1rem;  
    font-size: 1.5rem;  
    cursor: pointer;  
    z-index: 10; transition: background 0.3s ease; }   
.nav-btn:hover { background: rgba(0,0,0,0.8); }  
.prev-btn {  left: 0;  border-radius: 0 5px 5px 0;  }  
.next-btn { right: 0;  border-radius: 5px 0 0 5px;  }  
@media (max-width: 768px) {  
.youtube-video {  height: 250px; }  
.nav-btn { padding: 0.5rem;  font-size: 1rem;  }  
}
.main-video {display: flex; justify-content: center; padding: 30px; /* flex-direction: column; */}
.artik-video {display: block; justify-content: center; padding: 30px; } 
.carousel-h1 {display: block; text-align: center; font-size: 24px; font-weight: 500; padding:20px;}
.carous-judul {display: block; text-align: center; font-size: 24px; font-weight: 500;}
/* youtube akhir */