Pseudo-class (:hover, :focus)

selector:pseudo-class {
  property: value;
}

.button:hover {
  background-color: #7c3aed;
  transform: translateY(-2px); /* дээш шилжих */
}

.link:hover {
  color: #a78bfa;
  text-decoration: underline;
}

/* Зөвхөн хулганатай төхөөрөмжид hover ажилладаг */
@media (hover: hover) {
  .card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
}

.input:focus {
  outline: none; /* анхдагч хүрээ арилгах */
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
}

/* Keyboard navigation хэрэглэгчдэд чухал */
.button:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

.button:active {
  transform: translateY(0); /* hover дээш шилжсэнийг буцааж доош */
  background-color: #6d28d9;
}

a:link {
  color: #a78bfa;
} /* зочлоогүй */
a:visited {
  color: #7c3aed;
} /* нэгэнт зочилсон */
a:hover {
  color: #c4b5fd;
} /* hover */
a:active {
  color: #6d28d9;
} /* дарагдах мөч */
/* Дараалал: LoVe HAte — Link, Visited, Hover, Active */

li:nth-child(1) {
} /* эхний элемент */
li:nth-child(2) {
} /* хоёр дахь */
li:nth-child(odd) {
} /* тэгш бус (1, 3, 5...) */
li:nth-child(even) {
} /* тэгш (2, 4, 6...) */
li:nth-child(3n) {
} /* 3, 6, 9... */
li:nth-child(3n + 1) {
} /* 1, 4, 7... */

tr:nth-child(even) {
  background-color: #0f172a; /* тэгш мөр бүрт дэвсгэр */
}

tr:nth-child(odd) {
  background-color: transparent;
}

li:first-child {
  border-top: none; /* эхний item-д дээд хүрээ байхгүй */
}

li:last-child {
  border-bottom: none; /* сүүлийн item-д доод хүрээ байхгүй */
}

/* Эсвэл товч: */
li + li {
  border-top: 1px solid #1e293b; /* эхнийхээс бусад бүгдэд */
}

/* .disabled биш бүх товч */
.button:not(.disabled):hover {
  background-color: #7c3aed;
}

/* Сүүлийнхийг гадуурхах */
li:not(:last-child) {
  border-bottom: 1px solid #1e293b;
}

/* Хоосон биш input */
input:not([type="checkbox"]):not([type="radio"]) {
  border: 1px solid #1e293b;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.15s ease; /* өөрчлөлт жигдрэх */
}

.btn:hover {
  background: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 3px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 15px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.form-input:hover {
  border-color: #475569;
}

.form-input:focus {
  outline: none;
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

.form-input:invalid:not(:placeholder-shown) {
  border-color: #f87171; /* утга буруу байвал улаан */
}