@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background-color: #fafafa; color: #333; line-height: 1.6; }

.site-header { background: #fff; padding: 30px 20px; text-align: center; border-bottom: 2px solid #eaeaea; margin-bottom: 40px; }
.site-header h1 { font-size: 2rem; color: #111; font-weight: 600; }
.site-header p { color: #666; margin-top: 5px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; margin-bottom: 60px; }
.profile-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.profile-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }

.card-img-wrapper { width: 100%; height: 350px; border-bottom: 1px solid #e0e0e0; }
.card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 20px; text-align: center; }
.card-title { font-size: 1.25rem; font-weight: 600; color: #222; margin-bottom: 5px; }
.card-meta { font-size: 0.9rem; color: #777; margin-bottom: 15px; }
.card-actions { display: flex; gap: 10px; }

.btn { display: inline-block; flex: 1; padding: 10px; border-radius: 6px; text-decoration: none; font-weight: 500; font-size: 0.9rem; text-align: center; transition: 0.2s; border: 1px solid transparent; }
.btn-wp { background-color: #25D366; color: #fff; }
.btn-wp:hover { background-color: #1ebd5a; }
.btn-detail { background-color: #fff; color: #333; border-color: #ccc; }
.btn-detail:hover { background-color: #f5f5f5; border-color: #bbb; }
.btn-back { display: inline-block; margin-bottom: 20px; color: #555; text-decoration: none; font-weight: 500; border: 1px solid #ddd; padding: 8px 15px; border-radius: 6px; background: #fff; }
.btn-back:hover { background: #eee; }

.filter-menu { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; padding: 0 20px; }
.filter-btn { padding: 8px 25px; border-radius: 30px; border: 1px solid #ccc; text-decoration: none; color: #555; font-weight: 500; transition: 0.3s; background: #fff; }
.filter-btn:hover { background: #f0f0f0; border-color: #aaa; }
.filter-btn.active { background: #111; color: #fff; border-color: #111; }

.detail-wrapper { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 30px; margin-bottom: 50px; }
.detail-header { display: flex; gap: 30px; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 30px; }
.detail-cover { flex: 0 0 300px; border-radius: 8px; overflow: hidden; border: 1px solid #e0e0e0; }
.detail-cover img { width: 100%; height: auto; display: block; }
.detail-info { flex: 1; }
.detail-info h2 { font-size: 2rem; margin-bottom: 10px; }

.tag { display: inline-block; padding: 4px 10px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 20px; font-size: 0.85rem; color: #555; margin-right: 5px; margin-bottom: 15px; }

.contact-links { margin-top: 20px; display: flex; gap: 15px; }

.btn-telegram { background-color: #0088cc; color: white; }
.btn-telegram:hover { background-color: #0077b5; }

.about-content { background: #fafafa; border: 1px solid #eee; padding: 20px; border-radius: 8px; margin-bottom: 30px; }
.about-content h1, .about-content h2, .about-content h3 { margin-bottom: 10px; margin-top: 15px; }
.about-content p { margin-bottom: 10px; }
.about-content ul, .about-content ol { margin-left: 20px; margin-bottom: 10px; }
.about-content a { color: #0088cc; text-decoration: none; }

.gallery-section h3 { margin-bottom: 15px; font-size: 1.5rem; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.gallery-item { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; height: 250px; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.gallery-item:hover img { transform: scale(1.05); }

@media (max-width: 768px) {
    .detail-header { flex-direction: column; }
    .detail-cover { flex: auto; }
}