/* --- General Wrapper & Variables --- */
#van-city-comments-wrapper.van-city-dark-mode {
    --bg-primary: #121212;
    --bg-secondary: #1c1c1c;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #888;
    --border-color: #333;
    --accent-primary: #6c5ce7;
    --accent-secondary: #a29bfe;
    --spoiler-bg: #2d2d2d;
    --spoiler-text: #2d2d2d;
    --spoiler-reveal-bg: transparent;
    --danger-color: #d63031;
    --pinned-bg: rgba(108, 92, 231, 0.05);
}

/* Light Mode Overrides */
body.light-mode #van-city-comments-wrapper {
    --bg-primary: #f3f4f6;
    --bg-secondary: #ffffff;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --spoiler-bg: #e5e7eb;
    --spoiler-text: #111827;
    --pinned-bg: rgba(108, 92, 231, 0.1);
}

#van-city-comments-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-primary);
    margin-top: 40px;
}

/* --- Emotions Section --- */
.van-city-emotions-container {
    text-align: center;
    margin-bottom: 40px;
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.van-city-emotions-title {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.van-city-emotions-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 15px;
    justify-content: center;
}
/* Hide scrollbar */
.van-city-emotions-scroll::-webkit-scrollbar { display: none; }
.van-city-emotions-scroll { -ms-overflow-style: none; scrollbar-width: none; }

.van-city-emotion-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    min-width: 80px;
}

.van-city-emotion-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.van-city-emotion-btn.active {
    background-color: var(--pinned-bg);
}

.van-city-emotion-avatar {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.van-city-emotion-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.van-city-emotion-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--accent-primary);
    color: white;
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.van-city-emotion-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- Login Prompt --- */
.van-city-login-prompt {
    text-align: center;
    padding: 30px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.van-city-login-prompt p {
    margin: 0 0 15px 0;
    color: var(--text-secondary);
    font-size: 15px;
}

.van-city-auth-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.van-city-auth-buttons .van-city-submit-btn {
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
}

.van-city-auth-buttons .van-city-submit-btn-alt {
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
}
.van-city-auth-buttons .van-city-submit-btn-alt:hover {
    background: var(--accent-primary);
    color: white;
}


/* --- Comment Form --- */
#van-city-comment-form {
    margin-bottom: 40px;
}
/* Style when form is moved inside a comment for reply */
.van-city-comment-item #van-city-comment-form {
    margin-top: 20px;
    margin-bottom: 20px;
}

.van-city-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.van-city-user-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-primary);
}

.van-city-logged-in-as {
    font-size: 16px;
    color: var(--text-secondary);
}
.van-city-logged-in-as strong {
    color: var(--text-primary);
    font-weight: 600;
}

.van-city-textarea-wrapper {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.van-city-textarea-wrapper:focus-within {
    border-color: var(--accent-primary);
}

#van-city-comment-input {
    width: 100%;
    min-height: 100px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 15px;
    outline: none;
    resize: vertical;
    display: block;
    font-size: 15px;
}
#van-city-comment-input::placeholder {
    color: var(--text-muted);
}

.van-city-form-toolbar {
    background: rgba(0,0,0,0.2);
    padding: 8px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
}

.van-city-tools-left {
    display: flex;
    gap: 5px;
}

.van-city-tool-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}
.van-city-tool-btn:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
}
.van-city-tool-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.van-city-word-counter {
    font-size: 12px;
    color: var(--text-muted);
}

.van-city-form-footer {
    margin-top: 10px;
    text-align: right;
}

.van-city-submit-btn {
    background-color: var(--accent-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.2s;
}
.van-city-submit-btn:hover {
    background-color: var(--accent-secondary);
}
.van-city-submit-btn:disabled {
    background-color: var(--text-muted);
    cursor: not-allowed;
}

#van-city-cancel-reply {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    margin-right: 10px;
    display: none;
}
#van-city-cancel-reply:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

/* --- Comments Header & Sorting --- */
.van-city-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.van-city-header h3 {
    margin: 0;
    font-size: 20px;
}

.van-city-sort {
    font-size: 14px;
}

.van-city-sort a {
    margin-left: 15px;
    text-decoration: none;
    padding-bottom: 2px;
    transition: all 0.3s;
    color: var(--text-secondary);
}

.van-city-sort a:hover {
    color: var(--text-primary);
}

.van-city-sort a.active {
    color: var(--accent-primary);
    font-weight: bold;
    border-bottom: 2px solid var(--accent-primary);
}

/* --- Comments List --- */
#van-city-comments-list {
    margin-top: 30px;
}

.van-city-comment-list {
    padding: 0;
    margin: 0;
}

.van-city-comment-item {
    list-style: none;
    margin-bottom: 24px;
    position: relative;
    padding: 12px;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.van-city-comment-item.pinned-comment {
    background-color: var(--pinned-bg);
    border-left: 3px solid var(--accent-primary);
    padding-left: 9px;
}

.van-city-comment-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.van-city-avatar {
    flex-shrink: 0;
}

.van-city-avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.van-city-content {
    flex-grow: 1;
    min-width: 0;
}

.van-city-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    line-height: 1.2;
}

.van-city-author {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.van-city-user-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.van-city-pinned-icon {
    color: var(--accent-primary);
}

.van-city-date {
    font-size: 12px;
    color: var(--text-muted);
}

.van-city-reply-indicator {
    color: var(--text-muted);
    font-size: 12px;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
}

.van-city-reply-indicator .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    vertical-align: middle;
}

.van-city-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 8px;
    word-wrap: break-word;
}
.van-city-text p {
    margin-top: 0;
}
.van-city-text strong { color: var(--text-primary); }
.van-city-text em { color: var(--text-primary); }

/* Spoiler */
.van-city-spoiler {
    margin: 10px 0;
}
.van-city-spoiler-toggle {
    background: var(--spoiler-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.van-city-spoiler-content {
    background: var(--spoiler-bg);
    color: var(--spoiler-text);
    padding: 10px;
    border-radius: 4px;
    margin-top: 5px;
    transition: color 0.3s;
}
.van-city-spoiler.revealed .van-city-spoiler-content {
    color: var(--text-secondary);
    background: var(--spoiler-reveal-bg);
}
.van-city-spoiler.revealed .van-city-spoiler-toggle {
    display: none;
}


/* Actions */
.van-city-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
}

.van-city-actions-left {
    display: flex;
    gap: 16px;
}

.van-city-action-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}
/* --- General Wrapper & Variables --- */
#van-city-comments-wrapper.van-city-dark-mode {
    --bg-primary: #121212;
    --bg-secondary: #1c1c1c;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #888;
    --border-color: #333;
    --accent-primary: #6c5ce7;
    --accent-secondary: #a29bfe;
    --spoiler-bg: #2d2d2d;
    --spoiler-text: #2d2d2d;
    --spoiler-reveal-bg: rgba(255, 255, 255, 0.05);
    --spoiler-border: rgba(255, 255, 255, 0.1);
    --danger-color: #d63031;
    --pinned-bg: rgba(108, 92, 231, 0.05);
}

/* Light Mode Overrides */
body.light-mode #van-city-comments-wrapper {
    --bg-primary: #f3f4f6;
    --bg-secondary: #ffffff;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --spoiler-bg: #e5e7eb;
    --spoiler-text: #111827;
    --spoiler-reveal-bg: #f9fafb;
    --spoiler-border: #d1d5db;
    --pinned-bg: rgba(108, 92, 231, 0.1);
}

body.light-mode .van-city-emotion-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#van-city-comments-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-primary);
    margin-top: 40px;
}

/* --- Emotions Section --- */
.van-city-emotions-container {
    text-align: center;
    margin-bottom: 40px;
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.van-city-emotions-title {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.van-city-emotions-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 15px;
    justify-content: center;
}
/* Hide scrollbar */
.van-city-emotions-scroll::-webkit-scrollbar { display: none; }
.van-city-emotions-scroll { -ms-overflow-style: none; scrollbar-width: none; }

.van-city-emotion-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    min-width: 80px;
}

.van-city-emotion-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.van-city-emotion-btn.active {
    background-color: var(--pinned-bg);
}

.van-city-emotion-avatar {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.van-city-emotion-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.van-city-emotion-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--accent-primary);
    color: white;
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.van-city-emotion-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- Login Prompt --- */
.van-city-login-prompt {
    text-align: center;
    padding: 30px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.van-city-login-prompt p {
    margin: 0 0 15px 0;
    color: var(--text-secondary);
    font-size: 15px;
}

.van-city-auth-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.van-city-auth-buttons .van-city-submit-btn {
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
}

.van-city-auth-buttons .van-city-submit-btn-alt {
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
}
.van-city-auth-buttons .van-city-submit-btn-alt:hover {
    background: var(--accent-primary);
    color: white;
}


/* --- Comment Form --- */
#van-city-comment-form {
    margin-bottom: 40px;
}
/* Style when form is moved inside a comment for reply */
.van-city-comment-item #van-city-comment-form {
    margin-top: 20px;
    margin-bottom: 20px;
}

.van-city-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.van-city-user-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-primary);
}

.van-city-logged-in-as {
    font-size: 16px;
    color: var(--text-secondary);
}
.van-city-logged-in-as strong {
    color: var(--text-primary);
    font-weight: 600;
}

.van-city-textarea-wrapper {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.van-city-textarea-wrapper:focus-within {
    border-color: var(--accent-primary);
}

#van-city-comment-input {
    width: 100%;
    min-height: 100px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 15px;
    outline: none;
    resize: vertical;
    display: block;
    font-size: 15px;
}
#van-city-comment-input::placeholder {
    color: var(--text-muted);
}

.van-city-form-toolbar {
    background: rgba(0,0,0,0.2);
    padding: 8px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
}

.van-city-tools-left {
    display: flex;
    gap: 5px;
}

.van-city-tool-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}
.van-city-tool-btn:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
}
.van-city-tool-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.van-city-word-counter {
    font-size: 12px;
    color: var(--text-muted);
}

.van-city-form-footer {
    margin-top: 10px;
    text-align: right;
}

.van-city-submit-btn {
    background-color: var(--accent-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.2s;
}
.van-city-submit-btn:hover {
    background-color: var(--accent-secondary);
}
.van-city-submit-btn:disabled {
    background-color: var(--text-muted);
    cursor: not-allowed;
}

#van-city-cancel-reply {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    margin-right: 10px;
    display: none;
}
#van-city-cancel-reply:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

/* --- Comments Header & Sorting --- */
.van-city-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.van-city-header h3 {
    margin: 0;
    font-size: 20px;
}

.van-city-sort {
    font-size: 14px;
}

.van-city-sort a {
    margin-left: 15px;
    text-decoration: none;
    padding-bottom: 2px;
    transition: all 0.3s;
    color: var(--text-secondary);
}

.van-city-sort a:hover {
    color: var(--text-primary);
}

.van-city-sort a.active {
    color: var(--accent-primary);
    font-weight: bold;
    border-bottom: 2px solid var(--accent-primary);
}

/* --- Comments List --- */
#van-city-comments-list {
    margin-top: 30px;
}

.van-city-comment-list {
    padding: 0;
    margin: 0;
}

.van-city-comment-item {
    list-style: none;
    margin-bottom: 24px;
    position: relative;
    padding: 12px;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.van-city-comment-item.pinned-comment {
    background-color: var(--pinned-bg);
    border-left: 3px solid var(--accent-primary);
    padding-left: 9px;
}

.van-city-comment-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.van-city-avatar {
    flex-shrink: 0;
}

.van-city-avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.van-city-content {
    flex-grow: 1;
    min-width: 0;
}

.van-city-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    line-height: 1.2;
}

.van-city-author {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.van-city-user-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.van-city-pinned-icon {
    color: var(--accent-primary);
}

.van-city-date {
    font-size: 12px;
    color: var(--text-muted);
}

.van-city-reply-indicator {
    color: var(--text-muted);
    font-size: 12px;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
}

.van-city-reply-indicator .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    vertical-align: middle;
}

.van-city-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 8px;
    word-wrap: break-word;
}
.van-city-text p {
    margin-top: 0;
}
.van-city-text strong { color: var(--text-primary); }
.van-city-text em { color: var(--text-primary); }

/* Spoiler */
.van-city-spoiler {
    margin: 10px 0;
}
.van-city-spoiler-toggle {
    background: var(--spoiler-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.van-city-spoiler-toggle .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
.van-city-spoiler-content {
    background: var(--spoiler-bg);
    color: var(--spoiler-text);
    padding: 10px;
    border-radius: 4px;
    margin-top: 5px;
    transition: color 0.3s;
    display: none;
}
.van-city-spoiler.revealed .van-city-spoiler-content {
    color: var(--text-secondary);
    background: var(--spoiler-reveal-bg);
    border: 1px solid var(--spoiler-border);
    display: block;
}
.van-city-spoiler.revealed .van-city-spoiler-toggle {
    display: none;
}
.van-city-spoiler-hide {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    margin-top: 10px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.van-city-spoiler-hide:hover {
    color: var(--text-primary);
    text-decoration: underline;
}


/* Actions */
.van-city-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
}

.van-city-actions-left {
    display: flex;
    gap: 16px;
}

.van-city-action-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}
.van-city-action-btn:hover {
    color: var(--text-primary);
}

.van-city-action-btn.like-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}
.van-city-action-btn.like-btn.liked {
    color: var(--danger-color);
}

.van-city-action-btn.reply-btn {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

.van-city-actions-right {
    margin-left: auto;
    position: relative;
}

.van-city-more-actions {
    position: relative;
}

.van-city-more-actions-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
}
.van-city-more-actions-toggle:hover {
    background-color: var(--border-color);
}

.van-city-more-actions-toggle .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.van-city-more-actions-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%; /* Open downwards */
    margin-top: 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 9999; /* Ensure it's on top */
    width: 150px;
    overflow: hidden;
}
.van-city-more-actions.active .van-city-more-actions-menu {
    display: block;
}

.van-city-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.van-city-menu-item:last-child {
    border-bottom: none;
}
.van-city-menu-item:hover {
    background-color: var(--accent-primary);
    color: white;
}
.van-city-menu-item.delete-comment-btn:hover {
    background-color: var(--danger-color);
}


/* Children */
.van-city-comment-list .children {
    padding-left: 0;
    margin-left: 20px;
    border-left: 2px solid var(--border-color);
    padding-top: 15px;
    list-style: none;
}
.van-city-comment-list .children > div {
    padding-left: 15px;
}

/* Limit visual nesting to 3 levels (Level 4+ aligns with Level 3) */
.van-city-comment-list .children .children .children {
    margin-left: 0;
    border-left: none;
    padding-left: 0;
    padding-top: 0;
}
.van-city-comment-list .children .children .children > div {
    padding-left: 0;
}

.van-city-no-comments {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}<?php
if ( ! defined( 'ABSPATH' ) ) exit;

// Shortcodes for login & register forms
add_action( 'init', function() {
    add_shortcode( 'vanmanga_login_form', 'vanmanga_login_form_shortcode' );
    add_shortcode( 'vanmanga_register_form', 'vanmanga_register_form_shortcode' );
    add_shortcode( 'vanmanga_profile', 'vanmanga_profile_shortcode' );
    add_shortcode( 'vanmanga_forgot_password_form', 'vanmanga_forgot_password_form_shortcode' );
} );

function vanmanga_login_form_shortcode( $atts = array() ) {
    // If already logged in show quick profile link
    if ( is_user_logged_in() ) {
         = vanmanga_get_profile_url();
        return '<div class="auth-container"><div class="auth-success">' . esc_html__( 'You are already logged in.', 'vanmanga' ) . ' <a href="' . esc_url(  ) . '">' . esc_html__( 'Go to your profile', 'vanmanga' ) . '</a></div></div>';
    }

    ob_start();

     = ! empty( ['redirect_to'] ) ? esc_url( wp_unslash( ['redirect_to'] ) ) : home_url( '/' );
     = isset( ['login'] ) && ['login'] === 'failed';
    ?>
    <div class="auth-container">
        <style>
            .auth-social__buttons { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
            .social-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 20px; border-radius: 12px; text-decoration: none; font-weight: 700; transition: all 0.2s ease; border: 1px solid transparent; font-size: 15px; line-height: 1.2; letter-spacing: 0.3px; }
            .social-btn:hover { transform: translateY(-2px); text-decoration: none; filter: brightness(1.1); }
            .social-btn:active { transform: translateY(0); filter: brightness(0.95); }
            .social-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
            
            /* Google: Bright White with subtle shadow */
            .social-btn.google { background: #ffffff; color: #1f1f1f; border-color: #ffffff; box-shadow: 0 4px 12px rgba(255,255,255,0.15); }
            .social-btn.google:hover { box-shadow: 0 6px 16px rgba(255,255,255,0.25); }

            /* Facebook: Vibrant Blue */
            .social-btn.facebook { background: #1877F2; color: #fff; border-color: #1877F2; box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4); }
            .social-btn.facebook:hover { box-shadow: 0 6px 16px rgba(24, 119, 242, 0.6); }

            /* Discord: Vibrant Blurple */
            .social-btn.discord { background: #5865F2; color: #fff; border-color: #5865F2; box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4); }
            .social-btn.discord:hover { box-shadow: 0 6px 16px rgba(88, 101, 242, 0.6); }

            .social-btn.disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(100%); transform: none; box-shadow: none; }
            
            /* Form Styling */
            .auth-form { background: var(--bg-secondary); padding: 30px; border-radius: 12px; border: 1px solid var(--border-color); max-width: 400px; margin: 0 auto; }
            .auth-form label { display: block; margin-bottom: 8px; color: var(--text-primary); font-weight: 500; }
            .auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"] {
                width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); outline: none; margin-bottom: 15px;
            }
            .auth-form input:focus { border-color: var(--accent-primary); }
            .auth-options { color: var(--text-secondary); font-size: 14px; }
            .auth-forgot { color: var(--accent-primary); text-decoration: none; }
            .auth-social__label { text-align: center; margin: 20px 0 10px; color: var(--text-secondary); font-size: 14px; position: relative; }
            
            /* Light Mode */
            body.light-mode .auth-form { background: #ffffff; border-color: #e5e7eb; }
            body.light-mode .auth-form input { background: #f9fafb; border-color: #d1d5db; }
        </style>

        <form method="post" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" class="auth-form auth-form--login">
            <?php echo vanmanga_output_auth_notices(); ?>
            <?php wp_nonce_field( 'vanmanga_login_action', 'vanmanga_login_nonce' ); ?>
            <input type="hidden" name="action" value="vanmanga_login">
            <input type="hidden" name="redirect_to" value="<?php echo esc_attr(  ); ?>">

            <?php if (  ) : ?>
                <div class="auth-error"><?php esc_html_e( 'Login failed. Check your credentials.', 'vanmanga' ); ?></div>
            <?php endif; ?>

            <label for="vm_user_login"><?php esc_html_e( 'Email or Username', 'vanmanga' ); ?></label>
            <input id="vm_user_login" type="text" name="user_login" required />

            <label for="vm_user_pass"><?php esc_html_e( 'Password', 'vanmanga' ); ?></label>
            <input id="vm_user_pass" type="password" name="user_password" required />

            <div class="auth-options" style="margin: 10px 0; display: flex; justify-content: space-between; align-items: center;">
                <label class="remember-me" style="cursor:pointer;">
                    <input type="checkbox" name="remember" value="1"> <?php esc_html_e( 'Ingat Saya', 'vanmanga' ); ?>
                </label>
                <a href="<?php echo esc_url( vanmanga_get_forgot_password_url() ); ?>" class="auth-forgot"><?php esc_html_e( 'Lupa Password?', 'vanmanga' ); ?></a>
            </div>

            <div class="auth-actions">
                <button type="submit" class="btn btn-primary"><?php esc_html_e( 'Login', 'vanmanga' ); ?></button>
            </div>

            <div class="auth-social">
                <p class="auth-social__label"><?php esc_html_e( 'Or continue with', 'vanmanga' ); ?></p>
                <?php if ( shortcode_exists( 'nextend_social_login' ) ) : ?>
                    <div class="auth-social__buttons"><?php echo do_shortcode( '[nextend_social_login]' ); ?></div>
                <?php else : ?>
                    <div class="auth-social__buttons">
                        <?php
                         = array(
                            'google' => array( 'label' => __( 'Lanjutkan dengan Google', 'vanmanga' ), 'icon' => '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>' ),
                            'facebook' => array( 'label' => __( 'Lanjutkan dengan Facebook', 'vanmanga' ), 'icon' => '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036c-2.148 0-2.797 1.603-2.797 2.898v1.074h5.441l-.665 3.667h-4.776v7.98H9.101Z"/></svg>' ),
                            'discord' => array( 'label' => __( 'Lanjutkan dengan Discord', 'vanmanga' ), 'icon' => '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286 19.839 19.839 0 006.0025-3.03.077.077 0 00.0321-.0544c.5-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0956 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0956 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/></svg>' ),
                        );

                        foreach (  as  =>  ) {
                             = ['label'];
                             = ['icon'];
                             = function_exists( 'vanmanga_social_auth_url' ) ? vanmanga_social_auth_url(  ) : false;
                            
                            if (  ) {
                                echo '<a href="' . esc_url(  ) . '" class="social-btn ' . esc_attr(  ) . '">' .  . '<span>' . esc_html(  ) . '</span></a>';
                            } else {
                                echo '<a href="#" class="social-btn ' . esc_attr(  ) . ' disabled" onclick="alert(\'' . esc_js( sprintf( __( 'Login %s belum dikonfigurasi oleh admin.', 'vanmanga' ), ucfirst(  ) ) ) . '\'); return false;">' .  . '<span>' . esc_html(  ) . '</span></a>';
                            }
                        }
                        ?>
                    </div>
                <?php endif; ?>
            </div>

            <?php if ( defined( 'WP_DEBUG' ) && WP_DEBUG && current_user_can( 'manage_options' ) ) : ?>
                <div class="vm-auth-debug">
                    <h4><?php esc_html_e( 'Auth Debug (admin)', 'vanmanga' ); ?></h4>
                    <ul>
                        <?php
                         = array( 'google','facebook','discord' );
                        foreach (  as  ) {
                             = function_exists( 'vanmanga_social_get_config' ) ? vanmanga_social_get_config(  ) : false;
                             = (  && ! empty( ['client_id'] ) );
                            echo '<li>' . esc_html( ucfirst(  ) ) . ': ' . (  ? '<strong style="color:#8ef;">' . esc_html__( 'configured', 'vanmanga' ) . '</strong>' : '<span style="opacity:.7;">' . esc_html__( 'not configured', 'vanmanga' ) . '</span>' );
                            if (  ) {
                                 = esc_url( vanmanga_social_auth_url(  ) );
                                echo ' — <a href="' .  . '" target="_blank" rel="noopener">' . esc_html__( 'Start', 'vanmanga' ) . '</a>';
                            }
                            echo '</li>';
                        }
                        ?>
                    </ul>
                    <?php
                    global ;
                     = ->get_results( "SELECT option_name, option_value FROM ->options WHERE option_name LIKE '_transient_vm_social_state_%'" );
                    if (  ) {
                        echo '<div><strong>' . esc_html__( 'Active states', 'vanmanga' ) . '</strong><ul>';
                        foreach (  as  ) {
                             = ->option_name;
                             = preg_replace( '/^_transient_/', '',  );
                             = maybe_unserialize( ->option_value );
                            echo '<li>' . esc_html(  ) . ': <code>' . esc_html( wp_json_encode(  ) ) . '</code></li>';
                        }
                        echo '</ul></div>';
                    } else {
                        echo '<div>' . esc_html__( 'No active social states', 'vanmanga' ) . '</div>';
                    }
                    ?>
                </div>
            <?php endif; ?>
        </form>
    </div>
    <?php

    return ob_get_clean();
}

function vanmanga_register_form_shortcode(  = array() ) {
    // If already logged in show quick profile link
    if ( is_user_logged_in() ) {
         = vanmanga_get_profile_url();
        return '<div class="auth-container"><div class="auth-success">' . esc_html__( 'You are already registered and logged in.', 'vanmanga' ) . ' <a href="' . esc_url(  ) . '">' . esc_html__( 'Go to your profile', 'vanmanga' ) . '</a></div></div>';
    }

    ob_start();

     = ! empty( ['redirect_to'] ) ? esc_url( wp_unslash( ['redirect_to'] ) ) : home_url( '/' );
     = isset( ['register'] ) ? sanitize_text_field( ['register'] ) : '';
    ?>
    <div class="auth-container">
        <style>
            .auth-social__buttons { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
            .social-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 20px; border-radius: 12px; text-decoration: none; font-weight: 700; transition: all 0.2s ease; border: 1px solid transparent; font-size: 15px; line-height: 1.2; letter-spacing: 0.3px; }
            .social-btn:hover { transform: translateY(-2px); text-decoration: none; filter: brightness(1.1); }
            .social-btn:active { transform: translateY(0); filter: brightness(0.95); }
            .social-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
            
            /* Google: Bright White with subtle shadow */
            .social-btn.google { background: #ffffff; color: #1f1f1f; border-color: #ffffff; box-shadow: 0 4px 12px rgba(255,255,255,0.15); }
            .social-btn.google:hover { box-shadow: 0 6px 16px rgba(255,255,255,0.25); }

            /* Facebook: Vibrant Blue */
            .social-btn.facebook { background: #1877F2; color: #fff; border-color: #1877F2; box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4); }
            .social-btn.facebook:hover { box-shadow: 0 6px 16px rgba(24, 119, 242, 0.6); }

            /* Discord: Vibrant Blurple */
            .social-btn.discord { background: #5865F2; color: #fff; border-color: #5865F2; box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4); }
            .social-btn.discord:hover { box-shadow: 0 6px 16px rgba(88, 101, 242, 0.6); }

            .social-btn.disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(100%); transform: none; box-shadow: none; }
        </style>

        <form method="post" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" class="auth-form auth-form--register">
            <?php echo vanmanga_output_auth_notices(); ?>
            <?php wp_nonce_field( 'vanmanga_register_action', 'vanmanga_register_nonce' ); ?>
            <input type="hidden" name="action" value="vanmanga_register">
            <input type="hidden" name="redirect_to" value="<?php echo esc_attr(  ); ?>">

            <?php if (  ) : ?>
                <div class="auth-error"><?php echo esc_html(  ); ?></div>
            <?php endif; ?>

            <label for="vm_reg_name"><?php esc_html_e( 'Display name', 'vanmanga' ); ?></label>
            <input id="vm_reg_name" type="text" name="display_name" required />

            <label for="vm_reg_email"><?php esc_html_e( 'Email', 'vanmanga' ); ?></label>
            <input id="vm_reg_email" type="email" name="user_email" required />

            <label for="vm_reg_pass"><?php esc_html_e( 'Password', 'vanmanga' ); ?></label>
            <input id="vm_reg_pass" type="password" name="user_pass" required />

            <div class="auth-actions">
                <button type="submit" class="btn btn-primary"><?php esc_html_e( 'Register', 'vanmanga' ); ?></button>
            </div>

            <div class="auth-social">
                <p class="auth-social__label"><?php esc_html_e( 'Or continue with', 'vanmanga' ); ?></p>
                <?php if ( shortcode_exists( 'nextend_social_login' ) ) : ?>
                    <div class="auth-social__buttons"><?php echo do_shortcode( '[nextend_social_login]' ); ?></div>
                <?php else : ?>
                    <div class="auth-social__buttons">
                        <?php
                         = array(
                            'google' => array( 'label' => __( 'Daftar dengan Google', 'vanmanga' ), 'icon' => '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>' ),
                            'facebook' => array( 'label' => __( 'Daftar dengan Facebook', 'vanmanga' ), 'icon' => '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036c-2.148 0-2.797 1.603-2.797 2.898v1.074h5.441l-.665 3.667h-4.776v7.98H9.101Z"/></svg>' ),
                            'discord' => array( 'label' => __( 'Daftar dengan Discord', 'vanmanga' ), 'icon' => '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286 19.839 19.839 0 006.0025-3.03.077.077 0 00.0321-.0544c.5-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0956 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0956 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/></svg>' ),
                        );

                        foreach (  as  =>  ) {
                             = ['label'];
                             = ['icon'];
                             = function_exists( 'vanmanga_social_auth_url' ) ? vanmanga_social_auth_url(  ) : false;
                            
                            if (  ) {
                                echo '<a href="' . esc_url(  ) . '" class="social-btn ' . esc_attr(  ) . '">' .  . '<span>' . esc_html(  ) . '</span></a>';
                            } else {
                                echo '<a href="#" class="social-btn ' . esc_attr(  ) . ' disabled" onclick="alert(\'' . esc_js( sprintf( __( 'Login %s belum dikonfigurasi oleh admin.', 'vanmanga' ), ucfirst(  ) ) ) . '\'); return false;">' .  . '<span>' . esc_html(  ) . '</span></a>';
                            }
                        }
                        ?>
                    </div>
                <?php endif; ?>
            </div>

            <?php if ( defined( 'WP_DEBUG' ) && WP_DEBUG && current_user_can( 'manage_options' ) ) : ?>
                <div class="vm-auth-debug">
                    <h4><?php esc_html_e( 'Auth Debug (admin)', 'vanmanga' ); ?></h4>
                    <ul>
                        <?php
                         = array( 'google','facebook','discord' );
                        foreach (  as  ) {
                             = function_exists( 'vanmanga_social_get_config' ) ? vanmanga_social_get_config(  ) : false;
                             = (  && ! empty( ['client_id'] ) );
                            echo '<li>' . esc_html( ucfirst(  ) ) . ': ' . (  ? '<strong style="color:#8ef;">' . esc_html__( 'configured', 'vanmanga' ) . '</strong>' : '<span style="opacity:.7;">' . esc_html__( 'not configured', 'vanmanga' ) . '</span>' );
                            if (  ) {
                                 = esc_url( vanmanga_social_auth_url(  ) );
                                echo ' — <a href="' .  . '" target="_blank" rel="noopener">' . esc_html__( 'Start', 'vanmanga' ) . '</a>';
                            }
                            echo '</li>';
                        }
                        ?>
                    </ul>
                    <?php
                    global ;
                     = ->get_results( "SELECT option_name, option_value FROM ->options WHERE option_name LIKE '_transient_vm_social_state_%'" );
                    if (  ) {
                        echo '<div><strong>' . esc_html__( 'Active states', 'vanmanga' ) . '</strong><ul>';
                        foreach (  as  ) {
                             = ->option_name;
                             = preg_replace( '/^_transient_/', '',  );
                             = maybe_unserialize( ->option_value );
                            echo '<li>' . esc_html(  ) . ': <code>' . esc_html( wp_json_encode(  ) ) . '</code></li>';
                        }
                        echo '</ul></div>';
                    } else {
                        echo '<div>' . esc_html__( 'No active social states', 'vanmanga' ) . '</div>';
                    }
                    ?>
                </div>
            <?php endif; ?>
        </form>
    </div>
    <?php

    return ob_get_clean();
}

function vanmanga_forgot_password_form_shortcode() {
    if ( is_user_logged_in() ) {
        return '<div class="auth-container"><div class="auth-success">' . esc_html__( 'You are already logged in.', 'vanmanga' ) . '</div></div>';
    }

    ob_start();
    ?>
    <div class="auth-container">
        <form method="post" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" class="auth-form auth-form--lostpassword">
            <?php echo vanmanga_output_auth_notices(); ?>
            <?php wp_nonce_field( 'vanmanga_lostpassword_action', 'vanmanga_lostpassword_nonce' ); ?>
            <input type="hidden" name="action" value="vanmanga_lostpassword">

            <p style="font-size:13px; color:var(--muted); margin-bottom:15px;">
                <?php esc_html_e('Masukkan email atau username Anda. Kami akan mengirimkan link untuk mereset password Anda.', 'vanmanga'); ?>
            </p>

            <label for="vm_user_login"><?php esc_html_e( 'Email or Username', 'vanmanga' ); ?></label>
            <input id="vm_user_login" type="text" name="user_login" required />

            <div class="auth-actions">
                <button type="submit" class="btn btn-primary"><?php esc_html_e( 'Reset Password', 'vanmanga' ); ?></button>
            </div>
        </form>
    </div>
    <?php
    return ob_get_clean();
}

/* Profile shortcode */
function vanmanga_profile_shortcode() {
    if ( ! is_user_logged_in() ) {
         = vanmanga_get_login_url();
        return '<div class="auth-container"><div class="auth-error">' . esc_html__( 'You must be logged in to view this page.', 'vanmanga' ) . ' <a href="' . esc_url(  ) . '">' . esc_html__( 'Login', 'vanmanga' ) . '</a></div></div>';
    }

     = wp_get_current_user();
    
    // Check for success/error messages
     = '';
    if ( isset( ['profile-updated'] ) ) {
         = '<div class="auth-success">' . esc_html__( 'Profil berhasil diperbarui.', 'vanmanga' ) . '</div>';
    }
    if ( isset( ['profile-error'] ) ) {
         = sanitize_text_field( ['profile-error'] );
         = __( 'Terjadi kesalahan.', 'vanmanga' );
        if (  === 'password-mismatch' )  = __( 'Password tidak cocok.', 'vanmanga' );
        if (  === 'upload-error' )  = __( 'Gagal mengupload gambar.', 'vanmanga' );
        if (  === 'email-exists' )  = __( 'Email sudah digunakan.', 'vanmanga' );
        if (  === 'file-too-large' )  = __( 'Ukuran gambar terlalu besar (Maks 2MB).', 'vanmanga' );
        if (  === 'invalid-file-type' )  = __( 'Format file tidak didukung. Gunakan JPG, PNG, atau WebP.', 'vanmanga' );
        if (  === 'invalid-image' )  = __( 'File rusak atau bukan gambar valid.', 'vanmanga' );
        if (  === 'expired' )  = __( 'Sesi kadaluarsa. Silakan coba lagi.', 'vanmanga' );
         = '<div class="auth-error">' . esc_html(  ) . '</div>';
    }

    ob_start();
    ?>
    <style>
        .profile-header .current-avatar {
            position: relative;
            display: inline-block;
        }
        .profile-header .current-avatar .avatar { /* .avatar is the class WP adds */
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #374151;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .profile-header .current-avatar label {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background: #3b82f6;
            color: white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            border: 2px solid #111827; /* Border to separate from avatar */
        }
        body.light-mode .profile-header .current-avatar .avatar { border-color: #e5e7eb; }
        body.light-mode .profile-header .current-avatar label { border-color: #fff; }
    </style>
    <div class="auth-container profile-container">
        <?php echo ; ?>
        
        <form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" enctype="multipart/form-data" class="auth-form">
            <input type="hidden" name="action" value="vanmanga_update_profile">
            <?php wp_nonce_field( 'vanmanga_profile_update', 'profile_nonce' ); ?>
            
            <div class="profile-header" style="text-align: center; margin-bottom: 20px;">
                <div class="current-avatar">
                    <?php echo get_avatar( ->ID, 150 ); ?>
                    <label for="profile_pic" title="<?php esc_attr_e('Ganti Foto', 'vanmanga'); ?>">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
                    </label>
                    <input type="file" name="profile_pic" id="profile_pic" accept="image/*" style="display: none;" onchange="if(this.files.length>0) alert('Gambar dipilih: ' + this.files[0].name + '. Klik Simpan untuk menerapkan.');">
                </div>
                <h2 style="margin: 10px 0 5px; font-size: 1.25rem;"><?php echo esc_html( ->display_name ); ?></h2>
                <p style="margin: 0; color: var(--muted); font-size: 14px;">@<?php echo esc_html( ->user_login ); ?></p>
            </div>

            <label for="display_name"><?php esc_html_e( 'Nama Tampilan', 'vanmanga' ); ?></label>
            <input type="text" name="display_name" id="display_name" value="<?php echo esc_attr( ->display_name ); ?>" required>

            <label for="user_email"><?php esc_html_e( 'Email', 'vanmanga' ); ?></label>
            <input type="email" name="user_email" id="user_email" value="<?php echo esc_attr( ->user_email ); ?>" required>

            <hr style="border: 0; border-top: 1px solid var(--border-color, #374151); margin: 20px 0;">
            <h4 style="margin-bottom: 15px; font-size: 16px;"><?php esc_html_e( 'Ganti Password', 'vanmanga' ); ?> <span style="font-weight: normal; font-size: 12px; color: var(--muted);">(Biarkan kosong jika tidak ingin mengganti)</span></h4>

            <label for="pass1"><?php esc_html_e( 'Password Baru', 'vanmanga' ); ?></label>
            <input type="password" name="pass1" id="pass1" autocomplete="new-password">

            <label for="pass2"><?php esc_html_e( 'Konfirmasi Password', 'vanmanga' ); ?></label>
            <input type="password" name="pass2" id="pass2" autocomplete="new-password">

            <div class="auth-actions" style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;">
                <button type="submit" class="btn btn-primary"><?php esc_html_e( 'Simpan Profil', 'vanmanga' ); ?></button>
                <a href="<?php echo esc_url( wp_logout_url( home_url('/') ) ); ?>" class="btn" style="background: rgba(239, 68, 68, 0.1); color: #ef4444;"><?php esc_html_e( 'Logout', 'vanmanga' ); ?></a>
            </div>
            
            <?php if ( current_user_can( 'manage_options' ) ) : ?>
                <div style="margin-top: 15px; text-align: center;">
                    <a href="<?php echo esc_url( admin_url() ); ?>" style="font-size: 13px; color: var(--muted); text-decoration: none;">&larr; <?php esc_html_e( 'Ke Dashboard Admin', 'vanmanga' ); ?></a>
                </div>
            <?php endif; ?>
        </form>
    </div>
    <?php
    return ob_get_clean();
}

// Handlers were moved to `inc/auth/auth-core.php` to centralize authentication logic and avoid redeclaration.
// The central controller registers `vanmanga_handle_login` and `vanmanga_handle_register` and is loaded from `functions.php`.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">

    <?php wp_head(); ?>
    <style>
        /* --- GLOBAL VARIABLES & RESET --- */
        :root {
            --header-h: 60px;
            --header-bg: #141622;
            --header-border: #1f2937;
            --text-primary: #ffffff;
            --text-secondary: #9ca3af;
            --accent-primary: #6c5ce7;
            --bg-drawer: #1c1c1c;
        }
        body.light-mode {
            --header-bg: #ffffff;
            --header-border: #e5e7eb;
            --text-primary: #111827;
            --text-secondary: #4b5563;
            --bg-drawer: #ffffff;
        }

        /* --- SERIES CARD STYLES (Existing) --- */
        .series-grid, .bookmarks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 10px 0; }
        @media (min-width: 640px) { .series-grid, .bookmarks-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
        @media (min-width: 1024px) { .series-grid, .bookmarks-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }

        .series-card2 { position: relative; border-radius: 8px; overflow: hidden; background-color: #1f2937; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; height: 100%; display: flex; flex-direction: column; }
        .series-card2:hover { transform: translateY(-4px); }
        .series-card2 .series-cover { position: relative; aspect-ratio: 2 / 3; width: 100%; overflow: hidden; }
        .series-card2 .series-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
        .series-card2:hover .series-cover img { transform: scale(1.05); }
        .series-card2 .series-info { padding: 10px; flex-grow: 1; display: flex; align-items: center; justify-content: center; background: #111827; min-height: 60px; }
        .series-card2 .series-title { font-size: 14px; font-weight: 600; line-height: 1.4; margin: 0; text-align: center; color: #e5e7eb; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .series-card2 .series-title a { color: inherit; text-decoration: none; }
        body.light-mode .series-card2 { background-color: #ffffff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        body.light-mode .series-card2 .series-info { background-color: #f9fafb; }
        body.light-mode .series-card2 .series-title { color: #111827; }

        /* --- HEADER STYLES --- */
        body { padding-top: var(--header-h); } /* Prevent content overlap */

        .site-header {
            background: var(--header-bg);
            height: var(--header-h);
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            border-bottom: 1px solid var(--header-border);
            transition: transform 0.3s ease, background 0.3s;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        .site-header.hidden { transform: translateY(-100%); }
        
        /* Admin Bar Fix - Agar header tidak tertutup/menutup Admin Bar WP */
        body.admin-bar .site-header { top: 32px; }
        @media screen and (max-width: 782px) {
            body.admin-bar .site-header { top: 46px; }
        }

        .header-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            padding: 0 15px;
            max-width: 1280px;
            margin: 0 auto;
        }

        /* 1. Logo */
        .header-logo { display: flex; align-items: center; z-index: 1002; flex-shrink: 0; }
        .header-logo img { height: 32px; width: auto; }
        .header-logo span { font-weight: 800; font-size: 20px; color: var(--accent-primary); letter-spacing: -0.5px; text-transform: uppercase; }
        .header-logo a { text-decoration: none; display: flex; align-items: center; gap: 8px; }

        /* 2. Search (Desktop) */
        .header-search-desktop {
            flex: 1;
            max-width: 400px;
            margin: 0 20px;
            display: none; /* Hidden on mobile */
        }
        @media (min-width: 768px) { .header-search-desktop { display: block; } }

        .search-form-header { position: relative; }
        .search-input-header {
            width: 100%;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--header-border);
            border-radius: 50px;
            padding: 8px 15px 8px 40px;
            color: var(--text-primary);
            font-size: 14px;
            transition: all 0.2s;
        }
        .search-input-header:focus {
            background: rgba(255,255,255,0.1);
            border-color: var(--accent-primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);
        }
        .search-icon-header {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            pointer-events: none;
        }
        body.light-mode .search-input-header { background: #f3f4f6; border-color: #d1d5db; }

        /* 3. Actions */
        .header-actions { display: flex; align-items: center; gap: 8px; }
        
        .action-btn {
            background: transparent;
            border: none;
            color: var(--text-primary);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.2s;
            position: relative;
        }
        .action-btn:hover { background: rgba(255,255,255,0.1); }
        body.light-mode .action-btn:hover { background: rgba(0,0,0,0.05); }
        .action-btn svg { width: 22px; height: 22px; stroke-width: 2px; }

        /* Mobile Search Toggle */
        .mobile-search-trigger { display: flex; }
        @media (min-width: 768px) { .mobile-search-trigger { display: none; } }

        /* User Avatar in Header */
        .header-user-avatar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-primary); }
        
        /* --- MOBILE SEARCH OVERLAY --- */
        .mobile-search-overlay {
            position: absolute;
            top: var(--header-h);
            left: 0;
            width: 100%;
            background: var(--header-bg);
            padding: 15px;
            border-bottom: 1px solid var(--header-border);
            transform: translateY(-150%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 999;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            visibility: hidden; /* Pastikan benar-benar hilang */
            opacity: 0;
        }
        .mobile-search-overlay.active { transform: translateY(0); visibility: visible; opacity: 1; }

        /* --- OFF-CANVAS DRAWER --- */
        .mobile-menu-drawer {
            position: fixed;
            top: 0;
            right: 0;
            width: 280px;
            height: 100vh;
            background: var(--bg-drawer);
            z-index: 1001;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: -5px 0 25px rgba(0,0,0,0.5);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        .mobile-menu-drawer.open { transform: translateX(0); }

        .menu-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s;
            backdrop-filter: blur(3px);
        }
        .menu-backdrop.active { opacity: 1; visibility: visible; }

        /* Drawer Content */
        .drawer-header {
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--header-border);
        }
        .drawer-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 5px; }
        
        .drawer-content { padding: 20px; flex: 1; }
        
        .drawer-user-card {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            margin-bottom: 25px;
            text-decoration: none;
        }
        body.light-mode .drawer-user-card { background: #f3f4f6; }
        .drawer-user-card img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
        .drawer-user-info h4 { margin: 0; font-size: 16px; color: var(--text-primary); font-weight: 600; }
        .drawer-user-info span { font-size: 12px; color: var(--text-secondary); }

        .drawer-nav { display: flex; flex-direction: column; gap: 8px; }
        .drawer-link {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 12px 15px;
            color: var(--text-secondary);
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.2s;
            font-weight: 500;
            font-size: 15px;
        }
        .drawer-link:hover, .drawer-link.active {
            background: rgba(108, 92, 231, 0.1);
            color: var(--accent-primary);
        }
        .drawer-link svg { width: 20px; height: 20px; }

        .drawer-footer {
            padding: 20px;
            border-top: 1px solid var(--header-border);
        }
        .setting-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            color: var(--text-primary);
            font-size: 14px;
        }

        /* Toggle Switch */
        .switch { position: relative; display: inline-block; width: 44px; height: 24px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #374151; transition: .4s; border-radius: 24px; }
        .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: var(--accent-primary); }
        input:checked + .slider:before { transform: translateX(20px); }
        body.light-mode .slider { background-color: #d1d5db; }

        /* Back to Top */
        #back-to-top {
            position: fixed; bottom: 80px; right: 20px; width: 45px; height: 45px;
            background-color: rgba(59, 130, 246, 0.5); backdrop-filter: blur(4px);
            color: white; border: none; border-radius: 50%; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999;
        }
        #back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
        #back-to-top:hover { background-color: rgba(37, 99, 235, 0.9); transform: translateY(-5px); }

        /* Social Share Box (Global) */
        .chapter-share { display: flex; justify-content: center; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
        .share-box { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 6px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; transition: transform 0.2s, opacity 0.2s; cursor: pointer; }
        .share-box:hover { transform: translateY(-2px); opacity: 0.9; color: #fff; }
        .share-box svg { width: 18px; height: 18px; fill: currentColor; }
        .share-box.facebook { background-color: #1877F2; }
        .share-box.twitter { background-color: #000000; border: 1px solid #333; }
        .share-box.whatsapp { background-color: #25D366; }
    </style>
</head>

<body <?php body_class(); ?> data-home-url="<?php echo esc_url(home_url('/')); ?>">
    <?php wp_body_open(); ?>
    
    <?php 
    if ( ! is_page( array( 'login', 'register', 'sign-in', 'sign-up' ) ) && ! in_array( $GLOBALS['pagenow'], array( 'wp-login.php', 'wp-register.php' ) ) ) : ?>
        <button id="back-to-top" aria-label="Back to Top">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 15l-6-6-6 6"/>
            </svg>
        </button>
    <?php endif; ?>

    <div id="page" class="site">
        
        <!-- === HEADER UTAMA === -->
        <header id="masthead" class="site-header">
            <div class="header-container">
                
                <!-- 1. Logo -->
                <div class="header-logo">
                    <?php if (has_custom_logo()) : ?>
                        <?php the_custom_logo(); ?>
                    <?php else : ?>
                        <a href="<?php echo esc_url(home_url('/')); ?>" rel="home" class="logo-link">
                            <?php if (has_site_icon()) : ?>
                                <img src="<?php echo esc_url(get_site_icon_url(192)); ?>" alt="<?php bloginfo('name'); ?>">
                            <?php endif; ?>
                            <span><?php bloginfo('name'); ?></span>
                        </a>
                    <?php endif; ?>
                </div>

                <!-- 2. Search (Desktop Only) -->
                <div class="header-search-desktop">
                    <form role="search" method="get" class="search-form-header" action="<?php echo esc_url(home_url('/')); ?>">
                        <svg class="search-icon-header" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                        <input type="search" class="search-input-header" placeholder="<?php esc_attr_e('Cari manga, manhwa...', 'vanmanga'); ?>" value="<?php echo get_search_query(); ?>" name="s" />
                    </form>
                </div>

                <!-- 3. Actions (Mobile Search, User, Burger) -->
                <div class="header-actions">
                    <!-- Mobile Search Toggle -->
                    <button class="action-btn mobile-search-trigger" aria-label="Search">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                    </button>

                    <!-- User Profile (Desktop & Mobile) -->
                    <?php if (is_user_logged_in()) :  = wp_get_current_user(); ?>
                        <a href="<?php echo esc_url(function_exists('vanmanga_get_profile_url') ? vanmanga_get_profile_url() : home_url('/profile')); ?>" class="header-user-avatar" aria-label="Profile">
                            <?php echo get_avatar(->ID, 32); ?>
                        </a>
                    <?php else : ?>
                        <a href="<?php echo esc_url(function_exists('vanmanga_get_login_url') ? vanmanga_get_login_url() : wp_login_url()); ?>" class="action-btn" aria-label="Login">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                        </a>
                    <?php endif; ?>

                    <!-- Burger Menu -->
                    <button class="action-btn menu-toggle" aria-label="Menu">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
                    </button>
                </div>
            </div>

            <!-- Mobile Search Overlay (Slide Down) -->
            <div class="mobile-search-overlay" id="mobile-search-overlay">
                <form role="search" method="get" class="search-form-header" action="<?php echo esc_url(home_url('/')); ?>">
                    <svg class="search-icon-header" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                    <input type="search" class="search-input-header" placeholder="<?php esc_attr_e('Cari judul...', 'vanmanga'); ?>" value="<?php echo get_search_query(); ?>" name="s" />
                </form>
            </div>
        </header><!-- #masthead -->

        <!-- === OFF-CANVAS MENU DRAWER === -->
        <div class="menu-backdrop" id="menu-backdrop"></div>
        <div class="mobile-menu-drawer" id="mobile-menu-drawer">
            <div class="drawer-header">
                <span style="font-weight: 700; color: var(--text-primary);">MENU</span>
                <button class="drawer-close" aria-label="Close Menu">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>

            <div class="drawer-content">
                <!-- User Section -->
                <?php if (is_user_logged_in()) :  = wp_get_current_user(); ?>
                    <a href="<?php echo esc_url(function_exists('vanmanga_get_profile_url') ? vanmanga_get_profile_url() : home_url('/profile')); ?>" class="drawer-user-card">
                        <?php echo get_avatar(->ID, 50); ?>
                        <div class="drawer-user-info">
                            <h4><?php echo esc_html(->display_name); ?></h4>
                            <span><?php esc_html_e('Lihat Profil', 'vanmanga'); ?></span>
                        </div>
                    </a>
                <?php else : ?>
                    <div class="drawer-user-card" style="display: block; text-align: center;">
                        <p style="margin-bottom: 10px; color: var(--text-secondary);"><?php esc_html_e('Bergabunglah untuk menyimpan bookmark!', 'vanmanga'); ?></p>
                        <div style="display: flex; gap: 10px;">
                            <a href="<?php echo esc_url(function_exists('vanmanga_get_login_url') ? vanmanga_get_login_url() : wp_login_url()); ?>" style="flex: 1; background: var(--accent-primary); color: #fff; padding: 8px; border-radius: 6px; text-align: center; text-decoration: none; font-weight: 600;">Login</a>
                            <a href="<?php echo esc_url(function_exists('vanmanga_get_register_url') ? vanmanga_get_register_url() : wp_registration_url()); ?>" style="flex: 1; border: 1px solid var(--accent-primary); color: var(--accent-primary); padding: 8px; border-radius: 6px; text-align: center; text-decoration: none; font-weight: 600;">Register</a>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Navigation Links -->
                <nav class="drawer-nav">
                    <a href="<?php echo home_url('/'); ?>" class="drawer-link">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                        <?php esc_html_e('Beranda', 'vanmanga'); ?>
                    </a>
                    <a href="<?php echo home_url('/bookmarks'); ?>" class="drawer-link">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
                        <?php esc_html_e('Bookmark', 'vanmanga'); ?>
                    </a>
                    <a href="<?php echo get_post_type_archive_link('series'); ?>" class="drawer-link">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
                        <?php esc_html_e('Daftar Series', 'vanmanga'); ?>
                    </a>
                    <?php if (is_user_logged_in()) : ?>
                        <a href="<?php echo esc_url(wp_logout_url(home_url())); ?>" class="drawer-link" style="color: #ef4444;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
                            <?php esc_html_e('Logout', 'vanmanga'); ?>
                        </a>
                    <?php endif; ?>
                </nav>
            </div>

            <div class="drawer-footer">
                <div class="setting-row">
                    <span><?php esc_html_e('Mode Gelap', 'vanmanga'); ?></span>
                    <label class="switch">
                        <input type="checkbox" id="theme-toggle">
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="setting-row">
                    <span><?php esc_html_e('Header Tetap', 'vanmanga'); ?></span>
                    <label class="switch">
                        <input type="checkbox" id="header-toggle" checked>
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
        </div>

    <div id="content" class="site-content">

    <!-- Announcement Logic (Existing) -->
    <?php
     = get_theme_mod('vanmanga_announcement_enable', false);
    
     = [];
    
    if ( = get_theme_mod('vanmanga_announcement_text', '')) [] = ['text' => , 'color' => get_theme_mod('vanmanga_announcement_color', '#6c5ce7')];
    if ( = get_theme_mod('vanmanga_announcement_text_2', '')) [] = ['text' => , 'color' => get_theme_mod('vanmanga_announcement_color_2', '#6c5ce7')];
    if ( = get_theme_mod('vanmanga_announcement_text_3', '')) [] = ['text' => , 'color' => get_theme_mod('vanmanga_announcement_color_3', '#6c5ce7')];

    if ( && !empty()) :
    ?>
    <div id="announcements-wrapper">
        <?php foreach ( as ) :  = md5(['text']); ?>
        <div class="site-announcement" data-hash="<?php echo esc_attr(); ?>" style="--glow-color: <?php echo esc_attr(['color']); ?>;">
            <div class="container" style="display: flex; justify-content: space-between; align-items: center;">
                <div class="announcement-content" style="flex: 1;"><?php echo wp_kses_post(['text']); ?></div>
                <button class="announcement-close" style="background:none; border:none; color:#fff; font-size:20px; cursor:pointer;">&times;</button>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <style>
        #announcements-wrapper { display: flex; flex-direction: column; gap: 10px; margin: 20px auto; max-width: 1280px; padding: 0 15px; }
        .site-announcement { background: rgba(20, 22, 34, 0.95); border: 1px solid var(--glow-color); box-shadow: 0 0 10px -2px var(--glow-color); color: #fff; padding: 10px; border-radius: 8px; backdrop-filter: blur(5px); }
        body.light-mode .site-announcement { background: rgba(255,255,255,0.95); color: #111827; }
        body.light-mode .announcement-close { color: #111827; }
    </style>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const closed = JSON.parse(localStorage.getItem('vanmanga_closed_announcements') || '[]');
        document.querySelectorAll('.site-announcement').forEach(ann => {
            const hash = ann.dataset.hash;
            if(closed.includes(hash)) ann.style.display = 'none';
            ann.querySelector('.announcement-close').onclick = () => {
                ann.style.display = 'none';
                if(!closed.includes(hash)) { closed.push(hash); localStorage.setItem('vanmanga_closed_announcements', JSON.stringify(closed)); }
            };
        });
    });
    </script>
    <?php endif; ?>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // --- Mobile Menu Drawer Logic ---
        const menuToggle = document.querySelector('.menu-toggle');
        const drawer = document.getElementById('mobile-menu-drawer');
        const backdrop = document.getElementById('menu-backdrop');
        const closeDrawerBtn = document.querySelector('.drawer-close');

        function toggleDrawer() {
            drawer.classList.toggle('open');
            backdrop.classList.toggle('active');
            document.body.style.overflow = drawer.classList.contains('open') ? 'hidden' : '';
        }

        if (menuToggle) menuToggle.addEventListener('click', toggleDrawer);
        if (closeDrawerBtn) closeDrawerBtn.addEventListener('click', toggleDrawer);
        if (backdrop) backdrop.addEventListener('click', toggleDrawer);

        // --- Mobile Search Toggle ---
        const searchToggle = document.querySelector('.mobile-search-trigger');
        const searchOverlay = document.getElementById('mobile-search-overlay');
        const searchInput = searchOverlay ? searchOverlay.querySelector('input') : null;

        if (searchToggle && searchOverlay) {
            searchToggle.addEventListener('click', function() {
                searchOverlay.classList.toggle('active');
                if (searchOverlay.classList.contains('active') && searchInput) {
                    setTimeout(() => searchInput.focus(), 100);
                }
            });
        }

        // --- Sticky Header Logic ---
        const header = document.getElementById('masthead');
        const headerToggle = document.getElementById('header-toggle');
        let lastScrollY = window.scrollY;

        // Load saved state
        const isSticky = localStorage.getItem('vanmanga_sticky_header') !== 'false'; // Default true
        if (headerToggle) headerToggle.checked = isSticky;

        window.addEventListener('scroll', function() {
            if (headerToggle && headerToggle.checked) {
                header.classList.remove('hidden');
                return;
            }
            const currentScrollY = window.scrollY;
            if (currentScrollY > lastScrollY && currentScrollY > 100) {
                header.classList.add('hidden'); // Scroll Down -> Hide
            } else {
                header.classList.remove('hidden'); // Scroll Up -> Show
            }
            lastScrollY = currentScrollY;
        });

        if (headerToggle) {
            headerToggle.addEventListener('change', function() {
                localStorage.setItem('vanmanga_sticky_header', headerToggle.checked);
                if (this.checked) header.classList.remove('hidden');
            });
        }

        // --- Dark Mode Logic ---
        const themeToggle = document.getElementById('theme-toggle');
        const currentTheme = localStorage.getItem('vanmanga_theme');
        
        if (currentTheme === 'light') {
            document.body.classList.add('light-mode');
            if (themeToggle) themeToggle.checked = false; // Checkbox logic: checked = dark mode usually? Let's fix logic below
        } else {
            if (themeToggle) themeToggle.checked = true; // Default Dark
        }

        if (themeToggle) {
            // Logic: Checked = Dark Mode (Default), Unchecked = Light Mode
            // Or: Checked = Light Mode? Let's follow the label "Mode Gelap"
            // Label says "Mode Gelap". So Checked = Dark.
            
            // Sync initial state
            themeToggle.checked = !document.body.classList.contains('light-mode');

            themeToggle.addEventListener('change', function() {
                if (this.checked) {
                    document.body.classList.remove('light-mode');
                    localStorage.setItem('vanmanga_theme', 'dark');
                } else {
                    document.body.classList.add('light-mode');
                    localStorage.setItem('vanmanga_theme', 'light');
                }
            });
        }

        // --- Back to Top ---
        const backToTopBtn = document.getElementById('back-to-top');
        if (backToTopBtn) {
            window.addEventListener('scroll', () => {
                backToTopBtn.classList.toggle('show', window.scrollY > 300);
            });
            backToTopBtn.addEventListener('click', () => {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            });
        }
    });
    </script>
<?php get_header();

do_action('vanmanga_before_content'); ?>

<main id="primary" class="site-main front-page">
    <style>
/* Prevent horizontal scroll on the page */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
/* === SERIES GRID === */
.series-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 12px;
  padding: 12px;
}

@media (min-width: 768px) {
  .series-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .series-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1280px;
    margin: auto;
  }
}

/* === CARD === */
.series-card {
  display: block;
  background: #141622;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}

body.light-mode .series-card {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.series-card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 28px rgba(123,97,255,.25);
}

/* === COVER === */
.series-cover {
  position: relative;
  aspect-ratio: 2 / 3;
}

.series-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.series-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,.2),
    transparent
  );
}

/* === BADGE === */
.series-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff3d3d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
}

/* === INFO === */
.series-info {
  padding: 10px;
}

.series-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === CHAPTER INFO === */
.series-chapters {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chapter-latest {
  background: #1e2030;
  border-radius: 10px;
  font-size: 12px;
  overflow: hidden;
}

body.light-mode .chapter-latest {
  background: #f3f4f6;
  color: #111827;
}

body.light-mode .chapter-link:hover {
    background-color: #e9e9f0;
}

body.light-mode .chapter-link:active {
    background-color: #dde0e6;
}

.chapter-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.chapter-time {
  color: #a1a1aa;
  font-size: 11px;
}

.chapter-prev {
  font-size: 9px;
  color: #a1a1aa;
}

/* === HOME BANNER SLIDER === */
.home-banner-slider {
  position: relative;
  margin: 20px 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.banner-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}
.banner-slide {
  min-width: 100%;
  position: relative;
}
/* Navigation Buttons */
.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.3);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, opacity 0.3s;
  opacity: 0; /* Hidden by default */
  font-size: 18px;
}
.home-banner-slider:hover .slider-nav-btn { opacity: 1; }
.slider-nav-btn:hover { background: rgba(0,0,0,0.7); }
.slider-nav-btn.prev { left: 15px; }
.slider-nav-btn.next { right: 15px; }

/* Existing Banner Styles adapted */
.home-banner {
  position: relative;
  overflow: hidden;
  /* Reset margin/radius/shadow as wrapper handles it */
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.home-banner-img {
  width: 100%;
  height: 450px; /* Tinggi tetap agar terlihat seperti banner */
  object-fit: cover;
  object-position: center 30%; /* Fokus sedikit ke atas tengah */
  display: block;
  transition: transform 0.5s ease;
}
.home-banner:hover .home-banner-img {
    transform: scale(1.02);
}

.home-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0f0f0f 0%, rgba(15,15,15,0.6) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
}

body.light-mode .home-banner-overlay {
    background: linear-gradient(to top, var(--bg-primary) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
}

.banner-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.banner-title {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.banner-title a { color: #fff; text-decoration: none; }

.banner-genres {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 8px;
  margin-bottom: 16px;
}

.banner-genre-item {
  font-size: 11px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.banner-synopsis {
  font-size: 15px;
  color: #d1d5db;
  margin-bottom: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.banner-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.btn-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-banner.read {
  background: #3b82f6;
  color: white;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
.btn-banner.read:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}

.btn-banner.bookmark {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-banner.bookmark:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .home-banner-img { height: 350px; }
  .home-banner-overlay { padding: 20px; }
  .banner-title { font-size: 22px; }
  .banner-synopsis { -webkit-line-clamp: 2; font-size: 14px; }
  .btn-banner { padding: 10px 20px; font-size: 14px; }
}

/* Slider Dots */
.slider-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.slider-dot {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}
.slider-dot.active {
  background: #fff;
  width: 24px;
  border-radius: 4px;
}

/* === RANKED LIST === */
.ranked-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ranked-list li a {
  display: flex;
  align-items: center;
  background: #141622;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  transition: background .2s;
}
body.light-mode .ranked-list li a {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.ranked-list li a:hover {
  background: #1f2937;
}
body.light-mode .ranked-list li a:hover {
  background: #f3f4f6;
}
.rank-number {
  font-size: 20px;
  font-weight: 800;
  color: #3b82f6;
  margin-right: 16px;
  min-width: 24px;
  text-align: center;
}
.rank-title {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === HORIZONTAL SCROLL (Popular Series) === */
.series-scroll-x {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 4px 4px 16px 4px; /* Padding bottom for scrollbar space */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.series-scroll-x::-webkit-scrollbar {
  height: 6px;
}
.series-scroll-x::-webkit-scrollbar-track {
  background: #111827;
  border-radius: 3px;
}
.series-scroll-x::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 3px;
}
body.light-mode .series-scroll-x::-webkit-scrollbar-track {
  background: #f3f4f6;
}
body.light-mode .series-scroll-x::-webkit-scrollbar-thumb {
  background: #d1d5db;
}
.series-scroll-x .series-card,
.series-scroll-x .series-card2 {
  min-width: 130px;
  width: 130px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .series-scroll-x .series-card,
  .series-scroll-x .series-card2 {
    min-width: 160px;
    width: 160px;
  }
}
    </style>
    <div class="container">

        <?php
        // Banner Section (Homepage)
        $homepage_banners = new WP_Query([
            'post_type'      => 'banner',
            'posts_per_page' => 7, // Allow multiple banners
            'meta_query'     => [
                'relation' => 'AND',
                ['key' => '_enable', 'value' => '1']
            ]
        ]);

        if (->have_posts()) : ?>
            <div class="home-banner-slider">
                <div class="banner-wrapper">
            <?php
            while (->have_posts()) : ->the_post();
                  = get_post_meta(get_the_ID(), '_cover', true);
                   = get_post_meta(get_the_ID(), '_link', true);
                 = get_post_meta(get_the_ID(), '_banner_series_id', true);
                
                 = get_the_title(); // Default ke judul banner
                 = '';
                 = 0;
                 = false;

                if () {
                     = get_post();
                    if () {
                         = ->post_title;
                         = get_post_meta(, 'synopsis', true);
                         = get_permalink();
                         = ;
                         = get_the_terms(, 'genre');
                    }
                }

                if () : ?>
                    <div class="banner-slide">
                    <div class="home-banner">
                        <img src="<?php echo esc_url(); ?>" alt="<?php echo esc_attr(); ?>" class="home-banner-img">
                        <div class="home-banner-overlay">
                            <div class="banner-content">
                                <h2 class="banner-title">
                                    <?php if () echo '<a href="' . esc_url() . '">'; ?>
                                    <?php echo esc_html(); ?>
                                    <?php if () echo '</a>'; ?>
                                </h2>
                                <?php if ( && !is_wp_error()) : ?>
                                    <div class="banner-genres">
                                        <?php foreach ( as ) : ?>
                                            <span class="banner-genre-item"><?php echo esc_html(->name); ?></span>
                                        <?php endforeach; ?>
                                    </div>
                                <?php endif; ?>
                                <?php if () : ?>
                                    <div class="banner-synopsis">
                                        <?php echo wp_strip_all_tags(); ?>
                                    </div>
                                <?php endif; ?>
                                <div class="banner-actions">
                                    <?php if () : ?>
                                        <a href="<?php echo esc_url(); ?>" class="btn-banner read"><?php esc_html_e('Mulai Baca', 'vanmanga'); ?></a>
                                    <?php endif; ?>
                                    
                                    <?php if ( && function_exists('vanmanga_is_bookmarked')) : ?>
                                        <button class="btn-banner bookmark btn-follow" data-series-id="<?php echo esc_attr(); ?>">
                                            <?php echo vanmanga_is_bookmarked() ? esc_html__('Diikuti', 'vanmanga') : esc_html__('Bookmark', 'vanmanga'); ?>
                                        </button>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                <?php endif;
            endwhile;
            ?>
                </div>
                <button class="slider-nav-btn prev" aria-label="Previous Slide">❮</button>
                <button class="slider-nav-btn next" aria-label="Next Slide">❯</button>
                <div class="slider-dots"></div>
            </div>
            <?php
            wp_reset_postdata();
        endif;
        ?>


            <!-- Popular Series -->
            <section class="popular-series">
                <h2 class="section-title"><?php esc_html_e('Popular Series', 'vanmanga'); ?></h2>
                <div class="series-scroll-x">
                    <?php
                     = new WP_Query(array(
                        'post_type' => 'series',
                        'posts_per_page' => 12,
                        'post_status' => 'publish',
                        'meta_key' => '_views_12h',
                        'orderby' => 'meta_value_num',
                        'order' => 'DESC',
                    ));

                    if (->have_posts()) :
                        while (->have_posts()) : ->the_post();
                            get_template_part('template-parts/series-card2');
                        endwhile;
                        wp_reset_postdata();
                    else :
                        echo '<p>' . esc_html__('No series found.', 'vanmanga') . '</p>';
                    endif;
                    ?>
                </div>
            </section>

            <!-- Latest Updates -->
             <!-- sesuaikan agar terlihat cover series, judul series, dan 2 chapter dibawahnya. desain harus bagus, dan buat ukuran fontnya tidak berlebihan jika judul lebih dari 2 baris maka sembunyikan lainnya dengan ... -->
            <section class="latest-updates">
                <h2 class="section-title"><?php esc_html_e('Latest Updates', 'vanmanga'); ?></h2>
                <div class="series-grid">
                    <?php
                     = new WP_Query(array(
                        'post_type' => 'series',
                        'posts_per_page' => 12,
                        'meta_query' => array(
                            'relation' => 'OR',
                            array(
                                'key' => '_series_last_updated',
                                'compare' => 'EXISTS',
                            ),
                            array(
                                'key' => '_series_last_updated',
                                'compare' => 'NOT EXISTS',
                            ),
                        ),
                        'orderby' => array(
                            'meta_value_num' => 'DESC',
                            'date' => 'DESC',
                        ),
                        'meta_key' => '_series_last_updated',
                    ));

                    if (->have_posts()) :
                        while (->have_posts()) : ->the_post();
                            get_template_part('template-parts/series-card');
                        endwhile;
                        wp_reset_postdata();
                    else :
                        echo '<p>' . esc_html__('No series found.', 'vanmanga') . '</p>';
                    endif;
                    ?>
                </div>
            </section>

            <!-- Featured/Ranking Series -->
            <section class="featured-series">
                <h2 class="section-title"><?php esc_html_e('Peringkat Series', 'vanmanga'); ?></h2>
                <ol class="ranked-list">
                    <?php
                     = new WP_Query(array(
                        'post_type'      => 'series',
                        'posts_per_page' => 5,
                        'post_status'    => 'publish',
                        'meta_key'       => 'views',
                        'orderby'        => 'meta_value_num',
                        'order'          => 'DESC',
                    ));

                    if (->have_posts()) :
                         = 1;
                        while (->have_posts()) : ->the_post();
                            ?>
                            <li>
                                <a href="<?php the_permalink(); ?>">
                                    <span class="rank-number"><?php echo ; ?></span>
                                    <span class="rank-title"><?php the_title(); ?></span>
                                </a>
                            </li>
                            <?php
                            ++;
                        endwhile;
                        wp_reset_postdata();
                    else :
                        echo '<li>' . esc_html__('Belum ada data peringkat.', 'vanmanga') . '</li>';
                    endif;
                    ?>
                </ol>
            </section>
        </div>
</main><!-- #primary -->

<script>
document.addEventListener('DOMContentLoaded', function() {
    const slider = document.querySelector('.home-banner-slider');
    if (!slider) return;

    const wrapper = slider.querySelector('.banner-wrapper');
    const slides = slider.querySelectorAll('.banner-slide');
    const dotsContainer = slider.querySelector('.slider-dots');
    const prevBtn = slider.querySelector('.slider-nav-btn.prev');
    const nextBtn = slider.querySelector('.slider-nav-btn.next');
    
    if (slides.length <= 1) {
        if(prevBtn) prevBtn.style.display = 'none';
        if(nextBtn) nextBtn.style.display = 'none';
        return;
    }

    let currentIndex = 0;
    const totalSlides = slides.length;
    let autoSlideInterval;

    // Create dots
    slides.forEach((_, index) => {
        const dot = document.createElement('div');
        dot.classList.add('slider-dot');
        if (index === 0) dot.classList.add('active');
        dot.addEventListener('click', () => goToSlide(index));
        dotsContainer.appendChild(dot);
    });

    const dots = slider.querySelectorAll('.slider-dot');

    function updateSlider() {
        wrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
        dots.forEach(dot => dot.classList.remove('active'));
        if(dots[currentIndex]) dots[currentIndex].classList.add('active');
    }

    function goToSlide(index) {
        currentIndex = index;
        if (currentIndex < 0) currentIndex = totalSlides - 1;
        if (currentIndex >= totalSlides) currentIndex = 0;
        updateSlider();
        resetTimer();
    }

    function nextSlide() { goToSlide(currentIndex + 1); }
    function prevSlide() { goToSlide(currentIndex - 1); }

    function startTimer() { autoSlideInterval = setInterval(nextSlide, 5000); }
    function resetTimer() { clearInterval(autoSlideInterval); startTimer(); }

    if (prevBtn) prevBtn.addEventListener('click', prevSlide);
    if (nextBtn) nextBtn.addEventListener('click', nextSlide);

    // Touch Swipe Support
    let touchStartX = 0;
    wrapper.addEventListener('touchstart', e => touchStartX = e.changedTouches[0].screenX);
    wrapper.addEventListener('touchend', e => { if (e.changedTouches[0].screenX < touchStartX - 50) nextSlide(); if (e.changedTouches[0].screenX > touchStartX + 50) prevSlide(); });

    startTimer();
});
</script>

<?php do_action('vanmanga_after_content'); ?>

<?php get_footer(); ?>
<?php
/**
 * Template Name: Mailbox Page
 *
 * @package VanManga
 */

get_header();

// Redirect jika user belum login
if ( ! is_user_logged_in() ) {
    echo '<div class="container" style="padding: 50px 0; text-align: center; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center;">';
    echo '<p style="margin-bottom: 20px; font-size: 1.2em; color: var(--text-primary, #fff);">' . esc_html__( 'Silakan login untuk melihat notifikasi Anda.', 'vanmanga' ) . '</p>';
    echo '<a href="' . esc_url( wp_login_url( get_permalink() ) ) . '" class="button" style="padding: 10px 20px; background: var(--accent-primary, #6c5ce7); color: #fff; text-decoration: none; border-radius: 5px;">' . esc_html__( 'Login', 'vanmanga' ) . '</a>';
    echo '</div>';
    get_footer();
    exit;
}

$user_id = get_current_user_id();

// --- 1. Ambil Balasan Komentar (Logic mirip functions.php tapi dengan detail) ---
global ;
 = ->prefix . 'van_city_comments';
 = array();

// Cek apakah tabel komentar custom ada
if ( ->get_var( "SHOW TABLES LIKE ''" ) ===  ) {
     = ->get_results( ->prepare(
        "SELECT c.*, p.post_title, p.ID as post_ID 
        FROM  c
        INNER JOIN  parent ON c.parent_id = parent.id
        INNER JOIN ->posts p ON c.post_id = p.ID
        WHERE parent.user_id = %d
        AND c.user_id != %d
        ORDER BY c.created_at DESC
        LIMIT 20",
        ,
        
    ) );
}

// --- 2. Ambil Update Series (Bookmark) ---
 = get_user_meta( , 'user_bookmarks', true );
 = array();

if ( ! empty(  ) && is_array(  ) ) {
     = array(
        'post_type'      => array( 'chapter', 'post' ),
        'post_parent__in'=> ,
        'post_status'    => 'publish',
        'orderby'        => 'date',
        'order'          => 'DESC',
        'posts_per_page' => 20,
        'date_query'     => array(
            array(
                'after' => '7 days ago', // Tampilkan update seminggu terakhir
            ),
        ),
    );
     = new WP_Query(  );
     = ->posts;
}
?>

<div class="wrap mailbox-wrap">
    <div class="container">

        <div class="mailbox-grid">
            
            <!-- Section: Replies -->
            <div class="mailbox-section">
                <h2 class="mailbox-title">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
                    <?php esc_html_e( 'Balasan Komentar Terbaru', 'vanmanga' ); ?>
                </h2>
                <div class="mailbox-card">
                    <?php if ( empty(  ) ) : ?>
                        <p class="mailbox-empty"><?php esc_html_e( 'Belum ada balasan baru.', 'vanmanga' ); ?></p>
                    <?php else : ?>
                        <ul class="mailbox-list">
                            <?php foreach (  as  ) : ?>
                                <?php
                                 = ->user_id ? ->user_id : ->author_email;
                                 = function_exists('van_city_get_vanmanga_avatar_url') ? van_city_get_vanmanga_avatar_url() : get_avatar_url();
                                ?>
                                <li class="mailbox-item reply-item">
                                    <div class="reply-avatar">
                                        <img src="<?php echo esc_url(); ?>" alt="Avatar">
                                    </div>
                                    <div class="reply-body">
                                        <div class="reply-meta">
                                            <strong><?php echo esc_html( ->author_name ); ?></strong>
                                            <span><?php esc_html_e( 'membalas di', 'vanmanga' ); ?></span>
                                            <a href="<?php echo esc_url( get_permalink( ->post_ID ) . '#comment-' . ->id ); ?>">
                                                <?php echo esc_html( ->post_title ); ?>
                                            </a>
                                        </div>
                                        <div class="reply-content">
                                            "<?php echo esc_html( wp_trim_words( strip_tags( ->content ), 25, '...' ) ); ?>"
                                        </div>
                                        <small class="time-ago"><?php printf( _x( '%s yang lalu', '%s = human-readable time difference', 'vanmanga' ), human_time_diff( strtotime( ->created_at ), current_time( 'timestamp' ) ) ); ?></small>
                                    </div>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Section: Updates -->
            <div class="mailbox-section">
                <h2 class="mailbox-title">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>
                    <?php esc_html_e( 'Update Bookmark Terbaru', 'vanmanga' ); ?>
                </h2>
                <div class="mailbox-card">
                    <?php if ( empty(  ) ) : ?>
                        <p class="mailbox-empty"><?php esc_html_e( 'Belum ada update terbaru dari bookmark Anda.', 'vanmanga' ); ?></p>
                    <?php else : ?>
                        <ul class="mailbox-list">
                            <?php foreach (  as  ) : setup_postdata(  ); ?>
                                <li class="mailbox-item update-item">
                                    <div class="update-info">
                                        <a href="<?php the_permalink(); ?>" class="update-link">
                                            <?php echo get_the_title(); ?>
                                        </a>
                                        <small class="time-ago"><?php printf( _x( '%s yang lalu', '%s = human-readable time difference', 'vanmanga' ), human_time_diff( get_the_time( 'U' ), current_time( 'timestamp' ) ) ); ?></small>
                                    </div>
                                    <a href="<?php the_permalink(); ?>" class="btn-read">Read</a>
                                </li>
                            <?php endforeach; wp_reset_postdata(); ?>
                        </ul>
                    <?php endif; ?>
                </div>
            </div>

        </div>
    </div>
</div>

<style>
    .mailbox-wrap { padding-top: 20px; padding-bottom: 80px; }
    .mailbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
    .mailbox-title { font-size: 18px; margin-bottom: 15px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
    .mailbox-card { background: var(--bg-secondary); border-radius: 8px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border: 1px solid var(--border-color); }
    .mailbox-empty { color: var(--text-secondary); }
    .mailbox-list { list-style: none; padding: 0; margin: 0; }
    .mailbox-item { border-bottom: 1px solid var(--border-color); padding: 15px 0; }
    .mailbox-item:last-child { border-bottom: none; }
    
    /* Reply Item */
    .reply-item { display: flex; gap: 15px; align-items: flex-start; }
    .reply-avatar { flex-shrink: 0; }
    .reply-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); }
    .reply-body { flex-grow: 1; }
    .reply-meta { font-size: 14px; margin-bottom: 6px; line-height: 1.4; color: var(--text-secondary); }
    .reply-meta strong { color: var(--accent-primary); }
    .reply-meta a { color: var(--text-primary); text-decoration: none; font-weight: 600; transition: color 0.2s; }
    .reply-meta a:hover { color: var(--accent-primary); }
    .reply-content { color: var(--text-secondary); font-size: 13px; margin-bottom: 6px; background: rgba(255,255,255,0.03); padding: 10px; border-radius: 6px; border-left: 3px solid var(--accent-primary); }
    
    /* Update Item */
    .update-item { display: flex; align-items: center; justify-content: space-between; }
    .update-link { color: var(--text-primary); text-decoration: none; font-weight: bold; font-size: 15px; display: block; margin-bottom: 4px; }
    .update-link:hover { color: var(--accent-primary); }
    .btn-read { background: var(--accent-primary); color: #fff; padding: 5px 10px; border-radius: 4px; text-decoration: none; font-size: 12px; }
    .btn-read:hover { background: var(--accent-secondary); }
    
    .time-ago { color: var(--text-secondary); font-size: 11px; display: block; }
    .reply-body .time-ago { text-align: right; }

    /* Light Mode */
    body.light-mode .mailbox-card { background: #ffffff; border-color: #e5e7eb; }
    body.light-mode .reply-content { background: #f3f4f6; color: #4b5563; }
</style>

<?php get_footer(); ?><?php
/**
 * Template part for displaying chapter list
 */

global $post;
 = ->ID;
 = vanmanga_get_series_chapters();

if () :
?>
<div class="chapter-list-container">
    <ul class="chapter-list" id="chapter-list">
        <?php foreach ( as ) : ?>
            <?php
             = get_post_meta(->ID, 'chapter_number', true);
             = ->post_title;
             = get_the_date('M j, Y', ->ID);
             = get_permalink(->ID);
            ?>
            <li class="chapter-item" data-chapter-number="<?php echo esc_attr(); ?>" data-chapter-title="<?php echo esc_attr(strtolower()); ?>">
                <div class="chapter-info">
                    <div class="chapter-header">
                        <span class="chapter-number">
                            <?php printf(esc_html__('Chapter %s', 'vanmanga'), esc_html()); ?>
                        </span>
                        <span class="chapter-date"><?php echo esc_html(); ?></span>
                    </div>
                    <?php if ( &&  !== 'Chapter ' . ) : ?>
                        <h4 class="chapter-title">
                            <a href="<?php echo esc_url(); ?>">
                                <?php echo esc_html(); ?>
                            </a>
                        </h4>
                    <?php endif; ?>
                </div>
                <div class="chapter-actions">
                    <a href="<?php echo esc_url(); ?>" class="btn btn-secondary">
                        <?php esc_html_e('Read', 'vanmanga'); ?>
                    </a>
                </div>
            </li>
        <?php endforeach; ?>
    </ul>
</div>



<style>
.chapter-list-container {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.chapter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chapter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s ease;
}

.chapter-item:hover {
    background-color: var(--bg-tertiary);
}

.chapter-item:last-child {
    border-bottom: none;
}

.chapter-info {
    flex: 1;
    margin-right: 20px;
}

.chapter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.chapter-number {
    font-weight: 600;
    color: var(--accent-primary);
}

.chapter-date {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.chapter-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

.chapter-title a {
    color: var(--text-secondary);
    text-decoration: none;
}

.chapter-title a:hover {
    color: var(--accent-primary);
}

.chapter-actions {
    flex-shrink: 0;
}

.chapter-actions .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    text-decoration: none; /* Remove underline from links */
}

.no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.no-results p {
    margin: 0;
    font-style: italic;
}

.btn-secondary {
    background-color: var(--accent-primary); /* Accent color for button */
    color: #fff;
}
/* Responsive */
@media (max-width: 768px) {
    .chapter-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .chapter-info {
        margin-right: 0;
        width: 100%;
    }

    .chapter-actions {
        width: 100%;
    }

    .chapter-actions .btn {
        width: 100%;
    }

    .chapter-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

@media (max-width: 480px) {
    .chapter-list-container {
        padding: 15px;
    }

    .chapter-item {
        padding: 12px 0;
    }
}

/* Light Mode Support */
body.light-mode .chapter-list-container {
    background-color: #ffffff;
    border-color: #e5e7eb;
}
</style>
<?php
else :
?>
<div class="no-chapters">
    <p><?php esc_html_e('No chapters available for this series yet.', 'vanmanga'); ?></p>
</div>
<?php
endif;
?>
.van-city-action-btn:hover {
    color: var(--text-primary);
}

.van-city-action-btn.like-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}
.van-city-action-btn.like-btn.liked {
    color: var(--danger-color);
}

.van-city-action-btn.reply-btn {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

.van-city-actions-right {
    margin-left: auto;
    position: relative;
}

.van-city-more-actions {
    position: relative;
}

.van-city-more-actions-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
}
.van-city-more-actions-toggle:hover {
    background-color: var(--border-color);
}

.van-city-more-actions-toggle .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.van-city-more-actions-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%; /* Open downwards */
    margin-top: 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 9999; /* Ensure it's on top */
    width: 150px;
    overflow: hidden;
}
.van-city-more-actions.active .van-city-more-actions-menu {
    display: block;
}

.van-city-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.van-city-menu-item:last-child {
    border-bottom: none;
}
.van-city-menu-item:hover {
    background-color: var(--accent-primary);
    color: white;
}
.van-city-menu-item.delete-comment-btn:hover {
    background-color: var(--danger-color);
}


/* Children */
.van-city-comment-list .children {
    list-style: none;
    padding-top: 15px;
    /* Default Indentation for all levels (L2, L3, etc) */
    margin-left: 20px;
    padding-left: 0;
    border-left: 2px solid var(--border-color);
}
.van-city-comment-list .children > div {
    padding-left: 15px;
}

/* Stop indentation at Level 4 (Level 4+ aligns with Level 3) */
.van-city-comment-list .children .children .children {
    margin-left: 0;
    border-left: none;
    padding-left: 0;
    padding-top: 0;
}
.van-city-comment-list .children .children .children > div {
    padding-left: 0;
}

/* Toggle Replies Button */
.van-city-toggle-replies {
    background: none;
    border: none;
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 0;
    margin-top: 5px;
    margin-left: 20px; /* Align with indentation */
    display: flex;
    align-items: center;
    gap: 5px;
}
.van-city-toggle-replies:hover {
    text-decoration: underline;
}
.van-city-toggle-replies .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.van-city-no-comments {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .van-city-emotions-scroll {
        justify-content: flex-start;
    }

    .van-city-emotions-container {
        padding: 15px 10px;
    }
    
    .van-city-login-prompt {
        padding: 20px 15px;
    }
    
    .van-city-auth-buttons {
        flex-direction: column;
    }
    
    .van-city-auth-buttons .van-city-submit-btn {
        width: 100%;
        text-align: center;
    }

    .van-city-comment-item {
        padding: 10px 0; /* Reduce padding on mobile */
    }

    .van-city-comment-body {
        gap: 10px;
    }

    .van-city-avatar img {
        width: 36px;
        height: 36px;
    }

    /* Reduce indentation for Level 2 on mobile */
    .van-city-comment-list .children {
        margin-left: 10px;
        padding-left: 0;
    }
    
    .van-city-comment-list .children > div {
        padding-left: 10px;
    }

    /* Flatten earlier on mobile (Level 3+) to save space */
    .van-city-comment-list .children .children {
        margin-left: 0 !important;
        border-left: none !important;
        padding-left: 0 !important;
    }
    .van-city-comment-list .children .children > div {
        padding-left: 0 !important;
    }
}