/*
Theme Name: Vendor Developer CV
Theme URI: https://example.com
Author: Studio Build
Author URI: https://example.com
Description: Tema WordPress satu halaman untuk CV/portofolio Vendor Developer. Menonjolkan penguasaan berbagai bahasa pemrograman lewat "terminal poliglot" yang hidup, daftar layanan vendor, portofolio proyek, dan kontak cepat via WhatsApp. Semua identitas (nama, jabatan, kontak, skill) bisa diatur lewat Customizer tanpa sentuh kode.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vendor-dev-cv
*/

/* ==========================================================================
   0. DESIGN TOKENS
   Konsep: "Polyglot Terminal" — panel gelap ala code editor, aksen indigo
   (variable/keyword) & amber (string/status), mono untuk judul & data,
   sans humanis untuk teks baca.
   ========================================================================== */
:root{
  --bg: #0B0F14;
  --bg-panel: #121821;
  --bg-panel-2: #0E141C;
  --bg-elevated: #171F2A;
  --border: #232E3D;
  --border-soft: #1A222D;

  --accent: #7C9EFF;       /* indigo — keyword/variable */
  --accent-dim: #4C63A6;
  --accent-2: #F2A93B;     /* amber — string/highlight */
  --accent-3: #3ED598;     /* mint — status "tersedia" */
  --accent-4: #FF6B6B;     /* soft red — angka/tag error-style */

  --text: #E7ECF3;
  --text-muted: #93A0B4;
  --text-faint: #5C6B7A;

  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 10px;
  --radius-sm: 6px;
  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(124,158,255,0.07), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(242,169,59,0.05), transparent 40%);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-mono); font-weight:700; letter-spacing:-0.01em; }
p{ margin:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.mono{ font-family:var(--font-mono); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ==========================================================================
   1. EYEBROW / SECTION LABELS  (dipakai sebagai "comment" gaya kode: // label)
   ========================================================================== */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--accent);
  margin-bottom:16px;
}
.eyebrow::before{ content:"//"; color:var(--text-faint); }

.section-title{
  font-size:clamp(26px,3.4vw,38px);
  line-height:1.2;
  margin-bottom:14px;
}
.section-title span{ color:var(--accent-2); }
.section-sub{
  color:var(--text-muted);
  max-width:640px;
  font-size:16px;
  margin-bottom:44px;
}
section{ padding:96px 0; border-bottom:1px solid var(--border-soft); }

/* ==========================================================================
   2. HEADER / NAV
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,15,20,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-weight:700; font-size:17px; color:var(--text); }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent-3); box-shadow:0 0 0 4px rgba(62,213,152,0.15); }
.brand .bracket{ color:var(--accent); }

.primary-menu{ display:flex; align-items:center; gap:34px; }
.primary-menu a{
  font-size:14.5px; color:var(--text-muted); font-weight:500;
  transition:color .15s ease;
}
.primary-menu a:hover{ color:var(--text); }

.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-3); color:#06251A;
  padding:10px 18px; border-radius:999px;
  font-weight:700; font-size:14px; font-family:var(--font-sans);
  transition:transform .15s ease, box-shadow .15s ease;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(62,213,152,0.25); }

.nav-toggle{ display:none; background:none; border:1px solid var(--border); border-radius:8px; padding:8px 10px; color:var(--text); }

@media (max-width: 880px){
  .primary-menu{
    position:absolute; top:74px; left:0; right:0;
    background:var(--bg-panel); border-bottom:1px solid var(--border);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 28px 18px;
    display:none;
  }
  .primary-menu.is-open{ display:flex; }
  .primary-menu li{ width:100%; padding:12px 0; border-bottom:1px solid var(--border-soft); }
  .nav-toggle{ display:inline-flex; }
}

/* ==========================================================================
   3. HERO — terminal signature element
   ========================================================================== */
.hero{ padding:88px 0 100px; border-bottom:1px solid var(--border-soft); }
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }

.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:var(--bg-panel);
  padding:7px 14px; border-radius:999px; font-family:var(--font-mono);
  font-size:12.5px; color:var(--accent-3); margin-bottom:22px;
}
.status-pill .blink{ width:7px; height:7px; border-radius:50%; background:var(--accent-3); animation:blink 1.6s infinite; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.hero h1{
  font-size:clamp(32px,4.6vw,52px);
  line-height:1.15;
  margin-bottom:6px;
}
.hero h1 .kw{ color:var(--accent); }
.hero h1 .str{ color:var(--accent-2); }
.hero h1 .punct{ color:var(--text-faint); }

.hero .role-line{
  font-family:var(--font-mono); color:var(--text-muted); font-size:16px;
  margin:14px 0 22px;
}
.hero .role-line strong{ color:var(--text); font-weight:600; }
.hero .role-line .company{ color:var(--accent-2); font-weight:600; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:8px; font-weight:600; font-size:14.5px;
  border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{ background:var(--accent-3); color:#06251A; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(62,213,152,0.22); }
.btn-outline{ border-color:var(--border); color:var(--text); background:var(--bg-panel); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost{ color:var(--text-muted); }
.btn-ghost:hover{ color:var(--text); }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:52px; border-top:1px solid var(--border-soft); padding-top:26px;
}
.hero-stats .stat{ padding-right:14px; }
.hero-stats .num{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--text); }
.hero-stats .num span{ color:var(--accent-2); }
.hero-stats .label{ font-size:12.5px; color:var(--text-faint); margin-top:4px; }
@media (max-width:640px){ .hero-stats{ grid-template-columns:repeat(2,1fr); row-gap:20px; } }

/* Terminal window (signature) */
.terminal{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
}
.terminal-bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; background:var(--bg-panel-2); border-bottom:1px solid var(--border-soft);
}
.terminal-bar .tdot{ width:10px; height:10px; border-radius:50%; }
.terminal-bar .tdot:nth-child(1){ background:#FF5F57; }
.terminal-bar .tdot:nth-child(2){ background:#FEBC2E; }
.terminal-bar .tdot:nth-child(3){ background:#28C840; }
.terminal-bar .tfile{ margin-left:10px; font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }
.terminal-body{ padding:22px 20px; font-family:var(--font-mono); font-size:13.5px; min-height:230px; }
.terminal-body .line{ margin-bottom:10px; color:var(--text-muted); }
.terminal-body .prompt{ color:var(--accent-3); }
.terminal-body .path{ color:var(--accent); }
.term-lang-line{ display:flex; gap:8px; }
.term-lang-tag{ color:var(--accent-2); min-width:78px; display:inline-block; }
.term-output{ color:var(--text); }
#typing-out{ color:var(--text); }
.cursor{ display:inline-block; width:8px; height:16px; background:var(--accent-2); vertical-align:middle; margin-left:2px; animation:blink 0.9s steps(1) infinite; }

/* ==========================================================================
   4. TENTANG / ABOUT
   ========================================================================== */
.about-grid{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:56px; align-items:start; }
@media (max-width:880px){ .about-grid{ grid-template-columns:1fr; } }
.about-photo{
  border-radius:14px; overflow:hidden; border:1px solid var(--border);
  aspect-ratio:4/5; background:var(--bg-panel);
  display:flex; align-items:center; justify-content:center;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-photo .ph-placeholder{ font-family:var(--font-mono); color:var(--text-faint); font-size:13px; text-align:center; padding:20px; }
.about-body p{ color:var(--text-muted); margin-bottom:16px; font-size:16px; }
.about-quote{
  margin-top:24px; padding:18px 20px; border-left:3px solid var(--accent);
  background:var(--bg-panel); border-radius:0 8px 8px 0;
  font-family:var(--font-mono); font-size:14px; color:var(--text);
}

/* ==========================================================================
   5. SKILLS — bahasa pemrograman
   ========================================================================== */
.skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:880px){ .skills-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .skills-grid{ grid-template-columns:1fr; } }

.skill-card{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:10px;
  padding:18px 18px 20px;
}
.skill-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.skill-name{ font-family:var(--font-mono); font-weight:700; font-size:15px; }
.skill-pct{ font-family:var(--font-mono); font-size:13px; color:var(--accent-2); }
.skill-bar{ height:6px; border-radius:999px; background:var(--bg-elevated); overflow:hidden; margin-bottom:8px; }
.skill-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-3)); border-radius:999px; width:0; transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
.skill-status{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); }
.skill-status::before{ content:"$ build --status "; color:var(--text-faint); }

/* ==========================================================================
   6. LAYANAN / SERVICES
   ========================================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:880px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:12px;
  padding:26px 22px; transition:border-color .15s ease, transform .15s ease;
}
.service-card:hover{ border-color:var(--accent-dim); transform:translateY(-3px); }
.service-idx{ font-family:var(--font-mono); font-size:12px; color:var(--accent-2); margin-bottom:14px; }
.service-card h3{ font-size:17px; margin-bottom:10px; }
.service-card p{ color:var(--text-muted); font-size:14.5px; }

/* ==========================================================================
   7. PORTOFOLIO / PROJECTS
   ========================================================================== */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:880px){ .portfolio-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .portfolio-grid{ grid-template-columns:1fr; } }
.project-card{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
}
.project-thumb{ aspect-ratio:16/10; background:var(--bg-elevated); position:relative; overflow:hidden; }
.project-thumb img{ width:100%; height:100%; object-fit:cover; }
.project-thumb .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }
.project-body{ padding:18px 18px 20px; }
.project-stack{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.stack-tag{ font-family:var(--font-mono); font-size:11px; color:var(--accent); border:1px solid var(--border); padding:3px 8px; border-radius:999px; }
.project-body h3{ font-size:16.5px; margin-bottom:8px; }
.project-body p{ color:var(--text-muted); font-size:14px; margin-bottom:14px; }
.project-link{ font-family:var(--font-mono); font-size:13px; color:var(--accent-2); }
.project-link:hover{ text-decoration:underline; }

/* ==========================================================================
   8. TESTIMONI
   ========================================================================== */
.testi-wrap{ position:relative; max-width:760px; }
.testi-slide{ display:none; background:var(--bg-panel); border:1px solid var(--border); border-radius:12px; padding:34px 30px; }
.testi-slide.is-active{ display:block; }
.testi-slide p{ font-size:17px; color:var(--text); margin-bottom:20px; }
.testi-author{ font-family:var(--font-mono); font-size:13.5px; color:var(--accent-2); }
.testi-author span{ color:var(--text-faint); }
.testi-dots{ display:flex; gap:8px; margin-top:18px; }
.testi-dots button{ width:8px; height:8px; border-radius:50%; background:var(--border); border:none; cursor:pointer; padding:0; }
.testi-dots button.is-active{ background:var(--accent); }

/* ==========================================================================
   8b. GALERI KERJA SAMA — slideshow
   ========================================================================== */
.gallery-slideshow{ position:relative; max-width:820px; }

.gs-viewport{
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--bg-panel);
}

.gs-media{ position:relative; aspect-ratio:16/10; background:var(--bg-panel-2); overflow:hidden; }
.gs-image-btn.gs-slide{
  position:absolute; inset:0; display:none;
  width:100%; height:100%; padding:0; margin:0; border:none; cursor:pointer;
}
.gs-image-btn.gs-slide.is-active{ display:block; }
.gs-image-btn img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gs-image-btn:hover img{ transform:scale(1.03); }

.gs-info-wrap{ padding:20px 22px 22px; border-top:1px solid var(--border-soft); min-height:26px; }
.gs-info.gs-slide{ display:none; }
.gs-info.gs-slide.is-active{ display:block; }
.gs-title{ font-family:var(--font-mono); font-size:17px; margin-bottom:8px; }
.gs-caption{ color:var(--text-muted); font-size:14.5px; }

.gs-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(11,15,20,0.75); border:1px solid var(--border); color:var(--text);
  width:42px; height:42px; border-radius:50%; font-size:20px; cursor:pointer; line-height:1;
  z-index:5;
}
.gs-nav:hover{ border-color:var(--accent); color:var(--accent); }
.gs-prev{ left:14px; }
.gs-next{ right:14px; }

.gs-dots{ display:flex; gap:8px; margin-top:16px; justify-content:center; }
.gs-dots button{ width:8px; height:8px; border-radius:50%; background:var(--border); border:none; cursor:pointer; padding:0; }
.gs-dots button.is-active{ background:var(--accent); width:22px; border-radius:999px; transition:width .2s ease; }

.gallery-empty{
  font-family:var(--font-mono); color:var(--text-faint); font-size:13px;
  border:1px dashed var(--border); border-radius:10px; padding:32px; text-align:center;
}

.vdcv-lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,9,13,0.94);
  display:none; align-items:center; justify-content:center;
  padding:40px;
}
.vdcv-lightbox.is-open{ display:flex; }
.lb-figure{ margin:0; max-width:min(900px,90vw); max-height:85vh; text-align:center; }
.lb-figure img{ max-width:100%; max-height:75vh; border-radius:10px; border:1px solid var(--border); margin:0 auto; }
.lb-figure figcaption{ margin-top:14px; font-family:var(--font-mono); font-size:13.5px; color:var(--text-muted); }
.lb-close{
  position:absolute; top:22px; right:26px; background:var(--bg-panel); border:1px solid var(--border);
  color:var(--text); width:40px; height:40px; border-radius:50%; font-size:16px; cursor:pointer;
}
.lb-close:hover{ border-color:var(--accent); color:var(--accent); }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:var(--bg-panel); border:1px solid var(--border); color:var(--text);
  width:46px; height:46px; border-radius:50%; font-size:22px; cursor:pointer; line-height:1;
}
.lb-nav:hover{ border-color:var(--accent); color:var(--accent); }
.lb-prev{ left:24px; }
.lb-next{ right:24px; }
@media (max-width:640px){
  .lb-nav{ width:38px; height:38px; font-size:18px; }
  .lb-prev{ left:8px; } .lb-next{ right:8px; }
  .lb-close{ top:12px; right:12px; }
}

/* ==========================================================================
   9. KONTAK
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-list{ margin-top:24px; }
.contact-list li{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-soft); font-size:15px; }
.contact-list .k{ font-family:var(--font-mono); color:var(--text-faint); min-width:100px; font-size:13px; }
.contact-list a:hover{ color:var(--accent); }

.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); margin-bottom:7px; }
.field input, .field textarea{
  width:100%; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; color:var(--text); font-family:var(--font-sans); font-size:14.5px;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus{ border-color:var(--accent); outline:none; }

/* ==========================================================================
   10. FOOTER + floating WA
   ========================================================================== */
.site-footer{ padding:36px 0; }
.site-footer .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.footer-note{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); }
.footer-social{ display:flex; gap:16px; }
.footer-social a{ color:var(--text-muted); font-size:13.5px; }
.footer-social a:hover{ color:var(--accent); }

.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent-3); color:#06251A; padding:13px 18px; border-radius:999px;
  font-weight:700; font-size:14px; box-shadow:0 14px 30px rgba(62,213,152,0.3);
  transition:transform .15s ease;
}
.wa-float:hover{ transform:translateY(-2px) scale(1.02); }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============ REEL / SLIDER STYLES ============ */
.portfolio-reel-container {
	position: relative;
	display: flex;
	align-items: center;
}

.portfolio-reel {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 15px 5px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
}

.portfolio-reel::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.reel-item {
	flex: 0 0 320px; /* Lebar per kartu reel */
	scroll-snap-align: start;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reel-item:hover {
	transform: translateY(-5px);
}

.view-detail-btn {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--primary-color, #0073aa);
}

/* Navigasi Tombol Reel */
.reel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.reel-nav.prev { left: -15px; }
.reel-nav.next { right: -15px; }

/* ============ MODAL STYLES ============ */
.portfolio-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.portfolio-modal.active {
	opacity: 1;
	visibility: visible;
}

.modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
}

.modal-content {
	position: relative;
	background: #fff;
	width: 90%;
	max-width: 750px;
	max-height: 85vh;
	overflow-y: auto;
	border-radius: 12px;
	padding: 30px;
	z-index: 2;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.modal-close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: transparent;
	border: none;
	font-size: 28px;
	cursor: pointer;
	line-height: 1;
}

.modal-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.modal-thumb img {
	width: 100%;
	height: auto;
	max-height: 350px;
	object-fit: cover;
	border-radius: 8px;
}

.modal-desc {
	margin: 15px 0;
	line-height: 1.6;
	color: #444;
}

.modal-btn {
	display: inline-block;
	padding: 10px 20px;
	background: #0073aa;
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
}