/*
Theme Name: BongkarTech
Theme URI: https://bongkartech.my.id
Author: BongkarTech
Author URI: https://bongkartech.my.id
Description: Custom WordPress theme untuk blog teknologi BongkarTech - dark neon blue, hybrid navigation, Yoast SEO compatible.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bongkartech
Tags: dark, blog, technology, neon, custom-logo, custom-menu, featured-images
*/

/* === DESIGN TOKENS === */
:root {
  --bg-primary: #0B0D17;
  --bg-secondary: #111827;
  --bg-tertiary: #1a1f35;
  --bg-glass: rgba(17, 24, 39, 0.7);
  --neon-primary: #00D4FF;
  --neon-primary-rgb: 0, 212, 255;
  --neon-secondary: #7C3AED;
  --neon-accent: #06B6D4;
  --text-primary: #E5E7EB;
  --text-secondary: #D1D5DB;
  --text-muted: #9CA3AF;
  --text-dark: #6B7280;
  --border-color: #1F2937;
  --border-glow: rgba(0, 212, 255, 0.3);
  --neon-glow: 0 0 15px rgba(0,212,255,0.4), 0 0 30px rgba(0,212,255,0.15);
  --neon-glow-strong: 0 0 20px rgba(0,212,255,0.6), 0 0 40px rgba(0,212,255,0.3);
  --card-shadow-hover: 0 8px 40px rgba(0,212,255,0.15);
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --section-padding: 100px 0;
  --container-max: 1200px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}

/* === RESET === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family: var(--font-primary);
  font-size: 16px; line-height: 1.7;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow-x: hidden;
}

/* === TYPOGRAPHY === */
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.2; color:var(--text-primary); margin-bottom:0.5em; }
h1 { font-size:clamp(2.5rem,5vw,4rem); font-weight:800; letter-spacing:-0.02em; }
h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); letter-spacing:-0.01em; }
h3 { font-size:clamp(1.2rem,2vw,1.5rem); font-weight:600; }
p { margin-bottom:1em; color:var(--text-secondary); }
a { color:var(--neon-primary); text-decoration:none; transition:color var(--transition-fast); }
a:hover { color:#33DFFF; }
code { background:var(--bg-secondary); padding:2px 8px; border-radius:var(--radius-sm); font-size:0.9em; color:var(--neon-primary); font-family:var(--font-mono); }
pre { background:var(--bg-secondary); padding:20px; border-radius:var(--radius-md); overflow-x:auto; border:1px solid var(--border-color); }
pre code { background:none; padding:0; }
img { max-width:100%; height:auto; display:block; }

/* === LAYOUT === */
.container { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 24px; }
.section { padding:var(--section-padding); position:relative; }
.section-header { text-align:center; margin-bottom:60px; }
.section-header h2 { position:relative; display:inline-block; }
.section-header h2::after {
  content:''; position:absolute; bottom:-12px; left:50%; transform:translateX(-50%);
  width:60px; height:3px;
  background:linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
  border-radius:var(--radius-full);
}
.section-subtitle { color:var(--text-muted); font-size:1.1rem; margin-top:20px; max-width:600px; margin-left:auto; margin-right:auto; }

/* === BUTTONS === */
.btn {
  display:inline-flex; align-items:center; gap:8px; padding:14px 32px;
  font-family:var(--font-primary); font-size:1rem; font-weight:600;
  border:none; border-radius:var(--radius-full); cursor:pointer;
  transition:all var(--transition-base); text-decoration:none; position:relative; overflow:hidden;
}
.btn-primary {
  background:linear-gradient(135deg, var(--neon-primary), var(--neon-accent));
  color:var(--bg-primary); box-shadow:0 4px 20px rgba(0,212,255,0.3);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--neon-glow-strong); color:var(--bg-primary); }
.btn-outline {
  background:transparent; color:var(--neon-primary); border:2px solid var(--neon-primary);
}
.btn-outline:hover { background:rgba(0,212,255,0.1); box-shadow:var(--neon-glow); transform:translateY(-2px); }

/* === CARDS === */
.card {
  background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border-color); border-radius:var(--radius-md);
  padding:28px; transition:all var(--transition-base); position:relative; overflow:hidden;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--neon-primary), transparent);
  opacity:0; transition:opacity var(--transition-base);
}
.card:hover { transform:translateY(-4px); border-color:var(--border-glow); box-shadow:var(--card-shadow-hover); }
.card:hover::before { opacity:1; }

/* === FORMS === */
input[type="text"],input[type="email"],input[type="search"],input[type="url"],textarea {
  width:100%; padding:14px 20px; font-family:var(--font-primary); font-size:1rem;
  color:var(--text-primary); background:var(--bg-secondary);
  border:1px solid var(--border-color); border-radius:var(--radius-md);
  outline:none; transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus,textarea:focus { border-color:var(--neon-primary); box-shadow:0 0 0 3px rgba(0,212,255,0.1); }
::placeholder { color:var(--text-dark); }

/* === SCROLL REVEAL === */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.revealed { opacity:1; transform:translateY(0); }

/* === SCROLLBAR === */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:var(--bg-tertiary); border-radius:var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background:var(--neon-primary); }
::selection { background:rgba(0,212,255,0.3); color:#fff; }

/* === NEON TEXT (used globally) === */
.neon-text {
  color:var(--neon-primary);
  text-shadow:0 0 20px rgba(0,212,255,0.4), 0 0 40px rgba(0,212,255,0.1);
}

/* === POST THUMBNAIL PLACEHOLDER (used in post cards globally) === */
.post-thumbnail-placeholder {
  width:100%; height:200px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  color:var(--text-dark);
}

/* === WORDPRESS CLASSES === */
.alignleft { float:left; margin-right:1.5em; margin-bottom:1em; }
.alignright { float:right; margin-left:1.5em; margin-bottom:1em; }
.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.wp-caption { max-width:100%; }
.wp-caption-text { font-size:0.875rem; color:var(--text-muted); margin-top:8px; }
.screen-reader-text { clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; }
.sticky .post-card { border-color:var(--neon-primary); }

/* === POST CARDS === */
.post-card {
  background:var(--bg-glass); backdrop-filter:blur(12px);
  border:1px solid var(--border-color); border-radius:var(--radius-md);
  overflow:hidden; transition:all var(--transition-base);
}
.post-card:hover { transform:translateY(-4px); border-color:var(--border-glow); box-shadow:var(--card-shadow-hover); }
.post-card .post-thumbnail { width:100%; height:200px; object-fit:cover; }
.post-card .post-content { padding:24px; }
.post-card .post-category { display:inline-block; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--neon-primary); margin-bottom:8px; }
.post-card .post-title { font-size:1.2rem; margin-bottom:12px; }
.post-card .post-title a { color:var(--text-primary); transition:color var(--transition-fast); }
.post-card .post-title a:hover { color:var(--neon-primary); }
.post-card .post-excerpt { font-size:0.95rem; color:var(--text-muted); margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-card .post-meta { display:flex; align-items:center; gap:16px; font-size:0.85rem; color:var(--text-dark); }
.posts-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:32px; }

/* === SINGLE POST === */
.single-post-content { max-width:800px; margin:0 auto; padding-top:120px; }
.single-post-content .post-meta { display:flex; flex-wrap:wrap; gap:16px; color:var(--text-muted); font-size:0.9rem; margin-bottom:32px; padding-bottom:32px; border-bottom:1px solid var(--border-color); }
.single-post-content .entry-content { font-size:1.1rem; line-height:1.8; }
.single-post-content .entry-content h2 { margin-top:48px; }
.single-post-content .entry-content blockquote { border-left:3px solid var(--neon-primary); padding:16px 24px; margin:24px 0; background:var(--bg-secondary); border-radius:0 var(--radius-md) var(--radius-md) 0; font-style:italic; color:var(--text-muted); }
.single-post-content .entry-content ul, .single-post-content .entry-content ol { margin-bottom: 1.5em; padding-left: 1.5em; }
.single-post-content .entry-content ul { list-style-type: disc; }
.single-post-content .entry-content ol { list-style-type: decimal; }
.single-post-content .entry-content li { margin-bottom: 0.5em; }
.single-post-content .entry-content ul ul, .single-post-content .entry-content ol ol, .single-post-content .entry-content ul ol, .single-post-content .entry-content ol ul { margin-bottom: 0; margin-top: 0.5em; padding-left: 1.5em; }
.single-post-content .entry-content ul ul { list-style-type: circle; }
.single-post-content .entry-content ul ul ul { list-style-type: square; }
.post-navigation { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:60px; padding-top:40px; border-top:1px solid var(--border-color); }
.post-navigation a { display:block; padding:20px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius-md); transition:all var(--transition-base); }
.post-navigation a:hover { border-color:var(--border-glow); box-shadow:var(--neon-glow); }
.post-navigation .nav-label { font-size:0.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.post-navigation .nav-title { color:var(--text-primary); font-weight:600; }
.post-navigation .nav-next { text-align:right; }

/* === PAGE === */
.page-content { max-width:800px; margin:0 auto; padding:120px 24px 80px; min-height:60vh; }

/* === ARCHIVE/SEARCH === */
.archive-header,.search-header { text-align:center; padding:120px 24px 40px; }
.archive-description { color:var(--text-muted); margin-top:12px; max-width:600px; margin-left:auto; margin-right:auto; }

/* === 404 === */
.error-404 { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:80vh; text-align:center; padding:24px; }
.error-404 .error-code {
  font-size:clamp(6rem,15vw,12rem); font-weight:800;
  background:linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1; filter:drop-shadow(0 0 30px rgba(0,212,255,0.3));
}
.error-404 p { color:var(--text-muted); margin:16px 0 32px; max-width:400px; }

/* === SIDEBAR === */
.content-with-sidebar { display:grid; grid-template-columns:1fr 340px; gap:48px; max-width:var(--container-max); margin:0 auto; padding:120px 24px 80px; }
.sidebar .widget { background:var(--bg-glass); backdrop-filter:blur(12px); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:24px; margin-bottom:24px; }
.sidebar .widget-title { font-size:1rem; font-weight:600; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border-color); color:var(--neon-primary); }
.sidebar .widget ul { list-style:none; }
.sidebar .widget ul li { padding:8px 0; border-bottom:1px solid rgba(31,41,55,0.5); }
.sidebar .widget ul li:last-child { border-bottom:none; }
.sidebar .widget ul li a { color:var(--text-secondary); font-size:0.95rem; }
.sidebar .widget ul li a:hover { color:var(--neon-primary); }

/* === POST TAGS === */
.post-tags a {
  background: rgba(0, 212, 255, 0.1);
  color: var(--neon-primary);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition-base);
  border: 1px solid rgba(0, 212, 255, 0.2);
}
.post-tags a:hover {
  background: var(--neon-primary);
  color: var(--bg-primary);
  box-shadow: var(--neon-glow);
}

/* === COMMENTS === */
.comments-area { margin-top:60px; padding-top:40px; border-top:1px solid var(--border-color); }
.comment-list { list-style:none; padding:0; }
.comment { padding:20px; margin-bottom:16px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius-md); }
.comment .comment-author { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.comment .comment-author img { border-radius:50%; border:2px solid var(--border-color); width: 40px; height: 40px; }
.comment .comment-author .fn { font-weight:600; font-size: 0.95rem; }
.comment .comment-meta { font-size:0.8rem; color:var(--text-dark); }
.comment .children { list-style:none; padding-left:24px; margin-top:16px; border-left: 2px solid rgba(255,255,255,0.05); }

/* Comment Form — Compact & User-Friendly */
#respond { background: var(--bg-secondary); padding: 24px 28px; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-top: 32px; }
#respond .comment-reply-title { font-size: 1.2rem; margin-bottom: 4px; }
#respond .comment-reply-title small { font-size: 0.8rem; margin-left: 8px; }
#respond .comment-reply-title small a { color: var(--neon-primary); }
.comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comment-form p { margin-bottom: 0; }
.comment-form .comment-notes { grid-column: 1 / -1; font-size: 0.8rem; color: var(--text-dark); margin-bottom: 4px; }
.comment-form .comment-form-comment { grid-column: 1 / -1; }
.comment-form .form-submit { grid-column: 1 / -1; }
.comment-form .comment-form-cookies-consent { grid-column: 1 / -1; }
.comment-form .logged-in-as { grid-column: 1 / -1; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; }
.comment-form label { display: none; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; padding: 12px 16px; font-size: 0.9rem; margin-bottom: 0;
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); color: var(--text-primary);
  font-family: var(--font-primary); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.comment-form input:focus, .comment-form textarea:focus {
  border-color: var(--neon-primary); box-shadow: 0 0 0 3px rgba(0,212,255,0.1); outline: none;
}
.comment-form textarea { min-height: 90px; max-height: 200px; resize: vertical; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
.comment-form .comment-form-cookies-consent input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--neon-primary); cursor: pointer; }
.comment-form .comment-form-cookies-consent label { display: inline; cursor: pointer; }
.comment-form .form-submit { margin-top: 4px; }
.comment-form .submit {
  background: linear-gradient(135deg, var(--neon-primary), var(--neon-accent));
  color: var(--bg-primary); padding: 10px 28px; border: none;
  border-radius: var(--radius-full); font-family: var(--font-primary);
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: all var(--transition-base);
}
.comment-form .submit:hover { box-shadow: var(--neon-glow-strong); transform: translateY(-2px); }

@media (max-width: 640px) {
  .comment-form { grid-template-columns: 1fr; }
  #respond { padding: 20px; }
}

/* === BREADCRUMBS === */
.breadcrumbs { font-size:0.85rem; color:var(--text-dark); padding:12px 0; }
.breadcrumbs a { color:var(--text-muted); }
.breadcrumbs a:hover { color:var(--neon-primary); }

/* === PAGINATION === */
.pagination { display:flex; justify-content:center; gap:8px; margin-top:60px; padding-top:40px; }
.pagination .page-numbers { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-md); background:var(--bg-secondary); border:1px solid var(--border-color); color:var(--text-muted); font-weight:500; transition:all var(--transition-base); }
.pagination .page-numbers:hover,.pagination .page-numbers.current { border-color:var(--neon-primary); color:var(--neon-primary); box-shadow:var(--neon-glow); }
.pagination .page-numbers.current { background:rgba(0,212,255,0.1); }

/* === RESPONSIVE === */
@media (max-width:1023px) {
  :root { --section-padding:80px 0; }
  .content-with-sidebar { grid-template-columns:1fr; }
  .posts-grid { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px; }
  .post-navigation { grid-template-columns:1fr; }
}
@media (max-width:767px) {
  :root { --section-padding:60px 0; }
  .posts-grid { grid-template-columns:1fr; }
  .section-header { margin-bottom:40px; }
  .btn { padding:12px 24px; font-size:0.95rem; }
}