.dot_dot-uH8cE {
        padding: 0 var(--spacing-4);
        border-radius: var(--dot-rounding);
        color: var(--dot-default-fg);
        justify-content: center;
        align-items: center;
        display: flex
      }

      .dot_size-xs-uH8cE {
        width: 8px;
        height: 8px
      }

      .dot_size-s-uH8cE {
        width: fit-content;
        min-width: 16px;
        min-height: 16px;
        font-family: var(--font-caption-font-family);
        font-size: var(--font-caption-xs-font-size);
        font-weight: var(--font-caption-xs-semibold-font-weight);
        letter-spacing: var(--font-caption-xs-letter-spacing);
        line-height: var(--font-caption-xs-line-height)
      }

      .dot_size-m-uH8cE {
        width: fit-content;
        min-width: 20px;
        min-height: 20px;
        font-family: var(--font-caption-font-family);
        font-size: var(--font-caption-s-semibold-font-size);
        font-weight: var(--font-caption-s-semibold-font-weight);
        letter-spacing: var(--font-caption-s-semibold-letter-spacing);
        line-height: var(--font-caption-s-semibold-line-height)
      }

      .dot_state-negative-uH8cE {
        background: var(--dot-default-bg)
      }

      .dot_state-warning-uH8cE {
        background: var(--dot-warning-bg)
      }

      .dot_state-positive-uH8cE {
        background: var(--dot-positive-bg)
      }

      .dot_state-informative-uH8cE {
        background: var(--dot-informative-bg)
      }

      .loader_root-z3LxP {
        color: var(--color-content-base-primary);
        animation: .6s linear infinite loader_spin-z3LxP
      }

      @keyframes loader_spin-z3LxP {
        to {
          transform: rotate(1turn)
        }
      }

      .base_content-8pMNn {
        justify-content: center;
        align-items: center;
        gap: var(--spacing-8);
        white-space: nowrap;
        height: 100%;
        display: flex
      }

      .base_content-8pMNn:focus-visible {
        outline: none
      }

      @supports not (width:1lh) {
        .base_content-8pMNn:focus-visible {
          box-shadow: 0 0 0 unset unset
        }
      }

      @supports (width:1lh) {
        .base_content-8pMNn:focus-visible {
          outline: unset solid unset;
          outline-offset: unset
        }
      }

      @supports not selector(:focus-visible) {
        .base_content-8pMNn:focus {
          outline: none
        }

        @supports not (width:1lh) {
          .base_content-8pMNn:focus {
            box-shadow: 0 0 0 unset unset
          }
        }

        @supports (width:1lh) {
          .base_content-8pMNn:focus {
            outline: unset solid unset;
            outline-offset: unset
          }
        }
      }

      .base_root-8pMNn {
        --outline-color: var(--color-solid-brand-primary-alfa-68);
        border-radius: var(--button-radius);
        background-color: unset;
        color: var(--color-content-base-static-white);
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        will-change: transform;
        padding: 0;
        transition: opacity .1s;
        display: inline-block;
        position: relative
      }

      .base_root-8pMNn.base_rounded-8pMNn {
        --button-radius: var(--rounding-max)
      }

      .base_root-8pMNn:active {
        opacity: var(--opacity-item-active)
      }

      .base_root-8pMNn[disabled]:not([disabled=false]) {
        opacity: var(--opacity-item-disabled);
        pointer-events: none
      }

      .base_root-8pMNn.base_loading-8pMNn {
        pointer-events: none
      }

      .base_root-8pMNn.base_loading-8pMNn .base_content-8pMNn {
        opacity: 0
      }

      .base_root-8pMNn:focus-visible {
        outline: none
      }

      @supports not (width:1lh) {
        .base_root-8pMNn:focus-visible {
          box-shadow: 0 0 0 var(--spacing-2)var(--focus-border)
        }
      }

      @supports (width:1lh) {
        .base_root-8pMNn:focus-visible {
          outline: var(--spacing-2)solid var(--focus-border);
          outline-offset: var(--spacing-2)
        }
      }

      @supports not selector(:focus-visible) {
        .base_root-8pMNn:focus {
          outline: none
        }

        @supports not (width:1lh) {
          .base_root-8pMNn:focus {
            box-shadow: 0 0 0 var(--spacing-2)var(--focus-border)
          }
        }

        @supports (width:1lh) {
          .base_root-8pMNn:focus {
            outline: var(--spacing-2)solid var(--focus-border);
            outline-offset: var(--spacing-2)
          }
        }
      }

      .base_root-8pMNn {
        font-family: var(--font-body-font-family);
        font-size: var(--font-body-semibold-font-size);
        font-weight: var(--font-body-semibold-font-weight);
        letter-spacing: var(--font-body-semibold-letter-spacing);
        line-height: var(--font-body-semibold-line-height)
      }

      .base_view-8pMNn {
        width: var(--button-width);
        height: var(--button-height);
        padding: 0 var(--button-padding);
        border-radius: var(--button-radius);
        background: var(--background);
        transition: background .1s;
        position: relative
      }

      @media (hover:hover) and (pointer:fine) {
        .base_view-8pMNn:hover {
          background: var(--background-hover)
        }
      }

      .base_view-8pMNn:focus-visible {
        outline: none
      }

      @supports not (width:1lh) {
        .base_view-8pMNn:focus-visible {
          box-shadow: 0 0 0 unset unset
        }
      }

      @supports (width:1lh) {
        .base_view-8pMNn:focus-visible {
          outline: unset solid unset;
          outline-offset: unset
        }
      }

      @supports not selector(:focus-visible) {
        .base_view-8pMNn:focus {
          outline: none
        }

        @supports not (width:1lh) {
          .base_view-8pMNn:focus {
            box-shadow: 0 0 0 unset unset
          }
        }

        @supports (width:1lh) {
          .base_view-8pMNn:focus {
            outline: unset solid unset;
            outline-offset: unset
          }
        }
      }

      .base_view-8pMNn:after {
        border: 1px solid var(--border-color);
        border-radius: inherit;
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0
      }

      @supports (-webkit-mask-composite:xor) or (mask-composite:exclude) {
        .base_view-8pMNn:after {
          background: var(--border-color-grad, var(--border-color));
          -webkit-mask-composite: xor;
          border: none;
          padding: 1px;
          -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
          mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
          -webkit-mask-position: 0 0, 0 0;
          mask-position: 0 0, 0 0;
          -webkit-mask-size: auto, auto;
          mask-size: auto, auto;
          -webkit-mask-repeat: repeat, repeat;
          mask-repeat: repeat, repeat;
          -webkit-mask-clip: content-box, border-box;
          mask-clip: content-box, border-box;
          -webkit-mask-origin: content-box, border-box;
          mask-origin: content-box, border-box;
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          -webkit-mask-source-type: auto, auto;
          mask-mode: match-source, match-source
        }
      }

      .base_loader-8pMNn {
        justify-content: center;
        align-items: center;
        display: flex;
        position: absolute;
        inset: 0
      }

      .base_size-s-8pMNn {
        --button-height: var(--size-control-s);
        --button-padding: var(--spacing-12);
        --button-radius: var(--button-rounding-s)
      }

      .base_size-s-8pMNn.base_isIcon-8pMNn {
        --button-width: var(--size-control-s);
        --button-padding: var(--spacing-0)
      }

      .base_size-m-8pMNn {
        --button-height: var(--size-control-m);
        --button-padding: var(--spacing-16);
        --button-radius: var(--button-rounding-m)
      }

      .base_size-m-8pMNn.base_isIcon-8pMNn {
        --button-width: var(--size-control-m);
        --button-padding: var(--spacing-0)
      }

      .base_size-xl-8pMNn {
        --button-height: var(--size-control-xl);
        --button-padding: var(--spacing-20);
        --button-radius: var(--button-rounding-l)
      }

      .base_size-xl-8pMNn.base_isIcon-8pMNn {
        --button-width: var(--size-control-xl);
        --button-padding: var(--spacing-0)
      }

      /* Header mobil: logo (bakiye/butonlar üstteki @media ile) */
      @media (max-width: 1024px) {
        .variant-1_content-eiYUC {
          gap: var(--spacing-8);
        }

        .variant-1_compactLogo-eiYUC,
        .variant-1_compactLogo-eiYUC .sn-brand-logo {
          max-height: 20px !important;
          height: 20px;
        }

        .variant-1_trailing-eiYUC {
          gap: var(--spacing-8);
        }
      }

      .base_size-xxl-8pMNn {
        --button-height: var(--size-control-xxl);
        --button-padding: var(--spacing-24);
        --button-radius: var(--button-rounding-xl)
      }

      .base_size-xxl-8pMNn.base_isIcon-8pMNn {
        --button-width: var(--size-control-xxl);
        --button-padding: var(--spacing-0)
      }

      .base_variant-primary-8pMNn {
        --background: var(--button-color-primary-bg-default-grad, var(--button-color-primary-bg-default));
        --background-hover: var(--button-color-primary-bg-hover-grad, var(--button-color-primary-bg-hover));
        --border-color: var(--button-color-primary-bg-border);
        --border-color-grad: var(--button-color-primary-bg-border-grad);
        color: var(--button-color-primary-fg-default)
      }

      .base_variant-primary-8pMNn .base_loader-8pMNn svg {
        color: var(--button-color-primary-fg-default)
      }

      .base_variant-accent-8pMNn {
        --background: var(--button-color-accent-bg-default-grad, var(--button-color-accent-bg-default));
        --background-hover: var(--button-color-accent-bg-hover-grad, var(--button-color-accent-bg-hover));
        --border-color: var(--button-color-accent-bg-border);
        --border-color-grad: var(--button-color-accent-bg-border-grad);
        color: var(--button-color-accent-fg-default)
      }

      .base_variant-accent-8pMNn .base_loader-8pMNn svg {
        color: var(--color-content-base-on-accent)
      }

      .base_variant-neutral-8pMNn {
        --background: var(--color-background-base-alfa-neutral-12);
        --background-hover: var(--color-background-base-alfa-neutral-16);
        --border-color: var(--button-color-neutral-bg-border);
        --border-color-grad: var(--button-color-neutral-bg-border-grad);
        color: var(--color-content-base-primary)
      }

      .base_variant-staticPrimary-8pMNn {
        --background: var(--color-background-base-static-white);
        --background-hover: var(--color-background-base-alfa-static-white-96);
        color: var(--color-content-base-static-black)
      }

      .base_variant-staticPrimary-8pMNn .base_loader-8pMNn svg {
        color: var(--color-content-base-static-black)
      }

      .base_variant-staticSecondary-8pMNn {
        --background: var(--color-background-base-alfa-static-white-20);
        --background-hover: var(--color-background-base-alfa-static-white-32);
        --border-color: var(--button-color-static-secondary-bg-border)
      }

      .base_variant-negative-8pMNn {
        --background: var(--color-solid-sentiment-negative-alfa-12);
        --background-hover: var(--color-solid-sentiment-negative-alfa-16);
        color: var(--color-solid-sentiment-negative-default)
      }

      .base_variant-negative-8pMNn .base_loader-8pMNn svg {
        color: var(--color-solid-sentiment-negative-default)
      }

      .base_badge-8pMNn {
        position: absolute;
        inset-block-start: -2px;
        inset-inline-end: -2px
      }

      .base_isWide-8pMNn {
        width: 100%
      }

      .base_isWide-8pMNn.base_isIcon-8pMNn {
        --button-width: 100%
      }
