/* İpucu: `data-ipucu="metin"` taşıyan her öğe, üstüne gelince ve klavye odağında kısa bir
   açıklama gösterir (saf CSS, ::after). Yön `data-ipucu-yon="alt|sol|sag"` (varsayılan üst).
   Ekran okuyucu için metni ayrıca aria-label ya da görünür yazıyla ver; ipucu süstür. Uzun
   açıklama için 'title' değil bu kullanılır (title dokunmatikte görünmez, gecikir). */

[data-ipucu] { position: relative; }
[data-ipucu]::after {
  content: attr(data-ipucu);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: 30;
  width: max-content;
  max-width: 240px;
  padding: 5px 8px;
  border-radius: var(--yaricap-1);
  border: 1px solid var(--cizgi-guclu);
  background: var(--zemin-0);
  box-shadow: var(--golge-2);
  color: var(--yazi-1);
  font: 400 var(--boy-2)/1.35 var(--aile-sans);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 3px);
  transition: opacity var(--gecis), transform var(--gecis), visibility 0s linear var(--gecis);
}
[data-ipucu]:hover::after, [data-ipucu]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 250ms, 250ms, 0s;
}
[data-ipucu]:focus-visible::after { transition-delay: 0s; }
[data-ipucu-yon='alt']::after { bottom: auto; top: calc(100% + 6px); }
[data-ipucu-yon='sol']::after { left: auto; right: calc(100% + 6px); bottom: 50%;
  transform: translate(-3px, 50%); }
[data-ipucu-yon='sol']:is(:hover, :focus-visible)::after { transform: translate(0, 50%); }
[data-ipucu-yon='sag']::after { left: calc(100% + 6px); bottom: 50%;
  transform: translate(3px, 50%); }
[data-ipucu-yon='sag']:is(:hover, :focus-visible)::after { transform: translate(0, 50%); }
/* açılır menü açıkken (düğme aria-expanded="true") balon menünün ilk satırını örterdi */
[data-ipucu][aria-expanded='true']::after,
[data-ipucu][aria-expanded='true']:hover::after,
[data-ipucu][aria-expanded='true']:focus-visible::after { display: none; }
@media (hover: none) {
  [data-ipucu]:hover::after { opacity: 0; visibility: hidden; }
}