/* =========================================================
   PORTOFOLIO PERSONAL — main.css
   Palet & tipografi didesain khusus (bukan default generik):
   - Latar: putih kertas hangat, bukan krem klise
   - Aksen: indigo dalam + hijau mint sebagai penyeimbang
   - Font: Fraunces (display) + Inter (body) + JetBrains Mono (label/status)
   ========================================================= */

:root {
	--pp-bg:        #FAFAF8;
	--pp-bg-alt:    #F1F2ED;
	--pp-ink:       #16181D;
	--pp-ink-soft:  #52565E;
	--pp-line:      #E1E2DC;
	--pp-accent:    #3D3AF1;   /* indigo pekat — tombol, link, highlight */
	--pp-accent-2:  #1F8A70;   /* hijau mint tua — status/berhasil */
	--pp-card:      #FFFFFF;

	--pp-font-display: 'Fraunces', Georgia, serif;
	--pp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--pp-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

	--pp-radius: 14px;
	--pp-max: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--pp-bg);
	color: var(--pp-ink);
	font-family: var(--pp-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.pp-container {
	max-width: var(--pp-max);
	margin: 0 auto;
	padding: 0 24px;
}

.pp-mono { font-family: var(--pp-font-mono); }

.pp-eyebrow {
	text-transform: lowercase;
	letter-spacing: 0.04em;
	font-size: 13px;
	color: var(--pp-accent-2);
	margin: 0 0 10px;
}

.pp-section-title {
	font-family: var(--pp-font-display);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.15;
	margin: 0 0 16px;
	max-width: 18ch;
}

.pp-section-text {
	color: var(--pp-ink-soft);
	max-width: 62ch;
	font-size: 17px;
}

/* ---------- Header / Nav ---------- */
.pp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 250, 248, 0.86);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--pp-line);
}

.pp-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
}

.pp-logo {
	font-family: var(--pp-font-mono);
	font-weight: 600;
	font-size: 16px;
	display: flex;
	gap: 2px;
}
.pp-logo-mark { color: var(--pp-accent); }

#pp-nav {
	font-size: 14.5px;
	font-weight: 500;
}
#pp-nav,
#pp-nav ul.pp-menu {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
#pp-nav li,
#pp-nav ul.pp-menu li,
#pp-nav .menu-item {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* Selector eksplisit lawan plugin/page builder (mis. Elementor) yang menerapkan
   typography global ke semua ".menu-item a" di seluruh situs — ID + !important
   dipakai di sini supaya gaya tema ini yang menang. */
#pp-nav a,
#pp-nav .menu-item > a,
#pp-nav ul.pp-menu li a {
	color: var(--pp-ink-soft) !important;
	transition: color .15s;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
	font-family: var(--pp-font-body) !important;
}
#pp-nav a:hover, #pp-nav a:focus-visible { color: var(--pp-accent) !important; }
#pp-nav .current-menu-item > a,
#pp-nav .current_page_item > a { color: var(--pp-accent) !important; }
#pp-nav .sub-menu {
	list-style: none !important;
	position: absolute;
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-radius: 10px;
	padding: 8px !important;
	margin-top: 12px !important;
	display: none;
	flex-direction: column;
	gap: 4px;
	min-width: 180px;
	box-shadow: 0 16px 32px -20px rgba(22,24,29,0.3);
}
#pp-nav li:hover > .sub-menu,
#pp-nav li:focus-within > .sub-menu { display: flex; }
#pp-nav .menu-item-has-children { position: relative; }

.pp-nav-toggle {
	display: none;
	background: none;
	border: none;
	width: 34px;
	height: 34px;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
}
.pp-nav-toggle span {
	display: block;
	height: 2px;
	background: var(--pp-ink);
	border-radius: 2px;
}

/* ---------- Hero ---------- */
.pp-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
	padding: 72px 24px 56px;
}

.pp-hero-headline {
	font-family: var(--pp-font-display);
	font-weight: 700;
	font-size: clamp(34px, 5.2vw, 58px);
	line-height: 1.08;
	margin: 10px 0 20px;
}

.pp-hero-subtext {
	color: var(--pp-ink-soft);
	font-size: 18px;
	max-width: 46ch;
	margin: 0 0 28px;
}

.pp-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14.5px;
	transition: transform .15s ease, background .15s ease;
	border: 1px solid transparent;
}
.pp-btn-primary {
	background: var(--pp-accent);
	color: #fff;
}
.pp-btn-primary:hover { transform: translateY(-2px); }
.pp-btn-ghost {
	border-color: var(--pp-line);
	color: var(--pp-ink);
}
.pp-btn-ghost:hover { border-color: var(--pp-accent); color: var(--pp-accent); }

.pp-hero-card {
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	box-shadow: 0 20px 40px -28px rgba(22,24,29,0.25);
	overflow: hidden;
}
.pp-hero-card-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	background: var(--pp-bg-alt);
	border-bottom: 1px solid var(--pp-line);
}
.pp-dot {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--pp-line);
}
.pp-hero-card-title {
	margin-left: 8px;
	font-size: 12.5px;
	color: var(--pp-ink-soft);
}
.pp-hero-card-body { padding: 22px; font-size: 14.5px; }
.pp-hero-card-body p { margin: 0 0 10px; }
.pp-token-key { color: var(--pp-accent); }
.pp-token-bool { color: var(--pp-accent-2); }
.pp-caret {
	color: var(--pp-accent);
	animation: pp-blink 1.1s steps(1) infinite;
}
@keyframes pp-blink { 50% { opacity: 0; } }

/* ---------- Stats marquee ---------- */
.pp-stats-strip {
	border-top: 1px solid var(--pp-line);
	border-bottom: 1px solid var(--pp-line);
	background: var(--pp-bg-alt);
	overflow: hidden;
	padding: 14px 0;
}
.pp-stats-track {
	display: flex;
	gap: 40px;
	white-space: nowrap;
	width: max-content;
	animation: pp-scroll 26s linear infinite;
	font-size: 13.5px;
}
.pp-stat strong { color: var(--pp-accent); margin-right: 6px; }
@keyframes pp-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.pp-stats-track { animation: none; }
	.pp-caret { animation: none; }
}

/* ---------- Sections ---------- */
.pp-section { padding: 88px 24px; }
.pp-section-alt { background: var(--pp-bg-alt); }
.pp-about-text { font-size: 18px; }

.pp-about-layout.pp-about-has-image {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
}
.pp-about-image {
	border-radius: var(--pp-radius);
	overflow: hidden;
	border: 1px solid var(--pp-line);
}
.pp-about-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Skills ---------- */
.pp-skills-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	margin-top: 40px;
}
.pp-skill-group-name {
	font-family: var(--pp-font-display);
	font-size: 20px;
	margin: 0 0 20px;
}
.pp-skill-item { margin-bottom: 16px; }
.pp-skill-item-label {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	margin-bottom: 6px;
}
.pp-skill-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--pp-line);
	overflow: hidden;
}
.pp-skill-bar-fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--pp-accent), var(--pp-accent-2));
	transition: width 1.1s cubic-bezier(.22,1,.36,1);
}
.pp-skill-bar-fill.pp-in-view { width: var(--pp-percent); }

/* ---------- Portfolio ---------- */
.pp-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 40px;
}
.pp-project-card {
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	overflow: hidden;
	display: block;
	transition: transform .18s ease, box-shadow .18s ease;
}
.pp-project-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 36px -26px rgba(22,24,29,0.3);
}
.pp-project-thumb {
	height: 100%;
	background: repeating-linear-gradient(135deg, var(--pp-bg-alt), var(--pp-bg-alt) 10px, #EAEBE4 10px, #EAEBE4 20px);
	border-bottom: 1px solid var(--pp-line);
	overflow: hidden;
}
.pp-project-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-project-thumb-link { display: block; }
.pp-project-title a { color: var(--pp-ink); }
.pp-project-title a:hover { color: var(--pp-accent); }
.pp-project-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}
.pp-project-btn {
	padding: 9px 16px;
	font-size: 13px;
}
.pp-download-icon {
	vertical-align: -2px;
	margin-left: 2px;
}
.pp-project-body { padding: 22px; }
.pp-project-tag { color: var(--pp-accent-2); font-size: 12px; }
.pp-project-title {
	font-family: var(--pp-font-display);
	font-size: 21px;
	margin: 8px 0 8px;
}
.pp-project-desc { color: var(--pp-ink-soft); font-size: 14.5px; margin: 0 0 14px; }
.pp-project-status { font-size: 12.5px; color: var(--pp-accent-2); }

/* ---------- Testimonials ---------- */
.pp-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 40px;
}
.pp-testimonial-card {
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 24px;
}
.pp-stars { color: var(--pp-accent-2); letter-spacing: 2px; margin-bottom: 10px; }
.pp-testimonial-quote { font-size: 15px; color: var(--pp-ink); margin: 0 0 18px; }
.pp-testimonial-person { display: flex; align-items: center; gap: 12px; }
.pp-avatar-letter {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--pp-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-family: var(--pp-font-display);
	flex-shrink: 0;
}
.pp-avatar-photo {
	width: 36px; height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	display: block;
}
.pp-testimonial-name { margin: 0; font-weight: 600; font-size: 14px; }
.pp-testimonial-role { margin: 0; font-size: 13px; color: var(--pp-ink-soft); }

/* ---------- Contact ---------- */
.pp-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
.pp-contact-list { list-style: none; padding: 0; margin: 24px 0; font-size: 15px; }
.pp-contact-list li { margin-bottom: 10px; }
.pp-contact-list span { color: var(--pp-accent); margin-right: 8px; }
.pp-social-links { display: flex; gap: 16px; font-weight: 600; font-size: 14px; }
.pp-social-links a { color: var(--pp-accent); }

.pp-contact-form {
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.pp-form-note { font-size: 12.5px; color: var(--pp-ink-soft); margin: 0 0 6px; }
.pp-contact-form label { font-size: 13.5px; font-weight: 600; display: flex; flex-direction: column; gap: 6px; }
.pp-contact-form input,
.pp-contact-form textarea {
	font-family: var(--pp-font-body);
	font-size: 14.5px;
	padding: 11px 12px;
	border: 1px solid var(--pp-line);
	border-radius: 8px;
	background: var(--pp-bg);
	resize: vertical;
}

/* ---------- Breadcrumbs ---------- */
.pp-breadcrumbs { margin-bottom: 20px; }
.pp-breadcrumbs ol {
	list-style: none !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 13px;
	color: var(--pp-ink-soft);
}
.pp-breadcrumbs li {
	margin: 0 !important;
	padding: 0 !important;
}
.pp-breadcrumbs a { color: var(--pp-accent); }
.pp-breadcrumbs a:hover { text-decoration: underline; }
.pp-breadcrumb-sep { color: var(--pp-line); }

/* ---------- Featured image (single/page) ---------- */
.pp-featured-image {
	margin: 24px 0 32px;
	border-radius: var(--pp-radius);
	overflow: hidden;
	border: 1px solid var(--pp-line);
}
.pp-featured-image img { width: 100%; height: auto; display: block; }
.pp-featured-image figcaption {
	padding: 10px 14px;
	font-size: 13px;
	color: var(--pp-ink-soft);
	background: var(--pp-bg-alt);
}

.pp-single-title { max-width: none; }
.pp-post-content { max-width: 72ch; font-size: 17px; }
.pp-post-content h2,
.pp-post-content h3 { scroll-margin-top: 96px; }
.pp-post-content p { margin: 0 0 18px; }
.pp-post-content img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
	margin: 12px 0;
}
.pp-post-tags { display: flex; gap: 10px; margin-top: 28px; }
.pp-post-tags a {
	padding: 6px 12px;
	border: 1px solid var(--pp-line);
	border-radius: 999px;
	font-size: 12.5px;
	color: var(--pp-accent-2);
}

/* ---------- Blog grid (archive/index) ---------- */
.pp-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 32px;
}
.pp-post-card {
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	overflow: hidden;
}
.pp-post-card-thumb { aspect-ratio: 16 / 9; overflow: hidden; }
.pp-post-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-post-card-thumb-placeholder {
	background: repeating-linear-gradient(135deg, var(--pp-bg-alt), var(--pp-bg-alt) 10px, #EAEBE4 10px, #EAEBE4 20px);
}
.pp-post-card-body { padding: 20px 22px; }
.pp-post-card-body a { color: var(--pp-ink); }
.pp-post-card-body a:hover { color: var(--pp-accent); }

/* ---------- Layout post + sidebar ---------- */
.pp-post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px;
	align-items: start;
}
.pp-post-main { min-width: 0; }

.pp-sidebar {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Box detail proyek */
.pp-project-box {
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	overflow: hidden;
}
.pp-project-box-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	background: var(--pp-bg-alt);
	border-bottom: 1px solid var(--pp-line);
}
.pp-project-box-title { margin-left: 8px; font-size: 12.5px; color: var(--pp-ink-soft); }
.pp-project-box-body { padding: 20px; }

.pp-detail-row {
	padding: 14px 0;
	border-bottom: 1px solid var(--pp-line);
}
.pp-detail-meta {
	margin: 0 0 14px !important;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--pp-line);
}
.pp-detail-row:last-of-type { border-bottom: none; }
.pp-detail-label {
	display: block;
	font-size: 11.5px;
	color: var(--pp-accent-2);
	margin-bottom: 6px;
	letter-spacing: 0.03em;
}
.pp-detail-value { font-size: 14.5px; line-height: 1.5; }

.pp-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-tool-tag {
	font-size: 12px;
	padding: 4px 10px;
	background: var(--pp-bg-alt);
	border: 1px solid var(--pp-line);
	border-radius: 999px;
	font-family: var(--pp-font-mono);
}

.pp-demo-btn {
	width: 100%;
	margin-top: 6px;
	padding: 11px 20px;
	font-size: 13.5px;
}

/* Widget area di sidebar */
.pp-widget { 
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 20px;
}
.pp-widget-title {
	font-family: var(--pp-font-display);
	font-size: 17px;
	margin: 0 0 14px;
}

/* ---------- Aksesibilitas: skip link & screen-reader-text ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.pp-skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	width: auto; height: auto;
	clip: auto;
	z-index: 9999;
	background: var(--pp-accent);
	color: #fff;
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Navigasi post sebelumnya/selanjutnya ---------- */
.pp-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--pp-line);
}
.pp-post-nav-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	border: 1px solid var(--pp-line);
	border-radius: 10px;
	transition: border-color .15s;
}
.pp-post-nav-link:hover { border-color: var(--pp-accent); }
.pp-post-nav-next { grid-column: 2; text-align: right; }
.pp-post-nav-label { font-size: 11.5px; color: var(--pp-accent-2); }
.pp-post-nav-title { font-size: 14.5px; font-weight: 600; }

/* ---------- Komentar ---------- */
.pp-comments-wrap { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--pp-line); }
.pp-comment-list { list-style: none; margin: 24px 0; padding: 0; }
.pp-comment-list .comment,
.pp-comment-list li { list-style: none; margin: 0 0 20px; }
.pp-comment-list .children { list-style: none; margin: 16px 0 0 32px; padding: 0; }
.pp-comments-wrap .comment-body {
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-radius: 10px;
	padding: 16px 18px;
}
.pp-comments-wrap .comment-author img { border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.pp-comments-wrap .comment-metadata { font-size: 12px; color: var(--pp-ink-soft); margin-bottom: 8px; }
.pp-comments-wrap .comment-content p { margin: 0; font-size: 14.5px; }
.pp-comments-wrap .comment-reply-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pp-accent);
}
.pp-comments-wrap .comment-respond { margin-top: 24px; }
.pp-comments-wrap .comment-form p { margin: 0 0 14px; }
.pp-comments-wrap .comment-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.pp-comments-wrap .comment-form input[type="text"],
.pp-comments-wrap .comment-form input[type="email"],
.pp-comments-wrap .comment-form input[type="url"],
.pp-comments-wrap .comment-form textarea {
	width: 100%;
	font-family: var(--pp-font-body);
	font-size: 14.5px;
	padding: 11px 12px;
	border: 1px solid var(--pp-line);
	border-radius: 8px;
	background: var(--pp-bg);
}

/* ---------- Form pencarian ---------- */
.pp-search-form { display: flex; gap: 10px; }
.pp-search-input {
	flex: 1;
	font-family: var(--pp-font-body);
	font-size: 14.5px;
	padding: 11px 14px;
	border: 1px solid var(--pp-line);
	border-radius: 999px;
	background: var(--pp-card);
}

/* ---------- Pagination ---------- */
.pp-page-intro { margin-bottom: 8px; }
.nav-links,
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--pp-line);
	border-radius: 8px;
	font-size: 13.5px;
	font-family: var(--pp-font-mono);
	color: var(--pp-ink-soft);
	background: var(--pp-card);
}
.page-numbers.current { background: var(--pp-accent); border-color: var(--pp-accent); color: #fff; }
.page-numbers:hover:not(.current) { border-color: var(--pp-accent); color: var(--pp-accent); }
.page-numbers.dots { border: none; background: none; }

/* =========================================================
   UTILITY CLASS WARNA — bisa dipakai di editor manapun:
   - Gutenberg: isi di panel blok → Advanced → "Additional CSS Class(es)"
   - Elementor: pilih elemen → tab Advanced → "CSS Classes"
   Tinggal ketik nama class-nya (tanpa titik), contoh: pp-bg-accent
   ========================================================= */

/* Warna teks */
.pp-text-accent  { color: var(--pp-accent) !important; }
.pp-text-accent2 { color: var(--pp-accent-2) !important; }
.pp-text-ink     { color: var(--pp-ink) !important; }
.pp-text-ink-soft{ color: var(--pp-ink-soft) !important; }
.pp-text-white   { color: #FFFFFF !important; }

/* Warna latar belakang */
.pp-bg-accent  { background-color: var(--pp-accent) !important; }
.pp-bg-accent2 { background-color: var(--pp-accent-2) !important; }
.pp-bg-card    { background-color: var(--pp-card) !important; }
.pp-bg-alt     { background-color: var(--pp-bg-alt) !important; }
.pp-bg-ink     { background-color: var(--pp-ink) !important; }

/* Warna border */
.pp-border-accent  { border-color: var(--pp-accent) !important; }
.pp-border-accent2 { border-color: var(--pp-accent-2) !important; }
.pp-border-line     { border-color: var(--pp-line) !important; }

/* ---------- Komponen siap pakai: Toggle Monthly/Yearly ---------- */
/* Cara pakai: buat 2 elemen teks/tombol bersebelahan (mis. 2 widget Button
   Elementor dalam 1 grup, atau 2 elemen di dalam 1 Container/Grup), beri
   class "pp-toggle-pill" pada wrapper-nya, lalu "pp-toggle-item" di tiap
   pilihan, dan "pp-toggle-active" pada pilihan yang sedang aktif. */
.pp-toggle-pill {
	display: inline-flex;
	align-items: center;
	background: var(--pp-bg-alt);
	border-radius: 999px;
	padding: 4px;
	gap: 2px;
}
.pp-toggle-item {
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--pp-ink-soft);
	cursor: pointer;
	transition: background .15s, color .15s;
}
.pp-toggle-item.pp-toggle-active,
.pp-toggle-item.active {
	background: var(--pp-ink);
	color: #fff;
}

/* =========================================================
   PRESET GAYA KOMPONEN — varian tampilan tambahan (opsional).
   Semua class di sini TIDAK mengubah komponen bawaan tema — murni
   pilihan tambahan yang bisa Anda pasang manual ke elemen apapun
   di Elementor ("CSS Classes") atau Gutenberg ("Additional CSS Class(es)").
   ========================================================= */

/* ---- Varian Tombol (tambahan, selain pp-btn-primary/pp-btn-ghost) ---- */

/* Outline warna aksen kedua (mint) */
.pp-btn-outline-accent2 {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: 14.5px;
	border: 1.5px solid var(--pp-accent-2); color: var(--pp-accent-2); background: transparent;
	transition: background .15s ease, color .15s ease;
}
.pp-btn-outline-accent2:hover { background: var(--pp-accent-2); color: #fff; }

/* Latar lembut (tinted), teks warna aksen */
.pp-btn-soft {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: 14.5px;
	background: color-mix(in srgb, var(--pp-accent) 12%, transparent);
	color: var(--pp-accent); border: none;
	transition: background .15s ease;
}
.pp-btn-soft:hover { background: color-mix(in srgb, var(--pp-accent) 22%, transparent); }

/* Gaya "3D" — ada bayangan solid di bawah, efek ditekan saat hover */
.pp-btn-3d {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 24px; border-radius: 12px; font-weight: 700; font-size: 14.5px;
	background: var(--pp-accent); color: #fff; border: none;
	box-shadow: 0 4px 0 color-mix(in srgb, var(--pp-accent) 60%, black);
	transition: transform .1s ease, box-shadow .1s ease;
}
.pp-btn-3d:hover { transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--pp-accent) 60%, black); }

/* Gradasi aksen utama → aksen kedua */
.pp-btn-gradient {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: 14.5px;
	background: linear-gradient(90deg, var(--pp-accent), var(--pp-accent-2));
	color: #fff; border: none;
}

/* Kotak sudut siku (bukan pill) — untuk kesan lebih tegas/teknikal */
.pp-btn-square {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 26px; border-radius: 4px; font-weight: 600; font-size: 14.5px;
	background: var(--pp-ink); color: #fff; border: none;
	font-family: var(--pp-font-mono);
}

/* ---- Varian Card (tambahan, selain pp-project-card/pp-testimonial-card) ---- */

/* Flat — tanpa border/shadow, cuma beda warna latar */
.pp-card-flat {
	background: var(--pp-bg-alt);
	border-radius: var(--pp-radius);
	padding: 24px;
	border: none;
}

/* Elevated — shadow lebih kuat, melayang */
.pp-card-elevated {
	background: var(--pp-card);
	border-radius: var(--pp-radius);
	padding: 24px;
	border: none;
	box-shadow: 0 24px 48px -20px rgba(22,24,29,0.22);
}

/* Outline — cuma border, transparan */
.pp-card-outline {
	background: transparent;
	border: 1.5px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 24px;
}

/* Garis aksen di atas card */
.pp-card-accent-top {
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-top: 4px solid var(--pp-accent);
	border-radius: var(--pp-radius);
	padding: 24px;
}

/* Gelap kontras — untuk card unggulan/highlight (mis. paket "Populer") */
.pp-card-dark {
	background: var(--pp-ink);
	color: #fff;
	border-radius: var(--pp-radius);
	padding: 28px;
	border: none;
}
.pp-card-dark .pp-text-ink-soft,
.pp-card-dark p { color: rgba(255,255,255,0.7); }

/* ---- Varian Toggle (tambahan, selain pp-toggle-pill) ---- */

/* Gaya tab dengan garis bawah (underline), bukan pill */
.pp-toggle-underline {
	display: inline-flex;
	gap: 24px;
	border-bottom: 1.5px solid var(--pp-line);
}
.pp-toggle-underline .pp-toggle-item {
	padding: 10px 2px;
	border-radius: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1.5px;
}
.pp-toggle-underline .pp-toggle-item.pp-toggle-active,
.pp-toggle-underline .pp-toggle-item.active {
	background: none;
	color: var(--pp-accent);
	border-bottom-color: var(--pp-accent);
}

/* Gaya segmented control — kotak dengan border, tanpa bulat penuh */
.pp-toggle-segmented {
	display: inline-flex;
	border: 1.5px solid var(--pp-line);
	border-radius: 8px;
	overflow: hidden;
}
.pp-toggle-segmented .pp-toggle-item {
	padding: 10px 20px;
	border-radius: 0;
}
.pp-toggle-segmented .pp-toggle-item:not(:last-child) { border-right: 1.5px solid var(--pp-line); }
.pp-toggle-segmented .pp-toggle-item.pp-toggle-active,
.pp-toggle-segmented .pp-toggle-item.active {
	background: var(--pp-accent);
	color: #fff;
}

/* ---------- Daftar Isi (Table of Contents) ---------- */
.pp-toc {
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 20px 24px;
	margin: 0 0 32px;
}
.pp-toc-title {
	color: var(--pp-accent-2);
	margin: 0 0 12px;
	letter-spacing: 0.03em;
}
.pp-toc-list { list-style: none; margin: 0; padding: 0; }
.pp-toc-item { margin: 0 0 8px; }
.pp-toc-item:last-child { margin-bottom: 0; }
.pp-toc-item a {
	color: var(--pp-ink-soft);
	font-size: 14.5px;
	transition: color .15s;
}
.pp-toc-item a:hover { color: var(--pp-accent); }
.pp-toc-level-3 { margin-left: 20px; }
.pp-toc-level-3 a { font-size: 13.5px; }
.pp-toc-number {
	display: inline-block;
	min-width: 28px;
	color: var(--pp-accent);
	font-family: var(--pp-font-mono);
	font-size: 13px;
}

/* ---------- Proyek Terkait (halaman detail proyek) ---------- */
.pp-related-projects {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid var(--pp-line);
}
.pp-related-projects .pp-portfolio-grid { margin-top: 28px; }
.pp-related-projects .pp-section-title { font-size: 30px; }

/* ---------- Footer ---------- */
.pp-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	padding: 40px 0;
	border-bottom: 1px solid var(--pp-line);
}
.pp-footer { border-top: 1px solid var(--pp-line); padding: 26px 0; }
.pp-footer-inner {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	color: var(--pp-ink-soft);
}
.pp-back-top { color: var(--pp-accent); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.pp-hero { grid-template-columns: 1fr; padding-top: 48px; }
	.pp-about-layout.pp-about-has-image { grid-template-columns: 1fr; }
	.pp-skills-grid,
	.pp-portfolio-grid,
	.pp-blog-grid { grid-template-columns: 1fr; }
	.pp-testimonial-grid { grid-template-columns: 1fr; }
	.pp-contact { grid-template-columns: 1fr; }
	.pp-post-layout { grid-template-columns: 1fr; }
	.pp-sidebar { position: static; }

	#pp-nav {
		position: absolute;
		top: 72px; left: 0; right: 0;
		background: var(--pp-bg);
		flex-direction: column;
		align-items: flex-start;
		padding: 16px 24px;
		border-bottom: 1px solid var(--pp-line);
		display: none;
		font-size: 14.5px !important;
	}
	#pp-nav ul.pp-menu {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 4px !important;
	}
	#pp-nav a,
	#pp-nav .menu-item > a,
	#pp-nav ul.pp-menu a {
		display: block !important;
		width: 100%;
		padding: 12px 4px;
		font-size: 14.5px !important;
		font-weight: 500 !important;
		text-transform: none !important;
		letter-spacing: normal !important;
		line-height: 1.4 !important;
		font-family: var(--pp-font-body) !important;
	}
	#pp-nav.pp-nav-open { display: flex; }
	.pp-nav-toggle { display: flex; }
}