@charset "utf-8";
/* ============================================================
   site.css - Layout & konten portofolio Bondan Prakoso
   Bergantung pada vb6.css
   ============================================================ */

/* ------------------------------------------------------------
   Caption jendela per halaman (digerakkan class di <body>)
   ------------------------------------------------------------ */
.p-home    .cap::after{content:" - [frmHome (Form)]"}
.p-exp     .cap::after{content:" - [frmExperience (Form)]"}
.p-skill   .cap::after{content:" - [frmSkills (Form)]"}
.p-blog    .cap::after{content:" - [frmBlog (Form)]"}
.p-contact .cap::after{content:" - [frmContact (Form)]"}
.p-post    .cap::after{content:" - [modBlogPost (Code)]"}

.p-home    .st-file::after{content:"frmHome.frm"}
.p-exp     .st-file::after{content:"frmExperience.frm"}
.p-skill   .st-file::after{content:"frmSkills.frm"}
.p-blog    .st-file::after{content:"frmBlog.frm"}
.p-contact .st-file::after{content:"frmContact.frm"}
.p-post    .st-file::after{content:"modBlogPost.bas"}

/* ------------------------------------------------------------
   Penanda item aktif di Project Explorer + Taskbar
   ------------------------------------------------------------ */
.p-home .nav-home,
.p-exp .nav-exp,
.p-skill .nav-skill,
.p-blog .nav-blog,
.p-post .nav-blog,
.p-contact .nav-contact{background:var(--sel);color:#fff}

.p-home .nav-home .lbl,
.p-exp .nav-exp .lbl,
.p-skill .nav-skill .lbl,
.p-blog .nav-blog .lbl,
.p-post .nav-blog .lbl,
.p-contact .nav-contact .lbl{text-decoration:none}

.p-home .tk-home,
.p-exp .tk-exp,
.p-skill .tk-skill,
.p-blog .tk-blog,
.p-post .tk-blog,
.p-contact .tk-contact{
  font-weight:bold;
  border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
  background:var(--face) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23d4d0c8'/%3E%3Crect width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   Kartu profil (hero)
   ------------------------------------------------------------ */
.hero{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.avatar{
  width:116px;height:138px;flex:none;
  background:#fff center / cover no-repeat;
  background-image:url("../img/bondan-prakoso.jpg");
  border:2px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
}
.hero-body{flex:1 1 300px;min-width:0}
.hero h1{
  margin:0 0 2px;font-size:22px;line-height:1.15;letter-spacing:.5px;
  color:var(--sel);
}
.hero .role{margin:0 0 10px;font-size:13px;font-weight:bold;color:#000}
.hero .role em{font-style:normal;color:#404040;font-weight:normal}

/* Deret label + textbox */
.kv{display:grid;grid-template-columns:104px minmax(0,1fr);gap:5px 9px;align-items:center}
.kv > dt{font-size:11px;color:#000;padding-top:1px}
.kv > dd{margin:0;min-width:0}
.kv .txt{padding:3px 5px;font-size:11px}
@media (max-width:520px){
  .kv{grid-template-columns:minmax(0,1fr);gap:2px}
  .kv > dt{margin-top:6px}
}

/* Papan statistik */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px}
.stat{
  background:var(--face);padding:9px 10px;text-align:center;
  border:2px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh);
}
.stat b{display:block;font-size:24px;line-height:1.1;color:var(--sel);font-family:var(--mono)}
.stat span{display:block;font-size:11px;color:#000;margin-top:3px}

/* ------------------------------------------------------------
   Teks umum di dalam form
   ------------------------------------------------------------ */
.prose{font-size:12px;line-height:1.62;color:#000}
.prose p{margin:0 0 10px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:#000}

.bullets{list-style:none;margin:0;padding:0;font-size:12px;line-height:1.6}
.bullets li{position:relative;padding-left:17px;margin-bottom:7px}
.bullets li:last-child{margin-bottom:0}
.bullets li::before{
  content:"";position:absolute;left:2px;top:.5em;
  width:7px;height:7px;background:var(--sel);
  border:1px solid #000;
}
.bullets a{color:var(--sel)}

/* ------------------------------------------------------------
   Pengalaman kerja
   ------------------------------------------------------------ */
.job-head{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  justify-content:space-between;margin-bottom:3px;
}
.job-co{font-size:14px;font-weight:bold;color:var(--sel);margin:0}
.job-date{
  font-size:11px;font-family:var(--mono);color:#000;background:var(--face);
  padding:2px 6px;white-space:nowrap;
  border:1px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
}
.job-role{
  display:inline-block;margin:0 0 10px;padding:3px 8px;
  font-size:12px;font-weight:bold;background:var(--sel);color:#fff;
}
.job-meta{margin:0 0 10px;font-size:11px;color:#404040}
.job-meta a{color:var(--sel)}
.job-link{display:flex;align-items:center;gap:5px;font-size:11px;margin-top:9px}
.job-link a{color:var(--sel)}

/* Badge */
.tag{
  display:inline-block;padding:1px 6px;margin:0 4px 4px 0;font-size:11px;
  background:var(--face);color:#000;
  border:1px solid;border-color:var(--hl) var(--sh) var(--sh) var(--hl);
}
.tags{margin-top:8px}

/* ------------------------------------------------------------
   Keahlian
   ------------------------------------------------------------ */
.skill-list{list-style:none;margin:0;padding:0}
.skill-list li{
  display:flex;align-items:center;gap:8px;
  padding:5px 2px;font-size:12px;
  border-bottom:1px solid var(--face2);
}
.skill-list li:last-child{border-bottom:0}
.skill-list b{flex:1;min-width:0;font-weight:bold}
.skill-list .lvl{
  flex:none;font-size:11px;color:#404040;background:var(--face);padding:1px 7px;
  border:1px solid;border-color:var(--hl) var(--sh) var(--sh) var(--hl);
}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:0 16px}

/* ------------------------------------------------------------
   Blog
   ------------------------------------------------------------ */
.lv-toolbar{
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  padding:5px 6px;margin-bottom:8px;background:var(--face);
  border:1px solid;border-color:var(--hl) var(--sh) var(--sh) var(--hl);
}
.lv-toolbar .combo{min-width:158px}
.lv-toolbar .lbl-c{margin:0}

.article{font-size:13px;line-height:1.68;color:#000}
.article h1{
  margin:0 0 6px;font-size:20px;line-height:1.25;color:var(--sel);
}
.article .meta{
  margin:0 0 16px;padding-bottom:9px;font-size:11px;color:#404040;
  border-bottom:1px solid var(--face2);
}
.article .meta b{color:#000}
.article h2{
  margin:22px 0 8px;font-size:15px;color:#000;
  padding-bottom:3px;border-bottom:2px solid var(--face);
}
.article h3{margin:18px 0 6px;font-size:13px;color:var(--sel)}
.article p{margin:0 0 12px}
.article ul,.article ol{margin:0 0 12px;padding-left:22px}
.article li{margin-bottom:6px}
.article a{color:var(--sel)}
.article code:not(pre code){
  font:12px var(--mono);background:var(--face);padding:1px 4px;
  border:1px solid var(--face2);
}
.article .code{margin:0 0 14px}
.article hr{border:0;border-top:1px solid var(--sh);border-bottom:1px solid var(--hl);margin:20px 0}

/* Pembungkus tabel: menggulir sendiri saat layar sempit,
   supaya halaman tidak ikut meluber ke samping */
.tbl-scroll{overflow-x:auto;margin:0 0 14px;max-width:100%}
.tbl-scroll .lv{margin-bottom:0;min-width:440px}
.article .lv th,.article .lv td{font-size:12px}
.article .lv code{white-space:nowrap}

/* Callout ala MsgBox */
.note{
  display:flex;gap:11px;align-items:flex-start;
  margin:0 0 14px;padding:11px 12px;background:var(--face);
  border:2px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh);
}
.note .ni{
  width:32px;height:32px;flex:none;background:center/32px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23000080' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='16' cy='9' r='2.6' fill='%23fff'/%3E%3Crect x='13.6' y='13' width='4.8' height='12' fill='%23fff'/%3E%3C/svg%3E");
}
.note.is-warn .ni{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 2l14 27H2z' fill='%23ffd800' stroke='%23000' stroke-width='2'/%3E%3Crect x='14.4' y='11' width='3.2' height='11' fill='%23000'/%3E%3Ccircle cx='16' cy='25' r='2' fill='%23000'/%3E%3C/svg%3E");
}
.note > div{flex:1;min-width:0}
.note b{display:block;margin-bottom:4px}
.note p{margin:0}

/* Navigasi antar-artikel */
.post-nav{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:space-between;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--face2);
}

/* ------------------------------------------------------------
   Elemen "jadul" ekstra
   ------------------------------------------------------------ */
.ticker{overflow:hidden;flex:1;min-width:0}
.ticker > span{display:inline-block;white-space:nowrap;padding-left:100%;animation:tick 26s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}

@media (prefers-reduced-motion:reduce){
  .ticker > span{animation:none;padding-left:0}
}

.hr-etch{border:0;border-top:1px solid var(--sh);border-bottom:1px solid var(--hl);margin:14px 0}

/* Baris "under construction" untuk footer form */
.footnote{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:13px;font-size:11px;color:#404040;
}
.footnote a{color:var(--sel)}