:root{
  --yad-dark: #202B36;
  --yad-primary: #00BFA6;
  --yad-bg: #F3FFFD;
  --yad-text: #202B36;
  --yad-tile-bg: #ffffff;
  --yad-tile-hover: rgba(0,191,166,0.1);
  --yad-border: rgba(32,43,54,0.08);
}

.yad-container{
  background: var(--yad-bg);
  padding: 24px;
  border-radius: 12px;
}

.yad-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 ستون -> با 12 آیتم = 3 ردیف */
  gap: 16px;
}

.yad-tile{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--yad-tile-bg);
  color: var(--yad-text);
  border: 1px solid var(--yad-border);
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  aspect-ratio: 1 / 1; /* مربع */
}

.yad-tile:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFEFD 100%);
  border-color: rgba(0,191,166,0.25);
  box-shadow: 0 10px 24px rgba(0,191,166,0.12);
}

.yad-tile__icon{
  display: block;
  width: 156px; height: 156px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, rgba(0,191,166,0.18), rgba(32,43,54,0.05));
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 10px;
}

.yad-tile__icon img{
  width: 64px; height: 64px; display:block;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.06));
}

.yad-tile__title{
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  color: var(--yad-dark);
}

@media (max-width: 1100px){
  .yad-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px){
  .yad-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .yad-grid{ grid-template-columns: 1fr; }
}

/* حالت تیره اختیاری برای برخی سطرها/کارت‌های ویژه */
.yad-tile--dark{
  background: #24303E;
  color: #F3FFFD;
  border-color: transparent;
}
.yad-tile--dark .yad-tile__title{ color:#F3FFFD; }
.yad-tile--dark .yad-tile__icon{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), rgba(0,0,0,0.1));
}