/*── portoijo — Perpaduan Kebun Digital & Akademik ──*/
:root {
  --color-primary: #1a3c34;
  --color-primary-dark: #0f2620;
  --color-primary-light: #2a5c4f;
  --color-accent: #1e8a6a;
  --color-accent-hover: #167355;
  --color-accent-soft: #d4f0e4;
  --color-gold: #c8953e;
  --color-gold-light: #f5e6cf;
  --color-surface: #f2f7f4;
  --color-surface-alt: #e8f2eb;
  --color-text: #1a1f1c;
  --color-text-light: #556b62;
  --color-text-muted: #8a9b94;
  --color-heading: #0d1914;
  --color-bg: #fdfefc;
  --color-bg-off: #f7faf7;
  --color-card: #ffffff;
  --color-footer: #1a3c34;
  --color-border: #dde8e1;
  --color-border-light: #eaf2ec;
  --shadow-xs: 0 1px 2px rgba(26,60,52,0.03);
  --shadow-sm: 0 2px 8px rgba(26,60,52,0.05);
  --shadow: 0 4px 20px rgba(26,60,52,0.07);
  --shadow-lg: 0 8px 40px rgba(26,60,52,0.10);
  --font-display: 'Lora', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nav-height: 70px;
  --container: 1180px;
  --radius: 0.5rem;
  --radius-lg: 0.85rem;
  --radius-xl: 1.25rem;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--color-surface)}
::-webkit-scrollbar-thumb{background:var(--color-accent);border-radius:4px}
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.section{padding:5.5rem 0}
.section-sm{padding:4rem 0}
.section-xs{padding:3rem 0}
.bg-surface{background:var(--color-surface)}
.text-center{text-align:center}
.section-label{display:inline-block;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.18em;color:var(--color-accent);margin-bottom:0.6rem;position:relative}
.section-label::after{content:'';display:inline-block;width:20px;height:2px;background:var(--color-accent);margin-left:0.6rem;vertical-align:middle;opacity:0.4}
.section-title{font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;color:var(--color-heading);margin-bottom:0.75rem;line-height:1.25}
.section-desc{font-size:0.95rem;color:var(--color-text-light);max-width:580px;line-height:1.75}
.text-center .section-desc{margin:0 auto}

/*── DARK MODE ──*/
[data-theme="dark"] {
  --color-primary: #0f2620;
  --color-primary-dark: #0a1810;
  --color-primary-light: #1e4a3c;
  --color-accent: #2aad86;
  --color-accent-hover: #229973;
  --color-accent-soft: #0d3329;
  --color-gold: #d4a853;
  --color-gold-light: #2a2210;
  --color-surface: #1a2520;
  --color-surface-alt: #1f2c26;
  --color-text: #dde5e0;
  --color-text-light: #9aaba2;
  --color-text-muted: #6b7d74;
  --color-heading: #e8f0ea;
  --color-bg: #111a15;
  --color-bg-off: #151f1a;
  --color-card: #18231d;
  --color-footer: #0f2620;
  --color-border: #26352d;
  --color-border-light: #1f2c25;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.35);
}
[data-theme="dark"] body{background:var(--color-bg)}
[data-theme="dark"] .navbar{box-shadow:0 1px 0 rgba(255,255,255,0.04),0 2px 10px rgba(0,0,0,0.3)}
[data-theme="dark"] .hero{background:linear-gradient(160deg,#0f2620 0%,#0a1810 40%,#0e1f19 100%)}
[data-theme="dark"] .site-footer{background:var(--color-primary-dark)}
[data-theme="dark"] .cat-header,[data-theme="dark"] .k3-header{background:var(--color-primary-dark)}
[data-theme="dark"] .cat-cta-section,[data-theme="dark"] .cat-tech-cta,[data-theme="dark"] .cat-quote-cta{background:var(--color-surface)}
[data-theme="dark"] .post-content pre{background:#0a1810;color:#c8e6d8}
[data-theme="dark"] .post-content code{background:var(--color-surface);color:var(--color-accent)}
[data-theme="dark"] .search-modal{background:rgba(0,0,0,0.8)}
[data-theme="dark"] .reading-list-panel,[data-theme="dark"] #reading-list-panel{background:var(--color-card)}
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background:var(--color-card);color:var(--color-text);border-color:var(--color-border)}
[data-theme="dark"] input:focus,[data-theme="dark"] textarea:focus,[data-theme="dark"] select:focus{border-color:var(--color-accent)}

/* Dark mode icon toggle */
[data-theme="dark"] .icon-sun{display:none}
[data-theme="dark"] .icon-moon{display:inline}
.icon-sun{display:inline}
.icon-moon{display:none}
[data-theme="light"] .icon-sun{display:inline}
[data-theme="light"] .icon-moon{display:none}

/*── PRINT ──*/
@media print {
  .navbar,.site-footer,.search-modal,.mobile-menu,#scroll-up,#reading-list-panel,.mobile-toggle,
  .hero-actions,.post-share,.linkedin-cta-box,.newsletter-cta-box,.comments-divider,
  .post-navigation,.pagination,.search-trigger,.bookmark-btn{display:none!important}
  body{font-size:12pt;line-height:1.5;color:#000;background:#fff}
  .container,.container-narrow{max-width:100%;padding:0}
  .entry-content a,.post-content a{color:#000;text-decoration:underline}
  .entry-content a[href^="http"]::after{content:" (" attr(href) ")";font-size:0.8em;color:#666}
  .entry-content pre,.entry-content code{background:#f5f5f5;border:1px solid #ddd;color:#000}
  .entry-content img{max-width:100%;page-break-inside:avoid}
  .entry-content h2,.entry-content h3{page-break-after:avoid}
  .post-header{padding:0 0 1rem}
  @page{margin:2cm}
}

/*── FOCUS VISIBLE ──*/
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.navbar :focus-visible{outline-color:#fff}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:var(--color-accent)}

/*── SKIP TO CONTENT ──*/
.skip-link{position:absolute;top:-100px;left:1rem;z-index:9999;padding:0.6rem 1.25rem;background:var(--color-accent);color:#fff;font-weight:600;border-radius:0 0 var(--radius) var(--radius);transition:top 0.2s}
.skip-link:focus{top:0}

/*── REDUCED MOTION ──*/
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .fade-in{opacity:1;transform:none}
  .skeleton{animation:none;background:var(--color-surface)}
}

/*── CSS CONTAINMENT — tunda render section bawah ──*/
.section,.section-sm,.section-xs,.cat-articles-section,.archive-content-section,
.profile-header,.service-cards-section,.resource-category-section,.portfolio-section,
.casestudy-list-section,.blog-main-content,.category-posts-section{content-visibility:auto;contain-intrinsic-size:500px}

/*── MONOSPACE FONT ──*/
code,pre,kbd,samp,.kbd{font-family:'JetBrains Mono','Fira Code','Cascadia Code',Consolas,monospace}

/*── FADE-IN ON SCROLL ──*/
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/*── SKELETON LOADING ──*/
.skeleton{background:linear-gradient(90deg,var(--color-surface) 25%,var(--color-border-light) 50%,var(--color-surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;will-change:background-position;contain:paint;border-radius:var(--radius);min-height:1em}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/*── VIEW TRANSITIONS API — cross-page animation ──*/
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 300ms ease-out both fade-out-slide;
}
::view-transition-new(root) {
  animation: 400ms ease-out both fade-in-slide;
}
@keyframes fade-out-slide {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-12px); }
}
@keyframes fade-in-slide {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.skeleton-card{height:320px;border-radius:var(--radius-lg)}
.skeleton-text{height:1em;margin-bottom:0.5em;width:80%}
.skeleton-text.short{width:50%}
.skeleton-title{height:1.3em;margin-bottom:0.75em;width:90%}

/*── PROGRESS RING SCROLL-UP ──*/
#scroll-up{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:var(--color-accent);color:#fff;border:none;cursor:pointer;box-shadow:var(--shadow);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity 0.3s,transform 0.3s}
#scroll-up.visible{opacity:1;transform:translateY(0);pointer-events:auto}
#scroll-up:hover{background:var(--color-accent-hover);transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-lg)}
#scroll-up svg.progress-ring{position:absolute;inset:0;transform:rotate(-90deg)}
#scroll-up svg.progress-ring circle{fill:none;stroke:rgba(255,255,255,0.3);stroke-width:3}
#scroll-up svg.progress-ring circle.progress{stroke:#fff;stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset 0.1s linear}
#scroll-up .arrow-up{position:relative;z-index:1}

/* Fade-in safety: if JS doesn't add .visible within 2s, show anyway */
.fade-in:not(.visible){animation:fade-in-fallback 0.01s 2s forwards}
@keyframes fade-in-fallback{to{opacity:1;transform:none}}