@charset "UTF-8";

/* =========================================================
   Tüyap UI Button & Utilities (SCSS)
   Not: Tüm renk/tone erişimleri --web-$color-$variant şemasını kullanır.
   Örn: var(--web-green-bg), var(--web-orange-hover-bg) vb.
   ======================================================= */
/* -----------------------
   0) Özelleştirilebilir temeller
------------------------*/
:root {
  --web-green-bg: #1daa61;
  --web-green-soft-bg: #eaf7f0;
  --web-green-text: #1daa61;
  --web-green-border-color: #1daa61;
  --web-green-color: #fff;

  --web-green-hover-bg: #24d67a;
  --web-green-hover-border-color: #24d67a;
  --web-green-hover-color: #fff;
  --web-green-active-bg: #188c50;
  --web-green-active-border-color: #188c50;
  --web-green-active-color: #fff;
  --web-green-disabled-bg: #a5ddc0;
  --web-green-disabled-border-color: #a5ddc0;
  --web-green-disabled-color: #fff;
  --web-green-focus-shadow-rgb: 29, 170, 97;

  --web-orange-bg: #ff6000;
  --web-orange-soft-bg: #fff3e8;
  --web-orange-text: #ff6000;
  --web-orange-border-color: #ff6000;
  --web-orange-color: #fff;

  --web-orange-hover-bg: #ff7a26;
  --web-orange-hover-border-color: #ff7a26;
  --web-orange-hover-color: #fff;
  --web-orange-active-bg: #cc4d00;
  --web-orange-active-border-color: #cc4d00;
  --web-orange-active-color: #fff;
  --web-orange-disabled-bg: #ffc299;
  --web-orange-disabled-border-color: #ffc299;
  --web-orange-disabled-color: #fff;
  --web-orange-focus-shadow-rgb: 255, 96, 0;

  --web-deepsky-blue-bg: #3ABEFF;
  --web-deepsky-blue-soft-bg: #eaf6ff;
  --web-deepsky-blue-text: #3ABEFF;
  --web-deepsky-blue-border-color: #3ABEFF;
  --web-deepsky-blue-color: #fff;
  --web-deepsky-blue-hover-bg: #77D2FF;
  --web-deepsky-blue-hover-border-color: #77D2FF;
  --web-deepsky-blue-hover-color: #fff;
  --web-deepsky-blue-active-bg: #00A9FC;
  --web-deepsky-blue-active-border-color: #00A9FC;
  --web-deepsky-blue-active-color: #fff;
  --web-deepsky-blue-disabled-bg: #C4ECFF;
  --web-deepsky-blue-disabled-border-color: #C4ECFF;
  --web-deepsky-blue-disabled-color: #fff;
  --web-deepsky-blue-focus-shadow-rgb: 58, 190, 255;

  --web-cyan-bg: #26FFE6;
  --web-cyan-soft-bg: #e6fffb;
  --web-cyan-text: #26FFE6;
  --web-cyan-border-color: #26FFE6;
  --web-cyan-color: #111;
  --web-cyan-hover-bg: #63FFED;
  --web-cyan-hover-border-color: #63FFED;
  --web-cyan-hover-color: #111;
  --web-cyan-active-bg: #00E8CD;
  --web-cyan-active-border-color: #00E8CD;
  --web-cyan-active-color: #111;
  --web-cyan-disabled-bg: #BEFFF8;
  --web-cyan-disabled-border-color: #BEFFF8;
  --web-cyan-disabled-color: #111;
  --web-cyan-focus-shadow-rgb: 38, 255, 230;

  --web-claret-bg: #820933;
  --web-claret-soft-bg: #fdecf3;
  --web-claret-text: #820933;
  --web-claret-border-color: #820933;
  --web-claret-color: #fff;
  --web-claret-hover-bg: #BB0D49;
  --web-claret-hover-border-color: #BB0D49;
  --web-claret-hover-color: #fff;
  --web-claret-active-bg: #49051D;
  --web-claret-active-border-color: #49051D;
  --web-claret-active-color: #fff;
  --web-claret-disabled-bg: #DAB5C2;
  --web-claret-disabled-border-color: #DAB5C2;
  --web-claret-disabled-color: #fff;
  --web-claret-focus-shadow-rgb: 130, 9, 51;

  --web-chartreuse-bg: #E0FF4F;
  --web-chartreuse-soft-bg: #fbffe6;
  --web-chartreuse-text: #E0FF4F;
  --web-chartreuse-border-color: #E0FF4F;
  --web-chartreuse-color: #111;
  --web-chartreuse-hover-bg: #EBFF8C;
  --web-chartreuse-hover-border-color: #EBFF8C;
  --web-chartreuse-hover-color: #111;
  --web-chartreuse-active-bg: #D5FF12;
  --web-chartreuse-active-border-color: #D5FF12;
  --web-chartreuse-active-color: #111;
  --web-chartreuse-disabled-bg: #F6FFCA;
  --web-chartreuse-disabled-border-color: #F6FFCA;
  --web-chartreuse-disabled-color: #111;
  --web-chartreuse-focus-shadow-rgb: 224, 255, 79;

  --web-gunmetal-bg: #00272B;
  --web-gunmetal-soft-bg: #eaf3f4;
  --web-gunmetal-text: #00272B;
  --web-gunmetal-border-color: #00272B;
  --web-gunmetal-color: #fff;
  --web-gunmetal-hover-bg: #005F68;
  --web-gunmetal-hover-border-color: #005F68;
  --web-gunmetal-hover-color: #fff;
  --web-gunmetal-active-bg: #000000;
  --web-gunmetal-active-border-color: #000000;
  --web-gunmetal-active-color: #fff;
  --web-gunmetal-disabled-bg: #B2BEBF;
  --web-gunmetal-disabled-border-color: #B2BEBF;
  --web-gunmetal-disabled-color: #fff;
  --web-gunmetal-focus-shadow-rgb: 0, 39, 43;

  --web-bittersweet-bg: #FF6663;
  --web-bittersweet-soft-bg: #ffefee;
  --web-bittersweet-text: #FF6663;
  --web-bittersweet-border-color: #FF6663;
  --web-bittersweet-color: #fff;
  --web-bittersweet-hover-bg: #FFA2A0;
  --web-bittersweet-hover-border-color: #FFA2A0;
  --web-bittersweet-hover-color: #fff;
  --web-bittersweet-active-bg: #FF2A26;
  --web-bittersweet-active-border-color: #FF2A26;
  --web-bittersweet-active-color: #fff;
  --web-bittersweet-disabled-bg: #FFD1D0;
  --web-bittersweet-disabled-border-color: #FFD1D0;
  --web-bittersweet-disabled-color: #fff;
  --web-bittersweet-focus-shadow-rgb: 255, 102, 99;

  --web-majorelle-blue-bg: #623CEA;
  --web-majorelle-blue-soft-bg: #efe9ff;
  --web-majorelle-blue-text: #623CEA;
  --web-majorelle-blue-border-color: #623CEA;
  --web-majorelle-blue-color: #fff;
  --web-majorelle-blue-hover-bg: #8E73F0;
  --web-majorelle-blue-hover-border-color: #8E73F0;
  --web-majorelle-blue-hover-color: #fff;
  --web-majorelle-blue-active-bg: #4017D2;
  --web-majorelle-blue-active-border-color: #4017D2;
  --web-majorelle-blue-active-color: #fff;
  --web-majorelle-blue-disabled-bg: #D0C4F9;
  --web-majorelle-blue-disabled-border-color: #D0C4F9;
  --web-majorelle-blue-disabled-color: #fff;
  --web-majorelle-blue-focus-shadow-rgb: 98, 60, 234;

  --web-pearl-bg: #E7DFC6;
  --web-pearl-soft-bg: #fbf9f3;
  --web-pearl-text: #E7DFC6;
  --web-pearl-border-color: #E7DFC6;
  --web-pearl-color: #111;
  --web-pearl-hover-bg: #F9F7F1;
  --web-pearl-hover-border-color: #F9F7F1;
  --web-pearl-hover-color: #111;
  --web-pearl-active-bg: #D5C79B;
  --web-pearl-active-border-color: #D5C79B;
  --web-pearl-active-color: #111;
  --web-pearl-disabled-bg: #F8F5EE;
  --web-pearl-disabled-border-color: #F8F5EE;
  --web-pearl-disabled-color: #111;
  --web-pearl-focus-shadow-rgb: 231, 223, 198;

  --web-neaples-bg: #EFCB68;
  --web-neaples-soft-bg: #fff6e3;
  --web-neaples-text: #EFCB68;
  --web-neaples-border-color: #EFCB68;
  --web-neaples-color: #111;
  --web-neaples-hover-bg: #F5DE9F;
  --web-neaples-hover-border-color: #F5DE9F;
  --web-neaples-hover-color: #111;
  --web-neaples-active-bg: #E9B831;
  --web-neaples-active-border-color: #E9B831;
  --web-neaples-active-color: #111;
  --web-neaples-disabled-bg: #FAEFD2;
  --web-neaples-disabled-border-color: #FAEFD2;
  --web-neaples-disabled-color: #111;
  --web-neaples-focus-shadow-rgb: 239, 203, 104;

  --web-red-bg: #FB4D3D;
  --web-red-soft-bg: #ffe9e7;
  --web-red-text: #FB4D3D;
  --web-red-border-color: #FB4D3D;
  --web-red-color: #fff;
  --web-red-hover-bg: #FC8479;
  --web-red-hover-border-color: #FC8479;
  --web-red-hover-color: #fff;
  --web-red-active-bg: #F61905;
  --web-red-active-border-color: #F61905;
  --web-red-active-color: #fff;
  --web-red-disabled-bg: #FECAC5;
  --web-red-disabled-border-color: #FECAC5;
  --web-red-disabled-color: #fff;
  --web-red-focus-shadow-rgb: 251, 77, 61;

  --btn-font-weight: 600;
  --btn-radius: 0.5rem;
  --btn-transition: 0.18s ease-in-out;
  --btn-focus-ring-w: 0.25rem;
  --btn-icon-gap: 0.5rem;
}

/* Renk anahtarları: senin var olan token’larının renk adları */
/* -----------------------
   1) Yardımcı fonksiyon & mixin'ler
------------------------*/
/* var(--web-<name>-<suffix>) döndürür */
/* rgba(var(--web-<name>-focus-shadow-rgb), .X) üretir */
/* Dolu (filled) buton varyantı */
/* Outline */
/* Soft (yarı transparan) */
/* Ghost (tam transparan sınır yok) */
/* -----------------------
   2) Base .btn + boyutlar
------------------------*/
.btn,
.btn-ghost-web-red,
.btn-soft-web-red,
.btn-outline-web-red,
.btn-web-red,
.btn-ghost-web-neaples,
.btn-soft-web-neaples,
.btn-outline-web-neaples,
.btn-web-neaples,
.btn-ghost-web-pearl,
.btn-soft-web-pearl,
.btn-outline-web-pearl,
.btn-web-pearl,
.btn-ghost-web-majorelle-blue,
.btn-soft-web-majorelle-blue,
.btn-outline-web-majorelle-blue,
.btn-web-majorelle-blue,
.btn-ghost-web-bittersweet,
.btn-soft-web-bittersweet,
.btn-outline-web-bittersweet,
.btn-web-bittersweet,
.btn-ghost-web-gunmetal,
.btn-soft-web-gunmetal,
.btn-outline-web-gunmetal,
.btn-web-gunmetal,
.btn-ghost-web-chartreuse,
.btn-soft-web-chartreuse,
.btn-outline-web-chartreuse,
.btn-web-chartreuse,
.btn-ghost-web-claret,
.btn-soft-web-claret,
.btn-outline-web-claret,
.btn-web-claret,
.btn-ghost-web-cyan,
.btn-soft-web-cyan,
.btn-outline-web-cyan,
.btn-web-cyan,
.btn-ghost-web-deepsky-blue,
.btn-soft-web-deepsky-blue,
.btn-outline-web-deepsky-blue,
.btn-web-deepsky-blue,
.btn-ghost-web-orange,
.btn-soft-web-orange,
.btn-outline-web-orange,
.btn-web-orange,
.btn-ghost-web-green,
.btn-soft-web-green,
.btn-outline-web-green,
.btn-web-green {
  --_py: map-get(map-get($btn-sizes, md), py);
  --_px: map-get(map-get($btn-sizes, md), px);
  --_fs: map-get(map-get($btn-sizes, md), fs);
  --_radius: map-get(map-get($btn-sizes, md), radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-icon-gap);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: var(--btn-font-weight);
  font-size: var(--_fs);
  line-height: 1.2;
  padding: var(--_py) var(--_px);
  border-radius: var(--_radius);
  border: 1px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color var(--btn-transition), border-color var(--btn-transition), color var(--btn-transition), box-shadow var(--btn-transition), transform 0.08s ease-out;
  text-decoration: none;
}

.btn:active:not(:disabled):not(.disabled),
.btn-ghost-web-red:active:not(:disabled):not(.disabled),
.btn-soft-web-red:active:not(:disabled):not(.disabled),
.btn-outline-web-red:active:not(:disabled):not(.disabled),
.btn-web-red:active:not(:disabled):not(.disabled),
.btn-ghost-web-neaples:active:not(:disabled):not(.disabled),
.btn-soft-web-neaples:active:not(:disabled):not(.disabled),
.btn-outline-web-neaples:active:not(:disabled):not(.disabled),
.btn-web-neaples:active:not(:disabled):not(.disabled),
.btn-ghost-web-pearl:active:not(:disabled):not(.disabled),
.btn-soft-web-pearl:active:not(:disabled):not(.disabled),
.btn-outline-web-pearl:active:not(:disabled):not(.disabled),
.btn-web-pearl:active:not(:disabled):not(.disabled),
.btn-ghost-web-majorelle-blue:active:not(:disabled):not(.disabled),
.btn-soft-web-majorelle-blue:active:not(:disabled):not(.disabled),
.btn-outline-web-majorelle-blue:active:not(:disabled):not(.disabled),
.btn-web-majorelle-blue:active:not(:disabled):not(.disabled),
.btn-ghost-web-bittersweet:active:not(:disabled):not(.disabled),
.btn-soft-web-bittersweet:active:not(:disabled):not(.disabled),
.btn-outline-web-bittersweet:active:not(:disabled):not(.disabled),
.btn-web-bittersweet:active:not(:disabled):not(.disabled),
.btn-ghost-web-gunmetal:active:not(:disabled):not(.disabled),
.btn-soft-web-gunmetal:active:not(:disabled):not(.disabled),
.btn-outline-web-gunmetal:active:not(:disabled):not(.disabled),
.btn-web-gunmetal:active:not(:disabled):not(.disabled),
.btn-ghost-web-chartreuse:active:not(:disabled):not(.disabled),
.btn-soft-web-chartreuse:active:not(:disabled):not(.disabled),
.btn-outline-web-chartreuse:active:not(:disabled):not(.disabled),
.btn-web-chartreuse:active:not(:disabled):not(.disabled),
.btn-ghost-web-claret:active:not(:disabled):not(.disabled),
.btn-soft-web-claret:active:not(:disabled):not(.disabled),
.btn-outline-web-claret:active:not(:disabled):not(.disabled),
.btn-web-claret:active:not(:disabled):not(.disabled),
.btn-ghost-web-cyan:active:not(:disabled):not(.disabled),
.btn-soft-web-cyan:active:not(:disabled):not(.disabled),
.btn-outline-web-cyan:active:not(:disabled):not(.disabled),
.btn-web-cyan:active:not(:disabled):not(.disabled),
.btn-ghost-web-deepsky-blue:active:not(:disabled):not(.disabled),
.btn-soft-web-deepsky-blue:active:not(:disabled):not(.disabled),
.btn-outline-web-deepsky-blue:active:not(:disabled):not(.disabled),
.btn-web-deepsky-blue:active:not(:disabled):not(.disabled),
.btn-ghost-web-orange:active:not(:disabled):not(.disabled),
.btn-soft-web-orange:active:not(:disabled):not(.disabled),
.btn-outline-web-orange:active:not(:disabled):not(.disabled),
.btn-web-orange:active:not(:disabled):not(.disabled),
.btn-ghost-web-green:active:not(:disabled):not(.disabled),
.btn-soft-web-green:active:not(:disabled):not(.disabled),
.btn-outline-web-green:active:not(:disabled):not(.disabled),
.btn-web-green:active:not(:disabled):not(.disabled) {
  transform: translateY(1px);
}

.btn:disabled,
.btn-ghost-web-red:disabled,
.btn-soft-web-red:disabled,
.btn-outline-web-red:disabled,
.btn-web-red:disabled,
.btn-ghost-web-neaples:disabled,
.btn-soft-web-neaples:disabled,
.btn-outline-web-neaples:disabled,
.btn-web-neaples:disabled,
.btn-ghost-web-pearl:disabled,
.btn-soft-web-pearl:disabled,
.btn-outline-web-pearl:disabled,
.btn-web-pearl:disabled,
.btn-ghost-web-majorelle-blue:disabled,
.btn-soft-web-majorelle-blue:disabled,
.btn-outline-web-majorelle-blue:disabled,
.btn-web-majorelle-blue:disabled,
.btn-ghost-web-bittersweet:disabled,
.btn-soft-web-bittersweet:disabled,
.btn-outline-web-bittersweet:disabled,
.btn-web-bittersweet:disabled,
.btn-ghost-web-gunmetal:disabled,
.btn-soft-web-gunmetal:disabled,
.btn-outline-web-gunmetal:disabled,
.btn-web-gunmetal:disabled,
.btn-ghost-web-chartreuse:disabled,
.btn-soft-web-chartreuse:disabled,
.btn-outline-web-chartreuse:disabled,
.btn-web-chartreuse:disabled,
.btn-ghost-web-claret:disabled,
.btn-soft-web-claret:disabled,
.btn-outline-web-claret:disabled,
.btn-web-claret:disabled,
.btn-ghost-web-cyan:disabled,
.btn-soft-web-cyan:disabled,
.btn-outline-web-cyan:disabled,
.btn-web-cyan:disabled,
.btn-ghost-web-deepsky-blue:disabled,
.btn-soft-web-deepsky-blue:disabled,
.btn-outline-web-deepsky-blue:disabled,
.btn-web-deepsky-blue:disabled,
.btn-ghost-web-orange:disabled,
.btn-soft-web-orange:disabled,
.btn-outline-web-orange:disabled,
.btn-web-orange:disabled,
.btn-ghost-web-green:disabled,
.btn-soft-web-green:disabled,
.btn-outline-web-green:disabled,
.btn-web-green:disabled,
.btn.disabled,
.disabled.btn-ghost-web-red,
.disabled.btn-soft-web-red,
.disabled.btn-outline-web-red,
.disabled.btn-web-red,
.disabled.btn-ghost-web-neaples,
.disabled.btn-soft-web-neaples,
.disabled.btn-outline-web-neaples,
.disabled.btn-web-neaples,
.disabled.btn-ghost-web-pearl,
.disabled.btn-soft-web-pearl,
.disabled.btn-outline-web-pearl,
.disabled.btn-web-pearl,
.disabled.btn-ghost-web-majorelle-blue,
.disabled.btn-soft-web-majorelle-blue,
.disabled.btn-outline-web-majorelle-blue,
.disabled.btn-web-majorelle-blue,
.disabled.btn-ghost-web-bittersweet,
.disabled.btn-soft-web-bittersweet,
.disabled.btn-outline-web-bittersweet,
.disabled.btn-web-bittersweet,
.disabled.btn-ghost-web-gunmetal,
.disabled.btn-soft-web-gunmetal,
.disabled.btn-outline-web-gunmetal,
.disabled.btn-web-gunmetal,
.disabled.btn-ghost-web-chartreuse,
.disabled.btn-soft-web-chartreuse,
.disabled.btn-outline-web-chartreuse,
.disabled.btn-web-chartreuse,
.disabled.btn-ghost-web-claret,
.disabled.btn-soft-web-claret,
.disabled.btn-outline-web-claret,
.disabled.btn-web-claret,
.disabled.btn-ghost-web-cyan,
.disabled.btn-soft-web-cyan,
.disabled.btn-outline-web-cyan,
.disabled.btn-web-cyan,
.disabled.btn-ghost-web-deepsky-blue,
.disabled.btn-soft-web-deepsky-blue,
.disabled.btn-outline-web-deepsky-blue,
.disabled.btn-web-deepsky-blue,
.disabled.btn-ghost-web-orange,
.disabled.btn-soft-web-orange,
.disabled.btn-outline-web-orange,
.disabled.btn-web-orange,
.disabled.btn-ghost-web-green,
.disabled.btn-soft-web-green,
.disabled.btn-outline-web-green,
.disabled.btn-web-green {
  cursor: not-allowed;
  opacity: 0.65;
}

.btn:focus-visible,
.btn-ghost-web-red:focus-visible,
.btn-soft-web-red:focus-visible,
.btn-outline-web-red:focus-visible,
.btn-web-red:focus-visible,
.btn-ghost-web-neaples:focus-visible,
.btn-soft-web-neaples:focus-visible,
.btn-outline-web-neaples:focus-visible,
.btn-web-neaples:focus-visible,
.btn-ghost-web-pearl:focus-visible,
.btn-soft-web-pearl:focus-visible,
.btn-outline-web-pearl:focus-visible,
.btn-web-pearl:focus-visible,
.btn-ghost-web-majorelle-blue:focus-visible,
.btn-soft-web-majorelle-blue:focus-visible,
.btn-outline-web-majorelle-blue:focus-visible,
.btn-web-majorelle-blue:focus-visible,
.btn-ghost-web-bittersweet:focus-visible,
.btn-soft-web-bittersweet:focus-visible,
.btn-outline-web-bittersweet:focus-visible,
.btn-web-bittersweet:focus-visible,
.btn-ghost-web-gunmetal:focus-visible,
.btn-soft-web-gunmetal:focus-visible,
.btn-outline-web-gunmetal:focus-visible,
.btn-web-gunmetal:focus-visible,
.btn-ghost-web-chartreuse:focus-visible,
.btn-soft-web-chartreuse:focus-visible,
.btn-outline-web-chartreuse:focus-visible,
.btn-web-chartreuse:focus-visible,
.btn-ghost-web-claret:focus-visible,
.btn-soft-web-claret:focus-visible,
.btn-outline-web-claret:focus-visible,
.btn-web-claret:focus-visible,
.btn-ghost-web-cyan:focus-visible,
.btn-soft-web-cyan:focus-visible,
.btn-outline-web-cyan:focus-visible,
.btn-web-cyan:focus-visible,
.btn-ghost-web-deepsky-blue:focus-visible,
.btn-soft-web-deepsky-blue:focus-visible,
.btn-outline-web-deepsky-blue:focus-visible,
.btn-web-deepsky-blue:focus-visible,
.btn-ghost-web-orange:focus-visible,
.btn-soft-web-orange:focus-visible,
.btn-outline-web-orange:focus-visible,
.btn-web-orange:focus-visible,
.btn-ghost-web-green:focus-visible,
.btn-soft-web-green:focus-visible,
.btn-outline-web-green:focus-visible,
.btn-web-green:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(0, 0, 0, 0.12);
}

.btn-sm {
  --_py: map-get(map-get($btn-sizes, sm), py);
  --_px: map-get(map-get($btn-sizes, sm), px);
  --_fs: map-get(map-get($btn-sizes, sm), fs);
  --_radius: map-get(map-get($btn-sizes, sm), radius);
}

.btn-lg {
  --_py: map-get(map-get($btn-sizes, lg), py);
  --_px: map-get(map-get($btn-sizes, lg), px);
  --_fs: map-get(map-get($btn-sizes, lg), fs);
  --_radius: map-get(map-get($btn-sizes, lg), radius);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* İkon butonlar */
.btn-icon {
  --_size: map-get(map-get($btn-sizes, md), icon);
  width: var(--_size);
  height: var(--_size);
  padding: 0;
}

.btn-icon i,
.btn-icon svg {
  pointer-events: none;
}

.btn-icon-sm {
  --_size: map-get(map-get($btn-sizes, sm), icon);
}

.btn-icon-lg {
  --_size: map-get(map-get($btn-sizes, lg), icon);
}

/* -----------------------
   3) Renk varyant sınıfları
   (Mevcut şeman: .btn-web-<color> vb.)
------------------------*/
/* Filled */
.btn-web-green {
  color: var(--web-green-color);
  background-color: var(--web-green-bg);
  border-color: var(--web-green-border-color);
}

.btn-web-green:hover:not(:disabled):not(.disabled) {
  color: var(--web-green-hover-color);
  background-color: var(--web-green-hover-bg);
  border-color: var(--web-green-hover-border-color);
}

.btn-web-green:active:not(:disabled):not(.disabled),
.btn-web-green.active {
  color: var(--web-green-active-color);
  background-color: var(--web-green-active-bg);
  border-color: var(--web-green-active-border-color);
  background-image: none;
}

.btn-web-green:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-green-focus-shadow-rgb), 0.33);
}

.btn-web-green:disabled,
.btn-web-green.disabled {
  color: var(--web-green-disabled-color);
  background-color: var(--web-green-disabled-bg);
  border-color: var(--web-green-disabled-border-color);
}

/* Outline */
.btn-outline-web-green {
  color: var(--web-green-text);
  background-color: transparent;
  border-color: var(--web-green-border-color);
}

.btn-outline-web-green:hover:not(:disabled):not(.disabled) {
  color: var(--web-green-hover-color);
  background-color: var(--web-green-hover-bg);
  border-color: var(--web-green-hover-border-color);
}

.btn-outline-web-green:active:not(:disabled):not(.disabled),
.btn-outline-web-green.active {
  color: var(--web-green-active-color);
  background-color: var(--web-green-active-bg);
  border-color: var(--web-green-active-border-color);
}

.btn-outline-web-green:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-green-focus-shadow-rgb), 0.33);
}

.btn-outline-web-green:disabled,
.btn-outline-web-green.disabled {
  color: var(--web-green-text);
  background-color: transparent;
  border-color: var(--web-green-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-green {
  color: var(--web-green-text);
  background-color: color-mix(in oklab, var(--web-green-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-green-border-color) 20%, transparent);
}

.btn-soft-web-green:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-green-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-green-hover-border-color) 28%, transparent);
}

.btn-soft-web-green:active:not(:disabled):not(.disabled),
.btn-soft-web-green.active {
  background-color: color-mix(in oklab, var(--web-green-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-green-active-border-color) 34%, transparent);
}

.btn-soft-web-green:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-green-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-green {
  color: var(--web-green-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-green:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-green-bg) 10%, transparent);
}

.btn-ghost-web-green:active:not(:disabled):not(.disabled),
.btn-ghost-web-green.active {
  background-color: color-mix(in oklab, var(--web-green-bg) 16%, transparent);
}

.btn-ghost-web-green:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-green-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-green {
  color: var(--web-green-text) !important;
}

.bg-web-green {
  background-color: var(--web-green-bg) !important;
}

.border-web-green {
  border-color: var(--web-green-border-color) !important;
}

/* Filled */
.btn-web-orange {
  color: var(--web-orange-color);
  background-color: var(--web-orange-bg);
  border-color: var(--web-orange-border-color);
}

.btn-web-orange:hover:not(:disabled):not(.disabled) {
  color: var(--web-orange-hover-color);
  background-color: var(--web-orange-hover-bg);
  border-color: var(--web-orange-hover-border-color);
}

.btn-web-orange:active:not(:disabled):not(.disabled),
.btn-web-orange.active {
  color: var(--web-orange-active-color);
  background-color: var(--web-orange-active-bg);
  border-color: var(--web-orange-active-border-color);
  background-image: none;
}

.btn-web-orange:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-orange-focus-shadow-rgb), 0.33);
}

.btn-web-orange:disabled,
.btn-web-orange.disabled {
  color: var(--web-orange-disabled-color);
  background-color: var(--web-orange-disabled-bg);
  border-color: var(--web-orange-disabled-border-color);
}

/* Outline */
.btn-outline-web-orange {
  color: var(--web-orange-text);
  background-color: transparent;
  border-color: var(--web-orange-border-color);
}

.btn-outline-web-orange:hover:not(:disabled):not(.disabled) {
  color: var(--web-orange-hover-color);
  background-color: var(--web-orange-hover-bg);
  border-color: var(--web-orange-hover-border-color);
}

.btn-outline-web-orange:active:not(:disabled):not(.disabled),
.btn-outline-web-orange.active {
  color: var(--web-orange-active-color);
  background-color: var(--web-orange-active-bg);
  border-color: var(--web-orange-active-border-color);
}

.btn-outline-web-orange:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-orange-focus-shadow-rgb), 0.33);
}

.btn-outline-web-orange:disabled,
.btn-outline-web-orange.disabled {
  color: var(--web-orange-text);
  background-color: transparent;
  border-color: var(--web-orange-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-orange {
  color: var(--web-orange-text);
  background-color: color-mix(in oklab, var(--web-orange-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-orange-border-color) 20%, transparent);
}

.btn-soft-web-orange:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-orange-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-orange-hover-border-color) 28%, transparent);
}

.btn-soft-web-orange:active:not(:disabled):not(.disabled),
.btn-soft-web-orange.active {
  background-color: color-mix(in oklab, var(--web-orange-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-orange-active-border-color) 34%, transparent);
}

.btn-soft-web-orange:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-orange-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-orange {
  color: var(--web-orange-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-orange:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-orange-bg) 10%, transparent);
}

.btn-ghost-web-orange:active:not(:disabled):not(.disabled),
.btn-ghost-web-orange.active {
  background-color: color-mix(in oklab, var(--web-orange-bg) 16%, transparent);
}

.btn-ghost-web-orange:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-orange-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-orange {
  color: var(--web-orange-text) !important;
}

.bg-web-orange {
  background-color: var(--web-orange-bg) !important;
}

.border-web-orange {
  border-color: var(--web-orange-border-color) !important;
}

/* Filled */
.btn-web-deepsky-blue {
  color: var(--web-deepsky-blue-color);
  background-color: var(--web-deepsky-blue-bg);
  border-color: var(--web-deepsky-blue-border-color);
}

.btn-web-deepsky-blue:hover:not(:disabled):not(.disabled) {
  color: var(--web-deepsky-blue-hover-color);
  background-color: var(--web-deepsky-blue-hover-bg);
  border-color: var(--web-deepsky-blue-hover-border-color);
}

.btn-web-deepsky-blue:active:not(:disabled):not(.disabled),
.btn-web-deepsky-blue.active {
  color: var(--web-deepsky-blue-active-color);
  background-color: var(--web-deepsky-blue-active-bg);
  border-color: var(--web-deepsky-blue-active-border-color);
  background-image: none;
}

.btn-web-deepsky-blue:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-deepsky-blue-focus-shadow-rgb), 0.33);
}

.btn-web-deepsky-blue:disabled,
.btn-web-deepsky-blue.disabled {
  color: var(--web-deepsky-blue-disabled-color);
  background-color: var(--web-deepsky-blue-disabled-bg);
  border-color: var(--web-deepsky-blue-disabled-border-color);
}

/* Outline */
.btn-outline-web-deepsky-blue {
  color: var(--web-deepsky-blue-text);
  background-color: transparent;
  border-color: var(--web-deepsky-blue-border-color);
}

.btn-outline-web-deepsky-blue:hover:not(:disabled):not(.disabled) {
  color: var(--web-deepsky-blue-hover-color);
  background-color: var(--web-deepsky-blue-hover-bg);
  border-color: var(--web-deepsky-blue-hover-border-color);
}

.btn-outline-web-deepsky-blue:active:not(:disabled):not(.disabled),
.btn-outline-web-deepsky-blue.active {
  color: var(--web-deepsky-blue-active-color);
  background-color: var(--web-deepsky-blue-active-bg);
  border-color: var(--web-deepsky-blue-active-border-color);
}

.btn-outline-web-deepsky-blue:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-deepsky-blue-focus-shadow-rgb), 0.33);
}

.btn-outline-web-deepsky-blue:disabled,
.btn-outline-web-deepsky-blue.disabled {
  color: var(--web-deepsky-blue-text);
  background-color: transparent;
  border-color: var(--web-deepsky-blue-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-deepsky-blue {
  color: var(--web-deepsky-blue-text);
  background-color: color-mix(in oklab, var(--web-deepsky-blue-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-deepsky-blue-border-color) 20%, transparent);
}

.btn-soft-web-deepsky-blue:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-deepsky-blue-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-deepsky-blue-hover-border-color) 28%, transparent);
}

.btn-soft-web-deepsky-blue:active:not(:disabled):not(.disabled),
.btn-soft-web-deepsky-blue.active {
  background-color: color-mix(in oklab, var(--web-deepsky-blue-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-deepsky-blue-active-border-color) 34%, transparent);
}

.btn-soft-web-deepsky-blue:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-deepsky-blue-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-deepsky-blue {
  color: var(--web-deepsky-blue-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-deepsky-blue:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-deepsky-blue-bg) 10%, transparent);
}

.btn-ghost-web-deepsky-blue:active:not(:disabled):not(.disabled),
.btn-ghost-web-deepsky-blue.active {
  background-color: color-mix(in oklab, var(--web-deepsky-blue-bg) 16%, transparent);
}

.btn-ghost-web-deepsky-blue:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-deepsky-blue-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-deepsky-blue {
  color: var(--web-deepsky-blue-text) !important;
}

.bg-web-deepsky-blue {
  background-color: var(--web-deepsky-blue-bg) !important;
}

.border-web-deepsky-blue {
  border-color: var(--web-deepsky-blue-border-color) !important;
}

/* Filled */
.btn-web-cyan {
  color: var(--web-cyan-color);
  background-color: var(--web-cyan-bg);
  border-color: var(--web-cyan-border-color);
}

.btn-web-cyan:hover:not(:disabled):not(.disabled) {
  color: var(--web-cyan-hover-color);
  background-color: var(--web-cyan-hover-bg);
  border-color: var(--web-cyan-hover-border-color);
}

.btn-web-cyan:active:not(:disabled):not(.disabled),
.btn-web-cyan.active {
  color: var(--web-cyan-active-color);
  background-color: var(--web-cyan-active-bg);
  border-color: var(--web-cyan-active-border-color);
  background-image: none;
}

.btn-web-cyan:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-cyan-focus-shadow-rgb), 0.33);
}

.btn-web-cyan:disabled,
.btn-web-cyan.disabled {
  color: var(--web-cyan-disabled-color);
  background-color: var(--web-cyan-disabled-bg);
  border-color: var(--web-cyan-disabled-border-color);
}

/* Outline */
.btn-outline-web-cyan {
  color: var(--web-cyan-text);
  background-color: transparent;
  border-color: var(--web-cyan-border-color);
}

.btn-outline-web-cyan:hover:not(:disabled):not(.disabled) {
  color: var(--web-cyan-hover-color);
  background-color: var(--web-cyan-hover-bg);
  border-color: var(--web-cyan-hover-border-color);
}

.btn-outline-web-cyan:active:not(:disabled):not(.disabled),
.btn-outline-web-cyan.active {
  color: var(--web-cyan-active-color);
  background-color: var(--web-cyan-active-bg);
  border-color: var(--web-cyan-active-border-color);
}

.btn-outline-web-cyan:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-cyan-focus-shadow-rgb), 0.33);
}

.btn-outline-web-cyan:disabled,
.btn-outline-web-cyan.disabled {
  color: var(--web-cyan-text);
  background-color: transparent;
  border-color: var(--web-cyan-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-cyan {
  color: var(--web-cyan-text);
  background-color: color-mix(in oklab, var(--web-cyan-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-cyan-border-color) 20%, transparent);
}

.btn-soft-web-cyan:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-cyan-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-cyan-hover-border-color) 28%, transparent);
}

.btn-soft-web-cyan:active:not(:disabled):not(.disabled),
.btn-soft-web-cyan.active {
  background-color: color-mix(in oklab, var(--web-cyan-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-cyan-active-border-color) 34%, transparent);
}

.btn-soft-web-cyan:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-cyan-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-cyan {
  color: var(--web-cyan-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-cyan:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-cyan-bg) 10%, transparent);
}

.btn-ghost-web-cyan:active:not(:disabled):not(.disabled),
.btn-ghost-web-cyan.active {
  background-color: color-mix(in oklab, var(--web-cyan-bg) 16%, transparent);
}

.btn-ghost-web-cyan:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-cyan-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-cyan {
  color: var(--web-cyan-text) !important;
}

.bg-web-cyan {
  background-color: var(--web-cyan-bg) !important;
}

.border-web-cyan {
  border-color: var(--web-cyan-border-color) !important;
}

/* Filled */
.btn-web-claret {
  color: var(--web-claret-color);
  background-color: var(--web-claret-bg);
  border-color: var(--web-claret-border-color);
}

.btn-web-claret:hover:not(:disabled):not(.disabled) {
  color: var(--web-claret-hover-color);
  background-color: var(--web-claret-hover-bg);
  border-color: var(--web-claret-hover-border-color);
}

.btn-web-claret:active:not(:disabled):not(.disabled),
.btn-web-claret.active {
  color: var(--web-claret-active-color);
  background-color: var(--web-claret-active-bg);
  border-color: var(--web-claret-active-border-color);
  background-image: none;
}

.btn-web-claret:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-claret-focus-shadow-rgb), 0.33);
}

.btn-web-claret:disabled,
.btn-web-claret.disabled {
  color: var(--web-claret-disabled-color);
  background-color: var(--web-claret-disabled-bg);
  border-color: var(--web-claret-disabled-border-color);
}

/* Outline */
.btn-outline-web-claret {
  color: var(--web-claret-text);
  background-color: transparent;
  border-color: var(--web-claret-border-color);
}

.btn-outline-web-claret:hover:not(:disabled):not(.disabled) {
  color: var(--web-claret-hover-color);
  background-color: var(--web-claret-hover-bg);
  border-color: var(--web-claret-hover-border-color);
}

.btn-outline-web-claret:active:not(:disabled):not(.disabled),
.btn-outline-web-claret.active {
  color: var(--web-claret-active-color);
  background-color: var(--web-claret-active-bg);
  border-color: var(--web-claret-active-border-color);
}

.btn-outline-web-claret:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-claret-focus-shadow-rgb), 0.33);
}

.btn-outline-web-claret:disabled,
.btn-outline-web-claret.disabled {
  color: var(--web-claret-text);
  background-color: transparent;
  border-color: var(--web-claret-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-claret {
  color: var(--web-claret-text);
  background-color: color-mix(in oklab, var(--web-claret-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-claret-border-color) 20%, transparent);
}

.btn-soft-web-claret:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-claret-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-claret-hover-border-color) 28%, transparent);
}

.btn-soft-web-claret:active:not(:disabled):not(.disabled),
.btn-soft-web-claret.active {
  background-color: color-mix(in oklab, var(--web-claret-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-claret-active-border-color) 34%, transparent);
}

.btn-soft-web-claret:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-claret-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-claret {
  color: var(--web-claret-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-claret:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-claret-bg) 10%, transparent);
}

.btn-ghost-web-claret:active:not(:disabled):not(.disabled),
.btn-ghost-web-claret.active {
  background-color: color-mix(in oklab, var(--web-claret-bg) 16%, transparent);
}

.btn-ghost-web-claret:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-claret-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-claret {
  color: var(--web-claret-text) !important;
}

.bg-web-claret {
  background-color: var(--web-claret-bg) !important;
}

.border-web-claret {
  border-color: var(--web-claret-border-color) !important;
}

/* Filled */
.btn-web-chartreuse {
  color: var(--web-chartreuse-color);
  background-color: var(--web-chartreuse-bg);
  border-color: var(--web-chartreuse-border-color);
}

.btn-web-chartreuse:hover:not(:disabled):not(.disabled) {
  color: var(--web-chartreuse-hover-color);
  background-color: var(--web-chartreuse-hover-bg);
  border-color: var(--web-chartreuse-hover-border-color);
}

.btn-web-chartreuse:active:not(:disabled):not(.disabled),
.btn-web-chartreuse.active {
  color: var(--web-chartreuse-active-color);
  background-color: var(--web-chartreuse-active-bg);
  border-color: var(--web-chartreuse-active-border-color);
  background-image: none;
}

.btn-web-chartreuse:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-chartreuse-focus-shadow-rgb), 0.33);
}

.btn-web-chartreuse:disabled,
.btn-web-chartreuse.disabled {
  color: var(--web-chartreuse-disabled-color);
  background-color: var(--web-chartreuse-disabled-bg);
  border-color: var(--web-chartreuse-disabled-border-color);
}

/* Outline */
.btn-outline-web-chartreuse {
  color: var(--web-chartreuse-text);
  background-color: transparent;
  border-color: var(--web-chartreuse-border-color);
}

.btn-outline-web-chartreuse:hover:not(:disabled):not(.disabled) {
  color: var(--web-chartreuse-hover-color);
  background-color: var(--web-chartreuse-hover-bg);
  border-color: var(--web-chartreuse-hover-border-color);
}

.btn-outline-web-chartreuse:active:not(:disabled):not(.disabled),
.btn-outline-web-chartreuse.active {
  color: var(--web-chartreuse-active-color);
  background-color: var(--web-chartreuse-active-bg);
  border-color: var(--web-chartreuse-active-border-color);
}

.btn-outline-web-chartreuse:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-chartreuse-focus-shadow-rgb), 0.33);
}

.btn-outline-web-chartreuse:disabled,
.btn-outline-web-chartreuse.disabled {
  color: var(--web-chartreuse-text);
  background-color: transparent;
  border-color: var(--web-chartreuse-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-chartreuse {
  color: var(--web-chartreuse-text);
  background-color: color-mix(in oklab, var(--web-chartreuse-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-chartreuse-border-color) 20%, transparent);
}

.btn-soft-web-chartreuse:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-chartreuse-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-chartreuse-hover-border-color) 28%, transparent);
}

.btn-soft-web-chartreuse:active:not(:disabled):not(.disabled),
.btn-soft-web-chartreuse.active {
  background-color: color-mix(in oklab, var(--web-chartreuse-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-chartreuse-active-border-color) 34%, transparent);
}

.btn-soft-web-chartreuse:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-chartreuse-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-chartreuse {
  color: var(--web-chartreuse-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-chartreuse:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-chartreuse-bg) 10%, transparent);
}

.btn-ghost-web-chartreuse:active:not(:disabled):not(.disabled),
.btn-ghost-web-chartreuse.active {
  background-color: color-mix(in oklab, var(--web-chartreuse-bg) 16%, transparent);
}

.btn-ghost-web-chartreuse:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-chartreuse-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-chartreuse {
  color: var(--web-chartreuse-text) !important;
}

.bg-web-chartreuse {
  background-color: var(--web-chartreuse-bg) !important;
}

.border-web-chartreuse {
  border-color: var(--web-chartreuse-border-color) !important;
}

/* Filled */
.btn-web-gunmetal {
  color: var(--web-gunmetal-color);
  background-color: var(--web-gunmetal-bg);
  border-color: var(--web-gunmetal-border-color);
}

.btn-web-gunmetal:hover:not(:disabled):not(.disabled) {
  color: var(--web-gunmetal-hover-color);
  background-color: var(--web-gunmetal-hover-bg);
  border-color: var(--web-gunmetal-hover-border-color);
}

.btn-web-gunmetal:active:not(:disabled):not(.disabled),
.btn-web-gunmetal.active {
  color: var(--web-gunmetal-active-color);
  background-color: var(--web-gunmetal-active-bg);
  border-color: var(--web-gunmetal-active-border-color);
  background-image: none;
}

.btn-web-gunmetal:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-gunmetal-focus-shadow-rgb), 0.33);
}

.btn-web-gunmetal:disabled,
.btn-web-gunmetal.disabled {
  color: var(--web-gunmetal-disabled-color);
  background-color: var(--web-gunmetal-disabled-bg);
  border-color: var(--web-gunmetal-disabled-border-color);
}

/* Outline */
.btn-outline-web-gunmetal {
  color: var(--web-gunmetal-text);
  background-color: transparent;
  border-color: var(--web-gunmetal-border-color);
}

.btn-outline-web-gunmetal:hover:not(:disabled):not(.disabled) {
  color: var(--web-gunmetal-hover-color);
  background-color: var(--web-gunmetal-hover-bg);
  border-color: var(--web-gunmetal-hover-border-color);
}

.btn-outline-web-gunmetal:active:not(:disabled):not(.disabled),
.btn-outline-web-gunmetal.active {
  color: var(--web-gunmetal-active-color);
  background-color: var(--web-gunmetal-active-bg);
  border-color: var(--web-gunmetal-active-border-color);
}

.btn-outline-web-gunmetal:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-gunmetal-focus-shadow-rgb), 0.33);
}

.btn-outline-web-gunmetal:disabled,
.btn-outline-web-gunmetal.disabled {
  color: var(--web-gunmetal-text);
  background-color: transparent;
  border-color: var(--web-gunmetal-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-gunmetal {
  color: var(--web-gunmetal-text);
  background-color: color-mix(in oklab, var(--web-gunmetal-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-gunmetal-border-color) 20%, transparent);
}

.btn-soft-web-gunmetal:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-gunmetal-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-gunmetal-hover-border-color) 28%, transparent);
}

.btn-soft-web-gunmetal:active:not(:disabled):not(.disabled),
.btn-soft-web-gunmetal.active {
  background-color: color-mix(in oklab, var(--web-gunmetal-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-gunmetal-active-border-color) 34%, transparent);
}

.btn-soft-web-gunmetal:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-gunmetal-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-gunmetal {
  color: var(--web-gunmetal-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-gunmetal:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-gunmetal-bg) 10%, transparent);
}

.btn-ghost-web-gunmetal:active:not(:disabled):not(.disabled),
.btn-ghost-web-gunmetal.active {
  background-color: color-mix(in oklab, var(--web-gunmetal-bg) 16%, transparent);
}

.btn-ghost-web-gunmetal:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-gunmetal-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-gunmetal {
  color: var(--web-gunmetal-text) !important;
}

.bg-web-gunmetal {
  background-color: var(--web-gunmetal-bg) !important;
}

.border-web-gunmetal {
  border-color: var(--web-gunmetal-border-color) !important;
}

/* Filled */
.btn-web-bittersweet {
  color: var(--web-bittersweet-color);
  background-color: var(--web-bittersweet-bg);
  border-color: var(--web-bittersweet-border-color);
}

.btn-web-bittersweet:hover:not(:disabled):not(.disabled) {
  color: var(--web-bittersweet-hover-color);
  background-color: var(--web-bittersweet-hover-bg);
  border-color: var(--web-bittersweet-hover-border-color);
}

.btn-web-bittersweet:active:not(:disabled):not(.disabled),
.btn-web-bittersweet.active {
  color: var(--web-bittersweet-active-color);
  background-color: var(--web-bittersweet-active-bg);
  border-color: var(--web-bittersweet-active-border-color);
  background-image: none;
}

.btn-web-bittersweet:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-bittersweet-focus-shadow-rgb), 0.33);
}

.btn-web-bittersweet:disabled,
.btn-web-bittersweet.disabled {
  color: var(--web-bittersweet-disabled-color);
  background-color: var(--web-bittersweet-disabled-bg);
  border-color: var(--web-bittersweet-disabled-border-color);
}

/* Outline */
.btn-outline-web-bittersweet {
  color: var(--web-bittersweet-text);
  background-color: transparent;
  border-color: var(--web-bittersweet-border-color);
}

.btn-outline-web-bittersweet:hover:not(:disabled):not(.disabled) {
  color: var(--web-bittersweet-hover-color);
  background-color: var(--web-bittersweet-hover-bg);
  border-color: var(--web-bittersweet-hover-border-color);
}

.btn-outline-web-bittersweet:active:not(:disabled):not(.disabled),
.btn-outline-web-bittersweet.active {
  color: var(--web-bittersweet-active-color);
  background-color: var(--web-bittersweet-active-bg);
  border-color: var(--web-bittersweet-active-border-color);
}

.btn-outline-web-bittersweet:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-bittersweet-focus-shadow-rgb), 0.33);
}

.btn-outline-web-bittersweet:disabled,
.btn-outline-web-bittersweet.disabled {
  color: var(--web-bittersweet-text);
  background-color: transparent;
  border-color: var(--web-bittersweet-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-bittersweet {
  color: var(--web-bittersweet-text);
  background-color: color-mix(in oklab, var(--web-bittersweet-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-bittersweet-border-color) 20%, transparent);
}

.btn-soft-web-bittersweet:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-bittersweet-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-bittersweet-hover-border-color) 28%, transparent);
}

.btn-soft-web-bittersweet:active:not(:disabled):not(.disabled),
.btn-soft-web-bittersweet.active {
  background-color: color-mix(in oklab, var(--web-bittersweet-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-bittersweet-active-border-color) 34%, transparent);
}

.btn-soft-web-bittersweet:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-bittersweet-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-bittersweet {
  color: var(--web-bittersweet-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-bittersweet:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-bittersweet-bg) 10%, transparent);
}

.btn-ghost-web-bittersweet:active:not(:disabled):not(.disabled),
.btn-ghost-web-bittersweet.active {
  background-color: color-mix(in oklab, var(--web-bittersweet-bg) 16%, transparent);
}

.btn-ghost-web-bittersweet:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-bittersweet-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-bittersweet {
  color: var(--web-bittersweet-text) !important;
}

.bg-web-bittersweet {
  background-color: var(--web-bittersweet-bg) !important;
}

.border-web-bittersweet {
  border-color: var(--web-bittersweet-border-color) !important;
}

/* Filled */
.btn-web-majorelle-blue {
  color: var(--web-majorelle-blue-color);
  background-color: var(--web-majorelle-blue-bg);
  border-color: var(--web-majorelle-blue-border-color);
}

.btn-web-majorelle-blue:hover:not(:disabled):not(.disabled) {
  color: var(--web-majorelle-blue-hover-color);
  background-color: var(--web-majorelle-blue-hover-bg);
  border-color: var(--web-majorelle-blue-hover-border-color);
}

.btn-web-majorelle-blue:active:not(:disabled):not(.disabled),
.btn-web-majorelle-blue.active {
  color: var(--web-majorelle-blue-active-color);
  background-color: var(--web-majorelle-blue-active-bg);
  border-color: var(--web-majorelle-blue-active-border-color);
  background-image: none;
}

.btn-web-majorelle-blue:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-majorelle-blue-focus-shadow-rgb), 0.33);
}

.btn-web-majorelle-blue:disabled,
.btn-web-majorelle-blue.disabled {
  color: var(--web-majorelle-blue-disabled-color);
  background-color: var(--web-majorelle-blue-disabled-bg);
  border-color: var(--web-majorelle-blue-disabled-border-color);
}

/* Outline */
.btn-outline-web-majorelle-blue {
  color: var(--web-majorelle-blue-text);
  background-color: transparent;
  border-color: var(--web-majorelle-blue-border-color);
}

.btn-outline-web-majorelle-blue:hover:not(:disabled):not(.disabled) {
  color: var(--web-majorelle-blue-hover-color);
  background-color: var(--web-majorelle-blue-hover-bg);
  border-color: var(--web-majorelle-blue-hover-border-color);
}

.btn-outline-web-majorelle-blue:active:not(:disabled):not(.disabled),
.btn-outline-web-majorelle-blue.active {
  color: var(--web-majorelle-blue-active-color);
  background-color: var(--web-majorelle-blue-active-bg);
  border-color: var(--web-majorelle-blue-active-border-color);
}

.btn-outline-web-majorelle-blue:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-majorelle-blue-focus-shadow-rgb), 0.33);
}

.btn-outline-web-majorelle-blue:disabled,
.btn-outline-web-majorelle-blue.disabled {
  color: var(--web-majorelle-blue-text);
  background-color: transparent;
  border-color: var(--web-majorelle-blue-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-majorelle-blue {
  color: var(--web-majorelle-blue-text);
  background-color: color-mix(in oklab, var(--web-majorelle-blue-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-majorelle-blue-border-color) 20%, transparent);
}

.btn-soft-web-majorelle-blue:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-majorelle-blue-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-majorelle-blue-hover-border-color) 28%, transparent);
}

.btn-soft-web-majorelle-blue:active:not(:disabled):not(.disabled),
.btn-soft-web-majorelle-blue.active {
  background-color: color-mix(in oklab, var(--web-majorelle-blue-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-majorelle-blue-active-border-color) 34%, transparent);
}

.btn-soft-web-majorelle-blue:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-majorelle-blue-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-majorelle-blue {
  color: var(--web-majorelle-blue-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-majorelle-blue:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-majorelle-blue-bg) 10%, transparent);
}

.btn-ghost-web-majorelle-blue:active:not(:disabled):not(.disabled),
.btn-ghost-web-majorelle-blue.active {
  background-color: color-mix(in oklab, var(--web-majorelle-blue-bg) 16%, transparent);
}

.btn-ghost-web-majorelle-blue:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-majorelle-blue-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-majorelle-blue {
  color: var(--web-majorelle-blue-text) !important;
}

.bg-web-majorelle-blue {
  background-color: var(--web-majorelle-blue-bg) !important;
}

.border-web-majorelle-blue {
  border-color: var(--web-majorelle-blue-border-color) !important;
}

/* Filled */
.btn-web-pearl {
  color: var(--web-pearl-color);
  background-color: var(--web-pearl-bg);
  border-color: var(--web-pearl-border-color);
}

.btn-web-pearl:hover:not(:disabled):not(.disabled) {
  color: var(--web-pearl-hover-color);
  background-color: var(--web-pearl-hover-bg);
  border-color: var(--web-pearl-hover-border-color);
}

.btn-web-pearl:active:not(:disabled):not(.disabled),
.btn-web-pearl.active {
  color: var(--web-pearl-active-color);
  background-color: var(--web-pearl-active-bg);
  border-color: var(--web-pearl-active-border-color);
  background-image: none;
}

.btn-web-pearl:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-pearl-focus-shadow-rgb), 0.33);
}

.btn-web-pearl:disabled,
.btn-web-pearl.disabled {
  color: var(--web-pearl-disabled-color);
  background-color: var(--web-pearl-disabled-bg);
  border-color: var(--web-pearl-disabled-border-color);
}

/* Outline */
.btn-outline-web-pearl {
  color: var(--web-pearl-text);
  background-color: transparent;
  border-color: var(--web-pearl-border-color);
}

.btn-outline-web-pearl:hover:not(:disabled):not(.disabled) {
  color: var(--web-pearl-hover-color);
  background-color: var(--web-pearl-hover-bg);
  border-color: var(--web-pearl-hover-border-color);
}

.btn-outline-web-pearl:active:not(:disabled):not(.disabled),
.btn-outline-web-pearl.active {
  color: var(--web-pearl-active-color);
  background-color: var(--web-pearl-active-bg);
  border-color: var(--web-pearl-active-border-color);
}

.btn-outline-web-pearl:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-pearl-focus-shadow-rgb), 0.33);
}

.btn-outline-web-pearl:disabled,
.btn-outline-web-pearl.disabled {
  color: var(--web-pearl-text);
  background-color: transparent;
  border-color: var(--web-pearl-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-pearl {
  color: var(--web-pearl-text);
  background-color: color-mix(in oklab, var(--web-pearl-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-pearl-border-color) 20%, transparent);
}

.btn-soft-web-pearl:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-pearl-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-pearl-hover-border-color) 28%, transparent);
}

.btn-soft-web-pearl:active:not(:disabled):not(.disabled),
.btn-soft-web-pearl.active {
  background-color: color-mix(in oklab, var(--web-pearl-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-pearl-active-border-color) 34%, transparent);
}

.btn-soft-web-pearl:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-pearl-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-pearl {
  color: var(--web-pearl-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-pearl:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-pearl-bg) 10%, transparent);
}

.btn-ghost-web-pearl:active:not(:disabled):not(.disabled),
.btn-ghost-web-pearl.active {
  background-color: color-mix(in oklab, var(--web-pearl-bg) 16%, transparent);
}

.btn-ghost-web-pearl:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-pearl-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-pearl {
  color: var(--web-pearl-text) !important;
}

.bg-web-pearl {
  background-color: var(--web-pearl-bg) !important;
}

.border-web-pearl {
  border-color: var(--web-pearl-border-color) !important;
}

/* Filled */
.btn-web-neaples {
  color: var(--web-neaples-color);
  background-color: var(--web-neaples-bg);
  border-color: var(--web-neaples-border-color);
}

.btn-web-neaples:hover:not(:disabled):not(.disabled) {
  color: var(--web-neaples-hover-color);
  background-color: var(--web-neaples-hover-bg);
  border-color: var(--web-neaples-hover-border-color);
}

.btn-web-neaples:active:not(:disabled):not(.disabled),
.btn-web-neaples.active {
  color: var(--web-neaples-active-color);
  background-color: var(--web-neaples-active-bg);
  border-color: var(--web-neaples-active-border-color);
  background-image: none;
}

.btn-web-neaples:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-neaples-focus-shadow-rgb), 0.33);
}

.btn-web-neaples:disabled,
.btn-web-neaples.disabled {
  color: var(--web-neaples-disabled-color);
  background-color: var(--web-neaples-disabled-bg);
  border-color: var(--web-neaples-disabled-border-color);
}

/* Outline */
.btn-outline-web-neaples {
  color: var(--web-neaples-text);
  background-color: transparent;
  border-color: var(--web-neaples-border-color);
}

.btn-outline-web-neaples:hover:not(:disabled):not(.disabled) {
  color: var(--web-neaples-hover-color);
  background-color: var(--web-neaples-hover-bg);
  border-color: var(--web-neaples-hover-border-color);
}

.btn-outline-web-neaples:active:not(:disabled):not(.disabled),
.btn-outline-web-neaples.active {
  color: var(--web-neaples-active-color);
  background-color: var(--web-neaples-active-bg);
  border-color: var(--web-neaples-active-border-color);
}

.btn-outline-web-neaples:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-neaples-focus-shadow-rgb), 0.33);
}

.btn-outline-web-neaples:disabled,
.btn-outline-web-neaples.disabled {
  color: var(--web-neaples-text);
  background-color: transparent;
  border-color: var(--web-neaples-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-neaples {
  color: var(--web-neaples-text);
  background-color: color-mix(in oklab, var(--web-neaples-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-neaples-border-color) 20%, transparent);
}

.btn-soft-web-neaples:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-neaples-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-neaples-hover-border-color) 28%, transparent);
}

.btn-soft-web-neaples:active:not(:disabled):not(.disabled),
.btn-soft-web-neaples.active {
  background-color: color-mix(in oklab, var(--web-neaples-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-neaples-active-border-color) 34%, transparent);
}

.btn-soft-web-neaples:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-neaples-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-neaples {
  color: var(--web-neaples-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-neaples:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-neaples-bg) 10%, transparent);
}

.btn-ghost-web-neaples:active:not(:disabled):not(.disabled),
.btn-ghost-web-neaples.active {
  background-color: color-mix(in oklab, var(--web-neaples-bg) 16%, transparent);
}

.btn-ghost-web-neaples:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-neaples-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-neaples {
  color: var(--web-neaples-text) !important;
}

.bg-web-neaples {
  background-color: var(--web-neaples-bg) !important;
}

.border-web-neaples {
  border-color: var(--web-neaples-border-color) !important;
}

/* Filled */
.btn-web-red {
  color: var(--web-red-color);
  background-color: var(--web-red-bg);
  border-color: var(--web-red-border-color);
}

.btn-web-red:hover:not(:disabled):not(.disabled) {
  color: var(--web-red-hover-color);
  background-color: var(--web-red-hover-bg);
  border-color: var(--web-red-hover-border-color);
}

.btn-web-red:active:not(:disabled):not(.disabled),
.btn-web-red.active {
  color: var(--web-red-active-color);
  background-color: var(--web-red-active-bg);
  border-color: var(--web-red-active-border-color);
  background-image: none;
}

.btn-web-red:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-red-focus-shadow-rgb), 0.33);
}

.btn-web-red:disabled,
.btn-web-red.disabled {
  color: var(--web-red-disabled-color);
  background-color: var(--web-red-disabled-bg);
  border-color: var(--web-red-disabled-border-color);
}

/* Outline */
.btn-outline-web-red {
  color: var(--web-red-text);
  background-color: transparent;
  border-color: var(--web-red-border-color);
}

.btn-outline-web-red:hover:not(:disabled):not(.disabled) {
  color: var(--web-red-hover-color);
  background-color: var(--web-red-hover-bg);
  border-color: var(--web-red-hover-border-color);
}

.btn-outline-web-red:active:not(:disabled):not(.disabled),
.btn-outline-web-red.active {
  color: var(--web-red-active-color);
  background-color: var(--web-red-active-bg);
  border-color: var(--web-red-active-border-color);
}

.btn-outline-web-red:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-red-focus-shadow-rgb), 0.33);
}

.btn-outline-web-red:disabled,
.btn-outline-web-red.disabled {
  color: var(--web-red-text);
  background-color: transparent;
  border-color: var(--web-red-border-color);
  opacity: 0.55;
}

/* Soft & Ghost */
.btn-soft-web-red {
  color: var(--web-red-text);
  background-color: color-mix(in oklab, var(--web-red-bg) 14%, transparent);
  border-color: color-mix(in oklab, var(--web-red-border-color) 20%, transparent);
}

.btn-soft-web-red:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-red-hover-bg) 22%, transparent);
  border-color: color-mix(in oklab, var(--web-red-hover-border-color) 28%, transparent);
}

.btn-soft-web-red:active:not(:disabled):not(.disabled),
.btn-soft-web-red.active {
  background-color: color-mix(in oklab, var(--web-red-active-bg) 26%, transparent);
  border-color: color-mix(in oklab, var(--web-red-active-border-color) 34%, transparent);
}

.btn-soft-web-red:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-red-focus-shadow-rgb), 0.22);
}

.btn-ghost-web-red {
  color: var(--web-red-text);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-web-red:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in oklab, var(--web-red-bg) 10%, transparent);
}

.btn-ghost-web-red:active:not(:disabled):not(.disabled),
.btn-ghost-web-red.active {
  background-color: color-mix(in oklab, var(--web-red-bg) 16%, transparent);
}

.btn-ghost-web-red:focus-visible {
  box-shadow: 0 0 0 var(--btn-focus-ring-w) rgba(var(--web-red-focus-shadow-rgb), 0.22);
}

/* Text/BG/Border utilities (senin kullandığın isimlerle) */
.text-web-red {
  color: var(--web-red-text) !important;
}

.bg-web-red {
  background-color: var(--web-red-bg) !important;
}

.border-web-red {
  border-color: var(--web-red-border-color) !important;
}

/* -----------------------
   4) Button Group
------------------------*/
.btn-group {
  display: inline-flex;
  vertical-align: middle;
}

.btn-group>.btn,
.btn-group>.btn-web-green,
.btn-group>.btn-outline-web-green,
.btn-group>.btn-soft-web-green,
.btn-group>.btn-ghost-web-green,
.btn-group>.btn-web-orange,
.btn-group>.btn-outline-web-orange,
.btn-group>.btn-soft-web-orange,
.btn-group>.btn-ghost-web-orange,
.btn-group>.btn-web-deepsky-blue,
.btn-group>.btn-outline-web-deepsky-blue,
.btn-group>.btn-soft-web-deepsky-blue,
.btn-group>.btn-ghost-web-deepsky-blue,
.btn-group>.btn-web-cyan,
.btn-group>.btn-outline-web-cyan,
.btn-group>.btn-soft-web-cyan,
.btn-group>.btn-ghost-web-cyan,
.btn-group>.btn-web-claret,
.btn-group>.btn-outline-web-claret,
.btn-group>.btn-soft-web-claret,
.btn-group>.btn-ghost-web-claret,
.btn-group>.btn-web-chartreuse,
.btn-group>.btn-outline-web-chartreuse,
.btn-group>.btn-soft-web-chartreuse,
.btn-group>.btn-ghost-web-chartreuse,
.btn-group>.btn-web-gunmetal,
.btn-group>.btn-outline-web-gunmetal,
.btn-group>.btn-soft-web-gunmetal,
.btn-group>.btn-ghost-web-gunmetal,
.btn-group>.btn-web-bittersweet,
.btn-group>.btn-outline-web-bittersweet,
.btn-group>.btn-soft-web-bittersweet,
.btn-group>.btn-ghost-web-bittersweet,
.btn-group>.btn-web-majorelle-blue,
.btn-group>.btn-outline-web-majorelle-blue,
.btn-group>.btn-soft-web-majorelle-blue,
.btn-group>.btn-ghost-web-majorelle-blue,
.btn-group>.btn-web-pearl,
.btn-group>.btn-outline-web-pearl,
.btn-group>.btn-soft-web-pearl,
.btn-group>.btn-ghost-web-pearl,
.btn-group>.btn-web-neaples,
.btn-group>.btn-outline-web-neaples,
.btn-group>.btn-soft-web-neaples,
.btn-group>.btn-ghost-web-neaples,
.btn-group>.btn-web-red,
.btn-group>.btn-outline-web-red,
.btn-group>.btn-soft-web-red,
.btn-group>.btn-ghost-web-red {
  position: relative;
  flex: 0 1 auto;
}

.btn-group>.btn:not(:first-child),
.btn-group>.btn-web-green:not(:first-child),
.btn-group>.btn-outline-web-green:not(:first-child),
.btn-group>.btn-soft-web-green:not(:first-child),
.btn-group>.btn-ghost-web-green:not(:first-child),
.btn-group>.btn-web-orange:not(:first-child),
.btn-group>.btn-outline-web-orange:not(:first-child),
.btn-group>.btn-soft-web-orange:not(:first-child),
.btn-group>.btn-ghost-web-orange:not(:first-child),
.btn-group>.btn-web-deepsky-blue:not(:first-child),
.btn-group>.btn-outline-web-deepsky-blue:not(:first-child),
.btn-group>.btn-soft-web-deepsky-blue:not(:first-child),
.btn-group>.btn-ghost-web-deepsky-blue:not(:first-child),
.btn-group>.btn-web-cyan:not(:first-child),
.btn-group>.btn-outline-web-cyan:not(:first-child),
.btn-group>.btn-soft-web-cyan:not(:first-child),
.btn-group>.btn-ghost-web-cyan:not(:first-child),
.btn-group>.btn-web-claret:not(:first-child),
.btn-group>.btn-outline-web-claret:not(:first-child),
.btn-group>.btn-soft-web-claret:not(:first-child),
.btn-group>.btn-ghost-web-claret:not(:first-child),
.btn-group>.btn-web-chartreuse:not(:first-child),
.btn-group>.btn-outline-web-chartreuse:not(:first-child),
.btn-group>.btn-soft-web-chartreuse:not(:first-child),
.btn-group>.btn-ghost-web-chartreuse:not(:first-child),
.btn-group>.btn-web-gunmetal:not(:first-child),
.btn-group>.btn-outline-web-gunmetal:not(:first-child),
.btn-group>.btn-soft-web-gunmetal:not(:first-child),
.btn-group>.btn-ghost-web-gunmetal:not(:first-child),
.btn-group>.btn-web-bittersweet:not(:first-child),
.btn-group>.btn-outline-web-bittersweet:not(:first-child),
.btn-group>.btn-soft-web-bittersweet:not(:first-child),
.btn-group>.btn-ghost-web-bittersweet:not(:first-child),
.btn-group>.btn-web-majorelle-blue:not(:first-child),
.btn-group>.btn-outline-web-majorelle-blue:not(:first-child),
.btn-group>.btn-soft-web-majorelle-blue:not(:first-child),
.btn-group>.btn-ghost-web-majorelle-blue:not(:first-child),
.btn-group>.btn-web-pearl:not(:first-child),
.btn-group>.btn-outline-web-pearl:not(:first-child),
.btn-group>.btn-soft-web-pearl:not(:first-child),
.btn-group>.btn-ghost-web-pearl:not(:first-child),
.btn-group>.btn-web-neaples:not(:first-child),
.btn-group>.btn-outline-web-neaples:not(:first-child),
.btn-group>.btn-soft-web-neaples:not(:first-child),
.btn-group>.btn-ghost-web-neaples:not(:first-child),
.btn-group>.btn-web-red:not(:first-child),
.btn-group>.btn-outline-web-red:not(:first-child),
.btn-group>.btn-soft-web-red:not(:first-child),
.btn-group>.btn-ghost-web-red:not(:first-child) {
  margin-left: -1px;
}

.btn-group>.btn:first-child,
.btn-group>.btn-web-green:first-child,
.btn-group>.btn-outline-web-green:first-child,
.btn-group>.btn-soft-web-green:first-child,
.btn-group>.btn-ghost-web-green:first-child,
.btn-group>.btn-web-orange:first-child,
.btn-group>.btn-outline-web-orange:first-child,
.btn-group>.btn-soft-web-orange:first-child,
.btn-group>.btn-ghost-web-orange:first-child,
.btn-group>.btn-web-deepsky-blue:first-child,
.btn-group>.btn-outline-web-deepsky-blue:first-child,
.btn-group>.btn-soft-web-deepsky-blue:first-child,
.btn-group>.btn-ghost-web-deepsky-blue:first-child,
.btn-group>.btn-web-cyan:first-child,
.btn-group>.btn-outline-web-cyan:first-child,
.btn-group>.btn-soft-web-cyan:first-child,
.btn-group>.btn-ghost-web-cyan:first-child,
.btn-group>.btn-web-claret:first-child,
.btn-group>.btn-outline-web-claret:first-child,
.btn-group>.btn-soft-web-claret:first-child,
.btn-group>.btn-ghost-web-claret:first-child,
.btn-group>.btn-web-chartreuse:first-child,
.btn-group>.btn-outline-web-chartreuse:first-child,
.btn-group>.btn-soft-web-chartreuse:first-child,
.btn-group>.btn-ghost-web-chartreuse:first-child,
.btn-group>.btn-web-gunmetal:first-child,
.btn-group>.btn-outline-web-gunmetal:first-child,
.btn-group>.btn-soft-web-gunmetal:first-child,
.btn-group>.btn-ghost-web-gunmetal:first-child,
.btn-group>.btn-web-bittersweet:first-child,
.btn-group>.btn-outline-web-bittersweet:first-child,
.btn-group>.btn-soft-web-bittersweet:first-child,
.btn-group>.btn-ghost-web-bittersweet:first-child,
.btn-group>.btn-web-majorelle-blue:first-child,
.btn-group>.btn-outline-web-majorelle-blue:first-child,
.btn-group>.btn-soft-web-majorelle-blue:first-child,
.btn-group>.btn-ghost-web-majorelle-blue:first-child,
.btn-group>.btn-web-pearl:first-child,
.btn-group>.btn-outline-web-pearl:first-child,
.btn-group>.btn-soft-web-pearl:first-child,
.btn-group>.btn-ghost-web-pearl:first-child,
.btn-group>.btn-web-neaples:first-child,
.btn-group>.btn-outline-web-neaples:first-child,
.btn-group>.btn-soft-web-neaples:first-child,
.btn-group>.btn-ghost-web-neaples:first-child,
.btn-group>.btn-web-red:first-child,
.btn-group>.btn-outline-web-red:first-child,
.btn-group>.btn-soft-web-red:first-child,
.btn-group>.btn-ghost-web-red:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group>.btn:last-child,
.btn-group>.btn-web-green:last-child,
.btn-group>.btn-outline-web-green:last-child,
.btn-group>.btn-soft-web-green:last-child,
.btn-group>.btn-ghost-web-green:last-child,
.btn-group>.btn-web-orange:last-child,
.btn-group>.btn-outline-web-orange:last-child,
.btn-group>.btn-soft-web-orange:last-child,
.btn-group>.btn-ghost-web-orange:last-child,
.btn-group>.btn-web-deepsky-blue:last-child,
.btn-group>.btn-outline-web-deepsky-blue:last-child,
.btn-group>.btn-soft-web-deepsky-blue:last-child,
.btn-group>.btn-ghost-web-deepsky-blue:last-child,
.btn-group>.btn-web-cyan:last-child,
.btn-group>.btn-outline-web-cyan:last-child,
.btn-group>.btn-soft-web-cyan:last-child,
.btn-group>.btn-ghost-web-cyan:last-child,
.btn-group>.btn-web-claret:last-child,
.btn-group>.btn-outline-web-claret:last-child,
.btn-group>.btn-soft-web-claret:last-child,
.btn-group>.btn-ghost-web-claret:last-child,
.btn-group>.btn-web-chartreuse:last-child,
.btn-group>.btn-outline-web-chartreuse:last-child,
.btn-group>.btn-soft-web-chartreuse:last-child,
.btn-group>.btn-ghost-web-chartreuse:last-child,
.btn-group>.btn-web-gunmetal:last-child,
.btn-group>.btn-outline-web-gunmetal:last-child,
.btn-group>.btn-soft-web-gunmetal:last-child,
.btn-group>.btn-ghost-web-gunmetal:last-child,
.btn-group>.btn-web-bittersweet:last-child,
.btn-group>.btn-outline-web-bittersweet:last-child,
.btn-group>.btn-soft-web-bittersweet:last-child,
.btn-group>.btn-ghost-web-bittersweet:last-child,
.btn-group>.btn-web-majorelle-blue:last-child,
.btn-group>.btn-outline-web-majorelle-blue:last-child,
.btn-group>.btn-soft-web-majorelle-blue:last-child,
.btn-group>.btn-ghost-web-majorelle-blue:last-child,
.btn-group>.btn-web-pearl:last-child,
.btn-group>.btn-outline-web-pearl:last-child,
.btn-group>.btn-soft-web-pearl:last-child,
.btn-group>.btn-ghost-web-pearl:last-child,
.btn-group>.btn-web-neaples:last-child,
.btn-group>.btn-outline-web-neaples:last-child,
.btn-group>.btn-soft-web-neaples:last-child,
.btn-group>.btn-ghost-web-neaples:last-child,
.btn-group>.btn-web-red:last-child,
.btn-group>.btn-outline-web-red:last-child,
.btn-group>.btn-soft-web-red:last-child,
.btn-group>.btn-ghost-web-red:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group>.btn:not(:first-child):not(:last-child),
.btn-group>.btn-web-green:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-green:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-green:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-green:not(:first-child):not(:last-child),
.btn-group>.btn-web-orange:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-orange:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-orange:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-orange:not(:first-child):not(:last-child),
.btn-group>.btn-web-deepsky-blue:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-deepsky-blue:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-deepsky-blue:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-deepsky-blue:not(:first-child):not(:last-child),
.btn-group>.btn-web-cyan:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-cyan:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-cyan:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-cyan:not(:first-child):not(:last-child),
.btn-group>.btn-web-claret:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-claret:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-claret:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-claret:not(:first-child):not(:last-child),
.btn-group>.btn-web-chartreuse:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-chartreuse:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-chartreuse:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-chartreuse:not(:first-child):not(:last-child),
.btn-group>.btn-web-gunmetal:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-gunmetal:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-gunmetal:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-gunmetal:not(:first-child):not(:last-child),
.btn-group>.btn-web-bittersweet:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-bittersweet:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-bittersweet:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-bittersweet:not(:first-child):not(:last-child),
.btn-group>.btn-web-majorelle-blue:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-majorelle-blue:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-majorelle-blue:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-majorelle-blue:not(:first-child):not(:last-child),
.btn-group>.btn-web-pearl:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-pearl:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-pearl:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-pearl:not(:first-child):not(:last-child),
.btn-group>.btn-web-neaples:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-neaples:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-neaples:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-neaples:not(:first-child):not(:last-child),
.btn-group>.btn-web-red:not(:first-child):not(:last-child),
.btn-group>.btn-outline-web-red:not(:first-child):not(:last-child),
.btn-group>.btn-soft-web-red:not(:first-child):not(:last-child),
.btn-group>.btn-ghost-web-red:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* -----------------------
   5) Inner shadow yardımcıları
------------------------*/
.inner-shadow-sm {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06) !important;
}

.inner-shadow {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.inner-shadow-lg {
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

/* -----------------------
   6) Shadow & Radius utilities
------------------------*/
.shadow-0 {
  box-shadow: none !important;
}

.shadow-1 {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08) !important;
}

.shadow-2 {
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.12) !important;
}

.shadow-3 {
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.18) !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-1 {
  border-radius: 0.25rem !important;
}

.rounded-2 {
  border-radius: 0.5rem !important;
}

.rounded-3 {
  border-radius: 0.75rem !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.rounded {
  border-radius: var(--btn-radius) !important;
}

/* -----------------------
   7) Spacing utilities (Bootstrap benzeri)
------------------------*/
.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.me-0 {
  margin-inline-end: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ms-0 {
  margin-inline-start: 0 !important;
}

.mx-0 {
  margin-inline: 0 !important;
}

.my-0 {
  margin-block: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pe-0 {
  padding-inline-end: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.ps-0 {
  padding-inline-start: 0 !important;
}

.px-0 {
  padding-inline: 0 !important;
}

.py-0 {
  padding-block: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.me-1 {
  margin-inline-end: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.ms-1 {
  margin-inline-start: 0.25rem !important;
}

.mx-1 {
  margin-inline: 0.25rem !important;
}

.my-1 {
  margin-block: 0.25rem !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pe-1 {
  padding-inline-end: 0.25rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.ps-1 {
  padding-inline-start: 0.25rem !important;
}

.px-1 {
  padding-inline: 0.25rem !important;
}

.py-1 {
  padding-block: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.me-2 {
  margin-inline-end: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.ms-2 {
  margin-inline-start: 0.5rem !important;
}

.mx-2 {
  margin-inline: 0.5rem !important;
}

.my-2 {
  margin-block: 0.5rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pe-2 {
  padding-inline-end: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.ps-2 {
  padding-inline-start: 0.5rem !important;
}

.px-2 {
  padding-inline: 0.5rem !important;
}

.py-2 {
  padding-block: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.me-3 {
  margin-inline-end: 1rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.ms-3 {
  margin-inline-start: 1rem !important;
}

.mx-3 {
  margin-inline: 1rem !important;
}

.my-3 {
  margin-block: 1rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pe-3 {
  padding-inline-end: 1rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.ps-3 {
  padding-inline-start: 1rem !important;
}

.px-3 {
  padding-inline: 1rem !important;
}

.py-3 {
  padding-block: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.me-4 {
  margin-inline-end: 1.5rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.ms-4 {
  margin-inline-start: 1.5rem !important;
}

.mx-4 {
  margin-inline: 1.5rem !important;
}

.my-4 {
  margin-block: 1.5rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pe-4 {
  padding-inline-end: 1.5rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.ps-4 {
  padding-inline-start: 1.5rem !important;
}

.px-4 {
  padding-inline: 1.5rem !important;
}

.py-4 {
  padding-block: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.me-5 {
  margin-inline-end: 3rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.ms-5 {
  margin-inline-start: 3rem !important;
}

.mx-5 {
  margin-inline: 3rem !important;
}

.my-5 {
  margin-block: 3rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pe-5 {
  padding-inline-end: 3rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-5 {
  padding-inline-start: 3rem !important;
}

.px-5 {
  padding-inline: 3rem !important;
}

.py-5 {
  padding-block: 3rem !important;
}

/* -----------------------
   8) Loading durumu
------------------------*/
.btn.is-loading,
.is-loading.btn-web-green,
.is-loading.btn-outline-web-green,
.is-loading.btn-soft-web-green,
.is-loading.btn-ghost-web-green,
.is-loading.btn-web-orange,
.is-loading.btn-outline-web-orange,
.is-loading.btn-soft-web-orange,
.is-loading.btn-ghost-web-orange,
.is-loading.btn-web-deepsky-blue,
.is-loading.btn-outline-web-deepsky-blue,
.is-loading.btn-soft-web-deepsky-blue,
.is-loading.btn-ghost-web-deepsky-blue,
.is-loading.btn-web-cyan,
.is-loading.btn-outline-web-cyan,
.is-loading.btn-soft-web-cyan,
.is-loading.btn-ghost-web-cyan,
.is-loading.btn-web-claret,
.is-loading.btn-outline-web-claret,
.is-loading.btn-soft-web-claret,
.is-loading.btn-ghost-web-claret,
.is-loading.btn-web-chartreuse,
.is-loading.btn-outline-web-chartreuse,
.is-loading.btn-soft-web-chartreuse,
.is-loading.btn-ghost-web-chartreuse,
.is-loading.btn-web-gunmetal,
.is-loading.btn-outline-web-gunmetal,
.is-loading.btn-soft-web-gunmetal,
.is-loading.btn-ghost-web-gunmetal,
.is-loading.btn-web-bittersweet,
.is-loading.btn-outline-web-bittersweet,
.is-loading.btn-soft-web-bittersweet,
.is-loading.btn-ghost-web-bittersweet,
.is-loading.btn-web-majorelle-blue,
.is-loading.btn-outline-web-majorelle-blue,
.is-loading.btn-soft-web-majorelle-blue,
.is-loading.btn-ghost-web-majorelle-blue,
.is-loading.btn-web-pearl,
.is-loading.btn-outline-web-pearl,
.is-loading.btn-soft-web-pearl,
.is-loading.btn-ghost-web-pearl,
.is-loading.btn-web-neaples,
.is-loading.btn-outline-web-neaples,
.is-loading.btn-soft-web-neaples,
.is-loading.btn-ghost-web-neaples,
.is-loading.btn-web-red,
.is-loading.btn-outline-web-red,
.is-loading.btn-soft-web-red,
.is-loading.btn-ghost-web-red {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.btn.is-loading::after,
.is-loading.btn-web-green::after,
.is-loading.btn-outline-web-green::after,
.is-loading.btn-soft-web-green::after,
.is-loading.btn-ghost-web-green::after,
.is-loading.btn-web-orange::after,
.is-loading.btn-outline-web-orange::after,
.is-loading.btn-soft-web-orange::after,
.is-loading.btn-ghost-web-orange::after,
.is-loading.btn-web-deepsky-blue::after,
.is-loading.btn-outline-web-deepsky-blue::after,
.is-loading.btn-soft-web-deepsky-blue::after,
.is-loading.btn-ghost-web-deepsky-blue::after,
.is-loading.btn-web-cyan::after,
.is-loading.btn-outline-web-cyan::after,
.is-loading.btn-soft-web-cyan::after,
.is-loading.btn-ghost-web-cyan::after,
.is-loading.btn-web-claret::after,
.is-loading.btn-outline-web-claret::after,
.is-loading.btn-soft-web-claret::after,
.is-loading.btn-ghost-web-claret::after,
.is-loading.btn-web-chartreuse::after,
.is-loading.btn-outline-web-chartreuse::after,
.is-loading.btn-soft-web-chartreuse::after,
.is-loading.btn-ghost-web-chartreuse::after,
.is-loading.btn-web-gunmetal::after,
.is-loading.btn-outline-web-gunmetal::after,
.is-loading.btn-soft-web-gunmetal::after,
.is-loading.btn-ghost-web-gunmetal::after,
.is-loading.btn-web-bittersweet::after,
.is-loading.btn-outline-web-bittersweet::after,
.is-loading.btn-soft-web-bittersweet::after,
.is-loading.btn-ghost-web-bittersweet::after,
.is-loading.btn-web-majorelle-blue::after,
.is-loading.btn-outline-web-majorelle-blue::after,
.is-loading.btn-soft-web-majorelle-blue::after,
.is-loading.btn-ghost-web-majorelle-blue::after,
.is-loading.btn-web-pearl::after,
.is-loading.btn-outline-web-pearl::after,
.is-loading.btn-soft-web-pearl::after,
.is-loading.btn-ghost-web-pearl::after,
.is-loading.btn-web-neaples::after,
.is-loading.btn-outline-web-neaples::after,
.is-loading.btn-soft-web-neaples::after,
.is-loading.btn-ghost-web-neaples::after,
.is-loading.btn-web-red::after,
.is-loading.btn-outline-web-red::after,
.is-loading.btn-soft-web-red::after,
.is-loading.btn-ghost-web-red::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(50% - 0.6em);
  top: 50%;
  width: 1.2em;
  height: 1.2em;
  margin-top: -0.6em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: btn-spin 0.65s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* -----------------------
   9) Focus outline reset (mouse users)
------------------------*/
:focus:not(:focus-visible) {
  outline: none;
}

/* -----------------------
   10) Kullanım örnekleri (yorum)
------------------------*/
/*
  <button class="btn btn-web-orange">Kaydet</button>
  <button class="btn btn-outline-web-orange">Dış Çizgi</button>
  <button class="btn btn-soft-web-green btn-sm">Soft</button>
  <button class="btn btn-ghost-web-red btn-lg">Ghost</button>
  <button class="btn btn-web-deepsky-blue btn-icon"><i class="bi bi-plus"></i></button>

  <span class="text-web-green">...</span>
  <div class="bg-web-pearl border-web-pearl p-3 rounded-2">...</div>
*/
/*# sourceMappingURL=utilities.css.map */