.urun {
    background: #fff;
    border-radius: 6px;
    padding: 20px; /* İç boşluk */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* Hafif genel gölge */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Alt gölge efekti gibi görünecek alt bölme */
.urun::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 10px;
    box-shadow: 0 10px 8px -8px rgba(0, 0, 0, 0.2); /* Alt bölme efekti */
    border-radius: 50%;
}

/* Hover efektiyle biraz yükselme */
.urun:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}
.baslik {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  padding: 8px 12px;
  margin-bottom: 18px;
  border-left: 5px solid;
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.1);
  background-color: #f9f9f9;
  color: #333;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

/* Renk çeşitleri */
.baslik.color-blue {
  border-color: #0078D7; /* Kurumsal mavi */
  color: #005A9E;
  box-shadow: 0 2px 8px rgb(0 120 215 / 0.3);
}

.baslik.color-green {
  border-color: #28a745;
  color: #19692c;
  box-shadow: 0 2px 8px rgb(40 167 69 / 0.3);
}

.baslik.color-orange {
  border-color: #fd7e14;
  color: #b35d00;
  box-shadow: 0 2px 8px rgb(253 126 20 / 0.3);
}

.baslik.color-purple {
  border-color: #6f42c1;
  color: #4e2a8e;
  box-shadow: 0 2px 8px rgb(111 66 193 / 0.3);
}

/* İstersen hover efekti ekleyebilirsin */
.baslik:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}