.mobile-menu-toggle {
    display: none;
}

@media (max-width: 992px) {
    body { 
        padding-left: 15px; 
        padding-right: 15px; 
        overflow-x: hidden;
    }
    .indexcss-container, 
    .campdetailcss-page-container, 
    .usercampaignov-page-container, 
    .userpostcss-container,
    .aboutcss-container {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .header-section {
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center; 
        padding-bottom: 10px; 
        position: relative; 
    }
    .logo {
        margin-bottom: 0; 
    }
    .mobile-menu-toggle {
        display: block; 
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 1.8em; 
        cursor: pointer;
        padding: 5px;
        line-height: 1;
        z-index: 1001; 
    }
    .header-nav {
        display: none;
        flex-direction: column; 
        width: 100%; 
        position: absolute; 
        top: 100%; 
        left: 0;
        background-color: var(--card-bg-color); 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 1000; 
        border-top: 1px solid var(--border-color);
    }
    .header-section.mobile-menu-open .header-nav {
        display: flex !important;
    }
    .header-nav a {
        width: 100%;
        box-sizing: border-box; 
        text-align: left; 
        padding: 12px 20px; 
        border-bottom: 1px solid var(--border-color); 
    }
    .header-nav a:last-child {
        border-bottom: none; 
    }
    .header-nav a:hover {
        background-color: var(--menu-hover-bg);
        color: var(--hover-link-color);
    }
    .header-nav a.active { 
        background-color: var(--menu-active-bg);
        color: var(--menu-active-text) !important;
    }

    /* --- Penyesuaian untuk INDEX.PHP (MOBILE) --- */
    .indexcss-main-content-grid {
        display: grid; 
        grid-template-columns: 1fr; 
        gap: 20px; 
    }
    .indexcss-left-column-content.indexcss-card {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0; 
        display: flex;
        flex-direction: column; 
        gap: 20px; 
        grid-column: 1 / -1; 
    }
    .indexcss-profile-form-section,
    .indexcss-recent-checks-section,
    .indexcss-statistics-section,
    .indexcss-chart-section { 
        background-color: var(--card-bg-color);
        padding: 15px; 
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        border: 1px solid var(--border-color);
        width: 100%; 
        box-sizing: border-box;
    }
    .indexcss-chart-section { 
        grid-column: 1 / -1; 
    }
    .indexcss-profile-form-section, 
    .indexcss-recent-checks-section {
        border-bottom: none;
    }
    .indexcss-profile-form {
        flex-direction: column; 
        gap: 10px; 
    }
    .indexcss-profile-form-input,
    .indexcss-submit-button {
        width: 100%; 
        box-sizing: border-box; 
    }
    .indexcss-recent-users-list {
        justify-content: center; 
        gap: 10px; 
    }
    .indexcss-recent-user-item {
        flex-basis: calc((100% / 3) - 10px); 
        max-width: calc((100% / 3) - 10px);
        min-width: 80px; 
    }
    .indexcss-stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
    }
    .indexcss-chart-container { 
        width: 100%; 
        position: relative; 
        height: 300px; 
    }
    .indexcss-chart-container canvas { 
        width: 100% !important; 
        max-width: 100%; 
        height: 100% !important; 
        display: block; 
        box-sizing: border-box; 
    }
    .indexcss-chart-section .indexcss-section-heading {
        font-size: 1.1em; 
    }
    .indexcss-chart-section p {
        font-size: 0.75em; 
        margin-top: 10px; 
    }
    .recaptcha-modal-content {
        padding: 15px; min-width: 0; width: 90%; max-width: 320px; 
    }
    .recaptcha-modal-content .g-recaptcha {
        display: flex; justify-content: center; transform: scale(0.9); 
        transform-origin: center; margin-bottom: 10px; 
    }
    .recaptcha-modal-content .g-recaptcha > div { width: auto !important; }
    .recaptcha-modal-buttons { display: flex; flex-direction: column; gap: 10px; }
    .recaptcha-modal-buttons .indexcss-submit-button { width: 100%; margin-right: 0 !important; }
    .indexcss-campaigns-section { 
        grid-template-columns: 1fr; 
    }
    .indexcss-campaigns-section.indexcss-card { padding: 15px; }
    .indexcss-campaigns-section .indexcss-campaign-list-column h2, 
    .indexcss-campaigns-section .indexcss-campaign-list-column h3 { 
        font-size: 1.1em; margin-bottom: 10px; 
    }

    /* --- Penyesuaian untuk CAMPAIGN-DETAIL.PHP (MOBILE) --- */
    .campdetailcss-content-layout {
        flex-direction: column; 
    }
    .campdetailcss-sidebar,
    .campdetailcss-main-content {
        flex: 1 1 100%; 
        width: 100%; 
        box-sizing: border-box; 
    }
    .campdetailcss-sidebar {
        margin-bottom: 20px; 
    }
    .campdetailcss-main-title-card {
        order: -1; 
		font-size: small;
    }
    .campdetailcss-card { 
        width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word; 
        word-wrap: break-word;
        padding: 15px; 
    }
    .campdetailcss-single-post-container {
        width: 100%;
        box-sizing: border-box;
        padding: 15px; 
    }
    .post-content-display { 
        word-break: break-word; 
        overflow-wrap: break-word;
    }
    .post-content-display img, 
    .post-content-display iframe,
    .post-content-display video {
        max-width: 100%;
        height: auto;
    }
    #campaignWideBoardActivityChartArea { 
        width: 100%;
        box-sizing: border-box;
        min-height: 300px; 
    }
    #campaignWideBoardActivityChart { 
        width: 100% !important;
        max-width: 100%;
        height: 100% !important; 
        display: block; 
        box-sizing: border-box;
    }
    .campdetailcss-charts-row {
        flex-direction: column; 
    }
    .campdetailcss-participant-activity-header {
        flex-direction: column;
    }
    .campdetailcss-avatar-card {
        width: 100%; 
        max-width: none; 
        margin-top: 15px; 
        padding: 15px; 
        box-sizing: border-box;
    }
    .campdetailcss-participant-avatar-style { 
        width: 100%; 
        height: auto; 
        max-height: 150px; 
        object-fit: contain; 
        display: block; 
        margin: 0 auto 10px auto; 
        border-radius: 8px; 
        border: 1px solid var(--border-color); 
    }
	
	.campdetailcss-post-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "title title"
        "date  meta_right";
    gap: 6px 10px;
    align-items: start;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    margin-bottom: 15px;
	font-size:small;
}

.campdetailcss-post-title-section {
    display: contents;
}

#campdetailcss-post-title.post-title {
    grid-area: title;
    font-size: 1.1em;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.campdetailcss-post-title-section .post-meta {
    grid-area: date;
    font-size: 0.8em;
    margin: 0;
    color: var(--text-secondary);
}

.campdetailcss-post-meta-right {
    grid-area: meta_right;
    text-align: right;
    font-size: 0.8em;
}

.campdetailcss-post-meta-right p {
    margin: 0 0 4px 0;
    color: var(--text-secondary);
}

.campdetailcss-post-meta-right p:last-child {
    margin-bottom: 0;
}

.campdetailcss-post-meta-right p i,
.campdetailcss-post-title-section .post-meta i {
    margin-right: 4px;
}

.campdetailcss-post-meta-right p i.fas,
.campdetailcss-post-title-section .post-meta i.fas {
    font-size: 0.9em;
}


    /* --- Penyesuaian untuk USERPOST.CSS (MOBILE) --- */
    .userpostcss-profile-layout-grid { 
        display: flex; 
        flex-direction: column !important; 
    }
    .userpostcss-left-column,
    .userpostcss-right-column {
        width: 100% !important; 
        min-width: 0 !important; 
        flex-basis: auto !important; 
        box-sizing: border-box; 
    }
    body.userpostcss-scoped { padding: 15px; }
    .userpostcss-card { 
        width: 100%;
        box-sizing: border-box;
        padding: 15px; 
    }
    .userpostcss-stats-grid { 
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 10px; 
        width: 100%;
        box-sizing: border-box;
    }
    .userpostcss-stat-item {
        min-width: 0; 
        word-break: break-word;
        padding: 10px 5px; 
    }
    .userpostcss-stat-item .userpostcss-stat-value {
        font-size: 1em; 
    }
    .userpostcss-stat-item .userpostcss-stat-label {
        font-size: 0.6em; 
    }
    .userpostcss-avatar-stat-item { 
        grid-column: auto; 
        padding: 5px; 
    }
    .userpostcss-profile-avatar-img {
        max-width: 50px; 
        max-height: 50px;
    }
    .userpostcss-chart-container-small { 
        width: 100%;
        box-sizing: border-box;
        position: relative; 
        height: 200px; 
    }
    .userpostcss-chart-container-small canvas { 
        width: 100% !important;
        max-width: 100%;
        height: 100% !important; 
        display: block;
        box-sizing: border-box;
    }
    .userpostcss-posts-filter-card { 
        padding: 15px; 
    }
    .userpostcss-post-item, .post-item { 
        padding: 15px; 
    }

    /* --- Penyesuaian untuk USERCAMPAIGNOV.CSS (campaigns.php) (MOBILE) --- */
    .usercampaignov-page-container { 
        display: flex !important; 
        flex-direction: column !important; 
    }
    .usercampaignov-sidebar { 
        width: 100% !important; 
        min-width: 0 !important; 
        max-width: none !important; 
        margin-bottom: 20px; 
        flex-direction: column; 
        gap: 20px; 
    }
    .usercampaignov-sidebar-card, 
    .usercampaignov-main-content .usercampaignov-card {
        width: 100% !important; 
        min-width: 0 !important; 
        box-sizing: border-box;
        padding: 15px; 
        margin-left: 0; 
        margin-right: 0; 
    }
    .usercampaignov-main-content .usercampaignov-chart-card.usercampaignov-bar-racing-chart {
        padding-top: 0px;
        padding-bottom: 15px;
    }
    .usercampaignov-main-content { 
        width: 100% !important; 
        min-width: 0 !important;
        box-sizing: border-box;
        display: flex; 
        flex-direction: column; 
        gap: 20px; 
    }
    .usercampaignov-main-content .usercampaignov-chart-content-area {
        width: 100%;
        box-sizing: border-box;
        height: 240px;
        min-height: 240px; 
        position: relative; 
    }
    .usercampaignov-main-content svg#racing-chart { 
        width: 100% !important;
        max-width: 100%;
        height: 100% !important; 
        display: block;
        box-sizing: border-box;
    }
    .usercampaignov-main-content svg#racing-chart .racebar-x-axis .tick text {
        font-size: 8px; 
    }
    .usercampaignov-main-content svg#racing-chart .racebar-axis-label {
        transform: translateY(-5px);
    }
    #managerCampaignsOverlay.manager-campaigns-overlay {
        width: 100%;
        box-sizing: border-box;
        margin-top: 15px; 
        padding: 0; 
        background-color: var(--overlay-card-color, #D0E5E6); 
        border-radius: 8px; 
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 0.35s ease-in-out, opacity 0.35s ease-in-out, padding 0.35s ease-in-out, visibility 0s linear 0.35s;
    }
    #managerCampaignsOverlay.manager-campaigns-overlay.visible {
        opacity: 1;
        max-height: 400px; 
        padding: 15px; 
        visibility: visible;
        overflow-y: auto;
        transition: max-height 0.35s ease-in-out, opacity 0.35s ease-in-out, padding 0.35s ease-in-out, visibility 0s linear 0s;
    }
    .CampPagesManagerLeft-manager-item-container .manager-campaigns-overlay,
    .usercampaignov-sidebar > .usercampaignov-sidebar-card + .manager-campaigns-overlay.visible,
    .usercampaignov-sidebar > .manager-campaigns-overlay.visible + .usercampaignov-sidebar-card,
    .usercampaignov-sidebar > .manager-campaigns-overlay.visible:first-child {
        display: none !important; 
        margin-top: 0 !important;
    }
    #managerCampaignsOverlay {
        position: static !important; 
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }
    .CampPagesManagerLeft-manager-item-container > .CampPagesManagerLeft-manager-name {
        display: flex; 
        align-items: center; 
        justify-content: flex-start; 
        cursor: pointer; 
    }
    .CampPagesManagerLeft-manager-name .manager-name-text-wrapper {
        display: flex;
        align-items: center;
        flex-grow: 1; 
        margin-right: 8px; 
    }
    .CampPagesManagerLeft-manager-name .manager-name-text-wrapper i.fa-user { 
        margin-right: 8px; 
    }
    .CampPagesManagerLeft-manager-name .manager-arrow-indicator {
        display: none; 
    }
    .CampPagesManagerLeft-manager-item-container .CampPagesManagerLeft-manager-detail {
        padding-left: 24px; 
        font-size: 0.8em; 
        color: var(--text-secondary);
    }

    /* --- Penyesuaian CSS untuk ABOUT.PHP (MOBILE) --- */
    .aboutcss-main-layout-grid {
        grid-template-columns: 1fr;
        margin-top: 15px;
        margin-bottom: 15px;
        gap: 0;
    }
    .aboutcss-sidebar-nav {
        display: none;
    }
    .aboutcss-content-area {
        width: 100%;
        box-sizing: border-box;
    }
    .aboutcss-header {
        padding: 20px 15px;
    }
    .aboutcss-main-title {
        font-size: 1.6em;
    }
    .aboutcss-section-title-wrapper {
        padding: 15px 20px;
    }
    .aboutcss-section-title {
        font-size: 1.3em;
    }
    .aboutcss-toggle-icon {
        font-size: 0.8em;
    }
    .aboutcss-section-content {
        padding: 0px 20px 15px 20px;
    }
    .aboutcss-text {
        font-size: 0.9em;
    }
    .aboutcss-list-item {
        font-size: 0.9em;
        padding-left: 25px;
    }
    .aboutcss-list-item::before {
        top: 2px;
        font-size: 0.8em;
    }
    .aboutcss-subsection-title {
        font-size: 1.1em;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .aboutcss-contact-link {
        padding: 10px 15px;
        font-size: 0.9em;
    }
}

@media (max-width: 680px) { 
    .indexcss-recent-user-item {
        flex-basis: calc((100% / 2) - 10px); 
        max-width: calc((100% / 2) - 10px);
    }
    .indexcss-profile-form-input,
    .indexcss-submit-button {
        font-size: 0.9em; 
    }
    .recaptcha-modal-content .g-recaptcha {
        transform: scale(0.8); 
    }

    .usercampaignov-small-charts-grid { 
        grid-template-columns: 1fr;
    }
    .usercampaignov-main-content .usercampaignov-chart-card.usercampaignov-bar-racing-chart {
        padding-top: 5px; 
        padding-bottom: 5px; 
    }
    .usercampaignov-main-content .usercampaignov-chart-content-area {
        min-height: 210px;
        height: 210px; 
    }
    .usercampaignov-main-content svg#racing-chart .racebar-x-axis .tick text {
        font-size: 7px; 
    }
    .usercampaignov-main-content svg#racing-chart .racebar-axis-label {
        transform: translateY(-2px);
    }

    .campdetailcss-participant-list-card li {
        font-size: 0.85em; 
    }
    .campdetailcss-view-toggle-buttons .toggle-button {
        padding: 7px 10px; 
        font-size: 0.85em;
    }
    .campdetailcss-footer-button-lookalike,
    .campdetailcss-action-button,
    .campdetailcss-nav-button {
        padding: 5px 10px;
        font-size: 0.8em;
    }
    .campdetailcss-participant-avatar-style { 
        max-height: 100px; 
    }
    #campaignWideBoardActivityChartArea { 
        min-height: 250px; 
    }

    .userpostcss-chart-container-small {
        height: 180px; 
    }
    .userpostcss-stats-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 8px;
    }
    .userpostcss-stat-item .userpostcss-stat-value {
        font-size: 0.9em; 
    }
    .userpostcss-stat-item .userpostcss-stat-label {
        font-size: 0.55em; 
    }
    .userpostcss-profile-avatar-img {
        max-width: 120px; 
        max-height: 80px;
    }

    /* --- Penyesuaian CSS untuk ABOUT.PHP (MOBILE KECIL) --- */
    .aboutcss-main-title {
        font-size: 1.4em;
    }
    .aboutcss-section-title {
        font-size: 1.2em;
    }
    .aboutcss-text,
    .aboutcss-list-item {
        font-size: 0.85em;
    }
}

/* --- Penyesuaian untuk CAMPDETAILCSS-POST-ACTIONS-BAR (MOBILE) --- */
@media (max-width: 992px) {
 
    .campdetailcss-post-actions-bar {
        flex-direction: column; 
        align-items: flex-start;
        gap: 15px;
        width: 100%; 
        box-sizing: border-box; 
    }

    .campdetailcss-footer-item {
        width: 93%;
        text-align: left;
    }


    .campdetailcss-post-action-buttons {
        margin-left: 0; 
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start; 
        gap: 8px;
    }


    .campdetailcss-action-button,
    .campdetailcss-nav-button {
        flex-grow: 1;
        min-width: unset;
        max-width: 100%; 
        box-sizing: border-box; 
        font-size: 0.85em; 
        text-align: center; 
        justify-content: center; 
    }
}


@media (max-width: 680px) {
    .campdetailcss-post-action-buttons {
        flex-direction: column; 
        align-items: stretch; 
    }
    .campdetailcss-action-button,
    .campdetailcss-nav-button {
        width: 100%; 
        margin-right: 0; 
    }
}