/* sisnyus.com Premium CSS Style */

:root {
--bg-color: #f3f4f6;
--card-bg: #ffffff;
--accent-yellow: #facc15;
--accent-gray: #4b5563;
--text-primary: #111827;
--text-secondary: #4b5563;
--border-color: rgba(0, 0, 0, 0.06);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
/* Canlılıq üçün arxa fon gradienti */
background-image: radial-gradient(circle at top right, rgba(250, 204, 21, 0.05), transparent),
radial-gradient(circle at bottom left, rgba(75, 85, 99, 0.05), transparent);
min-height: 100vh;
}

.container {
max-width: 1250px;
margin: auto;
padding: 50px 20px;
}

.grid {
display: flex;
flex-direction: column; /* Kartların uzun və qısa olması üçün sütun düzülüşü */
gap: 16px;
}

.card {
background: var(--card-bg);
padding: 25px 35px; /* Height-in qısa olması üçün daxili boşluqlar */
border-radius: 15px;
border: 1px solid var(--border-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
transition: var(--transition);
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
position: relative;
overflow: hidden;
}

.card:hover {
border-color: var(--accent-yellow);
transform: translateX(10px); /* Sağa sürüşmə effekti */
box-shadow: 0 10px 25px rgba(250, 204, 21, 0.1);
}

/* Şəkil istifadə olunarsa dizayna uyğunlaşdırma */
.card img {
width: 100%;
max-height: 150px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 15px;
}

.card h2 {
font-family: 'Montserrat', sans-serif;
font-size: 1.4rem;
font-weight: 800;
margin: 0;
color: var(--text-primary);
line-height: 1.2;
}

/* Təsvir mətni (əgər başlıqdan başqa nəsə görünəcəksə) */
.card p {
font-size: 0.95rem;
color: var(--text-secondary);
margin: 10px 0 0 0;
line-height: 1.6;
}

/* Link/Action düyməsi */
.card a {
display: inline-block;
margin-top: 15px;
text-decoration: none;
color: var(--text-primary);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid var(--accent-yellow);
width: fit-content;
transition: var(--transition);
}

.card a:hover {
color: var(--accent-yellow);
}