


    /* HERO HEADER */
    .page-header {
        background: linear-gradient(135deg, #b71c1c, #e53935);
        color: white; padding: 40px 0; text-align: center; margin-bottom: 30px;
        border-radius: 0 0 30px 30px;
    }
    .search-box {
        position: relative; max-width: 500px; margin: 20px auto 0;
    }
    .search-box input {
        height: 50px; border-radius: 30px; padding-left: 20px; border: none;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2); width: 100%; outline: none;
    }
    .search-box i {
        position: absolute; right: 20px; top: 15px; color: var(--result-color); font-size: 1.2rem;
    }

    /* RESULT LIST STYLE */
    .result-card {
        background: white; border-radius: 10px; padding: 15px 20px;
        margin-bottom: 15px; border-left: 5px solid var(--result-color);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: 0.2s;
        display: flex; justify-content: space-between; align-items: center;
    }
    .result-card:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

    .res-title { font-weight: 600; font-size: 1rem; color: #333; text-decoration: none; display: block;}
    .res-title:hover { color: var(--result-color); }

    .res-date { font-size: 0.8rem; color: #777; margin-top: 3px; }

    .btn-view {
        background: #ffebee; color: var(--result-color); border: 1px solid #ffcdd2;
        padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; text-decoration: none;
        white-space: nowrap;
    }
    .btn-view:hover { background: var(--result-color); color: white; }

    /* SIDEBAR */
    .sidebar-box { background: white; padding: 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .sb-title { font-weight: 700; color: var(--brand); border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 15px; }

    .quick-link { display: block; padding: 8px 0; border-bottom: 1px dashed #eee; color: #555; text-decoration: none; transition: 0.2s; }
    .quick-link:hover { padding-left: 5px; color: var(--accent); }
    .quick-link i { margin-right: 8px; color: var(--brand); }

    /* LOADER */
    .loader { text-align: center; padding: 40px; color: #666; }
