/* ==========================================================
   TAG PAGE
   PART 1
   HEADER
========================================================== */

.search-header{

    margin-bottom:25px;

}

.search-header h1{

    font-size:30px;

    font-weight:700;

    line-height:1.3;

    margin:0 0 10px;

    color:#111827;

}

.search-header h1 span{

    color:#2563eb;

}

.search-header p{

    margin:0;

    font-size:15px;

    color:#64748b;

    line-height:1.7;

}

.search-header strong{

    color:#111827;

    font-weight:700;

}


/* ==========================================================
   DARK MODE
========================================================== */

body.dark-mode .search-header h1{

    color:#ffffff;

}

body.dark-mode .search-header h1 span{

    color:#60a5fa;

}

body.dark-mode .search-header p{

    color:#cbd5e1;

}

body.dark-mode .search-header strong{

    color:#ffffff;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:768px){

    .search-header{

        margin-bottom:20px;

    }

    .search-header h1{

        font-size:24px;

    }

    .search-header p{

        font-size:14px;

    }

}

/* ==========================================================
   TAG PAGE
   PART 2
   RESULT
========================================================== */

.search-result{

    display:flex;

    flex-direction:column;

    gap:20px;

}


/* ==========================================================
   CARD
========================================================== */

.search-card{

    position:relative;

}

.search-card:last-child{

    margin-bottom:0;

    padding-bottom:0;

    border-bottom:none;

}


/* ==========================================================
   TITLE
========================================================== */

.search-title{

    transition:.25s;

}

.search-title a{

    transition:.25s;

}

.search-title a:hover{

    color:#2563eb;

}


/* ==========================================================
   IMAGE
========================================================== */

.search-thumb{

    background:#f8fafc;

}

.search-thumb img{

    transition:transform .35s ease;

}

.search-card:hover .search-thumb img{

    transform:scale(1.05);

}


/* ==========================================================
   META
========================================================== */

.search-meta{

    margin-bottom:10px;

}

.search-meta span{

    white-space:nowrap;

}


/* ==========================================================
   EXCERPT
========================================================== */

.search-excerpt{

    margin:0;

}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:991px){

    .search-card{

        gap:14px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    .search-card{

        gap:12px;

    }

    .search-title{

        font-size:17px;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:480px){

    .search-title{

        font-size:16px;

    }

}

/* ==========================================================
   TAG PAGE
   PART 3
   PAGINATION
   EMPTY
   SIDEBAR
========================================================== */

/* ==========================================================
   SIDEBAR
========================================================== */

.search-sidebar{

    width:100%;

    min-width:0;

    align-self:start;

}


/* ==========================================================
   EMPTY
========================================================== */

.search-empty{

    text-align:center;

    padding:70px 20px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:16px;

}

.search-empty i{

    font-size:55px;

    color:#2563eb;

    margin-bottom:18px;

}

.search-empty h3{

    font-size:28px;

    font-weight:700;

    margin-bottom:12px;

    color:#111827;

}

.search-empty p{

    color:#64748b;

    line-height:1.8;

    max-width:520px;

    margin:0 auto;

}


/* ==========================================================
   PAGINATION
========================================================== */

.search-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-top:35px;

}

.page-btn,
.page-number{

    min-width:42px;

    height:42px;

    padding:0 14px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border-radius:10px;

    border:1px solid #dbe2ea;

    background:#ffffff;

    color:#334155;

    transition:.25s;

}

.page-btn:hover,
.page-number:hover{

    background:#2563eb;

    border-color:#2563eb;

    color:#ffffff;

}

.page-number.active{

    background:#2563eb;

    border-color:#2563eb;

    color:#ffffff;

}

.page-btn.disabled{

    opacity:.45;

    cursor:not-allowed;

}

.page-dots{

    padding:0 4px;

    color:#94a3b8;

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    .search-empty{

        padding:50px 20px;

    }

    .search-empty h3{

        font-size:24px;

    }

    .search-empty i{

        font-size:46px;

    }

}


/* ==========================================================
   DARK MODE
========================================================== */

body.dark-mode .search-empty{

    background:#1e293b;

    border-color:#334155;

}

body.dark-mode .search-empty h3{

    color:#ffffff;

}

body.dark-mode .search-empty p{

    color:#cbd5e1;

}

body.dark-mode .page-btn,
body.dark-mode .page-number{

    background:#1e293b;

    border-color:#334155;

    color:#ffffff;

}

body.dark-mode .page-btn:hover,
body.dark-mode .page-number:hover,
body.dark-mode .page-number.active{

    background:#2563eb;

    border-color:#2563eb;

    color:#ffffff;

}

/* ==========================================================
   MOBILE & TABLET
   JARAK HEADER DENGAN JUDUL TAG
========================================================== */

@media (max-width:991px){

    .search-page{

        padding-top:24px;

    }

}

@media (max-width:768px){

    .search-page{

        padding-top:20px;

    }

}