/* ======= Custom Button Variants for XML/DevExtreme ======= */


/* Genel ortak stil */

.dx-button-has-text .dx-button-content{
  overflow: unset !important;
  max-height: unset !important;
}


/* Temel ortak stil */
div[id$="_normal"].dx-button,
div[id$="_purple"].dx-button,
div[id$="_outline"].dx-button,
div[id$="_dashed"].dx-button,
div[id$="_glass"].dx-button,
div[id$="_black"].dx-button,
div[id$="_icon-green"].dx-button,
div[id$="_icon-blue"].dx-button,
div[id$="_icon-red"].dx-button,
div[id$="_neon"].dx-button,
div[id$="_disabled"].dx-button,
div[id$="_glassOutline"].dx-button {
  font-weight: 600 !important;
  border: none !important;
  outline: none !important;
  transition: all 0.23s cubic-bezier(0.4,0,0.2,1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4em !important;
  position: relative !important;
  user-select: none !important;
  cursor: pointer !important;
  border-radius: 1rem !important;
  font-size: 1rem !important;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10) !important;
  min-width: 120px !important;
  min-height: 40px !important;
  padding: 0.5em 2em !important;
}

div[id$="_normal"].dx-button .dx-button-content,
div[id$="_normal"].dx-button .dx-button-text,
div[id$="_purple"].dx-button .dx-button-content,
div[id$="_purple"].dx-button .dx-button-text,
div[id$="_outline"].dx-button .dx-button-content,
div[id$="_outline"].dx-button .dx-button-text,
div[id$="_dashed"].dx-button .dx-button-content,
div[id$="_dashed"].dx-button .dx-button-text,
div[id$="_glass"].dx-button .dx-button-content,
div[id$="_glass"].dx-button .dx-button-text,
div[id$="_black"].dx-button .dx-button-content,
div[id$="_black"].dx-button .dx-button-text,
div[id$="_icon-green"].dx-button .dx-button-content,
div[id$="_icon-green"].dx-button .dx-button-text,
div[id$="_icon-blue"].dx-button .dx-button-content,
div[id$="_icon-blue"].dx-button .dx-button-text,
div[id$="_icon-red"].dx-button .dx-button-content,
div[id$="_icon-red"].dx-button .dx-button-text,
div[id$="_neon"].dx-button .dx-button-content,
div[id$="_neon"].dx-button .dx-button-text,
div[id$="_disabled"].dx-button .dx-button-content,
div[id$="_disabled"].dx-button .dx-button-text,
div[id$="_glassOutline"].dx-button .dx-button-content,
div[id$="_glassOutline"].dx-button .dx-button-text {
  font-size: 1rem !important;
  line-height: 2.1 !important;
  padding: 0 !important;
}

/* Normal - kırmızı gradientli */
div[id$="_normal"].dx-button {
  background: linear-gradient(275deg,#b81c22 0%,#dc2626 100%) !important;
  color: #fff !important;
  border: none !important;
}
div[id$="_normal"].dx-button:hover {
  background: linear-gradient(275deg,#b81c22 0%,#c1121f 100%) !important;
  box-shadow: 0 4px 16px 0 #b81c2236 !important;
  transform: translateY(-2px) scale(1.04);
}
div[id$="_normal"].dx-button:active {
  transform: scale(0.97);
  box-shadow: 0 1px 3px 0 #b81c2240 inset;
}

div[id$="_normal"].dx-button {
  position: relative !important;
  overflow: hidden !important;
}
div[id$="_normal"].dx-button::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -100%;
  z-index: 0;
  background: linear-gradient(275deg, #b81c22 0%, #ff4d6d 100%);
  opacity: 0.25;
  transition: left 0.3s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
div[id$="_normal"].dx-button:hover::before,
div[id$="_purple"].dx-button:hover::before,
div[id$="_outline"].dx-button:hover::before,
div[id$="_dashed"].dx-button:hover::before,
div[id$="_glass"].dx-button:hover::before,
div[id$="_black"].dx-button:hover::before,
div[id$="_icon-green"].dx-button:hover::before,
div[id$="_icon-blue"].dx-button:hover::before,
div[id$="_icon-red"].dx-button:hover::before,
div[id$="_neon"].dx-button:hover::before,
div[id$="_disabled"].dx-button:hover::before,
div[id$="_glassOutline"].dx-button:hover::before {
  left: 0;
}
div[id$="_normal"].dx-button .dx-button-content,
div[id$="_normal"].dx-button .dx-button-text {
  position: relative;
  z-index: 1;
}

/* Purple gradientli */
div[id$="_purple"].dx-button {
  background: linear-gradient(90deg,#7c3aed 0%,#2563eb 100%) !important;
  color: #fff !important;
  border: none !important;
}
div[id$="_purple"].dx-button:hover {
  background: linear-gradient(90deg,#6d28d9 0%,#1d4ed8 100%) !important;
  box-shadow: 0 4px 16px 0 #7c3aed4d !important;
  transform: translateY(-2px) scale(1.04);
}
div[id$="_purple"].dx-button:active {
  transform: scale(0.97);
  box-shadow: 0 1px 3px 0 #7c3aed4d inset;
}

/* Outline (kırmızı çerçeve) */
div[id$="_outline"].dx-button {
  background: #fff !important;
  color: #b81c22 !important;
  border: 2px solid #b81c22 !important;
  box-shadow: 0 2px 8px 0 rgba(184,28,34,0.04) !important;
}
div[id$="_outline"].dx-button .dx-icon {
  color: #b81c22 !important;
}
div[id$="_outline"].dx-button:hover {
  background: #b81c22 !important;
  color: #fff !important;
  box-shadow: 0 4px 16px 0 #b81c2255 !important;
  transform: translateY(-2px);
}
div[id$="_outline"].dx-button:hover .dx-icon {
  color: #fff !important;
}
div[id$="_outline"].dx-button:active {
  transform: scale(0.97);
  box-shadow: 0 1px 3px 0 #b81c2240 inset;
}

/* Dashed (mavi çerçeve) */
div[id$="_dashed"].dx-button {
  background: #fff !important;
  color: #2563eb !important;
  border: 2px dashed #2563eb !important;
}
div[id$="_dashed"].dx-button:hover {
  background: #e0e7ff !important;
  border-style: solid !important;
  transform: translateY(-2px) scale(1.04);
}
div[id$="_dashed"].dx-button:active {
  transform: scale(0.97);
  box-shadow: 0 1px 3px 0 #2563eb40 inset;
}

/* Glass efekti */
div[id$="_glass"].dx-button {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #111 !important;
}
div[id$="_glass"].dx-button:hover {
  background: rgba(255,255,255,0.27) !important;
}
div[id$="_glass"].dx-button:active {
  transform: scale(0.97);
  box-shadow: 0 1px 3px 0 #0002 inset;
}

/* Black */
div[id$="_black"].dx-button {
  background: #18181b !important;
  color: #fff !important;
}
div[id$="_black"].dx-button:hover {
  background: #111 !important;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 16px 0 #18181b3b !important;
}
div[id$="_black"].dx-button:active {
  transform: scale(0.97);
  box-shadow: 0 1px 3px 0 #1114 inset;
}

/* Neon */
div[id$="_neon"].dx-button {
  background: #18181b !important;
  color: #fff !important;
  box-shadow: 0 2px 20px 0 #0ff3, 0 2px 8px 0 #0002 !important;
  overflow: hidden !important;
}
div[id$="_neon"].dx-button:hover {
  background: #23272f !important;
  box-shadow: 0 6px 30px 0 #0ff6, 0 6px 20px 0 #2563eb33 !important;
  transform: translateY(-2px) scale(1.05);
}
div[id$="_neon"].dx-button:active {
  transform: scale(0.96);
  box-shadow: 0 1px 6px 0 #0ff6 inset;
}

/* Disabled */
div[id$="_disabled"].dx-button {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
div[id$="_disabled"].dx-button:hover,
div[id$="_disabled"].dx-button:active {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Glass Outline */
div[id$="_glassOutline"].dx-button {
  background: transparent !important;
  border: 2px solid transparent !important;
  border-image: linear-gradient(90deg,#ef4444,#ec4899) 1 !important;
  color: transparent !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  background-image: linear-gradient(90deg,#ef4444,#ec4899) !important;
  font-weight: bold !important;
  position: relative !important;
  border-radius: 1.25em !important;
  z-index: 1;
}
div[id$="_glassOutline"].dx-button:hover {
  border-image: linear-gradient(90deg,#dc2626,#db2777) 1 !important;
  background-image: linear-gradient(90deg,#dc2626,#db2777) !important;
}
div[id$="_glassOutline"].dx-button:active {
  transform: scale(0.97);
  box-shadow: 0 1px 3px 0 #ef444440 inset;
}

/* Yuvarlak ikon varyantları */
div[id$="_icon-green"].dx-button,
div[id$="_icon-blue"].dx-button,
div[id$="_icon-red"].dx-button,
div[id$="_icon-orange"].dx-button,
div[id$="_icon-black"].dx-button {
  border-radius: 9999px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  font-size: 1.2rem !important;
  justify-content: center !important;
}

/* Icon içeriği ortalansın */
div[id^="_icon-"].dx-button .dx-button-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100%;
}

/* ---------- _icon-green ---------- */
div[id$="_icon-green"].dx-button {
  background: #22c55e !important;
  color: #fff !important;
}
div[id$="_icon-green"].dx-button:hover {
  background: #16a34a !important;
  box-shadow: 0 4px 16px 0 #22c55e36 !important;
  transform: translateY(-2px) scale(1.08);
}
div[id$="_icon-green"].dx-button:active {
  transform: scale(0.91);
  box-shadow: 0 1px 3px 0 #16a34a44 inset;
}

/* ---------- _icon-blue ---------- */
div[id$="_icon-blue"].dx-button {
  background: #2563eb !important;
  color: #fff !important;
}
div[id$="_icon-blue"].dx-button:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 4px 16px 0 #2563eb36 !important;
  transform: translateY(-2px) scale(1.08);
}
div[id$="_icon-blue"].dx-button:active {
  transform: scale(0.91);
  box-shadow: 0 1px 3px 0 #1d4ed844 inset;
}

/* ---------- _icon-red ---------- */
div[id$="_icon-red"].dx-button {
  background: #dc2626 !important;
  color: #fff !important;
}
div[id$="_icon-red"].dx-button:hover {
  background: #b81c22 !important;
  box-shadow: 0 4px 16px 0 #dc262636 !important;
  transform: translateY(-2px) scale(1.08);
}
div[id$="_icon-red"].dx-button:active {
  transform: scale(0.91);
  box-shadow: 0 1px 3px 0 #b81c2244 inset;
}

/* ---------- _icon-orange ---------- */
div[id$="_icon-orange"].dx-button {
  background: linear-gradient(90deg,#ff9800 0%,#fdba74 100%) !important;
  color: #fff !important;
}
div[id$="_icon-orange"].dx-button:hover {
  background: linear-gradient(90deg,#f59e42 0%,#ff9800 100%) !important;
  box-shadow: 0 4px 16px 0 #ff980036 !important;
  transform: translateY(-2px) scale(1.08);
}
div[id$="_icon-orange"].dx-button:active {
  transform: scale(0.91);
  box-shadow: 0 1px 3px 0 #ff980040 inset;
}

/* ---------- _icon-black ---------- */
div[id$="_icon-black"].dx-button {
  background: #18181b !important;
  color: #fff !important;
}
div[id$="_icon-black"].dx-button:hover {
  background: #000 !important;
  box-shadow: 0 4px 16px 0 #18181b36 !important;
  transform: translateY(-2px) scale(1.08);
}
div[id$="_icon-black"].dx-button:active {
  transform: scale(0.91);
  box-shadow: 0 1px 3px 0 #1114 inset;
}

/* Yuvarlaklar - ör: class'a 'round-full' ekleyince veya width/height custom yapılacaksa ekle */
div[id$="_normal"].dx-button.round-full,
div[id$="_purple"].dx-button.round-full,
div[id$="_outline"].dx-button.round-full,
div[id$="_dashed"].dx-button.round-full,
div[id$="_glass"].dx-button.round-full,
div[id$="_black"].dx-button.round-full,
div[id$="_icon-green"].dx-button.round-full,
div[id$="_icon-blue"].dx-button.round-full,
div[id$="_icon-red"].dx-button.round-full,
div[id$="_neon"].dx-button.round-full {
  border-radius: 9999px !important;
  padding: 0 !important;
  min-width: 48px !important;
  min-height: 48px !important;
  width: 48px !important;
  height: 48px !important;
  justify-content: center !important;
}

/* Yazı rengini span'a da uygula ki içte bozulmasın */
div[id$="_normal"].dx-button .dx-button-text,
div[id$="_purple"].dx-button .dx-button-text,
div[id$="_outline"].dx-button .dx-button-text,
div[id$="_dashed"].dx-button .dx-button-text,
div[id$="_glass"].dx-button .dx-button-text,
div[id$="_black"].dx-button .dx-button-text,
div[id$="_icon-green"].dx-button .dx-button-text,
div[id$="_icon-blue"].dx-button .dx-button-text,
div[id$="_icon-red"].dx-button .dx-button-text,
div[id$="_neon"].dx-button .dx-button-text,
div[id$="_disabled"].dx-button .dx-button-text,
div[id$="_glassOutline"].dx-button .dx-button-text {
  color: inherit !important;
  background-clip: inherit !important;
  -webkit-background-clip: inherit !important;
  background-image: inherit !important;
}



/* ======= END ======= */