.pts-item{
    border:1px solid #ddd;
    padding:15px;
    margin-bottom:20px;
    border-radius:8px;
}

.pts-form input,
.pts-form textarea,
.pts-form select{
    width:100%;
    margin-bottom:10px;
    padding:8px;
    box-sizing:border-box;
}

.pts-form button{
    background:#0073aa;
    color:#fff;
    border:none;
    padding:10px 16px;
    border-radius:6px;
    cursor:pointer;
}

.pts-form button:hover{
    opacity:0.9;
}

.pts-riwayat{
    border:1px solid #ccc;
    padding:10px;
    margin-bottom:10px;
}

/* =========================
   KATEGORI PILL
========================= */
.pts-kategori{
    text-align:center;
    margin-bottom:20px;
}

.pts-pill{
    display:inline-block;
    padding:6px 14px;
    margin:5px;
    background:#eee;
    border-radius:20px;
    font-size:14px;
    text-decoration:none;
    color:#333;
}

.pts-pill:hover{
    background:#ddd;
}

.pts-pill.active{
    background:#ccc;
    font-weight:bold;
}

/* =========================
   META TOKO
========================= */
.pts-meta{
    margin-top:15px;
    padding:15px;
    background:#fafafa;
    border:1px solid #eee;
    border-radius:8px;
}

/* ROW */
.pts-row{
    display:grid;
    grid-template-columns:120px 10px 1fr;
    gap:5px;
    margin-bottom:8px;
    align-items:start;
}

/* LABEL */
.pts-label{
    font-weight:bold;
    color:#333;
}

/* SEPARATOR */
.pts-sep{
    text-align:center;
}

/* VALUE */
.pts-value{
    color:#555;
    word-break:break-word;
}

/* LINK */
.pts-value a{
    color:#0073aa;
    text-decoration:none;
}

.pts-value a:hover{
    text-decoration:underline;
}

/* =========================
   GRID
========================= */
.pts-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:20px;
}

/* =========================
   CARD
========================= */
.pts-card{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:10px;
    overflow:hidden;
    transition:0.2s;
}

.pts-card:hover{
    transform:translateY(-3px);
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.pts-thumb img{
    width:100%;
    display:block;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){

    .pts-row{
        grid-template-columns:100px 10px 1fr;
    }

    .pts-grid{
        grid-template-columns:repeat(2,1fr);
    }

}