/* Yalnız pencere/panel kapatma çarpıları: tek ölçü, çizim ve sakin kapanış. */
:root {
  --close-icon-duration: 150ms;
  --close-window-duration: 170ms;
}
button:is(.dialog-close-button, .shelf-close, .side-drawer-close) {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  display: grid;
  grid-template: 1fr / 1fr;
  grid-auto-rows: 0;
  flex: none;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
/* Yazı tipinden ve eski SVG'nin viewBox'ından bağımsız, tam ortalı çarpı. */
button:is(.dialog-close-button, .shelf-close, .side-drawer-close)::before,
button:is(.dialog-close-button, .shelf-close, .side-drawer-close)::after {
  content: "";
  grid-area: 1 / 1;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
button:is(.dialog-close-button, .shelf-close, .side-drawer-close)::after { transform: rotate(-45deg); }
button:is(.dialog-close-button, .shelf-close, .side-drawer-close) > * { display: none; }
button:is(.dialog-close-button, .shelf-close, .side-drawer-close):active {
  border-color: var(--line);
  background: var(--surface-soft, var(--surface));
  color: var(--text, var(--ink));
}
@media (hover: hover) and (pointer: fine) {
  button:is(.dialog-close-button, .shelf-close, .side-drawer-close):hover {
    border-color: var(--line);
    background: var(--surface-soft, var(--surface));
    color: var(--text, var(--ink));
  }
}
@media (pointer: coarse) {
  button:is(.dialog-close-button, .shelf-close, .side-drawer-close) {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}
.is-dismissing { pointer-events: none; animation: close-x-out var(--close-icon-duration) ease-in forwards; }
/* Pencere perdeden önce söner (%65 süre); perde bulanıklığı açılırken üstte yarı saydam
   pencere kalmaz, iki katman üst üste "çift görüntü" yapmaz. */
dialog[open].is-closing { pointer-events: none; animation: window-out calc(var(--close-window-duration) * .65) ease-in forwards; }
/* Rehber tüm ekranı kaplar: vurgu ve kart kapanırken yalnız solar. */
dialog.drawer-tour[open].is-closing { animation-name: backdrop-out; }

dialog[open].is-closing::backdrop { animation: backdrop-out var(--close-window-duration) ease-in forwards; }
@keyframes close-x-out { to { opacity: 0; scale: .5; rotate: 90deg; } }
@keyframes window-out { to { opacity: 0; scale: .97; translate: 0 6px; } }
@keyframes backdrop-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  button:is(.dialog-close-button, .shelf-close, .side-drawer-close) { transition: none; }
  .is-dismissing, dialog[open].is-closing, dialog[open].is-closing::backdrop { animation: none; }
}