.app-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--zindex-alert);
  background:var(--bg-main-transparent);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: appAlertFade 0.18s ease;
  color: var(--text-main);
}

.app-alert-overlay.hidden,
.app-alert-actions.hidden,
.app-alert-ok.hidden,
.app-alert-spinner.hidden,
.app-alert-toast.hidden,
.hidden-icon {
  display: none !important;
}

.app-alert-box {
  width: 100%;
  max-width: 390px;
  background:var(--bg-surface);
  
  border-radius: 18px;
  box-shadow: var(--shadow-heavy);
  padding: 26px 22px;
  text-align: center;
  animation: appAlertPop 0.2s ease;
}

.app-alert-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:var(--bg-warning);
  font-size: 24px;
  font-weight: 700;
}

.app-alert-success {
  background:var(--bg-success);
  color: var(--text-main);
}

.app-alert-error {
  background: var(--bg-danger);
  color: var(--text-main);
}

.app-alert-warning {
  background: var(--bg-warning);
  color: var(--text-main);
}

.app-alert-message {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.app-alert-actions,
.app-alert-ok {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top:20px;
}

.app-alert-btn {
  min-width: 100px;
  height: 40px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-main);
}

.app-alert-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.app-alert-cancel {
  background: var(--bg-danger);

}

.app-alert-confirm {
  background: var(--bg-button);
}


.app-alert-cancel:hover {
 opacity:0.8;
}

.app-alert-confirm:hover {
   opacity:0.8;
}



.app-alert-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: var(--zindex-alert);
  min-width: 220px;
  max-width: calc(100vw - 40px);
  padding: 12px 18px;
  border-radius: 12px;
  text-align: center;
  box-shadow:var(--shadow-heavy);
  animation: appToastUp 0.2s ease;
}

.app-alert-toast-info {
  background: var(--bg-button);
}

.app-alert-toast-success {
  background: var(--bg-success);
  color:var(--text-main)
}

.app-alert-toast-error {
  background: var(--bg-danger);
  color:var(--text-main)
}

.app-alert-toast-warning {
  background: var(--bg-warning);
  color:var(--text-main)
}

@keyframes appAlertFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes appAlertPop {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes appToastUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes appAlertSpin {
  to {
    transform: rotate(360deg);
  }
}



/* =========================
   AppAlert Professional Spinner
   single ring / growing arc
   ========================= */

@property --spinner-arc {
  syntax: "<angle>";
  inherits: false;
  initial-value: 42deg;
}

@property --spinner-gap {
  syntax: "<angle>";
  inherits: false;
  initial-value: 18deg;
}

.app-alert-spinner {
  --spinner-size: 44px;
  --spinner-stroke: 4px;
  --spinner-color: var(--bg-button);
  --spinner-arc: 42deg;
  --spinner-gap: 18deg;

  width: var(--spinner-size);
  height: var(--spinner-size);
  margin: 0 auto 16px;

  border-radius: 50%;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent var(--spinner-gap),
      var(--spinner-color) calc(var(--spinner-gap) + 1deg),
      var(--spinner-color) var(--spinner-arc),
      transparent calc(var(--spinner-arc) + 1deg),
      transparent 360deg
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - var(--spinner-stroke) - 1px),
      #000 calc(100% - var(--spinner-stroke)),
      #000 100%
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - var(--spinner-stroke) - 1px),
      #000 calc(100% - var(--spinner-stroke)),
      #000 100%
    );

  animation:
    appAlertSpin 0.85s linear infinite,
    appAlertArcGrow 1.15s ease-in-out infinite alternate;
}

@keyframes appAlertSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes appAlertArcGrow {
  0% {
    --spinner-arc: 44deg;
    --spinner-gap: 18deg;
  }

  50% {
    --spinner-arc: 170deg;
    --spinner-gap: 22deg;
  }

  100% {
    --spinner-arc: 260deg;
    --spinner-gap: 28deg;
  }
}







/* HTML EKLENDI*/
/* =========================
   AppAlert Extended Content
   ========================= */

.app-alert-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  color: var(--text-main);
}

.app-alert-size-normal {
  max-width: 420px;
}

.app-alert-size-large {
  width: min(820px, calc(100vw - 28px));
  max-width: 820px;
}

.app-alert-size-wide {
  width: min(1100px, calc(100vw - 28px));
  max-width: 1100px;
}

.app-alert-json-viewer {
  display: grid;
  gap: 10px;
  width: 100%;
}

.app-alert-json-title {
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  color: var(--text-main);
}

.app-alert-json-viewer pre {
  max-height: 430px;
  overflow: auto;

  margin: 0;
  padding: 14px;

  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;

  font-size: 12px;
  line-height: 1.55;

  border-radius: 14px;
     color: var(--text-main);
    background: var(--bg-header);
    border: 1px solid var(--border-soft);
}

/* =========================
   APP ALERT EXTRA / CHECKBOX
   ========================= */

.app-alert-extra {
  width: 100%;
  margin-top: 0.85rem;
}

.app-alert-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;

  width: 100%;
  padding: 0.75rem 0.85rem;

  margin-bottom:20px;

  border-radius: var(--radius-lg, 14px);
  background: var(--bg-forminput, rgba(255, 255, 255, 0.08));

  cursor: pointer;
  user-select: none;
}

.app-alert-checkbox-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app-alert-checkbox-box {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;

  border-radius: 0.35rem;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.18));
  background: var(--bg-surface, transparent);

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-alert-checkbox-input:checked + .app-alert-checkbox-box {
  background: var(--bg-success, #2ecc71);
  border-color: var(--bg-success, #2ecc71);
}

.app-alert-checkbox-input:checked + .app-alert-checkbox-box::after {
  content: "✓";
  color: var(--text-button, #fff);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}

.app-alert-checkbox-label {
  font-size: 0.88rem;
  color: var(--text-main, inherit);
}

/* =========================
   APP ALERT INPUT
   ========================= */

.app-alert-input-row {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    0.5rem;

  box-sizing:
    border-box;
}

.app-alert-input-label {
  color:
    var(--text-secondary);

  font-size:
    0.85rem;

  font-weight:
    700;
}

.app-alert-input {
  width:
    100%;

  min-width:
    0;

  height:
    3rem;

  padding:
    0
    0.85rem;

  border:
    1px solid
    var(--border-soft);

  border-radius:
    var(--radius-lg);

  background:
    var(--bg-forminput);

  color:
    var(--text-main);

  font-size:
    1rem;

  outline:
    none;

  box-sizing:
    border-box;
}

.app-alert-input:focus {
  border-color:
    var(--border-strong);
}

.app-alert-input::placeholder {
  color:
    var(--text-secondary);

  opacity:
    0.65;
}

.app-alert-confirm:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;
}